ĐẠI HỌC BÁCH KHOA HÀ NỘI

ĐỒ ÁN TỐT NGHIỆP
Ứng dụng thiết kế Website trực tuyến

NGUYỄN TIẾN DŨNG

dung.nt183720@sis.hust.edu.vn

Ngành Công nghệ thông tin và truyền thông

Giảng viên hướng dẫn: PGS. TS. Trịnh Văn Loan

Chữ kí GVHD

Khoa: Kỹ thuật máy tính

Trường: Công nghệ Thông tin và Truyền thông

HÀ NỘI, 01/2024
 LỜI CẢM ƠN

Em xin chân thành tri ân và bày tỏ lòng biết ơn sâu sắc vì sự ủng hộ và động
viên mà mọi người đã dành cho em trong quá trình thực hiện ĐATN
Người lời yêu thương, những lời động viên và niềm tin không ngừng đã truyền
động lực cho em vượt qua khó khăn. Gia đình yêu thương, sự hỗ trợ và hy vọng
vững chắc từ các bậc phụ huynh, bạn bè đã là động lực to lớn để em có động lực
thực hiện ĐATN này
Em xin cảm ơn PGS.TS Trịnh Văn Loan đã chỉ dẫn tận tâm, sâu sắc, cho em
những lời khuyên, định hướng để hoàn thành được ĐATN này
Em biết ơn tất cả, vì những người và những kỷ niệm này đã làm cho hành trình
ĐATN trở thành một chặng đường đáng nhớ trong cuộc đời em.
 TÓM TẮT NỘI DUNG ĐỒ ÁN

Đồ án của em tập trung vào việc phát triển một ứng dụng web giúp người dùng
thiết kế website một cách nhanh chóng và hiệu quả. Lựa chọn này được đưa ra dựa
trên nhu cầu ngày càng tăng của các doanh nghiệp và cá nhân muốn thiết kế và
quản lý nội dung website một cách nhanh chóng và chuyên nghiệp. Ngoài ra ứng
dụng cung cấp khả năng triển khai trực tiếp lên môi trường internet, đồng thời hỗ
trợ tối ưu hóa SEO để đảm bảo sự hiệu quả trong việc thu hút lượt truy cập.
Giải pháp của em không chỉ giúp người dùng tạo ra website một cách dễ dàng
mà còn cung cấp khả năng quản lý dữ liệu động. Điều này mang lại sự linh hoạt và
tiện lợi cho người dùng khi họ có thể tạo và quản lý nội dung một cách linh hoạt.
Hơn nữa, ứng dụng của em cho phép người dùng tạo các báo cáo động để theo dõi
và kiểm tra biến động của dữ liệu, từ đó đưa ra quyết định và điều chỉnh chiến lược
website một cách hiệu quả.
Đồ án tốt nghiệp của em đóng góp vào việc giải quyết vấn đề cụ thể trong lĩnh
vực thiết kế website, mang lại giải pháp đầy đủ và hiệu quả cho người dùng. Kết
quả đạt được là một ứng dụng web linh hoạt, giúp người dùng thiết kế và quản lý
nội dung website một cách thuận tiện, nhanh chóng và đáp ứng đầy đủ các yêu cầu
kỹ thuật và thị trường.
Sinh viên thực hiện
(Ký và ghi rõ họ tên)
 MỤC LỤC

CHƯƠNG 1. GIỚI THIỆU ĐỀ TÀI ......................................................... 1

1.1 Đặt vấn đề............................................................................................ 1

1.2 Mục tiêu và phạm vi đề tài..................................................................... 1

1.3 Định hướng giải pháp............................................................................ 1

1.4 Bố cục đồ án ........................................................................................ 3

CHƯƠNG 2. KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU............................. 4

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

2.2 Tổng quan chức năng ............................................................................ 5

2.2.1 Biểu đồ usecase tổng quát ........................................................... 5

2.2.2 Biểu đồ phân rã usecase Quản lý website...................................... 6

