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

TRƯỜNG ĐẠI HỌC CẦN THƠ

KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG

NIÊN LUẬN CƠ SỞ
NGÀNH CÔNG NGHỆ THÔNG TIN

Đề tài

THIẾT KẾ WEBSITE BÁN HÀNG

TRỰC TUYẾN

Sinh viên: Lê Tuấn Kiệt

Mã số: B1909935
Khóa: K45

Cần Thơ, 2021-2022

0
 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

............................................................................................................................
.....
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................

Cần Thơ, ngày tháng 5 năm 2022

Giảng viên hướng dẫn

1
 TS. Phạm Thế Phi

LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành nhất đến TS.Phạm Thế
Phi.
Trong quá trình học tập và làm niên luận cơ sở ngành Công nghệ
thông tin, em đã nhận được sự quan tâm giúp đỡ, hướng dẫn rất tận tình
và tâm huyết của thầy. Thầy đã giúp em tích lũy thêm nhiều kiến thức,
học hỏi thêm nhiều kỹ năng lập trình cũng như trình bày bài báo cáo.

Kiến thức là vô hạn mà sự tiếp nhận kiến thức của bản thân mỗi người
luôn tồn tại những hạn chế nhất định. Do đó, trong quá trình hoàn thành
bài Niên luận cơ sở chắc chắn không tránh khỏi những thiếu sót, những
hạn chế mà em chưa đạt được. Em rất mong được những góp ý từ thầy
để bài Niên luận cơ sở của em được hoàn thiện, chỉnh chu hơn.

Kính chúc thầy sức khoẻ, hạnh phúc và thành công trên con đường sự
nghiệp giảng dạy.

2
Mục Lục:
BỘ GIÁO DỤC VÀ ĐÀO TẠO 0
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 1
Chương I. GIỚI THIỆU 4
1. ĐẶT VẤN ĐỀ 4
2. MỤC TIÊU ĐỀ TÀI 4
3. ĐỐI TƯỢNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU 4
4. NỘI DUNG NGHIÊN CỨU 4
Chương II. CƠ SỞ LÝ THUYẾT 5
1. Ngôn Ngữ Lập trình WebSite 5
HTML5 5
CSS3 6
JavaScript 6
2. Thư Viện Cho CSS và Javascript 8
Bootstrap 8
jQuery 9
3. Ngôn Ngữ Lập Trình Backend PHP 10
4. MySQL Database 11
Chương III. ĐẶC TẢ YÊU CẦU 13
1.Đặc tả yêu cầu chức năng của hệ thống 13
1.2. Mô hình Use case tổng quát của đặc tả hệ thống 14
1.3. Mô hình Use case cụ thể của đặc tả hệ thống 15
Chương IV. THIẾT KẾ GIẢI PHÁP 21
Chương V. CÀI ĐẶT GIẢI PHÁP 25
Chương VI. KẾT LUẬN 37
Kết quả đạt được 37
Đánh giá về hệ thống 37
Hướng phát triển phần mềm 37
TÀI LIỆU THAM KHẢO 38

