ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
🙤🙤🙤🙤🙤

BÁO CÁO MÔN HỌC
PHÁT TRIỂN ỨNG DỤNG WEB
Xây dựng website bán coffee
Lớp: IS207.L23.TMCL
Giảng viên: Mai Xuân Hùng

Danh sách thành viên nhóm:
1. Phan Thị Liễu - 19521749
2. Lê Thị Hoài Giang - 19521447
3. Vũ Phú Thành – 19522247


NHẬN XÉT CỦA GIẢNG VIÊN
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………

……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………
……………………………………………………………………………………………………

2


LỜI CẢM ƠN
Lời đầu tiên em xin chân thành gửi lời cảm ơn đến với giảng viên bộ môn là thầy Mai
Xuân Hùng đã nhiệt tình giảng dạy trên lớp và hỗ trợ cho chúng em những thông tin cần thiết.
Cảm ơn thầy đã hướng dẫn và giải đáp những thắc mắc cho nhóm cũng như các bạn trong lớp
suốt q trình học tập để chúng em có thể hồn thành bộ mơn và hồn thành đề tài đúng thời
gian quy định.

Đồng thời nhóm cũng muốn gửi lời cảm ơn đến những bạn bè đã đưa ra những lời nhận
xét, góp ý chân thành, vơ cùng q giá. Những người đã động viên, hỗ trợ nhóm để hồn thành
được đề tài.
Với khả năng và thời gian có hạn nên khơng thể tránh khỏi những thiếu sót, em rất mong
được sự quan tâm, giúp đỡ và thông cảm của thầy để chúng em hồn thiện hơn về đề tài của
mình.
Nhóm thực hiện
Thủ Đức, ngày 30 tháng 5 năm 2021

3


LỜI MỞ ĐẦU
Ngày nay, với sự phát triển mạnh mẽ của thời đại khoa học - công nghệ 4.0 và những
ứng dụng của nó. Ngành thương mại điện tử mỗi lúc một lớn mạnh, mỗi doanh nghiệp đều
mong muốn sở hữu một website bán hàng dành riêng cho mình.
Theo thống kê năm 2019, Việt Nam có khoảng 68,7% dân số đang sử dụng Internet và
online trở thành xu hướng phát triển. Thì việc sở hữu một website bán hàng khơng chỉ giúp
doanh nghiệp thu hút thêm một lượng lớn khách hàng, mà cịn giúp cho doanh nghiệp có thể
đẩy mạnh các hoạt động bán hàng, marketing ở mọi lúc mọi nơi. Bên cạnh đó website bán hàng
có thể giúp tiết kiệm các chi phí (th nhân cơng, kho bãi), bán hàng tự động 24/7 mà cịn người
khó có khả năng thực hiện. Thông qua các dẫn chứng này, chúng ta có thể dễ dàng nhận thấy
được tính tất yếu của thương mại điện tử. Chỉ với một vài thao tác đơn giản trên máy tính hay
điện thoại có kết nối mạng Internet , thì các nhà cung cấp dịch vụ sẽ mang đến tận tay các sản
phẩm và dịch vụ cho bạn.
Để tiếp cận và góp phần vào sự phổ biến của thương mại điện tử tại Việt Nam, chúng em
đã tìm hiểu và xây dựng một “Website bán coffee online” với những chức năng hỗ trợ bán hàng,
quản lí khách hàng hay cung cấp những thơng tin hữu ích về café thơng qua chun mục blog.
Nhóm thực hiện chúng em xin chân thành cảm ơn!


4


Mục lục

5


CHƯƠNG 1: GIỚI THIỆU CHUNG
1.1. Mô tả tài liệu
Tài liệu gồm 4 phần chính:
+
+
+
+

Phần 1: Khảo sát hiện trạng và đưa ra các chức năng chính cho website.
Phần 2: Đặc tả yêu cầu website, các yêu cầu phi chức năng và các sơ đồ tổ chức.
Phần 3: Thiết kế giao diện và code.
Phần 4: Đưa ra nhận xét, kết luận, phụ lục, tài liệu tham khảo.

1.2. Kế hoạch thực hiện
Áp dụng quy trình để phát triển phần mềm. Mơ hình thác nước:
-

Mơ hình thác nước có ưu điểm là đơn giản và dễ áp dụng, phù hợp với những dự án nhỏ
và yêu cầu rõ ràng, dễ sắp xếp kế hoạch và văn bản hóa.

 Khảo sát hiện trạng
- Thu thập các thơng tin thơng qua các tài liệu có sẵn và các website bán café trên mạng.

 Phân tích đặc tả yêu cầu

-

Dựa tên các thông tin thu thập được đưa ra các chức năng cần có và phác thảo giao diện
web.

6



a.
b.
-

