1 - Trần Khánh Sơn - 10120702 - 125202 - DoAn2

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 hoàn toà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
LỜI CẢM ƠN
Để có thể hoà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 quá 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
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
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
DANH MỤC CÁC HÌNH ẢNH

Hình 3-1 Biểu đồ tổng quát 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-24 giao diện chi tiết sản phẩm..................................................................46
7

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-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
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
- 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
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ó toà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
- 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 soá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
- Hoà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
 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ẻ
<p> để đị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à hoàn toà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
 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 <p>
hoặc loại bộ định.
chọn)
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ỉ
Bộ chọn ID Chọn <p id="my-id"> or <a
đượ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ử).
(Các) Thành phần trên trang

.my-class
có lớp (class) được chỉ định
Bộ chọn Class Chọn <p class="my-class"> và <a
(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 <img
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
định, nhưng chỉ khi ở trạng

Chọn <a>, nhưng chỉ khi con trỏ
Pseudo-class 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. Ngoà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
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
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

1.1 Phát biểu bài toá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
tin chi tiết về quần áo đó. Trong quá 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
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 quát 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. Yê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
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
6. 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
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 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
3.1. 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
3.2. 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
3.3. end if
21
 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
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à yê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
3. end if
Extension:
3.a. Nếu người dùng yê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
 Mục đích: Cho phép người dùng quản lý các quần áo
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
24
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
25
Hình 3-5 Biểu đồ phân rã của use case quản lý đơn hàng
6. Chức năng quản lý hóa đơn nhập
 Mục đích: Cho phép người dùng quản lý các hóa đơn nhập
26
Hình 3-6 Biểu đồ phân rã của use case quản lý hóa đơn nhập
7. Chức năng quản lý nhân viên
 Mục đích: Cho phép Admin quản lý các nhân viên
 Tác nhân liên quan: Admin
27
Hình 3-7 Biểu đồ phân rã của use case quản lý nhân viên
8. Chức năng thống kê
 Mục đích: Cho phép Admin xem các thông số thống kê
 Tác nhân liên quan: Admin
28
Hình 3-8 Biểu đồ phân rã của use case thống kê
 Luồng sự kiện chính
1. Nhân viên yêu cầu chức năng thống kê
2. Nhân viên thực hiện các ca sử dụng tùy chọn
2.1. if Chọn chức năng thống kê doanh thu lợi nhuận
2.1.1. if Chọn chức năng hiển thị doanh thu lợi nhuận theo ngày
2.1.1.1. Nhân viên nhập ngày muốn xem doanh thu lợi nhuận
2.1.1.2. SYSTEM Hiển thị doanh thu lợi nhuận của ngày đã nhâp
2.1.1. end if
2.1.2. if Chọn chức năng hiển thị doanh thu lợi nhuận theo tháng
2.1.2.1. Nhân viện nhập tháng muốn xem doanh thu lợi nhuận
2.1.2.2. SYSTEM Hiển thị doanh thu lợi nhuận của tháng đã nhập
2.1.2. end if
2.1.3. if Chọn chức năng hienr thị doanh thu lợi nhuận theo năm
2.1.3.1. Nhân viên nhập năm muốn xem doanh thu lợi nhuận
29
2.1.3.2. SYSTEM Hiển thị doanh thu lợi nhuận của năm đã nhập
2.1.3. end if
2.1. end if
2.2. if Chọn chức năng hiển thị sản phẩm bán chạy
2.2.1. Hiển thị số lượng bán được của các sản phẩm từ cao đến thấp
2.2. end if
2.3.
Extension:
2.1.1.1.a. Thời gian không hợp lệ
2.1.2.1.a. Thời gian không hợp lệ
b) Chức năng của phân hệ người dung (nếu có)
30
Hình 3-9 Biểu đồ tổng quát của trang người dùng
1. Chức năng xem thông tin quần áo
 Mục đích: Cho phép khách hàng xem thông tin quần áo
 Tác nhân liên quan: Khách hàng
