Đề tài THIẾT KẾ WEBSITE BÁN HÀNG TRỰC TUYẾN

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
ln tồn tại những hạn chế nhất định. Do đó, trong q trình hồ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 hồ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
1. ĐẶT VẤN ĐỀ
2. MỤC TIÊU ĐỀ TÀI
3. ĐỐI TƯỢNG VÀ PHƯƠNG PHÁP NGHIÊN CỨU
4. NỘI DUNG NGHIÊN CỨU

4
4
4
4

4

Chương II. CƠ SỞ LÝ THUYẾT
1. Ngôn Ngữ Lập trình WebSite
HTML5
CSS3
JavaScript
2. Thư Viện Cho CSS và Javascript
Bootstrap
jQuery
3. Ngơn Ngữ Lập Trình Backend PHP
4. MySQL Database

5
5
5
6
6
8
8
9
10
11

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
1.2. Mơ hình Use case tổng qt của đặc tả hệ thống
1.3. Mơ hình Use case cụ thể của đặc tả hệ thống

13

13
14
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
Kết quả đạt được
Đánh giá về hệ thống
Hướng phát triển phần mềm

37
37
37
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
ln đượ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à bn 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 để
hồ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 qt. 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í hồn tồ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. Ngồ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 qt 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: khố chính
● màu đỏ: khố 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

Khố chính

username

varchar(255)

x

fullname

varchar(255)

x

email

varchar(255)

x

password

varchar(255)

x

phone

varchar(255)

address

varchar(255)

-

Khố phụ

Not Null
x

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

Khố chính

Khố phụ

id_category

char(25)

title

varchar(50)

x

image

varchar(255)

x

active

tinyint(1)

x

x

Not Null
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

Khố chính

id_product

int

name

varchar(50)

x

description

varchar(255)

x

price

float

x

ranking

int

x

Khố phụ

Not Null
x

x
22


image

varchar(255)

discount

decimal(10,2)

quantity

int

id_category

char(25)

Chú thích:

-

x
x

Bảng tb_cart
Kiểu dữ liệu

username

varchar(255)

id_product

int

amount

int

-

(tb_category)

ràng buộc khóa ngoại lấy từ bảng tb_category
id_product sẽ đặt là auto_increment

Thuộc tính

Chú thích:

x

Khố chính Khố phụ

Not Null

(tb_user)

x

(tb_product
)

x
x

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

Khố chính Khố phụ

id_order

char(10)

username

varchar(255)

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

x

Not Null
x

(tb_user)

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

id_order

char(10)

id_product

int

amount

int

Chú thích:

Khố chính

Khố phụ

Not Null

(tb_order)

x

(tb_product)

x
x

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: />24