Bài tập lớn lập trình web

HỌC VIỆN NGÂN HÀNG
KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ
-----------------

BÁO CÁO MƠN LẬP TRÌNH WEB
ĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ ĂN VẶT - DUMBUM
Giảng viên hướng dẫn: TS. Chu Văn Huy

Hà Nội - 2021


THÔNG TIN CHUNG

Tên đề tài: Xây dựng website bán đồ ăn vặt DumBum
Thơng tin sinh viên thực hiện: Nhóm 6
1. Trần Thu Trang

Mã sinh viên: 22A4040093

2. Vũ Mai Anh

Mã sinh viên: 22A4040169

3. Nguyễn Quang Huy

Mã sinh viên: 22A4040018

4. Chu Thuý Quỳnh

Mã sinh viên: 22A4040087

5. Nguyễn Thành Đạt

Mã sinh viên: 19A4040034

Giảng viên hướng dẫn : TS. Chu Văn Huy
Ngày nộp báo cáo

: 01/11/2021


BẢNG PHÂN CÔNG NHIỆM VỤ
S
TT

Mã

sinh

viên
1

2

3

4

5

Họ và tên

22A404009

Trần Thu Trang

3
22A404016

Vũ Mai Anh

9
22A404001
8

Nguyễn

Quang

Huy
22A404008

7

Chu

Th

Quỳnh
19A404003

4

Phân cơng

Nguyễn
Đạt

Thành

Đóng
góp


LỜI CAM ĐOAN
Chúng tôi xin cam đoan kết quả đạt được trong báo cáo là sản phẩm nghiên cứu,
tìm hiểu của riêng chúng tơi. Trong tồn bộ nội dung của báo cáo, những điều được trình
bày hoặc là của chúng tôi hoặc là được tổng hợp từ nhiều nguồn tài liệu. Tất cả tài liệu
tham khảo đều có xuất xứ rõ ràng và được trích dẫn hợp pháp.
Chúng tơi xin hồn tồn chịu trách nhiệm và chịu mọi hình thức kỷ luật theo quy
định theo lời cam đoan của mình.

Nhóm sinh viên thực hiện
Trần Thu Trang
Nguyễn Quang Huy
Nguyễn Thành Đạt
Vũ Mai Anh
Chu Thúy Quỳnh

LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn chân thành tới thầy Chu Văn Huy - Giảng viên Khoa
Hệ thống thông tin quản lý, Học viện Ngân hàng. Trong quá trình học tập và thực hiện bài
báo cáo “Xây dựng website bán đồ ăn vặt DumBum Hà Nội”, thầy đã ln tạo điều kiện,
giúp đỡ để chúng em hồn thành được bài báo cáo này.
Chúng em đã cố gắng hoàn thiện bài báo cáo với tất cả sự nỗ lực và cố gắng của cả
nhóm. Tuy nhiên, do cịn thiếu nhiều kinh nghiệm, chắc chắn bài báo cáo sẽ khơng tránh
khỏi thiếu sót. Vì vậy, chúng em rất mong nhận được sự quan tâm, những ý kiến đóng
góp của thầy để bài báo cáo của chúng em có thể hoàn thiện hơn.
Chúng em xin chân thành cảm ơn!


MỤC LỤC

DANH MỤC HÌNH ẢNH.................................................................................................1
MỞ ĐẦU............................................................................................................................ 5
CHƯƠNG I: TỔNG QUAN.............................................................................................7
1.1.

Lý do lựa chọn đề tài.............................................................................................7

1.2.

Mục tiêu của đề tài................................................................................................8

1.3.

Giới hạn và phạm vi đề tài.....................................................................................8

1.4.

Nội dung thực hiện................................................................................................8

1.5.

Yêu cầu hệ thống...................................................................................................8

CHƯƠNG II: PHÂN TÍCH U CẦU BÀI TỐN VÀ THIẾT KẾ CSDL CHO
WEBSITE BÁN ĐỒ ĂN VẶT DUMBUM....................................................................10
2.1.

Phân tích yêu cầu bài toán...................................................................................10

2.1.1.

Giới thiệu về website ...................................................................................10

