03 - 10121971 - Nguyễn Thị Ngọc Anh - Tuần9

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 2
THIẾT KẾ WEBSITE BÁN TRANG SỨC PANDORA
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: NGUYỄN THỊ NGỌC ANH

MÃ LỚP: 125213
HƯỚNG DẪN: TRẦN THỊ PHƯƠNG
HƯNG YÊN – 2023

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
Đồ án 2: Thiết kế website bán trang sức Pandora
LỜI CAM ĐOAN
Em xin cam đoan đồ án “Thiết kế website bán trang sức Pandora” 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ô Trần Thị Phương
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 … tháng … năm 2023
Sinh viên
Nguyễn Thị Ngọc Anh
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ô Trần Thị Phương đã 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
NHẬN XÉT.............................................................................................................2
DANH MỤC CÁC THUẬT NGỮ..........................................................................7
DANH MỤC CÁC BẢNG......................................................................................8
DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ.................................................................9
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI...........................................................10
1.1. Lý do chọn đề tài............................................................................................10
1.2. Mục tiêu của đề tài..........................................................................................10
1.2.1 Mục tiêu tổng quát........................................................................................10
1.2.2 Mục tiêu cụ thể.............................................................................................10
1.3. Giới hạn và phạm vi của đề tài.......................................................................10
1.3.1 Đối tượng nghiên cứu...................................................................................10
1.3.2 Phạm vi nghiên cứu......................................................................................11
1.4. Nội dung thực hiện.........................................................................................11
1.5. Phương pháp tiếp cận.....................................................................................11
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT....................................................................12
2.1. Quy trình phát triển phần mềm.......................................................................12
2.2. Thiết kế giao diện web với HTML, CSS........................................................12
2.3. Lập trình phía front-end..................................................................................12
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG...................................13
3.1 Đặc tả yêu cầu phần mềm................................................................................13
3.1.1 Các yêu cầu chức năng.................................................................................13
3.1.2 Biểu đồ lớp thực thể.....................................................................................13
3.1.3 Các yêu cầu phi chức năng...........................................................................13
3.2 Thiết kế giao diện............................................................................................13
CHƯƠNG 4: TRIỂN KHAI WEBSITE..............................................................14
4.1 Triển khai các chức năng cho phân hệ người dùng.........................................14
4.1.1 Trang chủ (Ví dụ)........................................................................................14
4.1.2 Trang Xem Sản phẩm (Ví dụ).....................................................................15
5
4.2 Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có)..................15
4.3 Kiểm thử và triển khai ứng dụng.....................................................................15
4.3.1 Kiểm thử ......................................................................................................15
4.3.2 Đóng gói ứng dụng.......................................................................................15
4.3.3 Triển khai ứng dụng.....................................................................................15
KẾT LUẬN...............................................................................................................16
TÀI LIỆU THAM KHẢO........................................................................................17
6
DANH MỤC CÁC THUẬT NGỮ
STT Từ viết tắt Cụm từ tiếng anh Diễn giải

1 HTML Hypertext Markup Language Ngôn ngữ đánh dấu siêu
văn bản
2 HĐB Hóa đơn bán
3 NV Nhân viên
4 KH Khách hàng
7
DANH MỤC CÁC BẢNG
BẢNG 3-1: THIẾT KẾ BẢNG SKINS LƯU TRỮ CÁC LOẠI KHUNG GIAO DIỆN............................................................... 15
BẢNG 3-2: THIẾT KẾ BẢNG LƯU TRỮ CÁC MODULE ĐƯỢC THIẾT KẾ..................................................................... 15
8
DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

HÌNH 3-1 BIỂU ĐỒ TỔNG QUÁT USE-CASE QUẢN TRỊ............................................................23
HÌNH 3-2 BIỂU ĐỒ USE-CASE QUẢN LÝ DANH MỤC..............................................................24
HÌNH 3-3 BIỂU ĐỒ USE CASE QUẢN LÝ SẢN PHẨM..............................................................26
HÌNH 3-4 BIỂU ĐỒ USE – CASE QUẢN LÝ KHÁCH HÀNG.......................................................28
HÌNH 3-5 BIỂU ĐỒ USE – CASE QUẢN LÝ NHÂN VIÊN...........................................................30
HÌNH 3-6 BIỂU ĐỒ USE – CASE QUẢN LÝ HÓA ĐƠN BÁN......................................................32
HÌNH 3-7 BIỂU ĐỒ USE-CASE TỔNG QUÁT NGƯỜI DÙNG......................................................34
HÌNH 3-8 BIỂU ĐỒ USE – CASE HIỂN THỊ THÔNG TIN SẢN PHẨM..........................................35
HÌNH 3-9 BIỂU ĐỒ USE – CASE QUẢN LÝ GIỎ HÀNG.............................................................35
HÌNH 3-10 BIỂU ĐỒ USE – CASE TÌM KIẾM SẢN PHẨM.........................................................37
HÌNH 3-11 BIỂU ĐỒ USE – CASE QUẢN LÝ TÀI KHOẢN.........................................................38
HÌNH 3-12 BIỂU ĐỒ LỚP THỰC THỂ......................................................................................43
9
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1. Lý do chọn đề tài
Trong thời đại số hóa mạnh mẽ hiện nay, việc phát triển một ứng dụng web
là một sự đầu tư quan trọng đối với doanh nghiệp. Sự phát triển của thị trường mua
sắm trực tuyến đã làm thay đổi cách mà người tiêu dùng tìm kiếm và mua sản
phẩm. Vì vậy, việc thiết kế một ứng dụng web bán trang sức đóng vai trò quan
trọng trong việc tạo ra trải nghiệm mua sắm trực tuyến tốt hơn cho khách hàng.
Ngày xưa, mỗi lần chúng ta muốn mua trang sức phải đến cửa hàng để mua.
Điều này tốn rất nhiều thời gian và công sức. Vì thế, các Website mua bán online đã
và đang mọc lên để giải quyết nhu cầu mua bán online.
Nắm bắt được xu hướng đó, em muốn tạo một Website về ngành dịch vụ này
để giúp người dùng có thể tham khảo mua trang sức một cách thuận tiện và dễ dàng.
1.2. Mục tiêu của đề tài
1.2.1 Mục tiêu tổng quát
Đề tài giới thiệu website bán trang sức Pandora là đơn vị uy tín trong lĩnh
vực mua bán trang sức, nổi tiếng trên các Web.
Trang web của hệ thống sẽ hiển thị các danh mục cho bạn như: Sản phẩm
bán chạy, các bộ sưu tập mới của hãng,....Với nhiều ý tưởng phù hợp với mọi nhu
cầu của khách hàng sẽ mang đến cho khách hàng những trải nghiệm tốt nhất về web
cũng như về trang sức của Pandora.
1.2.2 Mục tiêu cụ thể
Trang web được thiết kế sẽ có các mục để giúp người dùng dễ tìm hiểu về
các loại trang sức hiện đang có trên thị trường ngày nay cung cấp các thông tin đầy
đủ của sản phẩm.
Các dịch vụ chính Website bán trang sức Pandora bao gồm: Trang chủ,
Trang sản phẩm, Chi tiết sản phẩm, Giỏ hàng, Đặt hà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: Khách hàng có nhu cầu tìm hiểu về trang sức tại Pandora.
10
Khách thể nghiên cứu: Học sinh, sinh viên, doanh nhân, bác sĩ, người lao động, giáo
viên, ...
1.3.2 Phạm vi nghiên cứu
- Phạm vi không gian: tại các web bán trang sức online cũng như các cửa hàng
gần nơi sinh sống.
- Phạm vi thời gian: nghiên cứu được thực hiện trong khoảng thời gian từ ngày
01/10/2023 đến chưa điền
- Thực tiễn của đề tài : Có thể áp dụng vào các cửa hàng hay các doanh nghiệp
vừa và nhỏ.
1.4. Nội dung thực hiện
1.4.1 Kế hoạch thực hiện
11
NỘI THỜI GIAN (tuần)

