Báo cáo thực tập xây dựng WEBSITE với NEXTJS và PHP PHALCON

Với mong muốn đơn giản hóa quy trình xây dựng và tận dụng hết được lợi thế của công nghệ web, nhiều thư viện và framework đã được cho ra đời trong những năm gần đây, ReactJS, NextJS và P

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP XÂY DỰNG WEBSITE VỚI NEXTJS VÀ PHP PHALCON

TP Hồ Chí Minh, 14 tháng 1 năm 2021

LỜI MỞ ĐẦU

Sự phát triển mạnh mẽ không ngừng của công nghệ thông tin và mạng internet

đã chuyển nhiều ngành nghề từ hình thức hoạt động thủ công sang số hóa và hoạt động trên mạng internet Đóng góp vào công cuộc số hóa đó không thể phủ nhận được tầm quan trọng được của hệ thống các website

Công nghệ web từ khi được tạo ra đến nay đã phát triển vượt bậc, các công nghệ

hỗ trợ cho việc xây dựng website cũng phát triển nhanh như vũ bão, đặc biệt là trong những năm gần đây dẫn hầu hết mọi doanh nghiệp, hay thậm chí là cá nhân, nếu muốn mọi người dễ tiếp cận với mình đều phải cần phát triển một website thân thiện với người dùng, phổ biến và tin cậy

Với mong muốn đơn giản hóa quy trình xây dựng và tận dụng hết được lợi thế của công nghệ web, nhiều thư viện và framework đã được cho ra đời trong những năm gần đây, ReactJS, NextJS và PHP Phalcon là một trong những số đó

Trong thời gian thực tập tại Công ty Cổ phần CRB Việt Nam, em đã được tham gia vào các dự án thực tế và dự án chính thức của công ty, được đóng góp vào những

dự án tham gia từ mặt ý tưởng lẫn kỹ thuật, áp dụng triệt để công nghệ ReactJS, NextJS

và PHP Phalcon

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Cổ phần CRB Việt Nam đã tạo điều kiện cho em

có cơ hội thực tập tại quý công ty

Chỉ trong một thời gian ngắn của khóa thực tập, nhờ sự hướng dẫn của anh phụ trách và các anh chị nhân viên khác của công ty, em đã tiếp thu được nhiều kiến thức quan trọng để có thể xây dựng được một website sử dụng NextJS và PHP Phalcon

Đặc biệt em xin gửi lời cảm ơn và lòng biết ơn sâu sắc đến anh Đức Anh, anh đã

hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong công việc và những khó khăn

về việc làm quen với môi trường làm việc nhóm Hỗ trợ em rất nhiều về các vấn đề cách làm việc trong quá trình xây dựng dự án Anh cũng chỉ dẫn em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu, training cho em những kiến thức quan trọng để có thể làm ra một sản phẩm trong suốt thời gian qua

Và xin cảm ơn thầy (cô) trong khoa Công nghệ phần mềm đã hỗ trợ, tạo điều kiện

em làm bài báo cáo này

NHẬN XÉT CỦA KHOA

Mục Lục

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

CHƯƠNG 1 : GIỚI THIỆU CÔNG TY THỰC TẬP 6

CHƯƠNG 2 : NỘI DUNG THỰC TẬP 7

2.1 Tìm hiểu công ty và chương trình thực tập 7

2.2 Nghiên cứu kĩ thuật 7

2.2.1 ReactJS và JavaScript 7

ReactJS là gì? 7

Ưu điểm? 8

Nhược điểm? 8

2.2.2 NextJS 10

NextJS là gì? 10

Ưu điểm? 10

Nhược điểm? 10

2.2.3 PHP Phalcon 11

PHP Phalcon là gì? 11

Ưu điểm? 11

Nhược điểm? 12

2.3 Thực hiện Project 13

2.4 Lịch làm việc 13

CHƯƠNG 3 : CHI TIẾT DỰ ÁN 14

