TRƯỜNG ĐẠI HỌC PHENIKAA

KHOA CÔNG NGHỆ THÔNG TIN

---o0o---

BÀI TẬP LỚN

ĐỒ ÁN CƠ SỞ

Đề tài: Website bán bánh

Giảng viên hướng dẫn : Nguyễn Văn Thiệu

Sinh viên thực hiện : Khúc Kim Anh - 20010754
: Đào Văn Lâm -
Lớp : K14 - CNTT
Năm học : 2022 - 2023

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

1
 THÔNG TIN CHUNG

Môn học Đồ án cơ sở

Đề tài nhóm Website bán bánh

Giảng viên Nguyễn Văn Thiệu

Sinh viên 1 Khúc Kim Anh Mssv: 20010754

Sinh viên 2 Đào Văn Lâm Mssv: 20010

2
 LỜI CẢM ƠN
Đầu tiên em xin bày tỏ lòng biết ơn sâu sắc đến thầy giáo chính đảm nhiệm hướng
dẫn bộ môn Đồ án cơ sở, Thầy Nguyễn Văn Thiệu vì những ý kiến đóng góp quý
báu và mang tính xây dựng trong quá trình lập kế hoạch và phát triển đề tài nghiên
cứu đề tài này. Thầy đã giúp chúng em rất nhiều để nâng cao kiến thức của bản
thân nhằm chuẩn bị chu đáo để tự tin thực hiện đồ án này. Thầy cũng khuyến khích
chúng em nêu cao tin thần tự học. Chúng em đa cố gắng nghiêm cứu một cách
nghiêm túc và ký lưỡng để có thể hoàn thành bài nghiêm cứu thật chi tiết và hoàn
chỉnh nhất.Tuy nhiên do vốn kiến thức còn hạn hẹp nên bài nghiêm cứu khó có thể
tránh khỏi thiếu sót cũng như chưa chi tiết và hoàn chỉnh vậy nên kính mong thầy
xem xét và góp ý để đề tài chúng em hoàn thiện hơn.
Em xin chân thành cảm ơn!

3
 MỤC LỤC

Thông tin chung ............................................................................................................ 2

Lời cảm ơn .................................................................................................................... 3
I. Giới Thiệu ................................................................................................................. 7
1.1. Đặt vấn đề ......................................................................................................... 7
1.2. Mục tiêu đề tài ................................................................................................... 7
1.3. Phạm vi đề tài .................................................................................................... 7
II. Mô tả ........................................................................................................................ 8
2.1. Các chức năng ................................................................................................... 8
2.2. Cụ thể các chức năng và sơ đồ cấu trúc ............................................................ 8
2.3. Yêu cầu chung ................................................................................................. 19
2.4. Giao tiếp phần mền ......................................................................................... 19
III. Thiết kế và cài đặt ................................................................................................. 19
IV. Demo chương trình............................................................................................... 20
V. Kết luận .................................................................................................................. 23

4
 Danh sách bảng
Bảng 1. Đăng nhập ...................................................................................................... 9
Bảng 2. Đăng kí .......................................................................................................... 10
Bảng 3. Tìm kiếm ....................................................................................................... 11
Bảng 4. Thêm vào giỏi hàng ....................................................................................... 12
Bảng 5. Xem giỏi hàng ............................................................................................... 13
Bảng 6. Kiểm tra đơn hàng. ........................................................................................ 14
Bảng 7. Xem giới thiệu và liên hệ .............................................................................. 15
Bảng 8. Quản lí đơn hàng ........................................................................................... 16
Bảng 9. Quản lí sản phẩm........................................................................................... 17
Danh sách sơ đồ
Sơ đồ 1. Sơ đồ Usecase đăng nhập. .............................................................................. 9
Sơ đồ 2. Sơ đồ Uc-chung đăng nhập. ........................................................................... 9
Sơ đồ 3. Sơ đồ Usecase đăng kí. ................................................................................ 10
Sơ đồ 4. Sơ đồ Uc-chung đăng kí. .............................................................................. 10
Sơ đồ 5. Sơ đồ Usecase tìm kiếm ............................................................................... 11
Sơ đồ 6. Sơ đồ Uc-chung tìm kiếm ............................................................................ 11
Sơ đồ 7. Sơ đồ Usecase thêm giỏi hàng ..................................................................... 12
Sơ đồ 8. Sơ đồ Uc-chung thêm giỏi hàng ................................................................... 12
Sơ đồ 9. Sơ đồ Usecase xem giỏi hàng. ..................................................................... 13
Sơ đồ 10. Sơ đồ Uc-chung xem giỏi hàng. ................................................................. 13
Sơ đồ 11. Sơ đồ Usecase kiểm tra đơn hàng .............................................................. 14
Sơ đồ 12. Sơ đồ Uc-chung kiểm tra đơn hàng .................................................. 14
Sơ đồ 13. Sơ đồ Usecase xem thông tin giới thiệu và liên hệ ................................... 15
Sơ đồ 14. Sơ đồ Uc-chung xem thông tin giới thiệu và liên hệ ................................ 15
Sơ đồ 15. Sơ đồ Usecase quản lí đơn hàng ................................................................ 16
Sơ đồ 16. Sơ đồ Uc-chung quản lí đơn hàng .............................................................. 16
Sơ đồ 17. Sơ đồ Usecase quản lí sản phẩm ................................................................ 17

