(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính(Đồ án tốt nghiệp) Xây dựng trang web bán linh kiện máy tính
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB BÁN LINH KIỆN MÁY TÍNH GVHD : Thầy Nguyễn Trần Thi Văn SVTH : Phan Quốc Phú MSSV : 16110180 SVTH : Đặng Văn Mạnh MSSV : 16110151 Khóa : TP.HCM, tháng năm 2021 LỜI CẢM ƠN Được phân công quý thầy cô khoa Công nghệ thông tin, Trường Đại Học Sư Phạm Kỹ Thuật TP.HCM, sau gần hết học kỳ nhóm em hồn thành “Khóa Luận Tốt Nghiệp” Để hồn thành nhiệm vụ giao, ngồi tìm hiểu thân người nhóm cịn có hướng dẫn tận tình thầy Chúng em xin chân thành cảm ơn thầy Nguyễn Trần Thi Văn, người hướng dẫn cho nhóm em suốt thời gian làm khóa luận Thầy định hướng vấn đề cho nhóm rõ ràng để nhóm làm việc hiệu Tuy nhiên kiến thức chun mơn cịn hạn chế, việc bọn em chưa thực hiểu trang web bán hàng thực tế cần kinh nghiệm để xử lý cho trường hợp, nên đồ án khơng tránh có thiếu sót, em mong nhận góp ý, bảo quý thầy cô hướng dẫn thầy cô phản biện để báo cáo hoàn thiện Một lần xin gửi đến thầy cô lời cảm ơn chân thành tốt đẹp nhất! Nhóm sinh viên thực Phan Quốc Phú Đặng Văn Mạnh Báo Cáo Khóa Luận Tốt Nghiệp Trang | i LỜI NĨI ĐẦU Những tiến to lớn công nghệ năm cuối kỷ 20 lĩnh vực công nghệ thông tin tạo nhiều thay đổi cách vận hành kinh doanh cửa hàng Nếu xưa cửa hàng muốn buôn bán tốt cần có vị trí tốt chiến lược quảng cáo chỗ với quan hệ may mắn phát triển, thời thay đổi Hiện tại, cửa hàng nằm góc đường người qua lại, kinh phí cho marketing thấp, trang web riêng để trưng bày mặt hàng, sản phẩm cung cấp cho khách hàng lựa chọn mua sắm trực tuyến điều kiện cần đủ để cửa hàng tồn mơi trường số hóa Việt Nam thức hịa vào mạng lưới Internet toàn cầu vào năm 1997 Hơn 20 năm phát triển, Việt Nam có 50% dân số vào mạng thường xuyên Quy mô thương mại điện tử Việt Nam đạt 11,8 tỷ USD vào năm 2020 Điều đủ để chứng minh tầm quan trọng trang web việc phát triển cửa hàng lớn đến nhường Đối với doanh nghiệp, việc sở hữu cho trang web để trưng bày bày bán mặt hàng giúp tiết kiệm nhiều không gian trưng bày sản phẩm, phí mặt bằng, nguồn nhân lực…Cịn khách hàng, tiết kiệm chi phí lại, thời gian tìm thơng tin cho sản phẩm, giá phải chăng, có nhiều lựa chọn từ nhiều nhà cung cấp tiện ích mà trang web bán hàng mang lại Vì lý đó, nhóm bọn em định chọn đề tài: “Xây dựng trang web bán linh kiện máy tính” làm đề tài cho khóa luận tốt nghiệp học kỳ Báo Cáo Khóa Luận Tốt Nghiệp Trang | ii Mục Lục LỜI CẢM ƠN i LỜI NÓI ĐẦU ii Mục Lục iii DANH MỤC HÌNH ẢNH viii DANH MỤC BẢNG x DANH MỤC TỪ VIẾT TẮT xiii CHƯƠNG 1: MỞ ĐẦU 1 Đặt vấn đề lý chọn đề tài Mục tiêu nhiệm vụ đề tài 2.1 Mục tiêu 2.2 Nhiệm vụ 3 Yêu cầu Phương pháp nghiên cứu Bố cục báo cáo CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG Html/Css 1.1 HTML - HyperText Markup Language 1.2 Css - Cascade Style Sheet Laravel PHP framework Mơ hình MVC Một số package Laravel sử dụng đồ án Cơ sở liệu MySQL 10 CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 11 Khảo sát trạng 11 1.1 Gearvn 11 1.2 AnphatPC 12 Báo Cáo Khóa Luận Tốt Nghiệp Trang | iii 1.3 Phong Vũ 13 Cấu trúc ứng dụng 13 Qui định yêu cầu thiết kế 17 3.1 Quy định 17 3.2 Yêu cầu thiết kế 17 Đánh giá lựa chọn công nghệ 18 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 19 Lược đồ usecase mô tả use case 19 1.1 Danh sách usecase 19 1.2 Lược đồ usecase 20 1.3 Đặc tả use case 21 1.3.1 Tìm kiếm thơng tin 21 1.3.2 Xem danh sách sản phẩm 21 1.3.3 Xem thông tin chi tiết sản phẩm 22 1.3.4 Các chức giỏ hàng 22 1.3.5 Đăng ký 23 1.3.6 Đăng nhập 23 1.3.7 Đăng xuất 24 1.3.8 Đặt mua hàng 24 1.3.9 Xem danh sách đơn hàng 25 1.3.10 Xem thông tin đơn hàng 25 1.3.11 Chỉnh sửa thông tin cá nhân 26 1.3.12 Đánh giá sản phẩm 26 1.3.13 Quản lý banner quảng cáo 27 1.3.14 Quản lý tài khoản khách hàng 27 1.3.15 Quản lý đơn hàng 28 1.3.16 Quản lý sản phẩm 28 Báo Cáo Khóa Luận Tốt Nghiệp Trang | iv 1.3.17 Quản lý viết 29 1.3.18 Quản lý danh mục 30 1.3.19 Xem thống kê bán hàng 31 1.3.20 Quản lý nhân viên 31 Mơ hình sở liệu 32 2.1 Lược đồ quan hệ 32 2.2 Danh sách bảng 33 2.3 Mô tả chi tiết bảng 34 2.3.1 Bảng admins 34 2.3.2 Bảng articles 34 2.3.3 Bảng categories 35 2.3.4 Bảng contacts 36 2.3.5 Bảng orders 36 2.3.6 Bảng out_banners 37 2.3.7 Bảng slide_banners 37 2.3.8 Bảng password_resets 38 2.3.9 Bảng payments 38 2.3.10 Bảng products 39 2.3.11 Bảng ratings 40 2.3.12 Bảng transactions 40 2.3.13 Bảng users 41 2.4 Quan hệ bảng 42 2.4.1 ratings – users 42 2.4.2 payments – users 43 2.4.3 payments – transactions 44 2.4.4 transactions – orders 45 2.4.5 orders – products 46 Báo Cáo Khóa Luận Tốt Nghiệp Trang | v 2.4.6 products – categories 47 2.4.7 admins - articles 48 Lược đồ 49 3.1 Đăng nhập 49 3.2 Đăng ký 50 3.3 Thêm sản phẩm 51 3.4 Đặt hàng 52 3.5 Xử lý đơn hàng 53 Sơ đồ sitemap website 54 4.1 Sơ đồ sitemap khách hàng 54 4.2 Sơ đồ sitemap admin 55 Thiết kế giao diện 56 5.1 Khách hàng 56 5.1.1 Trang chủ 56 5.1.2 Trang đăng nhập 58 5.1.3 Trang đăng ký 59 5.1.4 Trang xem danh sách sản phẩm theo danh mục 60 5.1.5 Trang xem chi tiết sản phẩm 61 5.1.6 Trang xem lịch sử đơn hàng 62 5.1.7 Trang xem sản phẩm giỏ hàng 63 5.1.8 Trang xác nhận thông tin đơn hàng 64 5.1.9 Trang thông báo đặt hàng thành công 65 5.1.10 Trang toán online 66 5.1.11 Trang thơng báo tốn thành cơng 67 5.1.12 Trang xem thông tin cá nhân 68 5.1.13 Trang thay đổi thông tin cá nhân 70 5.1.14 Trang sách bảo hành 71 Báo Cáo Khóa Luận Tốt Nghiệp Trang | vi 5.1.15 5.2 Trang hướng dẫn trả góp 72 Admin 73 5.2.1 Trang tổng quan 73 5.2.2 Trang quản lý danh mục 74 5.2.3 Trang quản lý sản phẩm 76 5.2.4 Trang thêm/sửa sản phẩm 77 5.2.5 Trang quản lý đánh gíá 79 5.2.6 Trang xử lý đơn hàng 80 5.2.7 Trang quản lý tin tức 81 5.2.8 Trang quản lý tài khoản khách hàng 82 5.2.9 Trang quản lý banner quảng cáo 83 5.2.10 Trang quản lý tài khoản quản trị viên 84 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 85 Cài đặt 85 1.1 Chuẩn bị môi trường hosting 85 1.2 Chuẩn bị database 87 Kiểm thử 89 CHƯƠNG 6: KẾT LUẬN 90 Kết đạt 90 Ưu điểm 90 Khuyết điểm 91 Hướng phát triển 91 TÀI LIỆU THAM KHẢO 92 Báo Cáo Khóa Luận Tốt Nghiệp Trang | vii DANH MỤC HÌNH ẢNH Hình 3.1 Giao diện trang chủ GearVN 11 Hình 3.2 Giao diện trang chủ AnphatPC 12 Hình 3.3 Giao diện trang chủ Phongvu 13 Hình 4.1 Lược đồ usecase 20 Hình 4.2 Lược đồ quan hệ 32 Hình 4.3 Quan hệ bảng ratings - users 42 Hình 4.4 Quan hệ bảng payments - users 43 Hình 4.5 Quan hệ bảng payments - transactions 44 Hình 4.6 Quan hệ bảng transactions - orders 45 Hình 4.7 Quan hệ bảng orders - products 46 Hình 4.8 Quan hệ bảng products - categories 47 Hình 4.9 Quan hệ bảng admins - articles 48 Hình 4.10 Lược đồ cho chức đăng nhập 49 Hình 4.11 Lược đồ cho chức đăng ký 50 Hình 4.12 Lược đồ cho chức thêm sản phẩm 51 Hình 4.13 Lược đồ cho chức đặt hàng 52 Hình 4.14 Lược đồ cho chức xử lý đơn hàng 53 Hình 4.15 Sitemap cho khách hàng 54 Hình 4.16 Sitemap cho admin 55 Hình 4.17 Giao diện cho trang chủ 56 Hình 4.18 Giao diện cho trang đăng nhập 58 Hình 4.19 Giao diện cho trang đăng ký 59 Hình 4.20 Giao diện cho trang xem danh sách sản phẩm theo danh mục 60 Hình 4.21 Giao diện cho trang xem chi tiết sản phẩm 61 Hình 4.22 Giao diện cho trang xem lịch sử đơn hàng 62 Hình 4.23 Giao diện cho trang xem sản phẩm giỏ hàng 63 Báo Cáo Khóa Luận Tốt Nghiệp Trang | viii Hình 4.24 Giao diện cho trang xác nhận thơng tin đơn hàng 64 Hình 4.25 Giao diện cho trang thông báo đặt hàng thành công 65 Hình 4.26 Giao diện cho trang toán online 66 Hình 4.27 Giao diện cho trang thơng báo tốn thành cơng 67 Hình 4.28 Giao diện cho trang xem thơng tin cá nhân 68 Hình 4.29 Giao diện cho trang thay đổi thông tin cá nhân 70 Hình 4.30 Giao diện cho trang sách bảo hành 71 Hình 4.31 Giao diện cho trang hướng dẫn trả góp 72 Hình 4.32 Giao diện cho trang tổng quan 73 Hình 4.33 Giao diện cho trang quản lý danh mục 74 Hình 4.34 Giao diện cho trang quản lý sản phẩm 76 Hình 4.35 Giao diện cho trang thêm sửa sản phẩm 77 Hình 4.36 Giao diện cho trang quản lý đánh giá 79 Hình 4.37 Giao diện cho trang xử lý đơn hàng 80 Hình 4.38 Giao diện cho trang quản lý tin tức 81 Hình 4.39 Giao diện cho trang quản lý tài khoản khách hàng 82 Hình 4.40 Giao diện cho trang quản lý banner quảng cáo 83 Hình 4.41 Giao diện cho trang quản lý tài khoản quản trị viên 84 Hình 5.1 Setting 85 Hình 5.2 Setting chi tiết cho App 86 Hình 5.3 Nội dung file Procfile để setting dyno 86 Hình 5.4 Convert database sang file migration 87 Hình 5.5 Chạy migration console Heroku 87 Hình 5.6 Seed liệu mậu vào Heroku 88 Hình 5.7 Đăng nhập admin host vừa deploy 88 Báo Cáo Khóa Luận Tốt Nghiệp Trang | ix Chương 4: Thiết Kế Phần Mềm 5.2.5 Trang quản lý đánh gíá Hình 4.36 Giao diện cho trang quản lý đánh giá Bảng 4.69 Mô tả chức giao diện trang quản lý đánh giá ID Loại Chức Html Page Trang tổng hợp đánh giá sản phẩm Báo Cáo Khóa Luận Tốt Nghiệp Trang | 79 Chương 4: Thiết Kế Phần Mềm 5.2.6 Trang xử lý đơn hàng Hình 4.37 Giao diện cho trang xử lý đơn hàng Bảng 4.70 Mô tả chức giao diện trang xử lý đơn hàng ID Loại Chức Badge Link Chỉnh trạng thái đơn hàng Badge Link Điều chỉnh trạng thái tốn Báo Cáo Khóa Luận Tốt Nghiệp Trang | 80 Chương 4: Thiết Kế Phần Mềm 5.2.7 Trang quản lý tin tức Hình 4.38 Giao diện cho trang quản lý tin tức Bảng 4.71 Mô tả chức giao diện trang quản lý tin tức ID Loại Chức Html page Trang quản lý viết Báo Cáo Khóa Luận Tốt Nghiệp Trang | 81 Chương 4: Thiết Kế Phần Mềm 5.2.8 Trang quản lý tài khoản khách hàng Hình 4.39 Giao diện cho trang quản lý tài khoản khách hàng Bảng 4.72 Mô tả chức giao diện trang quản lý tài khoản khách hàng ID Loại Chức Html page Trang quản lý tài khoản khách hàng Báo Cáo Khóa Luận Tốt Nghiệp Trang | 82 Chương 4: Thiết Kế Phần Mềm 5.2.9 Trang quản lý banner quảng cáo Hình 4.40 Giao diện cho trang quản lý banner quảng cáo Bảng 4.73 Mô tả chức giao diện trang quản lý banner quảng cáo ID Loại Chức Img Hình ảnh banner Button Chuyển trang thêm banner Badge link Chỉnh trạng thái banner Báo Cáo Khóa Luận Tốt Nghiệp Trang | 83 Chương 4: Thiết Kế Phần Mềm 5.2.10.Trang quản lý tài khoản quản trị viên Hình 4.41 Giao diện cho trang quản lý tài khoản quản trị viên Bảng 4.74 Mô tả chức giao diện trang quản lý tài khoản quản trị viên ID Loại Chức Table Hiển thị danh sách quản trị viên Button Tới trang thêm tài khoản quản trị viên Button Group Chuyển trang Báo Cáo Khóa Luận Tốt Nghiệp Trang | 84 Chương 5: Kết Luận CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ Cài đặt 1.1 Chuẩn bị môi trường hosting Host: Heroku Deployment method: Github Connect Database service: PostgreSQL Cài đặt setting Heroku: Hình 5.1 Setting Báo Cáo Khóa Luận Tốt Nghiệp Trang | 85 Chương 5: Kết Luận Hình 5.2 Setting chi tiết cho App Cài đặt dyno cho heroku: Hình 5.3 Nội dung file Procfile để setting dyno Báo Cáo Khóa Luận Tốt Nghiệp Trang | 86 Chương 5: Kết Luận 1.2 Chuẩn bị database Convert tất bảng có database thành file migration: Hình 5.4 Convert database sang file migration Chạy migration console Heroku: Hình 5.5 Chạy migration console Heroku Báo Cáo Khóa Luận Tốt Nghiệp Trang | 87 Chương 5: Kết Luận Seed liệu mẫu vào Heroku: Hình 5.6 Seed liệu mậu vào Heroku Đăng nhập admin host: Hình 5.7 Đăng nhập admin host vừa deploy Báo Cáo Khóa Luận Tốt Nghiệp Trang | 88 Chương 5: Kết Luận Kiểm thử Chức Đăng nhập tài khoản Mô tả User đăng nhập vào Trạng thái Hoạt động tốt website thông qua tài khoản đăng ký Đăng nhập qua tài khoản User guest đăng nhập google vào website thông qua tài Hoạt động tốt khoản google Thêm xóa sản phẩm User thêm xóa sản giỏ hàng phẩm khỏi giỏ hàng Thanh tốn online User thực toán Hoạt động tốt Hoạt động tốt online cho đơn hàng Đặt hàng User thực đặt hàng Hoạt động tốt Xem lịch sử đơn hàng User xem lịch sử đơn hàng Hoạt động tốt Xem chi tiết đơn hàng User xem chi tiết đơn hàng Hoạt động tốt Đổi thơng tin cá nhân User đổi thông tin cá nhân Hoạt động tốt tài khoản Thêm xóa sửa sản phẩm Admin thực CRUD Hoạt động tốt sản phẩm Xử lý trạng thái đơn hàng Admin xử lý trạng thái Hoạt động tốt đơn hàng Báo Cáo Khóa Luận Tốt Nghiệp Trang | 89 Chương 5: Kết Luận CHƯƠNG 6: KẾT LUẬN Kết đạt - Nghiên cứu áp dụng cách có hệ thống nội dung Laravel package hỗ trợ việc xây dựng trang web bán linh kiện máy tính - Hiểu số giải pháp xây dựng website bán linh kiện máy tính có đầy đủ chức - Khả làm việc phối hợp nhóm, quản lý phiên code tăng cường sau quãng thời gian phải phối hợp hoàn thành đề tài từ xa dịch bệnh - Khả tìm đọc tài liệu thành viên nâng cao - Về mặt lý thuyết: o Nắm vững kiến thức Laravel nguyên lý hoạt động framework o Nắm cách hoạt động mơ hình web MVC Laravel framework - Về mặt ứng dụng web: o Thiết kế cài đặt thành công website o Xây dựng website bán hàng có đầy đủ chức cần thiết như: giỏ hàng, xem hàng, đặt hàng, tốn online o Hồn thành Module Admin cho quản trị viên quản trị trang web o Hoàn thành Module User cho khách mua sắm Ưu điểm o Ứng dụng ajax để giảm số lần load lại trang, tăng trải nghiệm người dùng o Có chức đăng nhập thông qua tài khoản google để tiện lợi cho khách hàng đăng nhập mua sắm o Có tính toán online cho trang web, tạo tiện lợi cho khách hàng chủ shop Báo Cáo Khóa Luận Tốt Nghiệp Trang | 90 Chương 5: Kết Luận o Admin có nhiều lựa chọn để điều khiển thành phần xuất trang chủ Khuyết điểm - Vẫn số lỗi vặt hoạt động - Giao diện chưa thực đẹp bắt mắt Hướng phát triển - Phát triển số tính chun biệt như: “Xây dựng cấu hình máy tính dựa linh kiện có shop” - Phát triển trang web sang hướng chuyên bán linh kiện - Đổi giao diện hợp lý hơn, bắt mắt - Thêm nhiều lựa chọn toán cho khách hàng Báo Cáo Khóa Luận Tốt Nghiệp Trang | 91 Chương 6: Tài Liệu Tham Khảo TÀI LIỆU THAM KHẢO - Hướng dẫn sử dụng cho package bumbummen99/shoppingcart: https://packagist.org/packages/bumbummen99/shoppingcart - Doc cho chức gửi mail Laravel 8.x: https://laravel.com/docs/8.x/mail - Tích hợp tốn Vnpay: https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/ - Doc cho chức đăng nhập thông qua tài khoản google Laravel 8.x: https://laravel.com/docs/8.x/socialite - Hướng dẫn sử dụng cho package nWidart/Laravel-modules: https://nwidart.com/laravel-modules/v1/introduction - Doc cho Laravel Query Builder: https://laravel.com/docs/8.x/queries - Doc cho Laravel Authentication: https://laravel.com/docs/8.x/authentication - Doc cho Laravel Authorization: https://laravel.com/docs/8.x/authorization - Doc cho Laravel Encryption: https://laravel.com/docs/8.x/encryption - Doc cho Laravel Hashing: https://laravel.com/docs/8.x/hashing Báo Cáo Khóa Luận Tốt Nghiệp Trang | 92 ... mà trang web bán hàng mang lại Vì lý đó, nhóm bọn em định chọn đề tài: ? ?Xây dựng trang web bán linh kiện máy tính? ?? làm đề tài cho khóa luận tốt nghiệp học kỳ Báo Cáo Khóa Luận Tốt Nghiệp Trang. .. thiếu muốn mở cửa hàng bán linh kiện máy tính hay thứ khác Qua q trình học trường lớp tự học, bọn em định áp dụng kiến thức có để hồn thiện đề tài ? ?Xây dựng website bán linh kiện điện tử” với hướng... Laravel cần thiết để thực xây dựng trang web - Khảo sát trang bán linh kiện điện tử hoạt động - Nghiên cứu cách sử dụng thư viện javascript, jquery hỗ trợ ajax để cải thiện trang web - Nghiên cứu công