3
Chương I. GIỚI THIỆU
1. ĐẶT VẤN ĐỀ
Ngày nay, với sự phát triển mạnh mẽ của khoa học – công nghệ, nó góp phần
thúc đẩy sự tiến bộ của xã hội trong tất cả các lĩnh vực của đời sống xã hội. Đặc
biệt với sự bùng nổ của công nghệ thông tin và internet thì tất cả các thông tin
luôn được cập nhật, thay đổi một cách liên tục và đầy đủ thông qua mạng truyền
thông và internet, mà phổ biến là thông qua các website.
Hiện nay, nhu cầu mua hàng ngày càng nhiều trong thời đại thương mại điện tử,
từ các thiết bị công nghệ đến những nhu yếu phẩm hằng ngày, các trang thương
mại điện tử đang dần là xu thế như: Shopee, Tiki, Lazada... hiện không còn mấy
xa lại với nhiều người.
Trên thực tế cho thấy, hiện nay rất nhiều nhà bán hành đang có nhu cầu bán
hàng trực tuyến, nhưng muốn làm 1 trang website riêng biệt để tăng độ uy tín và
mở rộng thị trường thay vì chỉ làm đối tác cho các nền tảng lớn như Shopee.
Nhưng để làm 1 website bán hàng chuẩn SEO thật hoàn chỉnh sẽ mất rất nhiều
thời gian nhưng chỉ yêu cầu những tính năng cơ bản.
Nắm bắt được nhu cầu đó, ý tưởng làm "WebSite bán đồ ăn vặt" với những
công nghệ đơn giản giúp cho việc giới thiệu những món hàng của nhà buôn bán
nhanh chóng quản lí thu chi và đơn hàng, với yêu cầu thời gian có hạn
2. MỤC TIÊU ĐỀ TÀI
Đây là tài liệu đặc tả yêu cầu về hệ thống chia sẻ giáo trình, tài liệu trên nền
web. Tài liệu này nhằm mục đích mô tả và cung cấp các thông tin về chức năng,
hiệu năng, các yêu cầu về thiết kế, giao diện và các yêu cầu đặc biệt khác cho
thiết kế viên. Bên cạnh đó còn xây dựng một hệ thống đẹp mắt, thân thiện với
người dùng.

3. ĐỐI TƯỢNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU

"Website bán hàng" được xây dựng với mục đích phục vụ cho các nhà bán hàng
có 1 website riêng biệt của mình với thời gian xây dựng ngắn mà vẫn đảm bảo
được công việc cốt lõi bán hàng của mình.
4. NỘI DUNG NGHIÊN CỨU
Tìm hiểu cách làm 1 website bằng những công nghệ cơ bản như HTML, CSS,
Javascript, PHP, mySQL. Đồng thời cũng đánh mạnh vào phần UI/UX để tạo
cảm giác nâng cao trải nghiệm người dùng

4
Chương II. CƠ SỞ LÝ THUYẾT
1. Ngôn Ngữ Lập trình WebSite

HTML5
Là viết tắt của từ Hypertext Markup Language, một ngôn ngữ lập trình đánh dấu
siêu văn bản dùng để xây dựng các website.
HTML được hiểu là cấu trúc của một trang web, sử dụng các thẻ và nhãn để định
dạng các nội dung khác nhau của 1 trang web.
⇒ File có hậu tố .html

Giai đoạn phát triển của HTML:

Năm Phiên bản

1989 Tim Berners-Lee giới thiệu World Wide Web

1991 Tim Berners-Lee giới thiệu HTML

1993 Dave Raggett đã soạn thảo HTML+

1995 HTML 2 ra đời

5
 1997 HTML3.2 ra đời được W3C khuyên dùng

1999 HTML4.1 ra đời được W3C khuyên dùng

2000 XHTML 1.0 ra đời được W3C khuyên dùng

2008 WHATWG khởi động dự án HTML5

2014 HTML5 ra đời được W3C khuyên dùng

2016 HTML5.1 ra đời được W3C khuyên dùng

2017 HTML5.2 ra đời được W3C khuyên dùng

CSS3
Là viết tắt của Cascading Style Sheets, dùng để định dạng cách mà các thẻ HTML
hoạt động trên màn hình của các thiết bị, được ví như lớp áo của trang web, nó có
thể điều khiển bố cục trang, và thêm các hiệu ứng hoạt ảnh cho trang web thêm sinh
động
CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế,
bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau
HTML chưa từng sinh ra để định dạng trang web mà nó chỉ mô tả trang web chính
vì thế W3C đã tạo ra CSS để làm việc đó
⇒ File có hậu tố là .css

Giai đoạn phát triển của CSS:

Năm Phiên bản

1996 CSS1 được giới thiệu chính thức bởi W3C

1998 CSS2 ra đời cải tiến so với CSS1

1999 CSS3 ra đời và phát triển tới hiện nay

JavaScript

Là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm
nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người
dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi
Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi
sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java,
6
JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần
mở rộng thường được dùng cho tập tin mã nguồn JavaScript