31
Hình 3-10 Biểu đồ phân rã của use case Xem quần áo
1. Người dùng chọn loại quần áo cần xem
2. SYSTEM Hệ thống hiển thị giao diện xem quần áo
3. SYSTEM Hệ thống lấy về danh sách quần áo theo loại đã chọn, không có quần
áo nào chuyển sang luồng phụ 2a
4. SYSTEM Hiển thị danh sách quần áo
Extension:
3.a. Không có quần áo
1. SYSTEM Hiển thị thông báo không có quần áo thuộc loại đã chọn
32
2. Chức năng quản lý đơn hàng
 Mục đích: Cho phép khách hàng quản lý đơn hàng
Hình 3-11 Biểu đồ phân rã của use case quản lý đơn hàng
3. Chức năng quản lý giỏ hàng
 Mục đích: Cho phép khách hàng quản lý giỏ hàng
33
Hình 3-12 Biểu đồ phân rã của use case quản lý giỏ hàng
 Luồng sự kiện chính
1. Người dùng yêu cầu chức năng quản lý giỏ hàng
2. SYSTEM Hệ thống kiểm tra có quần áo trong giỏ hàng hay không, nếu ko có
chuyển sang luồng phụ 2a
3. SYSTEM Hiển thị giao diện quản lý giỏ hàng
4. SYSTEM Hệ thống lấy về danh sách quần áo đã đặt hiển thị lên giao diện
Extension:
2.a. Không có quần áo trong giỏ hàng
1. SYSTEM Hệ thống hiển thị thông báo là không có quần áo trong giỏ hàng
 Luồng sự kiện của chức năng sửa số lượng quần áo trong giỏ hàng
1. Người dùng sửa số lượng quần áo
2. SYSTEM Hệ thống kiểm tra số lượng quần áo còn đủ để đặt hàng

không,nếu không chuyển sang luồng phụ 2a
3. SYSTEM Hệ thống cập nhật lại số lượng quần áo đặt hàng trong giỏ hàng
và tổng thành tiền
Extension:
34
2.a. Số lượng quần áo không đủ
1. SYSTEM Thông báo số lượng quần áo không đủ cho khách hàng
 Luồng sự kiện của chức năng xóa quần áo trong giỏ hàng
1. Người dùng chọn quần áo cần xóa
2. Yêu cầu xóa quần áo khỏi giỏ hàng
3. SYSTEM Hệ thống xóa quần áo khỏi giỏ hàng
4. Chức năng đặt hàng
 Mục đích: Cho phép khách hàng đặt hàng
Hình 3-13 Biểu đồ của use case đặt quần áo
 Luồng sự kiện
1. Người dùng vào quản lý giỏ hàng và yêu cầu chức năng đặt hàng
35
2. SYSTEM Hệ thống kiểm tra trạng thái nhập thông tin của khách hàng, nếu
chưa nhập thông tin chuyển sang luồng phụ 2a
3. SYSTEM Hiển thị giao diện đặt hàng
4. SYSTEM Lấy về danh sách các quần áo đã đặt trong giỏ hàng,hiển thị lên
giao diện
5. SYSTEM Lấy về thông tin khách hàng hiển thị lên giao diện
6. SYSTEM Lấy về các địa chỉ giao hàng của khách hàng
7. if Nếu khách chọn địa chỉ giao hàng khác
7.1. Khách nhập thông tin giao hàng mới hoặc chọn địa chỉ giao hàng
khác địa chỉ mặc định đã có
7. end if
8. Yêu cầu đặt hàng
9. SYSTEM Sinh mã đơn hàng
10. SYSTEM M Lưu thông tin đơn hàng vào hệ thống
11. if Nếu nhập thông tin giao hàng mới
11.1. SYSTEM Lưu thông tin giao hàng vào trong hệ thống
11. end if
12. SYSTEM Lưu danh sách mặt hàng trong đơn hàng vào hệ thống
Extension:
2.a. Khách hàng chưa nhập thông tin đặt hàng
1. SYSTEM Hiển thị thông báo nhập thông tin
2. SYSTEM Quay lại bước 2
36
1.2.2 Biểu đồ lớp thực thể
Hình 3-14 Biểu đồ lớp thực thể
1.2.3 Các yêu cầu phi chức năng
 Yêu cầu về giao diện: Giao diện đẹp, thân thiện, dễ dàng thao tác, phù hợp trên