STT
DUNG
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Lên ý tưởng
1 thực hiện đề X
tài
Tìm hiểu đề
2 X
tài
Tìm hiểu cơ
3 X X
sở lý thuyết
Khảo sát yêu
4 cầu của bài X X
toán
Phân tích
5 X X
yêu cầu
Thiết kế giao
6 X X X X X X X X X X X X
diện
Lập trình
7 phía front- X X X X X X X X X
end
Kiểm thử và
8 triển khai X
website
Chuẩn bị
9 slide báo cáo X
đồ án
Báo cáo đồ
10 X
án
12
1.4.2 Giai đoạn thực hiện
Giai đoạn 1: Thu thập tài liệu: Khảo sát tình hình thực tiễn, thu thập dữ
liệu (nhu cầu, phương pháp quản lý của các web trang sức, các phần mềm đã được
phát hành trong nước và các tài liệu liên quan,…). Tham khảo những phần mềm
đang được sử dụng phổ biến. Tìm hiểu các công cụ, ngôn ngữ lập trình, các kiến
thức cơ bản liên quan đến đề tài.
Giai đoạn 2: Nghiên cứu đề tài: Đọc hiểu các tài liệu liên quan. Nắm rõ vai
trò, chức năng của các công cụ, ngôn ngữ lập trình (Visual Studio Code, ngôn ngữ
Java, HTML,…). Tìm hiểu các web bán hàng khác, đề ra phương án giải quyết
thích hợp.
Giai đoạn 3: Xây dựng phần mềm: Dựa vào các kiến thức đã tìm hiểu và
dữ liệu đã phân tích, xây dựng phần mềm dựa vào các công cụ và ngôn ngữ lập
trình đã chọn.
Giai đoạn 4: Kiểm thử chương trình: Chạy demo, kiểm thử chương trình.
Xem xét, đánh giá hiệu quả của từng chức năng. Sửa lỗi và hoàn thiện chương trình.
Giai đoạn 5: Kết luận: Tổng kết, viết báo cáo, rút ra kết luận chung cho đề
tài.
1.5. Phương pháp tiếp cận
Phương pháp tiếp cận

o Phỏng vấn nhu cầu của khách hàng
o Tham khảo các trang mạng lớn
Sử dụng các phương pháp nghiên cứu:

o Phương pháp đọc tài liệu.
o Phương pháp nghiên cứu bằng cách tiếp cận trực tiếp với người
sử dụng thông qua việc khảo sát hệ thống cũ, đề xuất lựa chọn thế
thống mới.
o Lựa chọn công cụ lập trình và tiến hành xây dựng web thiết kế
o Microsoft Visual Studio Code 2019: dùng để thiết kế web.
13
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1. Quy trình phát triển phần mềm
Quy trình xây dựng phần mềm bao gồm tập hợp các thao tác và kết quả
tương quan sử dụng trong việc phát triển để sản xuất ra một trang web bán sức. Mỗi
một trang sức lại có đặc điểm và yêu cầu khác nhau, tuy nhiên tất cả đều cần phải
trải qua các bước sau:
Bước 1: Phân tích yêu cầu
Phân tích yêu cầu là công việc bao gồm các tác vụ xác định yêu cầu cho một
hệ thống mới hoặc được thay đổi dựa trên cơ sở là các nhu cầu trong quá trình sử
dụng. Việc phân tích yêu cầu có ý nghĩa quan trọng đối với thành công của một dự
án. Các yêu cầu phải có tính đo được, kiểm thử được, có liên quan đến các nhu cầu
hoặc cơ hội doanh nghiệp đã được xác định, và phải được định nghĩa ở mức độ chi
tiết đủ cho việc thiết kế hệ thống.
Bước 2: Thiết kế phần mềm
Là một quá trình giải quyết vấn đề và lập kế hoạch cho một giải pháp phần
mềm. Sau khi các mục đích và các đặc điểm kĩ thuật của phần mềm được giải
quyết, lập trình viên sẽ thiết kế hoặc thuê người thiết kế để phát triển một kế hoạch
cho giải pháp phần mềm. Nó bao gồm các thành phần cấp thấp, các vấn đề thuật
toán cũng như một khung nhìn kiến trúc. Thiết kế chức năng, cơ sở dữ liệu và giao
diện.
Bước 3: Lập trình máy tính
Lập trình máy tính (gọi tắt là lập trình) là kỹ thuật cài đặt một hoặc nhiều
thuật toán trừu tượng có liên quan với nhau bằng một hoặc nhiều ngôn ngữ lập trình
để tạo ra một chương trình máy tính có các thành tố nghệ thuật, khoa học, toán học,
kỹ nghệ. Các ngôn ngữ lập trình khác nhau hỗ trợ các phong cách lập trình khác
nhau. Một phần của công việc lập trình là việc lựa chọn một trong những ngôn ngữ
phù hợp nhất với các bài toán cần giải quyết. Các ngôn ngữ lập trình khác nhau đòi
hỏi lập trình viên phải xử lý các chi tiết ở mức độ khác nhau khi cài đặt các thuật
14
toán. Sự thống nhất trong các cách xử lý sẽ tạo thuận lợi cho việc lập trình và hiệu
quả của chương trình.
Bước 4: Kiểm thử phần mềm
Kiểm thử phần mềm là một cuộc kiểm tra được tiến hành để cung cấp cho
các bên liên quan thông tin về chất lượng của trang sức hoặc dịch vụ được kiểm thử.
Kiểm thử có thể cung cấp cho doanh nghiệp một quan điểm, một cách nhìn độc đáo
về phần mềm để từ đó đánh giá và thấu hiểu được những rủi ro trong quá trình triển
khai phần mềm. Tùy thuộc vào từng phương pháp, việc kiểm thử có thể được thực
hiện bất cứ lúc nào trong quá trình phát triển phần mềm. Theo truyền thống thì các
nỗ lực kiểm thử được tiến hành sau khi các yêu cầu được xác định và việc lập trình
được hoàn tất trong phương pháp phát triển “Agile” thì việc kiểm thử được tiến
hành liên tục trong suốt quá trình xây dựng phần mềm. Như vậy, mỗi một phương
pháp kiểm thử bị chi phối theo một quy trình phát triển phần mềm nhất định.
Bước 5: Triển khai phần mềm
Sau khi phần mềm được kiểm thử và khắc phục những sai sót sẽ được triển
khai đưa vào sử dụng trong thực tế. Đối với những phần mềm thiết kế theo thỏa
thuận với khách hàng, việc triển khai đơn giản chỉ là hướng dẫn cho khách hàng
cách sử dụng đạt hiệu quả cao. Với những phần mềm mang tính thông dụng, việc
triển khai còn qua các chương trình giới thiệu và đưa trang sức ra thị trường. Trong
quá trình triển khai cũng luôn đánh giá hiệu quả sử dụng của phần mềm, xem xét
những nhược điểm để lên kế hoạch thiết kế phần mềm hiệu quả hơn.
Bước 6: Bảo trì phần mềm
Bảo trì phần mềm bao gồm điều chỉnh các lỗi mà chưa được phát hiện trong
các giai đoạn trước chu kỳ sống của phần mềm, nâng cấp tính năng sử dụng và an
toàn vận hành của phần mềm. Bảo trì phần mềm có thể chiếm đến 65%-75% công
sức chu kỳ sống của một phần mềm. Quá trình phát triển phần mềm bao gồm rất
nhiều giai đoạn: thu thập yêu cầu, phân tích, xây dựng, kiểm tra, triển khai và bảo
trì phần mềm. Nhiệm vụ của giai đoạn bảo trì phần mềm là giữ cho phần mềm được
15
cập nhật khi môi trường thay đổi và yêu cầu người sử dụng thay đổi. Mỗi một giai
đoạn xây dựng phần mềm lại đòi hỏi các kỹ năng phân tích và ứng dụng kiến thức
công nghệ khác nhau. Để xây dựng phần mềm thiết thực, mang lại hiệu quả kinh tế
cao đòi hỏi con người lập trình viên phải tuân thủ các yêu cầu trong từng giai đoạn
thiết kế.
2.2. Thiết kế giao diện web với HTML, CSS
*Ngôn ngữ HTML:
HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh
dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong
những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. HTML được định nghĩa
như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần
đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn mực của Internet
do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới
nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó
bằng XHTML. Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5.
Lưu ý: HTML không phải là ngôn ngữ lập trình
Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và
xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản
– có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản
WYSIWYG phức tạp. Hypertext là cách mà các trang Web (được thiết kế bằng
HTML) được kết nối với nhau. Và như thế, đường link có trên trang Web được gọi
là Hypertext. Như tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup
Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ
(tag) để nói cho trình duyệt Web cách để cấu trúc nó để hiển thị.
Có bốn loại phần tử đánh dấu trong HTML:

- Đánh dấu có cấu trúc miêu tả mục đích của phần văn bản
- Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản bất kể
chức năng của nó là gì (ví dụ, <b>boldface</b> sẽ hiển thị đoạn văn bản
16
boldface) (Chú ý là cách dùng đánh dấu trình bày này bây giờ không còn
được khuyên dùng mà nó được thay thế bằng cách dùng CSS).
- Đánh dấu liên kết ngoài chưa phân liên kết từ trang này đến trang kia cụ thế
- Các phần tử thành phần điều khiển giúp tạo ra các đối tượng (ví dụ. các nút
và các danh sách).
Cấu trúc của một trang HTML
Một số thẻ trong HTML:
Tag Giải thích
<!DOCTYPE…> Còn gọi là thẻ khai báo một tài liệu

HTML. Thẻ này xác định loại tài liệu
phiên bản HTML.
<html> Thẻ này chứa đựng các tài liệu HTML

đầy đủ. Ở đầu trang sẽ xuất hiện các thẻ
<head></head> và than tài liệu là các
thẻ <body></body>
<head> Thẻ này đại diện cho đầu trang tài liệu
mà có thể giữ các thẻ HTML như
<title>, <link>…
17
<title> Thẻ <title> được sử dụng trong thẻ

<head> chỉ tiêu đề tài liệu
<body> Thẻ này đại diện cho than tài liệu và giữ
các thẻ như <h1>, <div>, <p>…
<h1> Thẻ tag này đại diện cho các tiêu đề

trang
<p> Thẻ này đại diện cho định dạng các đoạn
văn trong trang web.
*Ngôn ngữ CSS:
CSS (Cascading Style Sheets) là mã bạn sử dụng để tạo kiểu cho trang web
của mình, Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình. Nó
không phải là một ngôn ngữ đánh dấu - đó là một ngôn ngữ định kiểu. Điều này có
nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu
HTML.
Cơ cấu bộ quy tắc CSS:

- Selector: Tên phần tử HTML bắt đầu của bộ quy tắc. Nó chọn (các) phần tử
được tạo kiểu (trong trường hợp này là phần tử p). Để tạo kiểu cho một phần
tử khác, chỉ cần thay đổi bộ chọn.
- Declaration: Một quy tắc duy nhất như: color: red; xác định thuộc tính của
phần tử nào bạn muốn tạo kiểu.
- Properties: Những các mà bạn có thể tạo kiểu cho phần tử trong HTML.
(Trong trường hợp này, color là một thuộc tính của phần tử). Trong CSS, bạn
chọn thuộc tính nào bạn muốn tác động trong quy tắc của mình.
- Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm (:), chúng ta
có giá trị thuộc tính, mà chọn một trong số nhiều lần xuất hiện có thể cho
một thuộc tính cụ thể (color có rất nhiều giá trị).
Các bộ chọn khác:
18
Tên bộ chọn lọc Nó chọn gì Ví dụ

Bộ chọn phần tử (đôi khi Tất cả (các) thành phần P
được gọi là thẻ hoặc loại HTML của loại được chỉ Chọn<p>
bộ chọn) định
Bộ chọn ID Phần tử trên trang có ID #my-id
được chỉ định (Trên một Chọn<p id=”my-id”> or
trang HTML nhất định, <a id=”my-id”>
bạn chỉ được phép chọn
một phần tử cho 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ỉ Chọn <p class=”my-
định (lớp có thể để xuất class”> và <a class=”my-
hiện nhiều lần trên một id”>
trang)
Bộ chọn thuộc tính Các thành phần trên trang Img[src]
có thuộc tính được chọn Chọn <img
src=”myimg.png”> nhưng
không phải là <img>
Bộ chọn Pseudo-class Các thành phần được chỉ a:hover
định, nhưng chỉ khi ở chọn <a>, nhưng chỉ khi
trạng thái được chỉ định con trỏ chuột đang di
Vd: di chuột vào chuột qua liên kết
Tác dụng của CSS:

 Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ
quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ
màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội
19
dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật
nội dung.
 Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh
phải lặp lại việc định dạng cho các trang Web giống nhau.
Có 3 cách để sử dụng CSS:

 “Inline CSS”: Áp dụng trực tiếp trên một đối tượng nhất định bằng
thuộc tính style.
 “Internal CSS”: Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho
toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ)
<style> rồi đặt vào trong phần header của Web (giữa <head> và
</head>).
 “External CSS”: Đặt các thuộc tính CSS vào một tệp tin riêng biệt