2.2.3 Biểu đồ phân rã usecase Quản lý trang trong website..................... 7

2.2.4 Biểu đồ phân rã usecase Quản lý mẫu email ................................. 7

2.2.5 Biểu đồ phân rã usecase Quản lý phân hệ và trường dữ liệu............ 8

2.2.6 Biểu đồ phân rã usecase Thiết lập báo cáo.................................... 9

2.2.7 Biểu đồ phân rã usecase Quản lý trang mặc định........................... 9

2.2.8 Biểu đồ phân rã usecase Quản lý trang mẫu .................................. 10

2.2.9 Biểu đồ phân rã usecase Quản lý đơn hàng ................................... 10

2.2.10 Biểu đồ phân rã usecase Quản lý section .................................... 11

2.2.11 Biểu đồ phân rã usecase Quản lý email hệ thống ......................... 12

2.2.12 Quy trình nghiệp vụ.................................................................. 12

2.3 Đặc tả chức năng .................................................................................. 14

2.3.1 Đặc tả usecase Thêm mới website................................................ 14

2.3.2 Đặc tả usecase Cấu hình email .................................................... 15

2.3.3 Đặc tả usecase Cấu hình tên miền................................................ 16

 2.3.4 Đặc tả usecase Thêm mới phân hệ dữ liệu .................................... 17

2.3.5 Đặc tả usecase Tạo báo cáo ......................................................... 18

2.4 Yêu cầu phi chức năng .......................................................................... 20

2.4.1 Yêu cầu chung ........................................................................... 20

2.4.2 Yêu cầu về giao diện................................................................... 20

2.4.3 Yêu cầu về bảo mật .................................................................... 20

CHƯƠNG 3. CÔNG NGHỆ SỬ DỤNG.................................................... 21

3.1 Framework .NET .................................................................................. 21

3.2 NextJS ................................................................................................. 21

3.3 MySQL ............................................................................................... 22

3.4 Docker, Docker Swarm ......................................................................... 22

3.5 Nginx .................................................................................................. 23

3.6 Jenkins ................................................................................................ 23

CHƯƠNG 4. THỰC NGHIỆM VÀ ĐÁNG GIÁ ....................................... 25

4.1 Thiết kế kiến trúc.................................................................................. 25

4.1.1 Lựa chọn kiến trúc phần mềm ..................................................... 25

4.1.2 Thiết kế tổng quan...................................................................... 27

4.1.3 Thiết kế chi tiết gói .................................................................... 29

4.2 Thiết kế chi tiết..................................................................................... 31

4.2.1 Thiết kế giao diện ...................................................................... 31

4.2.2 Thiết kế lớp ............................................................................... 33

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

4.3 Xây dựng ứng dụng............................................................................... 39

4.3.1 Thư viện và công cụ sử dụng....................................................... 39

4.3.2 Minh họa các chức năng chính .................................................... 40

ii
4.4 Kiểm thử.............................................................................................. 45

4.4.1 Compatibility Testing ................................................................. 45

4.4.2 Blackbox Testing........................................................................ 46

4.5 Triển khai ............................................................................................ 46

CHƯƠNG 5. CÁC GIẢI PHÁP VÀ ĐÓNG GÓP NỔI BẬT...................... 48

5.1 Lưu trữ hình ảnh trên ImageKit.io .......................................................... 48

5.1.1 Đặt vấn đề ................................................................................. 48

5.1.2 Giải pháp .................................................................................. 48

5.1.3 Kết quả đạt được ........................................................................ 51

5.2 Tích hợp đăng nhập/đăng ký với Google ................................................. 51

5.2.1 Đặt vấn đề ................................................................................. 51

5.2.2 Giải pháp .................................................................................. 51

5.2.3 Kết quả đạt được ........................................................................ 53

5.3 Tự động hoá triển khai ứng dụng với Jenkins ........................................... 55

5.3.1 Đặt vấn đề ................................................................................. 55

5.3.2 Giải pháp .................................................................................. 55

