Báo cáo Đồ án cơ sở 2 trang web bán Đồ ăn trực tuyến

- Áp dụng rộng rãi chức năng của các framework để tạo nên trang web và cơ sở dữ liệu dạng non-relational NOSQL với mã nguồn mở được sử dụng rộng rãi mongodb Cơ sở dữ liệu được đưa lên cl

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀNKHOA KHOA HỌC MÁY TÍNH

BÁO CÁO ĐỒ ÁN CƠ SỞ 2

TRANG WEB BÁN ĐỒ ĂN

TRỰC TUYẾN

Giảng viên hướng dẫn : TS Nguyễn Hà Huy Cường

Sinh viên thực hiện : Trần Nguyên Anh - 21IT003

Lớp : 21GIT

Đà Nẵng, 20 tháng 11 năm 2022

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

KHOA KHOA HỌC MÁY TÍNH

BÁO CÁO ĐỒ ÁN CƠ SỞ 2

TRANG WEB BÁN ĐỒ ĂN

TRỰC TUYẾN

Đà Nẵng, 20 tháng 11 năm 2022

LỜI CẢM ƠN

Trước tiên chúng tôi xin gửi lời cảm ơn chân thành sâu sắc tới các thầy cô giáo trong Đại học công nghệ thông tin và truyền thông Việt Hàn đã tận tình giảng dạy, truyền đạt cho em những kiến thức, kinh nghiệm quý báu trong suốt trong thời gian qua

Đặc biệt em xin gửi lời cảm ơn đến TS Nguyễn Hà Huy Cường đã tận tình giúp đỡ, trực tiếp chỉ bảo, hướng dẫn chúng tôi trong suốt quá trình thực hiện Đồ án

cơ sở 2 Trong thời gian làm việc, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà còn học tập được tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu quả, đây là những điều rất cần thiết cho em trong quá trình học tập và công tác sau này

Sau cùng xin gửi lời cảm ơn chân thành tới gia đình, bạn bè đã động viên, đónggóp ý kiến và giúp đỡ chúng tôi trong quá trình học tập, nghiên cứu và hoàn thành bài báo cáo này

Tuy đã cố gắng hết sức để có thể hoàn thành bài đồ án cơ sở lần này Tuy nhiên chúng tôi chắc hẳn vẫn không thể thoát khỏi được thiếu sót Kính mong nhận được sự chỉ bảo và giúp đỡ của quý thầy cô và các bạn để sản phẩm của tụi em có thể được hoàn thiện hơn

Một lần nữa, chúng tôi xin chân thành cảm ơn!

Sinh viên

Lê Nguyễn Quốc Huy, Trần Nguyên Anh

NHẬN XÉT

(Của giảng viên hướng dẫn)

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN 12

1.1.TỔNG QUAN 12 1.1.1 Tên đề tài: 12 1.1.2 Bối cảnh thực hiện: 12 1.1.3 Vấn đề cần giải quyết: 12 1.1.4 Nội dung chính: 12 1.1.5 Phương pháp nghiên cứu 12 1.1.5.1 Phương pháp 1: 12

1.1.5.2 Phương pháp 2: 12

1.1.5.3 Phương pháp 3: 13

1.1.5.4 Kết luận: 13

1.1.6 Lý do chọn đề tài: 13 1.1.7 Mục tiêu đề tài: 13 1.1.8 Kết quả: 14 1.2.GIỚI THIỆU CÁC PHẦN CỦA WEBSITE VÀ CHỨC NĂNG CỦA TỪNG PHẦN 15 1.2.1 Trang chủ 15 1.2.2 Shop 15 1.2.3 Thanh toán 15 CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 16

2.1.6 Tailwind (CSS Framework) 21

2.2.1 Visual Studio Code 232.2.2 MongoDB Compass GUI: 24

3.3.1 Biểu đồ Use-Case tổng quát 283.3.2 Use-case xem tất cả sản phẩm của cửa hàng 29

