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

CƠ SỞ LẬP TRÌNH WEB

ĐỀ TÀI:

XÂY DỰNG WEBSITE STYLE ZERO

Sinh viên thực hiện : VŨ QUANG LONG

NGUYỄN THỊ THU
THƯƠNG
NGÔ ĐỨC THẮNG
HOÀNG QUỐC HOAN
NGUYỄN TUẤN HIỆP

Giảng viên hướng dẫn : CÙ VIỆT DŨNG

Ngành : CÔNG NGHỆ THÔNG TIN
Chuyên ngành : THƯƠNG MẠI ĐIỆN TỬ
Lớp : D13HTTMĐT1
Khóa : 2018-2023
 PHIẾU CHẤM ĐIỂM

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

sinh viên ký

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

Giảng viên chấm 1:

Giảng viên chấm 2:

 Mục lục

Lời mở đầu...............................................................................................................3
CHƯƠNG 1. Khảo sát hệ thống.............................................................................4
1.1 Mô tả............................................................................................................4
1.2 Chức năng hệ thống.......................................................................................4
1.2.1 Bảng chức năng........................................................................................4
1.2.2 Activity Diagrams (Các sơ đồ hoạt động)...........................................6
Chương 2 Phân tích hệ thống...............................................................................10
1.1 Phân tích yêu cầu..........................................................................................10
1.1.1 Packages..................................................................................................10
1.1.2. Bảng yêu cầu..........................................................................................10
2.1 Phân tích ca sử dụng....................................................................................11
2.1.1 Chi tiết các gói........................................................................................11
2.1.2 Bảng thống kê Use Case.........................................................................13
3.1 Thiết kế giao diện (Use Interface)...............................................................14
3.1.1 Trang chủ................................................................................................14
3.1.2 Thương hiệu............................................................................................16
3.1.3 Thời trang theo mùa..............................................................................17
3.1.4 Trang phục nam.....................................................................................17
3.1.4 Trang phục nữ........................................................................................18
3.1.5 Trang phục bé trai.................................................................................18
3.1.6 Trang phục bé gái...................................................................................19
3.1.9 Giao diện chi tiết sản phẩm...................................................................20
Kết luận..................................................................................................................21
 Danh mục hình ảnh
Hình 1 Sơ đồ hoạt động của tài khoản.......................................................................8
Hình 2 Sơ đồ hoạt động của khách hàng...................................................................9
Hình 3 Sơ đồ hoạt động của thanh toán...................................................................10
Hình 4 Packages......................................................................................................11
Hình 5 Gói tài khoản...............................................................................................13
Hình 6 Gói khách hàng............................................................................................13
Hình 7 Gói thanh toán.............................................................................................14
Hình 8 Sản phẩm mới..............................................................................................16
Hình 9 Thương hiệu nổi tiếng.................................................................................16
Hình 10 Sản phẩm hot.............................................................................................17
Hình 11 Thương hiệu..............................................................................................17
Hình 12 Thời trang theo mùa..................................................................................18
Hình 13 Trang phục nam.........................................................................................18
Hình 14 Trang phục nữ............................................................................................19
Hình 15 Trang phục bé trai......................................................................................19
Hình 16 Trang phục bé gái......................................................................................20
Hình 17 Tài khoản...................................................................................................20
Hình 18 Giỏ hàng style zero....................................................................................21
Hình 19 Giao diện chi tiết sản phẩm.......................................................................21
 Lời mở đầu
