XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN SỬ DỤNG NODE.JS, REACT VÀ MONGODB

XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN SỬ DỤNG NODE.JS, REACT VÀ MONGODB Nodejs là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine. Nodejs sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới. NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Windows cho tới Linux, MacOs nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. 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. 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 tablebased 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.

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI

XÂY DỰNG WEBSITE BÁN HÀNG TRỰC TUYẾN SỬ DỤNG

NODE.JS, REACT VÀ MONGODB

Khánh Hòa

Trang 3

Mục đích của việc tin học hóa quản lý bán hàng là nhằm giúp cho người dùng

mà đặc biệt là khách hàng có thể dễ dàng xem thông tin và lựa chọn sản phẩn thôngqua trang Website với những ưu điểm nổi bật như hiển thị trực quan, dễ tiếp cận, thôngtin truyền tải giàu hình ảnh, cho cái nhìn hệ thống tổng thể và toàn diện có thể hỗ trợviệc cung cấp cũng như tiếp cận thông tin sản phẩm được tiến hành nhanh hơn, kết quảtốt hơn, từ đó có thể dễ dàng đưa ra quyết định mua hàng một cách hiệu quả hơn

Do khả năng của chúng em còn hạn chế nên các chức năng của website và hệthống vẫn chưa hoàn thiện Rất mong nhận được sự thông cảm và đóng góp ý kiến từQuý Thầy/Cô và các bạn

Trang 4

MỤC LỤC

TÓM TẮT ĐỀ TÀI i

MỤC LỤC ii

MỞ ĐẦU 1

CHƯƠNG 1 TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU 3

1.1 CƠ SỞ LÝ THUYẾT 3

1.1.1 Giới thiệu Node.js 3

1.1.2 Giới thiệu ReactJs 3

1.1.3 Giới thiệu MongoDB 4

1.2 CÁC NGÔN NGỮ ĐƯỢC SỬ DỤNG 5

1.2.1 Ngôn ngữ HTML (Ngôn ngữ đánh dấu siêu văn bản) 5

1.2.2 Ngôn ngữ CSS (Cascading Style Sheets) 5

1.2.3 Ngôn ngữ JavaScript 5

1.3 THỰC TIỄN VẤN ĐỀ LIÊN QUAN ĐẾN ĐỀ TÀI 6

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG 8

2.1 HIỆN TRẠNG THÀNH PHỐ NHA TRANG 8

2.2 TÌNH HÌNH BÁN LẺ HÀNG HÓA HIỆN NAY 8

2.3 ĐẶC TẢ BÀI TOÁN 9

2.3.1 Chức năng đối với khách hàng 9

2.3.2 Chức năng của quản trị viên 12

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

3.1 PHÂN TÍCH 15

3.1.1 Xác định Actor và Use-case 15

3.1.2 Đặc tả Use Case 16

3.1.3 Biểu đồ tuần tự Use case 25

3.2 THIẾT KẾ 37

3.2.1 Thiết kế dữ liệu 37

3.2.1.1 Mô hình Json Server 37

3.2.1.2 Từ điển dữ liệu 38

3.2.2 Thiết kế giao diện 40

3.2.2.1 SƠ ĐỒ MÀN HÌNH 40

3.2.2.2 CÁC MÀN HÌNH GIAO DIỆN 40

CHƯƠNG 4 HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG CHƯƠNG TRÌNH 51

4.1 SỬ DỤNG PROJECT Ở DẠNG LOCALHOST 51

4.1.1.Hướng dẫn cài đặt Visual Stuido Code cách đơn giản 51

Trang 5

4.1.2.Cài đặt môi trường NodeJS (Server) cách đơn giản 51

4.1.3.Cài đặt môi trường MongoDB và tool MongoCompass cách đơn giản.52 4.1.4.Cài đặt môi trường ReactJS (Client) sử dụng Visual Studio Code 55

4.1.5 CÁCH TẠO CẤU TRÚC PROJECT NODE.JS SERVER SỬ DỤNG VISUAL STUDIO 55

4.2 SỬ DỤNG PROJECT Ở DẠNG WEBSITE ONLINE 57

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 57

5.1 KẾT QUẢ ĐẠT ĐƯỢC 57

5.2 ƯU ĐIỂM 58

5.3 HẠN CHẾ 58

5.4 HƯỚNG PHÁT TRIỂN 58

5.5 KẾT LUẬN 58

TÀI LIỆU THAM KHẢO 59

Trang 6

MỞ ĐẦU

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

Nha Trang là một thành phố ven biển và là trung tâm chính trị, kinh tế, văn hóa,khoa học kỹ thuật và du lịch của tỉnh Khánh Hòa, Việt Nam Thống kê về dân số tạiNha Trang là 422.601 người (số liệu năm 2019) Từ đầu năm đến nay do ảnh hưởngcủa dịch Covid-19, hoạt động kinh doanh thương mại- dịch vụ trên địa bàn thành phốNha Trang chịu tác động nặng nề Ước tính tổng mức bán lẻ hàng hóa và dịch vụ tiêudùng trên địa bàn thành phố trong quý I năm 2020 chỉ đạt 7.494 tỷ đồng, bằng 12,67%

kế hoạch và giảm 28,76% so với cùng kỳ

Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng địnhđược vai trò xúc tiến và thúc đẩy sự phát triển trong kinh doanh Đối với một cửa hànghay shop, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng đượcnhu cầu của khác hàng sẽ là cần thiết Con người đang trở nên bận rộn và có rất ít thờigian để đi mua sắm hơn Đó là lý do tại sao, mua sắm trực tuyến đang dần lên ngôi.Xây dựng website bán hàng là cách tiết kiệm, hiệu quả để các cửa hàng giới thiệu sảnphẩm và bán hàng