nhiều loại thiết bị như Tablet, mobile, PC
 Thời gian thực thi: Khi khách hàng sử dụng hệ thống mua hàng tốc độ phản hồi
lại cho khách hàng rất nhanh không quá 2 giây
 Yêu cầu về hiệu năng
37
o Độ tin cậy: khi mua hàng khách hàng yêu cầu thanh toán hóa đơn đặt hàng
thì hệ thống sẽ tính giá trị hóa đơn chính xác đến phần nghìn
 Tính bảo mật
o Phân quyền cho người sử dụng đến từng chức năng, đảm bảo khả năng lưu
trữ dữ liệu và phục hồi hệ thống
o Bảo mật: thông tin người dùng hoặc mã hóa dữ liệu trách bị đánh cắp thông
tin
 Yêu cầu về sự logic của CSDL
o Bảng dữ liệu phải có các thuộc tính của đối tượng đó bao gồm mã, tên, ... mã
là khóa chính, khóa ngoại không trùng lặp các khóa chính giữa các bảng với
nhau, tên đối tượng không thể để trống.
 Các ràng buộc thiết kế
o Yêu cầu quá trình thiết kế phần mềm: báo cáo nghiên cứu khả thi, kế hoạch
dự án, đặt tả yêu cầu phần mềm, tài liệu thiết kế, tài liệu kiểm thử
o Ngôn ngữ thiết kế: HTML, CSS, javascript
 Bảo trì: hệ thống dễ dàng bảo trì, phát triển khi người dùng muốn thanh đổi
 Tính khả chuyển: phần mềm được chạy trên các hệ thống khác nhau như:
Mobile, Website ...
1.3 Thiết kế giao diện
 Trang người dùng có các giao diện như:

o Giao diện đăng ký, đăng nhập ứng với các hình 3-15, 3-16. Giao diện này
cho phép người dùng đăng nhập tài khoản hoặc đăng ký tài khoản mới
o Giao diện giỏ hàng mini ứng với hình 3-17. Giao diện này cho phép người
dùng có thể xem được các sản phẩm đã được thêm vào giỏ hàng
o Giao diện trang chủ ứng với các hình 3-18, 3-19, 3-20, 3-21, 3-22, 3-23
o Giao diện chi tiết sản phẩm ứng với các hình 3-24, 3-25, 3-26, 3-27, 3-28, 3-
29, 3-30, 3-31, 3-32. Giao diện này cho phép người dùng xem thông tin chi
tiết của một loại sản phẩm và xem được những phản hồi của khách hàng đã
mua sản phẩm.
o Giao diện giỏ hàng ứng với các hình 3-33, 3-34. Giao diện này cho phép
người dùng đặt mua các sản phẩm trong giỏ hàng.
38
o Giao diện tất cả sản phẩm ứng với các hình 3-35, 3-36, 3-37. Giao diện này
cho phép người dùng xem tất cả sản phẩm của trang web trừ các sản phẩm
được sale nhiều nhất ở mục outlet (hàng xả, hàng tồn kho).
o Các giao diện về trang quản trị ứng với các hình từ 3-38 đến 3-44. Các giao
diện này cho phép nhân viên cửa hàng nhập hàng, xác nhận đơn đặt hàng,
quản lý các đối tượng khách hàng nhâ viên và cho phép quản lý xem báo cáo
của cửa hàng
Hình 3-15 Giao diện đăng nhập
39
Hình 3-16 Giao diện đang ký
40
Hình 3-17 giao diện giỏ hàng mini
41
Hình 3-18 Giao diện trang chủ
42
43
44
Hình 3-24 giao diện chi tiết sản phẩm
45
46
47
48
Hình 3-33 Giao diện giỏ hàng
49
Hình 3-34 Giao diện giỏ hàng
Hình 3-35 Giao diện tất cả sản phẩm
50
51
Hình 3-38 Giao diện quản lý loại quần áo
Hình 3-39 Giao diện quản lý quần áo
52
Hình 3-40 Giao diện quản lý khách hàng
Hình 3-41 Giao diện quản lý nhân viên
53
Hình 3-42 Giao diện quản lý hóa đơn nhập
Hình 3-43 Giao diện quản lý đơn đặt hàng
54
Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận
55
CHƯƠNG 4: TRIỂN KHAI WEBSITE