(*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau.
Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã:
<link rel=”stylesheet” type=”text/css” href=”…/style.css”/>

2.3. Lập trình phía front-end
Front End (còn được biết đến như client-side) là tất cả những gì liên quan
đến điều mà người dùng nhìn thấy mỗi khi truy cập vào một trang web, bao gồm
phạm trù thiết kế và các ngôn ngữ như HTML hay CSS.
Người dùng tương tác trực tiếp với nhiều khía cạnh thuộc front-end như:
nhận biết vị trí đặt để của logo, màu sắc chủ đạo, tìm kiếm và đọc thông tin, sử
dụng các button và tính năng trên web… Mục đích cuối cùng của Front End là
nhằm mang lại một giao diện bắt mắt, giúp người dùng dễ dàng thao tác và sử dụng.
 Javascript:
JavaScript (viết tắt là JS): là một ngôn ngữ lập trình được sử dụng để tạo ra
những trang web tương tác. Nó được tích hợp và nhúng trong HTML. JavaScript
cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ có một mình
HTML. JavaScript kết hợp vào HTML, chạy trên Windows, Macintosh và các hệ
20
thống hỗ trợ Netscape khác. JavaScript hoặc JS sẽ giúp tăng tính tương tác trên
website. Script này chạy trên các trình duyệt của người dùng thay vì trên server và
thường sử dụng thư viện của bên thứ 3 nên có thể tăng thêm chức năng cho website
mà không phải code từ đầu.
 JQuery:
Jquery: jQuery là một thư viện JavaScript dùng để chuẩn hóa và đơn giản
hóa các tương tác, hiệu ứng động trên trình duyệt. Có tác dụng giúp đơn giản hóa
việc viết code JavaScript bằng cách thay thế các khía cạnh bất tiện, dài dòng và
nguyên bản của JavaScript bằng một cái gì đó tinh tế và thanh lịch hơn.
21
CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1 Phát biểu bài toán
Để đáp ứng yêu cầu người dùng, hệ thống “Website bán trang sức Pandora” gồm
phân hệ trang quản trị để quản trị nội dung và quản trị hoạt động quản lý sản phẩm
của cửa hàng. Các yêu cầu chi tiết của phân hệ quản trị như sau:
- Cho phép quản trị viên sẽ quản lý thông tin về các trang sức, nhà cung cấp,
khách hàng thân thiết, nhân viên. Khi các thông tin về sản phẩm, nhà cung
cấp, khách hàng thân thiết, nhân viên có sai sót thì hệ thống sẽ cho phép
quản trị viên có thể sửa hoặc xóa thông tin của sản phẩm, nhà cung cấp, …
- Cho phép quản trị viên quản lý các hóa đơn mua hàng của khách hàng: ghi
nhận thanh toán
3.2 Đặc tả yêu cầu phần mềm
3.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
1 Quản lý danh mục - Thêm danh mục
- Cập nhật danh mục
- Xóa danh mục
- Tìm kiếm theo danh mục
2 Quản lý trang sức -Nhập thông tin trang sức
-Cập nhật thông tin trang sức
-Xóa thông tin trang sức
-Tìm kiếm trang sức theo danh mục
3 Quản lý khách hàng -Thêm khách hàng
-Cập nhập khách hàng
-Xóa khách hàng
-Tìm kiếm khách hàng
22
4 Quản lý nhân viên -Thêm nhân viên
-Sửa nhân viên
-Xóa nhân viên
5 Quản lý hóa đơn bán -Thêm thông tin hóa đơn bán
-Sửa thông tin hóa đơn bán
-Xóa thông tin hóa đơn bán
-Tìm kiếm hóa đơn bán
 Biểu đồ usecase tổng quát:
Hình 3-1 Biểu đồ tổng quát use-case quản trị
 Các biểu đồ use-case phân rã

- Use – case quản lý danh mục
23
Hình 3-2 Biểu đồ use-case quản lý danh mục
 Dòng sự kiện chính
Hành động của tác nhân Phản ứng của hệ thống

Người dùng yêu cầu chức năng Hiện thị giao diện lựa chọn các chức năng
quản lý danh mục quản lý danh mục.
Người dùng yêu cầu chức năng Hệ thống hiển thị giao diện trang quản lý thêm
thêm danh mục danh mục
Người dùng yêu cầu chức năng Hệ thống hiện thị giao diện quản lý chức năng
sửa danh mục sửa danh mục
xóa danh mục xóa danh mục
tìm kiếm danh mục tìm kiếm danh mục
 Dòng sự kiện phụ
Dòng sự kiện phụ UC-QLDM A1: Thêm danh mục
24

Người dùng nhập mã danh mục Hệ thống kiểm tra tính hợp lệ của mã danh
mục nhập vào
Người dùng nhập tên danh mục Hệ thống kiểm tra tính hợp lệ của tên danh
mục nhập vào
Người dùng nhập mô tả danh mục
Người dùng xác nhận thêm thông Hệ thống lưu thông tin chuyên ngành thêm
tin danh mục mới vào CSDL
Dòng sự kiện phụ UC-QLDM A2: Sửa danh mục

Người dùng nhập mã loại danh mục cần Hệ thống kiểm tra tính hợp lệ của mã
sửa thông tin danh mục nhập vào
Người dùng nhập tên loại danh mục sau Hệ thống kiểm tra tính hợp lệ của tên
khi sửa thông tin danh mục nhập vào
Người dùng nhập mô tả danh mục
Người dùng xác nhận sửa thông tin danh Hệ thống lưu thông tin danh mục sau khi
mục sửa vào CSDL
Dòng sự kiện UC-QLDM A3: Xóa thông tin danh mục

Người dùng nhập mã danh mục cần Hệ thống kiểm tra tính hợp lệ của mã danh
xóa thông tin mục nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin danh mục sau khi
danh mục sửa vào CSDL
Dòng sự kiện UC-QLDM A4: Tìm kiếm thông tin danh mục

Người dùng nhập mã danh mục cần Hệ thống kiểm tra tính hợp lệ của mã danh
tìm thông tin mục nhập vào
25
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin danh mục sau khi
danh mục sửa vào CSDL
- Use – case quản lý trang sức
Hình 3-3 Biểu đồ Use case quản lý sản phẩm

Người dùng yêu cầu chức năng Hiện thị giao diện lựa chọn các chức năng quản
quản lý sản phẩm lý sản phẩm
thêm sản phẩm sản phẩm
sửa sản phẩm sửa thông tin sản phẩm
xóa sản phẩm xóa thông tin sản phẩm
tìm kiếm sản phẩm tìm kiếm thông tin sản phẩm
26
Dòng sự kiện phụ UC-QLSP A1: Thêm sản phẩm

Người dùng nhập mã sản phẩm Hệ thống kiểm tra tính hợp lệ của mã sản
phẩm nhập vào
Người dùng nhập tên sản phẩm Hệ thống kiểm tra tính hợp lệ của tên sản
phẩm nhập vào
Người dùng nhập mô tả sản phẩm
Người dùng xác nhận thêm thông tin Hệ thống lưu thông tin sản phẩm thêm mới
sản phẩm vào CSDL
Dòng sự kiện phụ UC-QLSP A2: Sửa thông tin sản phẩm

Người dùng nhập mã sản phẩm cần Hệ thống kiểm tra tính hợp lệ của mã sản
sửa phẩm nhập vào
Người dùng nhập tên sản phẩm Hệ thống kiểm tra tính hợp lệ của tên sản
phẩm nhập vào
Người dùng nhập mô tả sản phẩm
Người dùng xác nhận sửa thông tin Hệ thống lưu thông tin sản phẩm sau khi sửa
sản phẩm mới vào CSDL
Dòng sự kiện phụ UC-QLSP A3: Xóa thông tin sản phẩm

Người dùng nhập mã sản phẩm Hệ thống kiểm tra tính hợp lệ của mã sản phẩm
cần xóa nhập vào
Người dùng xác nhận xóa thông Hệ thống lưu thông tin chuyên ngành sau khi
tin sản phẩm xóa mới vào CSDL
Dòng sự kiện UC-QLSP A4: Tìm kiếm thông tin sản phẩm

Người dùng nhập mã sản phẩm cần Hệ thống kiểm tra tính hợp lệ của mã sản
tìm thông tin phẩm nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin sản phẩm sau khi
sản phẩm sửa vào CSDL
27
- Use – case quản lý khách hàng
Hình 3-4 Biểu đồ use – case quản lý khách hàng

quản lý khách hàng lý khách hàng
thêm khách hàng khách hàng
sửa khách hàng sửa thông tin khách hàng
xóa khách hàng xóa khách hàng
tìm kiếm khách hàng tìm kiếm thông tin khách hàng
Dòng sự kiện phụ UC-QLKH A1: Thêm khách hàng
28
Người dùng nhập mã khách hàng Hệ thống kiểm tra tính hợp lệ của mã khách
hàng nhập vào
Người dùng nhập tên khách hàng Hệ thống kiểm tra tính hợp lệ của tên khách
hàng nhập vào
Người dùng nhập mô tả khách hàng
Người dùng xác nhận thêm thông tin Hệ thống lưu thông tin khách hàng thêm
khách hàng mới vào CSDL
Dòng sự kiện phụ UC-QLKH A2: Sửa thông tin khách hàng

cần sửa hàng nhập vào
Người dùng nhập tên khách hàng Hệ thống kiểm tra tính hợp lệ của tên khách
hàng nhập vào
Người dùng nhập mô tả khách
hàng
Người dùng xác nhận sửa thông tin Hệ thống lưu thông tin khách hàng sau khi
khách hàng sửa mới vào CSDL
Dòng sự kiện phụ UC-QLKH A3: Xóa thông tin khách hàng

cần xóa hàng nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin khách hàng sau khi
khách hàng xóa mới vào CSDL
Dòng sự kiện UC-QLKH A4: Tìm kiếm thông tin khách hàng

Người dùng nhập mã khách hàng cần Hệ thống kiểm tra tính hợp lệ của mã khách
tìm thông tin hàng nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin khách hàng sau khi
khách hàng sửa vào CSDL
- Use – case quản lý nhân viên
29
Hình 3-5 Biểu đồ use – case quản lý nhân viên

quản lý nhân viên lý nhân viên
thêm nhân viên nhân viên
sửa nhân viên sửa thông tin nhân viên
xóa nhân viên xóa nhân viên
tìm kiếm nhân viên tìm kiếm thông tin nhân viên
Dòng sự kiện phụ UC-QLNV A1: Thêm nhân viên

Người dùng nhập mã nhân viên Hệ thống kiểm tra tính hợp lệ của mã nhân
viên nhập vào
30
Người dùng nhập tên nhân viên Hệ thống kiểm tra tính hợp lệ của tên nhân
viên nhập vào
Người dùng nhập mô tả nhân viên
Người dùng xác nhận thêm thông tin Hệ thống lưu thông tin nhân viên thêm mới
nhân viên vào CSDL
Dòng sự kiện phụ UC-QLNV A2: Sửa thông tin nhân viên

cần sửa viên nhập vào
Người dùng nhập tên nhân viên Hệ thống kiểm tra tính hợp lệ của nhân viên
nhập vào
Người dùng nhập mô tả nhân viên
Người dùng xác nhận sửa thông tin Hệ thống lưu thông tin nhân viên sau khi sửa
nhân viên mới vào CSDL
Dòng sự kiện phụ UC-QLNV A3: Xóa thông tin nhân viên

cần xóa viên nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin nhân viên sau khi xóa
nhân viên mới vào CSDL
Dòng sự kiện UC-QLNV A4: Tìm kiếm thông tin nhân viên

Người dùng nhập mã nhân viên cần Hệ thống kiểm tra tính hợp lệ của mã nhân
tìm thông tin viên nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin nhân viên sau khi
nhân viên sửa vào CSDL
- Use – case quản lý hóa đơn bán
31
Hình 3-6 Biểu đồ use – case quản lý hóa đơn bán

quản lý hóa đơn bán lý hóa đơn bán
thêm hóa đơn bán hóa đơn bán
sửa hóa đơn bán sửa thông tin hóa đơn bán
xóa hóa đơn bán xóa hóa đơn bán
tìm kiếm hóa đơn bán tìm kiếm thông tin hóa đơn bán
Dòng sự kiện phụ UC-QLHĐB A1: Thêm hóa đơn bán

Người dùng nhập mã hóa đơn bán Hệ thống kiểm tra tính hợp lệ của mã hóa
đơn bán nhập vào
32
Người dùng nhập tên hóa đơn bán Hệ thống kiểm tra tính hợp lệ của tên hóa
đơn nhập bán vào
Người dùng nhập mô tả hóa đơn bán
Người dùng xác nhận thêm thông tin Hệ thống lưu thông tin hóa đơn bán thêm
hóa đơn bán mới vào CSDL
Dòng sự kiện phụ UC-QLHĐB A2: Sửa thông tin hóa đơn bán

Người dùng nhập mã hóa đơn bán Hệ thống kiểm tra tính hợp lệ của mã hóa đơn
cần sửa bán nhập vào
Người dùng nhập tên hóa đơn bán Hệ thống kiểm tra tính hợp lệ của hóa đơn bán
vào
Người dùng nhập mô tả hóa đơn
bán
Người dùng xác nhận sửa thông tin Hệ thống lưu thông tin hóa đơn bán sau khi
hóa đơn bán sửa mới vào CSDL
Dòng sự kiện phụ UC-QLHĐB A3: Xóa thông tin hóa đơn bán

Người dùng nhập mã hóa đơn bán Hệ thống kiểm tra tính hợp lệ của mã hóa đơn
cần xóa bán nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin hóa đơn bán sau khi
hóa đơn bán xóa mới vào CSDL
Dòng sự kiện UC-QLHĐB A4: Tìm kiếm thông tin hóa đơn bán

Người dùng nhập mã HĐB cần tìm Hệ thống kiểm tra tính hợp lệ của HĐB
thông tin nhập vào
Người dùng xác nhận xóa thông tin Hệ thống lưu thông tin HĐB sau khi sửa
HĐB vào CSDL
33
b) Chức năng của phân hệ người dùng
1 Hiển thị sản phẩm -Hiển thị sản phẩm trong trang web
2 Quản lý giỏ hàng -Xem thông tin giỏ hàng
-Sửa thông tin giỏ hàng
-Xóa thông tin giỏ hàng
3 Tìm kiếm sản phẩm -Tìm kiếm sản phẩm theo tên
-Tìm kiếm sản phẩm theo mã
4 Quản lý tài khoản -Đăng nhập tài khoản
-Đăng kí tài khoản
-Lấy lại tài khoản
 Biểu đồ use – case tổng quát