3.3.3 Use-case phân loại sản phẩm 303.3.4 Use-case thêm sản phẩm vào giỏ hàng 323.3.5 Use-case quản lý giỏ hàng 343.3.6 Use-case đăng ký 363.3.7 Use-case đăng nhập 383.3.8 Use-case đăng xuất 403.3.9 Use-case cập nhật thông tin cá cá nhân 423.3.10 Use-case thanh toán đơn hàng 443.3.11 Use-case xem tin tức 463.3.12 Use-case liên hệ cửa hàng 483.3.13 Use-case yêu thích 503.3.14 Use-case xem thông tin cửa hàng 523.4.THIẾT KẾ CƠ SỞ DỮ LIỆU 53CHƯƠNG 4 GIỚI THIỆU WEBSITE 554.1.Thành phần của website 554.1.1 Logo của trang web 55

DANH MỤC HÌNH ẢNH

Hình 1 So sánh các phương pháp nghiên cứu 13

Hình 2 React JS 16

Hình 3 MongoDB 17

Hình 4 HTML 18

Hình 5 CSS 19

Hình 6 Javascript 20

Hình 7 Tailwind CSS 21

Hình 8 Restful API 22

Hình 9 Ajax 23

Hình 10 Visual Studio Code 23

Hình 11 MongoDB Compass GUI 25

Hình 12 Node JS 26

Hình 13 Use-case tổng quát 28

Hình 14 Use-case xem tất cả sản phẩm của cửa hàng 29

Hình 15 Activity diagram xem tất cả sản phẩm của cửa hàng 29

Hình 16 Workflow xem tất cả sản phẩm của cửa hàng 30

Hình 17 Use-case phân loại sản phẩm 30

Hình 18 Activity diagram phân loại sản phẩm 31

Hình 19 Workflow phân loại sản phẩm 32

Hình 20 Use-case thêm sản phẩm vào giỏ hàng 32

Hình 21 Activity diagram thêm sản phẩm vào giỏ hàng 33

Hình 22 Workflow thêm sản phẩm vào giỏ hàng 34

Hình 23 Use-case quản lý giỏ hàng 34

Hình 24 Activity diagram quản lý giỏ hàng 35

Hình 25 Workflow quản lý giỏ hàng 36

Hình 26 Use-case đăng ký 36

Hình 27 Activity diagram đăng ký 37

Hình 28 Workflow đăng ký 38

Hình 29 Use-case đăng nhập 38

Hình 30 Activity diagram đăng nhập 39

Hình 31 Workflow đăng nhập 40

Hình 32 Use-case đăng xuất 40

Hình 33 Activity diagram đăng xuất 41

Hình 34 Workflow đăng xuất 42

Hình 35 Use-case cập nhật thông tin cá cá nhân 42

Hình 36 Activity diagram cập nhật thông tin cá cá nhân 43

Hình 37 Workflow cập nhật thông tin cá cá nhân 43

Hình 38 Use-case thanh toán đơn hàng 44

Hình 39 Activity diagram thanh toán đơn hàng 45

Hình 40 Workflow thanh toán đơn hàng 46

Hình 41 Use-case xem tin tức 46

Hình 42 Use-case xem tin tức 47

Hình 43 Workflow xem tin tức 48

Hình 44 Use-case liên hệ cửa hàng 48

Hình 45 Activity diagram liên hệ cửa hàng 49

Hình 46 Workflow liên hệ cửa hàng 50

Hình 47 Use-case yêu thích 50

Hình 48 Activity diagram yêu thích 51

Hình 49 Workflow yêu thích 52

Hình 50 Use-case xem thông tin cửa hàng 52

Hình 51 Activity diagram xem thông tin cửa hàng 53

Hình 52 Workflow xem thông tin cửa hàng 53

Hình 53 Bảng vẽ diagram chung 54

Hình 54 Logo của trang web 55

Hình 55 Header 55

Hình 56 Footer 56

Hình 57 Sidebar 56

Hình 58 Thẻ sản phẩm 57

Hình 59 Thẻ tin tức 58

Hình 60 Bộ lọc sản phẩm 59

Hình 61 Loading 60

Hình 62 Thông tin của khách hàng 60

Hình 63 Phương thức thanh toán 61

Hình 64 Trang chủ 62

Hình 65 Các món phổ biến 62

Hình 66 Tin tức 63

Hình 67 Trang cửa hàng 63

