Xây dựng trang web thương mại điện tử xem tin tức

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG TRANG WEB THƯƠNG
MẠI ĐIỆN TỬ XEM TIN TỨC

GVHD: TS.NGUYỄN THIÊN BẢO
SVTH : TRẦN NGUYÊN QUANG

SKL010230

Tp. Hồ Chí Minh, tháng 5/2023


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG TRANG WEB THƯƠNG MẠI
ĐIỆN TỬ XEM TIN TỨC

SVTH : TRẦN NGUN QUANG
MSSV : 15110108
KHĨA : 2015
NGÀNH : CƠNG NGHỆ THƠNG TIN
GVHD : TS.NGUYỄN THIÊN BẢO

Tp. Hồ Chí Minh, tháng 05 năm 2023


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
----***---Tp. Hồ Chí Minh, ngày 29 tháng 05 năm 2023

NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên: Trần Nguyên Quang

MSSV: 15110108

Ngành: Công nghệ thông tin

Lớp: 15110CL2

Giảng viên hướng dẫn: TS Nguyễn Thiên Bảo
Ngày nhận đề tài: 24/2/2023

Ngày nộp đề tài: 29/05/2023

1. Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức.

2. Nội dung thực hiện đề tài: Tìm hiểu và phát triển ứng dụng website xem tin
tức trực tuyến bằng công nghệ NestJS và NextJS
3. Sản phẩm: Website xem tin tức trực tuyến

TRƯỞNG NGÀNH

GIẢNG VIÊN HƯỚNG DẪN


CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
***********

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên: Trần Nguyên Quang

MSSV: 15110108

Ngành: Công nghệ thông tin.
Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức
Họ và tên Giáo viên hướng dẫn: TS Nguyễn Thiên Bảo
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
+ Tìm hiểu về hai cơng nghệ chính là NestJS và NextJS.
+ Xây dựng website xem tin tức với các chính năng chính bao gồm: Xem tin tức,
tạo bài viết,hỗ trợ tìm kiếm bài viết theo tên,… và một số chức năng phụ như:
đăng nhập, đăng xuất,…
+ Xây dựng trang quản lý với các chức năng quản lý người dùng quản lý bài viết
và quản lý các tagname.
+ Phân tích thiết kế và xây dựng hệ thống back-end cũng như database giúp lưu
trữ, giao tiếp, truyền tải, xử lý dữ liệu giữa tầng back-end và front-end.
+ Thực hiện deloy các source Back-end, Front-end và Database lên server và kết
nối cơ sở dữ liệu.
+ Viết unitest và các testcase được thực hiện automation dựa trên thư viện
Cypress.
+ Viết tài liệu và chuẩn bị những tài liệu cần thiết để thuyết trình.

2. Ưu điểm:
+ Dự án được viết dựa trên Nextjs 13 và Nestjs 9.0 được coi là những công nghệ
dẫn đầu của ngôn ngữ Javascript hiện nay.
+ Source code Back-end được tạo dựng theo mơ hình Design Partern và Frontend tổ chức cấu trúc file forlder theo cấu trúc con vịt (Duck) một trong những
boilerplate mới nhất hiện nay.
+ Lấy cảm hứng từ hai thuật ngữ công nghệ hiện nay là: Process Web App và
Mobile First, project khóa luận đã tích hợp một số phiên bản giành riêng cho
mobile để mục đích nâng cao trải nghiệm người dùng về website khi xem tin tức.
+ Tích hợp Automation Test với cơng nghệ Cypress vào dự án.


3. Khuyết điểm:
+ Tài liệu chưa mô tả tường tận.
+ Giao diện chưa được chỉnh chu, tỉ mỉ vẫn còn khá rập khuôn với những trang
web xem tin tức hiện nay trên internet, chưa có bước đột phá trong UI/UX.
4. Đề nghị cho bảo vệ hay không?
.......................................................................................................................................
5. Đánh giá loại:
.......................................................................................................................................
6. Điểm: ............................ Bằng chữ:
Tp. Hồ Chí Minh, ngày

tháng

Giáo viên hướng dẫn

năm 20....


CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc
***********

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên: Trần Nguyên Quang

MSSV: 15110108

