TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN GIỮA KỲ
LẬP TRÌNH WEB VÀ ỨNG DỤNG

Single Page Application

Người hướng dẫn : GV. MAI VĂN MẠNH

Người thực hiện : LẠC MINH LONG – 51900758

TRẦN BẢO KHA-51900751

ĐOÀN THÁI MINH HOÀNG-51900335

Khoá : K23

THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021

 TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM
TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG
KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN GIỮA KỲ
LẬP TRÌNH WEB VÀ ỨNG DỤNG

Single Page Application

Người hướng dẫn : GV. MAI VĂN MẠNH

Người thực hiện : LẠC MINH LONG – 51900758

TRẦN BẢO KHA-51900751

ĐOÀN THÁI MINH HOÀNG-51900335

Khoá : K23

1
 THÀNH PHỐ HỒ CHÍ MINH, NĂM 2021

LỜI CẢM ƠN

Trước tiên, em xin gửi lời chân thành và lòng biết ơn sâu sắc đến Thầy. Mai Văn
Mạnh. Người thầy đã luôn hỗ trợ và hướng dẫn tận tình cho em trong suốt quá trình
nghiên cứu và hoàn thành đồ án giữa kì.
Bên cạnh đó, em cũng xin gửi lời cảm ơn đến khoa Công Nghệ Thông Tin trường
Đại học Tôn Đức Thắng vì đã tạo điều kiện cho em được học tập và nghiên cứu môn học
này. Khoa đã luôn sẵn sàng chia sẻ và đem tới những kiến thức bổ ích cho em cũng như
các kinh nghiệm khi tra cứu, tham khảo tài liệu. Điều đó đã giúp ích không chỉ cho việc
thực hiện và hoàn thành đề tài nghiên cứu mà còn giúp ích cho việc học tập, rèn luyện
trong quá trình thực hành tại trường Đại học Tôn Đức Thắng nói chung.
Cuối cùng, sau khoảng thời gian học tập trên lớp, em đã hoàn tất đề tài nghiên cứu
nhờ vào sự hướng dẫn, giúp đỡ và những kiến thức mà quý thầy cô đã mang đến. Do giới
hạn về mặt kiến thức và khả năng lý luận nên em vẫn còn nhiều thiếu sót và hạn chế,
kính mong sự chỉ dẫn và đóng góp từ quý thầy cô giáo để bài nghiên cứu này của em
được hoàn thiện hơn. Hơn nữa, nhờ những lời góp ý từ thầy cô và bạn bè, em sẽ hoàn
thành tốt hơn ở những bài nghiên cứu tiếp theo trong tương lai. Em mong quý thầy cô và
các bạn bè – những người luôn quan tâm và hỗ trợ – luôn tràn đầy sức khỏe và sự bình
an.

EM XIN CHÂN THÀNH CẢM ƠN !

2
 ĐỒ ÁN ĐƯỢC HOÀN THÀNH

TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Tôi xin cam đoan đây là sản phẩm đồ án của riêng tôi và được sự hướng dẫn
của Thầy. Mai Văn Mạnh. Các nội dung nghiên cứu, kết quả trong đề tài này là trung
thực và chưa công bố dưới bất kỳ hình thức nào trước đây. Những số liệu trong các
bảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá được chính tác giả thu thập
từ các nguồn khác nhau có ghi rõ trong phần tài liệu tham khảo.

Ngoài ra, trong đồ án còn sử dụng một số nhận xét, đánh giá cũng như số liệu
của các tác giả khác, cơ quan tổ chức khác đều có trích dẫn và chú thích nguồn gốc.

Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu trách nhiệm
về nội dung đồ án của mình. Trường đại học Tôn Đức Thắng không liên quan đến
những vi phạm tác quyền, bản quyền do tôi gây ra trong quá trình thực hiện ( nếu có ).

TP. Hồ Chí Minh, ngày tháng năm 2021

Tác giả

( ký tên và ghi rõ họ tên )

Lạc Minh Long

Trần Bảo Kha

Đoàn Thái Minh Hoàng

3
 PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN

