Lập Trình Web Nâng Cao Đề Tài Xây Dựng Website Bán Thực Phẩm Sạch.pdf

lOMoARcPSD|38590726

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN
LẬP TRÌNH WEB NÂNG CAO

ĐỀ T䄃I:
XÂY DỰNG WEBSITE BÁN THỰC PHẨM SẠCH

Sinh viên thực hiện : MAI HỒNG QUÂN
LÊ NGUYÊN TIẾN
Giảng viên hướng dẫn
Ngành : PHƯƠNG VĂN CẢNH
Chuyên ngành : CÔNG NGHỆ THÔNG TIN
: HỆ THỐNG THƯƠNG MẠI
Lớp ĐIỆN TỬ
Khóa : D15HTTMĐT1
: 2020

Hà Nội, tháng 12 năm 2022

PHIẾU CHẤM ĐIỂM

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

STT Họ và tên Nội dung thực hiện Điểm Chữ
sinh viên ký

1 Mai Hồng
Quân

2 Lê Nguyên
Tiến

3

4

5

Họ và tên giảng Chữ ký Ghi chú
viên

Giảng viên chấm 1:

Giảng viên chấm 2:

.

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

MỤC LỤC

LỜI MỞ ĐẦU

Trang

CHƯƠNG 1: KHẢO SÁT VÀ XÁC LẬP DỰ ÁN..............................................1
1.1 Khảo sát các hệ thốống tương tự....................................................................1
1.2 Đặt vấn đề........................................................................................................1
1.3 Các chức năng chính.......................................................................................1
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.....................................3
2.1.1 Biểu đồ use case hệ thống............................................................................3
2.1.2 Biểu đồ use case cho phần quản lý tài khoản...............................................5
2.1.3 Biểu đồ use case thống kê............................................................................6
2.1.4 Biểu đồ quản lý hệ thống..............................................................................7
2.1.5 Biểu đồ use case người dùng........................................................................8
2.1.6 Biểu đồ use case người quản lý....................................................................9
2.1.7 Chức năng giỏ hàng....................................................................................10
2.1.8 Biểu đồ use case cho chức năng mua hàng................................................11
2.1.9 Đặc tả use case “tìm kiếm sản phẩm” của khách hàng..............................12
2.1.10 Đặc tả use case thếm vào giỏ hàng...........................................................13
2.1.11 Biểu đồ use case cho chức năng đăng nhập..............................................14
2.2 Biểu đồ tuần tự..............................................................................................13
2.2.1 Biểu đồ tuần tự cho đăng nhập...................................................................15
2.2.2 Biểu đồ tuần tự đăng kí..............................................................................16
2.2.3 Biểu đồ tuần tự cho tìm kiếm.....................................................................17
2.2.4 Biểu đồ tuần tự cho giỏ hàng......................................................................18
2.3 Biểu đồ class hệ thống...................................................................................19
CHƯƠNG 3: THIẾT KẾ GIAO DIỆN..............................................................20

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

3.1 Giao diện trang chủ......................................................................................20
3.2 Giao diện thanh toán.....................................................................................21
3.3 Giao diện sản phẩm......................................................................................22
3.4 Giao diện liên hệ...........................................................................................22
3.5 Giao diện giỏ hàng.......................................................................................23
3.6 Giao diện đăng nhập.....................................................................................23
3.7 Trang tổng quan Admin................................................................................24
3.8 Trang loại sản phẩm.....................................................................................24
3.9 Trang sản phẩm............................................................................................24
3.10 Trang chi tiết đặng hàng.............................................................................24
KẾT LUẬN........................................................................................................26
TÀI LIỆU THAM KHẢO...................................................................................27

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

DANH MỤC HÌNH ẢNH
Hình 2.1.1 Biểu đồ use case hệ thống...................................................................3
Hình 2.1.2 Biểu đồ use case cho phần quản lý tài khoản......................................5
Hình 2.1.3 Biểu đồ use case thống kê...................................................................6
Hình 2.1.4 Biểu đồ quản lý hệ thống.....................................................................7
Hình 2.1.5 Biểu đồ use case người dùng...............................................................8
Hình 2.1.6 Biểu đồ use case người quản lý...........................................................9
Hình 2.1.7 Chức năng giỏ hàng...........................................................................10
Hình 2.1.8 Biểu đồ use case cho chức năng mua hàng.......................................11
Hình 2.1.9 Đặc tả use case “tìm kiếm sản phẩm” của khách hàng.....................12
Hình 2.1.10 Đặc tả use case thếm vào giỏ hàng..................................................13
Hình 2.1.11 Biểu đồ use case cho chức năng đăng nhập.....................................14
Hình 2.1.1 Biểu đồ tuần tự cho đăng nhập..........................................................15

