Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website thương mại Điện tử ecommerce

Thực hành: - Sử dụng RESTful API để xây dựng hệ thống - Xây dụng backend, frontend bằng NextJS - Sử dụng Cloudinary để lưu trữ image - Sử dụng ClerkJS để đăng nhập và xác thực user - Sử

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

GVHD: NGUYỄN TRẦN THI VĂN SVTH: NGUYỄN ĐỨC TÍNHXÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

ECOMMERCE

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE

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

THS NGUYỄN TRẦN THI VĂN

SINH VIÊN THỰC HIỆN:

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE

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

THS NGUYỄN TRẦN THI VĂN

SINH VIÊN THỰC HIỆN:

Khoa Công Nghệ Thông Tin

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

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

Họ và tên giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn

Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE

NHẬN XÉT

1 Về nội dung và khối lượng công việc:

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:

TP Hồ Chí Minh, ngày … tháng … năm 2024

Khoa Công Nghệ Thông Tin

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

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

Họ và tên giảng viên phản biện: PGS.TS Hoàng Văn Dũng

Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE

NHẬN XÉT

1 Về nội dung và khối lượng công việc:

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:

TP Hồ Chí Minh, ngày … tháng … năm 2024

Thầy Cô Khoa Công Nghệ Thông Tin đã luôn tận tình truyền đạt những kiến thức, kỹ

năng bổ ích trong suốt quá trình học tập Bên cạnh đó, em xin cảm ơn Trường Đại học Sư phạm Kỹ thuật TP.HCM đã tạo điều kiện về cơ sở vật chất cũng như các

điều kiện cần thiết khác giúp em có môi trường học tập và thực hiện đề tài một cách thuận lợi nhất.

Đặc biệt, em xin gửi lời cảm ơn chân thành đến giảng viên, ThS Nguyễn Trần Thi Văn, người đã trực tiếp hỗ trợ em trong suốt quá trình thực hiện đề tài Em

cảm ơn Thầy đã đưa ra những lời khuyên từ kinh nghiệm thực tiễn của mình để định hướng cho em đi đúng với yêu cầu của đề tài Bên cạnh đó, em cảm ơn Thầy đã luôn giải đáp thắc mắc và đưa ra những góp ý, chỉnh sửa kịp thời giúp em khắc phục nhược điểm và hoàn thành đúng thời hạn đã đề ra.

Đề tài được em thực hiện trong khoảng thời gian 4 tháng, với những kiến thức còn hạn chế về mặt kỹ thuật và kinh nghiệm trong việc triển khai một dự án phần mềm Do đó, trong quá trình thực hiện đề tài có những thiếu sót là điều không thể tránh khỏi nên em rất mong nhận được những ý kiến đóng góp quý báu từ quý Thầy

Cô để có thể cải thiện về sau.

Cuối lời, em kính chúc quý Thầy Cô luôn dồi dào sức khỏe và thành công hơn nữa trong sự nghiệp trồng người Một lần nữa em xin chân thành cảm ơn!

TP Hồ Chí Minh, tháng 07 năm 2024

Sinh viên thực hiện

Khoa Công Nghệ Thông Tin

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

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

Họ và tên giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn

Tên đề tài: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE

Nhiệm vụ:

1 Lý thuyết:

- Tìm hiểu công nghệ Next.Js

- Tìm hiểu về RESTful API

- Tìm hiểu về ClerkJS, Cloudinary, Prisma

- Tìm hiểu về cơ sở dữ liệu MySQL

- Tìm hiểu về cách thanh toán trực tuyến với PayPal và VNPay

2 Thực hành:

- Sử dụng RESTful API để xây dựng hệ thống

- Xây dụng backend, frontend bằng NextJS

- Sử dụng Cloudinary để lưu trữ image

- Sử dụng ClerkJS để đăng nhập và xác thực user

- Sử dụng Prisma để quản lý và thao tác với cơ sở dữ liệu

- Sử dụng các dịch vụ API khác như Stripe, VNPay

- Xây dựng website thương mại điện tử Ecommerce với các tính năng chính như sau:

