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 🙤🙤🙤🙤🙤 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: Phan Thị Liễu - 19521749 Lê Thị Hoài Giang - 19521447 Vũ Phú Thành – 19522247 NHẬN XÉT CỦA GIẢNG VIÊN …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… LỜI CẢM ƠN Lời em xin chân thành gửi lời cảm ơn đến với giảng viên mơn thầy Mai Xn Hùng nhiệt tình giảng dạy lớp hỗ trợ cho chúng em thông tin cần thiết Cảm ơn thầy hướng dẫn giải đáp thắc mắc cho nhóm bạn lớp suốt trình học tập để chúng em hồn thành mơn hồn thành đề tài thời gian quy định Đồng thời nhóm muốn gửi lời cảm ơn đến bạn bè đưa lời nhận xét, góp ý chân thành, vô quý giá Những người động viên, hỗ trợ nhóm để hồn thành đề tài Với khả thời gian có hạn nên khơng thể tránh khỏi thiếu sót, em mong quan tâm, giúp đỡ thông cảm thầy để chúng em hoàn thiện đề tài Nhóm thực Thủ Đức, ngày 30 tháng năm 2021 LỜI MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ thời đại khoa học - cơng nghệ 4.0 ứng dụng Ngành thương mại điện tử lúc lớn mạnh, doanh nghiệp mong muốn sở hữu website bán hàng dành riêng cho Theo thống kê năm 2019, Việt Nam có khoảng 68,7% dân số sử dụng Internet online trở thành xu hướng phát triển Thì việc sở hữu website bán hàng không giúp doanh nghiệp thu hút thêm lượng lớn khách hàng, mà cịn giúp cho doanh nghiệp đẩy mạnh hoạt động bán hàng, marketing lúc nơi Bên cạnh website bán hàng giúp tiết kiệm 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ả thực Thông qua dẫn chứng này, dễ dàng nhận thấy tính tất yếu thương mại điện tử Chỉ với vài thao tác đơn giản máy tính hay điện thoại có kết nối mạng Internet , nhà cung cấp dịch vụ mang đến tận tay sản phẩm dịch vụ cho bạn Để tiếp cận góp phần vào phổ biến thương mại điện tử Việt Nam, chúng em tìm hiểu xây dựng “Website bán coffee online” với chức hỗ trợ bán hàng, quản lí khách hàng hay cung cấp thơng tin hữu ích café thơng qua chun mục blog Nhóm thực chúng em xin chân thành cảm ơn! Mục lục CHƯƠNG 1: GIỚI THIỆU CHUNG 1.1 Mô tả tài liệu Tài liệu gồm phần chính: + + + + Phần 1: Khảo sát trạng đưa chức cho website Phần 2: Đặc tả yêu cầu website, yêu cầu phi chức sơ đồ tổ chức Phần 3: Thiết kế giao diện code Phần 4: Đưa 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 Á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 đơn giản dễ áp dụng, phù hợp với dự án nhỏ yêu cầu rõ ràng, dễ xếp kế hoạch văn hóa  Khảo sát trạng - Thu thập thông tin thơng qua tài liệu có sẵn website bán café mạng  Phân tích đặc tả yêu cầu - Dựa tên thông tin thu thập đưa chức cần có phác thảo giao diện web  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 mơ hình DFD, Activity để từ xác định kiến trúc hệ thống Thiết kế liệu Phân tích liệu dựa 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 phân tích thiết kế xử lý  Code Kiểm thử - Hoàn thành chức đưa - Tạo 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 việc quan trọng, meeting trao đổi thành viên  Công cụ lưu trữ tài liệu: Google Drive CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 Đặt vấn đề Con người Việt Nam thích loại thức uống trà café Chúng ta dễ dàng bắt gặp nhiều quán café với đa dạng loại hình thị trường Với phát triển ngành kinh tế, mức sống người dần cải thiện Việc tận hưởng sản phẩm đồ uống hấp dẫn mà không cần phải bước chân khỏi nhà trở thành xu Việc bán hàng ứng dụng đặt đồ ăn online làm phụ thuộc vào họ tốn thêm số khoản chi phí Vì lẽ bán hàng website thuận tiện chủ động nhiều 2.2 Phân tích tốn Qua việc tìm hiểu website bán coffee mạng nhóm chúng em dự kiến website có chức sau:   - Đối với người quản trị website: Thay đổi giao diện website Quản lí thơng tin 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 kèm theo thơng tin sản phẩm (hình ảnh, - giá bán, mơ tả, …) Có thể quản lí thơng tin khách hàng thành viên, đơn hàng hay hóa đơn mua hàng - Có thể đăng tải viết trang blog  Đối với khách hàng: - Có thể mua hàng, xem giỏ hàng tốn - Có thể đăng kí để trở thành khách hàng thành viên CHƯƠNG 3: XÁC ĐỊNH YÊU CẦU 3.1 Yêu cầu chức 3.1.1 Yêu cầu lưu trữ Hệ thống lưu trữ thông tin sau - Thông tin sản phẩm: Thông tin tên, giá cả, xuất xứ, hình ảnh, mơ tả sản phẩm Thơng tin người dùng: họ tên, số điện thoại, số thông tin liên lạc để người bán liên lạc với khách hàng quản lí khách hàng thành viên hệ thống 3.1.2 u cầu tính tốn - Tính tốn giá trị đơn hàng dựa giá sản phẩm, thuế 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 user, đảm bảo việc truy xuất ứng với quyền hạn người 3.2 Yêu cầu phi chức - Giao diện thân thiện với người dùng, có chức dễ sử dụng thuận tiện - nhiều thao tác Tương thích với trình duyệt web phổ biến CHƯƠNG 4: ĐẶC TẢ YÊU CẦU 4.1 Sơ đồ Use Case 10 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 trỏ chuột đến sản phẩm bất kì, icon hỗ trợ hiển thị lên Bao gồm: 25  Thêm vào giỏ hàng Icon giỏ hàng: người dùng nhấp chuột vào biểu tượng giỏ hàng, trang web thô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: người dùng nhấp vào biểu tượng chi tiết sản phẩm, chuyển đến trang web để coi thơng tin có sản phẩm  Trang chi tiết sản phẩm 26  27 5.3.3 Trang giỏ hàng  Khu vực 1: Hiển thị sản phẩm mà người dùng thêm vào giỏ hàng Số lượng: người dùng tăng giảm số lượng sản phẩm Biểu tượng xóa: xóa sản phẩm chọn khỏi giỏ hàng  Khu vực 2: Tiếp tục mua hàng Trở trang Home  Khu vực 3: Hiển thị tổng số tiền mà người dùng phải trả Button Thanh toán: di chuyển đến trang toán  -  28   5.3.4 Trang toán Để tố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 Thông tin bao gồm: Họ, Tên, SĐT, Địa chỉ, Email Tiếp tục mua hàng: quay trở trang Home  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ả Thông tin bao gồm: sản phẩm, số lượng, tổng tiền, phí ship Đặt hàng: xác nhận đặt hàng Khi người dùng nhấn vào đặt hàng, trang web thông báo đặt  - hàng thành công Đơn hàng gửi mail khách hàng 29  5.3.5 Trang đăng nhập  Người nhập nhập tên đăng nhập (Username) mật (Password) đă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 đăng nhập thành công quay trở trang Home Nếu sai yêu cầu người dùng nhập lại  5.3.6 Trang đăng kí  Người dùng điền đầy đủ thơng tin vào form đăng kí  Đăng kí thành cơng quay trở trang Home (Page chưa hoàn thiện)  30  5.3.7 Trang quản lí sản phẩm  Để vào trang quản lí sản phẩm, người dùng truy cập trang web theo đường dẫn doan/user/index  Xóa   Nhấn All Product: tất sản phẩm Lựa chọn sản phẩm muốn xóa nhấn delete  Sửa    Nhấn All Product: tất sản phẩm Lựa chọn sản phẩm cần sửa nhấn Edit, trang Edit Người dùng sửa chữa thông tin theo mong muốn mình, bao gồm Tên sản phẩm, Img, Giá, Số lượng, Xuất xứ  Nhấn Edit Product để sửa chữa thành công Trang web quay trở All Products  Thêm  Nhấn Add Product  Người dùng thêm thông tin theo ý muốn Bao gồm Tên sản phẩm, Img, Giá, Số lượng, Xuất xứ 31  Nhấn Add Product (Màu xanh lá)  5.3.8 Trang quản lí khách hàng  Để vào trang quản lí khách hàng, người dùng truy cập trang web theo đường dẫn doan/user/index  Xóa    Sửa Nhấn All User: tất người dùng Lựa chọn khách hàng muốn xóa nhấn delete 32   Nhấn All User: tất khách hàng Lựa chọn khách hàng muốn sửa nhấn Edit Trang sửa khách hàng  Người dùng sửa chữa thông tin (UserName, Password) Edit User  Thêm  Nhấn Add User  Điền thông tin UserName Password nhấn Add User  Người dùng thêm thông tin (UserName, Password) Add User (Màu xanh lá) 33  34  CHƯƠNG 6: CODE & TESTCASE  6.1 Code  Theo mơ hình MVC  MVC từ viết tắt từ Model – View – Controller Đây mơ hình thiết kế sử dụng kỹ thuật phần mềm Mơ hình source code thành phần, tương ứng từ Mỗi từ tương ứng với hoạt động tách biệt mơ hình  Mơ hình MVC thành phần bên MVC  Model (M): Là phận có chức lưu trữ tồn liệu ứng dụng Bộ phận cầu nối thành phần bên View Controller Model thể hình thức sở liệu có đơn giản file XML bình thường Model thể rõ thao tác với sở liệu cho phép xem, truy xuất, xử lý liệu,…   View (V): Đây phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng lấy thơng tin liệu MVC thông qua thao tác truy vấn tìm kiếm sử dụng thơng qua website  35 Thông thường, ứng dụng web sử dụng MVC View phần hệ thống, nơi thành phần HTML tạo Bên cạnh đó, View có chức ghi nhận hoạt động 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, không lấy liệu từ Controller mà hiển thị yêu cầu chuyển cho Controller mà   Controller (C): Bộ phận có nhiệm vụ xử lý yêu cầu người dùng đưa đến thông qua view Từ đó, C đưa liệu phù hợp với người dùng Bên cạnh đó, Controller cịn có chức kết nối với model   Luồng tương tác thành phần MVC  6.2 TestCase  6.2.1 Đăng nhập  Bước 1: Chọn chức “đăng nhập” từ hệ thống  Bước 2: Nhập tên đăng nhập “ ” mật “ ”  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 “ đă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” quy định  Bước 3: Nhấn “Đăng Ký”  🙤Đăng ký thành công  6.2.3 Thêm sản phẩm  Bước 1: Nhập tên đăng nhập “phanlieubn75@gmail.com” mật “phanlieubn759”  Bước 2: Chọn “ Add Product” 36  Bước 3: Nhập “ tên sản phẩm”, “hình ảnh”, “giá”, “số lượng”, “xuất xứ”  Bước 4: Nhấn “Add Product”  🙤Thêm sản phẩm thành công  6.2.4.Thêm người dùng  Bước 1: Nhập tên đăng nhập “phanlieubn75@gmail.com” mật “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” mật “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  37  CHƯƠNG 7: KẾT LUẬN  7.1 Kết đạt  7.1.1 Về môn học - Học ngơn ngữ lập trình html, css, javascript, jquery, php số frame - work bootstraps Phối hợp hệ quản trị sở liệu MySqli PHP Tạo trang web với vài chức  7.1.2 Về quản lí nhóm - Biết cách phối hợp thành viên nhóm để hồn thành đề tài Phân chia cơng việc thành viên nhóm  7.2 Hạn chế  Giao diện web chưa tối ưu hiệu  Chưa đầy đủ chức năng, chức phát sinh nhiều lỗi  7.3 Tài liệu tham khảo  Theo tài liệu giảng viên gửi course  38 ... 2021 LỜI MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ thời đại khoa học - công nghệ 4.0 ứng dụng Ngành thương mại điện tử lúc lớn mạnh, doanh nghiệp mong muốn sở hữu website bán hàng dành riêng cho Theo... phí Vì lẽ bán hàng website thuận tiện chủ động nhiều 2.2 Phân tích tốn Qua việc tìm hiểu website bán coffee mạng nhóm chúng em dự kiến website có chức sau:   - Đối với người quản trị website: ... (theme) dành cho người sử dụng Nơi mà người dùng lấy thơng tin liệu MVC thông qua thao tác truy vấn tìm kiếm sử dụng thơng qua website  35 Thông thường, ứng dụng web sử dụng MVC View phần hệ thống,