5.3.3 Kết quả đạt được ........................................................................ 57

CHƯƠNG 6. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ............................. 59

6.1 Kết luận ............................................................................................... 59

6.2 Hướng phát triển................................................................................... 59

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

 DANH MỤC HÌNH VẼ

Hình 2.1 Biểu đồ usecase tổng quát . . . . . . . . . . . . . . . . . . . . 5

Hình 2.2 Biểu đồ phân rã usecase Quản lý website . . . . . . . . . . . . 6
Hình 2.3 Biểu đồ phân rã Quản lý trang trong website . . . . . . . . . . 7
Hình 2.4 Biểu đồ phân rã Quản lý mẫu email . . . . . . . . . . . . . . . 7
Hình 2.5 Biểu đồ phân rã Quản lý phân hệ và trường dữ liệu . . . . . . . 8
Hình 2.6 Biểu đồ phân rã Thiết lập báo cáo . . . . . . . . . . . . . . . . 9
Hình 2.7 Biểu đồ phân rã Quản lý trang mặc định . . . . . . . . . . . . 9
Hình 2.8 Biểu đồ phân rã Quản lý trang mẫu . . . . . . . . . . . . . . . 10
Hình 2.9 Biểu đồ phân rã Quản lý đơn hàng . . . . . . . . . . . . . . . . 10
Hình 2.10 Biểu đồ phân rã Quản lý section . . . . . . . . . . . . . . . . . 11
Hình 2.11 Biểu đồ phân rã Quản lý email hệ thống . . . . . . . . . . . . . 12
Hình 2.12 Biểu đồ hoạt động minh họa quy trình thêm mới website, tạo
trang và đưa nội dung trang cập nhật trên trang đích . . . . . . . . . 13
Hình 2.13 Biểu đồ hoạt động minh họa quy trình phân hệ dữ liệu, thiết
lập trường và tạo báo cáo . . . . . . . . . . . . . . . . . . . . . . . . 14

Hình 4.1 Mô hình client server . . . . . . . . . . . . . . . . . . . . . . . 25

Hình 4.2 Giao thức kết nối giữa client server thông qua Restful API . . 26
Hình 4.3 Biểu đồ gói tổng quan Frontend . . . . . . . . . . . . . . . . . 27
Hình 4.4 Biểu đồ gói tổng quan Backend . . . . . . . . . . . . . . . . . 28
Hình 4.5 Thiết kế chi tiết gói Frontend quản lý website . . . . . . . . . . 29
Hình 4.6 Biểu đồ gói tổng quan Backend quản lý hàng hóa . . . . . . . 30
Hình 4.7 Thiết kế giao diện trang chủ . . . . . . . . . . . . . . . . . . . 31
Hình 4.8 Thiết kế giao diện trang dashboard quản lý một website . . . . 32
Hình 4.9 Thiết kế giao diện quản lý trang của website . . . . . . . . . . 32
Hình 4.10 Thiết kế giao diện thiết lập của một website . . . . . . . . . . 33
Hình 4.11 Biểu đồ thực thể liên kết . . . . . . . . . . . . . . . . . . . . . 36
Hình 4.12 Biểu đồ chi tiết thiết kế cơ sở dữ liệu . . . . . . . . . . . . . . 37
Hình 4.13 Giao diện quản lý trang trong website . . . . . . . . . . . . . . 40
Hình 4.14 Giao diện thiết kế trang . . . . . . . . . . . . . . . . . . . . . . 41
Hình 4.15 Giao diện chọn mẫu giao diện có sẵn . . . . . . . . . . . . . . 41
Hình 4.16 Giao diện trang thiết lập của website . . . . . . . . . . . . . . 42
Hình 4.17 Giao diện quản lý mẫu email . . . . . . . . . . . . . . . . . . . 42
Hình 4.18 Giao diện soạn thảo mẫu email . . . . . . . . . . . . . . . . . . 43
Hình 4.19 Giao diện trang quản lý phân hệ dữ liệu . . . . . . . . . . . . . 44