2.1.2.

Yêu cầu chức năng........................................................................................10

2.1.3.

Yêu cầu phi chức năng..................................................................................10

2.1.4.

Sơ đồ phân rã chức năng...............................................................................11

2.2.

Thiết kế CSDL sử dụng cho website DumBum...................................................11

2.2.1.

Giới thiệu Xampp và MySQL.......................................................................11

2.2.2.

Xây dựng CSDL...........................................................................................12

CHƯƠNG III: WEBSITE ĐỒ ĂN VẶT DUMBUM...................................................19
3.1.

Giao diện người dùng..........................................................................................19

3.1.1.

Trang chủ DumBum.....................................................................................19

3.1.2.

Trang Sản phẩm............................................................................................22

3.1.3.

Trang Danh mục...........................................................................................23

3.1.4.

Trang Sản phẩm chi tiết................................................................................25

3.1.5.

Trang Giỏ hàng.............................................................................................27


3.1.6.

Trang Liên hệ................................................................................................30

3.1.7.

Trang Tin tức................................................................................................32

3.2.

Giao diện trang quản trị.......................................................................................34

3.2.1.

Trang Đăng nhập..........................................................................................34

3.2.2.

Trang Quản trị...............................................................................................35

3.2.3.

Trang Quản trị Người dùng...........................................................................36

3.2.4.

Trang Quản trị Sản phẩm..............................................................................38

3.2.5.

Trang Quản trị Danh mục (Sản phẩm)..........................................................39

3.2.6.

Trang Quản trị Loại sản phẩm......................................................................41

3.2.7.

Trang Quản trị đơn hàng...............................................................................42

3.2.8.

Trang Quản trị Sự kiện.................................................................................44

3.2.9.

Trang Quản trị Liên hệ..................................................................................45

3.2.10. Trang Quản trị Tin tức..................................................................................46
3.3.

Đưa website lên mạng.........................................................................................47

CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN............................................52
4.1.

Kết luận...............................................................................................................52

4.2.

Hướng phát triển đề tài........................................................................................53


DANH MỤC HÌNH ẢN

Hình 2.1. Sơ đồ phân rã chức năng...................................................................................11
Hình 2.2. Cơng cụ XAMPP..............................................................................................12
Hình 2.3. CSDL được import vào MySql.........................................................................13
Hình 2.4. Bảng tbl_admin.................................................................................................13
Hình 2.5. Bảng tbl_danh_muc..........................................................................................14
Hình 2.6. Bảng tbl_kieu_san_pham..................................................................................14
Hình 2.7. Bảng tbl_san_pham...........................................................................................15
Hình 2.8. Bảng tbl_dat_hang............................................................................................15
Hình 2.9. Bảng tbl_feedback.............................................................................................16
Hình 2.10. Bảng tbl_lien_he.............................................................................................17
Hình 2.11. Bảng tbl_su_kien.............................................................................................17
Hình 2.12. Bảng tbl_tin_tuc..............................................................................................18
Hình 3.1. Trang chủ 1.......................................................................................................19
Hình 3.2. Trang chủ 2.......................................................................................................19
Hình 3.3. Trang chủ 3.......................................................................................................20
Hình 3.4. Trang chủ 4.......................................................................................................20
Hình 3.5. Trang chủ 5.......................................................................................................21
Hình 3.6. Trang chủ 6.......................................................................................................21

Hình 3.7. Trang Sản phẩm 1.............................................................................................22
Hình 3.8. Trang Sản phẩm 2.............................................................................................22
Hình 3.9. Trang Sản phẩm 3.............................................................................................23
1


