ĐỒ ÁN LẬP TRÌNH WEB NÂNG CAO ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

lOMoARcPSD|15978022

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

ĐỒ ÁN LẬP TRÌNH WEB NÂNG CAO
ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ
Sinh viên thực hiện

: NGUYỄN VŨ THÀNH NAM
NGUYỄN ĐỒNG QUÂN
Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH
Ngành

: CÔNG NGHỆ THƠNG TIN

Chun ngành

: HTTMĐT

Lớp

: D14HTTMĐT1

Khóa

: 2019-2024

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

lOMoARcPSD|15978022

PHIẾU CHẤM ĐIỂM
ST
T

Họ và tên sinh viên

Nội dung thực hiện

1

Nguyễn Vũ Thành
Nam

2

Nguyễn Đồng Quân Chương 1

Họ và tên giảng viên
Giảng viên chấm 1:

Giảng viên chấm 2:

Điểm

Chương 2

Chữ ký

Ghi chú

Chữ
ký


lOMoARcPSD|15978022

LỜI CẢM ƠN
Trong lời đầu tiên của đồ án “Xây dựng website bán đồ cơng nghệ”,
nhóm chúng em muốn gửi những lời cám ơn và biết ơn chân thành nhất của
mình tới tất cả những người đã hỗ trợ, giúp đỡ chúng em về kiến thức và tinh
thần trong quá trình thực hiện bài làm.
Nhóm em xin chân thành gửi lời cảm ơn tới các thầy cô giáo trong
Trường Đại học Điện Lực nói chung và các thầy cơ giáo trong Khoa Cơng nghệ
thơng tin nói riêng đã tận tình giảng dạy, truyền đạt cho em những kiến thức
cũng như kinh nghiệm quý báu trong suốt quá trình học tập.
Đặc biệt, em xin gửi lời cảm ơn đến giảng viên hướng dẫn Phương Văn
Cảnh giảng viên Khoa Công nghệ thông tin- Trường Đại học Điện Lực. Thầy đã
tận tình theo sát giúp đỡ, trực tiếp chỉ bảo, hướng dẫn trong suốt q trình
nghiên cứu và học tập của nhóm em. Trong thời gian học tập với thầy, nhóm em
khơng những tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập được tinh
thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu quả. Đây là những
điều rất cần thiết cho chúng em trong quá trình học tập và cơng tác sau này.
Do thời gian thực hiện có hạn kiến thức còn nhiều hạn chế nên bài làm
của nhóm chúng em chắc chắn khơng tránh khỏi những thiếu sót nhất định.
Chúng em rất mong nhận được ý kiến đóng góp của thầy cơ giáo và các bạn để
chúng em có thêm kinh nghiệm và tiếp tục hồn thiện đồ án của mình.
Chúng em xin chân thành cảm ơn!

lOMoARcPSD|15978022

MỤC LỤC
LỜI MỞ ĐẦU.....................................................................................................1
CHƯƠNG I. KHẢO SÁT VÀ XÁC LẬP DỰ ÁN..........................................2
1.1. Khảo sát dự án..........................................................................................2
1.2. Xác lập dự án............................................................................................2
1.2.1. Mục đích.............................................................................................2
1.2.2. Các bước tiến hàn khảo sát...............................................................2
1.2.3. Khảo sát, tìm hiểu hệ thống hiện tại.................................................2
1.2.4. Phác họa giải pháp và cân nhắc tính khả thi...................................3
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG...............................4
2.1. Phân tích hệ thống....................................................................................4
2.1.1. Các chức năng của hệ thống.............................................................4
2.1.2.Các tác nhân của hệ thống.................................................................4
2.2. Thiết kế hệ thống......................................................................................4
2.2.1. UseCase Diagram...............................................................................5
2.2.2. Sequence Diagram...........................................................................6
2.2.3. Class Diagram..................................................................................10
CHƯƠNG 3: GIAO DIỆN TRANG WEB......................................................11
3.1. Giao diện webuser..................................................................................11
3.1.1. Giao diện trang chủ.........................................................................11
3.1.2. Giao diện theo danh mục sản phẩm...............................................12
3.1.3. Giao diện chi tiết sản phẩm.............................................................13
3.1.4. Giao diện đăng ký khách hàng.......................................................14
3.1.5. Giao diện đăng nhập khách hàng...................................................14
3.1.6. Giao diện giỏ hàng...........................................................................15
3.2. Giao diện trang quản trị........................................................................16