Hình 3-7 Biểu đồ use-case tổng quát người dùng
- Use – case hiển thị thông tin sản phẩm
34
Hình 3-8 Biểu đồ use – case hiển thị thông tin sản phẩm
 Luồng sự kiện
o Hiển thị thông tin sản phẩm:
1. Khách hàng truy cập vào trang web
2. System hệ thống hiển thị tất cả sản phẩm của cửa hàng
- Use – case quản lý giỏ hàng
Hình 3-9 Biểu đồ use – case quản lý giỏ hàng
o Xem thông tin giỏ hàng
1. Từ giao diện người dùng chọn Giỏ hàng.

2. System Hệ thống hiển thị thông tin sản phẩm.
35
3.System Hệ thống kiểm tra thông tin sản phẩm. Nếu không có sản phẩm trong giỏ
hàng chuyển sang luồng 3a
4.Hệ thống trả về kết quả cần xem
Extension
3a Khách hàng không muốn xem thông tin sản phẩm trong giỏ hàng
1. Người dùng chọn nút Bỏ qua
2. Người dùng không xem thông tin sản phẩm nữa, use case kết thúc.
o Sửa thông tin giỏ hàng:
1.Từ giao diện người dùng chọn Sửa.

2. System hệ thống hiển thị giao diện sửa. Nếu thông tin cần sửa sai chuyển sang
luồng 2a
3. Người dùng nhập thông tin sản phẩm cần sửa và chọn nút Đồng ý.
4 System kiểm tra thông tin cần sửa.
5.Hệ thống trả về kết quả thông tin sản phẩm đã sửa.
Extension
2a. Người dùng nhập sai thông tin cần sửa
1.System hệ thống không hiển thị thông tin sản phẩm.
2.System hiển thị thông báo” Sửa thông tin không thành công”
o Xóa thông tin giỏ hàng
1. Người dùng chọn sản phẩm cần xóa