Ngành: Công nghệ thông tin.
Tên đề tài: Xây dựng trang web thương mại điện tử xem tin tức.
Họ và tên Giáo viên phản biện:
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
2. Ưu điểm
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
3. Khuyết điểm:
............................................................................................................................................
............................................................................................................................................
4. Đề nghị cho bảo vệ hay không?
............................................................................................................................................
5. Đánh giá loại:
............................................................................................................................................
6. Điểm: ............................ Bằng chữ:
Tp. Hồ Chí Minh, ngày

tháng

năm 20

Giáo viên phản biện

i


LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn Khoa Đào Tạo Chất Lượng Cao, trường đại học
Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh đã tạo điều kiện thuận lợi cho chúng em
học tập và thực hiện đồ án tốt nghiệp này.
Chúng em xin chân thành cảm ơn quý thầy cô ở Khoa công nghệ thông đã tận tình
giảng dạy, trang bị cho em những kiến thức quý báu trong thời gian vừa qua.
Chúng em xin bày tỏ lòng biết ơn sâu sắc tới thầy Nguyễn Thiên Bảo đã tận tình
hướng dẫn chỉ bảo chúng em trong quá trình thực hiện đề tài.
Bước đầu tìm hiểu một cơng nghệ mới nhóm em cịn gặp nhiều khó khăn, do vậy
khơng tránh khỏi những thiết sót là điều chắc chắn, nhóm em rất mong nhận được những
ý kiến đóng góp quý báu của thầy, cô và các bạn đọc để giúp bài tiểu luận này được hoàn
thiện hơn.
Đồng thời do trình độ lý luận cũng như kinh nghiệm thực tiễn cịn hạn chế nên
bài báo cáo khơng thể tránh khỏi những thiết sót, em rất mong nhận được những ý kiến
đóng góp từ thầy, cơ để em học thêm được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn
cho bài luận văn tốt nghiệp sắp tới. Một lần nữa nhóm em xin gửi lời cảm ơn chân thành
đến thầy Nguyễn Thiên Bảo đã hướng dẫn tận tình cho nhóm để hồn thành đồ án.
Nhóm em xin chân thành cảm ơn!

Nhóm sinh viên thực hiện
Trần Nguyên Quang

i


TÓM TẮT
Đồ án là một website đọc báo, xem tin tức online Việt Nam và thế giới.Website
vận hành như một website đọc báo online, cung cấp cho người dùng một giao diện dễ
thao tác và được thiết kế theo nguyên lý responsive. Do đó website có thể hoạt động trên
nền tảng web, mobile, tablet. Hệ quản trị của website cung cấp một giao diện chuẩn của
một trang quản lý. giúp admin dễ dàng quản lý thông tin cũng như xử lý các bài đăng
của người dùng một cách tốt nhất,… Website có các chức năng sau:
Về phía người dùng:
-

Xem danh mục bài viết.
Tìm kiếm bài viết.
Xem chi tiết bài viết.
Thêm bài viết mới.
Quản lý profile cá nhân.
Đăng nhập, đăng xuất bằng tài khoản , google hoặc facebook.

Về phía quản trị viên:
-

Quản lý thông tin người dùng
Quản lý bài viết
Quản lý bài viết người dùng chưa phê duyệt
Quản lý danh mục bài viết.
Quản lý thông tin chung của website
Xem các số liệu thống kê

Website sử dụng những công nghệ:
-

Front-end: NextJS, Bootstrap 4

-

Back-end: Nestjs

-

Database: MySQL

ii


SUMMARY
The project is a website to read newspapers and watch online news in Vietnam
and the world. The website operates as an online newspaper website, providing users
with an easy-to-operate interface and is designed according to the principle of
responsiveness. Therefore, the website can work on web, mobile, and tablet platforms.
The management system of the website provides a standard interface of a management
page. help admin easily manage information as well as handle user's posts in the best
way,… The website has the following functions:
On the client side:
-

View the list of posts.
Search posts.

View posts details.
Add new posts.
Manage personal profiles.
Log in, log out with your account, google or facebook.

On the administrator side:
-

Manage user information
Manage articles
Manage unapproved user posts
Manage article categories
Manage general information of the website
View the stats

Website uses technologies:
-

Front-end: NextJS, Bootstrap 4
Back-end: Nestjs
Database: MySQL

iii


MỤC LỤC
LỜI CẢM ƠN .................................................................................................................. i
TÓM TẮT ....................................................................................................................... ii
MỤC LỤC ...................................................................................................................... iv
DANH MỤC CÁC TỪ VIẾT TẮT ............................................................................. vii