3.2.1. Giao diện đăng nhập........................................................................16
3.2.2. Giao diện thống kê doanh thu.........................................................16
3.2.3. Giao diện quản lý danh mục sản phẩm..........................................17
3.2.4. Giao diện quản lý sản phẩm............................................................17
3.2.5. Giao diện quản lý bài viết................................................................18
3.2.6. Giao diện danh sách đơn hàng........................................................18


lOMoARcPSD|15978022

KẾT LUẬN........................................................................................................19
TÀI LIỆU THAM KHẢO................................................................................20

DANH MỤC HÌNH ẢN


lOMoARcPSD|15978022

Hình 2.1. Biểu đồ Usecase Tổng quát................................................................5
Hình 2.2. Biểu đồ Sequence Diagram - Đăng nhập.........................................6
Hình 2.3. Biểu đồ Sequence Diagram – Quản lý sản phẩm............................7
Hình 2.4. Biểu đồ Sequence Diagram – Quản lý đơn hàng.............................8
Hình 2.5. Biểu đồ Sequence Diagram – Quản lý bài viết................................9
Hình 2.6. Class Diagram..................................................................................10
Hình 3.1. Giao diện trang chủ..........................................................................11
Hình 3.2. Giao diện theo danh mục sản phẩm...............................................12
Hình 3.3. Giao diện chi tiết sản phẩm.............................................................13
Hình 3.4. Giao diện đăng ký khách hàng........................................................14
Hình 3.5. Giao diện đăng nhập khách hàng...................................................14
Hình 3.6. Giao diện trang giỏ hàng.................................................................15

Hình 3.7. Giao diện đăng nhập trang quản trị...............................................16
Hình 3.8. Giao diện thống kê doanh thu.........................................................16
Hình 3.9. Giao diện quản lý danh mục sản phẩm..........................................17
Hình 3.10. Quản diện quản lý sản phẩm........................................................17
Hình 3.11. Giao diện quản lý bài viết..............................................................18
Hình 3.12. Giao diện danh sách đơn hàng......................................................18


lOMoARcPSD|15978022

LỜI MỞ ĐẦU
Trong sự phát triển mạnh mẽ của khoa học cơng nghệ thế giới, có thể nói
rằng ngành cơng nghệ thông tin phát triển với tốc độ nhanh nhất và ngày càng
thể hiện được vai trò to lớn, hết sức quan trọng đối với toàn bộ đời sống con
người. Hầu hết các lĩnh vực trong xã hội đều ứng dụng công nghệ thông tin,
nhiều phần mềm đã mang lại hiệu quả không thể phụ nhận. Song thực tiễn luôn
đặt ra những u cầu mới địi hỏi ngành cơng nghệ thông tin không ngừng phát
triển để thỏa mãn và đáp ứng những thay đổi của cuộc sống.
Ngày nay, ứng dụng cơng nghệ thơng tin và việc tin học hóa được xem là
một trong những yếu tố mang tính quyết định trong hoạt động của các chính
phủ, tổ chức, cũng như của các cơng ty; nó đóng vai trị hết sức quan trọng, có
thể tạo ra những bước đột phá mạnh mẽ. Việc xây dựng các trang web để phục
vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày
nay, khơng lấy gì làm xa lạ. Một người bất kì có thể trở thành chủ của một
website giới thiệu về bất cứ gì anh ta quan tâm: một website giới thiệu về bản
thân và gia đình anh ta, hay là một website trình bày các bộ sưu tập hình ảnh các
loại xe hơi mà anh ta thích chẳng hạn.
Hoạt động của một cơng ty thời trang có quy mơ khá lớn sẽ càng được
tăng cường và mở rộng nếu xây dựng được một website có khả năng giới thiệu
được cơng ty và cho phép quản lý các sản phẩm một cách nhanh chóng và chính

xác nhất. Vì những lí do trên nhóm chúng em chọn đề tài cho đồ án là “Xây
dựng website bán đồ công nghệ”.

1


lOMoARcPSD|15978022