2. Người dùng chọn nút Xóa
3. System Hệ thống yêu xác thực lại có thật sự muốn xóa không. Nếu người dùng
không muốn xóa thông tin sản phẩm chuyển sang luồng 3a
4. Người dùng xác nhận là muốn xóa.
5. Loại sản phẩm được chọn xóa khỏi hệ thống, use case Xóa kết thúc
Extension
3a. Người dùng không muốn xóa thông tin sản phẩm.
1. Người dùng xác nhận là không muốn xóa
36
2. Use case Xóa thông tin sản phẩm kết thúc.
- Use – case tìm kiếm sản phẩm
Hình 3-10 Biểu đồ use – case tìm kiếm sản phẩm
o Tìm kiếm sản phẩm theo tên
1. Từ giao diện người dùng chọn Tìm kiếm.

2. System Hệ thống hiển thị giao diện Tìm kiếm. Nếu người dùng nhập sai thông tin
sản phẩm chuyển sang luồng 2a
3. Người dùng nhập thông tin sản phẩm theo tên cần tìm kiếm và chọn nút Đồng ý.
4. Hệ thống trả về kết quả tìm kiếm.
Extension
2a. Người dùng nhập sai thông tin của sản phẩm cần tìm
1. System Hệ thống không hiển thị thông tin sản phẩm.
2. System hiển thị thông báo” không tìm thấy sản phẩm”
o Tìm kiếm sản phẩm theo mã

1. Từ giao diện người dùng chọn Tìm kiếm.
2. System Hệ thống hiển thị giao diện Tìm kiếm. Nếu người dùng nhập sai thông tin
sản phẩm chuyển sang luồng 2a
37
3. Người dùng nhập thông tin sản phẩm cần tìm kiếm theo mã và chọn nút Đồng ý.
4. Hệ thống trả về kết quả tìm kiếm.
Extension
2a. Người dùng nhập sai thông tin của sản phẩm cần tìm
1. System Hệ thống không hiển thị thông tin sản phẩm.
2. System hiển thị thông báo” không tìm thấy sản phẩm”
- Use – case quản lý tài khoản
Hình 3-11 Biểu đồ use – case quản lý tài khoản
o Đăng nhập tài khản
1. Yêu cầu chức năng đăng nhập

2. System hiển thị giao diện đăng nhập
3. Nhập user name
4. Nhập password
5. Yêu cầu đăng nhập tài khoản
38
6. System yêu cầu kiểm tra thông tin tài khoản. Nếu tài khoản không có chuyển sang
luồng phụ 6a
Extension
6a. đăng nhập không thành công
1. Hệ thống kiểm tra số lần đăng nhập, nếu đăng nhập quá 3 lần chuyển sang luồng
phụ
6b. Số lần đăng nhập sai quá 3 lần
1. System hệ thống hiển thị thông báo “Số lần đăng nhập sai quá 3 lần” bạn không
có quyền đăng nhập.
2. System Hệ thống vô hiệu hóa chức năng đăng nhập
o Đăng kí tài khoản
1. Yêu cầu chức năng đăng ký

2. System hiển thị giao diện đăng ký
3. Nhập user name
4. Nhập password
5. Yêu cầu đăng ký tài khoản
6. System yêu cầu kiểm tra thông tin tài khoản. Nếu tài khoản đăng ký không thành
công chuyển sang luồng phụ 6a
Extension
6a. đăng ký không thành công
1. Hệ thống kiểm tra số lần đăng ký, nếu đăng ký quá 3 lần chuyển sang luồng phụ
6b.
6b. Số lần đăng ký sai quá 3 lần
1. System hệ thống hiển thị thông báo “Số lần đăng nhập sai quá 3 lần” bạn không
có quyền đăng ký
2. System Hệ thống vô hiệu hóa chức năng đăng ký
o Lấy lại tài khoản
1. Yêu cầu chức năng quên tài khoản
39
2. System hiển thị giao diện đăng nhập lại

3. Nhập user name
4. Nhập password
5. Yêu cầu đăng nhập tài khoản
6. System yêu cầu kiểm tra thông tin tài khoản. Nếu tài khoản sai không lấy lại được
chuyển sang luồng phụ 6a
Extension
6a. Đăng nhập tài khoản sai
1. Hệ thống kiểm tra số lần đăng nhập, nếu đăng nhập quá 3 lần chuyển sang luồng
phụ 6b.
6b. Số lần đăng nhập sai quá 3 lần
1.System hệ thống hiển thị thông báo “Số lần đăng nhập sai quá 3 lần” bạn không
có quyền đăng nhập.
2. System Hệ thống vô hiệu hóa chức năng đăng nhập
3.2.2 Biểu đồ lớp thực thể