Hình 3.10. Trang Danh mục 1..........................................................................................24
Hình 3.11. Trang Danh mục 2...........................................................................................24
Hình 3.12. Trang Sản phẩm chi tiết 1...............................................................................25
Hình 3.13. Trang Sản phẩm chi tiết 2...............................................................................26
Hình 3.14. Trang Sản phẩm chi tiết 3...............................................................................26
Hình 3.15. Trang Sản phẩm chi tiết 4...............................................................................27
Hình 3.16. Giao diện giỏ hàng..........................................................................................28
Hình 3.17. Nút thêm sản phẩm.........................................................................................28
Hình 3.18. Xóa số lượng sản phẩm...................................................................................29
Hình 3.19. Cập nhật số lượng sản phẩm...........................................................................29
Hình 3.20. Giao diện khách hàng lưu thơng tin khi đặt hàng............................................30
Hình 3.21. Bản đồ DumBum............................................................................................31
Hình 3.22. Trang Liên hệ..................................................................................................31
Hình 3.23. Trang Tin tức 1..............................................................................................32
Hình 3.24. Trang Tin tức 2...............................................................................................32
Hình 3.25. Trang Tin tức 3...............................................................................................33
Hình 3.26. Trang Tin tức chi tiết 1...................................................................................33
Hình 3.27. Trang Tin tức chi tiết 2....................................................................................34
Hình 3.28. Trang Tin tức chi tiết 3....................................................................................34
Hình 3.29. Trang đăng nhập.............................................................................................35
Hình 3.30. Trang Quản trị.................................................................................................35
Hình 3.31. Trang Quản trị Người dùng.............................................................................36
Hình 3.32. Trang Thêm mới người dùng..........................................................................37
2

Hình 3.33. Trang Sửa người dùng.....................................................................................37
Hình 3.34. Trang Quản trị Sản phẩm................................................................................38
Hình 3.35. Trang Thêm mới sản phẩm.............................................................................38
Hình 3.36. Trang Sửa sản phẩm........................................................................................39
Hình 3.37. Trang Quản trị Danh mục (sản phẩm).............................................................39
Hình 3.38. Trang Thêm mới Danh mục (sản phẩm)..........................................................40
Hình 3.39. Trang Sửa Danh mục (sản phẩm)...................................................................40
Hình 3.40. Trang Quản trị Loại sản phẩm.........................................................................41
Hình 3.41. Trang Thêm mới Loại sản phẩm.....................................................................41
Hình 3.42. Trang sửa Loại sản phẩm................................................................................42
Hình 3.43. Trang Quản trị Đơn hàng................................................................................42
Hình 3.44. Chi tiết đơn hàng.............................................................................................43
Hình 3.45. In đơn hàng.....................................................................................................44
Hình 3.46. Trang Quản trị Sự kiện 1................................................................................44
Hình 3.47. Trang Quản trị Sự kiện 2.................................................................................45
Hình 3.48. Trang Quản trị liên hệ.....................................................................................45
Hình 3.49. Trang Quản trị Tin tức 1.................................................................................46
Hình 3.50. Trang thêm mới tin tức....................................................................................46
Hình 3.51. Trang sửa tin tức.............................................................................................47
Hình 3.52. Tạo database mới............................................................................................47
Hình 3.53. Vào database trên myphp để import................................................................48
Hình 3.54. Import dữ liệu lên database.............................................................................48
Hình 3.55. Upload file source code web...........................................................................49
3


Hình 3.56. Để file trong public.........................................................................................49
Hình 3.57. Upload file source code web...........................................................................51

Hình 3.58. Web................................................................................................................. 51

4