CHƯƠNG I. KHẢO SÁT VÀ XÁC LẬP DỰ ÁN
1.1. Khảo sát dự án.
Việc buôn bán gấu bông ngày càng trở nên đa dạng với nhiều cách thức bán
hàng khác nhau. Hiện nay có hai kiểu bán hàng trực tuyến và bán hàng trực tiếp.
Đối với việc bán hàng trực tuyến thì lại càng đa dạng hơn với nhiều kiểu cách
khác nhau như là bán trên các trang mạng xã hội như facebook, zalo, .... Tuy
nhiên có một cách nữa đó chính là tạo ra một trang web bán hàng. Việc này sẽ
có lợi hơn đối với chủ cửa hàng cũng như khách hàng. Chủ cửa hàng sẽ có trang
web bán hàng của riêng mình dễ dàng đưa sản phẩm lên và dễ dàng đưa sản
phẩm đến gần hơn với khách hàng. Đối với khách hàng thì việc tiếp cận với sản
phẩm sẽ trở nên dễ dàng hơn. Và việc tạo nên một website như vậy sẽ giúp cho
việc mua bán thanh toán trở nên dễ dàng hơn bao giờ hết. Chỉ cần với một chiếc
điện thoại bạn có thể mua một chú gấu bông dễ thương rất dễ dàng. Vậy nên
chúng em quyết định xây dựng “ Website bán đồ cơng nghệ”
1.2. Xác lập dự án.
1.2.1. Mục đích
Là q trình khảo sát từ sơ bộ đến chi tiết, hiện tại ta cần phải có đầy đủ
về các thơng tin, để từ đó làm thế nào xây dựng được dự án mang tính khả thi
nhất.
1.2.2. Các bước tiến hàn khảo sát.
- Khảo sát và đánh giá hiện trạng hoạt động của hệ thống cũ.
- Xác định phạm vi vủa hệ thống mới.

-Vạch kế hoạch cho dự án cùng với dự trù tổng quát.
1.2.3. Khảo sát, tìm hiểu hệ thống hiện tại.
1.2.3.1. Quan sát, tìm hiểu hệ thống hiện tại.
Việc quan sát, tìm hiểu cũng như đánh gái hệ thống phải theo cách nhìn
của nhà tin học.
- Có các bước quan sát:
+ Mức thao tác thực hành.
+ Mức điều phối quản lý.
+ Mức quyết định lãnh đạo.
+ Mức chuyên gia cố vấn.
- Các hình thức tiến hành:
+ Áp dụng hình thức quan sát.
+ Áp dụng hình thức phỏng vấn.
+ Phương pháp thăm dò.
+ Phương pháp nghiên cứu tài liệu.
1.2.3.2. Tập hợp và phân loại thông tin.
Phân loại dựa theo một số tiêu chuẩn sau:
- Hiện tại và tương lai.
- Phân loại theo thông tin tĩnh, động, thông tin biến đổi.
2


lOMoARcPSD|15978022

- Phân loại dựa vào nội bộ môi trường.
- Tập hợp lại tất cả những thông tin đã được phân loại.
1.2.3.3. Phát hiện yếu kém của hiện trạng và các yêu cầu trong tương lai.
- Phát hiện yếu kém: Là tìm hiểu các yếu kém về một số mặt như: Sự
thiếu vắng thông tin xử lý, thiếu nhan lực, kếm hiệu quả trong tổ chức quản lý,
ùn tắc thông tin, phức tạp và tổn phí cao…

- Phương pháp phát hiện: Trên cơ sở đã xác định rõ nguyên nhân kém để
đề ra các biện pháp khắc phục những yếu kém đó.
1.2.4. Phác họa giải pháp và cân nhắc tính khả thi.
- Xác định phạm vi: Phạm vi của bài toán đặt ra cho dự án trong kế hoạch
tổng thể và lâu dài của tổ chức.
- Xác định mục tiêu dự án:
+Mang lại lợi ích nghiện vụ: Tăng khả năng xử lý, đáp ứng yêu cầu
nghiệp vụ, tin cậy, chính xác, bí mật.
+Mang lại lợi ích kinh tế: Thu nhập, giảm chi phí hoạt động, hồn vốn
nhanh.
+Mang lại lợi ích sử dụng: Nhanh chóng, thuận tiện.
+Khác phục yếu kém của hệ thống cũ, hỗ trợ chiến lược lâu dài, đáp ứng
các ưu tiên, hạn chế áp đặt.
- Phác họa giải pháp.
+Chỉ cho người dung thấy triển vọng cụ thể của dự án.
+ Có một định hướng trong triển khai dự án.
+Chỉ ra được:
* Các chức năng chính của hệ thồng, đầu vào, đầu ra, các giải pháp thực
hiện.
* Kiến trúc tổng thể của hệ thống(phần cứng, phần mềm…)
- Cân nhắc tính khả thi:
+ Khả thi về nghiệp vụ.
+ Khả thi về kỹ thuật.
+ Khả thi về kinh tế.

3