<phần này mô tả các lớp thực thể và biểu đồ lớp thực thể của hệ thống>
1. Danh sách các lớp và quan hệ
STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú
1 SanPham Lớp Cho phép quản trang sức bao gồm: thêm, cập
nhật, xóa và tìm kiếm thông tin trang sức.
2 DanhMuc Lớp Cho phép quản lý loại danh mục bao gồm: thêm,
cập nhật, xóa và tìm kiếm thông tin danh mục.
4 HoaDonBan Lớp Khi cửa hàng bán trang sức, đơn hàng sẽ được
lưu trên hệ thống.
5 ChiTietHoaDonBan Hiển thị chi tiết hóa đơn bán.
6 KhachHang Lớp Cho phép khách hàng tìm kiếm trang sức, xem
thông tin trang sức.
6 NhanVien Lớp Cho phép khách hàng tìm kiếm trang sức, xem
thông tin trang sức, bán trang sức cho khách
40
hàng.
7 TaiKhoan Lớp Chức năng giúp người quản trị quản lý tài khoản.
8 LoaiTaiKhoan Lớp Chức năng giúp phân vùng tài khoản cho admin,
user và khách hàng.
2. Mô tả chi tiết từng lớp đối tượng
- Cấu trúc dữ liệu lớp sản phẩm

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa/ghi chú
1 MaSanPham string Not Null Mã sản phẩm
2 MaDanhMuc string Not Null Mã danh mục
3 TenSanPham string Null Tên sản phẩm
4 SoLuong string Null Số lượng
5 GiaBan string Null Giá bán
- Cấu trúc dữ liệu lớp danh mục

1 MaDanhMuc string Not Null Mã danh mục
2 TenDanhMuc string Null Tên danh mục
- Cấu trúc dữ liệu hóa đơn bán

1 MaHoaDon string Not Null Mã hóa đơn bán
2 NgayBan Datetime Null Ngày bán
3 MaSanPham sring Null Mã sản phẩm
4 ThanhTien Float Null Thành tiền
- Cấu trúc dữ liệu chi tiết hóa đơn bán

41
1 MaChiTietHoaDon Int Not Null Mã chi tiết HĐB

2 MaSanPham string Not Null Mã sản phẩm
3 NgayBan Datetime Null Ngày bán
4 SoLuong int >0 Số lượng
5 GiaBan float >0 Đơn giá
6 TongTien Float >0 Tổng tiền
- Cấu trúc loại tài khoản

1 MaLaiTaiKhoan Int NotNull Mã tài khoản
1 TenLoaiTK string Null Tên loại tài khoản
2 MoTa string Null Mô tả
- Cấu trúc chi tiết tài khoản

1 MaTaiKhoan Int NotNull Mã tài khoản
1 TenTaiKhoan string Null Tên tài khoản
2 MatKhau string Null Mật khẩu
- Cấu trúc khách hàng

1 MaKhachHang string Not Null Mã khách hàng
2 TenKhachHang int Null Tên khách hàng
3 DiaChi int Null Địa chỉ
4 SoSanPham int Length=10 Số sản phẩm
5 Email String Null Địa chỉ email
6 TrangThai String Not null Trạng thái khách hàng
7 TenTaiKhoan String Not null Tên tài khoản
42
Biểu đồ lớp thực thể của hệ thống:
Hình 3-12 Biểu đồ lớp thực thể
3.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 với người dùng và các chức
năng dễ thao tác
- Độ tin cậy: Đảm bảo chức năng đặt hàng thanh toán được và không có lỗi
- Tính khả dụng: Phù hợp với nhu cầu người sử dụng, dễ dàng sử dụng.
- Bảo mật: Thông tin người dùng phải được bảo mật chặt chẽ. Không được
chia sẻ thông tin khách hàng cho bất kì ai
- Bảo trì: Hệ thống có thể dễ dàng bảo trì được khi yêu cầu người dùng thay
đổi
43
- Tính khả chuyển: Hệ thống chạy được trên môi trường khác nhau như
mobile, tablet và desktop.
3.3 Thiết kế giao diện
a, Giao diện người dùng
- Giao diện trang chủ: Giao diện trang chủ cho phép người dùng xem được
thông tin các sản phẩm. Các sản phẩm, kích thước được xắp xếp hài hòa sao cho
người dùng có thể sử dụng dễ dàng.
Hình 3-13 Giao diện header trang chủ
44
Hình 3-14 Giao diện content trang chủ
45
Hình 3-15 Giao diện footer trang chủ
Giao diện trang bộ sưu tập mới: Giao diện trang bộ sưu tập mới cho phép người
dùng xem được thông tin các loại phụ kiện theo yêu cầu. Các sản phẩm, kích thước
đưuọc sắp xếp hài hòa, cùng với các chức năng thuận tiện cho người dùng dễ dàng
thao tác.
Hình 3.3 1 Giao diện phần header trang bộ sưu tập mới
46
Hình 3.3 2 Giao diện phần content trang bộ sưu tập mới
Hình 3.3 3 Giao diện phần footer trang bộ sưu tập mới
Giao diện trang tuyển dụng: Giao diện tuyển dụng cho phép người dùng lựa chọn
thông tin tuyển dụng theo yêu cầu.
47
Hình 3.3 4 Giao diện trang tuyển dụng
Giao diện giỏ hàng: Giao diện giỏ hàng cho phép người dùng xem được thông tin
các sản phẩm mà khách hàng đã chọn, những thông tin liên quan đến xem phẩm đó
như: tên sản phẩm, số lượng, đơn giá, …
Hình 3.3 5 Giao diện giỏ hàng
48
Giao diện đăng kí: Giao diện đăng kí cho phép người dùng có thể đăng kí tài khoản
để truy cập vào website.
Hình 3.3 6 Giao diện đăng kí
Giao diện đăng nhập: Giao diện đăng nhập giúp người dùng dễ dàng đăng nhập vào
website để có thể mua hàng.
Hình 3.3 11 Giao diện đăng nhập
49
Giao diện chi tiết sản phẩm: Giao diện chi tiết sản phẩm cho phép người dùng xem
được thông tin chi tiết về sản phẩm mà khách hàng lựa chọn như: tên sản phẩm, giá
sản phẩm, mô tả sản phẩm,…
Hình 3.3 7 Giao diện chi tiết sản phẩm
Hình 3.3 8 Giao diện chi tiết sản phẩm
b,Giao diện người quản lý
50
Giao diện tổng quan trang quản trị hiển thị những danh mục, chức năng cho người
quản trị. Đồng thời thống kê doanh thu, số đơn hàng … của cửa hàng theo ngày,
tháng, năm.
Hình 3.3 9 Giao diện trang chủ trang quản trị
Giao diện quản lý loại sản phẩm, giúp người quản trị có thể thêm thông tin của loại
sản phẩm, và phân loại tìm kiếm loại sản phẩm.
51
Hình 3.3 10 Giao diện quản lý loại sản phẩm
Giao diện quản lý sản phẩm, giúp người quản trị có thể thêm thông tin sản phẩm,
sửa, xóa thông tin sản phẩm
Hình 3.3 11 Giao diện quản lý sản phẩm
Giao diện quản lý nhà cung cấp, giúp người quản trị có thể thêm, sửa, xóa thông tin
nhà cung cấp
52
Hình 3.3 12 Giao diện quản lý nhà cung cấp
Giao diện quản lý thông tin khách hàng, giúp người quản trị có thể thêm, sửa, xóa
thông tin khách hàng
Hình 3.3 13 Giao diện quản lý khách hàng
53
Giao diện quản lý thông tin hóa đơn nhập, giúp người quản trị có thể thêm, sửa, xóa
thông tin hóa đơn nhập
Hình 3.3 14 Giao diện quản lý hóa đơn nhập
Giao diện quản lý thông tin hóa đơn bán, giúp người quản trị có thể thêm, sửa, xóa
thông tin hóa đơn bán
54
Hình 3.3 15 Giao diện quản lý hóa đơn bán
55
CHƯƠNG 4: TRIỂN KHAI WEBSITE