Trong nền kinh tế xã hội phát triển, mua bán online càng trở thành nhu cầu thiết
yếu của những "tín đồ mua sắm" và mặt hàng được ưa chuộng nhất đó chính là
quần áo, thời trang. Hiện tại khi đại dịch Covid 19 bùng nổ thì thuật ngữ "social
distancing" cũng được mọi người biết đến nhiều hơn. Thuật ngữ được hiểu là là
giữ khoảng cách xã hội để nói đến việc tránh tiếp xúc gần và hạn chế tụ tập đông
người thì lúc này bán hàng online đã trỗi dậy một cách mạnh mẽ. Đối mặt với nền
kinh tế suy thoái vì Covid 19, các shop thời trang đã bắt đầu thay đổi hình thức
sang bán hàng online. Hình thức này không chỉ đơn giản để đáp ứng nhu cầu mua
sắm của khách hàng và còn là một trong những giải pháp kinh doanh cực thông
minh hỗ trợ người bán hàng vượt qua cơn khủng hoảng. Trong tất cả các hình thức
bán hàng online thì xây dựng website được coi là hình thức mất chi phí nhiều nhất
do bạn phải mất phí duy trì trang web. Tuy nhiên, đúng là “tiền nào của ấy” vì bạn
đã phải mất khoản chi phí thì hình thức này lại mang lại sự chuyên nghiệp trong
bán hàng. Chính vì sự phát triển của ngành kinh doanh thời trang online nên nhóm
chúng em đã lựa chọn website Style Zero để làm đề tài của mình. Style Zero là
website chuyên kinh doanh các mặt hàng quần áo nam nữ và trẻ em. Do thời gian
còn hạn hẹp và đây cũng là sản phẩm đầu tiên của nhóm chúng em, em hi vọng là
sẽ được thầy cô cho giúp đỡ để ý tưởng website của em có thể hoàn thiện hơn.
Em xin chân thành cảm ơn!
 CHƯƠNG 1. Khảo sát hệ thống
1.1 Mô tả
Shop Style zero là shop thời trang chuyên phân phối quần áo với đủ loại từ quần áo
bình dân tới quần áo thương hiệu, từ quần áo người lớn tới trẻ em. Dựa trên mục
đích và yêu cầu đặt ra chúng ta có thể chia danh mục hệ thống theo cấp độ sau:
- Trang chủ
- Hàng mới
o Xu hướng
o Thời trang mới
- Trang phục
o Thương hiệu
o Mùa
o Nam
o Nữ
o Bé trai
o Bé gái
- Thẻ quà tặng
o Gía trị vouchers
- Tin tức
o Tin tức thời trang mới nhất tuần
- Giới thiệu
- Tài khoản
- Giỏ hàng
- Tìm kiếm
 Mô tả sơ lược về hệ thống
- Quản lý đăng nhập: Khách hàng đăng nhập hoặc đăng kí tài khoản tại shop
để có thể đặt mua hàng tại shop.
- Quản lý sản phẩm: Danh mục được chia thành các 6 loại là thương hiệu ,
mùa, nam, nữ, bé trai,bé gái. Để khách hàng có thể dễ dàng lựa chọn.
- Quản lý thanh toán: Khách hàng lựa chọn sản phẩm và thêm vào giỏ hàng.
Trong giỏ hàng khác hàng sẽ lựa chọn số lượng địa chỉ và hình thức thanh
toán.
1.2 Chức năng hệ thống
1.2.1 Bảng chức năng
Chức năng Mô tả Trạng Thái
CN01-Đăng nhập Khách hàng khi có tài khoản cần đăng Đã có
nhập vào hệ thống để có thể mua hàng
CN02-Đăng ký Khi chưa có tài khoản, khách hàng cần Đã có
đăng kí 1 tài khoản bằng cách: đăng kí
qua facebook, google hoặc số điện
thoại
CN03-Quên mật Nếu User quên tài khoản có thể lựa Đã có
khẩu chọn quên mật khẩu để cấp lại mật
khẩu
CN04 -Phân quyền Khi bất kì ai vào giao diện đăng nhập Sẽ xây dựng sau
đăng nhập cần phải lựa chọn quyền đăng nhâp.
Có 2 loại quyền đăng nhập là USER
và ADMINSTRATOR
CN5 - Chức năng Khách hàng khi tạo tài khoản cần điền Đã có
truy vấn thông tin đầy đủ thông tin, địa chỉ của mình.
khách hàng
CN6- Chức năng Mỗi khách hàng khi đăng kí được tạo Sẽ xây dựng
quản lí tài khoản 1 tài khoản và được phép chỉnh sửa
khách thông tin cá nhân hoặc lịch sử mua
hàng
CN7 – Kiểm tra Khi khách hàng đăng ký tài khoản và Sẽ xây dựng
danh sách khách nhập thông tin, nhà hàng sẽ chuyển
hàng thông tin khách hàng đến một danh
sách để dễ quản lý.
CN8 – Kiểm tra Khách hàng và admin có thể kiểm tra Sẽ xây dựng
lịch sử mua hàng lịch sử hóa đơn mà khách hàng đã
mua.
CN9 – Danh mục Khách hàng đưa chuột vào thanh menu Đã có
sản phẩm trên cùng để hiện ra danh mục sản
phẩm đã mua
CN10 -Hiển thị Khi khách hàng thêm sản phẩm vào Đã có
thông tin sản phẩm giỏ hàng , thông tin sản sẽ được hiển
vừa thêm vào giỏ thị đầy đủ tại đó
hàng
CN11 -Kiểm tra Hệ thống sẽ hiển thị tình trạng của sản Sẽ xây dựng
tình trạng sản phẩm ngay bên dưới sản phẩm
phẩm (còn hàng
hay hết hàng)
CN12- Chức năng Khi sản phẩm được thêm vào giỏ Đã có
thanh toán hàng, khách hàng cần lựa chọn số
lượng sản phẩm, địa chỉ giao hàng và
hình thức thanh toán
CN13 - Chức năng Khi khách kiểm tra xong hóa đơn sẽ Đã có
lựa chọn hình thức phải lựa chọn 1 trong 2 hình thức
thanh toán thanh toán là thanh toán trực tiếp hoặc
thanh toán qua thẻ
CN14- Chức năng Để lựa chọn hình thức thanh toán cash Đã có
thanh toán qua thì khách cần nhấn vào nút By Cash
cash sau đó nhấn xác nhận
CN15- Chức năng Khi khách hàng lựa chọn thanh toán Sẽ xây dựng
thanh toán bằng qua card thì hệ thống chuyển hướng
card tới thanh toán thanh toán card. Ở đây
khách sẽ điền thông tin thẻ và xác
nhận số tiền thanh toán
CN 16- Xác nhận Sau khi khách hàng nhấn thanh toán, Đã có
thanh toán đơn hàng sẽ được xác nhận.