Website không chỉ giúp bán hàng Nó còn là kênh để cửa hàng có thể giao tiếp vớikhách hàng cực kỳ hiệu quả Các công cụ như: bình luận trên sản phẩm, rating hànghoá, hoặc live chat, giúp khách mua hàng tương tác với cửa hàng thuận tiện hơn.Những thắc mắc và câu hỏi của khách hàng về sản phẩm sẽ được ghi nhận, phản hồitrực tiếp Khi mua hàng, khách cũng để lại thông tin liên hệ Về lâu dài, bạn sẽ cóthông tin khách hàng, biết thói quen mua sắm của họ để thực hiện các chương trình ưuđãi hoặc upsales

Từ những lý do trên nên em đã quyết định thực hiện đề tài: “Xây dựng Website bán hàng trực tuyến sử dụng Node.js, React và MongoDB”.

Mục tiêu nghiên cứu:

 Mục tiêu chung: Xây dụng Website bán hàng trực tuyến sử dụng Node.js,

React và MongoDB kết hợp với những kiến thức đã học tại trường

 Mục tiêu cụ thể:

- Xây dựng CSDL

Trang 7

- Thiết kế giao diện trang Website.

- Thiết kế và xây dựng chức năng cơ bản của Website bán hàng

 Nội dung và phương thức thực hiện:

 Nội dung thực hiện:

- Khảo sát các yêu cầu chức năng của Website bán hàng (khảo sát online – khảo sátthực tế)

- Thu thập thông tin, xây dựng cơ sở dữ liệu cho Website

- Tìm hiểu công nghệ tích hợp cho Website (Machine Learning, AI)

 Phương pháp:

- Chọn lọc chức năng, yêu cầu từ phiếu khảo sát và khảo sát thực tế

 Cấu trúc của báo cáo bao gồm:

Chương 1: Tổng quan về vấn đề nghiên cứu.

Chương 2: Khảo sát hiện trạng

Chương 3: Phân tích thiết kế hệ thống

Chương 4: Trình bày những kết quả đã thực hiện được và hướng dẫn chi tiết

cách cài đặt, sử dụng chương trình

Chương 5: Những kết quả, ưu điểm và mặt hạn chế của hệ thống

Trang 8

CHƯƠNG 1 TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU

1.1 CƠ SỞ LÝ THUYẾT

1.1.1 Giới thiệu Node.js

Nodejs là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine.Nodejs sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới NodeJS có thểchạy trên nhiều nền tảng hệ điều hành khác nhau từ Windows cho tới Linux, MacOsnên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng JavascriptModule khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Khi nói đến NodeJS thì phải nghĩ tới vấn đề Realtime Realtime ở đây chính là xử lýgiao tiếp từ client tới máy chủ theo thời gian thực

Các tính năng vượt trội của Node.js:

 Không đồng bộ: Tất cả các API của Nodejs đều không đồng bộ blocking), nó chủ yếu dựa trên nền của Nodejs Server và chờ đợi Server trả dữliệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chếthông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từcác cuộc gọi API trước (Realtime)