⇒ File có hậu tố là .js

Giai đoạn phát triển Javascript

Năm Phiên bản

1995 Javascript được tạo ra bởi Brendan Eich

1997 Javascript trở thành chuẩn ECMA, và phiên bản

ECMAScript 1 đầu tiên ra rời

1998 ECMAScript 2 ra đời

1999 ECMAScript 3 ra đời

2009 ECMAScript 5 ra đời

2015 ECMAScript 2015 ra đời

2016 ECMAScript 2016 ra đời

2017 ECMAScript 2017 ra đời

2018 ECMAScript 2018 ra đời

⇒ Không có phiên bản ES$

2. Thư Viện Cho CSS và Javascript

7
 Bootstrap
Là một Frontend Framework để giúp xây dựng website nhanh và tương thích nhiều
thiết bị (laptop, điện thoại,..)
Bootstrap chứa những thiết kế HTML và CSS cũng như Javascript để nhà phát triển
có thể nhanh chóng và dễ dàng phát triển web thích ứng phù hợp với mọi thiết bị,
trình duyệt và tính nhất quán trong thiết kế được đảm bảo

Giai đoạn phát triển Bootstrap:

Năm Phiên bản

2011 Ra đời đầu tiên với tên Twitter Blueprint bởi Mark Otto và
Jacob Thornton

2012 Bootstrap 2 ra đời

2013 Bootstrap 3 ra đời

2014 Bootstrap 4 ra đời

2021 Bootstrap 5 ra đời

jQuery

Là một thư viện phổ biến nhất của Javascript đơn giản hoá việc lập trình Javascript
nhiều hơn
8
jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiều dòng code JavaScript để
hoàn thành và gói chúng thành các phương thức mà bạn chỉ cần gọi chúng.
Hoạt động tốt với mọi nền tảng trang trình duyệt như IE, Firefox, Chrome… từng
được các công ty lớn sử dụng như Google, Microsoft, IBM, Netflix…
Thư viện jQuery chứa:
● Thao tác HTML/DOM
● Thao tác CSS
● Phương thức HTML event
● Hiệu ứng và hoạt ảnh chuyển cảnh
● AJAX
● Tiện ích
Giai đoạn phát triển jQuery
Năm Phiên bản

2006 jQuery 1 ra đời

… …

2013 jQuery 2 ra đời

… …

2016 jQuery 3 ra đời

… …

Hiện nay jQuery 3.6 ra đời

9
3. Ngôn Ngữ Lập Trình Backend PHP

PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập
trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng
dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất
thích hợp với web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu
hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ
học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ
khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến
nhất thế giới.
Giai đoạn phát triển PHP
Năm Phiên bản

1995 PHP 1 ra đời lần đầu với tên gọi Personal Home Page Tools
(PHP Tool)

1997 PHP 2 ra đời với tên gọi PHP/FI 2.0

1998 PHP 3 ra đời, với chuyển đổi giữa dự án cá nhân thành dự

án cộng đồng gồm nhiều nhà phát triển đóng góp

2000 PHP 4 ra đời với Zend engine

… …

2004 PHP 5 ra đời

… …

2015 PHP 7 ra đời

… …

10
 2020 PHP 8 ra đời

… …

Hiện nay PHP 8.1.6 ra đời

4. MySQL Database

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và
được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì
MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích
rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng
dụng có truy cập CSDL trên internet. MySQL miễn phí hoàn toàn cho nên bạn
có thể tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành
khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac
OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,…

Giai đoạn phát triển mySQL:

Năm Phiên bản

1995 Phiên bản mySQL đầu tiên ra đời

1997 mySQL 3.20 ra đời

… …

2002 mySQL 4 ra đời

… …

2008 Sun MicroSystem mua lại mySQL và mySQL 5 ra đời

11
2013 mySQL 5.1 ra đời

… …

2015 mySQL 5.7 ra đời

2018 mySQL 8 ra đời

Hiện nay mySQL 8.0.29