1.4 Triển khai các chức năng cho phân hệ người dùng
− Có thể sử dụng chức năng đăng kí, đăng nhập tài khoản của mình
− Khách hàng có thể xem danh sách sản phẩm bản chạy nhất ở trang chủ
56
− Khách hàng có thể xem chi tiết sản phẩm bằng cách click vào một sản phẩm
nào đó
57
− Khách hàng có thể xem tất cả sản phẩm của cửa hàng ở trang tất cả sản phẩm
58
− Khách hàng vào trang giỏ hàng để đặt những mặt hàng mình muốn mua
1.4.1 Trang chủ
a) Phía font end

 Xây dựng bố cục trang Home bằng các thẻ HTML
59
Hình 45 Bố cục trang home page bằng html
− Về mặt cấu tạo html, trang chủ gồm 2 phần chính là head và body. Phần phần head
dùng cặp thẻ <head></head>. Phần head là phần cấu hình của một trang web, nơi khai báo
các thư viện, link, các thẻ SEO(<meta>)
− Phần body gồm các thẻ để tạo nên cấu trúc của trang web dùng cặp thẻ
<body></body>. Thân trang web(body) lại được chia thành 3 phần header, main, footer,
các thẻ này đều được hỗ trợ trong phiên bản HTML5. Header sử dụng cặp thẻ
<header></header>. Phần này chứa navigation bar(<nav>) và tools bar. Navigation bar là
cặp thẻ <nav></nav> bên trong có chứa thẻ <ul></ul> và tập các thẻ <li></li> đẻ định
dạng các phần tử của menu. Tuy nhiên mặc định các thẻ sẽ mặc định sắp xếp theo chiều
dọc và các phần tử trong <ul> sẽ có định dạng như margin, padding, và list-style. Như vậy
để menu hiển thị theo chiều ngang cần sử dụng display: flex và list-style: none bỏ đi các
định dạng của <ul>
− Bên trong các thẻ <li> còn có các menu con khác các menu con này cũng được định
dạng giống như trên. Tuy nhiên chúng sẽ được bổ sung thêm các hậu tố (pseudo class)
“hover” để tạo hiệu ứng xuất hiện các menu con khi trỏ vào từng item của menu cha. Khi
click chuột vào các item, trang web sẽ chuyển hướng, như vậy bên trong nội dung các thẻ
li còn chứa các cặp thẻ <a></a> và thuộc tính href chứa các đừng dẫn chuyển hướng. Các
60
thẻ <a> được định dạng mặc định là chữ màu xanh và có gạch chân, để bỏ chúng đi sử
dụng 2 thuộc tính là color và text-decoration.
− Để có form tìm kiếm, sử dụng cặp thẻ <form><form> với các thuộc tính như method,
action. Các component cho người dùng tương tác (nhập, submit) sử dụng thẻ input với
thuộc tính type=”text” và thẻ button với thuộc tính type = “submit”. Ở đây, trong trường
hợp này sử dụng phương thức get là hợp lý bởi chúng ta chưa có phần backend phía sau hỗ
trợ xử lý dữ liệu. Sau khi người dùng nhập từ khoá và nhấn nút submit, trang web sẽ được
chuyển hướng theo đường dẫn của thuộc tính action. Sau khi đã chuyển hướng, trên thanh
địa chỉ sẽ hiển thị các parameter là tên của các input có trong form. Lấy giá trị của
parameter ta sử dung đối tượng URL để thực hiện:
− Cuối cùng là phần chân được bao bới thẻ footer và các danh sách trong footer được
làm bằng cặp thẻ ul và li
 Kỹ thuật định dạng bằng CSS
 Sử dụng Javascript, Jquery để lập trình các chức năng