5
Sơ đồ 18. Sơ đồ Uc-chung quản lí sản phẩm ............................................................. 18
Danh sách hình ảnh
Hình 1.Giao diện đăng nhập và đăng kí ..................................................................... 19
Hình 2.Giao diện thay đổi mật khẩu ........................................................................... 19
Hình 3.Giao diện trang chủ . ...................................................................................... 20
Hình 4.Giao diện giỏi hàng. ....................................................................................... 20
Hình 5.Giao diện liên hệ . ........................................................................................... 21
Hình 6.Giao diện người quản lí .................................................................................. 22

6
 I. GIỚI THIỆU
1.1. Đặt vấn đề
Trong thời đại hiện nay, ngành công nghệ thông tin đang được sử dụng và ứng
dụng rộng rãi trên mọi lĩnh vực. Nó là ngành phát triển không ngừng, thời kì
công nghiệp đòi hỏi thông tin nhanh, mua bán thuận lợi,…..Để đáp ứng nhu
cầu của người dùng nhóm chúng em đã nghiên cứu và tìm hiểu đưa ra đề tài
liên quan tới bánh ngọt giúp người dùng mua bán trở nên dễ dàng hơn. Chính
vì vậy nhóm chúng em phát triển và xây dựng Webssite bán bánh, với những
kiến thức đã được học và quá trình tìm hiểu và đặc biệt có thầy Nguyễn Văn
Thiệu hướng dẫn nhiệt tình đã giúp nhóm em hoàn thiện sản phẩm một cách tốt
nhất.
1.2 Mục tiêu đề tài
Nhằm đáp ứng nhu cầu mua bán của khách hàng một cách nhanh chóng và
hiệu quả tránh mất thời gian đi lại và chọn lựa sản phẩm.
Thông tin được cập nhất thường xuyên để đáp ứng nhu cầu của người dùng
1.3 Phạm vi đề tài
Hệ thống web này được thực hiện cho cửa hàng bán bánh ngọt

7
 II. MÔ TẢ
2.1. Các chức năng
STT Các chức năng
1 Đăng nhập
2 Đăng kí
3 Tìm kiếm
4 Thêm vào giỏi hàng
5 Xem giỏi hàng
6 Kiểm tra đơn hàng
7 Xem giới thiệu và liên hệ
8 Quản lí đơn hàng
9 Quản lí sản phẩm

8
2.2. Cụ thể các chức năng và sơ đồ cấu trúc
Đăng nhập
Tên chức năng Đăng nhập
Đối tượng sử dụng - Người dùng
- Người quản lí
Chức năng Cho phép người dùng truy cập vào hệ
thống
Bảng 1: Đăng nhập

Sơ đồ 1: Usecase đăng nhập

Sơ đồ 2: Uc-chung đăng nhập

9
Đăng kí
Tên chức năng Đăng kí
Đối tượng sử dụng - Người dùng
Chức năng Cho phép người dùng đăng kí tài khoản để sử dụng
đăng nhập vào hệ thống
Bảng 2: Đăng kí

Sơ đồ 3: Usecase đăng kí

Sơ đồ 4: Uc-chung đăng xuất

10
Tìm kiếm
Tên chức năng Tìm kiếm
Đối tượng sử dụng - Người dùng
- Người quản lí
Chức năng Cho phép người dùng tìm kiếm sản phẩm trong
trang web
Bảng 3: Tìm kiếm

Sơ đồ 5: Usecae tìm kiếm

Sơ đồ 6: Uc-chung tìm kiếm

11
Thêm vào giỏi hàng
Tên chức năng Thêm vào giỏi hàng
Đối tượng sử dụng - Người dùng
Chức năng Cho phép người dùng thêm sản phẩm vào giỏi hàng
Bảng 4 :Thêm vào giỏi hàng

Sơ đồ 7: Usecase giỏi hàng

Sơ đồ 8: Uc-chung giỏi hàng

12
Xem giỏi hàng
Tên chức năng Xem giỏi hàng
Đối tượng sử dụng - Người dùng
Chức năng Cho phép người dung vào xem đơn hàng mà mình
đã thêm vào giỏi hàng
Bảng 5: Xem giỏi hàng

Sơ đồ 9: Usecase xem giỏi hàng

Sơ đồ 10: Uc-chung xem giỏi hàng

13
Kiểm tra đơn hàng
Tên chức năng Kiểm tra đơn hàng
Đối tượng sử dụng - Người quản lí
- Người dùng
Chức năng Cho phép người dùng có thể kiểm tra thông tin
trang thái đơn hàng
Bảng 6: Kiểm tra đơn hàng