MỞ ĐẦU
Trong thời đại thế giới phẳng, Internet được sử dụng như một phương tiện đại chúng
hữu hiệu giúp kết nối với thế giới. Đây là điều kiện thuận lợi cho các cá nhân kinh doanh,
giúp tiếp cận khách hàng tiềm năng, mở rộng thị trường bán sản phẩm. Hiện nay, với hơn
1,9 tỷ trang web cùng khoảng 4,33 tỷ người dùng thường xuyên (2019), Internet trở thành
kênh truyền thông hiệu quả trên thế giới nói chung và tại Việt Nam nói riêng.
Website được xem là cửa hàng trực tuyến, là công cụ quan trọng để các tổ chức, cá
nhân tăng lợi nhuận từ nguồn khách hàng vơ tận. Nó giúp các doanh nghiệp quảng bá
hình ảnh, sản phẩm đến với người dung nhanh nhất với mức chi phí đầu tư thấp, khai thác
được nguồn khách hàng tiềm năng, làm tăng lợi nhuận. Theo như những khảo sát cụ thể,
ngoài 16% chủ yếu để phục vụ nhu cầu mua bán hàng hóa và giao dịch thì cịn có tới 34%
các website được lập ra nhằm truyền đạt thông tin cho những người truy cập hiểu thêm về
công ty của họ.
Qua khảo sát thực trạng, nhóm em nhận thấy rằng mảng kinh doanh đồ ăn vặt đang
rất thịnh hành và phát triển tại các kênh thương mại điện tử (Shopee, Lazada,…) nhưng ít
shop nào xây dựng riêng website cho mình bởi bản chất các sản phẩm đồ ăn vặt có chênh
lệch chất lượng không cao, cạnh tranh về giá cả lại gay gắt. Chi phí đầu tư ban đầu để
phát triển một kênh thông tin riêng là khá tốn kém. Tuy vậy, đại dịch Covid-19 đã gây trở
ngại không nhỏ tới chuỗi cung ứng sản phẩm của các cửa hàng này. Vấn đề vận chuyển bị
phụ thuộc vào các kênh phân phối của sàn thương mại, khả năng kết nối với khách hàng
thấp khiến các shop bán đồ ăn vặt có thể mất đi một lượng khách hàng thân thiết nếu
không có những giải pháp cụ thể. Do đó, nhóm em lựa chọn đề tài “Xây dựng website bán
đồ ăn vặt DumBum Hà Nội” để thiết kế và phát triển ý tưởng xây dựng các kênh phân
phối riêng cho các shop bán hàng.

5


Hiện nay có rất nhiều ngơn ngữ để lập trình web như: HTML, Javascripts, vbscripts,
ASP, PHP... Nhưng với sự tiện dụng và phổ biến, chúng em chọn ngôn ngữ PHP và hệ
quản trị cơ sở dữ liệu MySQL để phát triển đề tài của mình.

6


CHƯƠNG I: TỔNG QUAN
1.1.

Lý do lựa chọn đề tài.

Đồ ăn vặt như một xu hướng ẩm thực của giới trẻ
Thị trường thức ăn vặt trở nên sôi động trong những năm gần đây. Đồ ăn vặt
ngày nay khơng cịn là mối nguy hại cho sức khỏe. Những nguyên liệu thực phẩm
giàu dinh dưỡng đang bắt đầu được đưa vào các dây chuyền sản xuất để cho ra
những món ăn vặt tốt cho sức khỏe. Giới trẻ hiện đang tìm kiếm những thức ăn tiện
lợi để phù hợp hơn với lối sống bận rộn nhưng vẫn giúp thỏa mãn cơn đói và bổ
sung dinh dưỡng. Bên cạnh đó, thức ăn vặt cịn góp phần giúp giới trẻ cảm thấy bớt
căng thẳng và lo âu. Con người ngày càng trở nên bận rộn và với sự phát triển của
công nghệ, đặt hàng online dần trở nên quan thuộc với giới trẻ. Đây là thị trường
lớn cho sự phát triển của của mảng kinh doanh đồ ăn vặt.
Tầm quan trọng của thiết kế website cho các shop bán đồ ăn vặt
Với website riêng, công việc quản lý các nguồn lực của chủ shop sẽ trở nên dễ
dàng và chuyên nghiệp hơn. Tất cả các thông tin về kho hàng, sản phẩm, đơn hàng
đều có thể chủ động quản lý. Dữ liệu về khách hàng cũng được lưu trữ đầy đủ trên
các nền tảng số, tạo điều kiện thuận lợi trong hoạt động chăm sóc khách hàng, tạo

các mối liên kết chặt chẽ với đối tượng khách hàng cũ. Thao tác cập nhật, thêm mới
hàng hóa hay thơng báo các sự kiện cũng được thực hiện nhanh chóng. Đặc biệt, do
ảnh hưởng của đại dịch Covid-19, nhiều sàn thương mại điện tử gặp khó khăn trong
việc vận chuyển, phân phối sản phẩm đến tay người tiêu dùng, có thể sẽ dẫn đến
một lượng khách hàng thân thiết dần bớt quan tâm đến các sản phẩm của cửa hàng.
Đứng trước nhu cầu thực tiễn, website của DumBum shop ra đời với mục đích
mang đến cho người mua thông tin chi tiết, chân thực về các sản phẩm đồ ăn vặt
hàng đầu trên thị trường với giá cả cạnh tranh, đồng thời tăng sự tương tác giữa
7