CN17 Tìm kiếm Các sản phẩm mới nhất được đề xuất Sẽ xây dựng
sản phẩm mới nhất và được cập nhật trong mục sản phẩm
mới nhất. Khách hàng có thể vào đó để
tìm kiếm.
CN18 Kiểm tra Các khuyến mãi sẽ được cập nhật Sẽ xây dựng
vouchers trong mục khuyến mãi. Khách hàng có
thể vào đó để tìm kiếm được những
khuyến mãi mới nhất
CN19 Cập nhật tin Tin tức mới về lĩnh vực thời trang sẽ Sẽ xây dựng
tức được update thường xuyên trong mục
tin tức

1.2.2 Activity Diagrams (Các sơ đồ hoạt động)

Sơ đồ hoạt động xây dựng từ các chức năng như sau:
 Acount
 Hình 1 Sơ đồ hoạt động của tài khoản
 Customer
Quy trình đặt hàng
 Hình 2 Sơ đồ hoạt động của khách hàng

 Pays
Hình 3 Sơ đồ hoạt động của thanh toán
 Chương 2 Phân tích hệ thống
1.1 Phân tích yêu cầu
Dựa vào chức năng và sơ đồ hoạt động (D2), shop thời trang Style Zero được
chia thành các gói và các yêu cầu như sau:
1.1.1 Packages

Hình 4 Packages
1.1.2. Bảng yêu cầu
Gói/Yêu cầu Mô tả Chức năng
P01 ACOUNT Tạo tài khoản và đăng nhập
-Req01-01-Kiểm tra Khách hàng khi có tài khoản cần CN01
đăng nhập đăng nhập vào hệ thống để có thể
mua hàng
-Req01-02-Xác nhận Khi chưa có tài khoản, khách hàng CN02
đăng ký tài khoản cần đăng kí 1 tài khoản bằng cách:
đăng kí qua facebook, google hoặc số
điện thoại
-Req01-03-Xác nhận Khách hàng sẽ được lấy lại mật khẩu CN03
quên mật khẩu khi không nhớ .
 P02 CUSTOMERS Kiểm tra thông tin khách