Thiết kế
Thiết kế hệ thống
Vẽ Use Case phân tích nghiệp vụ tổng quan.
Sử dụng các mơ hình DFD, Activity để từ đó xác định kiến trúc hệ thống.
Thiết kế dữ liệu
Phân tích dữ liệu dựa trên yêu cầu người dùng, vẽ sơ đồ logic từ đó phục vụ cho việc

thiết kế database.
c. Thiết kế giao diện
- Vẽ giao diện màn hình cũng như phân tích thiết kế xử lý.
 Code và Kiểm thử
- Hoàn thành các chức năng được đưa ra.
- Tạo ra các test case để kiểm tra xem trang web đã hoạt động tốt hay chưa.
1.3. Công cụ sử dụng để quản lí dự án
 Cơng cụ trao đổi thông tin:

- Ứng dụng Microsoft Teams: Nơi thông báo các việc quan trọng, meeting trao đổi giữa
các thành viên.
 Công cụ lưu trữ tài liệu: Google Drive.

7


CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
2.1. Đặt vấn đề
Con người Việt Nam rất thích các loại thức uống như trà và café. Chúng ta có thể dễ
dàng bắt gặp rất nhiều quán café với đa dạng các loại hình ở trên thị trường.
Với sự phát triển của các ngành kinh tế, thì mức sống của con người cũng dần được cải
thiện. Việc tận hưởng các sản phẩm đồ uống hấp dẫn mà không cần phải bước chân ra khỏi nhà
đã trở thành xu thế.
Việc bán hàng trên các ứng dụng đặt đồ ăn online sẽ làm mình phụ thuộc vào họ và tốn
thêm một số các khoản chi phí. Vì lẽ đó bán hàng trên chính website của mình sẽ thuận tiện và
chủ động hơn rất nhiều.
2.2. Phân tích bài tốn
Qua việc tìm hiểu các website bán coffee trên mạng nhóm chúng em đã dự kiến website
sẽ có các chức năng sau:


-

Đối với người quản trị website:
Thay đổi giao diện của website.
Quản lí các thơng tin và phân quyền cho người dùng.
Đối với doanh nghiệp sở hữu:
Có thể đăng tải sản phẩm của mình kèm theo các thơng tin về sản phẩm như (hình ảnh,


-

giá bán, mơ tả, …)
Có thể quản lí các thơng tin về khách hàng thành viên, các đơn hàng hay hóa đơn mua

hàng.
- Có thể đăng tải bài viết ở trang blog.
 Đối với khách hàng:
- Có thể mua hàng, xem giỏ hàng của mình và thanh tốn.
- Có thể đăng kí để trở thành khách hàng thành viên.

8


CHƯƠNG 3: XÁC ĐỊNH YÊU CẦU
3.1. Yêu cầu chức năng
3.1.1. Yêu cầu lưu trữ
Hệ thống lưu trữ các thông tin sau
-

Thông tin sản phẩm: Thông tin về tên, giá cả, xuất xứ, hình ảnh, mơ tả về sản phẩm.
Thơng tin về người dùng: như họ tên, số điện thoại, một số các thơng tin liên lạc để
người bán có thể liên lạc với khách hàng của mình cũng như quản lí đối với các khách
hàng là thành viên của hệ thống.

3.1.2. u cầu tính tốn
- Tính tốn các giá trị của đơn hàng dựa trên giá của sản phẩm, thuế hay là phiếu giảm giá.
3.1.3. Yêu cầu phân quyền hệ thống
- Hệ thống phân quyền theo admin hay là user, đảm bảo việc truy xuất ứng với quyền hạn
của mỗi người.

3.2. Yêu cầu phi chức năng
- Giao diện thân thiện với người dùng, có các chức năng dễ sử dụng và thuận tiện trong
-

nhiều thao tác.
Tương thích với các trình duyệt web phổ biến.

9


CHƯƠNG 4: ĐẶC TẢ YÊU CẦU
4.1. Sơ đồ Use Case

10


-

Sơ đồ Use Case dùng để nắm bắt các chức năng chính của hệ thống. Website bán hàng

-

phục vụ hai đối tượng là Khách Hàng (User) và Người Quản Lí (Admin).
Khách hàng: có thể mua sản phẩm, đăng nhập, xem giỏ hàng của mình có những sản

-

phẩm nào.
Người quản lí: các chức năng bao gồm quản lí danh sách khách hàng, thêm, sửa, xóa các
sản phẩm.


4.2. Sơ đồ Activity
4.2.1. Đăng nhập
- Khách hàng đăng nhập vào hệ thống bằng tài khoản và mật khẩu đã đăng kí.
- Nếu đúng thì sẽ đăng nhập thành công và trở về trang chủ.
- Nếu sai thì thơng báo đăng nhập lại.

11