Đối với Người dùng (User):

 Bình luận, đánh giá sản phẩm.

 Quản lý giỏ hàng cá nhân như: thêm, xóa sản phẩm khỏi giỏ hàng, thayđổi tùy chọn sản phẩm, đặt hàng các sản phẩm nhất trong giỏ hàng,…

 Thanh toán khi nhận hàng hoặc trực tuyến thông qua VNPay và Paypal

 Quản lý đơn hàng cá nhân như: xem trạng thái đơn hàng, lịch sử đặthàng,…

 Quản lý các thông tin cá nhân như: họ và tên, avatar, địa chỉ Email.Đối với Quản trị viên (Admin):

 Đăng nhập vào hệ thống bằng tài khoản được tạo sẵn trên hệ thống

 Quản lý thông tin của các đơn hàng như: xem và thay đổi trạng thái cácđơn hàng,…

 Quản lý kho hàng / sản phẩm như: thêm sản phẩm mới, xóa hoặc ẩn sảnphẩm đã hết hàng, cập nhật thông tin sản phẩm,…

 Quản lý danh mục sản phẩm: thêm, chỉnh sửa, xóa danh mục sản phẩm

 Quản lý các thống kê về: doanh thu, sản phẩm, sản phẩm bán chạy, …



Bố cục

PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

2 Đối tượng nghiên cứu

3 Phạm vi nghiên cứu

4 Mục tiêu của đề tài

2.3 Mô hình hóa yêu cầu

2.4 Đặc tả Usecase cho 1 số Usecase chính

1, 2 04/03 - 17/03 Tham khảo một số website bán hàng

Thiết kế cơ sở dữ liệu cho websiteThiết kế usecase

3, 4 18/03 - 31/03 Tìm hiểu về các kiến thức liên quan như: MySQL,

NextJS, ClerkJS, Cloudinary, Prisma, Stripe

5, 6 01/04 - 14/04 Xây dựng giao diện để có cái nhìn tổng quát về

Xây dựng thêm một số chức năng cho website như:

mã giảm giá, đa ngôn ngữ

11, 12 13/05 - 26/05

Tìm hiểu về cách xây dựng và tích hợp chatbot chowebsite

Tìm và sửa lỗi hệ thống13,

14, 15 27/05 - 15/06 Viết báo cáo và hoàn thiện website

Tp Hồ Chí Minh, ngày … tháng… năm 2024

DUYỆT CỦA BCNK

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

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

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

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

2 ĐỐI TƯỢNG NGHIÊN CỨU 2

3 PHẠM VI NGHIÊN CỨU 2

4 MỤC TIÊU CỦA ĐỀ TÀI 3

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 3

PHẦN NỘI DUNG 4

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4

1.1 NEXTJS 4

1.2 MONGODB 7

1.3 MySQL 9

1.4 SHADCN/UI 11

1.5 CLERKJS 13

CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 15

2.1 KHẢO SÁT HIỆN TRẠNG 15

2.2 XÁC ĐỊNH YÊU CẦU 34

2.3 MÔ HÌNH HÓA YÊU CẦU 37

2.4 ĐẶC TẢ USECASE CHO 1 SỐ USECASE CHÍNH 38

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 66

3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 66

CHƯƠNG 4: CÀI ĐẶT VÀ THỬ NGHIỆM 123

4.1 CÀI ĐẶT ỨNG DỤNG 123

4.2 KẾT QUẢ THỬ NGHIỆM 126

PHẦN KẾT LUẬN 129

1 KẾT QUẢ ĐẠT ĐƯỢC 129

2 ƯU ĐIỂM 130

3 NHƯỢC ĐIỂM 130

4 HƯỚNG PHÁT TRIỂN 131

TÀI LIỆU THAM KHẢO 132

DANH MỤC HÌNH ẢNH

Hình 1 Logo Next.js 4

Hình 2 SSR – Server-Side Rendering 5

Hình 3 Logo MongoDB 7

Hình 4 Logo MySQL 9

Hình 5 Logo Shadcn/ui 11

Hình 6 Logo ClerkJS 13

Hình 7 Giao diện trang chủ Kingshoes 15

Hình 8 Giao diện trang danh sách sản phẩm 16

Hình 9 Giao diện trang chi tiêt sản phẩm 17

Hình 10 Giao diện trang giỏ hàng 18

Hình 11 Giao diện trang đặt hàng 19

Hình 12 Giao diện trang chủ RedRooterCoffee 20

Hình 13 Giao diện trang danh sách sản phẩm 21

Hình 14 Giao diện trang chi tiêt sản phẩm 21

Hình 15 Giao diện trang giỏ hàng 22

Hình 16 Giao diện trang đặt hàng 23

Hình 17 Giao diện trang chủ 25

Hình 18 Giao diện trang danh sách sản phẩm 25

Hình 19 Giao diện trang chi tiết sản phẩm 25

Hình 20 Giao diện trang giỏ hàng 26

Hình 21 Giao diện trang đặt hàng 27

Hình 22 Giao diện trang chủ 29

Hình 23 Giao diện trang danh sách sản phẩm – trang chủ 29

Hình 24 Giao diện trang danh sách sản phẩm 30