Phần xác nhận của giảng viên hướng dẫn

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
______

Tp. Hồ Chí Minh, ngày tháng năm 2021

( kí và ghi họ tên )

Phần đánh giá của giảng viên chấm bài

_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
______

Tp. Hồ Chí Minh, ngày tháng năm 2021

( kí và ghi họ tên )

4
MỤC LỤC

SINGLE PAGE APPLICATION 5

1.1 Tổng quan sơ lược về Single Page Application 5

1.2 Sự ra đời của Single Page Application 6

1.3 Cấu Trúc và Nguyên Lý hoạt động của một SPA 6

1.4 Khác Biệt giữa SPA và Web truyền thống 7

1.5 Ưu điểm của Single Page Application 8

1.6 Bất lợi của Single Page Application 9

2.1 Phần Demo 12

TÀI LIỆU THAM KHẢO 22

5
Single Page Application

1.1 Tổng quan sơ lược về SPA

Single Page Application (hay còn được biết đến với cái tên viết tắt: SPA) là
một ứng dụng web hoặc trang web tương tác với người dùng bằng cách tự động viết
lại hiện trang web với dữ liệu mới từ máy chủ web , thay vì phương pháp mặc định của
một trình duyệt web tải toàn bộ trang mới. Mục đích là chuyển nhanh hơn mà làm cho
trang web cảm giác giống như một bản ứng dụng .

Trong một SPA, việc làm mới trang không bao giờ xảy ra; thay vào đó, tất cả mã
HTML , JavaScript và CSS cần thiết hoặc được trình duyệt truy xuất với một lần tải
trang, hoặc các tài nguyên thích hợp được tải động và thêm vào trang khi cần thiết,
thường là để đáp ứng các hành động của người dùng.

Single Page Application còn được tìm thấy trong một kiểu lập trình ứng dụng web rất
thân thiện với thiết bị di động và người dùng sẽ không cần phải load lại trang trong
quá trình sử dụng ngay trên trình duyệt. Nếu bạn đang sử dụng Facebook, Youtube,
Google Search, Gmail, Twitter,… Tất cả những ứng dụng này đều là những ví dụ điển
hình cho Single Page Application. Với Single Page Application, người dùng sẽ có trải
nghiệm tối ưu nhất, tận hưởng môi trường một cách tự nhiên chỉ việc “lướt lướt” trên 1
trang duy nhất mà không cần phải load lại trang.

6
1.2 Sự ra đời của Single Page Application

Trước đây, khi chưa có Single Page Application, việc lập trình website sẽ sử dụng mô
hình MVC. Phương thức hoạt động sẽ tập trung về phía server: client gửi request cho
server, server xử lý và response lại client.
Thông thường, server sẽ trả lại kết quả là cả 1 trang web hoàn chỉnh với HTML, CSS
và cả JavaScript. Trong khi đó, client gần như không phải làm gì cả. Thao tác phản hồi
đầy đủ này của server được gọi là SSR – Server Side Rendering.
Đến giai đoạn tiếp theo, website ngày càng phức tạp hơn và yêu cầu của người dùng
cao hơn. Điều này buộc các nhà phát triển phải tập trung vào trải nghiệm người dùng.
SSR không còn đáp ứng được yêu cầu như trước đây nữa.

Nếu muốn tối ưu hóa trải nghiệm người dùng, ứng dụng/ website sẽ buộc phải giảm tải
bớt công việc trên server và tập trung xử lý ở client để gia tăng tốc độ, gia tăng trải
nghiệm.

jQuery xuất hiện như một “cứu tinh” để hỗ trợ cho “việc ai người ấy làm” giữa server
và client. Tuy nhiên, giai đoạn này, jQuery vẫn còn thô sơ và chưa đáp ứng được
những thao tác xử lý phức tạp tại client.
Và Single Page Application ra đời như một hệ quả tất yếu cho việc lập trình web nhằm
để gia tăng những thao tác xử lý tại client, giảm tải cho server. Single Page Application
là một công nghệ khiến công việc lập trình web trở nên phức tạp hơn khi phân tách
frontend và backend ra.

