Đồ án Tìm hiểu framework spring cho backend, reactjs cho frontend và xây dựng website bán giày minh họa

TRƢỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN 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 TRƢỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN - HỌ VÀ TÊN SINH VIÊN: CAO TIẾN QUANG, TRẦN PHƢỚC THÀNH 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 BÁO CÁO THỰC TẬP TỐT NGHIỆP NGƢỜI HƢỚNG DẪN THẦY: TRẦN ĐỨC DOANH 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 iii DANH MỤC HÌNH ẢNH v DANH MỤC BẢNG vii LỜI MỞ ĐẦU CHƢƠNG 1: TÌM HIỂU VỀ FRAMEWORK 1.1 Tìm hiểu Spring Framework 1.1.1 Khái Niệm 1.1.2 Lợi ích 1.1.3 Cài đặt Spring framework 1.1.4 Kiến trúc, module Spring Framework 1.1.5 Các dự án Spring Framework 13 1.2 Tìm hiểu ReactJS 14 1.2.1 Giới thiệu 14 1.2.2 ReactJS gì? 15 1.2.3 Cài đặt ReactJS 21 1.2.4 Các thư viện hỗ trợ 23 CHƢƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 27 2.1 Yêu cầu đề tài 27 2.2 Hoạt động trang web 28 2.3 Đối tƣợng sử dụng 28 2.4 Phân tích chức hệ thống 28 2.5 Mô tả chức cho đối tƣợng 30 2.5.1 Các chức đối tượng Customer 31 2.5.2 Các chức đối tượng Administrator 32 2.6 Các biểu đồ thiết kế hệ thống 33 2.6.1 Biểu đồ hoạt động 33 2.6.2 Thiết kế bảng liệu cho trang web 42 CHƢƠNG 3: XÂY DỰNG ỨNG DỤNG MINH HỌA 47 3.1 Trang chủ 47 3.2 Trang danh sách sản phẩm 48 i 3.3 Trang chi tiết 49 3.4 Giỏ hàng 50 3.5 Thanh toán 51 3.5.1 Địa giao hàng 51 3.5.2 Trang toán đặt mua 51 3.6 Trang quản trị 52 3.6.1 Trang quản lý sản phẩm 52 3.6.2 Trang quản lý người dùng 52 3.6.3 Trang quản lý bình luận 53 3.6.4 Trang quản lý hóa đơn 53 3.6.5 Trang quản lý slide 54 3.7 Đăng ký đăng nhập 54 3.8 Thông tin tài khoản 55 CHƢƠNG 4: KẾT LUẬN VÀ ĐÁNH GIÁ 56 TÀI LIỆU THAM KHẢO 57 ii 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 iii SPA: Single Page Application STOMP: Streaming Text Oriented Messaging Protocol UI: User Interface XML: Extensible Markup Language iv 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 Hình 2.7: Biểu đồ chức sửa sản phẩm Hình 2.8: Biểu đồ chức xóa sản phẩm Hình 2.9: Biểu đồ chức thêm sản phẩm vào giỏ hàng v 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 bigint(20) Mã thể loại store_id bigint(20) Mã kho 44 Bảng 2.3: Bảng Thể Loại Tên Kiểu liệu Chú thích id bigint(20) Số thứ tự người dùng created_by varchar(255) Đượ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 45 Bảng 2.4: Bảng Đơn hàng Tên Kiểu liệu Chú thích id bigint(20) Số thứ tự người dùng created_by varchar(255) Đượ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 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ố 46 purchase_code varchar(255) Mã đơn hàng status int(11) Trạng thái(Chờ xử lý/Đã xử lý) ward varchar(255) Xã/Phường user_id bigint(20) Mã người dùng sum_money bigint(20) 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,… Hình 3.1: Trang chủ - Thanh điều hướng, slide 47 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 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 Ngồ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á 48 Hình 3.4: Trang danh sách sản phẩm 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 49 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 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 50 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 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 51 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 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 52 3.6.3 Trang quản lý bình luận Người quản trị xem xét xóa bình luận mang nội dung tiêu cực, ảnh hưởng tới người dùng khác,… Hình 3.12: Quản lý bình luận 3.6.4 Trang quản lý hóa đơn Người quản trị xem thơng tin hóa đơn xét duyệt Hình 3.13: Quản lý hóa đơn 53 3.6.5 Trang quản lý slide Người quản trị tùy chọn hình ảnh slide để hiển thị ngồi trang chủ Hình 3.14: Quản lý slide 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.15: Trang đăng nhập 54 Hình 3.16: Trang đăng ký 3.8 Thơng tin tài khoản Sau đăng nhập thành cơng, người dùng xem thông tin chi tiết tài khoản, đổi mật thơng tin chi tiết đơn đặt hàng Hình 3.17: Thông tin tài khoản 55 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 hoà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ử toà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 hồn thiện số chức như:  Đánh giá sản phẩm: Hiển thị mức lẻ 0.5, 1.5, 2.5,  Phần chọn màu sắc trang chi tiết: Sẽ hiển thị theo mã màu  Phần bình luận: Hiển thị avatar người dùng, chia mục bình luận tài khoản Facebook tài khoản thông thường thành phần  Phần quản trị: Có thể chọn hình ảnh để hiển thị slide trang chủ, biểu đồ thống kê số lượng user đăng ký tháng, số đơn đặt hàng tháng,…  Thêm nhiều sản phẩm để đa dạng hóa mặt hàng  Thêm vào số animation để website sống động, linh hoạt Kiểm tra rà soá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 56 TÀI LIỆU THAM KHẢO [1] Trang hỏi đáp code, 06/02/2020, https://stackoverflow.com/ [2] Viettuts, Tìm hiểu Spring, 05/02/2020, https://viettuts.vn/spring [3] Nguyễn Tuấn Anh, Giới thiệu Spring Framework, 05/02/2020, https://kipalog.com/posts/Gioi-thieu-Spring-Framework [4] Thanh Nguyen, Spring Framework, 07/5/2020, https://www.slideshare.net/mrbeen351/spring-framework-61190798 [5] Techtalk, Một nhìn tổng quan Nodejs, 11/02/2020, https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html [6] Nguyen Minh Dinh, Node.js Tutorial: Phần – Giới thiệu cài đặt ứng dụng đầu tiên, 11/02/2020, https://viblo.asia/p/nodejs-tutorial-phan-1-gioithieu-va-cai-dat-ung-dung-dau-tien-gVQvlwdykZJ [7] Kazuho Oku Goro Fuji, JSX, 12/02/2020, https://jsx.github.io/ [8] Bùi Hiếu, Bước đầu tìm hiểu ReactJs, 12/02/2020, https://viblo.asia/p/buoc-dau-tim-hieu-ve-reactjs-1VgZvwWYlAw [9] Do Khanh Toan, Giới thiệu ReactJS - phần I (Các khái niệm bản), 12/02/2020, https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem- co-ban-V3m5WzjblO7 [10] Hoang Trong Hieu, ReactJS – Ưu điểm nhược điểm, 12/02/2020, https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 [11] Facebook, ReactJS, 13/02/2020, https://reactjs.org/ [12] Pets Pets, ReactJS – Tìm hiểu Component Life Cycle, 17/02/2020, https://viblo.asia/p/reactjs-tim-hieu-ve-component-life-cycle-naQZRw4Plvx 57 [13] React Bootstrap, 31/3/2020, https://react-bootstrap.github.io/ [14] Jason Saayman, Axios, 31/3/2020, https://github.com/axios/axios [15] React Training, Website hướng dẫn React Router, 01/4/2020, https://reacttraining.com/react-router/web/guides/quick-start [16] AdeleD, React paginate, 01/4/2020, https://github.com/AdeleD/reactpaginate#readme [17] Nghiepuit, Khóa học lập trình React.js – Redux (Reactjs redux tutorial), 04/4/2020, https://www.youtube.com/playlist?list=PLJ5qtRQovuEOoKffoCBzTfvzMTT ORnoyp [18] Nhat, Redux gì? Hiểu rõ cách dùng Redux, 03/4/2020 https://topdev.vn/blog/redux-la-gi/ [19] Phạm Tín, Tìm hiểu ReduxThunk, 05/4/2020, https://viblo.asia/p/timhieu-ve-redux-thunk-Qbq5Qkm4ZD8 58 ... CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN - HỌ VÀ TÊN SINH VIÊN: CAO TIẾN QUANG, TRẦN PHƢỚC THÀNH TÌM HIỂU FRAMEWORK SPRING CHO BACKEND, REACTJS CHO FRONTEND VÀ XÂY DỰNG WEBSITE BÁN GIÀY... 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 Framework Spring cho Backend, ReactJS cho Frontend xây dựng website bán giày minh họa? ?? Tình... Chương 1: Tìm hiểu framework  Chương 2: Phân tích thiết kế hệ thống  Chương 3: Xây dựng ứng dụng minh họa  Chương 4: Kết luận đánh giá CHƢƠNG 1: TÌM HIỂU VỀ FRAMEWORK 1.1 Tìm hiểu Spring Framework