Bài báo cáo này đạt điểm 8.0 trở lên giúp cho các bạn sinh viên tham khảo và cho ra kết quả tốt trong môn thực tập. Nhóm tôi xin cam đoan đây là công trình nghiên cứu công nghệ độc lập của riêng nhóm chúng tôi, không sao chép từ bất khi đồ án nào. Các số liệu sử dụng phân tích trong luận án có nguồn gốc rõ ràng, đã công bố theo đúng quy định. Các kết quả nghiên cứu trong luận án do nhóm tôi tự tìm hiểu, phân tích một cách trung thực, khách quan và phù hợp với thực tiễn. Mọi sự tham khảo trong đồ án này đều được trích dẫn các nguồn tài liệu trong danh mục tài liệu tham khảo. Các kết quả này chưa từng được công bố trong bất kỳ nghiên cứu nào khác.
TRƯỜNG ĐẠI HỌC GIAO THÔNG TP HỒ TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢIVẬN TP HỒTẢI CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN CHÍ MINH THỰC TẬP TỐT NGHIỆP TÌM HIỂU FRAMEWORK SPRING CHO BACKEND, REACTJS CHO FRONTEND VÀ XÂY DỰNG WEBSITE BÁN GIÀY MINH HỌA Ngành: CÔNG NGHỆ THÔNG TIN Chun ngành: TRUYỀN THƠNG VÀ MẠNG MÁY TÍNH Giảng viên hướng dẫn : Trần Đức Doanh Sinh viên thực : Cao Tiến Quang - 1651150026 - KM16 Trần Phước Thành - 1651150034 - KM16 TP Hồ Chí Minh, 2020 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… TP Hồ Chí Minh, ngày … tháng … năm 2020 Giảng viên hướng dẫn NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… TP Hồ Chí Minh, ngày … tháng … năm 2020 Giảng viên phản biện LỜI CAM ĐOAN Nhóm tơi xin cam đoan cơng trình nghiên cứu cơng nghệ độc lập riêng nhóm chúng tơi, khơng chép từ bất đồ án Các số liệu sử dụng phân tích luận án có nguồn gốc rõ ràng, công bố theo quy định Các kết nghiên cứu luận án nhóm tơi tự tìm hiểu, phân tích cách trung thực, khách quan phù hợp với thực tiễn Mọi tham khảo đồ án trích dẫn nguồn tài liệu danh mục tài liệu tham khảo Các kết chưa công bố nghiên cứu khác TP Hồ Chí Minh, ngày … tháng … năm 2020 Sinh viên thực MỤC LỤC DANH MỤC CÁC TỪ VIẾT TẮT API: Application Program Interface AJAX: Asynchronous Javascript and XML EJB: Enterprise JavaBeans DOM: Document Object Model HTML: Hypertext Markup Language IDE: Integrated Development Environment JEE: Java Enterprise Edition JDBC: Java Database Connectivity JDK: Java Development Kit JDO: Java Data Objects JNDI: Java Naming and Directory Interface JPA: Java Persistence API JS: Javascript JSX: Javascript XML MVC: Model View Controller NPM: Node Package Manager ORM: Object Relational Mapping PJO: Plain Javascript Object POJO: Plain Old Java Object SPA: Single Page Application STOMP: Streaming Text Oriented Messaging Protocol UI: User Interface XML: Extensible Markup Language DANH MỤC HÌNH ẢNH Hình 1.1: Kiến trúc Spring framework Hình 1.2 : Spring IOC container Hình 1.3 : ApplicationContext Hình 1.4: Virtual DOM Hình 1.5: React one-way binding Hình 1.5: Cài đặt ReactJs Hình 1.6: Redux Store Hình 1.7: Nguyên lý vận hành Redux Hình 1.8: Middleware redux-thunk Hình 2.1: Các tác nhân hệ thống Hình 2.2: Biểu đồ Use Case Hình 2.3: Biểu đồ hoạt động đăng nhập Hình 2.4: Biểu đồ hoạt động đăng xuất Hình 2.5: Biểu đồ chức xem thơng tin sản phẩm Hình 2.6: Biểu đồ chức thêm sản phẩm vào giỏ hàng Hình 2.7: Biểu đồ chức thêm sản phẩm vào giỏ hàng Hình 2.8: Biểu đồ chức xóa sản phẩm Hình 2.9: Biểu đồ chức xóa sản phẩm Hình 2.10 : Biểu đồ chức xóa sản phẩm Hình 3.1: Trang chủ - Thanh điều hướng, slide Hình 3.2: Trang chủ - Danh sách sản phẩm Hình 3.3: Trang chủ - Một số sản phẩm Hình 3.4: Trang danh sách sản phẩm Hình 3.5: Thơng tin chi tiết sản phẩm Hình 3.6: Phần bình luận Hình 3.7: Giỏ hàng Hình 3.8: Địa giao hàng Hình 3.9: Thanh tốn đặt mua Hình 3.10: Danh sách sản phẩm Hình 3.11: Danh sách người dùng Hình 3.12: Trang đăng nhập Hình 3.13: Trang đăng ký DANH MỤC BẢNG Bảng 2.1: Bảng người dùng Bảng 2.2: Bảng sản phẩm Bảng 2.3: Bảng Thể Loại Bảng 2.4: Bảng Đơn hàng LỜI MỞ ĐẦU Tính cấp thiết đề tài Nếu trước Internet chưa đời đời thời gian, người thường có thói quen mua bán hàng hóa, giao dịch môi trường truyền thống siêu thị, cửa hàng, khu chợ hay trung tâm thương mại Với hình thức mua bán truyền thống này, người mua phải đến tận nơi để xem xét sản phẩm, trả giá, toán nhận sản phẩm Tuy nhiên đây, với hình thức bán hàng trực tuyến, người mua hàng người bán tương tác trực tiếp với Internet Ưu điểm bán hàng trực tuyến cửa hàng, doanh nghiệp không bị giới hạn thời gian không gian, bán hàng lúc, nơi 24/7, tiết kiệm chi phí đầu tư thuê mặt hay nhân công, phạm vi tiếp cận rộng bao gồm vùng miền nước ngồi nước từ mang lại lợi nhuận doanh thu cao, hiệu so với bán hàng truyền thống Có nhiều hình thức bán hàng trực tuyến khác bán hàng Facebook, bán hàng Youtube,….tuy nhiên bán hàng trực tuyến qua website nhiều cửa hàng, doanh nghiệp, công ty Hiện nay, công nghệ tiên tiến phát triển ngày mạnh mẽ kết hợp với phát triển mạnh mẽ Thương mại điện tử (TMĐT) ứng dụng ngày nhiều vào lĩnh vực kinh tế, sản xuất đời sống thường nhật người để phục cho nhu cầu mục đích người Một điểm tiêu biểu việc phát triển cơng nghệ phải kể đến việc ứng dụng công nghệ thông tin vào hầu hết hoạt động Nhờ đó, cơng việc thực nhanh, xác đạt kết cao nhiều Khi xã hội ngày phát triển, mức sống người dân nâng cao thu nhập kinh tế ngày cải thiện việc mua vật dung điện tử hay gia dụng,… khơng cịn trở nên xa lạ với người mà ngược lại vật dụng thơng dụng hàng ngày thiếu người Hầu hết người thường mua vật dụng gia đình hay trang thiết bị điện tử hay sản phẩm công nghệ điện thoại, bếp,… tốn nhiều thời gian, công sức mua, bây họ xem mua chúng cách thiết thực nhất, lựa chọn yêu thích đáp ứng nhu cầu cho người dùng thông qua mạng Internet môi trường Thương mại điện tử Với lý qua tìm hiểu nhóm thực đồ án thực tập tốt nghiệp ứng dụng bán mặt hàng giày môi trường Thương mại điện tử Sẽ giúp người mua mặt hàng cần thiết cho gia đình nhanh tiết kiệm thời gian cơng sức di chuyển Do nhóm xin thực đề tài: “Tìm hiểu Frameword Spring cho Backend, ReactJS cho Frontend xây dựng website bán giày minh họa” Tình hình nghiên cứu Từ lâu có nhiều ứng dụng thành công việc thực bán đồ điện tử ,…thông qua Internet, Thương mại điện tử phát triển cực mạnh thập kỷ qua Một số ứng dụng phát triền thành cơng như: Tiki, Shoppe, Nguyenkim, ứng hoạt động mạnh có qui mơ lớn Việt Nam 10 2.6.1.7 Thêm sản phẩm vào giỏ hàng Hình 2.9: Biểu đồ chức xóa sản phẩm 49 2.6.1.8 Đặt hàng Hình 2.10 : Biểu đồ chức xóa sản phẩm 50 2.6.2 Thiết kế bảng liệu cho trang web Bảng 2.1: Bảng người dùng Tên id created_by Kiểu liệu bigint(20) varchar(255) Chú thích Số thứ tự người dùng Được tạo created_date datetime Được tạo ngày modified_by varchar(255) Được thực modified_date datetime Được thực ngày address varchar(255) Địa district varchar(255) Quận email varchar(255) Email fullname varchar(255) Họ tên gender varchar(255) Giới tính password varchar(255) Mật phonenumber varchar(255) Số điện thoại status int(11) username varchar(255) Trạng thái(Hoạt động / Không hoạt động) Tên tài khoản Bảng 2.2: Bảng sản phẩm Tên id created_by Kiểu liệu bigint(20) varchar(255) Chú thích Số thứ tự người dùng Được tạo 51 created_date datetime Được tạo ngày modified_by varchar(255) Được thực modified_date datetime Được thực ngày color varchar(255) Màu sắc content text Nội dụng countinput int(11) Số lượng name varchar(255) Tên sản phẩm price bigint(20) Giá tiền productcode varchar(255) Mã sản phẩm saleoff double Sale shortdescription text Mơ tả ngắn size int(11) Kích cỡ status int(11) Trạng thái thumbnail varchar(255) Hình đại diện title varchar(255) Chú thích category_id store_id bigint(20) bigint(20) Mã thể loại Mã kho Bảng 2.3: Bảng Thể Loại 52 Tên Kiểu liệu Chú thích id created_by bigint(20) varchar(255) Số thứ tự người dùng Được tạo created_date datetime Được tạo ngày modified_by varchar(255) Được thực modified_date datetime Được thực ngày code varchar(255) Mã thể loại name varchar(255) Tên thể loại categorygender_id bigint(20) Mã thể loại giới tính Bảng 2.4: Bảng Đơn hàng Tên Kiểu liệu Chú thích id created_by bigint(20) varchar(255) Số thứ tự người dùng Được tạo created_date datetime Được tạo ngày modified_by varchar(255) Được thực modified_date datetime Được thực ngày 53 address varchar(255) Địa giao hàng district varchar(255) Quận/Huyện fullname varchar(255) Họ tên email varchar(255) email phonenumber varchar(255) Số điện thoại provincial varchar(255) Tỉnh/Thành phố purchase_code varchar(255) Mã đơn hàng status int(11) ward varchar(255) Trạng thái(Chờ xử lý/Đã xử lý) Xã/Phường user_id sum_money bigint(20) bigint(20) Mã người dùng Tổng tiền ship_id bigint(20) Mã ship CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG MINH HỌA 3.1 Trang chủ Hiển thị số thông tin chung điều hướng (đăng ký, đăng nhập, danh sách sản phẩm, tìm kiếm, giỏ hàng,…), sản phẩm mới,… 54 Hình 3.1: Trang chủ - Thanh điều hướng, slide Hình 3.2: Trang chủ - Danh sách sản phẩm 55 Hình 3.3: Trang chủ - Một số sản phẩm 3.2 Trang danh sách sản phẩm Hiển thị danh sách sản phẩm theo phân loại (giày nam, giày nữ, unisex, slipon, búp bê,…) Người dùng xem số thông tin tên, giá hay thêm sản phẩm vào giỏ hàng Ngoài người dùng lựa chọn xếp theo giá, theo tên, lọc theo màu, kích cỡ, giá Hình 3.4: Trang danh sách sản phẩm 56 3.3 Trang chi tiết Trang chi tiết nơi giúp người dùng tìm hiểu thêm nhiều thông tin sản phẩm, đánh để lại bình luận, ý kiến sản phẩm Hình 3.5: Thơng tin chi tiết sản phẩm Hình 3.6: Phần bình luận Để thêm bình luận sản phẩm, người dùng phải thực đăng nhập 3.4 Giỏ hàng 57 Sau chọn thêm sản phẩm vào giỏ, người dùng xem, thêm, bớt, xóa sản phẩm giỏ hàng muốn Hình 3.7: Giỏ hàng 3.5 Thanh toán 3.5.1 Địa giao hàng Người dùng phải thực việc đăng nhập trước đến phần tốn, sau đăng nhập thành cơng, website chuyển đến trang địa toán, người dùng xem lại tóm tắt giỏ hàng chọn địa giao hàng 58 Hình 3.8: Địa giao hàng 3.5.2 Trang toán đặt mua Bước xác nhận thơng tin cuối cùng, khách hàng xem lại giỏ hàng, địa đặt mua thực đặt hàng Hình 3.9: Thanh tốn đặt mua 3.6 Trang quản trị 3.6.1 Trang quản lý sản phẩm Hiển thị danh sách sản phẩm, người quản trị xem danh sách, thêm, sửa, xóa sản phẩm 59 Hình 3.10: Danh sách sản phẩm 3.6.2 Trang quản lý người dùng Hiển thị danh sách người dùng, người quản trị xem danh sách, thêm, sửa, xóa tài khoản Hình 3.11: Danh sách người dùng 3.7 Đăng ký đăng nhập Người dùng thực đăng ký đăng nhập (bằng tài khoản facebook) để toán, lưu sản phẩm vào giỏ hàng, bình luận… Hình 3.12: Trang đăng nhập 60 Hình 3.13: Trang đăng ký CHƯƠNG 4: KẾT LUẬN VÀ ĐÁNH GIÁ Nhìn chung sản phẩm gần đủ chức website thương mại điện tử Quan trọng hết nhóm thật nỗ lực dành thời gian nghiên cứu, thảo luận, nâng cấp sản phẩm, học thêm nhiều kiến thức bao gồm kiến thức chuyên ngành kiến thức kỹ mềm, tiếng anh,… Hiểu rõ quy trình bán hàng thương mại điện tử, vận dụng tốt cơng cụ lập trình (MySQL, Visual Studio Code, Eclipse,…) Tìm hiểu vận dụng hiệu công cụ quản lý source code (git) Đặc biệt góp ý, động viên từ giảng viên hướng dẫn nguồn động lực ý tưởng lớn lao, tiếp thêm sức mạnh ý tưởng để sản phẩm ngày hồn thiện Tuy hạn chế mặt nhân lực thời gian, nhóm chưa sâu, rà sốt, kiểm thử tồn sản phẩm Chưa tối ưu hóa vận dụng triệt để thư viện hỗ trợ, cấu trúc code dài dịng, lộn xộn,… Tương lai phát triển thêm nhóm hoàn thiện thêm nhiều chức để mang đến website bán hàng thật chuyên nghiệp, đầy đủ tính 61 Kiểm tra rà sốt lỗi, nghiên cứu sâu thư viện hỗ trợ, tối ưu hóa tốc độ dung lượng website TÀI LIỆU THAM KHẢO [1] Trang hỏi đáp code lớn giới, https://stackoverflow.com/ [2] Viettuts, Tìm hiểu Spring, https://viettuts.vn/spring [3] Nguyễn Tuấn Anh, Giới thiệu Spring Framework, 12/9/2018, https://kipalog.com/posts/Gioi-thieu-Spring-Framework [4] Thanh Nguyen, Spring Framework, 21/4/2016, https://www.slideshare.net/mrbeen351/spring-framework-61190798 [5] Kazuho Oku Goro Fuji, JSX, https://jsx.github.io/ [6] Bùi Hiếu, Bước đầu tìm hiểu ReactJs, 16/7/2018, https://viblo.asia/p/buoc-dau-tim-hieu-ve-reactjs-1VgZvwWYlAw [7] Do Khanh Toan, Giới thiệu ReactJS - phần I (Các khái niệm bản), 30/5/2017, https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-coban-V3m5WzjblO7 [8] Pets Pets, ReactJS – Tìm hiểu Component Life Cycle, 21/3/2018, https://viblo.asia/p/reactjs-tim-hieu-ve-component-life-cycle-naQZRw4Plvx [9] Hoang Trong Hieu, ReactJS – Ưu điểm nhược điểm, 26/4/2017, https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 [10] Techtalk, Một nhìn tổng quan Nodejs, 11/8/2018, https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html 62 [11] Nguyen Minh Dinh, Node.js Tutorial: Phần – Giới thiệu cài đặt ứng dụng đầu tiên, 26/12/2016, https://viblo.asia/p/nodejs-tutorial-phan-1-gioithieu-va-cai-dat-ung-dung-dau-tien-gVQvlwdykZJ [12] Facebook, ReactJS, https://reactjs.org/ [13] Nhat, Redux gì? Hiểu rõ cách dùng Redux, https://topdev.vn/blog/redux-la-gi/ [14] Phạm Tín, Tìm hiểu ReduxThunk, 15/7/2019, https://viblo.asia/p/timhieu-ve-redux-thunk-Qbq5Qkm4ZD8 [15] React Training, Website hướng dẫn React Router, https://reacttraining.com/react-router/web/guides/quick-start [16] React Bootstrap, https://react-bootstrap.github.io/ [17] Jason Saayman, Axios, https://github.com/axios/axios [18] AdeleD, React paginate, https://github.com/AdeleD/reactpaginate#readme [19] Nghiepuit, Khóa học lập trình React.js – Redux (Reactjs redux tutorial), 10/9/2017, https://www.youtube.com/playlist? list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp 63