Thiết kế và xây dựng website highland coffee

TRƯỜNG ĐẠI HỌC SƯ PHẠM ĐÀ NẴNG KHOA TIN HỌC BÁO CÁO KHÓA LUẬN TỐT NGHIỆP Đề tài: THIẾT KẾ VÀ XÂY DỰNG WEBSITE HIGHLAND COFFEE GVHD: SVTH: Lớp học phần: TS Nguyễn Trần Quốc Vinh Lê Nho Thắng 17CNTTC Đà Nẵng, ngày … tháng 04 năm 2021 1 MỤC LỤC MỤC LỤC DANH MỤC HÌNH ẢNH LỜI CẢM ƠN MỞ ĐẦU 10 I Lý chọn đề tài 10 II Mục tiêu 11 Mục tiêu chung 11 Mục tiêu đề tài 11 Kết dự kiến 12 III Đối tượng phạm vi đề tài 12 Đối tượng nghiên cứu 12 Phạm vi đề tài 12 Phương pháp nghiên cứu 12 IV Tiêu chí đề tài 13 Chương I: TỔNG QUAN VỀ CÔNG NGHỆ 14 I Tổng quan HTML5/CSS3/JS 14 Sơ lược HTML5 14 Sơ lược CSS3 17 Sơ lược Js (JavaScript) 19 II React Js 22 III Cơ sở liệu NoSQL Firebase Firestore 23 Cơ sở liệu NoSQL 23 Firebase Firestore 25 Chương II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 27 I Giới thiệu toán 27 Khảo sát 27 Phương pháp thu thập liệu 28 II Phân tích hệ thống 28 Mơ tả tốn 28 Biều đồ tự 29 Biều đồ hoạt động 35 Biều đồ trang thái 40 III Mô tả hệ thống 44 Hoạt động website 44 Yêu cầu chức 45 SVTH: Lê Nho Thắng – Lớp: 17CNTTC Yêu cầu phi chức 45 Bảng Demo yêu cầu chức 46 Mơ hình liệu 47 Chương III: KẾT QUẢ VÀ CÀI ĐẶT WEBSITE 50 I Giao diện website 50 II Giao diện người dùng 52 III Giao diện quản trị viên 54 KẾT LUẬN 56 I Kết đạt 56 II Hạn chế đề tài 56 III Hướng phát triển 56 SVTH: Lê Nho Thắng – Lớp: 17CNTTC DANH MỤC HÌNH ẢNH Hình 1: Các loại biến 20 Hình 2: Các loại toán tử 20 Hình 3: Hàm 21 Hình 4: Ví dụ Virtual DOM 22 Hình 5: Cơ chế one-way data binding 22 Hình 6: Các loại sở liệu NoSQL 24 Hình 7: Phân biệt sở liệu SQL NoSQL 25 Hình 8: Sơ đồ Use-case 28 Hình 9: Sơ đồ tự - Đăng nhập 30 Hình 10: Sơ đồ tự - Đăng ký 31 Hình 11: Sơ đồ tự - Tìm kiếm 32 Hình 12: Sơ đồ tự - Chỉnh sửa thông tin 32 Hình 13: Sơ đồ tự - Đặt hàng toán 33 Hình 14: Sơ đồ tự - Quản lý người dùng 34 Hình 15: Sơ đồ tự - Thống kê 34 Hình 16: Sơ đồ hoạt động - Đăng nhập 35 Hình 17: Sơ đồ hoạt động - Đăng ký 36 Hình 18: Sơ đồ hoạt động - Tìm kiếm 37 Hình 19: Sơ đồ hoạt động - Chỉnh sửa thơng tin 37 Hình 20: Sơ đồ hoạt động - Đặt hàng toán 38 Hình 21: Sơ đồ hoạt động - Quản lý người dùng 39 Hình 22: Sơ đồ hoạt động - Thống kê 40 Hình 23: Sơ đồ trạng thái - Đăng nhập 41 Hình 24: Sơ đồ trạng thái - Đăng ký 42 Hình 25: Sơ đồ trạng thái - Tìm kiếm 43 Hình 26: Sơ đồ trạng thái - Chỉnh sửa thông tin 44 Hình 27: Sơ đồ trạng thái - Quản lý người dùng 44 Hình 28: Sơ đồ lớp 47 Hình 29: Firebase - bảng sản phẩm 48 Hình 30: Firebase - bảng người dùng 48 Hình 31: Firebase - Bảng chi nhánh, tọa độ 49 Hình 32: Giao diện - Trang chủ 50 Hình 33: Giao diện - Về 50 Hình 34: Giao diện - Tin tức 51 SVTH: Lê Nho Thắng – Lớp: 17CNTTC Hình 35: Giao diện - Món u thích 51 Hình 36: Giao diện - Giỏ hàng 51 Hình 37: Giao diện - Đăng ký 52 Hình 38: Giao diện - Đăng nhập 52 Hình 39: Giao diện - Sản phẩm 52 Hình 40: Giao diện - Chi nhánh 53 Hình 41: Giao diện - Chọn đồ kèm 53 Hình 42: Giao diện - Chức call now 54 Hình 43: Giao diện - Quản lý sản phẩm 54 Hình 44: Giao diện - Quản lý người dùng 54 Hình 45: Giao diện - Quản lý chi nhánh 55 SVTH: Lê Nho Thắng – Lớp: 17CNTTC LỜI CẢM ƠN Em chân thành cảm ơn thầy cô khoa Tin, trường Đại học Sư phạm, Đại học Đà Nẵng tận tình truyền đạt kiến thức quý báu suốt năm đại học vừa qua, để hơm em có đầy đủ kiến thức để thực đề tài khóa luận Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép chắn khơng tránh khỏi thiếu sót Em mong nhận thơng cảm, góp ý tận tình bảo q Thầy Cơ bạn Đặc biệt, em xin chân thành cảm ơn TS Nguyễn Trần Quốc Vinh, tận tình giúp đỡ, tháo gỡ khó khăn, đưa lời khuyên đắn, giúp em hồn thành tốt cơng việc giao bổ sung thêm nhiều kiến thức kiến thức Xin trân trọng cảm ơn!  Đà Nẵng, ngày … tháng năm 2021 Sinh viên thực Lê Nho Thắng SVTH: Lê Nho Thắng – Lớp: 17CNTTC LỜI CAM ĐOAN Tôi xin cam đoan: Những nội dung báo cáo thực hướng dẫn trực tiếp GVHD TS Nguyễn Trần Quốc Vinh Mọi tham khảo dùng báo cáo trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm cơng bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin chịu hồn tồn trách nhiệm Sinh viên thực hiện, Lê Nho Thắng SVTH: Lê Nho Thắng – Lớp: 17CNTTC NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Đà Nẵng, ngày tháng năm 2021 Cán hướng dẫn SVTH: Lê Nho Thắng – Lớp: 17CNTTC NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Đà Nẵng, ngày tháng năm 2021 Hội đồng phản biện SVTH: Lê Nho Thắng – Lớp: 17CNTTC MỞ ĐẦU I Lý chọn đề tài Theo người biết Highland Coffee quán Cafes tiếng Việt Nam Do việc cạnh tranh mảng dịch vụ, giải trí trở nên gắt gao hơn, chuyên nghiệp Qua thúc đẩy cách làm việc người, sử dụng nhiều trí óc, tiện ích, mơ hình kinh doanh trở mở rộng, phát triển Bạn kinh doanh lĩnh vực muốn phát triển đồng nghĩa với việc quản lý trở nên ngày khó khăn, tốn nhiều cơng sức Việc quản lý mạng internet, qua phần mềm quản lý chuyên nghiệp lựa chọn hàng đầu cho công việc kinh doanh xu hướng chung giới Từ internet, ứng dụng quản lý trở thành lựa chọn tối ưu thiết yếu việc kinh doanh dễ hiểu có ưu điểm siêu việt mà cách quản lý qua sổ sách giấy tờ khơng thể có Và cửa hàng coffee khơng nằm ngồi vịng xốy, dịng chảy hiên đại hóa, văn minh hóa, yêu cầu khắc khe, khó tính kinh doanh Khi cửa hàng coffee mọc lên hàng ngày, đủ thể loại, đủ phong cách Một người mở cửa hàng coffee khơng cịn theo định nghĩa “một chủ cửa hàng” nữa, mà thay vào người mở chuỗi cửa hàng coffee, thành phố, đất nước hay nằm rải rác toàn giới Câu hỏi đặt người chủ quản lý nào, tốn tiền để quản lý cách tối ưu nhất? Website Highland Coffee câu trả lời hoàn hảo cho việc Những ưu điểm phần mềm vô tiện lợi góp phần cơng việc kinh doanh, cạnh tranh kinh doanh với chuỗi cửa hàng khác Tại lại nói góp phần quan trọng việc cạnh tranh với cửa hàng khác: Lý thứ nhất: (Đây coi lý vô quan trọng phần mềm mang lại) cần phép tính đơn giản thơi, bạn phải tốn tiền việc thuê nhiều nhân viên, quản lý, lại cửa hàng bạn? Trong có phần mềm bạn làm công việc quản lý nơi đâu thông qua mạng internet, tiết kiệm thời gian Những ly coffee, thức uống bạn định giá hao phí sức lao động, mặt bằng, thuế, giá nguồn hàng Ở hao phí sức lao động, có phần mềm bạn tối ưu số lượng nhân viên chuỗi cửa hàng bạn qua hạ giá thành thức uống bạn xuống mức thấp đem lại nguồn lợi nhuận, gia tăng mức độ cạnh tranh, đem lại lợi giá thành SVTH: Lê Nho Thắng – Lớp: 17CNTTC 10 Hình 25: Sơ đồ trạng thái - Tìm kiếm 4.4 Chức chỉnh sửa thông tin SVTH: Lê Nho Thắng – Lớp: 17CNTTC 43 Hình 26: Sơ đồ trạng thái - Chỉnh sửa thông tin 4.5 Chức quản lý người dùng Hình 27: Sơ đồ trạng thái - Quản lý người dùng III Mô tả hệ thống Hoạt động website Khi đăng nhập với tư cách người dùng: Là người dùng bạn phải cung cấp thông tin Email, Họ tên đầy đủ, số điện thoại, địa chỉ, Thông tin bạn hệ thống lưu vào bạn thực SVTH: Lê Nho Thắng – Lớp: 17CNTTC 44 đặt hàng gọi đến số điện thoại mà bạn đặt hàng sau xác nhận giao đến địa bạn Khi đăng nhập với tư cách quản trị viên: Là quản trị viên quản lý người dùng, hệ thống tin tức, hệ thống thể loại-sản phẩm, … Yêu cầu chức Website phải có đầy đủ chức dành cho người dùng quản trị viên Các chức dành cho người dùng : Đăng nhập, đăng ký, mua hàng, xem sản phẩm, chọn size topping cho sản phẩm Các chức dành cho admin : Đăng nhập, quản lý người dùng, quản lý tin tức, quản lý sản phẩm, … Yêu cầu phi chức - Giao diện đẹp mắt, thân thiện với người dùng - Hệ thống xử lý nhanh, bị sử cố - An tồn bảo mật thơng tin - Có tính tương thích cao - Tốc độ truy cập phải đảm bảo truy cập nhiều người dùng truy cập vào - Dễ dàng nâng cấp hệ thống sau SVTH: Lê Nho Thắng – Lớp: 17CNTTC 45 Bảng Demo yêu cầu chức STT Chức 01 Modul giới thiệu website 02 Modul người dùng Mô tả - Chức sử dụng public, cho phép người dùng đăng ký tạo tài khoản cá nhân, cung cấp thông tin người dùng - Lựa chọn sản phẩm - Cho phép xem tin tức sản phẩm, tin tức thương hiệu - Thay đổi thông tin cá nhân - Thay đổi mật 03 Module gợi ý cửa - Dựa vào địa điểm người dùng để hàng gần bạn đưa gợi ý - Địa điểm cụ thể có kèm theo google map 04 Module sản phẩm - Danh sách sản phẩm theo thể loại - Những thông tin cụ thể sản phẩm 05 Module tin tức - Tin túc thương hiệu - Tin tức sản phẩm - Tin tức kiện, khuyến 06 Module liên hệ - Liên hệ thêm với câu hỏi thắc mắc - Liên hệ báo lỗi hệ thống 07 Module đặt hàng - Sau chọn sản phẩm cần mua người dùng tiến hành xác nhận mua Module quản trị viên - Quản lý người dùng - Quản lý sản phẩm - Quản lý hóa đơn 08 SVTH: Lê Nho Thắng – Lớp: 17CNTTC 46 Mơ hình liệu 5.1 Sơ đồ lớp Hình 28: Sơ đồ lớp Cơ sở liệu hệ thống bao gồm bảng sau: • Users : Là bảng chứa liệu thông tin người dùng • Orders : Là bảng chứa liệu đơn đặt hàng • Products : Là bảng chứa liệu thơng tin sản phẩm • Supplier : Là bảng chứa liệu nhà cung cấp • Customer : Là bảng chứa liệu khách hàng • Bill : Là bảng chứa liệu hóa đơn • Roles : Là bảng chứa liệu phân quyền người dùng hệ thống • BillDetails: Là bảng chứa liệu chi tiết hóa đơn SVTH: Lê Nho Thắng – Lớp: 17CNTTC 47 5.2 Thiết lập sở liệu NoSql Firebase Firestore: a Bảng sản phẩm Hình 29: Firebase - bảng sản phẩm b Bảng người dùng Hình 30: Firebase - bảng người dùng SVTH: Lê Nho Thắng – Lớp: 17CNTTC 48 c Bảng chi nhánh Hình 31: Firebase - Bảng chi nhánh, tọa độ SVTH: Lê Nho Thắng – Lớp: 17CNTTC 49 Chương III: KẾT QUẢ VÀ CÀI ĐẶT WEBSITE I Giao diện website Hình 32: Giao diện - Trang chủ Hình 33: Giao diện - Về SVTH: Lê Nho Thắng – Lớp: 17CNTTC 50 Hình 34: Giao diện - Tin tức Hình 35: Giao diện - Món u thích Hình 36: Giao diện - Giỏ hàng SVTH: Lê Nho Thắng – Lớp: 17CNTTC 51 II Giao diện người dùng Hình 37: Giao diện - Đăng ký Hình 38: Giao diện - Đăng nhập Hình 39: Giao diện - Sản phẩm SVTH: Lê Nho Thắng – Lớp: 17CNTTC 52 Hình 40: Giao diện - Chi nhánh Hình 41: Giao diện - Chọn đồ kèm SVTH: Lê Nho Thắng – Lớp: 17CNTTC 53 Hình 42: Giao diện - Chức call now III Giao diện quản trị viên Hình 43: Giao diện - Quản lý sản phẩm Hình 44: Giao diện - Quản lý người dùng SVTH: Lê Nho Thắng – Lớp: 17CNTTC 54 Hình 45: Giao diện - Quản lý chi nhánh SVTH: Lê Nho Thắng – Lớp: 17CNTTC 55 KẾT LUẬN I Kết đạt ✓ Nắm kiến thức thiết kế xây dựng website React js sở liệu NoSql sử dụng Firebase Firestore lưu trữ ngồi cịn có sử dụng kiến thức HTML5, CSS3 JavaScript để thiết kế dựng giao diện người dùng ✓ Xây dựng hệ thống cung cấp chức website nói chung Highland nói riêng ✓ ✓ ✓ ✓ ✓ Giao diện đơn giản, đẹp, lịch giúp người dùng tương tác dễ dàng Cung cấp thông tin sản phẩm, cửa hàng, thương hiệu Cung cấp sản phẩm theo thể loại Thay đổi lựa chọn mua sản phẩm Thêm vào giỏ hàng tiến hành toán ✓ Quản lý danh sách sản phẩm, người dùng, chi nhánh… ✓ Chức call now tự động không cần nhập số điện thoại ✓ Áp dụng đồ thị chi nhánh lên website II Hạn chế đề tài Ngoài vấn làm cịn nhiều vấn đề chưa làm được: - Các khía cạnh tốn chưa khai thác hết - Các chức chưa đạt với mục tiêu đề - Hạn chế đối tượng sử dụng - Chưa thao tác với danh sách sản phẩm, người dùng được, … III Hướng phát triển • Cải thiện chức có xây dựng thêm chức cịn thiếu • Thương mại hóa website • Phát triển thành App • Xây dựng hệ thống quản lý chặt chẽ • Tổ chức sở liệu chặt chẽ tăng thêm tính bảo mật • Tổ chức quyền sử dụng hệ thống chức sử dụng đối tượng cụ thể, rõ ràng, đầy đủ SVTH: Lê Nho Thắng – Lớp: 17CNTTC 56 TÀI LIỆU THAM KHẢO [ ] Giao diện: https://www.highlandscoffee.com.vn/ [ ] Học ReactJS: https://fedu.vn/khoa-hoc/lap-trinh-thiet-ke-web/029-hoc-lap-trinh-react-js-va-reduxtu-dau-tao-ung-dung-fullstack-voi-node-js-react-js/ [ ] https://www.w3schools.com/ [ ] https://console.firebase.google.com/ [ ] Ứng dụng đồ: https://www.npmjs.com/package/google-map-react [ ] Lý thuyết: https://aws.amazon.com/vi/nosql/ https://thachpham.com/ https://techblog.vn/gioi-thieu-ve-co-so-du-lieu-nosql https://viblo.asia/ SVTH: Lê Nho Thắng – Lớp: 17CNTTC 57 ... được: - Xây dựng thành công hệ thống đăng ký, đăng nhập - Xem sản phẩm, thêm sản phẩm vào giỏ hàng - Xây dựng hệ thống đăng ký, đăng nhập, phân quyền dành cho quản trị viên quản lý - Xây dựng hệ... Phương pháp vấn II Phân tích hệ thống Sau khảo sát, nghiên cứu xây dựng hệ thống, đưa cá tệp sở liệu website Hệ thống sở liệu thiết kế, xây dựng quản lý Firebase Firestore Mơ tả tốn 1.1 Sơ đồ Use case... theo, tức HTML5 phải xây dựng dựa nguyên tắc: - Ít phụ thuộc vào plugin chức - Script nên thay markup - Tính độc lập thiết bị (nghĩa có sẵn tất thiết bị cung cấp trải nghiệm kết thúc tương tự)