TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEBSITE BÁN HÀNG THƯƠNG MẠI ĐIỆN TỬ Giảng viên hướng dẫn ThS Nguyễn L[.]
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN HÀNG THƯƠNG MẠI ĐIỆN TỬ Giảng viên hướng dẫn : ThS.Nguyễn Lê Minh Sinh viên thực : TRẦN ĐÌNH THẢO Lớp : CQ.59.CNTT Khố : 59 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN HÀNG THƯƠNG MẠI ĐIỆN TỬ Giảng viên hướng dẫn : ThS.Nguyễn Lê Minh Sinh viên thực : TRẦN ĐÌNH THẢO Lớp : CQ.59.CNTT Khố : 59 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI CỘNG HỊA XÃ HỘI CHỦ NGHIÃ VIỆT NAM Độc lập – Tự – Hạnh phúc PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** - Mã sinh viên:5951071099 Họ tên SV: Trần Đình Thảo Khóa: 59 Lớp: CQ.59.CNTT Tên đề tài XÂY DỰNG WEBSITE BÁN HÀNG THƯƠNG MẠI ĐIỆN TỬ Mục đích, yêu cầu a Mục đích: - Đáp ứng nhu cầu mua, tìm kiếm sản phẩm, xây dựng nên mơi trường mua sắm thuận tiện trực quan, dễ dàng thao tác với nhiều đối tượng sử dụng - Giúp khách hàng có nhìn chi tiết sản phẩm, thơng tin đặc tính sản phẩm - Rút ngắn khoảng cách người mua và người bán - Việc quản lý sản phẩm trở nên dễ dàng - Sản phẩm xếp có hệ thống nên người mua dễ tìm kiếm sản phẩm - Cải thiện tốc độ xử lý, tạo cảm nhận tốt cho người sử dụng b Yêu cầu: - Tìm hiểu HTML, CSS, Javascript, Bootstrap - Tìm hiểu áp dụng Api, tốn online chức khác cho website - Xây dựng, thiết kế website phù hợp với mục đích sử dụng Đối tượng phương pháp nghiên cứu a Đối tượng nghiên cứu: - Tổng quan toán - Tìm hiểu cơng cụ hỗ trợ phân tích thiết thiết kế hệ thống hướng đối tượng - Tìm hiểu tảng Nodejs, Reactjs, Redux i - Quy trình nghiệp vụ bán hàng,giao hàng, phương thức toán b Phương pháp nghiên cứu: - Tìm hiểu tài liệu liên quan (quy trình bán hàng online,….) - Phân tích lựa chọn giải pháp Công nghệ, công cụ ngơn ngữ lập trình a Phương pháp nghiên cứu: Visual Studio Code b Ngơn ngữ lập trình: HTML, CSS, Javascript Các kết dự kiến đạt ứng dụng - Là hệ thống cung cấp môi trường bán hàng, thông tin sản phẩm cập nhật theo định kỳ - Người mua nhà đặt mua sản phẩm mà muốn nhận chúng sau vài ngày tùy vào vị trí địa lý - Xây dựng giao diện thuận tiện cho người dùng sử dụng - Nắm quy trình nghiệp vụ website - Xây dựng thành công website thương mại điện tử Giáo viên cán hướng dẫn Họ tên: NGUYỄN LÊ MINH Đơn vị công tác: Bộ môn Công Nghệ Thông Tin – Trường Đại học Giao thông Vận tải phân hiệu TP HCM Ngày tháng năm 2022 Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ Thông tin Giảng viên hướng dẫn Đã nhận nhiệm vụ TKTN Sinh viên: Trần Đình Thảo Ký tên: Điện thoại:0837153472 Email: 595101099@st.utc2.edu.vn ii LỜI CẢM ƠN Lời nói đầu tiên, em xin gửi tới Quý thầy cô Bộ môn Công Nghệ Thông Tin, Ban Giám Hiệu Trường Đại học Giao thông Vận tải phân hiệu Thành phố Hồ Chí Minh lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm dạy dỗ, bảo tận tình chu đáo thầy cơ, em hoàn thành đề tài tốt nghiệp “Xây dựng website bán hàng thương mại điện tử” Để hoàn thành nhiệm vụ giao này, nỗ lực học hỏi khơng ngừng thân cịn có hướng dẫn tận tình giảng viên năm vừa qua, đặc biệt hết nhờ có giảng viên ThS.Nguyễn Lê Minh, người hướng dẫn cho hướng đi, truyền đạt cho em kiến thức, kỹ để tơi hồn thành đề tài tốt nghiệp Mặc dù cố gắng hết sức để hoàn thành đề tài, chắn khó tránh khỏi thiếu sót Em mong nhận đánh giá, góp ý Quý thầy để t rút cho học, kinh nghiệm quý báu Sau cùng, em khơng biết nói ngoài kính chúc Q thầy cô Bộ môn Công Nghệ Thông Tin và đặc biệt thầy Nguyễn Lê Minh thật dồi sức khỏe ngày gặt hái nhiều thành công sống nghiệp giảng dạy Em xin chân thành cảm ơn! Tp Hồ Chí Minh, ngày tháng năm 2022 Sinh viên thực Trần Đình Thảo iii MỤC LỤC NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP i LỜI CẢM ƠN iv MỤC LỤC v DANH MỤC TỪ VIẾT TẮT viii DANH MỤC HÌNH ẢNH ix CHƯƠNG MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục đích đề tài 1.3 Ý nghĩa đề tài: 1.4 Công cụ sử dụng 1.5 Cấu trúc báo cáo đồ án tốt nghiệp: CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Framework Hapi.js: 2.1.1 Framework Hapi.js gì? 2.1.2 Ưu điểm dung Framework Hapi.js 2.2.HTML: 2.2.1 Giới thiệu HTML 2.2.2 Vai trò HTML 2.3 CSS 2.3.1 Giới thiệu CSS 2.3.2 Ưu điểm CSS 2.4 JAVASCRIPT 2.4.1 Giới thiệu JAVASCRIPT 2.4.2 Ưu điểm JAVASCRIPT 2.4.3 Nhược điểm JAVASCRIPT 2.5 BOOTSTRAP 2.5.1 Giới thiệu BOOTSTRAP 2.5.2 Lý chọn BOOTSTRAP 2.5.3 Nhược điểm JAVASCRIPT 2.6 Thư viện REACTJS – REDUX 2.6.1 Tổng quan REACT.JS - REDUX 2.6.2 Giới thiệu REACT.JS - REDUX iv 2.7 KNEX.JS – OBJECTION.JS 10 2.7.1 Tổng quan REACT.JS - REDUX 10 2.7.2 Tìm hiểu ORM 10 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KÊ 11 3.1 Đặt vấn đề 11 3.2 Mục tiêu dự án 11 3.3 Yêu cầu hệ thống 11 3.3.1 Yêu cầu chức 11 3.3.2 Yêu cầu phi chức 13 3.4 Mơ hình nghiệp vụ hệ thống 14 3.4.1 Yêu cầu chức 14 3.4.2 Biểu đồ usecase 14 3.4.3 Biểu đồ 21 3.4.4 Biểu đồ hoạt động 25 3.5 Lưu trữ liệu PostgreSQL 32 3.5.1 Các thuộc tính liệu bảng Role 32 3.5.2 Các thuộc tính liệu bảng User 32 3.5.3 Các thuộc tính bảng Category 32 3.5.4 Các thuộc tính bảng Product 33 3.5.5 Các thuộc tính bảng Favorite 34 3.5.6 Các thuộc tính bảng Rating 34 3.5.7 Các thuộc tính bảng Order 34 3.5.8 Các thuộc tính bảng OrderDetail 35 3.5.9 Các thuộc tính bảng Producer 36 3.4.10 Các thuộc tính bảng Contact 36 Chương TRIỂN KHAI CHƯƠNG TRÌNH 37 4.1 Các chức hệ thống 37 4.1.1 Giao diện đăng nhập 37 4.1.2 Giao diện admin 37 4.1.3 Giao diện thêm sản phẩm 38 4.1.4 Giao diện sửa sản phẩm 38 4.1.5 Giao diện danh sách sản phẩm 39 4.1.6 Giao diện thêm danh mục sản phẩm 39 4.1.7 Giao diện sửa danh mục sản phẩm 40 v 4.1.8 Giao diện danh sách danh mục sản phẩm 40 4.1.9 Giao diện thêm nhà sản xuất 41 4.1.10 Giao diện sửa nhà sản xuất 41 4.1.11 Giao diện danh sách nhà sản xuất 42 4.1.12 Giao diện thêm người dùng 42 4.1.13 Giao diện sửa người dùng 43 4.1.14 Giao diện danh sách người dùng 43 4.1.15 Giao diện thêm đơn hàng 44 4.1.16 Giao diện sửa đơn hàng 44 4.1.17 Giao diện danh sách đơn hàng 45 4.1.18 Giao diện thêm vai trò 45 4.1.19 Giao diện sửa vai trò 46 4.1.20 Giao diện danh sách vai trò 46 4.1.21 Giao diện đánh giá 47 4.1.22 Giao diện liên hệ 47 4.1.23 Giao diện trang web thương mại điện tử 48 4.1.24 Giao diện danh mục sản phẩm 49 4.1.25 Giao diện sản phẩm 49 4.1.26 Giao diện liên hệ thương mại điện tử 50 4.1.27 Giao diện chi tiết sản phẩm thương mại điện tử 50 4.1.28 Giao diện thủ tục toán 51 4.1.29 Giao diện toán 51 4.1.30 Giao diện cập nhật thông tin tài khoản thương mại điện tử 52 Chương KẾT LUẬN VÀ KIẾN NGHỊ 53 5.1 Kết 53 5.3 Hướng phát triển 53 TÀI LIỆU THAM KHẢO 54 vi DANH MỤC TỪ VIẾT TẮT STT Ý nghĩa Từ khóa CSDL Cơ sở liệu MVC Model- View- Controller IOC Inversion of Control CLI Application Programming Interface ORM Object-Relational Mapping vii DANH MỤC HÌNH ẢNH Hình 2.1 Mơ hình quan hệ thực thể Hình 2.2 Mơ hình quan hệ thực thể 10 Hình 3.1 Mơ hình quan hệ thực thể 14 Hình 3.2 Biểu đồ Use case tổng quát - Khách 15 Hình 3.3 Biểu đồ Use case tổng quát – Thành viên 16 Hình 3.4 Biểu đồ Use case tổng quát – Nhân viên 16 Hình 3.5 Biểu đồ Use case tổng quát - Admin 17 Hình 3.6 Biểu đồ Use case quản lý đơn hàng .17 Hình 3.7 Biểu đồ Use case quản lý sản phẩm 18 Hình 3.8 Biểu đồ Use case quản lý nhà sản xuất 18 Hình 3.9 Biểu đồ Use case quản lý tài khoản .19 Hình 3.10 Biểu đồ Use case quản lý thông tin cá nhân 19 Hinh 3.11 Biểu đồ Use case quản lý tìm kiếm .20 Hình 3.12 Biểu đồ Use case quản lý giỏ hàng 20 Hình 3.13 Biểu đồ Use case quản lý mua hàng 21 Hình 3.14 Biểu đồ đăng ký .21 Hình 3.15 Biểu đồ đăng nhập 22 Hình 3.16 Biểu đồ tuẩn tự sửa thơng tin cá nhân 22 Hình 3.17 Biểu đồ tuẩn tự tìm kiếm .23 Hình 3.18 Biểu đồ tuẩn tự giỏ hàng .23 Hình 3.19 Biểu đồ tuẩn tự sản phẩm 24 Hình 3.20 Biểu đồ tuẩn tự sửa sản phẩm 24 Hình 3.21 Biểu đồ hoạt động thêm sản phẩm 25 Hình 3.22 Biểu đồ hoạt động sửa sản phẩm 26 Hình 3.23 Biểu đồ hoạt động xoá sản phẩm .26 Hình 3.24 Biểu đồ hoạt động sửa thông tin cá nhân 27 Hình 3.25 Biểu đồ hoạt động thêm vào giỏ hàng 28 Hình 3.26 Biểu đồ hoạt động mua hàng .28 Hình 3.27 Biểu đồ hoạt động đăng ký 29 Hình 3.28 Biểu đồ hoạt động đăng nhập 30 viii 4.1.7 Giao diện sửa danh mục sản phẩm Khi nhấn button sửa danh mục sản phẩm giao diện trả giao diện sửa danh mục sản phẩm, cho phép chỉnh sửa thông tin danh mục sản phẩm Hình 4.7: Giao diện sửa danh mục sản phẩm 4.1.8 Giao diện danh sách danh mục sản phẩm Khi nhấn button danh mục giao diện trả danh sách danh mục Hình 4.8: Giao diện danh sách danh mục sản phẩm 40 4.1.9 Giao diện thêm nhà sản xuất Khi nhấn button thêm nhà sản xuất trả giao diện thêm nhà sản xuất Cho phép admin thêm thông tin nhà sản xuất cập nhật giao diện nhà sản xuất Hình 4.9: Giao diện thêm nhà sản xuất 4.1.10 Giao diện sửa nhà sản xuất Khi nhấn button sửa nhà sản xuất giao diện trả giao diện sửa nhà sản xuất , cho phép chỉnh sửa thông tin nhà sản xuất Hình 4.10: Giao diện sửa nhà sản xuất 41 4.1.11 Giao diện danh sách nhà sản xuất Khi nhấn button nhà sản xuất giao diện trả danh sách nhà sản xuất Hình 4.11: Giao diện danh sách nhà sản xuất 4.1.12 Giao diện thêm người dùng Khi nhấn button thêm người dùng trả giao diện thêm người dùng Cho phép admin thêm thông tin người dùng cập nhật giao diện người dùng Hình 4.12: Giao diện thêm người dùng 42 4.1.13 Giao diện sửa người dùng Khi nhấn button sửa người dùng giao diện trả giao diện sửa người dùng , cho phép chỉnh sửa thơng tin người dùng Hình 4.13: Giao diện sửa người dùng 4.1.14 Giao diện danh sách người dùng Khi nhấn button nhà sản xuất giao diện trả danh sách người dùng Hình 4.14: Giao diện danh sách người dùng 43 4.1.15 Giao diện thêm đơn hàng Khi nhấn button thêm đơn hàng trả giao diện thêm đơn hàng Cho phép admin thêm thông tin đơn hàng cập nhật giao diện đơn hàng Hình 4.15: Giao diện thêm đơn hàng 4.1.16 Giao diện sửa đơn hàng Khi nhấn button sửa đơn hàng giao diện trả giao diện sửa đơn hàng, cho phép chỉnh sửa thơng tin đơn hàng Hình 4.16: Giao diện sửa đơn hàng 44 4.1.17 Giao diện danh sách đơn hàng Khi nhấn button đơn hàng giao diện trả danh sách đơn hàng Hình 4.17: Giao diện danh sách đơn hàng 4.1.18 Giao diện thêm vai trò Khi nhấn button thêm vai trò trả giao diện thêm vai trị Cho phép admin thêm thơng tin vai trò cập nhật giao diện vai trị Hình 4.18: Giao diện thêm vai trị 45 4.1.19 Giao diện sửa vai trò Khi nhấn button sửa vai trò giao diện trả giao diện sửa vai trị, cho phép chỉnh sửa thơng tin vai trị Hình 4.19: Giao diện sửa vai trò 4.1.20 Giao diện danh sách vai trò Khi nhấn button vai trò giao diện trả danh sách vai trị Hình 4.20: Giao diện danh sách vai trò 46 4.1.21 Giao diện đánh giá Khi nhấn button đánh giá giao diện trả danh sách đánh giá Hình 4.21: Giao diện danh sách đánh giá 4.1.22 Giao diện liên hệ Khi nhấn button liên hệ giao diện trả danh sách liên hệ Hình 4.22: Giao diện danh sách liên hệ 47 4.1.23 Giao diện trang web thương mại điện tử Hình 4.23: Giao diện trang web thương mại điện tử 48 4.1.24 Giao diện danh mục sản phẩm thương mại điện tử Hình 4.24: Giao diện danh mục sản phẩm thương mại điện tử 4.1.25 Giao diện sản phẩm thương mại điện tử Hình 4.25: Giao diện sản phẩm thương mại điện tử 49 4.1.26 Giao diện liên hệ thương mại điện tử Hình 4.26: Giao diện trang web thương mại điện tử 4.1.27 Giao diện chi tiết sản phẩm thương mại điện tử Hình 4.27: Giao diện trang web thương mại điện tử 50 4.1.28 Giao diện thủ tục tốn Hình 4.28: Giao diện thủ tục tốn thương mại điện tử 4.1.29 Giao diện tốn Hình 4.29: Giao diện toán thương mại điện tử 51 4.1.30 Giao diện cập nhật thông tin tài khoản thương mại điện tử Hình 4.30: Giao diện cập nhật thơng tin tài khoản thương mại điện tử 52 Chương KẾT LUẬN VÀ KIẾN NGHỊ 5.1 Kết Trong trình làm đồ án, em học nhiều kiến thức củng cố kiến thức cũ Kết em đạt : Biết cách thiết kế sở liệu sử dụng công cụ Posgrest để tạo sở liệu, tạo ràng buộc liệu khai thác liệu phù hợp với chương trình Biết cách sử dụng Visual Studio Code xây dựng chức website, tạo giao diện phù hợp với web, dễ dàng sử dụng HTML, CSS, JS Nắm quy trình nghiệp vụ bán hàng online Tìm hiểu ngơn ngữ lập trình Javascript, tảng Nodejs Tìm hiểu Frameword Hapi.js, React.js, Redux.js Tích hợp chức tốn online thơng qua cổng toán Paypal Áp dụng xây dựng ứng dụng thực nghiệm trang website “Thương mại điện tử” 5.2 Hạn chế Ngồi kết đạt được, website cịn vấp phải nhiều hạn chế cần phải giải quyết: Giao diện hệ thống thiết kế theo cảm tính cá nhân, chưa đẹp hồn hảo Cịn thiếu số tính nâng cao để ứng dụng sử dụng tiện lợi 5.3 Hướng phát triển Tìm hiểu sâu tảng Javascript & PostgreSQL, Framework Hapi.js, React.js, Redux.js để đáp ứng nhiều nhu cầu người sử dụng, phát triển tối ưu hóa hệ thống Tiếp tục nghiên cứu Framework React Native để xây dựng tảng Mobile việc kế thừa hệ thống API hoàn thành Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để cải thiện giao diện, tối ưu hóa, và phát triển thêm tính cịn thiếu phiên 53 TÀI LIỆU THAM KHẢO [1] Trương Tuấn Anh, Hệ quản trị sở liệu, ĐH Bách Khoa Thành phố HCM [2] Jon Duckett (2011), HTML and CSS: Design and Build Website [3] Jennifer Robbins (2012), Learning Web Design [4] Jon Duckett (2014), JAVASCRIPT & JQUERY: Interactive Front-End Web Development [5] Pgs.Ts Phạm Ngọc Nam (2007), Phân Tích Thiết Kế Hướng Đối Tượng, Đh Bách Khoa Hn [6] Website https://www.w3schools.com/ [7] Website https://redux.js.org/ [8] Website https://reactjs.org/ [9] Website https://hapi.dev/ 54