DANH MỤC CÁC BẢNG BIỂU ...............................................................................viii
DANH MỤC CÁC HÌNH ẢNH .................................................................................... 1
Chương 1: TỔNG QUAN .............................................................................................. 3
1.1.

Lý do chọn đề tài ............................................................................................... 3

1.2.

Mục đích, nhiệm vụ của đề tài ......................................................................... 3

1.2.1.

Mục đích ..................................................................................................... 3

1.2.2.

Nhiệm vụ ..................................................................................................... 3

1.2.3.

Phương pháp nghiên cứu .......................................................................... 4

1.2.4.

Kết quả đạt được........................................................................................ 4

Chương 2: CƠ SỞ LÝ THUYẾT .................................................................................. 6
2.1.

Giới thiệu về ReactJS ....................................................................................... 6

2.1.1.

ReactJS là gì? ................................................................................................. 6

2.1.2.

Các tính năng của ReactJS ....................................................................... 6

2.1.3.

Tại sao nên sử dụng ReactJS? .................................................................. 7

2.2.

Giới thiệu về NextJS ......................................................................................... 8

2.2.1.

NextJS là gì? ............................................................................................... 8

2.2.2.

Tại sao sử dụng NextJS? ........................................................................... 8

2.3.

Giới thiệu về NodeJS ........................................................................................ 9

2.3.1.

NodeJS là gì? .............................................................................................. 9

2.3.2.

Những ứng dụng viết bằng NodeJS.......................................................... 9

2.3.3.

Lý do chọn NodeJS? ................................................................................ 10

iv


2.4.

Giới thiệu về Framework NestJs: ................................................................. 10

2.4.1.

NestJS là gì? ................................................................................................. 10

2.4.2.

Cấu trúc của NestJS ................................................................................ 11

2.4.3.

Router trong NestJS ................................................................................ 12

2.4.4.

Middleware trong NestJS ........................................................................ 12

2.5.

Giới thiệu về MySQL ..................................................................................... 13

2.5.1.

Giới thiệu về cơ sở dữ liệu SQL .............................................................. 13

2.5.2.

Giới thiệu về MySQL ............................................................................... 14

Chương 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU...................... 16
3.1

Khảo sát hiện trạng ........................................................................................ 16

3.2.

Xác định yêu cầu ............................................................................................. 21

3.2.1.

Lược đồ Use case ...................................................................................... 21

3.2.2.

Mô tả chức năng, kịch bản ...................................................................... 22

Chương 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................................ 38
4.1.

Phân tích hệ thống .......................................................................................... 38

4.1.1.

Chức năng phía Frontend ....................................................................... 38

4.1.2.

Chức năng phía Backend ........................................................................ 42

4.2.

Thiết kế hệ thống ............................................................................................ 45

4.2.1.

Lược đồ lớp ............................................................................................... 45

4.2.2.

Lược đồ tuần tự ........................................................................................ 46

4.3.

Thiết kế cơ sở dữ liệu ..................................................................................... 69

4.3.1.

Sơ đồ ERD ................................................................................................ 69

4.3.2.

Lược đồ cơ sở dữ liệu............................................................................... 70

4.3.3.

Mô tả dữ liệu ............................................................................................ 71

4.4.

Thiết kế giao diện ............................................................................................ 73

4.4.1.

Trang quản trị .......................................................................................... 73

4.4.2.

Trang người dùng .................................................................................... 79

v

Chương 5: CÀI ĐẶT VÀ KIỂM THỬ ....................................................................... 88
5.1.

Cài đặt .............................................................................................................. 88

5.2.

Kiểm thử .......................................................................................................... 90

Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN............................................... 92
6.1.

Kết luận ........................................................................................................... 92

6.2.

Hướng phát triển ............................................................................................ 92

TÀI LIỆU THAM KHẢO ........................................................................................... 93

vi


DANH MỤC CÁC TỪ VIẾT TẮT
SPA: Single Page Application
UI: User Interface
MVC: Model View Controler
JSX: Javascript XML
HTML: Hyper Text Markup Language
API: Application Programming Interface

RDBMS: Relational Database Management System

vii