Hình 68 Thực đơn 64

Hình 69 Tin tức 64

Hình 70 Bài tin cụ thể 65

Hình 71 Trang đăng ký 65

Hình 72 Trang đăng nhập 66

Hình 73 Trang cập nhật 66

Hình 74 Giỏ hàng 67

Hình 75 Giỏ hàng 67

Hình 76 Giỏ hàng 68

Hình 77 Thanh toán 68

Hình 78 Thanh toán bằng thẻ 69

Hình 79 Tình trạng hóa đơn 70

Hình 80 Yêu thích 70

Hình 81 Liên hệ 71

Hình 82 Email nhận được 71

CHƯƠNG 1: GIỚI THIỆU BÀI TOÁN

- Xây dựng các module cần thiết cho hệ thống

- Thiết kế giao diện, bên cạnh đó tìm hiểu và đánh giá tâm lý của khách hàng để thiết kế thêm vào đó là cải thiện để các chức năng trên trang web trở nên tiện lợi hơn đối với khách hàng

- Website nhanh và hiệu quả hơn trong việc bán món ăn

- Áp dụng rộng rãi chức năng của các framework để tạo nên trang web và

cơ sở dữ liệu dạng non-relational NOSQL với mã nguồn mở được sử dụng rộng rãi mongodb Cơ sở dữ liệu được đưa lên cloud để hợp tác và cũng có thể đưa dưới local để làm việc riêng biệt

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

1.1.5.1 Phương pháp 1:

- Tên phương pháp: Nghiên cứu thực tế

- Cách thực hiện: Khảo sát tại các quán, nhà hàng bán thức ăn nhanh

1.1.5.2 Phương pháp 2:

- Tên phương pháp: Nghiên cứu qua sách báo

- Cách thực hiện: Mượn từ thư viện về nghiên cứu.

1.1.5.3 Phương pháp 3:

- Tên phương pháp: Nghiên cứu qua internet

- Cách thực hiện: thực hiện đọc thông tin, xem mã nguồn bằng trình duyệt

1.1.5.4 Kết luận:

Hình 1 So sánh các phương pháp nghiên cứu

- Kết hợp thực hiện cả 3 phương pháp nghiên cứu nhưng ưu tiên sử dụng phương pháp 3 nhiều hơn

1.1.6 Lý do chọn đề tài:

Trong thời đại ngày nay, đất nước ta đang hội nhập vào WTO cùng với phát triển nhanh chóng của công nghệ thông tin được áp dụng trên mọi lĩnh vực của cuộc sống như kinh tế, chính trị, văn hóa xã hội,… tất cả đều cần có công nghệ thông tin Như hiện nay chúng ta

đã biết lập trình và thiết kế Website có thể được coi là ngành “hot”

mà hiện nay chúng ta đang rất quan tâm Sau khi nghiên cứu tình hình của công ty em đã đưa ra quyết định “TRANG WEB BÁN ĐỒ

ĂN TRỰC TUYẾN” nhằm đáp ứng nhu cầu của khách hàng Hiện nay nhu cầu sử dụng Internet ngày càng nhiều và hình thức kinh doanh trên mạng ngày càng đa dạng và phong phú rất được nhiều người sử dụng và ưa chuộng Cho nên khi xây dựng trang web này trên hệ thống trực tuyến sẽ giúp cho khách hàng thuận lợi trong việcmua các sản phẩm của công ty mà không cần phải vất vả đến tận nơi để mua hàng như lúc trước

1.1.7 Mục tiêu đề tài:

- Giúp doanh nghiệp hoặc công ty đưa sản phẩm đến nhiều người mua hơn

- Giúp giảm thiểu khả năng đi lại trong mùa covid-19

- Giúp người dùng chỉ cần tốn vài phút để mua sản phẩm

- Mang lại sự tiện dụng trong việc mua sắm của người dùng.

- Đem lại được kiến thức thực tiễn cho chúng em, đáng để học hỏi cũng như trau dồi kiến thức

- Cải thiện kỹ năng lập trình của nhóm bọn em với React JS

- Cung cấp cho nhóm em kiến thức về cách vận hành của một nhà hàng bán thức ăn nhanh