* Kết luận:
Với “WebSite bán hàng” về phía Client thì HTML, CSS, JavaScript sẽ
áp dụng để phục vụ cho việc xây dựng Website. Ngoài ra, còn sử dụng thêm
Bootstrap và jQuery như một công cụ hỗ trợ việc thiết kế web nhanh hơn và
dễ dàng hơn.
Về phía Server, PHP nó là một ngôn ngữ lập trình dùng để xây dựng
các ứng dụng Website, hay nói cách khác nó là ngôn ngữ chính dùng để lập
trình phía Server nhằm xử lý các yêu cầu của client. Kết hợp với MySQL là
một hệ quản trị CSDL dùng để lưu trữ dữ liệu

Chương III. ĐẶC TẢ YÊU CẦU

1.Đặc tả yêu cầu chức năng của hệ thống

Người dùng Người dùng tự do Admin

12
Đăng ký người dùng Xem sản phẩm Đăng nhập

Đăng nhập Tìm kiếm sản phẩm Đăng xuất

Đăng xuất Liên hệ Phân tích tổng quan

Đổi thông tin cá nhân Đăng ký Quản lý sản phẩm

Đổi mật khẩu Quản lý người dùng

Tìm kiếm sản phẩm Quản lý đơn hàng

Quản lý giỏ hàng Phản hồi liên hệ

Thanh toán đơn hàng

Xem đơn hàng đã mua

Liên hệ

13
1.2. Mô hình Use case tổng quát của đặc tả hệ thống

14
1.3. Mô hình Use case cụ thể của đặc tả hệ thống

2. Use case đăng ký thành viên

3. Use case đăng xuất

15
4. Use case xem sản phẩm

5. Use case Tìm kiếm sản phẩm

6. Use case Quản lý giỏ hàng

16
7. Use case thanh toán đơn hàng

8. Use case tra cứu đơn hàng

9. Use case thay đổi thông tin

17
10. Use case thay đổi mật khẩu

11. Use case phân tích tổng quan

18
12. Use case quản lý sản phẩm

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

14. Use case quản lý người dùng

19
15. Use case phản hồi liên hệ

20
Chương IV. THIẾT KẾ GIẢI PHÁP

Sử dụng ứng dụng MySQL WorkBench để thiết kế cơ sở dữ liệu để phù hợp với
các đặc tả trên như sau:

Cụ thể các thực thể

⚠️Lưu Ý:
● màu vàng: khoá chính
● màu đỏ: khoá phụ
● màu xanh: vừa là khóa chính vừa là khóa phụ
21
 - Bảng tb_user: thể hiện người dùng khi đã đăng nhập
Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

username varchar(255) x x

fullname varchar(255) x

email varchar(255) x

password varchar(255) x

phone varchar(255)

address varchar(255)

- Bảng tb_category: thể hiện các loại của sản phẩm

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

id_category char(25) x x

title varchar(50) x

image varchar(255) x

active tinyint(1) x

Chú thích: active lưu trữ trạng thái loại sản phẩm đó
● 1 là còn hoạt động
● 0 là không còn hoạt động

- Bảng tb_product: thể hiện sản phẩm

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

id_product int x x

name varchar(50) x

description varchar(255) x

price float x

ranking int x

22
 image varchar(255) x

discount decimal(10,2)

quantity int x

id_category char(25) (tb_category) x

Chú thích: ràng buộc khóa ngoại lấy từ bảng tb_category

id_product sẽ đặt là auto_increment

- Bảng tb_cart
Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

username varchar(255) (tb_user) x

id_product int (tb_product x

)

amount int x

Chú thích: Ràng buộc khóa ngoại lấy từ bảng tb_user và tb_product
Đây là 1 thực thể yếu

- Bảng tb_order:

Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

id_order char(10) x x

username varchar(255) (tb_user) x

name_customer varchar(255) x

phone_customer varchar(255) x

address_customer varchar(255) x

email_customer varchar(255) x

city_customer varchar(50) x

province_customer varchar(50) x

23
 status varchar(50) x

order_date date x

process_date date

shipped_date date

total_money float