4.2.2. Đăng kí
- Nhấn đăng kí. Khách hàng sẽ điền các thông tin ở trong form.
- Nếu chưa đủ thông tin hay trùng tên đăng nhập thì quay lại đăng kí.
- Nếu điền đầy đủ và đúng thơng tin thì sẽ thơng báo đăng kí thành cơng và trở về trang
đăng nhập.

12


4.2.3. Mua hàng
- Tại trang sản phẩm khách hàng
+ Nhấn chi tiết sản phẩm để xem thông tin của sản phẩm.
+ Nhấn mua hàng, giao diện sẽ thông báo thêm sản phẩm vào giỏ hàng thành công.

13


4.2.4. Xem giỏ hàng
- Nhấn giỏ hàng, danh sách các sản phẩm đã mua được hiện ra.
- Nhấn tiếp tục mua hàng để quay trở về trang sản phẩm.

- Nhấn thanh toán để đến trang thanh toán.

14


4.2.5. Thanh toán
- Chỉ thanh toán khi đã đăng nhập. Trang web sẽ hiện ra tổng tiền của sản phẩm, các thông
-

tin số điện thoại, địa chỉ, … mà người dùng đã đăng kí từ trước.
Nhấn thanh tốn. Thơng tin đơn hàng sẽ được gửi về mail quản lí.

4.2.6. Quản lí

-

Theo đường dẫn: doan/user/index để thực hiện chức năng quản lí.
Người dùng có thể thêm, sửa, xóa các thơng tin của sản phẩm cũng như của khách hàng.

15


4.3. Sơ đồ DFD
Sơ đồ luồng dữ liệu: chỉ ra cách thơng tin chuyển từ một tiến trình hoặc từ chắc năng
này trong hệ thống sang một tiến trình hoặc chức năng khác.
4.3.1. Mua hàng
D1: Sản phẩm sẽ hiển thị ở trang chủ để người dùng có thể lựa chọn.
D2: Người dùng lựa chọn sản phẩm muốn mua.
D3: Sản phẩm được mua sẽ được lưu trữ tại giỏ hàng.
D4: Thông báo cho người dùng sản phẩm đã được thêm vào giỏ hàng.

4.3.2 Quản lí sản phẩm

D1: Thơng tin của sản phẩm được hiện lên (tên sản phẩm, hình ảnh, giá, xuất xứ, …).
D2: Quản lí sửa chữa/ thêm/ xóa thơng tin của sản phẩm.
D3: Thông tin được lưu vào cơ sở dữ liệu.
D4: Thông báo sửa chữa thành công.

16


4.3.3. Quản lí khách hàng
D1: Thơng tin của khách hàng được hiện lên (tài khoản, mật khẩu, địa chỉ, sđt, …).
D2: Quản lí sửa chữa/ thêm/ xóa thơng tin của sản phẩm.
D3: Thông tin được lưu vào cơ sở dữ liệu.
D4: Thông báo sửa chữa thành công.

17


CHƯƠNG 5: THIẾT KẾ DỮ LIỆU
5.1. Sơ đồ logic
 Bảng sản phẩm
- Bao gồm: tên, hình ảnh, giá, số lượng, xuất xứ, mô tả và thông tin sản phẩm
 Bảng khách hàng
- Bao gồm: mã khách hàng, tài khoản, mật khẩu đăng nhập.
 Bảng chi tiết khách hàng
- Liên kết với bảng khách hàng thông qua Emai - Username.
- Bao gồm các thông tin chi tiết về khách hàng như họ, tên, địa chỉ, số điện thoại.

18



5.2. Thiết kế xử lí
5.2.1. Đăng kí

19


5.2.2. Đăng nhập

20


5.3.3. Sản phẩm

21


5.3.4. Thanh toán

22


5.3. Thiết kế giao diện
5.3.1. Trang chủ (Home)
 Header (Được hiện thị lại tại tất cả page của trang web)

Header trên, gồm 2 chức năng chính:
Login: chuyển đến trang đăng nhập.
Icon button: Logout, sử dụng khi người dùng đã đăng nhập.

Navigation

Cart

Home: chuyển đến trang Home.

Icon giỏ hàng: chuyển đến trang giỏ hàng.

Blog: chuyển đến trang Blog.

Slide

Contact: chuyển đến trang Contact.

Slide quảng bá sản phẩm.

 Body


Sản phẩm: Hiện thị sản phẩm hiện bán tại Database.



Banner hình ảnh.

 Footer (Được hiện thị lại tại tất cả page của trang web).



23



24




5.3.2. Mua hàng & Chi tiết sản phẩm


 Mua hàng

Khi người dùng di chuyển con trỏ chuột đến sản phẩm bất kì, các icon hỗ trợ sẽ được

hiển thị lên. Bao gồm:

25