Hình 27 Giao diện trang đặt hàng 31

Hình 28 Giao diện trang hồ sơ cá nhân 32

Hình 29 Usecase Diagram – Module Management 38

Hình 30 Usecase Diagram – Module Management 38

Hình 31 UC Guest – Đăng ký 39

Hình 32 UC Guest – Đăng nhập – Quên mật khẩu 40

Hình 33 UC Guest – Tìm kiếm sản phẩm 42

Hình 34 UC Guest – Xem chi tiết sản phẩm 44

Hình 35 UC User – Thêm sản phẩm vào giỏ hàng 45

Hình 36 UC User – Quản lý giỏ hàng – Đặt hàng – Thanh toán 46

Hình 37 UC User – Đăng xuất 50

Hình 38 UC User – Quản lý đơn hàng 51

Hình 39 UC User – Quản lý hồ sơ cá nhân 53

Hình 40 UC Admin – Quản lý người dùng 57

Hình 41 UC Admin – Quản lý danh mục 59

Hình 42 UC Admin – Quản lý kho hàng 60

Hình 43 UC Admin – Quản lý thống kê 63

Hình 44 Lược đồ thực thể 66

Hình 45 Giao diện trang đăng ký 79

Hình 46 Giao diện trang Đăng nhập 80

Hình 47 Giao diện Header 81

Hình 48 Giao diện thanh Search sản phẩm 81

Hình 49 Giao diện trang kết quả tìm kiếm 82

Hình 50 Giao diện modal sản phẩm 83

Hình 51 Giao diện trang chi tiết sản phẩm – 1 84

Hình 55 Giao diện trang Thông tin cá nhân 88

Hình 56 Giao diện trang Quản lý đơn hàng 89

Hình 57 Giao diện trang Hoàn trả đơn hàng 90

Hình 58 Giao diện trang Sản phẩm yêu thích 91

Hình 59 Giao diện trang chủ - doanh thu 93

Hình 60 Giao diện Navbar 94

Hình 61 Giao diện trang quản lý người dùng 95

Hình 62 Giao diện trang chỉnh sửa người dùng 96

Hình 63 Giao diện trang quản lý danh mục 97

Hình 64 Giao diện trang thêm / cập nhật danh mục 98

Hình 65 Giao diện trang quản lý đơn hàng hoàn trả 98

Hình 66 Giao diện trang chỉnh sửa đơn hàng hoàn trả 99

Hình 67 Giao diện trang quản lý mã giảm giá 100

Hình 68 Giao diện trang thêm / cập nhật mã giảm giá 101

Hình 69 Giao diện trang quản lý sản phẩm 102

Hình 70 Giao diện trang thêm / cập nhật sản phẩm 103

Hình 71 Giao diện trang quản lý nhập hàng 104

Hình 72 Giao diện trang tạo mới đơn nhập hàng 104

Hình 73 Sequence Diagram -UC Guest – Đăng ký 106

Hình 74 Sequence Diagram – UC Guest – Đăng nhập 107

Hình 75 Sequence Diagram – UC Guest – Quên mật khẩu 108

Hình 76 Sequence Diagram – UC Guest – Tìm kiếm sản phẩm 109

Hình 77 Sequence Diagram – UC Guest – Xem chi tiết sản phẩm 109

Hình 78 Sequence Diagram – UC User – Thêm sản phẩm vào giỏ hàng 110

Hình 79 Sequence Diagram – UC User – Quản lý giỏ hàng 110

Hình 80 Sequence Diagram – UC User – Đặt hàng 111

Hình 83 Sequence Diagram – UC User – Quản lý đơn hàng 113

Hình 84 Sequence Diagram – UC User – Hủy đơn hàng 113

Hình 85 Sequence Diagram – UC User – Theo dõi đơn hàng 114

Hình 86 Sequence Diagram – UC User – Đánh giá và bình luận 114

Hình 87 Sequence Diagram – UC User – Quản lý hồ sơ cá nhân 115

Hình 88 Sequence Diagram – UC User – OPT – Cập nhật địa chỉ giao hàng 115

Hình 89 Sequence Diagram – UC User – Cập nhật thông tin cá nhân 116

Hình 90 Sequence Diagram – UC Admin – Quản lý người dùng 117

Hình 91 Sequence Diagram – UC Admin – Quản lý danh mục 118

Hình 92 Sequence Diagram – UC Admin – Quản lý kho hàng – Thêm sản phẩm 119

Hình 93 Sequence Diagram – UC Admin – Quản lý kho hàng – Cập nhật sản phẩm 120

