Xây dựng website bán máy tính và phụ kiện

ĐẠ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 BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE BÁN MÁY TÍNH VÀ PHỤ KIỆN LỚP: SE122.N11.PMCL – KHĨA K14 GIẢNG VIÊN HƯỚNG DẪN ThS Thái Thụy Hàn Uyển Võ Thành Phát – 19522003 Võ Tấn Việt – 19522519 TP HỒ CHÍ MINH, 2022 LỜI CẢM ƠN Nhóm chúng em xin chân thành cảm ơn trường Đại học Công nghệ thông tin nói chung GV ThS Thái Thụy Hàn Uyển nói riêng tạo điều kiện cho chúng em thực môn học đồ án Với giúp đỡ GV ThS Thái Thụy Hàn Uyển, chúng em xây dựng thành công trang web bán hàng full stack với chức phù hợp với nhu cầu người dùng Đề tài nhóm hồn thành vịng tháng tính ln thời gian học ngôn ngữ front end back end Vì lần đầu nhóm chúng em tiếp cận với ngơn ngữ lập trình web nên cịn tồn lỗi khơng mong muốn Nhóm em mong nhận góp ý để giúp ngày hồn thiện có nhiều kinh nghiệm để chuẩn bị cho đồ án, sản phẩm cho tương lai Một lần nữa, chúng em xin chân thành cảm ơn GV ThS Thái Thụy Hàn Uyển chúc cô dồi sức khỏe để tiếp tục công việc đào tạo lớp trẻ IT NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………… ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) Tên đề tài: Xây dựng website bán máy tính phụ kiện Giảng viên hướng dẫn: ThS Thái Thụy Hàn Uyển Thời gian thực hiện: Từ ngày 05/09/2022 đến ngày 28/12/2022 Sinh viên thực hiện: Võ Thành Phát – 19522003 Võ Tấn Việt - 19522519 Nội dung đề tài: Giới thiệu toán: Ngày nay, lẽ tự nhiên thời đại công nghệ 4.0, website thương mại, buôn bán sản phẩm ngày phát triển tín dụng Một phần cung cấp cho người dùng tiện lợi, nhanh gọn mua bán, thứ hai giúp người dùng lựa cho đồ ưng ý, hợp với nhu cầu mà không thiết phải tận cửa hàng để lựa chọn Bên cạnh đó, nhờ có phát triển cơng nghệ mà chủ cửa hàng có nhu cầu tạo website thương mại phục vụ họ mục đích bán hàng, ngồi cịn tăng thêm thu nhập, phát triển kinh tế Đó lý mà website bán máy tính phụ kiện đời hỗ trợ khách hàng người bán lợi ích thiết thực Mục tiêu Mục tiêu kết hợp kiến thức học tự học, kèm theo hiểu biết trải nghiệm từ phía người dùng, để tạo nên website bán hàng online hoàn chỉnh – tối ưu hoá mặt, để sau dễ phát triển Sau bước đặt để hồn thành sản phẩm: - Học tìm hiểu ngơn ngữ lập trình, cơng nghệ hỗ trợ phát triển trang web full stack - Tìm hiểu kiến trúc hệ thống thiết kế quản lý database - Nghiên cứu Framework Bootstrap, Framework Springboot - Tìm hiểu cách mơ giao diện Figma - Vẽ diagram mô tả chức hệ thống - Xây dựng thành công website bán máy tính phụ kiện Phạm vi Đề tài tập trung vào nghiên cứu website bán sản phẩm máy tính linh kiện điện tử, đồng thời phục vụ mục đích bán hàng Đối tượng: ● Các chủ cửa hàng bán máy tính, sản phẩm điện tử có nhu cầu mở rộng việc kinh doanh internet hình thức bán hàng qua website online thương mại ● Các khách hàng, người dùng có nhu cầu mua máy tính phụ kiện điện tử, vừa tiện lợi, dễ sử dụng lại có ship hàng đến tận nhà Phương pháp thực hiện: - Tìm hiểu học HTML, CSS, Javascript, Bootstrap, Thymleaf, Java, SpringBoot, MySQL, Figma - Khảo sát thực trạng website thương mại, bán máy tính thị trường - Phân tích thiết kế hệ thống xây dựng website - Tìm hiểu thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho khách hàng, người bán hàng quản lý - Tiến hành triển khai kiểm thử Công nghệ dự kiến sử dụng: Các ngơn ngữ, cơng nghệ lập trình front end: HTML, Css, Javascript, Bootstrap, Thymleaf Các ngôn ngữ công nghệ lập trình back end: Java, SpringBoot Database: PostgresSQL Cơng cụ thiết kế UI : Figma Cơng cụ phân tích thiết kế, vẽ diagram: draw.io Công cụ coding/quản lý database: Visual Studio Code, Eclipse IDE, Postgres Workbench 8.0 CE Công cụ quản lý dự án: Github, Messenger Group, MicrosoftTeams Công cụ lưu trữ tài liệu liên quan: Google Drive, Github Kết mong đợi - Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng Website thương mại bán máy tính - Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng - Nắm ngôn ngữ, công nghệ bước đầu tạo website như: HTML, CSS, Javascript, Bootstrap, Java, SpringBoot, MySQL - Nắm công cụ sử dụng trình thực đồ án như: Github, Figma, DrawIO - Học cách nghiên cứu, học công nghệ cách nhanh gọn hiệu Đặc biệt có hướng để từ ngơn ngữ, cơng nghệ mà tiến đến Framework cao cấp hỗ trợ tốt tạo nên sản phẩm tốt - Học cách tổ chức làm việc nhóm, tập trung vào cơng việc, đưa ý kiến nhân vào đồ án nhóm, đặt thân vào mắt, nhu cầu người dùng nhằm phát triển đồ án tốt Các tiêu chí khác: Tính thẩm mỹ: Website có giao diện thân thiện, dễ sử dụng Tính logic bảo mật: + Các tính hoạt động mượt mà, khơng bị lỗi + Dữ liệu người dùng bảo mật Link Github: Website bán máy tính phụ kiện: FrontEnd: https://github.com/19522003/Ecommerce_PC Full Project: https://github.com/19522519/Backend-Doan2 Tài liệu đặc tả: https://docs.google.com/document/d/1XYMCkixpjtDedmxM_heFEL7MxgRqsDb/edit?usp=sharing&ouid=114181731778578766300&rtp of=true&sd=true Kế hoạch thực hiện: Nội dung Thời gian Võ Thành Phát Võ Tấn Việt 6/9/2022– 7/9/2022 9/9/2022 – 10/9/2022 11/9/2022 – 11/9/2022 12/9/2022 – 15/9/2022 16/9/2022 – 16/9/2022 Tìm hiểu đề tài Tìm hiểu đề tài Tham khảo trang web có Tham khảo trang web có chức tương tự chức tương tự Lựa chọn ngôn ngữ, công nghệ phù hợp với trang web Viết SRS mục 4,5,6 Viết SRS mục 1,2,3 Thiết kế database bước đầu Thiết kế database bước đầu 17/9/2022 – 26/9/2022 Làm giao diện cho trang web 27/9/2022 – 30/9/2022 Phân tích hệ thống Làm chức đăng nhập, Áp dụng phân chia quyền sau đăng html,css,bootstrap,js nhập đăng ký Tìm hiểu Springboot Tiếp tục tìm hiểu Springboot thực chức lại trang web 30/9/2022 – 5/9/2022 Viết báo cáo tiếp tục làm Viết chức quản lý phần front end cịn lại sản phẩm 6/9/2022 – 31/10/2022 Hồn thành giao diện trang Tìm hiểu thực viết web, viết chức chức mua hàng thêm, xóa, sửa, quản lý sản phẩm 1/11/2022 – 16/11/2022 Viết chức xem sản phẩm khách hàng Tìm hiểu thực chức giỏ hàng, lên hóa đơn 17/11/2022– Tìm hiểu viết tiếp báo Kiểm tra chức cịn 30/11/2022 cáo lại, hồn thiện, fix bug làm tiếp chức quản lý đơn hàng, quản lý người dùng 1/12/2022– 20/12/2022 Tìm hiểu phần springboot Viết chức cập nhật tài cập nhật vào báo cáo khoản trang admin Hoàn thiện báo cáo trang tài khoản cá nhân người dùng 21/12/2022- Kiểm tra lại trang web Kiểm tra lại trang web tài 31/12/2022 tài liệu Hoàn thiện đồ án liệu Hồn thiện đồ án 10 120 Hình 5.21 Vay ngân hàng 121 Hình 5.22 Danh sách ngân hàng hợp tác Trang hướng dẫn giao hàng Hình 5.23 Trang hướng dẫn giao hàng 122 Trang sách bảo hành 123 Hình 5.24 Trang sách bảo hành 124 Trang giỏ hàng Hình 5.25 Trang giỏ hàng - order • Bao gồm thơng tin hình ảnh sản phẩm, tên sản phẩm, số lượng mua, giá tiền, nút xóa sản phẩm khỏi giỏ hàng, tổng tiền, nút điền thông tin tốn Trang điền thơng tin tốn lên đơn hàng Hình 5.26 Trang điền thơng tin tốn • Gồm trường liệu Tên đăng nhập, Họ tên, Email, SĐT, Địa chỉ, Tỉnh thành, Quận, Phường Xã, Phương thức toán, nút quay về, nút toán menu liệt kê sản phẩm mua 125 Trang menu tài khoản khách hàng Hình 5.27 Trang menu tài khoản cá nhân • Gồm mục: Thơng tin lịch sử đơn hàng, Quản lý tài khoản cá nhân Đăng xuất Trang Lịch sử mua hàng Hình 5.28 Trang lịch sử mua hàng Trang quản lý tài khoản cá nhân 126 Hình 5.29 Trang thay đổi thơng tin tài khoản Trang Admin - Dashboard Hình 5.30 Dashboard • Gồm mục số user sử dụng trang web, số đơn hàng có, số sản phẩm có, tổng giá tiền thu được, bảng thống kê số sản phẩm bán theo loại, doanh thu theo tháng, danh sách đơn hàng vừa lên danh sách khách hàng vừa tạo tài khoản Trang menu thêm sản phẩm 127 Hình 5.31 Menu thêm sản phẩm • Gồm mục thêm như: Laptop, PC, Màn hình, Chuột, Bàn phím, Tai nghe, Tay cầm, Ghế Gaming Trang menu quản lý sản phẩm theo mục Hình 5.32 Menu quản lý sản phẩm • Gồm mục thêm như: Laptop, PC, Màn hình, Chuột, Bàn phím, Tai nghe, Tay cầm, Ghế Gaming Trang danh sách sản phẩm 128 Hình 5.33 Trang quản lý theo mục • Gồm thơng tin sản phẩm có nút edit xóa sản phẩm Trang thêm sản phẩm Hình 5.34 Trang điền thơng tin chi tiết để tạo sản phẩm Trang danh sách đơn hàng 129 Hình 5.35 Trang danh sách đơn hàng Có mục trang thái giao hàng Seller admin có nhiệm vụ cập nhật trang thái giao hàng Trang thống kê doanh số bán hàng Hình 5.36 Trang thống kê doanh số bán hàng • Trang Manager xem, gồm mục: tổng doanh thu thống kế số lượng sản phẩm bán theo biểu đồ tròn Trang chỉnh thơng tin tài khoản đăng nhập 130 Hình 5.37 Trang chỉnh thông tin tài khoản Seller - Admin CHƯƠNG - KẾT LUẬN 6.1 Đánh giá 6.1.1 Thuận lợi ● Với phát triển Internet, tài liệu học thuật mạng, video hướng dẫn học ngôn ngữ, công nghệ chia sẻ, hướng dẫn tận tình giúp nhóm chúng em vừa nghiên cứu, vừa học hoàn thành đồ án ● Vận dụng kiến thức, quy trình phát triển học từ giảng viên dạy dỗ tận tình ● Vừa học vừa làm khiến việc hiểu nắm rõ công nghệ diễn thuận lợi 6.1.2 Khó khăn ● Vì tiếp cận với lập trình web nên bỡ ngỡ Có nhiều ngôn ngữ, công nghệ thị trường giúp phát triển web Nhưng thời gian để học thực đồ án khơng nhiều Vì chúng em định lựa chọn ngôn ngữ, công nghệ tảng để phát triển gốc cho framework 131 tiến tiến sau Vừa có đủ thời gian học làm, vừa tạo trang web full stack hoàn chỉnh ● Để lập trình nên website cần phải biết ngơn ngữ Front End Back End Vì cần tốn nhiều thời gian để nghiên cứu học ● Tài liệu tiếng việt ít, tiếng anh nhiều nhiên đơi đọc khó hiểu ● Vì năm nên thành viên nhóm bận nhiều cơng việc, thực tập 6.2 Kết đạt 6.2.1 Ưu điểm ● Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng Website thương mại bán máy tính phụ kiện ● Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng ● Nắm ngôn ngữ, công nghệ bước đầu tạo website như: HTML, CSS, Javascript, Bootstrap, PostgreSQL, Spring Boot ● Nắm công cụ sử dụng trình thực đồ án như: Github, Figma, DrawIO ● Học cách nghiên cứu, học công nghệ cách nhanh gọn hiệu Đặc biệt có hướng để từ ngơn ngữ, cơng nghệ mà tiến đến Framework cao cấp hỗ trợ tốt tạo nên sản phẩm tốt ● Học cách tổ chức làm việc nhóm, tập trung vào cơng việc, đưa ý kiến nhân vào đồ án nhóm, đặt thân vào mắt, nhu cầu người dùng nhằm phát triển đồ án tốt 6.2.2 Nhược điểm ● Giao diện cần tối ưu thêm nhiều hiệu ứng giúp website thêm sinh động ● Chưa có đột phá với website có thị trường 132 6.3 Hướng phát triển ● Mở rộng hướng phát triển website từ ngôn ngữ, công nghệ sang ngôn ngữ, công nghệ tiên tiến bật ● Xây dựng mở rộng thêm chức : đánh giá khách hàng, mua hàng hình thức tốn thẻ, thiết kế giao diện đẹp ● Tối ưu hóa code để dễ cập nhật mở rộng tính CHƯƠNG - TÀI LIỆU THAM KHẢO 7.1 Tài liệu tiếng Việt Học Java: https://freetuts.net/hoc-java/java-core Học Design Pattern – DAO: https://freetuts.net/data-access-object-patterntrong-java 2917.html Học HTML: https://youtu.be/R6plN3FvzFY Học CSS: https://youtu.be/NsSsJTg29oE Học Bootstrap: https://freetuts.net/hoc-bootstrap HTML/CSS: https://freetuts.net/hoc-html-css Javascript: https://freetuts.net/hoc-javascript https://youtu.be/0SJE9dYdpps JSP: https://www.vietjack.com/jsp/index.jsp https://viettuts.vn/jsp/kien-truc-jsp Servlet: https://hoclaptrinh.vn/tutorial/hoc-servlets https://www.vietjack.com/servlets/ 133 MySQL: https://freetuts.net/hoc-mysql Github: https://codelearn.io/sharing/git-github-tu-co-ban-den-nang-cao-p1 Học Spring Boot: 7.2 Tài liệu tiếng Anh HTML/CSS: https://www.w3schools.com/html/default.asp https://www.w3schools.com/css/default.asp Javascript: https://www.w3schools.com/js/default.asp Bootstrap: https://www.w3schools.com/bootstrap4/default.asp Java: https://www.w3schools.com/java/default.asp JSP:https://www.infoworld.com/article/3336161/what-is-jsp-introduction-tojavaserver-pages.html https://www.geeksforgeeks.org/introduction-to-jsp/ Servlet: https://www.javatpoint.com/servlet-tutorial https://www.tutorialspoint.com/servlets/index.htm https://youtu.be/OuBUUkQfBYM Spring Boot: Spring Boot ? - VietNix SpringBoot - TopDev Khóa học Spring Boot - NguyenDucHoang Spring Security - Be Coder 134 ... chức hệ thống - Xây dựng thành cơng website bán máy tính phụ kiện Phạm vi Đề tài tập trung vào nghiên cứu website bán sản phẩm máy tính linh kiện điện tử, đồng thời phục vụ mục đích bán hàng Đối... thực trạng website thương mại, bán máy tính thị trường - Phân tích thiết kế hệ thống xây dựng website - Tìm hiểu thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho... có nhu cầu tạo website thương mại phục vụ họ mục đích bán hàng, ngồi tăng thêm thu nhập, phát triển kinh tế Đó lý mà website bán máy tính phụ kiện đời hỗ trợ khách hàng người bán lợi ích thiết