1.1.8 Kết quả:

- Vận dụng những kiến thức cơ bản cần có về lập trình web để cho rakết quả gần với các trang web thương mại điện tử ngoài thực tế nhất

có thể

- Ứng dụng và phát triển tất cả các chức năng của framework react

js, công nghệ node js và công nghệ SPA trong react js cải thiện tốc

độ trang web- Ứng dụng, phát triển được công nghệ thiết kế web bằng ReactJS

- Với quy mô trang web vừa và nhỏ, cộng thêm thời gian không cho phép nên đề tài “TRANG WEB BÁN ĐỒ ĂN TRỰC TUYẾN” có thể chưa có đầy đủ các chức năng hoàn thiện của một trang web tìm việc Trong quá trình làm còn nhều sai sót, do kiến thức có hạn lên website còn ít nhiều thiếu sót về việc hiển thị cũng như tối ưu thuật toán, thời gian thực hiện Cũng như giao diện chưa được thân thiện với người dùng Một số lỗi còn xảy ra trong lúc chạy chương trình Trong tương lai chúng tôi sẽ cố gắng khắc phục những sai sót này

1.2 GIỚI THIỆU CÁC PHẦN CỦA WEBSITE VÀ CHỨC NĂNG CỦA TỪNG PHẦN

- Website được chia làm 3 trang chính:

- Trang chủ

- Shop

- Trang thanh toán

1.2.1 Trang chủ

- Hiển thị món nổi bật, món mới ra mắt, …

- Cung cấp thông tin người dùng cần biết về trang web

1.2.2 Shop

- Phân loại món ăn

- Đưa vào giỏ hàng

1.2.3 Thanh toán

-Thanh toán bằng tiền mặt

-Thanh toán bằng thẻ

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ

2.1 CÔNG NGHỆ

2.1.1 React JS

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng, nó không phải là 1 framework js nào hết React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được React được xây dựng xung quanh các component React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau [CITATION Bảo18 \t \l 1033 ] Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cải thiện performance websitethì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn “chốt sale” với ReactJS và bắt đầu tìm hiểu nó từ bây giờ:

- Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp

- Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé! [CITATION TừQ21 \l 1033 ]

2.1.2 MongoDB

Hình 3 MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection

sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.[CITATION Got21 \l 1033 ]MongoDB cho phép ta:

+ Quản lý và truyền tải content

+ Hỗ trợ Cấu trúc Mobile và Social

+ Quản lý data khách hàng

2.1.3 HTML

HTML (viết tắt của từ HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript

Một website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều này có nghĩa

là nó không thể thực hiện các chức năng “động” Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩn Internet được

tổ chức W3C (World Wide Web Consortium) vận hành và phát triển Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML Phiên bản HTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đã thay thế HTML bằng XHTML vào năm 2000 Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>, <header>, <footer>…) [CITATION Comwn \l 1033 ]

2.1.4 CSS

Hình 5 CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Nó có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng…thì CSS sẽ giúp ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996,

vì HTML không được thiết kế để gắn tag để giúp định dạng trang web

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện

website), chúng là không thể tách rời [ CITATION manwn \l 1033 ]

2.1.5 Javascript

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trênmáy tính lẫn điện thoại.

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó

có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trêntrình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp choJavascript có thể làm việc ở backend

Hãy thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứngslide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp tất cả các chức năng nàyđều được xử lý bằng Javascript [CITATION frewn \y \t \l 1033 ]

2.1.6 Tailwind (CSS Framework)

Hình 7 Tailwind CSS

Tailwind là một tập hợp các lớp tiện ích (class) cấp thấp Chúng có thể được sử dụng như những viên gạch lego để xây dựng bất kỳ loại thành phần nào Framework bao gồm các thuộc tính CSS quan trọng nhất (nhưng có thể dễ dàng mở rộng bằng nhiều cách khác nhau) Với Tailwind, tùy biến trở nên dễ dàng hơn bao giờ hết Framework này có tài liệu vô cùng chi tiết, bao gồm tất cả cách sử dụng chi tiết của class và chỉ dẫn nhiều cách tùy chỉnh khác nhau Tất cả các trình duyệt hiện đại và IE11 +, đều được hỗ trợ [ CITATION Topwn \l 1033 ]

