Phát triển ứng dụng Web: Website bán cafe

Đồ án cuối kì môn học phát triển ứng dụng web. Chủ đề: Website bán cafe. Để 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, nhóm đã 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 chuyên mục blog.

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

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 MaiXuâ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ớpsuốt quá trình học tập để chúng em có thể hoàn thành bộ môn và hoàn thành đề tài đúng thờigian 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ậnxét, góp ý chân thành, vô cùng quý giá Những người đã động viên, hỗ trợ nhóm để hoà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 hoàn thiện hơn về đề tài củamình

Nhóm thực hiện

Thủ Đức, ngày 30 tháng 5 năm 2021

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 đềumong 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úpdoanh 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í (thuê nhân công, kho bãi), bán hàng tự động 24/7 mà còn ngườikhó 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ảnphẩ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ánhà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 chuyên mụcblog

Nhóm thực hiện chúng em xin chân thành cảm ơn!

4

Mục lục

CHƯƠNG 1: GIỚI THIỆU CHUNG 7

1.1 Mô tả tài liệu 7

1.2 Kế hoạch thực hiện 7

1.3 Công cụ sử dụng để quản lí dự án 8

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 9

2.1 Đặt vấn đề 9

2.2 Phân tích bài toán 9

CHƯƠNG 3: XÁC ĐỊNH YÊU CẦU 10

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

3.1.1 Yêu cầu lưu trữ 10

3.1.2 Yêu cầu tính toán 10

3.1.3 Yêu cầu phân quyền hệ thống 10

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

CHƯƠNG 4: ĐẶC TẢ YÊU CẦU 11

4.1 Sơ đồ Use Case 11

4.2 Sơ đồ Activity 12

4.2.1 Đăng nhập 12

4.2.2 Đăng kí 13

4.2.3 Mua hàng 14

4.2.4 Xem giỏ hàng 15

4.2.5 Thanh toán 16

4.2.6 Quản lí 16

4.3 Sơ đồ DFD 17

4.3.1 Mua hàng 17

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

4.3.3 Quản lí khách hàng 18

CHƯƠNG 5: THIẾT KẾ DỮ LIỆU 19

5.1 Sơ đồ logic 19

5.2.2 Đăng nhập 21

5.3.3 Sản phẩm 22

5.3.4 Thanh toán 23

5.3 Thiết kế giao diện 24

5.3.1 Trang chủ (Home) 24

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

5.3.3 Trang giỏ hàng 28

5.3.4 Trang thanh toán 29

5.3.5 Trang đăng nhập 30

5.3.6 Trang đăng kí 30

5.3.7 Trang quản lí sản phẩm 31

5.3.8 Trang quản lí khách hàng 32

CHƯƠNG 6: CODE & TESTCASE 35

6.1 Code 35

6.2 TestCase 36

6.2.1 Đăng nhập 36

6.2.2 Đăng ký tài khoản 36

6.2.3 Thêm sản phẩm mới 36

6.2.4.Thêm người dùng mới 37

6.2.5 Chỉnh sửa thông tin người dùng 37

CHƯƠNG 7: KẾT LUẬN 38

7.1 Kết quả đạt được 38

7.1.1 Về môn học 38

7.1.2 Về quản lí nhóm 38

7.2 Hạn chế 38

7.3 Tài liệu tham khảo 38

6

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

 Thiết kế

a 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.

b 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.

8

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ảithiệ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ốnthê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 toá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,

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áchhàng là thành viên của hệ thống

3.1.2 Yêu cầu tính toán

- Tính toá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.

10

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

- 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

- 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.

12

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

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.

14

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

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 toá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.

16

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

18

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

CHƯƠNG 5: THIẾT KẾ DỮ LIỆU 5.1 Sơ đồ logic

- 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.

20

5.2 Thiết kế xử lí

5.2.1 Đăng kí

5.2.2 Đăng nhập

22

5.3.3 Sản phẩm

5.3.4 Thanh toán

24

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

Home: chuyển đến trang Home

Blog: chuyển đến trang Blog

Contact: chuyển đến trang Contact

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:

Thêm vào giỏ hàng

báo thêm vào giỏ hàng thành công

Chi tiết sản phẩm: Icon chi tiết sản phẩm: khi người dùng nhấp vào biểu tượng chi tiết sản

phẩm, sẽ được chuyển đến trang web mới để coi các thông tin hiện có về sản phẩm

 Trang chi tiết sản phẩm

28

5.3.3 Trang giỏ hàng

Khu vực 1: Hiển thị các sản phẩm mà người dùng đã thêm vào giỏ hàng

Khu vực 2: Tiếp tục mua hàng

Khu vực 3: Hiển thị tổng số tiền mà người dùng phải trả

5.3.4 Trang thanh toán

Để có thể thanh toán được, người dùng bắt buộc phải đăng nhập

Khu vực 1: Hiện thị thông tin chi tiết khách hàng mà người dùng đã đăng kí từ trước

Khu vực 2: Hiện thị thông tin chi tiết tổng tiền mà khách hàng phải trả

đặt hàng thành công Đơn hàng sẽ được gửi về mail của khách hàng

30

5.3.5 Trang đăng nhập

Người nhập sẽ nhập tên đăng nhập (Username) và mật khẩu (Password) đã được đăng kí từtrước

Nhấn button Sign In Nếu thông tin đăng nhập trùng khớp với database sẽ đăng nhập thành công