3.1 Giới thiệu về ứng dụng và công việc thực hiện 14

3.2 Một số giao diện của web 14

TÀI LIỆU THAM KHẢO : 18

TỔNG KẾT 19

CHƯƠNG 1 : GIỚI THIỆU CÔNG TY THỰC TẬP

Công ty Cổ phần CRB Việt Nam được thành lập vào năm 2015 bởi Nguyễn Đức Anh – Tổng giám đốc của Công ty Cổ phần CRB Việt Nam, là công ty công nghệ, đa ngành về bất động sản và xuất bản phần mềm, thương mại điện tử

Hiện công ty đang có văn phòng tại Hà Nôi, Đà Nẵng, Thành phố Hồ Chí Minh Trụ

sở chính đặt tại 68 Lê Thị Riêng, Quận 1, Thành phố Hồ Chí Minh, đội ngũ kỹ thuật và team developer được đặt tại đây

CHƯƠNG 2 : NỘI DUNG THỰC TẬP

Do công ty không có chương trình thực tập chính thức dành cho thực tập sinh nên chương trình thực tập chủ yếu nhằm vào các technical stack đang sử dụng tại công ty và dự

án thực tế trong chương trình thực tập là một phần nhỏ trong dự án lớn của công ty

2.1 Tìm hiểu công ty và chương trình thực tập

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển (như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công

ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả :

Hiểu thêm về công ty, quá trình thành lập và phát triển Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn

2.2 Nghiên cứu kĩ thuật

2.2.1 ReactJS và JavaScript

ReactJS là gì?

React (còn được gọi là Reactjs hay React.js) là một Thư viện javascript được tạo ra bởi sự cộng tác giữa Facebook và Instagram Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML Một trong những đặc trưng duy nhất của Reactjs là việc render dữ liệu không những có thể thực hiện ở tầng server mà còn ở tầng client

Nó cũng sử dụng khái niệm là Virtual DOM (DOM ảo) Virtual DOM tạo ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ Sau đó, ở mỗi vòng lặp, nó liệt kê những thay đổi và sau đó là cập nhật lại sự thay đổi trên DOM của trình duyệt một cách hiệu quả Điều này cho phép ta viết các đoạn code như thể toàn bộ trang được render lại dù thực tế là Reactjs chỉ render những component hay subcomponent nào thực sự thay đổi

Ưu điểm?

- Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các

component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau

- Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt

là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript Ta

có thể thêm vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX

- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt

ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối

ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dung vô hiệu hóa

Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về Bạn có thể tham khảo cách render side servering tại đây

- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện

vì virtual DOM được cài đặt hoàn toàn bằng JS

- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi

Nhược điểm?

- Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là

một MVC framework như những framework khác Đây chỉ là thư viện của

Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và

Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax

- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

- React khá nặng nếu so với các framework khác React có kích thước tương

tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó

Angular là một framework hoàn chỉnh

- Khó tiếp cận cho người mới học Web

Nội dung :

- Tìm hiểu về JavaScript ES6 cơ bản và nâng cao:

o Tính bất đồng bộ của JavaScript: sử dụng callback, promise, async – await

o Sử dụng Babel – Webpack để compile và transpile JS

- Tìm hiểu về ReactJS:

o Nguyên lý cơ bản của ReactJS là sử dụng Virtual DOM – sử dụng một object JS để thể hiện nội dung của DOM tại một thời điểm nào đó

o ReactJS có 2 cách dùng cơ bản là Class Component và Function

Component

o Hiểu được cycle life cơ bản của ReactJS trong class component lẫn function component

o Sử dụng được CRA (create-react-app – một package để tạo nhanh project ReactJS)

Kết quả:

- Nắm bắt cơ bản được ReactJS và JS ES6

- Biết được cách sử dụng và áp dụng vào dự án

- Sử dụng được framework UI Ant Design

-

2.2.2 NextJS

NextJS là gì?

NextJs là một framework nhỏ gọn giúp bạn có thể xây dựng ứng dụng Single Page

App - Server Side Rendering với ReactJs một cách dễ dàng

Ưu điểm?

- Mọi thành phần đều được áp dụng SSR một cách mặc định

- Code được phân cắt tự động để giúp tải trang nhanh hơn

- Không tải lên những phần code không dùng tới

- Định tuyến (routing) phía client một cách đơn giản (page-based)

- Môi trường Webpack-based dev có hỗ trợ Hot Module Replacement (HMR)

- Lấy dữ liệu một cách vô cùng đơn giản

- Có thể triển khai cùng với Express hoặc bất kì server Node.js HTTP nào

- Có thể tuỳ chỉnh cấu hình Babel và Webpack theo ý bạn

- Dễ dàng triển khai ở bất cứ đâu có hỗ trợ Node.js

- Được tích hợp sẵn công cụ tối ưu hoá tìm kiếm (SEO) cho các trang của bạn

Nhược điểm?

- Next.js không phải là Back-end; nếu bạn cần xử lí Back-end như cơ sở dữ liệu,

hệ thống tài khoản, bạn cần làm nó ở 1 ứng dụng tách biệt phía Back-end

- Next vô cùng mạnh mẽ, nhưng nếu dùng nó chỉ để làm một ứng dụng đơn giản thì là điều không cần thiết (Đừng dùng dao mổ trâu để giết ruồi )

- Mọi dữ liệu cần phải được tải ở cả 2 phía client và server

- Việc chuyển giao từ một ứng dụng phía server sang một ứng dụng Next.js chắc chắn không nhanh một chút nào, nó còn phụ thuộc vào project của bạn Đôi khi, bạn sẽ phải bỏ rất nhiều sức lực để làm được điều đó

Nội dung:

- Tìm hiểu về NextJS:

o NextJS là framework dùng ReactJS dùng trong môi trường production

o Sử dụng create-next-app thay vì create-react-app

o NextJS sẽ chia app ra những app nhỏ (gọi là pages – trang)

o NextJS có 2 công đoạn build client-side và server-side độc lập

o Có 2 loại pre-render: Static Generation (generate lúc build time và được tái

sử dụng trong mọi request) và Server-side rendering (được generate theo

mỗi request)

o Dùng next/router và next/link thay vì react-router NextJS hỗ trợ routing client-side toàn diện như react-router

o Hỗ trợ image optimization thông qua next/image giúp hình ảnh thân thiện với SEO hơn

Kết quả:

- Nắm bắt cơ bản được NextJS

- Biết được cách sử dụng và áp dụng vào dự án

2.2.3 PHP Phalcon

PHP Phalcon là gì?

Phalcon hay còn được gọi là Phalcon framework, được hiểu là một PHP framework

có hiệu năng cao ra mắt vào năm 2012 Nó được xây dựng dựa trên kiến trúc model-view-controller (MVC) architecture, đóng vai trò là một mã nguồn mở

Phalcon được viết dựa trên ngôn ngữ C và Zephir – ngôn ngữ gần với ngôn ngữ hệ thống nhất nên có tốc độ và hiệu suất cao nhất dù ra đời muộn Phalcon rất dễ tùy chỉnh nên dù không có kiến thức chuyên sâu về ngôn ngữ lập trình C, bạn cũng có thể phát triển ứng dụng PHP

Ưu điểm?

- Phalcon là một thư viên có tính năng rất phong phú được viết bằng C biên dịch thành một PHP Extension Điều này giúp tăng tốc độ xử lý, giảm tối đa bộ nhớ tiêu thụ khi có nhiều truy cập đồng thời Phalcon rất là dễ học, dễ lập trình so với các PHP Framewok khác Lập trình viên vẫn dùng ngôn ngữ lập trình PHP thông thường Những hàm trong thư viện Phalcon sẽ được tối ưu tốc độ

- Các tính năng có sẵn trong Phalcon cực phong phú ORM, Caching (ra file, bộ nhớ, Redis), hỗ trợ nhiều loại CSDL: MySQL, Postgresql, Oracle, MongoDB , quản lý người dùng, phân quyền, logging, event manager (tạo hook để can thiệp như trong Drupal và WordPress),… Cộng đồng sử dụng, tham gia đóng góp cải tiến mã nguồn đang tăng nhanh

Nhược điểm?

- Phalcon không chạy được trên môi trường Shared Hosting Có lẽ đây chính là nhược điểm lớn nhất Phalcon PHP, nhưng cá nhân tôi thấy thì ngày nay việc sở hữu một VPS là chuyện đơn giản, do đó không có lý do gì mà không thử Phalcon PHP

- Có nhiều người cho rằng Phalcon PHP viết bằng C nên việt Debug nó là rất khó khăn, thật may mắn là trong phiên bản Phalcon 2.0 viết lại bằng ngôn ngữ lập trình Zephir nên đều đó đã giải quyết vấn đề trên

Nội dung:

- Tìm hiểu về Phalcon PHP:

o Phalcon PHP là một thư viện PHP được đóng gói dưới dạng PHP extension,

viết bằng ngôn ngữ C – Zephir gần ngôn ngữ hệ thống nên có hiệu suất cao

o Phalcon hỗ trợ app MVC hoặc micro hoàn chỉnh, hỗ trợ module hóa project

o Hỗ trợ dependency injection

o Cho phép viết ứng dụng CLI chứ không đơn thuần chỉ là web

o Template Engine sử dụng Volt – một biến thể từ Twig

o Phalcon hỗ trợ ORM tốt, hỗ trợ builder thông qua ngôn ngữ PHQL gần

giống SQL

o Có công cụ CLI phalcon-devtool để hỗ trợ generate nhanh project,

controllers, models,… cũng như tạo migration và chạy migration

Kết quả:

- Nắm bắt cơ bản được Phalcon PHP

- Biết được cách sử dụng và áp dụng vào dự án để viết Restful API

2.3 Thực hiện Project

Sau hơn một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ bản và nâng cao về ReactJS, NextJS và PHP Phalcon Mentor đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project sử dụng những công nghệ nêu trên

Chi tiết đồ án sẽ được nói ở phần sau

2.4 Lịch làm việc

hướng dẫn

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

1 • Tìm hiểu về công ty, cách tổ

chức của công ty

• Làm quen với các công cụ làm việc trong công ty

• Tìm hiểu về ReactJS, PHP và Javascript

Anh Đức Anh

100%

2 → 6 • Tìm hiểu về NextJS

• Tìm hiểu về PHP Phalcon

Anh Đức Anh

100%

7 → 10 • Thực hiện Final project Anh Đức

Anh

95%

CHƯƠNG 3 : CHI TIẾT DỰ ÁN

3.1 Giới thiệu về ứng dụng và công việc thực hiện

• Giới thiệu

Đây là một website đăng tin rao vặt bất động sản dựa trên project chính thức hiện tại đang hoạt động của công ty (https://nhadatso.com)

• Công việc thực hiện

o Xây dựng giao diện theo yêu cầu của PM và cấp trên

o Hiện thực các trang bằng NextJS và ReactJS

o Viết backend API bằng PHP Phalcon để tương tác với CSDL, lưu thông tin người dùng, bài đăng,…

o Gắn API vào frontend

• Kết quả đạt được

- Hiểu được ưu nhược điểm của các công nghệ

- Cách project thực tế được implement

- Có được project sử dụng cơ bản

3.2 Một số giao diện của web

TÀI LIỆU THAM KHẢO :

- ReactJS ưu và nhược điểm:

https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7

- Next, Nust và Nuxt đâu mới là framework đáng được lựa chọn

https://viblo.asia/p/next-nuxt-va-nest-dau-moi-la-nodejs-framework-dang-duoc-lua-chon-YWOZrQYNKQ0