shop và khách hàng, đem đến những trải nghiệm tuyệt vời cho bên mua và hứa hẹn
giúp DumBum đạt được những mục tiêu về lợi nhuận, doanh thu khả quan.
1.2.

Mục tiêu của đề tài.

- Xây dựng website đảm bảo thực hiện được đầy đủ các chức năng cơ bản, giao diện
đẹp mắt, dễ dàng thao tác.
- Phân tích thiết kế cơ sở dữ liệu, phân tích các chức cơ bản của đề tài (giao diện,
quản trị,…).
- Phân vùng và tối ưu các hoạt động của người dùng, người quản lý.
1.3.

Giới hạn và phạm vi đề tài.

- Xây dựng Website bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu MySQL.
- Website giới thiệu về các sản phẩm đồ ăn vặt DumBum đang kinh doanh (xuất xứ,
hạn sử dụng, trọng lượng,…) giúp tiếp cận các khách hàng mục tiêu.
- Người quản trị có thể quản lý các thơng tin về sản phẩm, tin tức, chi tiết đơn hàng,

liên hệ, sự kiện và các tài nguyên hình ảnh.
1.4.

Nội dung thực hiện.

- Lên ý tưởng đề tài.
- Xây dựng hệ thống cơ sở dữ liệu.
- Nghiên cứu, thực hiện lập trình và thiết kế giao diện website.
1.5.

Triển khai thực nghiệm hệ thống trên mạng internet.
Yêu cầu hệ thống.
Thực hiện được các tác vụ cơ bản của một shop bán đồ ăn vặt

- Phân loại các trang hiển thị: Trang chủ, Sản phẩm, Danh mục, Tin tức, Liên hệ, Giỏ
hàng.

8


- Có hai đối tượng tham gia trực tiếp vào quá trình tương tác với website người dùng
và người quản trị hệ thống:
+ Người dùng: là đối tượng khách hàng tiềm năng, quan tâm và có nhu cầu tìm hiểu
sản phẩm, thơng tin về đồ ăn vặt. Vì vậy, trang web phải đáp ứng được các nhu
cầu cơ bản:
 Hiển thị rõ ràng thông tin sản phẩm với đầy đủ ảnh minh họa, tên sản phẩm,
mô tả, giá bán,… để người dùng có thể cân nhắc lựa chọn và đi đến quyết định
mua.
 Cung cấp chức năng liên hệ để người dùng đánh giá chung các sản phẩm, cũng
như để nghe tư vấn nếu có thắc mắc, câu hỏi cần giải đáp.

 Quản trị giỏ hàng với các tác vụ cơ bản (thay đổi số lượng sản phẩm, xóa sản
phẩm khỏi giỏ, thêm sản phẩm khác hay đặt hàng).
 Đưa ra các tin tức với nguồn thơng tin uy tín để người dùng cập nhật các thông
tin về chủ đề đồ ăn vặt.
+ Quản trị viên (admin): là người quản lý toàn bộ hệ thống trang web, sẽ được cấp
username và password. Khi đăng nhập thành công vào hệ thống quản lý, admin
có thể làm những cơng việc như:
 Quản lý toàn bộ nội dung các trang hiển thị.
 Hệ thống trang quản trị cho phép quản trị viên có thể tùy chọn thêm, xóa hoặc
chỉnh sửa khơng hạn chế các thư mục, bài viết và hình ảnh liên quan. Dữ liệu
được thêm vào sẽ tự động thêm vào trên cơ sở dữ liệu để tiện cho việc truy
xuất, lưu trữ.
 Các thông tin phản hồi của khách hàng (trong mục liên hệ) và chi tiết đơn hàng
cũng được quản lý và cập nhật trên hệ quản trị cơ sở dữ liệu MYSQL.
 Thêm tài khoản user cùng quản trị hệ thống website.