và quay trở về trang Home Nếu sai thì yêu cầu người dùng nhập lại

5.3.7 Trang quản lí sản phẩm

Để có thể vào được trang quản lí sản phẩm, người dùng truy cập trang web theo đường dẫndoan/user/index

Nhấn All Product: tất cả các sản phẩm sẽ hiện ra

Lựa chọn sản phẩm muốn xóa và nhấn delete

Nhấn All Product: tất cả sản phẩm sẽ hiện ra

32

Lựa chọn sản phẩm cần sửa và nhấn Edit, trang Edit sẽ được hiện ra.

Người dùng sửa chữa thông tin theo mong muốn của mình, bao gồm Tên sản phẩm, Img, Giá,

Lựa chọn khách hàng muốn xóa và nhấn delete.

Nhấn All User: tất cả khách hàng sẽ hiện ra

Lựa chọn khách hàng muốn sửa và nhấn Edit Trang sửa khách hàng sẽ được hiện ra

34

Người dùng sửa chữa thông tin (UserName, Password) rồi nhất Edit User.

Nhấn Add User

Điền thông tin UserName và Password và nhấn Add User

Người dùng thêm các thông tin (UserName, Password) rồi nhất Add User (Màu xanh lá)

CHƯƠNG 6: CODE & TESTCASE 6.1 Code

Theo mô hình MVC

MVC là từ viết tắt bởi 3 từ Model – View – Controller Đây là mô hình thiết kế sử dụng trong

kỹ thuật phần mềm Mô hình source code thành 3 phần, tương ứng mỗi từ Mỗi từ tương ứng với một hoạt động tách biệt trong một mô hình

Mô hình MVC và các thành phần bên trong của MVC

Model (M):

Là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng Bộ phận này là một cầu nối giữa 2 thành phần bên dưới là View và Controller Model thể hiện dưới hìnhthức là một cơ sở dữ liệu hoặc có khi chỉ đơn giản là một file XML bình thường Model thể hiện rõ các thao tác với cơ sở dữ liệu như cho phép xem, truy xuất, xử lý dữ liệu,…

View (V):

Đây là phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thông qua các website

36

Thông thường, các ứng dụng web sử dụng MVC View như một phần của hệ thống, nơi các thành phần HTML được tạo ra Bên cạnh đó, View cũng có chức năng ghinhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller, cũng không được lấy dữ liệu từ Controller mà chỉ hiển thị yêu cầu chuyển cho Controller mà thôi.

Controller (C):

Bộ phận có nhiệm vụ xử lý các yêu cầu người dùng đưa đến thông qua view Từ

đó, C đưa ra dữ liệu phù hợp với người dùng Bên cạnh đó, Controller còn có chức năng kết nối với model

Luồng tương tác giữa các thành phần trong MVC

6.2 TestCase

6.2.1 Đăng nhập

Bước 1: Chọn chức năng “đăng nhập” từ hệ thống

Bước 2: Nhập tên đăng nhập “ ” và mật khẩu “ ”

Bước 3: Nhấn “Đăng nhập”

Đăng nhập thành công

6.2.2 Đăng ký tài khoản

Bước 1: Chọn chức năng “ đăng ký” từ hệ thống

Bước 2: Nhập “Email”, “Mật khẩu”, “Số điện thoại’, “Địa chỉ”, “Họ”, “Tên” đúng quy định.Bước 3: Nhấn “Đăng Ký”

Đăng ký thành công

6.2.3 Thêm sản phẩm mới

Bước 1: Nhập tên đăng nhập “phanlieubn75@gmail.com” và mật khẩu “phanlieubn759”

Bước 2: Chọn “ Add Product”

Bước 3: Nhập “ tên sản phẩm”, “hình ảnh”, “giá”, “số lượng”, “xuất xứ”

Thêm sản phẩm thành công.

6.2.4.Thêm người dùng mới

Bước 1: Nhập tên đăng nhập “phanlieubn75@gmail.com” và mật khẩu “phanlieubn759”.Bước 2: Chọn “ Add User”

Bước 3: Nhập “ Username”, “Password”, “level”

Bước 4: Nhấn “Add User”

Thêm người dùng thành công

6.2.5 Chỉnh sửa thông tin người dùng

Bước 1: Nhập tên đăng nhập “phanlieubn75@gmail.com” và mật khẩu “phanlieubn759”.Bước 2: Chọn “ All User”

Bước 3: Chọn “ Edit”

Bước 4: Chọn thông tin cần chỉnh sửa: “ Username”, “Password”, “level”

Bước 5: Nhấn “Edit User”

Chỉnh sửa người dùng thành công

38

CHƯƠNG 7: KẾT LUẬN 7.1 Kết quả đạt được

7.1.1 Về môn học

- Học được các ngôn ngữ lập trình như html, css, javascript, jquery, php và một số frame

work như bootstraps

- Phối hợp hệ quản trị cơ sở dữ liệu MySqli và PHP.

- Tạo ra được trang web với một vài chức năng cơ bản.

7.1.2 Về quản lí nhóm

- Biết cách phối hợp giữa các thành viên trong nhóm để có thể hoàn thành được đề tài

Phân chia công việc giữa các thành viên trong nhóm

7.2 Hạn chế

Giao diện web chưa được tối ưu và hiệu quả

Chưa đầy đủ các chức năng, chức năng còn phát sinh nhiều lỗi

7.3 Tài liệu tham khảo

Theo các tài liệu được giảng viên gửi trên course