Hình 2.2.2 Biểu đồ tuần tự đăng kí.....................................................................16
Hình 2.2.3 Biểu đồ tuần tự cho tìm kiếm............................................................17
Hình 2.2.4 Biểu đồ tuần tự cho giỏ hàng.............................................................18
Hình 2.3 Biểu đồ class hệ thống..........................................................................19
Hình 3.1 Giao diện trang chủ..............................................................................20
Hình 3.2 Giao diện sản phẩm hot của trang chủ.................................................20
Hình 3.3 Giao diện cuối trang chủ......................................................................21
Hình 3.4 Giao diện thanh tốn.............................................................................21
Hình 3.5 Giao diện sản phẩm..............................................................................22
Hình 3.6 Giao diện liên hệ...................................................................................22

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

Hình 3.7 Giao diện giỏ hàng...............................................................................23
Hình 3.8 Giao diện đăng nhập.............................................................................23
Hình 3.9 Trang tổng quan....................................................................................24
Hình 3.10 Trang loại sản phẩm...........................................................................24
Hình 3.11 Trang sản phẩm...................................................................................25
Hình 3.12 Trang chi tiết đặng hàng.....................................................................25

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

LỜI MỞ ĐẦU
Ngày nay khi chất lượng cuộc sống của con người được nâng
cao thì con người ngày càng địi hỏi nhiều hơn về các nhu cầu khác
cho bản thân một trong số đó là nhu cầu về cơng nghệ thiết bị hiện

đại là phục vụ mọi mặt trong cuôc sống của con người. Vì thế hiện
nay đã có rất nhiều siêu thị phục vụ cho nhu cầu mọi người. Nhưng
việc gia tăng quá nhiều cửa hàng hay các chuỗi cửa hàng lớn phục
vụ nhu cầu mua sắm như vậy mà như ta đã biết ngày nay công nghệ
đang trở nên rất hiện đại vì thế mà có đa dạng mẫu mã hang hóa
phục vụ nhiều nhu cầu, cơng việc khác nhau vì thế việc quản lý gặp
rất nhiều khó khăn và những cách quản lý thủ công hiện đang không
phải là giải pháp tối ưu nhất.
Với sự phát triển của công nghệ thông tin luôn cố gắng đáp
ứng các yêu cầu của con người. Việc đưa công nghệ thông tin áp
dụng vào quản lý đã và đang được đưa vào thực hiện để thể hiện tốc
độ và độ chính xác.
Với xây dựng : " Xây dựng web bán thực phẩm sạch " em
muốn tạo ra một trang mua bán trực tuyến giúp các chủ của hàng có
thể dễ dàng quản lý cửa hàng, chuỗi cửa hàng của mình một cách
đơn giản, tối ưu và hiệu quả nhất. Với các tính năng được xây dựng
trên nhu cầu thực tế mà chủ cửa hàng đang cần để xử lý cơng việc
của mình.

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

CHƯƠNG 1: KHẢO SÁT V䄃 XÁC LẬP DỰ ÁN
1.1. Khảo sát các hệ thống tương tự

Đề tài tập trung vào việc nghiên cứu các vấn đề liên quan như tìm
hiểu web bán hàng, cách thức phân loại các loại thực phẩm, tìm hiểu yêu
cầu của khách hàng về các loại thực phẩm.
1.2 Đặt vấn đề

Dân số nước ta hiện nay đạt mức hơn 90 triệu người. Cùng với việc
gia tăng dân số nhanh, thì nhu cầu về dịch vụ, mua bán cũng ngày một gia
tăng. Tuy nhiên,phương pháp bán hàng truyền thống đã khơng cịn phù
hợp với quy mơ và tốc độ phát triển hiện nay.Vì vậy các cửa hàng siêu thị
hay doanh nghiệp cần phải có và xây dựng web bán hàng nhằm phục vụ
nhu cầu mua bán của mọi người bởi vì sự tiện lợi và dễ dàng quản lý của
nó. Trang web được xây dựng nhằm giảm tối đa chi phí hoạt động, nâng
cao chất lượng của việc bán hàng cũng như quản lý việc nhập hàng và
xuất hàng.Việc quản lý và lưu trữ thông tin không qua giấy tờ sổ thực
phẩm sẽ làm giảm chi phí và cơng sức làm việc của các nhân viên, cũng
như tránh được các sai sót trong q trình làm việc.
1.3 Các chức năng chính

 Mua thực phẩm : Sau khi người dùng truy cập vài hệ thống họ có