Ngoài ra, các lập trình viên frontend còn phải quan tâm đến cấu trúc dự án, các mô
hình thiết kế thay vì chỉ tập trung UX, UI như trước đây

1.3 Cấu trúc hoạt đông của một SPA và nguyên lý hoạt động

Có rất nhiều nội dung được lặp lại trên đa số các website. Một số thành phần vẫn được
giữ nguyên khi người dùng điều hướng trong web (header, footer, logo, navigation
bar…), một số thì chỉ nằm ở những vị trí cố định (filter bar, banner), và còn rất nhiều
layout và template được lặp lại (blog, self-service, thiết lập của google mail). SPA sử

7
dụng hiệu quả những sự lặp lại như này và nhờ vào việc linh động viết lại những thành
phần cần thiết (có thay đổi) trong trang hiện tại thay vì tải lại toàn bộ 1 trang mới từ
Server, SPA loại bỏ sự ngắt quãng khi người dùng đang trải nghiệm những trang nối
tiếp nhau, tạo cho người dùng cảm giác như đang sử dụng 1 ứng dụng trên desktop.

1.4 Khác biệt trong hoạt động của SPA và Web truyền thống

Có 2 điểm lớn tạo nên sự khác biệt trong cách hoạt động của web SPA so với web
truyền thống là:

● Web SPA có backend và frontend rõ ràng.

o Website code theo kiểu truyền thống chỉ cần 1 dự án, nhưng là môt dự án
lớn và phức tạp, do đó xử lý khá cồng kềnh. Website code theo kiểu SPA có
thể cần 2 dự án: 1 dự án cho backend và 1 dự án cho frontend tách bạch

o Việc trao đổi dữ liệu giữa backend và frontend thường qua các Restful API,
định dạng dữ liệu thường là JSON.

o Cách hoạt động giữa frontend và backend của website kiểu SPA có thể hình
dung như sau:

o Khi truy cập vào các trang web, frontend sẽ tiếp nhận request. Nếu lập trình
truyền thống cho backend thực hiện routing, thì web SPA sẽ cho thực hiện ở
frontend.

o Sau khi tiếp nhận request, frontend phân tích được người dùng web muốn sử
dụng tính năng nào, cần những dữ liệu gì, từ đó gửi request tới backend, yêu
cầu backend trả dữ liệu mong muốn.

o Backend trả dữ liệu frontend (thường là dạng json), frontend dựa vào dữ liệu
này để render ra nội dung trang web hoàn chỉnh (Thao tác này được gọi là
Client Side Rendering)

● Web SPA sẽ đẩy mạnh xử lý ở frontend.

8
 o Với web SPA, frontend đảm nhiệm hoàn toàn việc render giao diện và xử lý
các thay đổi trên giao diện, trong khi đó, backend chỉ làm theo yêu cầu trả
dữ liệu cần thiết cho frontend.

o Frontend của web SPA thường là một framework hoặc một thư viện về SPA.
Những framework hay thư viện này được code bằng JavaScript, và giúp
developer dễ dàng phát triển SPA hơn.

o Để xử lý các yêu cầu phức tạp ở frontend, các framework SPA cũng hoạt
động theo một kiến trúc cụ thể, có thể là MVC (Angular), MV-VM (VueJS,
ReactJS),… Nhìn chung, code SPA bằng các framework chuyên về SPA sẽ
đơn giản hơn nhiều so với việc code bằng jQuery hoặc bằng các kiến trúc
khác thường thấy.

1.5 Ưu điểm của Single Page Application:

Load 1 lần cho từng file HTML, CSS, JS

• Đối với SPA, sau lần tải đầu tiên, Server sẽ không gửi thêm HTML nào cho
client vì client đã download tất cả từ đầu.

• Server gửi cấu trúc của trang và browser của bạn sẽ render giao diện người
dùng (UI) trên cấu trúc ấy.Sau đó, khi bạn click vào bất cứ đâu, SPA sẽ gửi yêu
cầu về dữ liệu và cấu trúc, Server sẽ gửi lại những nguyên liệu thô cần thiết để
browser của bạn dùng chúng trong việc render vùng giao diện cần cập nhật mới
mà không phải làm mới lại cả trang.

