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
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
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
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

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
Chương IV. THIẾT KẾ GIẢI PHÁP
Chương V. CÀI ĐẶT GIẢI PHÁP
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
TÀI LIỆU THAM KHẢO

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
1989
1991
1993
1995
5


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
1996
1998
1999

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
1995
1997
1998
1999
2009
2015
2016
2017
2018
⇒ 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
2011
2012
2013
2014
2021

jQuery
Là một thư viện phổ biến nhất của Javascript đơn giản hố 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
2006
…
2013
…
2016
…
Hiện nay

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
1995
1997
1998
2000
…

2004
…
2015
…
10
2020


…
Hiện nay

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
1995
1997
…
2002
…
2008

11
2013
…


2015
2018
Hiện nay
* 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
Đăng nhập
Đăng xuất



Đổi thơng tin cá nhân
Đổi mật khẩu
Tìm kiếm sản phẩm
Quản lý giỏ hàng
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
username
fullname

email
password
phone
address
-

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

Thuộc tính
id_category
title
image
active
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
id_product
name
description
price
ranking
22
image



discount
quantity
id_category
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
username
id_product

amount
Chú thích:

Thuộc tính
id_order
username
name_customer
phone_customer
address_customer
email_customer
city_customer
province_customer
23



status
order_date
process_date
shipped_date
total_money
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
id_order
id_product
amount
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: />24