Hình 94 Sequence Diagram – UC Admin – Quản lý kho hàng – Ẩn / Hiện sản phẩm 121

Hình 95 Sequence Diagram – UC Admin – Quản lý thống kê – Doanh thu 121

Hình 96 Sequence Diagram – UC Admin – Quản lý thống kê – Người dùng 121

Hình 97 Sequence Diagram – UC Admin – Quản lý thống kê – Đơn hàng 122

Hình 98 Sequence Diagram – UC Admin – Quản lý thống kê – Kho hàng 122

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại hiện nay với việc mọi người đều sử dụng Internet để trao đổi, tròchuyện, giải trí, … thì nhu cầu về việc mua sắm hàng hóa online cũng trở thành mộtnhu cầu phổ biến Khi nhắc đến việc mua sắm online, không chỉ là những dụng cụthường thấy trong cuộc sống như dụng cụ nấu ăn, học tập, … mà cả những bộ quần áo,váy, phụ kiện lấp lánh cũng được quan tâm rất nhiều Mà ngày nay, giày dép cũng làmột trong những món thời trang nhận được sự quan tâm to lớn từ người tiêu dùng.Cùng lúc đó thì mô hình Thương mại điện tử lại đang trở nên vô cùng phát triển ở nước

ta, việc mua sắm trực tuyến dần trở nên phổ biến hơn, giúp người tiêu dùng có đa dạng

sự lựa chọn và tiết kiệm được rất nhiều thời gian trong việc mua sắm Vì thế, để đápứng được nhu cầu thời trang về giày dép của người tiêu dùng một cách nhanh chóng,

đa dạng lựa chọn và đảm bảo uy tín thì sự ra đời của một Website Thương mại điện tửEcommerce là hoàn toàn cấp thiết

Và với sự phát triển mạnh mẽ và vượt bậc của lĩnh vực Công nghệ thông tin hiệnnay thì việc xây dựng một Website Thương mại điện tử là hoàn toàn khả thi Chỉ vớimột chiếc máy tính hoặc smartphone được kết nối internet cùng một vài thao tác đơngiản thì người tiêu dùng đã có thể lựa chọn được cho mình những đôi giày thời thượng,phù hợp với nhu cầu cá nhân Cùng với đó, việc kinh doanh trực tuyến còn mang đếncho cửa hàng nhiều tiện ích khác nhau như quản lý hiệu quả hơn, thông tin được lưu trữ

an toàn, thuận tiện cho việc tìm kiếm và quản lý, tiết kiệm được thời gian,…

Để đáp ứng nhu cầu cấp thiết trên, em quyết định xây dựng một Website Thươngmại điện tử Ecommerce Đề tài được em xây dựng nhằm mang đến một trải nghiệmmua sắm đơn giản, tiết kiệm thời gian cho người tiêu dùng Ngoài ra, giúp các cửa

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, em tiến hành tham khảo, nghiên cứu các quy trình thực tế củacác cửa hàng bán hàng online hiện nay Qua đó thu thập và phân tích quy trình xử lýnghiệp vụ để đánh giá ưu điểm và hạn chế để cải thiện Đồng thời em cũng tìm hiểu cáccông nghệ xây dựng một website Ecommerce toàn diện như sau:

- Next.JS: Framework Typescript giúp phát triển ứng dụng mạnh mẽ và dễ triển khai

- MySQL: Hệ quản trị cơ sở dữ liệu có quan hệ để lưu trữ và quản lý dữ liệu một cáchhiệu quả

- MongoDB: Hệ quản trị cơ sở dữ liệu không quan hệ để lưu trữ và quản lý dữ liệu tròchuyện giữa user và admin

3 PHẠM VI NGHIÊN CỨU

Hệ thống xây dựng tập trung vào 3 đối tượng chính: khách vãn lai, người dùng vàquản trị viên

- Người dùng được cung cấp chức năng xem, bình luận, đánh giá sản phẩm, đặt hàng

và theo dõi đơn hàng qua ứng trang web với trải nghiệm mượt mà, dễ sử dụng

- Đối với khách vãn lai, chỉ có xem và đặt hàng qua ứng dụng trang web

- Còn quản trị viên, qua trang web quản trị sẽ có quyền kiểm soát toàn bộ hệ thống,bao gồm quản lý sản phẩm, danh mục, chi nhánh, thông tin người dùng, doanh thu

4 MỤC TIÊU CỦA ĐỀ TÀI

Với đề tài “XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ECOMMERCE”, em

đã đưa ra một số mục tiêu để xây dựng một website đáp ứng các chức năng sau:

- Giới thiệu danh sách các sản phẩm đến người tiêu dùng và thông tin chi tiết của từngsản phẩm