Diễn giải các thành phần:

- API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML

- REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơngiản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET,POST, DELETE, vv đến một URL để xử lý dữ liệu.

- RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho cácứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết

kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau [ CITATION Topwn2 \l 1033 ]

Hình 8 Restful API.

2.1.8 Ajax.

AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web, hoàn toàn không reload lại toàn bộ trang

Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript

AJAX là một trong những công cụ giúp chúng ta đem lại cho người dùng trải nghiệm tốt hơn Khi cần một thay đổi nhỏ thì sẽ không cần load lại cả trang web, làm trang web phải tải lại nhiều thứ không cần thiết

Những lợi ích mà AJAX mang lại:

- AJAX được sử dụng để thực hiện một callback Được dùng để thực hiệnviệc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộ trang web Với những server nhỏ thì việc này cũng tiết kiệm được băng thông cho chúng ta hơn

- Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thôngtin chứ không load cả trang Bằng cách này thì có thể giảm thiểu được tốc độ tảitrang giúp người dùng có trải nghiệm tốt hơn

- Trang web bạn tạo ra cũng sẽ đa dạng và động hơn [ CITATION Topwn1 \l 1033 ]

Hình 9 Ajax.

2.2.CÔNG CỤ THỰC HIỆN

2.2.1 Visual Studio Code

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kếthợp hoàn hảo giữa IDE và Code Editor.

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Với việc cải tiến và áp dụng các công nghệ mới, Visual Studio Code đã chứng minh cho các lập trình viên thấy hiệu quả của mình Ngoài các Developers, thì Testers,Data Administrators và tất cả những ai quan tâm đến lập trình đều có thể sử dụng Visual Studio [ CITATION Quáwn \l 1033 ]

Đây cũng là một trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn Trong đó có thể

kể đến những ưu điểm sau:

+ Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…

+ Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung

+ Các tiện ích mở rộng rất đa dạng và phong phú

+ Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug),…

+ Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống.Visual Studio Code là một trong những trình biên tập Code rất phổ biến nhất hiện nay.Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội của mình khi so sánh với những phần mềm khác Tuy bản miễn phí không có nhiều các tính năng nâng cao nhưng Visual Studio Code thực sự có thể đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên.[ CITATION Quâ22 \l 1033 ]

2.2.2 MongoDB Compass GUI:

MongoDB Compass là một GUI cho MongoDB Nó còn được gọi là MongoDB GUI MongoDB cho phép người dùng phân tích nội dung dữ liệu được lưu trữ của họ mà không cần biết trước về cú pháp truy vấn MongoDB Khi chúng tôi tìm hiểu khám phá

dữ liệu của mình trong môi trường trực quan, chúng tôi có thể sử dụng Compass GUI

để tối ưu hóa hiệu suất, quản lý chỉ mục và triển khai xác thực Document

Tất cả các phiên bản của MongoDB Compass đều là nguồn mở (tức là chúng ta có thể

tự do triển khai và xem các kho lưu trữ của tất cả các phiên bản MongoDB GUI) Các kho nguồn của Compass MongoDB có thể được tìm thấy trên liên kết sau của GitHub.[ CITATION Got21 \l 1033 ]

2.2.3 Node JS.

NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ

Dưới đây là một số ưu và nhược điểm của Nodejs version bạn cần biết:

Ưu điểm

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học

- Chia sẻ cùng code ở cả phía client và server

- NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ

- Cộng đồng hỗ trợ tích cực

- Cho phép stream các file có kích thước lớn [ CITATION Ngu22 \l 1033]

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1 CÁC CHỨC NĂNG

3.1.1 Đăng nhập

Khách hàng có thể đăng nhập bằng tài khoản để tương tác với hệ thống, thực hiện những chức năng như: Xem sản phẩm, đưa sản phẩm vào giỏ, thanh toán đơn hàng, cập nhật thông tin cá nhân, phân loại sản phẩm cầntìm

3.1.2 Đăng ký

Khách hàng đăng ký tài khoản để được tương tác với hệ thống, không thì chỉ có thể xem qua các sản phẩm