thể xem thông tin về các loại thực phẩm, thêm vào giỏ hàng những
món mà họ thấy ưng ý, phù hợp với yêu cầu cầu của họ.

 Giỏ hàng: Khi người dùng hệ thống đã tìm được những thực phẩm
phù hợp với nhu cầu của mình có thể cho vào giỏ hàng. Giỏ hàng
là nơi người dùng có thể xem lại các thực phẩm mà mình đã lựa
chọn mà khơng phải mất cơng tìm kiếmlại. Đơng thời ở đây họ có
thể đặt mua đồ ăn, thêm, sửa, xóa các thực phẩm trong giỏ hàng và
biết được số tiền mà họ phải trả cho số thực phẩm đó.

1

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

 Tìm kiếm: Chức năng này giúp người dùng có thể tìm kiếm thực

phẩm nhanh chóng khi mà họ đã định hướng mình cần loại thực
phẩm nào…

 Đăng nhập, đăng kí: Hai chức năng này giúp người dùng có thể đặt

mua được thực phẩm của hệ thống.
 Quản trị: Cập nhật, sửa, xóa, thêm, bổ sung các thông tin về thực

phẩm. Quản lý người dùng, quản lý việc bán thực phẩm, mua thực
phẩm, giao hàng, liên hệ, tổng hợp ý kiến của khách hàng…

2

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

CHƯƠNG 2 : PHÂN TÍCH V䄃 THIẾT KẾ HỆ THỐNG
2.1 Biểu đồ Use-case hệ thống

Hình 2.1.1: Biểu đồ use case của hệ thống
Mơ tả tóm tắt:
Use case này được sử dụng khi người sử dụng muốn thay đổi mật
khẩu,hay thêm người dùng.
Các dịng sự kiện:
Dịng sự kiện chính:
- Người dùng Chọn chức năng quản lý hệ thống trên trên Menu.

- Hệ thống hiển thị form và yêu cầu người dung chọn các chức năng
muốn thực hiện (thay đổi mật khẩu,tạo tài khoản, phân quyền).
- Người sử dụng nhập chọn chức năng muốn thực hiện và nhập đầy đủ
thông tin.
- Hệ thống kiểm tra thông tin và xác nhận thông tin hợp lệ.
- Hệ thống sẽ thực hiện công việc vào lưu vào CSDL.
- Hệ thống thông báo thành công.

3

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

- Người dùng thoát khỏi chức năng quản lý hệ thống bằng cách chọn
Thốt
Dịng sự kiện thay thế:
- Các thông tin được người sử dụng nhập vào không đúng định dạng quy
định
- Hệ thống thông báo lỗi và yêu cầu nhập lại thông tin.
- Người dùng nhập (sửa) lại thông tin cho đúng.

4

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.2. Biểu đồ use-case cho phần quản lý tài khoản

Hình 2.1.2 Biểu đồ use-case cho phần quản lý tài khoản
Mô tả:
- Người quản lý muốn quản lý website đầu tiên phải tạo khởi tạo một tài
khoản bao gồm các thông tin (tên đăng nhập, mật khẩu)
- Người quản lý muốn đăng nhập vào website, hệ thống đưa ra yêu nhập
tài khoản của người quản lý.
- Khi vào được hệ thống người quản lý có thao tác với chức năng quản lý
tài khoản (tạo tài khoản mới, sửa mật khẩu).
Phân tích:
- Người quản lý tương tác vời hệ thống có thể có thể thực hiện các cơng
việc:
- Xem thơng tin tài khoản
- Tạo tài khoản mới cho một người quản lý khác
- Sửa đổi tài khoản (sửa mật khẩu).

5

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.3. Biểu đồ use-case thống kê

Hình 2.1.3 Biểu đồ use-case thống kê
Mơ tả tóm tắt:
Use case này cho phép người quản lý đăng nhập vào hệ thống để thực
hiện việc thống kê báo cáo: Số thực phẩm, số hàng tồn, số hàng mới nhập
về, số hàng bán chạy, doanh thu… Các dịng sự kiện:
Dịng sự kiện chính:
- Người dùng Chọn chức năng thống kê trên Menu.