Chú thích: ràng buộc khóa ngoại từ bảng tb_user

status có 4 giá trị bao gồm:
1. ‘pending’: đã đặt hàng, đang chờ xử lý
2. ‘shipping’: đã xử lý, đang giao hàng
3. ‘delivered’: đã giao hàng
4. ‘canceled’: đã huỷ hàng

- Bảng tb_order_details
Thuộc tính Kiểu dữ liệu Khoá chính Khoá phụ Not Null

id_order char(10) (tb_order) x

id_product int (tb_product) x

amount int x

Chú thích: Ràng buộc khóa ngoại lấy từ bảng tb_order và tb_product
Đây là 1 thực thể yếu

Chương V. CÀI ĐẶT GIẢI PHÁP

Các thư viện Javascript cần dùng:
- AOS: https://michalsnik.github.io/aos/
24
 - chartJS: https://www.chartjs.org/
- imageuloadify: https://www.jqueryscript.net/form/Drag-And-Drop-
File-Uploader-With-Preview-Imageuploadify.html
Đầu tiên là chúng sẽ đi sơ lược về cấu trúc giao diện của website
Cửa sổ trang nào cũng có:
● Header

● Footer

- Home (Trang Chủ)

25
- Home (Trang Chủ)

26
- About (Giới thiệu)

- Shop

27
28
- Tìm kiếm sản phẩm

- Liên hệ

- Đăng Nhập

29
- Đăng Ký

- Thêm món hàng

30
- Quản lý giỏ hàng

- Thanh Toán

- DashBoard

31
- Xem thông tin đơn hàng

- Xem thông tin đơn hàng

32
 - Thay đổi thông tin cá nhân

- Thay đổi mật khẩu

Trang Admin

33
Trang Dashboard

- Trang quản lý sản phẩm

- Tìm kiếm sản phẩm

34
- Thêm sản phẩm

- Quản lý đơn hàng

- Tìm kiếm đơn hàng bằng sdt

- Thay đổi thông tin đơn hàng

35
Chương VI. KẾT LUẬN
1. Kết quả đạt được
Xây dựng thành công mô hình Website bán hàng cơ bản chỉ trong 7-10 ngày
đạt được tất cả tính năng cơ bản mà các web bán hàng đều có
Tìm hiểu và áp dụng thành công
● Bootstrap 5: cho giao diện website đồng nhất và trực quan thẩm mỹ

● Jquery Ajax: sử dụng Ajax load để không cần phải load lại các thành
phần không cần thiết, và tương tác song song với PHP

● MySQL: Sử dụng các function, procedure, trigger để tương tác dữ liệu

dễ hơn thông qua PHP

● PHP: Biết sử dụng PHP để tương tác với cơ sở dữ liệu

2. Đánh giá về hệ thống

Ưu điểm:
● Tính Năng: Đầy đủ các tính năng cơ bản tương tác cho một trang
web bán hàng
● Giao diện: Đơn giản, thẩm mỹ, và liền mạch không cần phải load lại
trang trong các quá trình sử dụng
● Hệ thống: Cấu trúc file viết dễ hiểu, logic, rất dễ cho việc Debug sau
này, và thêm những Plugin, components cần thiết khi phát triển lên
cao
Hạn Chế:
● Đây là một dự án cá nhân, nên không tránh khỏi những sai sót về
Logic trong những quy tắc bán hàng thực tế
● Những công nghệ sử dụng không được hiện đại so với thực tế bây giờ

3. Hướng phát triển phần mềm

Kết hợp với Firebase hoặc Github Action, làm một dự án án website bán
hàng hoàn chỉnh miễn phí trên nền tảng Internet
Thêm nhiều tính năng cần thiết để quản lý dashboard, và tăng trải nghiệm
người dùng trong website bán hàng

36
TÀI LIỆU THAM KHẢO
[1] W3school : https://w3school.com
[2] StackOverflow: https://stackoverflow.com
[3] Mã Nguồn Source (chủ sở hữu) : https://github.com/zenfection/php_shop_order
[4] Wikipedia: https://vi.wikipedia.org

37