9


10


CHƯƠNG II: PHÂN TÍCH U CẦU BÀI TỐN VÀ THIẾT KẾ CSDL CHO
WEBSITE BÁN ĐỒ ĂN VẶT DUMBUM
2.1. Phân tích yêu cầu bài toán
2.1.1. Giới thiệu về website .
DumBum - Đồ ăn vặt Hà Nội là một website giới thiệu, đánh giá chi tiết về các sản
phẩm đang được kinh doanh tại DumBum cùng các tác vụ liên quan thông qua cơ sở dữ
liệu được xây dựng bởi đội ngũ làm hệ thống và các phản hồi khách quan, đa chiều từ
khách hàng.

2.1.2. Yêu cầu chức năng.
Đối với website bán đồ ăn vặt DumBum, nhóm nghiên cứu đã tìm hiểu và phân
tích tất cả các chức năng cần có để phục vụ nhu cầu tìm hiểu và đặt hàng của khách hàng
một cách tốt nhất.
Mục tiêu đặt ra với hệ thống website sẽ có các chức năng sau:
-

Cho phép cập nhật (thêm, sửa, xóa) bài viết mơ tả về các loại sản phẩm.

-

Cho phép cập nhật (thêm, sửa, xóa) thơng tin admin.

-

Cho phép cập nhật (thêm, sửa, xóa) các bài viết giới thiệu sản phẩm, tin tức.

-

Cho phép cập nhật (thêm, sửa, xóa) các bài sự kiện giảm giá.

-

Hiển thị thông tin mô tả các loại sản phẩm, sự kiện nổi bật, tin tức chi tiết trên
trang giao diện người dùng.

-

Hiển thị thống kê số lượng tin tức, bình luận, liên hệ, tài khoản admin.

2.1.3. Yêu cầu phi chức năng.
-

Website đáp ứng được khả năng truy cập nhanh, thông tin tin cậy, chính xác.

-

Giao diện thân thiện, dễ sử dụng, tính thẩm mỹ và tính ổn định cao.

-

Website đảm bảo tính bảo mật cao, phân quyền một cách hợp lý.
11


-

Website có thể hoạt động 24/7/365.

-

Website có khả năng lưu trữ, xử lý khối lượng lớn thông tin nhưng chiếm dung
lượng nhỏ trong máy tính.

2.1.4. Sơ đồ phân rã chức năng.

Hình 2.1. Sơ đồ phân rã chức năng
2.2. Thiết kế CSDL sử dụng cho website DumBum
2.2.1. Giới thiệu Xampp và MySQL.
Để chạy được PHP chúng ta phải thiết lập môi trường web Server. Tuy nhiên, không

phải lúc nào chúng ta cũng đủ kinh phí để mua một Server về phục vụ cho việc học. Điều
này vô cùng tốn kém và khơng cần thiết. Vậy làm thế nào để ta có thể chạy được PHP?
Trong bài tập nhóm này, chúng em tìm hiểu về một cơng cụ giúp giải quyết được vấn đề
trên, đó chính là XAMPP.
XAMPP là một cơng cụ tích hợp đầy đủ các thành bao gồm Apache, Mysql, PHP,
Perl. Giúp chúng ta tạo ra môi trường web server trên máy tính của mình, để có thể chạy
được kịch bản PHP.

12


Hình 2.2. Cơng cụ XAMPP
My SQL là một hệ quản trị cơ sở dữ liệu miễn phí phát triển theo chuẩn mã nguồn
mở được dùng cho các ứng dụng web có quy mơ vừa và nhỏ.
-

Có trình giao diện trên Windows hay Linux cho phép người dùng có thể thao tác
đến CSDL.

-

Nhanh và mạnh.

-

Cải tiến liên tục.

-

Cho phép kết nối, tạo cơ sở dữ liệu, quản lý người dùng, phân quyền sử dụng, thiết

kế bảng và xử lý dữ liệu.

-

Có thể sử dụng trình quản lý dạng đồ họa hoặc dòng lệnh để sử dụng các phát biếu
hay thao tác trên CSDL.

2.2.2. Xây dựng CSDL.

13