• Khả năng thay đổi nhanh chóng các thành phần con bên trong giúp cho SPA cực
kì hiệu quả cho các trang có tính điều hướng cao và sử dụng lặp lại các
template.

Hạn chế câu truy vấn đến Server

9
 • Bởi vì Server không cần phải tốn thời gian và hiệu năng để vẽ lên toàn bô trang,
SPA giảm tải sự ảnh hưởng trên toàn Server – đồng nghĩa với việc bạn có thể
tiết kiệm chi phí khi dùng ít Server hơn cho cùng 1 lưu lượng yêu cầu

Tăng trải nghiệm người dùng

• Ngày càng nhiều tính năng được xây dựng như các dịch vụ mang tính module
(kiến trúc microservice) có thể được cập nhật một cách độc lập, nó trở nên dễ
dàng hơn để thử nghiệm chúng được hiển thị và sử dụng như thế nào.

• Mặc dù rất nhiều người chỉ muốn phát triển trên một ngôn ngữ lập trình nhất
định (rất nhiều SPA framework sử dụng javascript) nhưng nhờ có các API, SPA
bạn dựng trên một ngôn ngữ có thể làm việc tốt trên các dịch vụ từ backend
được phát triển bằng nhiều ngôn ngữ lập trình khác nhau.

Giảm thiểu thời gian phát triển và chi phí hạ tầng

• Angular, React, Vue, ... là những framework phổ biến được lựa chọn để tạo ra
các SPA. Ngoài việc chứa kiến trúc để xây dựng website theo vòng đời SPA,
các framework này còn cung cấp một bộ các component thiết yếu được tích hợp
sẵn và các component của những nhà phát triển khác đã đóng góp trên cộng
đồng. Nếu bạn nghĩ về nó giống như xây một ngôi nhà, bạn có thể trộn đất sét,
làm khô gạch, khai thác và tạo khuôn thép cho chính mình - hoặc bạn có thể sử
dụng gạch và đường ống mà người khác đã thiết kế và tập trung thời gian vào
thứ tạo nên ngôi nhà của bạn độc nhất. Nhờ vào tính kế thừa này mà các dự án
SPA có thể giảm thời gian phát triển, cũng như chi phí hạ tầng và có khả năng
nâng cấp dài hạn

1.6 Bất lợi của Single Page Application:

Content sẽ không có độ chi tiết cao

10
 • Ví dụ điển hình nhất chính là nội dung trên Facebook. Bạn có thể thấy rằng, các
bài viết trên Facebook chỉ hỗ trợ nội dung hình ảnh, nội dung chữ thông
thường. Nếu bạn muốn có các ký tự đặc biệt hay chia heading như bài viết này,
bạn sẽ cần phải sử dụng bên thứ 3 để can thiệp.Và hiện tại, Facebook đã hỗ trợ
bạn thực hiện in đậm, in nghiêng, chia heading,… cùng các thao tác khác trên
máy tính.

Không phù hợp với các lập trình viên thiếu kinh nghiệm frontend

• Là một lập trình viên thiên về xử lý backend, bạn sẽ choáng nếu không có kinh
nghiệm về frontend như HTML, JavaScript, CSS, ajax,… khi triển khai Single
Page Application.Vì vậy, bạn sẽ buộc phải học thêm về frontend để làm việc.

Gia tăng khối lượng công việc

• Như đã đề cập trong bài viết, một dự án website hướng đến Single Page
Application sẽ phải tách ra thành 2 dự án backend và frontend riêng biệt. Điều
này sẽ khiến các doanh nghiệp nhỏ với ít nhân lực trở nên “bất lực” khi khối
lượng công việc tăng gấp đôi so với bình thường.

2.1 Phần demo

Chủ đề nhóm lựa chọn là: Giới thiệu về tuyển nhân sự của công ty Ritatech – Công ty
chuyên đầu tư và phát triển công nghệ. Nhóm sử dụng angular để xây dựng single

11
page application.

