Đồ án xây dựng website bán điện thoại di động

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG GV HƯỚNG DẪN: TS ĐỖ THỊ THANH TUYỀN Sinh viên thực hiện: VÕ ĐÌNH VÂN - 20522147 NGUYỄN HUỲNH TUẤN KHANG – 20521437 TP HỒ CHÍ MINH, tháng năm 2023 LỜI CẢM ƠN Quá trình hội nhập diễn toàn giới Và trình mở cửa làm cho hoạt động ngoại thương khẳng định vị trí quan trọng Điều dẫn đến phát triển khơng ngừng hoạt động mua bán trao đổi hàng hóa, đặc biệt mặt hàng điện tử điện thoại di động, đóng góp quan trọng tăng trưởng không ngừng điều kiện để phát triển quốc gia Vì vậy, nhóm chúng em định chọn đề tài: “ Xây dựng website bán điện thoại di động ” Bài báo cáo gồm chương sau: Chương 1: Giới thiệu đề tài: giới thiệu khái quát đề tài, lý chọn đề tài, mục tiêu dự án Chương 2: Phân tích công nghệ sử dụng: mô tả công nghệ áp dụng vào dự án, cách sử dụng, chức năng, thành phần, ưu điểm, nhược điểm Chương 3: Phân tích thiết kế hệ thống: trình bày cụ thể sơ đồ Usecase, class diagram, từ tổng quan đến chi tiết kiến trúc hệ thống Chương 4: Phân tích thiết kế giao diện: trình bày tồn hình hiển thị dự án mơ tả cụ thể chức hình Đầu tiên, nhóm muốn gửi lời cảm ơn sâu sắc đến giáo viên hướng dẫn Đỗ Thị Thanh Tuyền tạo hội, giúp đỡ cho nhóm chúng em suốt trình thực hồn thành đồ án Tuy nhiên hạn chế kiến thức thời giạn thực hiện, nhóm chúng em có nhiều thiếu sót Do đó, nhóm mong muốn nhận phản hồi từ để cải thiện nội dung hình thức, từ phát triển tiếp đồ án kì sau với kết tốt Nhóm sinh viên thực VÕ ĐÌNH VÂN – NGUYỄN HUỲNH TUẤN KHANG NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Ngày…tháng……năm 2023 Giảng viên hướng dẫn TS Đỗ Thị Thanh Tuyền MỤC LỤC Chương GIỚI THIỆU ĐỀ TÀI 1.1 Tóm tắt đồ án 1.2 Lý chọn đề tài 1.3 Mục tiêu 1.3.1 Customer and Visitor 1.3.2 Manager 1.4 Phạm vi 1.5 Đối tượng sử dụng 1.5.1 Visitor 1.5.2 Customer 1.5.3 Manager 1.6 Tổng quan dự án 1.7 Yêu cầu hệ thống – mục đích dự án 1.8 Các chức 1.9 Công nghệ sử dụng 1.10 Mơi trường lập trình 1.11 Công cụ hỗ trợ Chương GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 2.1 React 2.1.1 Giới thiệu [5.1] 2.1.2 Ưu điểm [5.2] 2.1.3 Nhược điểm [5.2] 2.2 Redux [5.3] 2.2.1 Giới thiệu 2.2.2 Cách hoạt động Redux 2.3 MySQL [6.2] 2.3.1 MySQL gì? 2.3.2 Cơ chế hoạt động 10 2.3.3 Tại dùng MySQL 11 2.3.4 Ưu điểm 11 2.3.5 Nhược điểm 12 2.4 NodeJS [6.1] 13 2.4.1 Khái niệm 13 2.4.2 Tính 14 2.4.3 Ứng dụng 14 2.4.4 Ưu điểm 15 2.4.5 Nhược điểm 15 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG 17 3.1 Use-case diagram 17 3.2 Action list 17 3.3 Use-case list 18 3.4 Use-case cụ thể 19 3.4.1 Use-case "Login" 19 3.4.2 Use-case “Logout” 20 3.4.3 Use-case “Register” 21 3.4.4 Use-case “Forgot Password” 22 3.4.5 Use-case “Manage Cart” 22 3.4.6 Use-case “Payment” 23 3.4.7 Use-case “Change User Profile” 24 3.4.8 Use-case “Manage product” 25 3.5 Class diagram 26 3.6 Class diagram explan 27 3.6.1 Bảng user 27 3.6.2 Bảng category 28 3.6.3 Bảng products 28 3.6.4 Bảng image 29 3.6.5 Bảng size 29 3.6.6 Bảng color 30 3.6.7 Bảng cart 30 3.6.8 Bảng invoice 31 3.6.9 Bảng detail invoice 31 3.7 Tổng quan thiết kế kiến trúc 32 3.8 Chi tiết thiết kế kiến trúc 32 3.8.1 Frontend layer 32 3.8.2 Backend layer 33 Chương XÂY DỰNG ỨNG DỤNG 35 4.1 Header 35 4.2 Footer 36 4.3 Màn hình Login 37 4.4 Màn hình Register 38 4.5 Màn hình Forgot password 39 4.6 Màn hình Change password 40 4.7 Màn hình Home Page 42 4.8 Màn hình Category 44 4.9 Màn hình Product detail 45 4.10 Màn hình Cart 47 4.11 Màn hình Order info 48 4.12 Màn hình Detail Bill 50 4.13 Màn hình Thanks 51 4.14 Màn hình Page not found 52 4.15 Màn hình Profile (User profile) 53 4.16 Màn hình Profile (Change password) 55 4.17 Màn hình Profile (Delivery address) 56 4.18 Màn hình Profile (Purchase) 58 4.19 Màn hình Profile (See detail) 59 4.20 Màn hình Profile (See logout) 60 4.21 Màn hình Profile (Purchase empty) 61 4.22 Màn hình Product Modifier 62 4.23 Màn hình Product Modifier (Modal) 63 4.24 Màn hình Product List 65 4.25 Màn hình Product List (Empty) 66 KẾT LUẬN 67 TÀI LIỆU THAM KHẢO 69 DANH MỤC BẢNG Bảng 3.1: Bảng danh sách hoạt động 17 Bảng 3.2: Bảng danh sách Usecase 18 Bảng 3.3: Mô tả Use Case Login 19 Bảng 3.4: Mô tả Use Case Logout 20 Bảng 3.5: Mô tả Use Case Register 21 Bảng 3.6: Mô tả Use Case Forgot Password 22 Bảng 3.7: Mô tả Use Case Manage Cart 22 Bảng 3.8: Mô tả Use Case Payment 23 Bảng 3.9: Mô tả Usecase Change User Profile 24 Bảng 3.10: Mô tả Use Case Manage product 25 Bảng 3.11: Bảng User 27 Bảng 3.12: Bảng category 28 Bảng 3.13: Bảng products 28 Bảng 3.14: Bảng image 29 Bảng 3.15: Bảng size 29 Bảng 3.16: Bảng color 30 Bảng 3.17: Bảng cart 30 Bảng 3.18: Bảng invoice 31 Bảng 3.19: Bảng detail invoice 31 Bảng 4.1: Tính Header 35 Bảng 4.2: Tính Footer 36 Bảng 4.3: Tính hình Login 37 Bảng 4.4: Tính hình Register 38 Bảng 4.5: Tính hình Forgot password 40 Bảng 4.6: Tính hình Change password 41 Bảng 4.7: Tính hình Home Page 43 Bảng 4.8: Tính hình Category 44 Bảng 4.9: Tính hình Product detail 46 Bảng 4.10: Tính hình Cart 47 Bảng 4.11: Tính hình Order info 49 Bảng 4.12: Tính hình Register 51 Bảng 4.13: Tính hình Profile (User profile) 53 Bảng 4.14: Tính hình Profile (Change password) 55 Bảng 4.15: Tính hình Profile (Delivery address) 57 Bảng 4.16: Tính hình Profile (Purchase) 58 Bảng 4.17: Tính hình Product Modifier 62 Bảng 4.18: Tính hình Product Modifier (Modal) 64 Bảng 4.19: Tính hình Product List 65 4.16 Màn hình Profile (Change password) Hình 4.17: Màn hình Profile (Change password) Bảng 4.14: Tính hình Profile (Change password) STT Tên tính Loại Current password Text Nhập mật New password Text Nhập mật 55 Chức Confirm new Text Nhập lại mật Button Cập nhật lại mật password 4.17 Update Màn hình Profile (Delivery address) Hình 4.18: Màn hình Profile (Delivery address) 56 Bảng 4.15: Tính hình Profile (Delivery address) STT Tên tính Loại Chức Full name Text Nhập tên người dùng Email Text Nhập email Phone number Text Nhập số điện thoại Province Button Nhập tỉnh District Button Nhập quận Wards Button Nhập huyện Nhập đầy đủ chi tiết địa Address detail Text Update Button 57 Cập nhật thông tin 4.18 Màn hình Profile (Purchase) Hình 4.19: Màn hình Profile (Purchase) Bảng 4.16: Tính hình Profile (Purchase) STT Tên tính Loại See detail Button Chức Chuyển sang trang see detail Chuyển sang đơn Pagination Button hàng 58 4.19 Màn hình Profile (See detail) Hình 4.20: Màn hình See detail 59 4.20 Màn hình Profile (See logout) Hình 4.21: Màn hình Profile (See logout) 60 4.21 Màn hình Profile (Purchase empty) Hình 4.22: Màn hình Profile (Purchase empty) 61 4.22 Màn hình Product Modifier Hình 4.23: Màn hình Product Modifier Bảng 4.17: Tính hình Product Modifier STT Tên tính Loại Chức Product Name Text Nhập tên sản phẩm Discount Text Nhập phần trăm giảm giá Promotion Text Mô tả 62 Mô tả chi tiết sản phẩm Description Text Image Button Thêm ảnh Unit Button Mở modal Save Button Lưu thông tin sản phẩm 4.23 Màn hình Product Modifier (Modal) Hình 4.24: Màn hình Product Modifier (Modal) 63 Bảng 4.18: Tính hình Product Modifier (Modal) STT Tên tính Loại Chức Name size Text Nhập tên size Price size Text Nhập giá size Cộng Button Name color Text Nhập tên màu Quantity Text Nhập số lượng Remove Button Thêm or nhiều màu Xóa màu số lượng màu Cancel Button Tắt modal OK Button Thêm size 64 4.24 Màn hình Product List Hình 4.25: Màn hình Product List Bảng 4.19: Tính hình Product List STT Tên tính Loại Search Button Chức Tìm kiếm sản phẩm Chuyển đến trang product Create Button modifier Chuyển đến trang product Update Button modifier hiển thị lại sản phẩm muốn cập nhật Delete Button 65 Xóa sản phẩm 4.25 Màn hình Product List (Empty) Hình 4.26: Màn hình Product List (Empty) 66 KẾT LUẬN ● Sau phân tích làm rõ từ giao diện đến tính cách sử dụng trang mà nhóm tạo hệ thống Nhóm đúc kết điểm sau đồ án hoàn thành ● Thứ ưu điểm website bán điện thoại di động, mô theo trang web hoạt động mua bán điện thoại lớn nay, trang Web thiết kế đại dễ sử dụng với nút thao tác tạo lập đơn giản Giúp người dùng dễ dàng sử dụng mà không lo gặp phải khó khăn thực mua hàng Bên cạnh đó, website hiển thị đầy đủ chức mà nhóm trình bày, sau tóm tắt phần chức mà nhóm đề cập: o Về mặt quản lý: Các chức thêm, xóa, sửa, tìm kiếm update o Về mặt sử dụng: Các chức hiển thị thao tác (Đăng nhập, đăng ký, mua hàng, điền thông tin, xem sản phẩm, chọn bỏ vào giỏ hàng) o Về hình thức: Trang web hiển thị nội dung bắt mắt thông tin cập nhật liên tục ● Sau xử lý chức phần giao diện hệ thống, nhóm có định hướng hướng phát triển website, cụ thể khắc phục số vấn đề trình mua bán sản phẩm, hàng hố hỗ trợ q trình đặt hàng diên suôn sẻ không gặp tình phức tạp thao tác ● Tất hệ thống có ưu điểm nhược điểm, phía nhóm đề cập đến phần ưu điểm, nên phần nhóm nói nhược điểm cần cải thiện thêm trình thực Hiện tại, website gần hoàn thiện phần chức mức nên chưa đáp ứng tính nâng cao hỗ trợ tương tác với khách hàng phần mềm dự đoán 67 số lượng mua- bán Tất vấn đề đề cập khắc phục tương lai Chưa thực thống kê doanh thu cho quản lý ● Về hướng phát triển nhóm, nhóm hướng đến website có đầy đủ chức nhằm tối ưu hoá cạnh tranh đến từ website khác hỗ trợ nâng cao trải nghiệm người dùng Và sau tính mà nhóm định hướng tương lai cố gắng thực hiênk nhằm mục tiêu phát triển trang web cách mạnh mẽ o Thêm tính bình luận o Tính chat o Tính tốn online o Đánh giá số sản phẩm o Chức quản lý user admin o Quản lý doanh thu o Thêm tính yêu thích sản phẩm o Thêm quyền cho người giao hàng xác nhận đơn giao o Quản lý đơn hàng o Deploy lên vercel ● Hướng đến mục tiêu tối ưu hoá trải nghiệm người dùng mang lại đồ án giúp ích cho cộng đồng, cụ thể thương mại điện tử mặt hàng công nghệ Điều mang đến website hồn thiện hình thức lẫn nội dung nhóm hướng đến đồ án 68 TÀI LIỆU THAM KHẢO [1] N SDK, "Cloudinary," 27 January 2023 [Online] Available: https://cloudinary.com/documentation/node_integration?fbclid=IwAR0kJuSb6528zH5 XMNwWufYANvo_8tMjE8QUreJe5AGkm-M4fS5CYz3ve74 [2] Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbåge, and Xuan Huang, "REACT," 15 June 2022 [Online] Available: https://vi.legacy.reactjs.org/docs/gettingstarted.html?fbclid=IwAR0IKfTzYrC6eX7XM14nXTij63zvCPwsYjWfWQrRArYb0Rcq8tPNS39i0A [3]Admin, "Tuts Make," 20 March 2023 [Online] Available: https://www.tutsmake.com/forgot-reset-password-in-node-js-expressmysql/?fbclid=IwAR0aAn3KunJXBPBOBjjKjydceauqSk1xIeCbJerhuuuIOjUmGxbJp QuMRqQ [4]"devdocs.io," [Online] Available: https://devdocs.io/node/?fbclid=IwAR0Z8v0XHkIzv32ykEza3dCBPKR5tpfwAuqAqU9gMB3OK7lZJksHOp0P9g [5] Tài liệu tham khảo Reacjs Redux: [Truy cập ngày 19/07/2023] [5.1] https://vi.legacy.reactjs.org/tutorial/tutorial.html [5.2] https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhu-thenao#React_la_gi [5.3] https://vietnix.vn/redux-la-gi/ [6] Tài liệu tham khảo MySQL NodeJS: [Truy cập ngày 10/07/2023] [6.1] https://glints.com/vn/blog/nodejs-la-gi/ [6.2] https://fptcloud.com/mysql-la-gi/ 69