- Hỗ trợ người tiêu dùng bookmark các sản phẩm mình yêu thích

- Hỗ trợ người tiêu dùng đánh giá và nhận xét các sản phẩm

- Hỗ trợ người tiêu dùng thêm các sản phẩm vào giỏ hàng, mua hàng và thanh toán(trực tuyến bằng Paypal và VNPay)

- Hỗ trợ người tiêu dùng quản lý các đơn hàng và hoàn trả đơn hàng nếu có lỗi

- Hỗ trợ người tiêu dùng chat và trao đổi thông tin với quản trị viên

- Hỗ trợ cửa hàng quản lý thông tin (doanh thu, kho, sản phẩm…)

- Hỗ trợ cửa hàng lưu trữ thông tin an toàn

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Qua quá trình xây dựng webiste bán hàng, em không chỉ có thêm kiến thức lý thuyết

mà còn tiếp thu thêm kinh nghiệm thực tế và những kỹ thuật khi xây dựng một hệthống với các công nghệ hiện đại

Ngoài ra, các doanh nghiệp kinh doanh có thể sử dụng webiste này để tăng doanh số,tăng thêm lượng khách hàng và giữ chân khách hàng với những sự tiện lợi từ hệ thốngmang lại, đồng thời việc quản lý kinh doanh trở nên dễ dàng hơn Bên cạnh đó, việctheo dõi và quản lý đơn hàng trở nên linh hoạt, dễ dàng hơn giúp duy trì tính chính xác

và nhanh chóng trong quy trình kinh doanh bán hàng

Hình 1 Logo Next.js

Next.js sử dụng mô hình kiến trúc "Pages and Components" Mỗi trang đượcđại diện bởi một tệp tin trong thư mục "pages" Next.js sẽ tự động xử lý địnhtuyến và điều hướng cho các trang này Các thành phần (components) có thểđược tạo và sử dụng lại cho các trang khác nhau [2]

1.1.2 Các tính năng nổi bật của Next.js

Next.js hỗ trợ SSR một cách dễ dàng Khi một yêu cầu đến từ máy khách,Next.js có thể tạo và trả về trang hoàn chỉnh từ phía máy chủ Điều này giúp cảithiện tốc độ tải trang ban đầu và cải thiện trải nghiệm người dùng SSR cũnghữu ích cho SEO (Search Engine Optimization), vì các công cụ tìm kiếm có thể

Hình 2 SSR – Server-Side Rendering

Next.js hỗ trợ tạo trang tĩnh trước thời gian (pre-rendering) Trang tĩnh đượctạo ra trong quá trình xây dựng ứng dụng và được lưu trữ dưới dạng các tệpHTML tĩnh Khi một yêu cầu đến, Next.js chỉ cần phục vụ các tệp HTML đãđược tạo trước, giúp cải thiện hiệu suất và giảm tải cho máy chủ

Next.js cung cấp một hệ thống định tuyến mạnh mẽ Bằng cách sử dụng cáctệp tin trong thư mục "pages", bạn có thể xác định các tuyến đường và điềuhướng cho ứng dụng của mình Next.js hỗ trợ định tuyến động, cho phép bạntạo các tuyến đường có tham số và tùy chỉnh quy tắc định tuyến

Hiện nay, Next.js được đánh giá là một Framework mạnh mẽ cho việc pháttriển ứng dụng Web ở phía Client Với các khả năng mạnh mẽ như hỗ trợ SSR,tạo trang tĩnh, quản lý trạng thái linh hoạt,… Ngoài ra, nó còn là một nền tảngđáng tin cậy và hiệu quả cho việc phát triển và xây dựng ứng dụng Web hiệnnay

1.1.3 Ưu và nhược điểm của Next.js

Ưu

điểm

- Mang lại khả năng SEO mạnh mẽ hơn

- Hỗ trợ cả SSG (Static-Side Generation), SSR (Server-Side Rendering)

và CSR (Client-Side Rendering)

- Tự động code spilting giúp tối ưu hóa hiệu suất khi load trang

- Mang đến cho người dùng trải nghiệm tốt hơn

- Mang đến tính bảo mật cao về dữ liệu

Nhược

điểm

- Một số plugin và thư viện hỗ trợ có thể cần phải tùy chỉnh lại để có thể

sử dụng được trong Next.js

- Bị giới hạn trong việc định tuyến trên tệp Người phát triển không thểthay đổi cách mà các trang (pages) giao tiếp với nhau

Bảng 1 Ưu và nhược điểm của Next.js

1.2 MONGODB

1.2.1 Cơ sở dữ liệu phi quan hệ (NoSQL) là gì?