61
Hình 46 Javascript xử lý giao diện chức năng đăng nhập đăng ký của người
dùng
1.5 Triển khai các chức năng cho phân hệ quản trị nội dung
 Thêm sửa xóa các loại quần áo
62
 Thêm sửa xóa các sản phẩm
 Thêm sửa xóa khách hàng
63
 Thêm sửa xóa nhân viên
 Thêm hoặc xóa hóa đơn nhập hàng
64
 Tìm kiếm hoặc chuyển đổi trạng thái của đơn đặt hàng
 Thống kê báo cáo doanh thu lợi nhuận theo ngày, tuần, hoặc tháng và theo
dạng bảng hoặc biểu đồ
65
1.6 Kiểm thử và triển khai ứng dụng

1.6.1 Kiểm thử
1.6.2 Đóng gói ứng dụng
1.6.3 Triển khai ứng dụng

 Phần cứng
 Máy tính truy cập internet
 Có RAM trên 2GB
 Phần mềm
 Các trình duyệt như Cốc cốc, Google Chrome, Egde, FireFox…
66
KẾT LUẬN
1. Kết quả đạt được

- Nắm vững về HTML, CSS, Javascript, Jquery
- “Thiết kế website bán quần áo” đáp ứng những nhu cầu đề ra như:
- Đặt sản phẩm, tìm kiếm, xem thông tin sản phẩm, …
- Thiết kế được trang quản trị của website
- Dễ dàng thao tác (chỉnh sửa, thêm, xóa, tìm kiếm, …)
- Website chạy ổn, chính xác

- Giao diện thân thiện, dễ dàng tiếp cận
2. Mặt hạn chế

- Do kiến thức lập trình về phía backend còn hạn chế nên chương trình vẫn
chưa được tối ưu hoàn toàn.
- Website vẫn chưa đầy đủ tính năng, cần cập nhập thêm.
3. Hướng phát triển của đề tài

- Tối ưu website, cung cấp các tính năng tương thích dễ sử dụng đến với người
dùng.
- Tối ưu giao diện để người dùng dễ dàng sử dụng, cho người quản trị dễ dàng
quản lý các danh mục cho website.
67

1 - Trần Khánh Sơn - 10120702 - 125202 - DoAn2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1 - Trần Khánh Sơn - 10120702 - 125202 - DoAn2

Uploaded by

Copyright:

Available Formats

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

NGÀNH: CÔNG NGHỆ THÔNG TIN

SINH VIÊN: TRẦN KHÁNH SƠN

HƯNG YÊN – 2022

Nhận xét của giảng viên hướng dẫn:

LỜI CAM ĐOAN

4.1.1 Trang chủ....................................................................................................58

DANH MỤC CÁC HÌNH ẢNH

Hình 3-29 giao diện chi tiết sản phẩm..................................................................48

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.3. Giới hạn và phạm vi của đề tài

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

1. Thiết kế giao diện với HTML

 Ưu điểm, nhược điểm

- 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à hoàn toàn miễn phí.

- 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

 Các bộ chọn CSS

Tên bộ chọn Chọn gì Ví dụ

Phần tử trên trang có ID được

(Các) Thành phần trên trang

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

định, nhưng chỉ khi ở trạng

2.3. Lập trình phía front-end

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

1.2 Đặc tả yêu cầu phần mềm

Hình 3-1 Biểu đồ tổng quát trang quản trị

1. Chức năng đăng nhập

 Tác nhân liên quan: Khách hàng, Nhân viên, Admin

 Dòng sự kiện chính

1. Yê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

4. Yêu cầu đăng nhập

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

5.a. User name hoặc password không đúng

2. Chức năng quản lý loại quần áo

 Tác nhân liên quan: Nhân viên, Admin

 Biểu đồ use case

 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

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

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

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

 Dòng sự kiện của chức năng nhập 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

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

4.a. Thông tin không hợp lệ

5.a. Nhân viên hủy chức năng nhập

2. Quay lại bước 5

5.b. Hủy thao tác nhập