(TIỂU LUẬN) đồ án 3 xây DỰNG GIAO DIỆN WEBSITE bán QUẦN áo CANIFA

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

ĐỒ ÁN 3
XÂY DỰNG GIAO DIỆN WEBSITE BÁN QUẦN ÁO CANIFA

NGÀNH: CÔNG NGHỆ THÔNG TIN
CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM
HƯỚNG CHUYÊN SÂU: CÔNG NGHỆ WEB

SINH VIÊN: TRẦN KHÁNH SƠN
MÃ LỚP: 125202
HƯỚNG DẪN: CHU THỊ MINH HUỆ

HƯNG YÊN – 2022


NHẬN XÉT
Nhận xét của giảng viên hướng dẫn:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
GIẢNG VIÊN HƯỚNG DẪN
(Ký và ghi rõ họ tên)

2


Xây dựng giao diện website bán quần áo Canifa

LỜI CAM ĐOAN
Em xin cam đoan đồ án “Xây dựng giao diện website bán quần áo Canifa” là
kết quả thực hiện của bản thân em dưới sự hướng dẫn của Cô Chu Thị Minh Huệ
Những phần sử dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong
phần tài liệu tham khảo. Các kết quả trình bày trong đồ án và chương trình xây
dựng được hồn tồn là kết quả do bản thân em thực hiện.
Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn trách nhiệm trước
khoa và nhà trường.
Hưng Yên, ngày 5 tháng 3 năm 2022.
Sinh viên
Sơn
Trần Khánh Sơn

3


Xây dựng giao diện website bán quần áo Canifa

LỜI CẢM ƠN
Để có thể hồn thành đồ án này, lời đầu tiên em xin phép gửi lời cảm ơn tới
bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư
phạm Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho em thực hiện đồ án môn
học này.
Đặc biệt em xin chân thành cảm ơn Cô Chu Thị Minh Huệ đã rất tận tình
hướng dẫn, chỉ bảo em trong suốt thời gian thực hiện đồ án vừa qua.
Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cơ trong Trường đã tận
tình giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực
hiện được đồ án này.
Mặc dù em đã có cố gắng, nhưng với trình độ cịn hạn chế, trong q trình
thực hiện đề tài khơng tránh khỏi những thiếu sót. Em hi vọng sẽ nhận được những
ý kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong
đồ án.
Em xin trân trọng cảm ơn!

4


Xây dựng giao diện website bán quần áo Canifa

MỤC LỤC
Contents
NHẬN XÉT...........................................................................................................2
Contents.....................................................................................................................5

DANH MỤC CÁC HÌNH ẢNH............................................................................6
CHƯƠNG 1:

TỔNG QUAN VỀ ĐỀ TÀI.............................................................8

1.1. Lý do chọn đề tài.............................................................................................8
1.2. Mục tiêu của đề tài..........................................................................................8
1.2.1 Mục tiêu tổng quát........................................................................................8
1.2.2 Mục tiêu cụ thể..............................................................................................8
1.3. Giới hạn và phạm vi của đề tài........................................................................8
1.3.1 Đối tượng nghiên cứu....................................................................................8
1.3.2 Phạm vi nghiên cứu.......................................................................................8
1.4. Nội dung thực hiện..........................................................................................9
1.5. Phương pháp tiếp cận......................................................................................9
CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT...................................................................10

2.1. Quy trình phát triển phần mềm......................................................................10
2.2. Thiết kế giao diện web với HTML, CSS.......................................................11
2.3. Lập trình phía front-end................................................................................14
CHƯƠNG 3:

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG...................................16

3.1 Phát biểu bài toán...........................................................................................16
3.2 Đặc tả yêu cầu phần mềm...............................................................................18
3.2.1 Các yêu cầu chức năng................................................................................18
3.2.2 Biểu đồ lớp thực thể....................................................................................36
3.2.3 Các yêu cầu phi chức năng..........................................................................36

3.3 Thiết kế giao diện...........................................................................................37
CHƯƠNG 4:

TRIỂN KHAI WEBSITE.............................................................55

4.1 Triển khai các chức năng cho phân hệ người dùng........................................55

5