NoSQL ra đời nhằm đáp ứng nhu cầu lưu trữ, quản lý và truy xuất dữ liệu cầnhiệu suất cao và tính linh hoạt NoSQL cho phép mở rộng một cách dễ dàng vàlinh hoạt NoSQL ra đời chủ yếu tập trung vào các kho lưu trữ dữ liệu phân tánvới nhu cầu lưu trữ khối lượng lớn dữ liệu

Một vài Cơ sở dữ liệu phi quan hệ (NoSQL) như: MongoDB, CouchDB, Redis,DynamoDB,…

1.2.2 MongoDB là gì?

MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL

Nó có thể hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế với mục đíchhướng đến đối tượng MongoDB hoạt động dựa vào các khái niệm Collection

và Document Đồng thời, nó có hiệu suất cao cùng với tính khả dụng tốt và dễdàng mở rộng [8]

Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt Điều này chophép dữ liệu không cần thiết phải tuân theo bất kỳ một dạng cấu trúc nào Vìthế, MongoDB có thể lưu trữ những dữ liệu có cấu trúc đa dạng và phức tạp

Dữ liệu trong MongoDB được lưu bằng định dạng kiểu JSON [8]

Hình 3 Logo MongoDB

Một số khái niệm quan trọng khi làm việc với MongoDB:

- Collections: Có thể hiểu Collections tương đương mới Bảng (Table) ở cơ

Collection không cần định nghĩa trước các cột, hàng hay kiểu dữ liệu MộtCollection sẽ thuộc về một Database duy nhất.

- Documents: Là một bản ghi thuộc Collection Có cấu trúc là một JSON.

Gồm các cặp key – value Mỗi Key sẽ đại điện cho tên của Field (Trường).Các Documents trong một Collection không nhất thiết phải có cùng số cặpkey – value hay cấu trúc giống nhau

Ngoài ra, để giao tiếp giữa MongoDB và Express thì Mongoose là một thư việnkhá hữu ích Mongoose là một thư viện NodeJS mô hình hóa đối tượng(Object-Document Mapper - ODM) được sử dụng để tương tác giữa MongoDB

và Express Cung cấp một cách dễ dàng để định nghĩa các mô hình (Models)của các đối tượng dựa trên Schema để tương tác với MongoDB Ngoài ra,Mongoose còn cung cấp các phương thức làm việc và xử lý các hoạt động nhưthêm, sửa, xóa và cập nhật dữ liệu trên MongoDB

Truy vấn dữ liệu: Khi muốn truy vấn dữ liệu từ Express đến MongoDB có thể

sử dụng Mongoose hoặc MongoDB Driver để tạo ra các truy vấn phức tạp đểtruy vấn dữ liệu cần thiết MongoDB hỗ trợ các truy vấn mạnh mẽ như truy vấntheo điều kiện, truy vấn theo phạm vi,…

1.2.3 Ưu và nhược điểm của MongoDB

- Vì là một Cơ sở dữ liệu phi quan hệ, nên cần phải quản lý tốt mối quan

hệ giữa các bảng với nhau trách gây ra xung đột dữ liệu

Bảng 2 Ưu và nhược điểm của MongoDB

1.3 MySQL

1.3.1 Cơ sở dữ liệu quan hệ là gì?

Cơ sở dữ liệu quan hệ (Relational Database) là một loại cơ sở dữ liệu dựa trên

mô hình quan hệ, trong đó dữ liệu được tổ chức thành các bảng (table) Mỗibảng bao gồm các hàng (row) và cột (column), tương tự như một bảng tính(spreadsheet) Các hàng đại diện cho các bản ghi (record) và các cột đại diệncho các trường (field) [6]

Một vài Cơ sở dữ liệu quan hệ như: MySQL, Microsoft SQL Server,PostgreSQL, Oracle Database, SQLite…

1.3.2 MySQL là gì?

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở được phát triểnbởi công ty MySQL AB, hiện thuộc sở hữu của Oracle Corporation MySQLđược sử dụng rộng rãi trong các ứng dụng web để lưu trữ, truy xuất và quản lý

dữ liệu một cách hiệu quả Đây là một trong những hệ quản trị cơ sở dữ liệuphổ biến nhất thế giới, đặc biệt là trong cộng đồng phát triển web [6]

Hình 4 Logo MySQL

Một số khái niệm quan trọng khi làm việc với MySQL:

- Bảng (Table): Một cấu trúc tổ chức dữ liệu trong cơ sở dữ liệu, gồm các

hàng (rows) và cột (columns) Mỗi bảng thường đại diện cho một thực thểtrong hệ thống như khách hàng, sản phẩm, đơn hàng, v.v