v
Hình 4.20 Giao diện trang tổng quan hiển thị báo cáo của website . . . . 44
Hình 4.21 Giao diện trợ giúp khi người dùng cần tìm hiểu cách sử dụng . 45
Hình 4.22 Thiết lập pipeline trong jenkines để tự động quá quy trình
triển khai ứng dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 4.23 Theo dõi và quản lý ứng dụng, dịch vụ đang chạy bằng portainer 47

Hình 5.1 Thư viện hỗ trợ tích hợp ImageKit.io cho .NET Core API . . . 49
Hình 5.2 Đoạn code tích hợp ImageKit.io vào .NET 3.1 . . . . . . . . . 49
Hình 5.3 Giao diện quản lý của ImageKit.io . . . . . . . . . . . . . . . . 50
Hình 5.4 ImageKit.io hỗ trợ tích hợp cho rất nhiều công nghệ đang
thịnh hành hiện nay . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 5.5 Tạo Credential OAuth2.0 Client ID trên Google Cloud . . . . 52
Hình 5.6 Cấu hình đường dẫn ứng dụng . . . . . . . . . . . . . . . . . . 52
Hình 5.7 Đoạn code tích hợp đăng nhập với Google tại Frontend . . . . 53
Hình 5.8 Đoạn code tích hợp đăng nhập với Google tại Backend . . . . 53
Hình 5.9 Đăng nhập với Google . . . . . . . . . . . . . . . . . . . . . . 54
Hình 5.10 Đăng ký với Google . . . . . . . . . . . . . . . . . . . . . . . . 54
Hình 5.11 Cài Jenkins trên windows . . . . . . . . . . . . . . . . . . . . . 56
Hình 5.12 Cài Jenkins trên linux . . . . . . . . . . . . . . . . . . . . . . . 56
Hình 5.13 Cài Jenkins bằng docker . . . . . . . . . . . . . . . . . . . . . 56
Hình 5.14 Jenkins hỗ trợ nhiều loại quy trình triển khai khác nhau . . . . 57
Hình 5.15 Quy trình triển khai ứng dụng Frontend bằng Jenkins . . . . . 57
Hình 5.16 Quy trình triển khai ứng dụng Backend bằng Jenkins . . . . . 58
Hình 5.17 Quy trình triển khai thiết lập tên miền bằng Jenkins . . . . . . 58

vi
 DANH MỤC BẢNG BIỂU

Bảng 2.1 Đặc tả usecase Thêm mới website . . . . . . . . . . . . . . . . 15

Bảng 2.2 Đặc tả usecase Cấu hình email . . . . . . . . . . . . . . . . . . 16
Bảng 2.3 Đặc tả usecase Cấu hình tên miền . . . . . . . . . . . . . . . . 17
Bảng 2.4 Đặc tả usecase Thêm mới phân hệ dữ liệu . . . . . . . . . . . 18
Bảng 2.5 Đặc tả usecase Tạo báo cáo . . . . . . . . . . . . . . . . . . . 19

Bảng 4.1 Mô tả chi tiết thuộc tính của lớp Website . . . . . . . . . . . . 34

Bảng 4.2 Mô tả chi tiết phương thức lớp Website . . . . . . . . . . . . . 34
Bảng 4.3 Mô tả chi tiết thuộc tính của lớp WebsitePage . . . . . . . . . 35
Bảng 4.4 Mô tả chi tiết phương thức lớp WebsitePage . . . . . . . . . . 35
Bảng 4.5 Các bảng chính trong cơ sở dữ liệu . . . . . . . . . . . . . . . 37
Bảng 4.6 Danh sách thư viện và công cụ sử dụng . . . . . . . . . . . . . 40
Bảng 4.7 Kiểm thử tính tương thích trên các thiết bị . . . . . . . . . . . 45
Bảng 4.8 Kiểm thử chức năng tạo website . . . . . . . . . . . . . . . . . 46

vii