Xây dựng giao diện website bán quần áo Canifa

4.1.1 Trang chủ....................................................................................................58
4.2 Triển khai các chức năng cho phân hệ quản trị nội dung................................61
4.3 Kiểm thử và triển khai ứng dụng....................................................................65
4.3.1 Kiểm thử ....................................................................................................65
4.3.2 Đóng gói ứng dụng......................................................................................65
4.3.3 Triển khai ứng dụng....................................................................................65
KẾT LUẬN.............................................................................................................66

6


Xây dựng giao diện website bán quần áo Canifa

DANH MỤC CÁC HÌNH ẢNH
Hình 3-1 Biểu đồ tổng qt trang quản trị............................................................20
Hình 3-2 Biểu đồ phân rã của use case quản lý loại quần áo................................22
Hình 3-3 Biểu đồ phân rã của use case quản lý quần áo.......................................25
Hình 3-4 Biểu đồ phân rã của use case quản lý khách hàng.................................26

Hình 3-5 Biểu đồ phân rã của use case quản lý đơn hàng....................................27
Hình 3-6 Biểu đồ phân rã của use case quản lý hóa đơn nhập..............................28
Hình 3-7 Biểu đồ phân rã của use case quản lý nhân viên....................................29
Hình 3-8 Biểu đồ phân rã của use case thống kê..................................................30
Hình 3-9 Biểu đồ tổng quát của trang người dùng...............................................32
Hình 3-10 Biểu đồ phân rã của use case Xem quần áo.........................................33
Hình 3-11 Biểu đồ phân rã của use case quản lý đơn hàng..................................34
Hình 3-12 Biểu đồ phân rã của use case quản lý giỏ hàng...................................35
Hình 3-13 Biểu đồ của use case đặt quần áo........................................................36
Hình 3-14 Biểu đồ lớp thực thể............................................................................38
Hình 3-15 Giao diện đăng nhập...........................................................................40
Hình 3-16 Giao diện đang ký...............................................................................41
Hình 3-17 giao diện giỏ hàng mini.......................................................................42
Hình 3-18 Giao diện trang chủ.............................................................................43
Hình 3-19 Giao diện trang chủ.............................................................................43
Hình 3-20 Giao diện trang chủ.............................................................................44
Hình 3-21 Giao diện trang chủ.............................................................................44
Hình 3-22 Giao diện trang chủ.............................................................................45
Hình 3-23 Giao diện trang chủ.............................................................................45
Hình 3-24 giao diện chi tiết sản phẩm..................................................................46
Hình 3-25 giao diện chi tiết sản phẩm..................................................................46
Hình 3-26 giao diện chi tiết sản phẩm..................................................................47
Hình 3-27 giao diện chi tiết sản phẩm..................................................................47
Hình 3-28 giao diện chi tiết sản phẩm..................................................................48

7


Xây dựng giao diện website bán quần áo Canifa

Hình 3-29 giao diện chi tiết sản phẩm..................................................................48
Hình 3-30 giao diện chi tiết sản phẩm..................................................................49
Hình 3-31 giao diện chi tiết sản phẩm..................................................................49
Hình 3-32 giao diện chi tiết sản phẩm..................................................................50
Hình 3-33 Giao diện giỏ hàng..............................................................................50
Hình 3-34 Giao diện giỏ hàng..............................................................................51
Hình 3-35 Giao diện tất cả sản phẩm...................................................................51
Hình 3-36 Giao diện tất cả sản phẩm...................................................................52
Hình 3-37 Giao diện tất cả sản phẩm...................................................................52
Hình 3-38 Giao diện quản lý loại quần áo............................................................53
Hình 3-39 Giao diện quản lý quần áo...................................................................53
Hình 3-40 Giao diện quản lý khách hàng.............................................................54
Hình 3-41 Giao diện quản lý nhân viên................................................................54
Hình 3-42 Giao diện quản lý hóa đơn nhập..........................................................55
Hình 3-43 Giao diện quản lý đơn đặt hàng...........................................................55
Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận...............................................56

8


Xây dựng giao diện website bán quần áo Canifa

CHƯƠNG 1:

TỔNG QUAN VỀ ĐỀ TÀI

1.1. Lý do chọn đề tài
Trước tiên, chúng ta hãy cùng xem lại một chút về hình thức bán quần áo
truyền thống mà xưa nay các chủ doanh nghiệp sỉ hoặc lẻ đều áp dụng. Đó chính là
chỉ bán hàng ngay tại của hàng. Nhưng chỉ với cách làm đó thì doanh nghiệp sẽ

khơng thể phát triển được nhanh chóng và khó có thể quảng bá thương hiệu đến với
người dùng. Đặc biệt là trong thời kỳ dịch bệnh hiện nay thì thói quen mua sắm của
người dùng đã chuyển rất nhiều sang hình thức online, chính vì vậy mà cách thức
bán hàng truyền thống đang khó khăn hơn bao giờ hết.
Hiện nay có rất nhiều cách thức bán hàng online như bán qua các trang mạng
xã hội, qua các trang thương mại điện tử… Và bán hàng qua website riêng của
doanh nghiệp là một cách điển hình.
1.2. Mục tiêu của đề tài
1.2.1 Mục tiêu tổng quát
Xây dựng được giao diện website bán quần áo Canifa đảm bảo tính thẩm mỹ
và thân thiện với người dùng.
1.2.2 Mục tiêu cụ thể
Xây dựng các giao diện như:
-

Đăng nhập

-

Trang chủ

-

Trang xem chi tiết thông tin quần áo

-

Trang giỏ hàng

-

Các trang quản trị hệ thống

1.3. Giới hạn và phạm vi của đề tài
1.3.1 Đối tượng nghiên cứu
-

Đối tượng nghiên cứu: Các cửa hàng bán quần áo của Canifa

-

Khách thể nghiên cứu: Ban quản lý của Canifa và khách hàng.

1.3.2 Phạm vi nghiên cứu
-

Phạm vi không gian: tại các cửa hàng cửa Canifa

9


Xây dựng giao diện website bán quần áo Canifa

-

Phạm vi thời gian: 3 tháng

1.4. Nội dung thực hiện
-

Lấy yêu cầu của khách hàng

-

Phân tích thiết kế hệ thống

-

Lập trình website

-

Kiểm thử

-

Bảo trì

