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

ĐẠ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

Công ty thực tập:

Công ty Cổ phần CRB Việt Nam

Người phụ trách:

Nguyễn Đức Anh

Thực tập sinh:

Bành Thanh Sơn

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.

2


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 q 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.

3

NHẬN XÉT CỦA KHOA
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................
.................................................................................................................................................

.................................................................................................................................................

4


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

5


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.

6


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.
Ngồ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, q 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..
7


Ư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 tố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 ở
ngồ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à
8


Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2way 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 hồ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

9


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 hố 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 đó.

10


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 tồ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-viewcontroller (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 chun 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 độ.
11

-

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

12


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
Tuần

1

Cơng việc

Người
hướng

dẫn

Mức
độ
hồn
thành

• Tìm hiểu về cơng ty, cách tổ Anh Đức

100%

Anh

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

2→6

• Tìm hiểu về NextJS
• Tìm hiểu về PHP Phalcon

7 → 10

• Thực hiện Final project

13

Anh Đức
Anh

100%

Anh Đức
Anh

95%

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


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 ()
• 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

14


15


16


17


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

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

a/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7

-

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

a/p/next-nuxt-va-nest-dau-moi-la-nodejs-framework-dang-duoc-lua-chonYWOZrQYNKQ0

18


TỔNG KẾT
Như vậy, chỉ trong vòng hơn hai tháng ngắn ngủi dù chưa hồn thiện được hết website.
Website đã có khá đầy đủ các tính năng đã đề ra ban đầu. Do thời gian có hạn nên tính năng
của website còn đơn giản. Nhưng do ứng dụng phát triển theo framework có tính kế thừa nên
sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn.
Xin chân thành cảm ơn đến các anh chị trong nhóm dự án, cũng như các anh chị trong
đơn vị đào tạo thực nghiệm đã giúp đỡ, hỗ trợ để em có thể hồn thành các nhiệm vụ được
giao trong thời gian thực tập ở công ty.

19