- Hệ thống hiển thị trang thống kê yêu cầu người sử dụng chọn thông tin
cần thống kê.
- Người sử dụng chọn thông tin thống kê
Hệ thống sẽ tìm trong csdl và hiển thị kết quả cần tìm
Dịng sự kiện thay thế:
Khơng có

6

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.4. Biểu đồ use-case quản lý hệ thống

Hình 2.1.4 Biểu đồ use case quản lí hệ thống

7

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.5. Biểu đồ use-case người dùng

Hình 2.1.5 Biểu đồ use case người dùng
Mơ tả tóm tắt:
- Tên Ca sử dụng:Người dùng
- Mục đích: Người dùng muốn trở thành thành viên của hệ thống thì phải
đăng ký tài khoản. Tài khoản của người dùng là miễn phí họ khơng phải

đóng bất cứ khoản chi phí nào khi sử dụng các dich vụ.
- Tác nhân: Người dùng
- Tóm lược: Người dùng khi muốn muốn làm thành viên của trang web
cần phải đăng kí làm thành viên của hệ thống. Các bước đăng kí đơn giản
và dễ dàng, mọi thơng tin đăng kí phải chính xác.
Mơ tả kịch bản:
- Thơng tin đầu vào: Các thơng tin đăng kí của người dùng.
Tài khoản
Mật khẩu
Nhập lại mật khẩu
Email

8

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

Tra cứu thông tin
Xem sản phẩm
- Điều kiện đầu vào: Khơng có.
2.1.6. Biểu đồ use-case người quản lý

Hình 2.1.6 Biểu đồ use case người quản lý
Mô tả:
- Người quản lý muốn quản lý website đầu tiên phải tạo khởi tạo một tài
khoản bao gồm các thông tin (tên đăng nhập, mật khẩu).
- Người quản lý muốn đăng nhập vào website, hệ thống đưa ra yêu nhập
tài khoản của người quản lý.
- Khi vào được hệ thống người quản lý có thao tác với chức năng quản lý

tài khoản (tạo tài khoản mới, sửa mật khẩu).
Phân tích:
- Người quản lý tương tác vời hệ thống có thể có thể thực hiện các công
việc:
+ Xem thông tin tài khoản
+ Tạo tài khoản mới cho một người quản lý khác
+ Sửa đổi tài khoản (sửa mật khẩu).

9

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.7. Chức năng giỏ hàng

Hình 2.1.7 Chức năng giỏ hàng
-Mục đích:
Giúp người dùng thêm sản phẩm vào giỏ hàng và có thể tiến hành đặt
hàng
-Tác nhân liên quan: Tác nhân ở đây là người dùng khách hàng của hệ
thống

10

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.8. Biểu đồ use case cho chức năng mua hàng

Hình 2.1.8 Biểu đồ use case cho chức năng mua hàng
Khi khách hàng mua hàng thì khách hàng tiến hành chọn hàng, sau đó
đặt hàng,khách hàng có thể tiếp tục mua hàng hay lựa chọn huỷ bỏ và cập
nhật giỏ hàng.
Hệ thống sẽ lưu những thông tin về quá trình mua hàng của khách
hàng vào giỏ hàng. Sau khi khách hàng hồn tất đơn hàng thì hệ thống sẽ
in hoá đơn

11

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.9. Đặc tả use case “tìm kiếm sản phẩm” của khách hàng

Hình 2.1.9 Đặc tả use case “tìm kiếm sản phẩm” của khách hàng
Tóm tắt:
- Tác nhân: khách hàng
- Chức năng: Cho phép khách hàng tìm kiếm sản phẩm theo nhiều tiêu
chí khác nhau: theo hãng sản xuất, theo khoảng giá, theo kiểu dáng.
- Mô tả: Khách hàng thấy được sản phẩm theo yêu cầu.

12

Downloaded by BINH NGUYEN ()

lOMoARcPSD|38590726

2.1.10. Đặc tả use case thêm vào giỏ hàng

Hình 2.1.10 Đặc tả use case thêm vào giỏ hàng
- Chức năng: Cho phép người quản trị thêm sản phẩm vào cửa hàng, làm
cho cửa hàng thêm đa dạng .
- Mô tả: Khi sản phẩm được nhập vào cửa hàng người quản lý cần điền
đầy đủ thông tin vào phiếu nhập để người quản trị dễ dàng quản lý sản
phẩm.

13

Downloaded by BINH NGUYEN ()