lOMoARcPSD|15978022

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2.1. Phân tích hệ thống
2.1.1. Các chức năng của hệ thống
- Webadmin:
+ Thêm, sửa, xóa danh mục sản phẩm
+ Thêm, sửa, xóa sản phẩm
+ Thêm, sửa, xóa bài viết
+ Đăng ký tài khoản admin (Với đặc quyền là admin)
+ Xem thông tin tài khoản khách hàng
+ Xem thông tin đơn hàng
+ Xem chi tiết đơn hàng
+ Thống kê doanh thu
+ Quản lý ý kiến phản hồi
- Webuser:
+ Trang chủ
+ Hiển thị danh sách sản phẩm theo nhóm
+ Hiển thị chi tiết sản phẩm
+ Hiện thị các bài viết
+ Hiển thị chi tiết bài viết
+ Đăng nhập, Đăng ký, đổi mật khẩu tài khoản khách hàng (Với đặc quyền là
khách hàng)
+ Thêm, sửa, xóa giỏ hàng
+ Tìm kiếm sản phẩm
+ Liên hệ
2.1.2.Các tác nhân của hệ thống
Dựa vào mô tả hệ thống, ta có thể xác định được các tác nhân chính của hệ
thống như sau:
Tác nhân Admin: người thực hiện các chức năng quản trị hệ thống, tài
khoản, khách hàng, quản lý sản phẩm,quản lý bài viết, quản lý danh mục sản
phẩm, quản lý đơn hàng, quản lý loại hàng,... Để thực hiện chức năng này người

nhân viên phải đăng nhập.
Tác nhân Khách hàng: có thể thực hiện các chức năng như đăng ký tài
khoản, đăng nhập. Tìm kiếm sản phẩm, xem sản phẩm, xem bài viết, đặt hàng,
xem giỏ hàng,...
2.2. Thiết kế hệ thống

4


lOMoARcPSD|15978022

2.2.1. UseCase Diagram
* Usecase Tổng quát

Hình 2.1. Biểu đồ Usecase Tổng qt
Tên
Tóm tắt
Dịng sự kiện chính

Các dịng sự kiện

Web bán đồ công nghệ
Tổng quan hệ thống
Đăng nhập, quản lý sản phẩm,quản lý bài viết, quản lý
đơn hàng, quản lý danh mục sản phẩm, quản lý ý kiến
phản hồi, thống kê doanh thu, thanh toán, đặt hàng
- Khách hàng, Admin đăng nhập vào hệ thống và thao
tác với các chức năng thuộc quyền quản lý của mình
- Hệ thống đưa ra các chức năng để người dùng thao
tác

1. Đăng nhập
1 Thành công. Vào trong hệ thống
2 Không thành công. Hệ thống báo tài khản/mật
khẩu chưa đúng
5


lOMoARcPSD|15978022

Điều kiện tiên
quyết
Các yêu cầu đặc
biệt

2. Quản lý
1 Thao tác với hệ thống
2 Hệ thống cập nhật dữ liệu mới
3. Thêm, sửa, xóa, tìm kiếm
1 Thêm, sửa, xóa, tìm kiếm thông tin sản phẩm
2 Hệ thống hiển thị thông tin sản phẩm
4. Đặt hàng
1
Thêm hàng vào giỏ hàng
2
Sửa, xóa sản phẩm trong giỏ hàng
5. Thống kê doanh thu
6. Thanh tốn
Khơng có
Giao diện và các thao tác dễ dùng với người lần đầu
tiên sử dụng

2.2.2. Sequence Diagram
Biểu đồ Sequence Diagram – Đăng nhập

Hình 2.2. Biểu đồ Sequence Diagram - Đăng nhập

6


lOMoARcPSD|15978022

Biểu đồ Sequence Diagram - Quản lý sản phẩm

Hình 2.3. Biểu đồ Sequence Diagram – Quản lý sản phẩm

7


lOMoARcPSD|15978022

Biểu đồ Sequence Diagram - Quản lý đơn hàng

Hình 2.4. Biểu đồ Sequence Diagram – Quản lý đơn hàng

8


lOMoARcPSD|15978022

2.2.3. Class Diagram

Hình 2.6. Class Diagram

9


lOMoARcPSD|15978022

CHƯƠNG 3: GIAO DIỆN TRANG WEB
3.1. Giao diện webuser
3.1.1. Giao diện trang chủ

Hình 3.1. Giao diện trang chủ

10


lOMoARcPSD|15978022

3.1.2. Giao diện theo danh mục sản phẩm

Hình 3.2. Giao diện theo danh mục sản phẩm

11


lOMoARcPSD|15978022

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

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

12

Downloaded by Quang Quang ()


lOMoARcPSD|15978022

3.1.6. Giao diện giỏ hàng

Hình 3.6. Giao diện trang giỏ hàng

13

Downloaded by Quang Quang ()


lOMoARcPSD|15978022

3.2. Giao diện trang quản trị
3.2.1. Giao diện đăng nhập

Hình 3.7. Giao diện đăng nhập trang quản trị

14

Downloaded by Quang Quang ()