Cách hoạt động của page

Để có thể chạy được web, ta cần tải và cài đặt trước Node.js và Angular CLI.

Sau khi đã cài đặt, ta mở command line và nhập câu lệnh trỏ tới thư mục chứa project
thực hiện bằng Angular, sau đó nhập như sau để bắt đầu chạy Angular trên project này:

12
Lúc này Angular đã được chạy, chúng ta có thể tiến hành chạy trang web qua đường
dẫn http://localhost:4200/crisis-list.

Angular cung cấp cách hoạt động khá khác so với việc tự tạo trang web SPA bằng
JavaScript thông thường, ban đầu có thể sẽ hơi rối và phức tạp trong khâu cài đặt cũng
như setup, tuy nhiên Angular là một công cụ thực sự tốt và tiện dụng để tạo web SPA.
Cách hoạt động của SPA cũng tương đối dễ hiểu, chúng ta sẽ có một trang chính là

13
index.html như sau:

Tại trang này, ta có thể setup các thư viện như bootstrap để dùng cho toàn bộ các trang
khác trong dự án. Trang tiếp theo được trỏ tới trong file index này là approot, đây là
selector để trỏ tới trang app.component.html, tương tự selector của từng đối tượng
trong Angular sẽ được thể hiện trong file xxx.component.ts . Quay trở lại với trang
app.component.html, mục đích của trang này giống như một thanh navigation trên đầu
trang web, có nhiệm vụ trỏ tới các lựa chọn để hiển thị các trang sau đó cho người
dùng mà không cần phải load lại (SPA).

14
Đoạn code trên sẽ hiển thị được thanh như sau:

Và phía dưới thanh này sẽ là nội dung mà trang này được trỏ tới tiếp theo, ở trong
project này là heroes-list và crisis-list:

Trang chủ:

15
Trang để lại thông tin liên lạc cho doanh nghiệp:

Ngoài cách trỏ bằng selector như trên, ta còn có thể gán trực tiếp link dẫn tới các trang
khác một cách trực tiếp trên giao diện web. Ví dụ như tại trang crisis-list (Home), ta
tiếp tục được trỏ tới các trang khác lần lượt là intro, cardone, cardtwo và cardthree,
đây là các trang để hiển thị các giao diện khác nhau trên web, được gắn tương ứng với
các nút hiển thị trên trang.

Trang thông tin doanh nghiệp:

16
Trang giới thiệu nhân sự:

Trang sứ mệnh doanh nghiệp:

17
Trang nguồn lực doanh nghiệp:

18
Mỗi trang như vậy sẽ có một folder chứa file html, css và ts riêng của từng trang,
nghĩa là ta có thể tùy biến giao diện trên từng trang này.

Tổng kết lại, cơ chế hoạt động của một web SPA được tạo bằng Angular rất đơn giản.
Chúng ta sẽ khởi đầu với một trang index, sau đó lần lượt các trang khác trên web sẽ
có folder riêng để tùy biến, từng trang cũng sẽ có các selector khác nhau, hỗ trợ hiệu
quả trong việc trỏ từ các trang khác tới, hoặc cũng có thể trỏ tới bằng link, tất cả điều
đó khiến việc làm web SPA trở nên đơn giản hơn rất nhiều và dễ dàng hơn trong việc
tạo thêm trang mới, phát triển project. Tuy nhiên bên cạnh đó là bởi sự mạnh mẽ và hỗ
trợ rất nhiều của mình, Angular chứa cực kỳ nhiều file và nhóm không thể dùng hết
các tính năng đó trong dự án ở quy mô này, điều đó khiến Angular chỉ thực sự hợp đối
với các project có quy mô lớn hơn, lúc đó framework này mới thực sự có cơ hội biểu
diễn hết năng lực của mình.

19
20
 TÀI LIỆU THAM KHẢO

[1] https://www.stdio.vn/javascript/spa-single-page-application-la-gi-3jnH51

[2] https://wiki.tino.org/single-page-application-la-gi/

[3] https://thietkewebaio.com/single-page-application-la-gi/

[4] https://material.angular.io/

21