(none- Chạy rất nhanh: Nodejs được xây dựng dựa vào nền tảng V8 Javascript Enginenên việc thực thi chương trình rất nhanh

 Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồngduy nhất với sự kiện lặp cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứngmột cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như tráingược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu.Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự cóthể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủtruyền thống như Apache HTTP Server

 Không đệm: Nodejs không đệm bất kì một dữ liệu nào và các ứng dụng này chủyếu là đầu ra dữ liệu

 Có giấy phép: Nodejs đã được cấp giấy phép bởi MIT License

1.1.2 Giới thiệu ReactJs

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…

Trang 9

Những đặc trưng của ReactJs:

 JSX: Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục

trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơnJavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻHTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy

nó chạy nhanh hơn so với code JavaScript tương đương

 Redux: là một predictable state management tool cho các ứng dụng Javascript.

Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong cácmôi trường khác nhau (client, server, and native) và dễ dàng để test Redux rađời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux củaFacebook Do vậy Redux thường dùng kết hợp với React

 Single-way data flow (Luồng dữ liệu một chiều): ReactJS không có những

module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành cáccomponent nhỏ có mỗi quan hệ chặt chẽ với nhau Luồng truyền dữ liệu trongReactJS: Luồng dữ liệu một chiều từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu

và ứng dụng vào trong các dự án Tuy nhiên, cơ chế này sẽ phát huy được ưuđiểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thìReactJS sẽ phát huy được vai trò của mình

 Virtual DOM: Những Framework sử dụng Virtual-DOM như ReactJS khi

Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trênView mà vẫn phản ánh được sự thay đổi đó Do Virtual-DOM vừa đóng vai trò

là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo

sự thay đổi trên View và ngược lại Có nghĩa là mặc dù chúng ta không tácđộng trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chếData-binding Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thếkhông thể tuyệt vời hơn khi sử dụng Virtula-DOM

1.1.3 Giới thiệu MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQLdatabase 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ữ trongdocument kiểu JSON nên truy vấn sẽ rất nhanh

Ưu điểm của MongoDB:

+ Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàngcao, hiệu suất lớn và dễ dàng mở rộng lưu trữ

Trang 10

+ Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độđọc và ghi cao.

Nhược điểm của MongoDB:

+ Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao

do không có ràng buộc

+ Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng

+ Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớRAM lớn

+ Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vìvậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao

1.2 CÁC NGÔN NGỮ ĐƯỢC SỬ DỤNG

1.2.1 Ngôn ngữ HTML (Ngôn ngữ đánh dấu siêu văn bản)

HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản Nó được sử dụng để thiết

kế các trang web bằng ngôn ngữ đánh dấu HTML là sự kết hợp của ngôn ngữ Siêuvăn bản và Đánh dấu Siêu văn bản xác định liên kết giữa các trang web Ngôn ngữđánh dấu được sử dụng để xác định tài liệu văn bản trong thẻ xác định cấu trúc của cáctrang web

1.2.2 Ngôn ngữ CSS (Cascading Style Sheets)

Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là CascadingStyle Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngônngữ HTML và XHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng choXML, SVG, XUL Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide WebConsortium (W3C) Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTML (hoặcXHTML) ngay trong nội dung của nó, ta có thể sử dụng tệp CSS để định dạng và cóthể tái sử dụng

1.2.3 Ngôn ngữ JavaScript

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp vànhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như làmột phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũngnhư phía máy chủ (Nodejs) tạo ra các trang web động JavaScript Framework là thưviện được xây dựng dựa vào ngôn ngữ lập trình JavaScript Từ đó, mỗi frameworkđược tạo ra để phục cho từng lĩnh vực khác nhau

Hiện nay, có rất nhiều JavaScript Framework thông dụng như:

Reactjs: Thư viện dùng cho ứng dụng mobile

Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.Angular: Dùng để xây dựng ứng dụng Single Page…

Các ứng dụng của JavaScript:

- Phát triển web: Thêm tính tương tác và hành vi vào các trang web tĩnh,JavaScript đã được phát minh để làm điều này vào năm 1995 bằng cách sử dụngAngularJS

- Ứng dụng web: Với công nghệ, các trình duyệt đã được cải thiện đến mức cần

có một ngôn ngữ để tạo ra các ứng dụng web mạnh mẽ Khi chúng ta khám phá bản đồtrong Google Maps thì chúng ta chỉ cần nhấp và kéo chuột Tất cả chế độ xem chi tiết

Trang 11

chỉ cần một cú nhấp chuột và điều này chỉ có thể là JavaScript Nó sử dụng Giao diệnlập trình ứng dụng (API) cung cấp thêm sức mạnh cho mã Electron và React rất hữuích trong bộ phận này.

- Ứng dụng máy chủ: Với sự trợ giúp của Node.js, JavaScript đã đi từ máy kháchđến máy chủ và Node.js là mạnh nhất ở phía máy chủ

- Trò chơi: Không chỉ trong các trang web, JavaScript còn giúp tạo ra các tròchơi để giải trí Sự kết hợp giữa JavaScript và HTML5 cũng làm cho JavaScript trởnên phổ biến trong phát triển trò chơi Nó cung cấp thư viện EaseJS cung cấp các giảipháp để làm việc với đồ họa phong phú

- Đồng hồ thông minh: JavaScript đang được sử dụng trong tất cả các thiết bị vàứng dụng có thể Nó cung cấp một thư viện PebbleJS được sử dụng trong các ứngdụng đồng hồ thông minh Framework này hoạt động cho các ứng dụng yêu cầuinternet cho hoạt động của nó

- Nghệ thuật: Các nghệ sĩ và nhà thiết kế có thể tạo bất cứ thứ gì họ muốn bằngJavaScript để vẽ trên khung vẽ HTML5, làm cho âm thanh hiệu quả hơn cũng có thểđược sử dụng thư viện p5.js

- Học máy: Thư viện ml5.js JavaScript có thể được sử dụng trong phát triển webbằng cách sử dụng machine learning

1.3 THỰC TIỄN VẤN ĐỀ LIÊN QUAN ĐẾN ĐỀ TÀI

Ngày nay, thuật ngữ website được sử dụng rất phổ biến, bất cứ ai, bất cứ thiết bịmáy tính,di động, hoặc thiết bị thông minh nào đều có kết nối internet hoặc có kết nốisóng di động đều có thể truy cập một website ở bất kì đâu

Đối với các cá nhân, doanh nghiệp trong thời đại công nghệ 4.0 bùng nổ thìWebsite là một kênh thông tin thiết yếu, là phương tiện tốt nhất và nhanh nhất để đưakhách hàng tiềm năng đến với cửa hàng, đưa đến sự thành công trong việc bán hàng,

mở rộng phát triển thị trường và xây dựng phát triển thương hiệu

 Một trang Web được ví như là một cửa hàng thứ hai của doanh nghiệp, cá nhântrên Internet

Nếu như cửa hàng trong thực tế là nơi để các cá nhân, tập thể,khách hàng gặpmặt, thực hiện các giao dịch một cách trực tiếp thì thông qua website, khách hàng đã

có thể cập nhật được những thông tin về sản phẩm, về dịch vụ mà không cần phải đếntận nơi Bên cạnh đó, một website có phong cách thiết kế ấn tượng cũng sẽ để lại ấntượng trong lòng khách hàng

 Website giúp khẳng định thương hiệu và là công cụ cạnh tranh với đối thủ.Khi khách hàng có nhu cầu tìm kiếm bất kỳ thông tin về sản phẩm, dịch vụ hành độngđầu tiên của khách hàng chính là tìm kiếm thông tin trên Internet Ngay lúc này

Trang 12

website chính là một công cụ chính để giúp cạnh tranh và thu hút khách hàng hơn sovới đối thủ cạnh tranh.

Không chỉ cần có một website đơn giản mà phải cần sở hữu ngay một websitechuyên nghiệp để thu hút khách hàng và cạnh tranh với đối thủ

Trang 13

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG

2.1 HIỆN TRẠNG THÀNH PHỐ NHA TRANG

Vị trí: Nha Trang là một thành phố ven biển và là trung tâm chính trị, kinh tế,

văn hóa, khoa học kỹ thuật và du lịch của tỉnh Khánh Hòa, Việt Nam Trước đây, vùngđất Nha Trang vốn thuộc về Chiêm Thành, do đó các di tích của người Chăm vẫn còntồn tại nhiều nơi ở Nha Trang Nha Trang được Thủ tướng chính phủ Việt Nam côngnhận là đô thị loại I vào ngày 22 tháng 4 năm 2009 Nha Trang được mệnh danh là hònngọc của biển Đông, Viên ngọc xanh vì giá trị thiên nhiên, vẻ đẹp cũng như khí hậucủa nó

Dân số: Theo điều tra dân số năm 2019 thì dân số toàn thành phố có 322.601

người (1/4/2019), trong đó dân số thành thị chiếm 67,62% dân số nông thôn chiếm32,38% Mật độ dân số trung bình toàn thành phố là 1.062 người/km² Dân cư phân bốkhông đều, tập trung chủ yếu ở các phường nội thành Một số khu đô thị mới như khu

đô thị ven sông Tắc, khu đô thị Mipeco Nha Trang, khu đô thị VCN Phước Long, khu

đô thị Nha Trang Green Hill Villa, khu đô thị Nam Vĩnh Hải, khu đô thị Hoàng Long,khu đô thị VCN Phước Hải, khu đô thị An Bình Tân, khu đô thị Lê Hồng Phong II,khu đô thị Vĩnh Hòa, khu đô thị Cồn Tân Lập, khu đô thị Hòn Rớ 1, khu đô thị RoyalGarden, khu đô thị Garden Bay, khu đô thị biển An Viên, khu đô thị Vĩnh ĐiềmTrung, khu đô thị Mỹ Gia, khu đô thị Bắc Vĩnh Hải, khu đô thị Lê Hồng Phong I, khu

đô thị Phước Long

Kinh tế: Tổng mức bán lẻ hàng hóa và dịch vụ tiêu dùng quý III/2021 được

3.136,111 tỷ đồng, đạt 5,24% kế hoạch, giảm 54,72% so cùng kỳ; 9 tháng đầu nămđược18.255,070 tỷ đồng, đạt 30,52% kế hoạch, giảm 13,57% so cùng kỳ

2.2 TÌNH HÌNH BÁN LẺ HÀNG HÓA HIỆN NAY

Mô hình kinh doanh bán lẻ đa số được triển khai dưới dạng tạp hóa, cửa hàngtiện lợi, siêu thị mini,…

Tuy nhiên, tình hình dịch bệnh Covid19 diễn biến phức tạp; qua nhiều lần thựchiện giãn cách xã hội theo Chỉ thị số 16/CT-TTg, đến nay tình hình bệnh Covid -19trên địa bàn thành phố cơ bản đã dần được kiểm soát, toàn thành phố đã thực hiện chủtrương nới lỏng các biện pháp giãn cách xã hội tương ứng với từng mức độ nguy cơ ởthôn, tổ dân phố từ ngày 08/9/2021 Việc áp dụng nới lỏng đã góp phần làm cho tìnhhình hoạt động bán lẻ trên địa bàn thành phố tăng so với tháng trước, nhưng so vớicùng kỳ thì vẫn ở mức độ giảm do vẫn thực hiện nghiêm quy định phòng chống dịch

và người dân ra đường khi cần thiết và không ra khỏi nhà từ 19 giờ ngày hôm trước tới

5 giờ hôm sau

Trước tình hình đó nhiều hộ kinh doanh đã tìm đến những hình thức kinh doanhonline như sử dụng mạng xã hội Facebook để làm kênh bán lẻ, nhưng nó không manglại nhiều lợi ích do những chính sách từ phía Facebook Đối với một số người sử dụngcác ứng dụng bán hàng như Shopee, Lazada, Tiki, nhưng khó trong khâu quản lý hànghóa

Trong mùa dịch hiện nay nhu cầu về nhu yếu phẩm là rất cần thiết cho ngườitiêu dùng Do không thể đi lại thuận tiện, nguy cơ tiềm ẩn của dịch bệnh nên việc tớinhững cửa hàng tạp hóa, siêu thị là điều rất khó khăn Việc đặt các sản phẩm qua sàn

Trang 14

thương mại điện từ như Shopee thì không thể đảm bảo thời gian giao hàng, nguồnhàng cũng có thể được chuẩn bị sơ sài, không đảm bảo yêu cầu

Những khó khăn trên sẽ được giải quyết nếu như cửa hàng bán lẻ, siêu thị cócho mình một Website bán hàng trực tuyến đáp ứng được nhu cầu mua hàng của ngườitiêu dùng Qua đó họ có thể xem được thông tin chi tiết mặt hàng, so sánh giá tiền,chất lượng giữa các mặt hàng, tiết kiệm thời gian mua hàng,… Cùng với đó một cửahàng bán lẻ có Website có thể cung cấp cho khách hàng trải nghiệm mua hàng tốt nhất

và có thể quản lý được hệ thống bán lẻ (nhập – xuất sản phẩm, thống kê) một cách tối

Mô tả Khách hàng có thể xem chi tiết về các loại sản phẩm

Nhập Lựa chọn loại sản cần xem

Xử lý Tìm kiếm trong CSDL

Xuất Hiển thị thông tin về sản phẩm mà khách hàng muốn xem

Bảng 2.1: Bảng mô tả chức năng xem sản phẩm b) Tìm kiếm