DANH MỤC CÁC BẢNG BIỂU
Bảng 3.1 Mô tả quản lý người dùng
Bảng 3.2 Mô tả quản lý nhân viên
Bảng 3.3 Mô tả quản lý bài viết
Bảng 3.4 Mô tả Thêm người dùng
Bảng 3.5 Mô tả Thêm nhân viên
Bảng 3.6 Mô tả thêm bài viết
Bảng 3.7 Mơ tả đăng kí thành viên
Bảng 3.8 Mô tả Cập nhật bài viết
Bảng 3.9 Mô tả xóa bài viết
Bảng 3.10 Mơ tả Cập nhật người dùng
Bảng 3.11 Mô tả Cập nhật thông tin nhân viên
Bảng 3.12 Mô tả Quản lý danh mục bài viết.
Bảng 3.13 Mô tả Tăng danh mục bài viết
Bảng 3.14 Mô tả Người dùng đăng nhập
Bảng 3.15 Mô tả Người dùng lấy thông tin chi tiết
Bảng 3.16 Mô tả Người dùng cập nhật thơng tin
------------Bảng 4.1 Chức năng phía FrontEnd
Bảng 4.2 Chức năng phía BackEnd
Bảng 4.3 Bảng dữ liệu Posts
Bảng 4.4 Bảng dữ liệu User
Bảng 4.5 Bảng dữ liệu Tags
Bảng 4.6 Bảng dữ liệu Statistical
Bảng 4.7 Mô tả giao diện trang đăng nhập
Bảng 4.8 Mô tả giao diện trang quản lý

Bảng 4.9 Mô tả giao diện quản lý người dùng

viii


Bảng 4.10 Mô tả giao diện quản lý bài viết người dùng
Bảng 4.11 Mô tả giao diện xem chi tiết bài viết người dùng
Bảng 4.12 Mô tả giao diện quản lý quản lý thống kê danh mục bài viết
Bảng 4.13 Mô tả giao diện trang chủ
Bảng 4.14 Mô tả giao diện trang chủ sau khi đăng nhập
Bảng 4.15 Mô tả giao diện trang đăng nhập
Bảng 4.16 Mô tả giao diện trang thêm bài viết người dùng
Bảng 4.17 Mô tả trang bài viết theo danh mục
Bảng 4.18 Mô tả chi tiết bài viết
Bảng 4.19 Mô tả trang hiển thị thông tin chi tiết bài viết (chân trang)
-----------Bảng 5.1 Kiểm thử sản phẩm

ix


DANH MỤC CÁC HÌNH ẢNH
Hình 1.1 Trang web xem tin tức trực tuyến
--------Hình 2.1 Mơ tả Virtual DOM trong ReactJs
Hình 2.2 Cấu trúc NestJS
--------Hình 3.1 Website vnexpress.net
Hình 3.2 Website zingnews.vn
Hình 3.3 Website Kenh14.vn
Hình 3.4 Lược đồ Use Case
----------Hình 4.1 Lược đồ lớp
Hình 4.2 Admin bảo trì website

Hình 4.3 Admin thêm người dùng
Hình 4.4 Admin cập nhật người dùng
Hình 4.5 Admin xóa người dùng
Hình 4.6 Admin thêm nhân viên
Hình 4.7 Admin cập nhật nhân viên
Hình 4.8 Admin xóa nhân viên
Hình 4.9 Admin tìm bài viết
Hình 4.10 Admin thêm bài viết
Hình 4.11 Admin cập nhật bài viết
Hình 4.12 Admin xóa bài viết
Hình 4.13 Nhân viên thêm người dùng
Hình 4.14 Nhân viên cập nhật người dùng
Hình 4.15 Nhân viên xóa người dùng
Hình 4.16 Nhân viên tìm bài viết

1


Hình 4.17 Nhân viên thêm bài viết
Hình 4.18 Nhân viên cập nhật bài viết
Hình 4.19 Nhân viên xóa bài viết
Hình 4.20 Người dùng đăng ký thành viên
Hình 4.21 Người dùng tìm bài viết
Hình 4.22 Người dùng đăng nhập
Hình 4.23 Người dùng đăng xuất
Hình 4.24 Người dùng thêm bài viết
Hình 4.25 Erd Diagram
Hình 4.26 Database Diagram
Hình 4.27 Giao diện trang đăng nhập
Hình 4.28 Giao diện trang quản lý