1.5. Phương pháp tiếp cận
Tiếp cận trực tiếp với người sử dụng hệ thống thông qua việc khảo sát hệ
thống cũ, đề xuất, lựa chọn hệ thống mới (có thể đề xuất nhiều phương án để chủ
đầu tư lựa chọn, ….

10


Xây dựng giao diện website bán quần áo Canifa

CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT

2.1. Quy trình phát triển phần mềm
 Lập kế hoạch và thực hiện
-

Đồ án môn học được thực hiện trong 16 tuần.

-

Khảo sát chi tiết cửa hàng, yêu cầu khách hàng, thu thập thơng tin và phân
tích để xác định được yêu cầu chức năng của phần mềm và đặc tả chúng dưới
dạng các biểu đồ.

 Khảo sát và phân tích đặc tả yêu cầu
-

Khảo sát và phân tích đặc tả yêu cầu: khảo sát các chức năng, nghiệp vụ, yêu
cầu của website bán mỹ phẩm.

-

Tham khảo các trang web khác trên mạng internet.

 Thiết kế môi trường tạo trang web
-

Phải thiết kế tổng thể để có cái nhìn trực quan nhất về website, về mối quan
hệ giữa các đối tượng. Sau đó thiết kế chi tiết bằng cách áp dụng các công
cụ, phương pháp để tạo ra mơ hình hệ thống cần sử dụng.

 Lập trình thiết kế website
-

Thiết kế website gồm 2 phân hệ chính: người quản trị và trang người dùng.
Người quản trị có tồn quyền với cơ sở dữ liệu và website như: thêm, sửa,
xóa, cập nhật thơng tin, thống kê, tìm kiếm thơng tin.

-

Yêu cầu cho trang quản trị:
 Cho phép nhân viên quản lý về thông tin của quần áo, loại quần áo, giá
cả, tin tức, địa chỉ. Nếu có gì sai sót thì cho phép quản trị viên có thể
thêm, sửa, xóa các thơng tin của những cái trên. Quản trị viên có thể chiết
suất và thống kê chi tiêu và lợi nhuận của trang web.
 Cho phép quản trị viên có thể quản lý đơn hàng.

-

Yêu cầu cho trang người dùng:
 Cho phép người dùng truy cập vào website để tìm kiếm quần áo, thơng
tin và tìm kiếm địa điểm.
 Khi người dùng chọn quần áo thì có thể thay đổi cho quần áo của mình.

-

Thiết kế giao diện bằng ngôn ngữ HTML, CSS

11

Xây dựng giao diện website bán quần áo Canifa

-

Ngôn ngữ cho phép ta sử dụng các phần tử của nó để tạo các cấu trúc các
thành phần cho trang web, phân chia các đoạn văn, heading,... Bằng cách sử
dụng các thẻ và thuộc tính để tạo nên cấu trúc đó.

-

Lập trình hoạt động của website bằng ngơn ngữ Javascript.
 Javascript cho phép triển khai các chức năng phức tạp trên trang web như
hiển thị nội dung cập nhật kịp thời, tương tác với bản đồ, điều khiển
phương tiện, hoạt cảnh các hình ảnh, cho phép tạo nội dung kiểm sốt đa
phương tiện hình ảnh động, hoạt động.
 Javascript triển khai tập lệnh bên phía máy khách. Chúng ta có thể dễ
dàng viết các tập lệnh bên phía máy khách tùy chỉnh bằng Javascript và
tích hợp một cách liền mạch vào HTML, sử dụng chúng đề tương tác, trả
lời người dung ngay lâp tức.

 Kiểm thử
-

Lập kế hoạch và kiểm soát việc kiểm thử.

-

Thực thi test.

-

Đánh giá kết quả thực thi và báo cáo kết quả.

 Bảo trì
-

Sửa lại cho đúng

-

Thích ứng

-

Hồn thiện

-

Bảo trì

2.2. Thiết kế giao diện web với HTML, CSS
1. Thiết kế giao diện với HTML
 HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn
bản được thiết kế ra để tạo nên các trang web với các mẩu thơng tin được
trình bày trên World Wide Web.
 HTML tập hợp các quy định chung để trao đổi tài liệu (văn bản, hình ảnh,
âm thanh, video, các tập tin đa truyền thơng...) giữa Web server và trình
duyệt Web.

12


Xây dựng giao diện website bán quần áo Canifa

 Các phần trong trang web nằm trong cặp thẻ <html></html>, phần đầu trang
nằm trong cặp thẻ <head> để nhúng file css, đặt tên tiêu đề trang web,
nhúng file js. Phần nội dung trang web mà người dùng nhìn thấy sẽ đặt
trong cặp thẻ <body></body>.
 Thẻ <img> để nhúng hình ảnh, thẻ <a> để liên kết đến một trang khác, thẻ

để định dạng các đoạn văn, thẻ <div> để chứa khối lệnh và chia bố cục
trang web.
 Ưu điểm, nhược điểm
 Ưu điểm
-

Có thể tích hợp được với các ngơn ngữ khác như CSS, JavaScript,...

-

Ngôn ngữ được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ.

-

Sử dụng mượt mà trên hầu hết mọi trình duyệt.

-

Quá trình học đơn giản và trực tiếp.

-

Mã nguồn mở và hồn tồn miễn phí.

-

Chuẩn chính của web được vận hành bởi World Wide Web Consortium
(W3W).

-

Dễ dàng tích hợp các ngơn ngữ backend như PHP và Node.js.

 Nhược điểm
-

Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động cần sử
dụng JavaScript hoặc ngôn ngữ backend.

-

Một lượng lớn code phải được viết để tạo một trang web đơn giản.

-

Một số trình duyệt chậm hỗ trợ tính năng mới.

-

Tính năng bảo mật khơng tốt.

2. Thiết kế giao diện web với CSS

13


Xây dựng giao diện website bán quần áo Canifa

 CSS là chữ viết tắt của cụm từ Cascading Style Sheets được dùng để “
định dạng” cho các phần tử trên trang web, nó quyết định việc các phần tử
HTML khi hiển thị lên trang web sẽ trông như thế nào.
 Cú pháp CSS
 Bộ chọn (selector) dùng để xác định phần tử HTML muốn định dạng.
 Mỗi một cặp property: value thì được gọi là một khai báo (declaration),
một khai báo được dùng để thiết lập lại giá trị của một thuộc tính CSS
của phần tử. Ví dụ: color: yellow.
 Bộ định dạng là một tập hợp gồm nhiều khai báo, nó dùng để thiết lập
lại giá trị cho các thuộc tính CSS của phần tử.
 Các bộ chọn CSS
Tên bộ chọn

Chọn gì

Ví dụ

Bộ chọn phần
tử (đơi khi Tất cả (các) thành phần
được gọi là thẻ HTML của loại được chỉ Chọn

hoặc loại bộ định.
chọn)

Bộ chọn ID

Phần tử trên trang có ID được
chỉ định. (Trên một trang
#my-id
HTML nhất định, bạn chỉ
Chọn

or được phép một phần tử cho
id="my-id">
mỗi ID, và tất nhiên là mỗi
ID cho mỗi phần tử).

Bộ chọn Class

(Các) Thành phần trên trang
.my-class
có lớp (class) được chỉ định
Chọn

và (lớp có thể xuất hiện nhiều
class="my-class">
lần trên một trang).

img[src]
Bộ chọn thuộc (Các) thành phần trên trang Chọn tính
có thuộc tính được chọn.
src="myimage.png"> nhưng
khơng phải <img>
Bộ chọn

(Các) thành phần được chỉ a:hover

14


Xây dựng giao diện website bán quần áo Canifa

Pseudo-class

định, nhưng chỉ khi ở trạng
Chọn <a>, nhưng chỉ khi con trỏ
thái được chỉ định, ví dụ: rê
chuột đang di chuột qua liên kết.
chuột

2.3. Lập trình phía front-end
 Front – end
Font-end là cách gọi quy trình sử dụng các ngơn ngữ HTML, CSS,
JavaScript thiết kế và xây dựng giao diện cho các trang web hoặc ứng dụng web để
người dùng có thể xem và tương tác trực tiếp trên đó. Mục tiêu của việc thiết kế
trang web là giúp cho người dùng dễ dàng sử dụng khi mở trang web. Điều này rất
khó khăn vì trong thực tế người dùng sử dụng rất nhiều loại thiết bị khác nhau với
kích thước và độ phân giải khác nhau, do đó buộc Front End Developer phải xem
xét hết các khía cạnh này khi thiết kế trang web. Cần phải đảm bảo trang web xuất
hiện chính xác trên các trình duyệt khác nhau, hệ điều hành khác nhau và các thiết
bị khác nhau. Để trở thành một lập trình viên Font End thì sử dụng 3 ngôn ngữ
HTML, CSS, JavaScript là điều bắt buộc không thể khơng học. Ngồi ra lập trình
viên cũng sẽ phải bổ sung các kiến thức liên quan như:
 HTML và CSS

HTML và CSS (Cascading Style Sheets) là các ngôn ngữ cơ bản nhất để phát
triển giao diện web. Nếu không thông thạo hai ngôn ngữ này bạn sẽ không thể nào
thiết kế được trang web.
 Javascript
JavaScript cho phép bạn có thể tạo ra rất nhiều tính năng tương tác cho trang
web. Giúp cho người dùng dễ dàng sử dụng website hơn.
 Jquery
Jquery là một thư viện JavaScript thu nhỏ. Có tác dụng giúp tạo ra các tương
tác, sự kiện, hiệu ứng trên website một cách dễ dàng. Có rất nhiều hiệu ứng sử dụng
Jquery nên tìm hiểu qua nó.
 UX/UI

15


Xây dựng giao diện website bán quần áo Canifa

Tối ưu cho trải nghiệm người dùng cũng khá quan trọng. Front-end
Developer cũng cần tìm hiểu về thiết kế giao diện làm thế nào để tăng trải nghiệm
cho người dùng khi xem website.
 Thiết kế giao diện Reponsive và thiết kế Mobile
Hiện nay có một số CMS nổi tiếng như WordPress, Joomla được nhiều
người quan tâm. Bởi chúng giúp tạo ra trang web nhanh chóng hơn so với việc code
từ đầu. Tỷ lệ truy cập internet từ thiết bị di động đã cao hơn desktop rất nhiều, do đó
kỹ năng thiết kê mobile đóng vai trị quan trọng trong mắt các nhà tuyển dụng
Responsive design là thiết kế trang web có thể tương thích với nhiều loại thiết bị di
động có kích thước hiển thị khác nhau.

16

Xây dựng giao diện website bán quần áo Canifa

CHƯƠNG 3:

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

1.1 Phát biểu bài tốn
Xây dựng Website cho phép giới thiệu và đặt hàng online cho cửa hàng bán
quần áo Canifa. Website cho phép khách hàng có thể xem và đặt hàng online, nhân
viên của cửa hàng có thể quản lý thơng tin của Website và quản lý hoạt động đặt và
giao hàng. Các yêu cầu của hệ thống được mô tả như sau:
1. Cửa hàng bán các loại quần áo cho. Mỗi loại có các thông tin (Mã loại,
tên loại). Khi cửa hàng nhập một loại quần áo mới nhân viên cửa hàng có nhiệm vụ
cập nhật thông tin về loại mặt hàng vào trong hệ thống, nếu thơng tin có sai sót nhân
viên có thể thực hiện sửa hoặc xóa thơng tin về loại mặt hàng.
2. Một loại quần áo sẽ có nhiều quần áo khác nhau. Mỗi quần áo trong cửa
hàng gồm các thông tin (Mã quần áo, Tên quần áo, chất liệu, size, màu sắc, mơ tả).
Mỗi sảm phẩm sẽ có nhiều size và màu sắc khác nhau. Khi cửa hàng bán một quần
áo mới, nhân viên thực hiện nhập thông tin về quần áo vào trong hệ thống, nếu
thông tin của quần áo có sai sót nhân viên có thể thực hiện sửa hoặc xóa thơng tin
của quần áo.
3. Giá bán của các mặt hàng được điều chỉnh theo giá bán của thị trường, khi
giá của các mặt hàng thay đổi thì nhân viên có nhiệm vụ cập nhật lại giá bán, nếu
giá bán có sai sót thì có thể thực hiện sửa giá bán. Giá bán của mỗi quần áo gồm các
thông tin (Mã quần áo, Giá bán, Ngày hiệu lực, Ngày hết hiệu lực).
4. Cửa hàng có nhập quần áo từ nhà cung cấp của Canifa. Khi nhập hàng về
cửa hàng, nhân viên có nhiệm vụ nhập quần áo vào cửa hàng và lưu thơng tin về
hóa đơn nhập hàng vào hệ thống hóa đơn nhập hàng gồm thơng tin (Mã hóa đơn
nhập, Ngày nhập, Thành tiền và các thông tin về quần áo nhập (Mã quần áo, Số

lượng, Giá nhập,). Khi thơng tin về hóa đơn nhập có sai sót, hệ thống cho phép nhân
viên kho có thể sửa, xóa thơng tin hóa đơn nhập.
5. Khi khách hàng muốn mua quần áo, khách hàng vào website xem thông
tin của các quần áo (thông tin về các quần áo có thể được hiển thị theo nhóm như
quần áo xu hướng mới nhất, quần áo bán chạy nhất, quần áo khuyến mại, quần áo
theo loại). Khi khách hàng quan tâm đến quần áo nào khách hàng có thể xem thông

17


Xây dựng giao diện website bán quần áo Canifa

tin chi tiết về quần áo đó. Trong q trình xem thơng tin quần áo trên website, nếu
khách hàng mua quần áo nào sẽ chọn quần áo đó đưa vào giỏ hàng.
6. Sau khi chọn mua các quần áo trong giỏ hàng, khách hàng có thể xem
thơng tin các quần áo trong giỏ hàng, sửa số lượng quần áo mua hoặc xóa quần áo
chọn mua trong giỏ hàng. Khi khách hàng muốn đặt mua, khách hàng sẽ thực hiện
đặt hàng, thông tin đơn đặt hàng được lưu vào hệ thống. Thông tin của đơn hàng
gồm các thông tin (Mã đơn hàng, thông tin của khách hàng, ngày đặt hàng, thành
tiền, địa chỉ giao hàng, số điện thoại nhận hàng, trạng thái đơn hàng và các thông tin
về các quần áo đặt mua gồm (Mã quần áo, số lượng, đơn giá).
7. Khi có một khách hàng mới đặt hàng lần đầu trong hệ thống, thông tin
của khách hàng sẽ được lưu lại sau khi thực hiện xác minh được thông tin của
khách. Thông tin của khách hàng gồm (Mã khách hàng, Tên khách hàng, Số điện
thoại, Email, Địa chỉ). Khách hàng có thể xem lại thơng tin khách hàng, nếu có sai
sót khách hàng có thể thực hiện sửa thơng tin.
8. Khách hàng có thể đăng nhập vào website để nhận được các ưu đã và các
khuyến mãi đặc biệt của website.
9. Khách hàng có thể xem lại danh sách các đơn đặt hàng đã đặt và thông tin
chi tiết từng đơn hàng đã đặt. Với các đơn hàng chưa được giao, khách hàng có thể

sửa số lượng các mặt hàng đã đặt mua, xóa bớt các mặt hàng đã đặt hoặc hủy đơn
đặt hàng.
10. Với các đơn hàng khách hàng đã đặt, nhân viên cửa hàng có thể thực hiện
xóa và xem được các đơn hàng chưa xác thực; xem danh sách các đơn hàng đã xác
thực và xác nhận đã xử lý; xem được các đơn hàng đã xử lý và xác nhận đã chuyển
cho nhà cung cấp; xem được các đơn hàng đang vận chuyển và xác nhận đã thanh
toán hoặc đổi trả hoặc giao hàng không thành công.
11. Tất cả nhân viên thực hiện quản lý thông tin hệ thống phải đăng nhập
trước khi thực hiện, thông tin nhân viên gồm (Mã nhân viên, Mật khẩu, Vai trò,
Trạng thái hoạt động).
12. Nếu nhân viên cửa hàng vắng mặt/bận thì admin có thể đóng vai trị như
nhân viên.

18


Xây dựng giao diện website bán quần áo Canifa

1.2 Đặc tả yêu cầu phần mềm
1.2.1 Các yêu cầu chức năng
a) Chức năng của phân hệ quản trị nội dung (nếu có)

Hình 3-1 Biểu đồ tổng qt trang quản trị
1. Chức năng đăng nhập
 Mục đích: Cho phép người dùng đăng nhập vào hệ thống
 Tác nhân liên quan: Khách hàng, Nhân viên, Admin
 Dịng sự kiện chính
1. u cầu chức năng đang nhập
2. SYSTEM Hiển thị giao diện đăng nhập
3. Nhập user name, nhập password

19


Xây dựng giao diện website bán quần áo Canifa

4. Yêu cầu đăng nhập
5. SYSTEM Lấy về thông tin người dùng nếu người dùng đăng nhập sai
chuyển sang luông phụ 5a
6. if Nếu chọn ghi nhớ tài khoản
6.1. SYSTEM Hệ thống lưu ghi nhớ tài khoản
end if
7. SYSTEM Thiết lập trạng thái đăng nhập, đóng giao diện đăng nhập
Extension:
5.a. User name hoặc password không đúng
1. SYSTEM Hệ thống hiển thị thông báo đăng nhập không thành công,
yêu cầu nhập lại, quay lại bước 3

2. Chức năng quản lý loại quần áo
 Mục đích: Cho phép người dùng quản lý các loại quần áo
 Tác nhân liên quan: Nhân viên, Admin
 Biểu đồ use case

20


Xây dựng giao diện website bán quần áo Canifa

Hình 3-2 Biểu đồ phân rã của use case quản lý loại quần áo
 Dịng sự kiện chính

 Dịng sự kiện của chức năng quản lý loại quần áo
1. Nhân viên yêu cầu chức năng quản lý loại quần áo
2. SYSTEM Hệ thống lấy về danh sách loại hàng hiển thị lên giao diện
3. Nhân viên thực hiện các ca sử dụng tùy chọn
3.1. if chọn chức năng thêm
3.1.1. Thực hiện ca sử dụng thêm loại
end if
3.2. if Chọn một loại quần áo yêu cầu xóa
3.2.1. Thực hiện ca sử dụng xóa
end if
3.3. if Chọn một loại quần áo yêu cầu xóa
3.3.1. Thực hiện ca sử dụng sửa
end if

21


Xây dựng giao diện website bán quần áo Canifa

 Dòng sự kiện của chức năng nhập loại quần áo
1. Người dùng yêu cầu chức năng nhập mới loại quần áo
2. SYSTEM Hệ thống hiển thị giao diện nhập
3. Nhân viên nhập thông tin loại quần áo
4. SYSTEM Hệ thống kiểm tra tính hợp lệ của các thơng tin
5. Nhân viên yêu cầu nhập
6. SYSTEM Hệ thống lưu thông tin quần áo vào trong hệ thống
7. SYSTEM Hệ thống thêm Loại vào danh sách loại và quay trở lại màn hình
ban đầu
Extension:
4.a. Thông tin không hợp lệ

1. Hệ thống hiển thị thông báo lỗi và yêu cầu nhập lại
5.a. Nhân viên hủy chức năng nhập
1. SYSTEM Hệ thống hiển thị thông báo xác nhận thao tác hủy, nếu đúng
thì chuyển sang luồng phụ 5b
2. Quay lại bước 5
5.b. Hủy thao tác nhập
1. SYSTEM Hệ thống đóng giao diện nhập và quay lại giao diện chính

 Dịng sự kiện của chức năng sửa loại quần áo
1. Nhân viên yêu cầu sửa loại quần áo
2. SYSTEM Hệ thống hiển thị giao diện sửa loại quần áo và hiển thị thông tin loại

22


Xây dựng giao diện website bán quần áo Canifa

quần áo cần sửa
3. Nhân viên sửa thông tin loại quần áo
4. Nhân viên yêu cầu lưu thông tin quần áo đã sửa
5. SYSTEM Hệ thống kiểm tra tính hợp lệ thơng tin, nếu thông tin không hợp lệ
chuyển sang luồng phụ 5a
6. SYSTEM Hệ thống cập nhật thông tin loại quần áo lên hệ thống và hiển thị
thông tin cập nhật lên giao diện
7. SYSTEM Hệ thống đóng giao diện sửa loại quần áo
Extension:
5.a. Thông tin loại quần áo không hợp lệ
1. SYSTEM Hệ thống hiển thị thông báo lỗi và u cầu nhập lại thơng tin

 Dịng sự kiện của chức năng xóa loại quần áo

1. Nhân viên chọn loại quần áo cần xóa
2. SYSTEM Hệ thống hiển thị thơng báo xác nhận xóa loại quần áo
3. if Nếu người dùng xác nhận xóa loại quần áo
3.1. SYSTEM Hệ thống xóa quần áo đã chọn và thơng báo xóa quần áo
thành cơng
end if
Extension:
3.a. Nếu người dùng u cầu xóa quần áo
1. SYSTEM Đóng cửa sổ xóa quần áo và quay lại trang chủ

3. Chức năng quản lý quần áo

23


Xây dựng giao diện website bán quần áo Canifa

 Mục đích: Cho phép người dùng quản lý các quần áo
 Tác nhân liên quan: Nhân viên, Admin
 Biểu đồ use case

Hình 3-3 Biểu đồ phân rã của use case quản lý quần áo
4. Chức năng quản lý khách hàng
 Mục đích: Cho phép người dùng quản lý các khách hàng
 Tác nhân liên quan: Nhân viên, Admin
 Biểu đồ use case

24

Xây dựng giao diện website bán quần áo Canifa

Hình 3-4 Biểu đồ phân rã của use case quản lý khách hàng
5. Chức năng quản lý đơn hàng
 Mục đích: Cho phép người dùng quản lý các đơn hàng
 Tác nhân liên quan: Nhân viên, Admin
 Biểu đồ use case

25