Mô tả Khách hàng có thể tìm kiếm sản phẩm hoặc 1 nhóm bằng những form tìm

kiếm được xây dựng sẵn trên website

Nhập Khách hàng nhập vào từ khóa

Xử lý Hệ thống sẽ ghi nhận và thực hiện tìm kiếm trong cơ sở dữ liệu tất cả sản

phẩm mà tên có chứa từ khóa hay gần đúng với từ khóa

Xuất Hiển thị thông tin về 1 hoặc nhiều loại sản phẩm thỏa mãn được tìm kiếm

Bảng 2.2: Bảng mô tả chức năng tìm kiếm

Trang 15

c) Lựa chọn sản phẩm vào giỏ hàng

-Kiểm tra sản phẩm có trong giỏ hàng

-Nếu giỏ hàng đã có sản phẩm thì tăng số lượng trong giỏ hàng lên một đơn

vị, nếu không thì thêm mới vào giỏ hàng

Xuất Hiển thị thông tin về giỏ hàng mà khách hàng đã lựa chọn

Bảng 2.3: Bảng mô tả chức năng chọn sản phẩm vào giỏ hàng d) Đặt hàng

Mô

tả

Sau khi chọn sản phẩm vào giỏ hàng, khách hàng có thể đặt hàng

Nhập Nhập sản phẩm vào giỏ hàng và cung cấp thông tin họ tên, địa chỉ, email,