- Hàng (Row): Còn gọi là bản ghi (record), mỗi hàng trong bảng chứa dữ liệu

về một đơn vị thực thể Ví dụ, một hàng trong bảng khách hàng có thể chứathông tin về một khách hàng cụ thể

- Cột (Column): Còn gọi là trường (field), mỗi cột trong bảng đại diện cho

một thuộc tính của thực thể Ví dụ, bảng khách hàng có thể có các cột như

ID, tên, địa chỉ, số điện thoại

Ngoài ra, để giao tiếp giữa MySQL và NextJS thì Prisma là một thư viện kháhữu ích Prisma là một ORM (Object-Relational Mapping) hiện đại cho Node.js

và TypeScript, giúp làm việc với cơ sở dữ liệu một cách dễ dàng, linh hoạt và

an toàn Khi sử dụng Prisma cùng với Next.js, chúng ta có thể xây dựng cácứng dụng web mạnh mẽ với khả năng truy cập và quản lý cơ sở dữ liệu MySQLmột cách hiệu quả [10]

Sử dụng Prisma với Next.js giúp chúng ta quản lý cơ sở dữ liệu MySQL mộtcách trực quan và hiệu quả Bằng cách sử dụng Prisma Client, chúng ta có thểtruy vấn và thao tác dữ liệu dễ dàng trong các API routes và các hàm server-side rendering của Next.js, giúp xây dựng các ứng dụng web phức tạp một cáchnhanh chóng và an toàn

1.3.3 Ưu và nhược điểm của MySQL

Ưu

điểm

- Có hiệu suất, tốc độ truy vấn dữ liệu cao

- Có khả năng mở rộng và tính bảo mật cao

- Là mã nguồn mở và miễn phí

- Có cộng đồng hỗ trợ rộng lớn

Nhược - Hạn chế trong tích hợp với các công cụ quản trị

Một vài component thông dụng thường được sử dụng như: Calendar, Form,Pagination, Slider, Skeleton, Table, …

1.4.2 Đặc điểm nổi bật của Shadcn/ui

Hình 5 Logo Shadcn/ui

Một số đặc điểm nổi bật của Shadcn/ui:

- Thành phần đa dạng: Cung cấp nhiều thành phần UI như buttons, forms,

modals, tables, và nhiều thành phần khác, giúp dễ dàng tích hợp và tùychỉnh theo nhu cầu của dự án

- Tùy biến cao: Các thành phần của Shadcn/ui thường được thiết kế để dễ

dàng tùy biến bằng cách sử dụng các props và styles, giúp lập trình viên cóthể điều chỉnh giao diện theo ý muốn

- Thiết kế hiện đại: Được thiết kế với giao diện người dùng hiện đại,

Shadcn/ui giúp tạo ra các ứng dụng web với giao diện bắt mắt và thân thiệnvới người dùng

- Tích hợp tốt với React và Next.js: Thư viện được thiết kế đặc biệt cho các

ứng dụng React và Next.js, tận dụng tối đa khả năng của các framework này

để cung cấp trải nghiệm phát triển tốt nhất

- Hỗ trợ tốt: Có tài liệu và cộng đồng hỗ trợ mạnh mẽ, giúp lập trình viên

giải quyết các vấn đề gặp phải và học hỏi cách sử dụng hiệu quả các thànhphần của thư viện

1.4.3 Ưu và nhược điểm của Shadcn/ui

Ưu

điểm

- Tích hợp tốt với React và NextJS

- Có các component đa dạng và hiện đại

1.5 CLERKJS

1.5.1 ClerkJS là gì?

ClerkJS là một thư viện JavaScript được thiết kế để quản lý người dùng và xácthực cho các ứng dụng web Nó cung cấp một bộ công cụ toàn diện để dễ dàngthêm các chức năng đăng nhập, đăng ký, xác thực và quản lý người dùng vàoứng dụng của bạn mà không cần phải xây dựng từ đầu [3]

ClerkJS giúp tiết kiệm thời gian và công sức cho các nhà phát triển bằng cáchcung cấp các giải pháp sẵn có và dễ tích hợp

1.5.2 Một số tính năng của ClerkJS

Hình 6 Logo ClerkJS

Một số tính năng của ClerkJS:

- Đăng ký và Đăng nhập: Hỗ trợ các phương thức đăng nhập phổ biến như

email/password, OAuth (Google, Facebook, GitHub, Twitter, etc.), và cácphương thức xác thực khác

- Xác thực đa yếu tố (MFA): Cung cấp các cơ chế xác thực như xác thực hai