-Req02-01 Kiểm thông Thông tin khách hàng được lưu trong CN06
tin khách hàng mục tài khoản. Admin có thể xem
thông tin khách hàng
-Req 02-02 Kiểm tra Mỗi khi khách hàng đăng kí tài CN06
danh sách khách hàng khoản, thông tin khách hàng sẽ được
lưu lại. Admin có thể kiểm tra danh
sách toàn bộ khách hàng của mình
-Req 02-03 Kiểm tra Khách hàng có thể kiểm tra lịch sử CN08
thông tin mua hàng mua hàng của mình
P05 PAYS Khách hàng chọn thanh toán
-Req 05-01 Kiểm tra hóa Khách hàng và admin có thể kiểm tra CN12
đơn đã thanh toán lịch sử hóa đơn mà khách hàng đã
thanh toán.
-Req 05-02 Kiểm tra mã Hệ thống sẽ kiểm tra được mã hóa CN12
hóa đơn đơn để rồi tìm ra thông tin trong hóa
đơn ý.
-Req 05-03 Kiểm tra Khi khách hàng lựa chọn thanh toán CN15
thông tin card qua card thì hệ thống chuyển hướng
tới thanh toán thanh toán card. Ở đây
khách sẽ điền thông tin thẻ và xác
nhận số tiền thanh toán. Và hệ thống
sẽ kiểm tra thông tin có chính xác
không.
-Req 05-04 Kiểm tra Kiểm tra được khách hàng chọn hình CN12
hình thức thanh toán thức thanh toán trực tiếp hay thanh
toán qua thẻ
2.1 Phân tích ca sử dụng
2.1.1 Chi tiết các gói
 P01 ACOUNT
 Hình 5 Gói tài khoản
 P02 CUSTOMER

Hình 6 Gói khách hàng

  P03 PAYS

Hình 7 Gói thanh toán

2.1.2 Bảng thống kê Use Case

Use Case Yêu cầu (Req.) Tác nhân(Actors)

P01- Gói đăng nhập

UC 01- 01 Kiểm tra đăng Đăng nhập Khách hàng

nhập
UC 01- 02 Xác nhận đăng ký Đăng ký Khách hàng
tài khoản
UC 01- 03 Xác nhận quên Quên mật khẩu Khách hàng,
mật khẩu
P02-Gói Customer

UC 02- 01 Thêm vào giỏ Kiểm tra Khách hàng

hàng
UC 02- 02 Kiểm tra thông Kiểm tra Admin, Khách hàng
tin tài khoản
UC 02- 03 Kiểm tra lịch sử Kiểm tra Khách hàng, Admin
 mua hàng
P05- Pay
UC 05- 01 Kiểm tra hình Kiểm tra Khách hàng
thức thanh toán
UC 05- 02 Xác nhận thanh Kiểm tra Khách hàng
toán
UC 05- 03 Kiểm tra mã hóa Kiểm tra Khách hàng
đơn
UC 05- 04 Kiểm tra lịch sử Kiểm tra Khách hàng
thanh toán
3.1 Thiết kế giao diện (Use Interface)
3.1.1 Trang chủ
Trang chủ gồm:
Banners

Sản phẩm mới

 Hình 8 Sản phẩm mới
Thương hiệu nổi tiếng

Hình 9 Thương hiệu nổi tiếng

Danh sách sản phẩm hot
 Hình 10 Sản phẩm hot
3.1.2 Thương hiệu

Hình 11 Thương hiệu

3.1.3 Thời trang theo mùa

Hình 12 Thời trang theo mùa

3.1.4 Trang phục nam

Hình 13 Trang phục nam

3.1.4 Trang phục nữ

Hình 14 Trang phục nữ

3.1.5 Trang phục bé trai

Hình 15 Trang phục bé trai

3.1.6 Trang phục bé gái

Hình 16 Trang phục bé gái

3.1.7 Tài khoản

Hình 17 Tài khoản

3.1.8 Giỏ hàng

Hình 18 Giỏ hàng style zero

3.1.9 Giao diện chi tiết sản phẩm

Hình 19 Giao diện chi tiết sản phẩm

 Kết luận
Style Zero là 1 dự án website tĩnh nhỏ do cả nhóm chúng em cùng nhau phát triển.
Còn khá nhiều điều thiếu sót trên website của chúng em. Em hi vọng được thầy cô
góp ý và giúp đỡ để website của em có thể hoàn thiện hơn trong tương lai.