4.1 Triển khai các chức năng cho phân hệ người dùng
<Phần này trình bày các kết quả đã được triển khai cài đặt cho phân hệ người dùng
– 3 chức năng tiêu biểu>
Để xây dựng được các chức năng của trang người dùng theo thiết kế đã được
trình bày ở chương 3, đồ án đã sử dụng HTML, CSS, và JavaScript, Jquery,
AngularJS để thiết kế giao diện và thao tác dữ liệu các trang theo yêu cầu. Tiếp
theo, đồ án sẽ trình bày các kỹ thuật được sử dụng để xây dựng các trang.
4.1.1 Trang chủ (Ví dụ)
a) Phía font end
 Xây dựng bố cục trang Home bằng các thẻ HTML
<Phần này trình bày cách thức sử dụng các thẻ HTML để phân chia được bố
cục trang Chủ>.
 Kỹ thuật định dạng bằng CSS
<Phần này trình bày kỹ thuật sử dụng CSS để định các phần của trang Home
hiển thị theo bố cục đã thiết kế>.
 Sử dụng Javascript, Jquery, AngularJS để lập trình các chức năng
<Phần này trình bày thuật toán hoặc các bước xử lý để có được các chức
năng theo yêu cầu, ví dụ chức năng chọn mua hàng, tìm kiếm, ….>
b) Phía backend
 Triển khai các lớp tầng DataAccess
<Phần này trình bày cách thức xử lý để thực hiện được các thao tác trên cơ
sở dữ liệu để phục vụ các xử lý ở trang chủ>
 Triển khai lớp tầng Bussiness
<Phần này trình bày về cách thức cài đặt lớp ở tầng Bussiness để đáp ứng
được các xử lý được gọi ở tầng Controller>
 Triển khai lớp tầng Controller
<Phần này trình bày về cách thức cài đặt các Action để đáp ứng được các xử
lý được gọi ở tầng View cho trang chủ>
56
4.1.2 Trang Xem Sản phẩm (Ví dụ)

4.2 Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có)
<Phần này trình bày các kết quả đã được triển khai cho phân hệ trang quản trị>
4.3 Kiểm thử và triển khai ứng dụng
4.3.1 Kiểm thử
<Thực thi và kiểm tra, sửa lỗi tất cả các chức năng đáp ứng yêu cầu): Xây dựng
và mô tả dữ liệu/hành động cho input và kết quả cho Output.>
4.3.2 Đóng gói ứng dụng
<Trình bày và minh chứng quy trình đóng gói sản phẩm của đồ án>
4.3.3 Triển khai ứng dụng
<Trình bày điều kiện, môi trường triển khai ứng dụng: phần cứng, phần mềm>
57
KẾT LUẬN
- Trình bày kết quả đạt được: Kiến thức, sản phẩm
- Những hạn chế của đề tài: Sản phẩm (ví dụ: chức năng còn thiếu, chưa hoàn
thiện….); Kỹ năng (phân tích thiết kế hệ thống, lập trình…)
- Hướng phát triển của đề tài: (Giải quyết những hạn chế của đề tài)
58
TÀI LIỆU THAM KHẢO
[1] Tên tác giả (năm XB), Tên sách, NXB, Nơi XB
[2] ………..
59

03 - 10121971 - Nguyễn Thị Ngọc Anh - Tuần9

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

03 - 10121971 - Nguyễn Thị Ngọc Anh - Tuần9

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: NGUYỄN THỊ NGỌC ANH

HƯNG YÊN – 2023

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

LỜI CAM ĐOAN

Nguyễn Thị Ngọc Anh

DANH MỤC CÁC THUẬT NGỮ

STT Từ viết tắt Cụm từ tiếng anh Diễn giải

DANH MỤC CÁC BẢNG

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

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

1.4.1 Kế hoạch thực hiện

NỘI THỜI GIAN (tuần)

1.4.2 Giai đoạn thực hiện

Phương pháp tiếp cận

Sử dụng các phương pháp nghiên cứu:

Bước 1: Phân tích yêu cầu

Bước 2: Thiết kế phần mềm

Bước 3: Lập trình máy tính

Bước 4: Kiểm thử phần mềm

Bước 5: Triển khai phần mềm

Bước 6: Bảo trì phần mềm

*Ngôn ngữ HTML:

Có bốn loại phần tử đánh dấu trong HTML:

Cấu trúc của một trang HTML

Một số thẻ trong HTML:

Tag Giải thích

<!DOCTYPE…> Còn gọi là thẻ khai báo một tài liệu

<html> Thẻ này chứa đựng các tài liệu HTML

<title> Thẻ <title> được sử dụng trong thẻ

<h1> Thẻ tag này đại diện cho các tiêu đề

*Ngôn ngữ CSS:

Cơ cấu bộ quy tắc CSS:

Tên bộ chọn lọc Nó chọn gì Ví dụ

Tác dụng của CSS:

Có 3 cách để sử dụng CSS:

<link rel=”stylesheet” type=”text/css” href=”…/style.css”/>

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

1 Quản lý danh mục - Thêm danh mục

- Cập nhật danh mục

- Xóa danh mục

- Tìm kiếm theo danh mục

2 Quản lý trang sức -Nhập thông tin trang sức

-Cập nhật thông tin trang sức

-Xóa thông tin trang sức

-Tìm kiếm trang sức theo danh mục

3 Quản lý khách hàng -Thêm khách hàng

-Cập nhập khách hàng

-Xóa khách hàng

-Tìm kiếm khách hàng

4 Quản lý nhân viên -Thêm nhân viên

-Sửa nhân viên

-Xóa nhân viên

-Sửa thông tin hóa đơn bán

-Xóa thông tin hóa đơn bán

-Tìm kiếm hóa đơn bán

 Biểu đồ usecase tổng quát:

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

 Các biểu đồ use-case phân rã

Hình 3-2 Biểu đồ use-case quản lý danh mục

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