yếu tố (2FA), xác thực qua email, xác thực qua SMS, và xác thực qua mãOTP

- Quản lý người dùng: Dễ dàng quản lý người dùng với các tính năng như

cập nhật thông tin người dùng, đặt lại mật khẩu, và quản lý trạng thái tàikhoản

- Tích hợp dễ dàng: Tích hợp dễ dàng với các framework phổ biến như

- Bảo mật cao: Được thiết kế với các biện pháp bảo mật mạnh mẽ để bảo vệ

dữ liệu người dùng và ngăn chặn các cuộc tấn công phổ biến

Ngoài ra, để giao tiếp giữa MySQL và NextJS thì Prisma là một thư viện kháhữu ích Prisma là một ORM (Object-Relational Mapping) hiện đại cho Node.js

và TypeScript, giúp làm việc với cơ sở dữ liệu một cách dễ dàng, linh hoạt và

an toàn Khi sử dụng Prisma cùng với Next.js, chúng ta có thể xây dựng cácứng dụng web mạnh mẽ với khả năng truy cập và quản lý cơ sở dữ liệu MySQLmột cách hiệu quả [3]

Sử dụng Prisma với Next.js giúp chúng ta quản lý cơ sở dữ liệu MySQL mộtcách trực quan và hiệu quả Bằng cách sử dụng Prisma Client, chúng ta có thểtruy vấn và thao tác dữ liệu dễ dàng trong các API routes và các hàm server-side rendering của Next.js, giúp xây dựng các ứng dụng web phức tạp một cáchnhanh chóng và an toàn

1.5.3 Ưu và nhược điểm của ClerkJS

Ưu

điểm

- Tích hợp nhanh chóng và dễ dàng

- Tính năng quản lý người dùng mạnh mẽ

- Giao diện người dùng sẵn có

- Tích hợp với nhiều phương thức xác thực

CHƯƠNG 2: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU

Hình 8 Giao diện trang danh sách sản phẩm

Hình 9 Giao diện trang chi tiêt sản phẩm

Hình 10 Giao diện trang giỏ hàng

Hình 11 Giao diện trang đặt hàng

b Ưu điểm

- Tốc độ xử lý các thao tác nhanh chóng, thuận tiện

- Tông màu chủ đạo của website tươi sáng, dễ nhìn, độ tương phản tốt,tạo cảm giác thoải mãi, dễ chịu

- Font chữ đẹp, rõ ràng Các nút (button) hoặc thành phần có thể nhấnchọn đã được điều chỉnh để dễ dàng thao tác

- Chi tiết sản phẩm rõ ràng, có từng size với từng số lượng riêng, cóthêm tính năng xem riêng từng hình ảnh và có thể phóng to từng hìnhảnh của sản phẩm

- Cho phép quản lý giỏ hàng có nhân (xóa, chỉnh sửa số lượng,…)

- Cho phép đánh giá, bình luận sản phẩm

- Hỗ trợ thanh toán online

- Không cho phép thay đổi size, màu sắc tại trong Giỏ hàng Khôngcho phép lựa chọn các sản phẩm nhất định trong Giỏ hàng để đặthàng Chỉ cho phép đặt hàng tất cả sản phẩm trong Giỏ hàng.

2.1.1.2 Website RedRoosterCoffee

a Giao diện chính

Hình 13 Giao diện trang danh sách sản phẩm

Hình 14 Giao diện trang chi tiêt sản phẩm

Hình 15 Giao diện trang giỏ hàng

Hình 16 Giao diện trang đặt hàng

b Ưu điểm

- Tốc độ xử lý các thao tác nhanh chóng, thuận tiện

- Tông màu chủ đạo của website tươi sáng, dễ nhìn, độ tương phản tốt,tạo cảm giác thoải mãi, dễ chịu

- Font chữ đẹp, rõ ràng

- Chi tiết sản phẩm rõ ràng, có từng size với từng số lượng riêng

- Cho phép quản lý giỏ hàng có nhân (xóa, chỉnh sửa số lượng,…)

- Hỗ trợ thanh toán online

c Nhược điểm

- Tại danh sách sản phẩm chưa có lựa chọn thêm nhanh vào giỏ hàng

- Không cho phép thay đổi size, màu sắc tại trong Giỏ hàng Khôngcho phép lựa chọn các sản phẩm nhất định trong Giỏ hàng để đặthàng Chỉ cho phép đặt hàng tất cả sản phẩm trong Giỏ hàng.

- Chưa hỗ trợ tính năng bình luận, đánh giá sản phẩm

2.1.2 Website trong nước

2.1.2.1.Website MatViet

a Giao diện chính