Sơ đồ 11: Usecase kiểm tra đơn hàng

Sơ đồ 12: Uc-chung kiểm tra đơn hàng

14
Xem giới thiệu và thông tin liên hệ
Tên chức năng Xem giới thiệu
Đối tượng sử dụng - Người dùng
Chức năng Người dung có thể xem thông tin liên hệ của trang
web
Bảng 7: Xem thông tin giới thiệu và liên hệ

Sơ đồ 13: Usecase thông tin giới thiệu và liên hệ

Sơ đồ 14: Uc-chung hiện thị thông tin chi tiết về giới thiệu và liên hệ

15
Quản lí đơn hàng
Tên chức năng Quản lí đơn hàng
Đối tượng sử dụng - Người quản lí
Chức năng Người dùng có thể cập nhật lại trạng thái của đơn
hàng hủy hoặc đã giao
Bảng 8: Quản lí đơn hàng

Sơ đồ 14: Usecase quản lí đơn hàng

Sơ đồ 15: Uc-chung quản lí đơn hàng

16
Quản lí sản phẩm
Tên chức năng Quản lí sản phẩm
Đối tượng sử dụng - Người quản lí
Chức năng Cho phép người quản lí thêm, sửa xóa, tìm kiếm sản
phẩm
Bảng 9: Quản lí sản phẩm

Sơ đồ 16: Usecase quản lí sản phẩm

17
 Sơ đồ 17: Uc-chung quản lí sản phẩm

2.3. Yêu cầu chung

Trực quan, dễ hiểu, dễ sử dụng
Tốc độ phản hồi nhanh
Các thao tác dễ dàng
Giao diện dễ nhìn
2.4. Giao tiếp phần mềm
Phía người dùng:
+ Dễ điều khiển, thao tác trên trang web dễ dàng
+ Ngôn ngữ: Tiếng việt
+ Giao diện dễ nhìn

III. THIẾT KẾ VÀ CÀI ĐẶT

Ngôn ngữ sử dụng và giới thiệu qua về ngôn ngữ:
+ HTML: là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo tài liệu có
thể truy cập trên mạng.
+ CSS: là ngôn ngữ quy định cách trình bày cho các tài liệu
+ JavaScript: là một ngôn ngữ dạng script thường sử dụng cho việc lập trình
trang web. Trong phần này nhóm chúng em sử dụng NodeJs

18
 IV. DEMO
Đăng nhập và đăng kí
Nhập tài khoản và mật khẩu đã đăng kí. Nếu tài khoản và mật khẩu hợp lệ,
hệ thống sẽ chuyển đến trang chủ. Nếu không hợp lệ thì hệ thống yêu cầu
nhập lại tài khoản và mật khẩu.
Nhập e-mail cần đăng kí sau đó nhấn đăng kí

Hình 1: Giao diện đăng nhập và đăng kí

Thay đổi mật khẩu

Sau khi điền đầy đủ thông tin thì ấn cập nhật hệ thống sẽ lưu thông tin của
bạn. Hoặc ấn nút “ Thay đổi mật khẩu” khi bạn muốn thay đổi

Hình 2: Giao diện thay đổi mật khẩu

19
Trang chủ

Hình 3: Giao diện trang chủ

Giỏi hàng
Hiện thị chi tiết sản phẩm được thêm vào giỏi hàng và số lượng, gía sản
phẩm.

Hình 4: Giao diện giỏi hàng

20
Liên hệ
Hiển thị Hotline, Email, Địa chỉ của trang web và form thông tin

Hình 5: Giao diện liên hệ

21
Người quản lí
Giao diện danh sách đơn hàng: tại đây người quản lí có thể hủy đơn hàng với
Điều kiện chưa được đóng gói vận chuyển

Tại chức năng này người quản trị có thể thấy được giao diện thống kê đơn
hàng , sản phẩm, người dùng

Hình 6: Giao diện người quản lí

22
 IV. KẾT QUẢ
Dù chưa có thời gian thử nghiệm trang web nên nhóm em chưa thu được
phản hồi người dùng, nhưng trong thời gian bắt tay vào làm và phát triển
trang web chúng em có thêm những kiến thức nền tảng để xây dựng web
hoàn chỉnh. Bên cạnh đó, chúng em cũng được mở rộng thêm kiến thức
chuyên ngành vầ kiến thức lập trình,…
Ưu điểm của đề tài: Giao diện đẹp, các thao tác sử dụng dễ dàng, thân thiện
với người dùng.
Nhược điểm: Nhóm em nhận thấy một số hạn chế tồn tại đó là tốc độ load
trang chưa cao, vẫn còn lỗi phát sinh vận hành hệ thống
Hướng phát triển của đề tài: Em sẽ tiếp tục nghiêm cứu và phát triển website
này nhằm tang các tính năng và tối ưu hóa tốc độ xử lí để đem lại hiệu quả
cao hơn, phát triển các chức năng nâng cao để đưa website vào ứng dụng
thực tế.

23