3.1.3 Cập nhật thông tin cá nhân

Khách hàng cập nhật những thông tin cá nhân của mình như Tên, Địa chỉ, Email

3.1.4 Tìm kiếm sản phẩm theo loại

Phân loại sản phẩm theo loại (gà, spaghetti, đồ tráng miệng, cơm,…)

3.1.5 Quản lý giỏ hàng

Người dùng quản lý những vật phẩm hiện hữu trong giỏ hàng của mình

3.1.6 Thêm vào giỏ hàng

Quản lý được những sản phẩm mình đã cho vào giỏ hàng, có thể thêm bớt tùy ý số lượng sản phẩm đã bỏ vào giỏ

3.1.7 Thanh toán đơn hàng

Khách hàng thực tiện thanh toán bằng tiền (khi nhận hàng) hoặc thẻ tín dụng (trả trước online)

3.1.8 Yêu thích

Khách hàng có thể thêm sản phẩm cụ thể vào mục yêu thích của mình

để dễ dàng tìm, đặt lại cho lần sau

3.1.9 Đăng xuất

Khách hàng đăng xuất tài khoản, một số tính năng tương tác với hệ thống bị tước đi

3.2 DANH SÁCH USE-CASE

3.2.1 Use-case xem tất cả sản phẩm của cửa hàng 3.2.2 Use-case phân loại sản phẩm

3.2.3 Use-case thêm sản phẩm vào giỏ hàng 3.2.4 Use-case đăng ký

3.2.5 Use-case đăng nhập

3.2.6 Use-case đăng xuất

3.2.7 Use-case cập nhật thông tin cá nhân 3.2.8 Use-case thanh toán đơn hàng

3.2.9 Use-case xem tin tức

3.2.10 Use-case liên hệ cửa hàng

3.2.11 Use-case yêu thích

3.2.12 Use-case xem thông tin cửa hàng

3.2.13 Use-case đặt hàng

3.3 CHI TIẾT USE-CASE

3.3.1 Biểu đồ Use-Case tổng quát

Hình 13 Use-case tổng quát

3.3.2 Use-case xem tất cả sản phẩm của cửa hàng

Hình 14 Use-case xem tất cả sản phẩm của cửa hàng

Mô tả: Cho phép người dùng xem tất cả sản phẩm hiện hữu trong cửa hàng

Hình 16 Workflow xem tất cả sản phẩm của cửa hàng

3.3.3 Use-case phân loại sản phẩm

Hình 17 Use-case phân loại sản phẩm

Mô tả: Cho phép người dùng phân loại sản phẩm mình muốn

4 Người dùng phân loại sản phẩm theo

loại mình muốn

5.Hệ thống nhận thông tin và lọc ra những sản phẩm ứng với mục được chọn

Hình 19 Workflow phân loại sản phẩm

3.3.4 Use-case thêm sản phẩm vào giỏ hàng

Hình 20 Use-case thêm sản phẩm vào giỏ hàng

Mô tả: Cho phép người dùng đưa những sản phẩm mình muốn mua vào giỏ hàng tạm

thời của mình, từ đó có thể thanh toán

NGƯỜI DÙNG HỆ THỐNG HOẠT ĐỘNG

1 Người dùng đăng nhập vào hệ thống

2 Người dùng nhấn vào menu

3 Hệ thống truy xuất ra trang menu

4 Người dùng lựa chọn sản phẩm muốn

mua

5 Hệ thống lưu lại lựa chọn và lưu vào giỏ hàng tạm thời

3.3.5 Use-case quản lý giỏ hàng

Hình 23 Use-case quản lý giỏ hàng

Mô tả: Cho phép người dùng có thể quản lý được giỏ hàng tạm thời của mình

NGƯỜI DÙNG HỆ THỐNG HOẠT ĐỘNG

1 Người dùng đăng nhập vào trang web

2 Chọn vào mục giỏ hàng

3.Hệ thống truy xuất đến trang giỏ hàng

4 Người dùng thay đổi tùy ý tình trạng

của giỏ hàng

5 Hệ thống cập nhật thay đổi của giỏ hàng