điện thoại để đặt hàng

Lựa chọn cách thức thanh toán trực tiếp hoặc trực tuyến

Xử

lý

-Kiểm tra sản phẩm có trong giỏ hàng

-Kiểm tra thông tin khách hàng

-Ghi nhận hóa đơn khách vào CSDL

Xuất Hiển thị thông tin về những sản phẩm mà khách hàng đã đặt hàng kèm thông

báo xác nhận đặt hàng thành công

Bảng 2.4: Bảng mô tả chức năng đặt hàng e) Đăng kí thành viên

Trang 16

đăng ký nếu có lỗi.

Bảng 2.6: Bảng mô tả chức năng đăng kí thành viên f) Đăng nhập website

Mô tả Đăng nhập vào website bằng cách gõ user và password đã đăng ký.Nhập Cung cấp tên đăng nhập và mật khẩu

Xử lý Truy cập kiểm tra tính chính xác trong CSDL

Xuất Hiển thị thông báo đăng nhập thành công hoặc lỗi và phải đăng nhập lại

Bảng 2.7: Bảng mô tả chức năng đăng nhập website g) Đăng xuất website

Mô tả Đăng xuất khỏi website

Nhập click vào nút đăng xuất trên website

Xử lý - Hủy toàn bộ session (hoặc token) của người dùng hiện tại

- Đưa trở về chức năng của khách vãng lai

Xuất Đưa về giao diện chính dành cho khách vãng lai

Bảng 2.8: Bảng mô tả chức năng đăng xuất website h) Đánh giá sản phẩm

Mô tả Đánh giá về sản phẩm trên website

Nhập Nhấp vào biểu tượng đánh giá

Xử lý - Nhập thông tin đánh giá theo định dạng

- Xác nhận đánh giáXuất Hiển thị thông báo đánh giá thành công

Bảng 2.9: Bảng mô tả chức năng đánh giá sản phẩm i) Tra cứu đơn hàng

Mô tả Người dùng có thể xem tra cứu đơn hàng

Nhập Nhấp vào danh mục đơn hàng trong phần menu nhỏ

Trang 17

Xử lý - Hiển thị danh sách đơn hàng của người dùng (đơn giản)

Xuất Thông tin trạng thái đơn hàng (có thể xem chi tiết hơn)

Bảng 2.10: Bảng mô tả chức năng kiểm tra trạng thái đơn hàng

2.3.2 Chức năng của quản trị viên

a) Đăng nhập quản trị

Mô tả Quản trị viên quản lý đăng nhập vào hệ thống bằng cách cung cấp tên đăng

nhập và mật khẩu vào form đăng nhập được xây dựng sẵn

Đầu

vào

- Tên đăng nhập

- Mật khẩu

Xử lý - Kiểm tra thông tin nhập vào có hợp lệ hay không

- Kết nối đến CSDL để kiểm tra tên đăng nhập và mật khẩu

Đầu

ra

- Chuyển đến trang quản trị nếu đăng nhập thành công

- Quay lại trang đăng nhập nếu đăng nhập thất bại

Bảng 2.11: Bảng mô tả chức năng đăng nhập Quản trị viên b) Đăng xuất quản trị

Mô tả Thoát khỏi tài khoản Quản trị viên

Đầu

vào

Click vào biểu tượng đăng xuất từ giao diện

Xử lý Tiến hành thoát tài khoản, hủy các biến token liên quan đến chức năng

quản trị

Đầu ra Quay lại trang đăng nhập

Bảng 2.12: Bảng mô tả chức năng đăng xuất Quản trị viên c)Quản lý sản phẩm