Hình 4.29 Giao diện quản lý người dùng
Hình 4.30 Giao diện quản lý bài viết người dùng
Hình 4.31 Giao diện xem chi tiết bài viết người dùng
Hình 4.32 Giao diện quản lý thống kê danh mục bài viết
Hình 4.33 Giao diện trang chủ
Hình 4.34 Giao diện trang chủ sau khi đăng nhập
Hình 4.35 Giao diện trang đăng nhập
Hình 4.36 Giao diện trang thêm bài viết người dùng
Hình 4.37 Trang bài viết theo danh mục
Hình 4.38 Trang chi tiết bài viết
Hình 4.39 Trang hiển thị thơng tin chi tiết bài viết (chân trang)
-----------Hình 5.1 Cấu trúc của FrontEnd
Hình 5.2 Cấu trúc của Backend

2


Chương 1: TỔNG QUAN
1.1.

Lý do chọn đề tài
Hiện nay với một cuộc sống hiện đại, tất cả các ngành đều phát triển nhanh chóng.

Đặc biệt là ngành cơng nghệ thơng tin, mỗi ngày, mỗi tuần có biết bao nhiêu cơng nghệ
mới, ứng dụng mới được nghiên cứu và phát triển để phục vụ con người. Một trong
những ứng dụng mà ai trong chúng ta cũng đã sử dụng qua đó là trang web. Cụ thể, trong
đề tài này là trang web bán hàng. Với nhu cầu cập nhật tin tức ngày càng cao, ngày nay
các doanh nghiệp lớn và nhỏ ln có kế hoạch phát triển ra những website hỗ trợ những
công cụ đăng tin tức giúp người dùng người đọc hiểu hơn về thị trường trong và ngoài
nước hiện nay. Để xây dựng một trang web thì có rất nhiều ngơn ngữ có thể làm được

như: java, php, C#. Và trong thời gian học tập tại trường, nhóm chúng em đã được các
thầy, cô giới thiệu về các ngôn ngữ khác nhau và được thực hành về chúng.
Ở đề tài này nhóm em sẽ sử dụng NestJs và NextJs, là những công nghệ đang
được các công ty sử dụng nhiều và đang dần bùng nổ trong giới lập trình web.
Ứng dụng NestJs và NextJS vào để tài wedsite xem tin tức trực tuyến sẽ giúp cho
việc xem tin tức trực tuyến một cách tiện lợi và nhanh chóng, người dùng sẽ cập nhật tin
tức trong và ngoài nước mọi lúc mọi nơi chỉ với vài thao tác đơn giản trên website.

1.2.

Mục đích, nhiệm vụ của đề tài

1.2.1. Mục đích
Đề tài tập trung nghiên cứu ứng dụng NestJs, NextJs và sự ảnh hưởng đến sự
phát triển của ngành lập trình web hiện nay. Hơn nữa việc nghiên cứu về nó sẽ giúp
nhóm em hiểu rõ hơn về ngơn ngữ lập trình mà nhóm đã chọn.
1.2.2. Nhiệm vụ


Tìm hiểu NestJs và NextJS.

3




Tuân thủ nghiệp vụ của một lập trình viên: Giải quyết vấn đề, tiếp nhận ý kiến

khách hàng, làm việc nhóm, code có chú thích.


Phát triển ứng dụng web với các chức năng: Show tin tức, xem tin tức chi tiết

từng bài viết, đăng nhập, đăng xuất và cho phép người dùng tạo bài viết mới.
1.2.3. Phương pháp nghiên cứu
Trong q trình thực hiện, nhóm em đã nghiên cứu nhiều tài liệu tiếng anh cũng
như tiếng việt ở trên mạng về cơng nghệ nhóm đã chọn, tìm hiểu về cách thức hoạt động.
Sau khi tìm hiểu và nghiên cứu về cơng nghệ trên, nhóm em tiến hành viết mã cho đề tài
theo các bước, vận dụng vào thực tế để làm ra một sản phẩm website xem tin tức trực
tuyến hoàn thiện
1.2.4. Kết quả đạt được
Một trang web xem tin tức trực tuyến sử dụng NestJs và NextJs.

Hình 1.1 Trang web xem tin tức trực tuyến

4


Front end: Sử dụng Framwork của ReactJS là NextJS. Các giao diện tương tác
với người dùng như trang chủ, trang chi tiết bài viết, trang danh sách bài viết theo danh
mục, trang đăng nhập đăng ký, trang thêm bài viết mới.
Back end: Sử dụng Framwork của NodeJS là NestJs.

5