Mô tả Quản trị viên có quyền thêm, sửa hoặc xóa sản phẩm

Nhập Chọn và sử dụng công cụ quản lý sản phẩm

Xử lý -Thêm:

Kiểm tra tính hợp lệ của thông tin sản phẩm mới

Kiểm tra có tồn tại hay chưa?

Nếu chưa thêm mới sản phẩm vào CSDL

-Sửa:

Trang 18

Kiểm tra tính hợp lệ của thông tin sản phẩm mới

Nếu chưa cập nhật thông tin sản phẩm vào CSDL

-Xóa:

Nếu sản phẩm đã thuộc một giỏ hàng hoặc đơn hàng thì không được phépxóa

Ngược lại cho phép xóa sản phẩm

Thao tác chỉ cho phép thực hiện bởi các tài khoản có quyền hợp lệ

Xuất Hiện thông báo thành công hoặc lỗi

Bảng 2.13 Bảng mô tả chức năng quản lý sản phẩm d)Quản lý khách hàng

Mô tả Quản trị viên quản lý có quyền thêm, sửa hoặc xóa khách hàng

Nhập Chọn và sử dụng công cụ quản lý khách hàng

Xử lý -Thêm:

Kiểm tra tính hợp lệ của thông tin khách hàng mới

Kiểm tra có tồn tại tài khoản tương tự hay chưa?

Nếu chưa thêm mới khách vào CSDL

-Sửa:

Kiểm tra tính hợp lệ của thông tin mới

Nếu chưa cập nhật thông tin sản phẩm vào CSDL

Trang 19

+ Hủy: Khi khách hàng yêu cầu hoặc số lượng không đủ (thông báo chokhách hàng)

- Cập nhật trạng thái giao hàng: (Quản trị viên xác nhận)

+ Chưa giao (mặc định)

+ Đang giao

+ Đã giao

Phân quyền để sử dụng từng chức năng

Bảng 2.15 Bảng mô tả chức năng quản lý đơn hàng f) Quản lý đánh giá

Mô tả Quản trị viên quản lý có quyền xem và xóa đánh giá của các sản phẩm

Nhập Chọn và sử dụng công cụ quản lý đánh giá

Xử lý - Xem danh sách các bản đánh giá sản phẩm

- Xóa các đánh giá không phù hợp

Bảng 2.16 Bảng mô tả chức năng quản lý đánh giá

g) Thống kê, báo cáo

Mô tả Quản trị viên quản lý có quyền xem thống kê, báo cáo nhập – xuất hàngNhập Chọn và sử dụng công cụ thống kê, báo cáo

Xử lý In ra thông tin về thống kê, báo cáo theo yêu cầu của người dùng như doanh

thu theo tháng, quý, năm, sản phẩm bán chạy nhất…

Xuất Hiển thị bảng biểu thống kê

Bảng 2.17 Bảng mô tả chức năng thống kê

Trang 20

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

3.1 PHÂN TÍCH

3.1.1 Xác định Actor và Use-case

a)Danh sách các Actor của hệ thống

STT Tên Actor Ý nghĩa

1 Quản trị viên Quản trị viên là người quản trị trang web, có quyền hạn

thực hiện tất cả các chức năng của hệ thống như quản lýhàng hóa, quản lý đơn hàng, cập nhật sản phẩm, đăngnhập, quản lý người dùng,…

2 Khách hàng Khách hàng lựa chọn sản phẩm cần mua, yêu cầu mua

hàng, xem thông tin hàng hóa,…

3 Thành viên Sau khi 2 actor đăng nhập hợp lệ và hệ thống thì sẽ

mang danh nghĩa “thành viên” khác với “khách vãnlai” Một số use case dùng chung cho cả 2 đối tượng sẽđược chỉ định tác nhân là actor này

Bảng 3.1 Các Actor của hệ thống

b) Danh sách các Use Case của hệ thống

1 Đăng nhập Đăng nhập thành viên của trang web

3 Quản lý đơn hàng Quản lý đơn hàng (thêm, xóa, thay đổi trạng

thái) của website

4 Quản lý sản phẩm Quản lý các sản phẩm (thêm, xóa, sửa, tìm

kiếm) của trang web

5 Quản lý người dùng Quản lý thông tin người dùng của trang web

Trang 21

8 Quản lý thông tin cá nhân Quản lý các thông tin tài khoản (sửa thông tin,

đổi mật khẩu, …) trên website

10 Tìm kiếm Tìm kiếm sản phẩm của trang web

11 Đánh giá sản phẩm Trực tiếp nhận xét, bình luận về sản phẩm trên

website

12 Thống kê báo cáo Thống kê dữ liệu trong website

Bảng 3.2 Các Use Case của hệ thống

3.1.2 Đặc tả Use Case

a)Use case của hệ thống

Hình 3.1 Biểu đồ Use Case hệ thống

Trang 22

b)Use case đăng ký thành viên

Hình 3.1.1 Biểu đồ Use case đăng ký thành viên

- Tác nhân: Khách hàng.

- Mô tả: Cho phép khách xem đăng ký làm thành viên của hệ thống.

- Tiền điều kiện:

- Dòng sự kiện chính:

 Khách xem chọn mục đăng ký thành viên.

 Form Đăng ký thành viên hiển thị.

 Khách xem nhập thông tin cá nhân cần thiết vào form.

+ Dòng rẽ nhánh A1: Quá trình nhập thông tin không chính xác.

 Hệ thống thông báo nhập thông tin không chính xác.

 Hệ thống yêu cầu khách xem lại thông tin nhập.

 Nếu khách xem đồng ý thì quay lại bước 2 của luồng sự kiện chính.Nếu không đồng ý thì use case kết thúc.

- Hậu điều kiện: Khách hàng trở thành thành viên của hệ thống.

c)Use case đăng nhập

Trang 23

Hình 3.1.2 Biểu đồ Use case đăng nhập

- Tác nhân: Thành viên (gồm khách hàng và quản trị viên)

- Mô tả: Use case cho phép thành viên đăng nhập vào hệ thống

- Tiền điều kiện: Thành viên chưa đăng nhập vào hệ thống

Dòng sự kiện chính:

 Thành viên chọn chức năng đăng nhập

 Form Đăng nhập hiển thị

 Nhập email, mật khẩu vào form Đăng nhập

 Hệ thống kiểm tra email, mật khẩu nhập của thành viên

 Nếu thành viên nhập sai email, mật khẩu thì chuyển sang dòng sự kiện rẽ nhánhA1 Nếu nhập đúng thì chuyển về trang chủ và lưu phiên đăng nhập để thực hiệncác chức năng trong hệ thống

 Use case kết thúc

- Dòng sự kiện rẽ nhánh:

+ Dòng rẽ nhánh A1: Thành viên đăng nhập không thành công

 Hệ thống thông báo quá trình đăng nhập không thành công

 Chọn đăng ký hay đăng nhập lại Nếu chọn đăng ký thì thực hiện A2

 Hệ thống yêu cầu thành viên nhập lại tên, mật khẩu

 Nếu khách xem đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu khôngđồng ý thì use case kết thúc

+ Dòng rẽ nhánh A2: Thành viên chuyển qua use case Đăng ký thành viên

 Form Đăng ký hiển thị

Hậu điều kiện: Thành viên đăng nhập thành công và có thể thực hiện các chức năng mà

hệ thống cung cấp

d)Use case quản lý thông tin cá nhân

Trang 24

Hình 3.1.3 Biểu đồ Use case quản lý thông tin cá nhân

- Tác nhân: Thành viên (gồm khách hàng và quản trị viên)

- Mô tả: Use case cho phép thành viên thay đổi các thông tin đã đăng ký

- Tiền điều kiện: Đã đăng nhập vào hệ thống

 Thành viên chọn chức năng sửa thông tin cá nhân

 Hệ thống hiển thị form sửa thông tin với các thông tin cũ của thành viên hiện tại

 Thành viên nhập các thông tin mới

 Nhấn nút lưu thông tin

 Nếu cập nhật thành công thì thực hiện bước tiếp theo Nếu không thì thực hiện luồng rẽ nhánh A1

 Lưu thông tin

- Dòng sự kiện rẽ nhánh A1: Thông tin nhập không hợp lệ

 Hệ thống thông báo việc nhập dữ liệu không hợp lệ

 Thành viên nhập lại thông tin

 Quay lại bước 4 của dòng sự kiện chính

Hậu điều kiện: Thông tin thay đổi của thành viên được lưu vào hệ thống

e)Use case quản lý sản phẩm

Trang 25

Hình 3.1.4 Biểu đồ Use case quản lý sản phẩm

- Tác nhân: Quản trị viên

- Mô tả: Use case cho phép thêm, thay đổi hay xóa danh sách của các sản phẩm trong

 Hệ thống hiển thị form Nhập thông tin sản phẩm

 Quản trị viên nhập thông tin sản phẩm

 Nếu nhập thành công thì thực hiện bước tiếp theo Nếu sai thực hiện dòng sự kiện rẽ nhánh A1

 Lưu thông tin sản phẩm

+ Thay đổi thông tin sản phẩm:

 Hệ thống hiển thị form sửa thông tin sản phẩm

 Quản trị viên nhập các thông tin cần thay đổi

 Nếu việc thay đổi thành công thì thực hiện bước tiếp theo Nếu sai thực hiện dòng rẽ nhánh A1

 Lưu thông tin về danh sách sản phẩm

+ Xóa sản phẩm:

 Quản trị viên chọn sản phẩm cần xóa

 Nhấn nút xóa để thực hiện loại bỏ sản phẩm

 Thông báo sản phẩm đã được xóa

 Hệ thống hiển thị lại danh sách sản phẩm

- Dòng sự kiện rẽ nhánh A1:

 Quản trị viên nhập lại thông tin

Trang 26

 Nhấn nút xác nhận đối với từng thao tác.

- Hậu điều kiện: Các thông tin về sản phẩm được cập nhật trong cơ sở dữ liệu

f)Use case giỏ hàng

Hình 3.1.5 Biểu đồ Use case giỏ hàng

+ Thêm sản phẩm vào giỏ hàng:

 Tìm kiếm sản phẩm theo yêu cầu

 Nhấp vào xem chi tiết sản phẩm để xem thông tin sản phẩm, cùng những đánh giá về sản phẩm

 Chọn chức năng Thêm sản phẩm vào giỏ hàng để đưa sản phẩm đã chọn vào giỏ hàng Nếu không thêm được sản phẩm thì hiển thị thông báo không thêm được sản phẩm

 Hệ thống hiển thị thông tin đưa vào giỏ hàng

+ Loại bỏ sản phẩm:

 Khách hàng truy cập vào giỏ hàng

 Khách hàng có thể lựa chọn loại bỏ một số lượng nhất định hoặc loại bỏ hoàn toàn sản phẩm khỏi giỏ hàng

-Hậu điều kiện: Thông tin của sản phẩm đã đưa vào giỏ hàng phải được lưu trữ Loại

bỏ sản phẩm khỏi mục lưu trữ

g)Use case đặt hàng

Trang 27

Hình 3.1.6 Biểu đồ Use case đặt hàng

 Hệ thống hiển thị các sản phẩm có trong giỏ hàng

 Khách hàng xem thông tin sản phẩm và tiền tổng

- Xác nhận đặt hàng:

 Hệ thống hiển thi số lượng mặt hàng và tổng tiền trong mục giỏ hàng

 Khách hàng nhấn nút xác nhận đặt hàng để chuyển qua mục tiếp theo

- Điền thông tin đặt hàng

 Khách hàng điền thông tin của người nhận (có thể là bản thân)

 Khách hàng chọn kiểu thanh toán

 Hệ thống kiểm tra thông tin Nếu đúng thông báo đặt hàng thành công Nếu sai yêu cầu khách hàng kiểm tra lại thông tin

- Hủy đặt hàng:

 Khách hàng chọn đơn hàng cần hủy

 Hệ thống yêu cầu xác nhận lại

 Thông báo đã hủy đơn hàng

- Hậu điều kiện: Đơn hàng được cập nhật trên cơ sở dữ liệu

h)Use case quản lý người dùng (thành viên)

Trang 28

Hình 3.1.7 Biểu đồ Use case quản lý người dùng

- Mô tả: Use case cho phép thêm, thay đổi hay xóa danh sách của người dùng trong hệ thống

 Quản trị viên chọn kiểu tác động lên danh sách người dùng: thêm, thay đổi thông tin hay xóa người dùng ra khỏi của hệ thống

+ Thêm người dùng:

 Hệ thống hiển thị form Nhập thông tin người dùng

 Quản trị viên nhập thông tin người dùng

 Nếu nhập thành công thì thực hiện bước tiếp theo Nếu sai thực hiện dòng sự kiện rẽ nhánh A1

 Lưu thông tin người dùng

+ Thay đổi thông tin người dùng:

 Hệ thống hiển thị form sửa thông tin

 Quản trị viên nhập các thông tin cần thay đổi

 Lưu thông tin về danh sách người dùng

+ Xóa người dùng:

 Quản trị viên chọn người cần xóa

 Nhấn nút xóa để thực hiện loại bỏ người dùng

 Thông báo người dùng đã được xóa

 Hệ thống hiển thị lại danh sách người dùng

Trang 29

 Nhấn nút xác nhận đối với từng thao tác.

- Hậu điều kiện: Các thông tin về người dùng được cập nhật trong cơ sở dữ liệu

h)Use case quản lý đơn hàng

Hình 3.1.8 Biểu đồ Use case quản lý đơn hàng

- Mô tả: Use case cho phép thay đổi hay xóa đơn hàng của người dùng trong hệ thống

 Quản trị viên chọn kiểu tác động lên danh sách người dùng: thay đổi thông tin hay xóa đơn hàng ra khỏi của hệ thống

+ Thay đổi thông đơn hàng:

 Hệ thống hiển thị form thông tin đơn hàng

 Quản trị viên thay đổi trạng thái theo trạng thái thực của đơn hàng

 Lưu thông tin về trạng thái đơn hàng

+ Xóa đơn hàng:

 Quản trị viên tìm tới đơn hàng cần xóa

 Nhấn nút xóa để thực hiện loại bỏ đơn hàng

 Thông báo đơn hàng đã được xóa

 Hệ thống hiển thị lại danh sách đơn hàng

 Nhấn nút xác nhận đối với từng thao tác

- Hậu điều kiện: Các thông tin về đơn hàng được cập nhật trong cơ sở dữ liệu

h)Use case quản lý đánh giá

Trang 30

Hình 3.1.9 Biểu đồ Use case quản lý đánh giá

- Mô tả: Use case cho xóa đánh giá của người dùng trong hệ thống

- Tiền điều kiện: Đã đăng nhập vào hệ thống và tìm kiếm đánh giá theo ID sản phẩm

 Quản trị viên chọn kiểu tác động lên danh sách đánh giá của sản phẩm: xóa đánh giá ra khỏi của hệ thống

+ Xóa đánh giá:

 Quản trị viên tìm kiếm danh sách đánh giá theo ID sản phẩm

 Nhấn nút xóa để thực hiện loại bỏ đánh giá

 Thông báo đánh giá đã được xóa

 Hệ thống hiển thị lại danh sách đánh giá cho sản phẩm có ID đó

 Nhấn nút xác nhận đối với từng thao tác

- Hậu điều kiện: Các thông tin về đánh giá sản phẩm được cập nhật trong cơ sở dữ liệu

3.1.3 Biểu đồ tuần tự Use case

a) Biểu đồ tuần tự Use case đăng kí thành viên

Trang 31

Hình 3.2 Biểu đồ tuần tự cho chức năng đăng ký thành viên

Trang 32

b) Biểu đồ tuần tự Use case đăng kí thành viên

Hình 3.3 Biểu đồ tuần tự cho chức năng đăng nhập

Trang 33

c) Biểu đồ tuần tự Use case thay đổi thông tin tài khoản

Hình 3.4 Biểu đồ tuần tự cho chức năng sửa thông tin tài khoản

Định dạng
Số trang	66
Dung lượng	4,32 MB