Xây dựng website bán hàng điện máy

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM NGUYỄN MINH LỰC ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN MÁY Kon Tum, tháng 04 năm 2022 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN MÁY GIẢNG VIÊN HƯỚNG DẪN : TS ĐỒNG NGỌC NGUYÊN THỊNH SINH VIÊN THỰC HIỆN :NGUYỄN MINH LỰC LỚP : K11TT MSSV : 17152480201004 Kon Tum, tháng 04 năm 2022 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường, đặc biệt Thầy Cô khoa Công Nghệ… giúp đỡ em tài liệu tham khảo hướng dẫn chỉnh sửa để em hồn thành báo cáo đồ án tốt nghiệp Và em xin chân thành cảm ơn Thầy Đồng Ngọc Nguyên Thịnh nhiệt tình hướng dẫn hướng dẫn em việc lựa chọn đề tài nghiên cứu, hướng tiếp cận giúp em chỉnh sửa thiếu sót q trình nghiên cứu Trong trình nghiên cứu, kinh nghiệm cịn hạn chế nên khó tránh khỏi sai sót Em mong nhận ý kiến đóng góp từ phía Thầy, Cô để em học thêm nhiều kinh nghiệm hoàn thành tốt Em xin chân thành cảm ơn! Sinh viên Nguyễn Minh Lực MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU .1 1.2 LÝ DO CHỌN ĐỀ TÀI 1.3 MỤC TIÊU NGHIÊN CỨU 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Tiếp cận thực tế .2 1.4.2 Nghiên cứu lý thuyết .2 1.4.3 Nghiên cứu công nghệ .2 1.5 PHẠM VI NGHIÊN CỨU .2 CHƯƠNG CƠ SỞ LÝ THUYẾT .3 2.1 MƠ HÌNH MVC .3 2.2 FRAMEWORD LARAVEL 2.2.1 Lịch sử phát triển 2.2.2 Ưu điểm 2.2.3 Nhược điểm 2.2.4 Cách cài đặt .4 2.2.5 Mô hình MVC laravel 2.3 NGÔN NGỮ 2.3.1 HTML .5 2.3.2 CSS 2.3.3 Javascript 2.3.4 PHP 2.4 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL 2.5 PHẦN MỀM 2.5.1 Xampp 2.5.2 Visual studio code 2.6 THƯ VIỆN HỖ TRỢ .8 2.6.1 Bootsrap 2.6.2 Font awesome 2.6.3 JQuery 2.6.4 AJAX 2.6.5 SweetAlert 10 2.6.6 Morris chart js .10 2.7 MƠ HÌNH THƯƠNG MẠI ĐIỆN TỬ B2B, B2C .10 2.7.1 Mơ hình B2B 10 2.7.2 Mô hình B2C 10 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ .11 3.1 CHỨC NĂNG CỦA CHƯƠNG TRÌNH 11 3.1.1 Khách hàng 11 i 3.1.2 Người quản lý 13 3.2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.2.1 Phân tích thiết kế Usecase .17 3.2.2 Sơ đồ 34 3.2.3 Sơ đồ lớp .62 3.2.4 Lược đồ quan hệ sở liệu .63 CHƯƠNG KẾT QUẢ .69 4.1 GIAO DIỆN TRANG KHÁCH HÀNG 69 4.1.1 Giao diện trang chủ .69 4.1.2 Giao diện trang sản phẩm 70 4.1.3 Giao diện trang chi tiết sản phẩm 71 4.1.4 Giao diện trang đăng nhập 72 4.1.5 Giao diện trang đăng ký .72 4.1.6 Giao diện xem viết 73 4.1.7 Giao diện xem thông tin liên hệ 73 4.1.7 Giao diện tìm kiếm 74 4.1.8 Giao diện giỏ hàng 74 4.1.9 Giao diện trang đặt hàng toán 75 4.1.10 Giao diện trang lịch sử đơn hàng 76 4.1.11 Giao diện trang lịch sử đơn hàng chi tiết 77 4.2 GIAO DIỆN NGƯỜI QUẢN LÝ 77 4.2.1 Giao diện trang đăng nhập 77 4.2.2 Giao diện trang chủ .78 4.2.3 Giao diện trang quản lý danh mục sản phẩm 78 4.2.4 Giao diện trang quản lý thương hiệu sản phẩm 80 4.2.5 Giao diện trang quản lý sản phẩm 81 4.2.6 Giao diện trang quản lý danh mục viết 84 4.2.7 Giao diện trang quản lý viết 85 4.2.8 Giao diện trang quản lý mã khuyến 87 4.2.9 Giao diện trang quản lý slider .88 4.2.10 Giao diện trang quản lý đơn hàng .89 4.2.11 Giao diện trang thống kê 90 CHƯƠNG KẾT LUẬN 91 5.1 ĐÁNH GIÁ KẾT QUẢ 91 5.1.1 Kết đạt 91 5.1.2 Hạn chế đề tài 91 5.2 HƯỚNG PHÁT TRIỂN .91 DANH MỤC TÀI LIỆU THAM KHẢO 92 ii DANH MỤC CÁC TỪ VIẾT TẮT B2B B2C CSDL MVC : Business to Business : Business to Custome : Cơ sở liệu : Model View Controller iii DANH MỤC BẢNG Số hiệu bảng Tên bảng Trang 3.1 Mô tả use case 17 3.2 Đặc tả use case đăng ký 19 3.3 Đặc tả use case đăng nhập 19 3.4 Đặc tả use case quên mật 20 3.5 Đặc tả use case tìm kiếm sản phẩm 21 3.6 Đặc tả use case xem thông tin sản phẩm 21 3.7 Đặc tả use case xem viết 22 3.8 Đặc tả use case xem thông tin liên hệ 22 3.9 Đặc tả use case thêm sản phẩm vào giỏ hàng 23 3.10 Đặc tả use case quản lý giỏ hàng 23 3.11 Đặc tả use case tính mã khuyến 24 3.12 Đặc tả use case đặt hàng 25 3.13 Đặc tả use case quản lý danh mục thương hiệu 25 3.14 Đặc tả use case quản lý sản phẩm 27 3.15 Đặc tả use case quản lý danh mục viết 28 3.16 Đặc tả use case quản lý viết 29 3.17 Đặc tả use case quản lý mã khuyến 30 3.18 Đặc tả use case quản lý slider 31 3.19 Đặc tả use case quản lý đơn hàng 32 3.20 Đặc tả use case thống kê 33 3.21 Danh sách lớp 62 3.22 Bảng liệu Admin 63 3.23 Bảng liệu thương hiệu sản phẩm 63 3.24 Bảng liệu danh mục sản phẩm 63 3.25 Bảng liệu sản phẩm 64 3.26 Bảng liệu danh mục viết 64 3.27 Bảng liệu viết 64 3.28 Bảng liệu hình ảnh sản phẩm 65 3.29 Bảng liệu mã khuyến 65 3.30 Bảng liệu slider 65 3.31 Bảng liệu khách hàng 66 3.32 Dữ liệu thống kê 66 3.33 Dữ liệu đơn hàng 66 iv 3.34 Dữ liệu đơn hàng chi tiết 67 3.35 Dữ liệu thông tin đặt hàng 67 v DANH MỤC HÌNH Số hiệu hình Tên hình Trang 2.1 Mơ hình MVC 2.2 Mơ hình MVC laravel 3.1 Sơ đồ Usecase Tổng quát 18 3.2 Sơ đồ đăng ký 34 3.3 Sơ đồ đăng nhập 35 3.4 Sơ đồ thêm sản phẩm vào giỏ hàng 36 3.5 Sơ đồ cập nhật sản phẩm giỏ hàng 37 3.6 Sơ đồ xóa sản phẩm giỏ hàng 38 3.7 Sơ đồ tìm kiếm sản phẩm 38 3.8 Sơ đồ áp dụng mã khuyến 39 3.9 Sơ đồ xem sản phẩm 40 3.10 Sơ đồ xem chi tiết sản phẩm 40 3.11 Sơ đồ đặt hàng 41 3.12 Sơ đồ đăng nhập admin 42 3.13 Sơ đồ thêm sản phẩm 43 3.14 Sơ đồ xóa sản phẩm 44 3.15 Sơ đồ sửa sản phẩm 45 3.16 Sơ đồ thêm danh mục sản phẩm 46 3.17 Sơ đồ cập nhật danh mục sản phẩm 47 3.18 Sơ đồ xóa danh mục sản phẩm 48 3.19 Sơ đồ thêm thương hiệu sản phẩm 49 3.20 Sơ đồ cập nhật thương hiệu sản phẩm 50 3.21 Sơ đồ xóa thương hiệu sản phẩm 51 3.22 Sơ đồ thêm viết 52 3.23 Sơ đồ cập nhật viết 53 3.24 Sơ đồ xóa viết 54 3.25 Sơ đồ thêm mã khuyến 55 3.26 Sơ đồ gửi mã khuyến 56 3.27 Sơ đồ xóa mã khuyến 57 3.28 Sơ đồ thêm slider 58 3.29 Sơ đồ xóa slider 59 3.30 Sơ đồ quản lý đơn hàng 60 3.31 Sơ đồ thống kê bán hàng 61 vi 3.32 Sơ đồ lớp 62 3.33 Lược đồ sở liệu 68 4.1 Giao diện banner trang chủ 69 4.2 Giao diện trang chủ top sản phẩm bán chạy 69 4.3 Giao diện footer 70 4.4 Giao diện trang sản phẩm 70 4.5 Giao diện trang chi tiết sản phẩm 71 4.6 Giao diện trang đăng nhập 72 4.7 Giao diện trang đăng ký 72 4.8 Giao diện xem viết 73 4.9 Giao diện xem thông tin liên hệ 73 4.10 Giao diện trang tìm kiếm 74 4.11 Giao diện giỏ hàng 74 4.12 Giao diện trang đặt hàng toán 75 4.13 Giao diện trang lịch sử đơn hàng 76 4.14 Giao diện hủy đơn hàng 76 4.15 Giao diện trang lịch sử đơn hàng chi tiết 77 4.16 Giao diện trang đăng nhập 77 4.17 Giao diện trang chủ 78 4.18 Giao diện trang liệt kê danh mục sản phẩm 78 4.19 Giao diện trang thêm danh mục sản phẩm 79 4.20 Giao diện trang cập nhật danh mục sản phẩm 79 4.21 Giao diện trang liệt kê thương hiệu sản phẩm 80 4.22 Giao diện trang thêm thương hiệu sản phẩm 80 4.23 Giao diện trang cập nhật thương hiệu sản phẩm 81 4.24 Giao diện trang liệt kê sản phẩm 81 4.25 Giao diện trang thêm sản phẩm 82 4.26 Giao diện trang cập nhật sản phẩm 83 4.27 Giao diện trang quản lý hình ảnh sản phẩm 83 4.28 Giao diện trang liệt kê danh mục viết 84 4.29 Giao diện trang thêm danh mục viết 84 4.30 Giao diện trang cập nhật danh mục viết 85 4.31 Giao diện trang liệt kê viết 85 4.32 Giao diện trang thêm viết 86 4.33 Giao diện trang cập nhật viết 86 vii Trang web giúp người quản lý thêm danh mục sản phẩm, sau nhập đầy đủ thông tin phù hợp, hệ thống tiến hành kiểm tra thêm danh mục sản phẩm Hình 4.19: Giao diện trang thêm danh mục sản phẩm Trang web giúp người quản lý sửa danh mục sản phẩm Người quản lý nhập thông tin muốn sửa, sau hệ thống kiểm tra cập nhật lại danh mục Hình 4.20: Giao diện trang cập nhật danh mục sản phẩm 79 4.2.4 Giao diện trang quản lý thương hiệu sản phẩm Trang web giúp người quản lý xem danh sách thương hiệu cửa hàng, bao gồm thông tin: tên, hình ảnh, seo tiêu đề, hiển thị ẩn, bấm vào icon để sửa xóa Hình 4.21: Giao diện trang liệt kê thương hiệu sản phẩm Trang web giúp người quản lý thêm thương hiệu sản phẩm, sau nhập đầy đủ thông tin phù hợp, hệ thống tiến hành kiểm tra thêm thương hiệu sản phẩm Hình 4.22: Giao diện trang thêm thương hiệu sản phẩm 80 Trang web giúp người quản lý sửa thương hiệu sản phẩm Người quản lý nhập thông tin muốn sửa, sau hệ thống kiểm tra cập nhật lại thương hiệu Hình 4.23: Giao diện trang cập nhật thương hiệu sản phẩm 4.2.5 Giao diện trang quản lý sản phẩm Trang web giúp người quản lý xem danh sách sản phẩm cửa hàng bao gồm thơng tin tên, giá, số lượng, hình ảnh, tiêu đề,sản phẩm thuộc danh muc, thương hiệu bấm vào icon để sửa xóa sản phẩm Hình 4.24: Giao diện trang liệt kê sản phẩm 81 Trang web giúp người quản lý thêm sản phẩm, sau nhập đầy đủ thông tin phù hợp, hệ thống tiến hành kiểm tra thêm sản phẩm Hình 4.25: Giao diện trang thêm sản phẩm 82 Trang web giúp người quản lý sửa thơng tin sản phẩm, người quản lý nhập thông tin cần sửa phù hợp để hệ thống tiến hành cập nhật lại sản phẩm Hình 4.26: Giao diện trang cập nhật sản phẩm Trang web giúp người quản lý quản lý hình ảnh sản phẩm bao gồm têm hình ảnh, người dùng bấm vào icon để xóa hình ảnh Hình 4.27: Giao diện trang quản lý hình ảnh sản phẩm 83 4.2.6 Giao diện trang quản lý danh mục viết Trang web giúp người quản lý xem danh sách viết cửa hàng, bao gồm thông tin: tên, mô tả, seo tiêu đề, hiển thị ẩn, bấm vào icon để sửa xóa Hình 4.28: Giao diện trang liệt kê danh mục viết Trang web giúp người quản lý thêm danh mục viết, sau nhập đầy đủ thông tin phù hợp, hệ thống tiến hành kiểm tra thêm danh mục viết Hình 4.29: Giao diện trang thêm danh mục viết 84 Trang web giúp người quản lý sửa thơng tin danh mục viết, người quản lý nhập thông tin cần sửa phù hợp để hệ thống tiến hành cập nhật lại danh mục viết Hình 4.30: Giao diện trang cập nhật danh mục viết 4.2.7 Giao diện trang quản lý viết Trang web giúp người quản lý xem danh sách viết cửa hàng, bao gồm thơng tin: tên, hình ảnh, mơ tả, seo tiêu đề, từ khóa, danh mục hiển thị ẩn, bấm vào icon để sửa xóa Hình 4.31: Giao diện trang liệt kê viết 85 Trang web giúp người quản lý thêm viết, sau nhập đầy đủ thông tin phù hợp, hệ thống tiến hành kiểm tra thêm viết Hình 4.32: Giao diện trang thêm viết Trang web giúp người quản lý sửa thơng tin viết, người quản lý nhập thông tin cần sửa phù hợp để hệ thống tiến hành cập nhật lại viết Hình 4.33: Giao diện trang cập nhật viết 86 4.2.8 Giao diện trang quản lý mã khuyến Trang web giúp người quản lý xem danh sách loại mã giảm giá, thơng tin gồm có: Tên mã giảm giá, mã code, ngày bắt đầu, ngày kết thúc, số lượng, điều kiện (giảm theo % giảm theo tiền ),tình trạng bấm icon xóa gửi mã cho khách Hình 4.34: Giao diện trang liệt kê mã khuyến Trang web giúp người quản lý thêm mã giảm giá, sau nhập thông tin phù hợp, hệ thống kiểm tra thêm mã giảm giá vào hệ thống Hình 4.35: Giao diện trang thêm mã khuyến 87 Trang web giúp người quản lý gửi mã khuyến cửa hàng cho khách hàng, từ khách hàng sử dụng mã giảm để mua hàng Hình 4.36: Giao diện trang gửi mã khuyến cho khách hàng 4.2.9 Giao diện trang quản lý slider Trang web giúp người quản lý xem danh sách slider hệ thống bao gồm thơng tin: tên, hình ảnh, mơ tả, tình trạng (ẩn hiển thị), bấm vào icon để xóa slider Hình 4.37: Giao diện trang liệt kê slider 88 Trang web giúp người quản lý thêm slider, sau nhập thông tin phù hợp hệ thống tiến hành thêm slider Hình 4.38: Giao diện trang thêm slider 4.2.10 Giao diện trang quản lý đơn hàng Trang web giúp người quản lý xem danh sách đơn hàng đặt tình trạng đơn hàng, bấm vào icon để xem chi tiết đơn hàng xóa đơn hàng Hình 4.39: Giao diện trang liệt kê đơn hàng 89 Người quản lý bẫm vào xem đơn hàng chi tiết trang web hiển thị - Thông tin nhận hàng: Hiển thị thông tin người nhận hàng bao gồm: tên, địa chỉ, số điện thoại, email, ghi đơn hàng hình thức tốn - Liệt kê chi tiết đơn hàng: Hiển thị thông tin: tên sản phẩm, số lượng kho số lượng sản phẩm đặt hàng, mã giảm giá(nếu có), phí ship, giá tổng tiền Hình 4.40: Giao diện trang quản lý chi tiết đơn hàng 4.2.11 Giao diện trang thống kê Trang web giúp người quản lý xem biểu đồ thống kê bán hàng gồm số lượng đơn hàng, doanh thu bán hàng, lợi nhuận số lượng sản phẩm bán Hình 4.41: Giao diện trang thống kê 90 CHƯƠNG KẾT LUẬN 5.1 ĐÁNH GIÁ KẾT QUẢ 5.1.1 Kết đạt - Thiết kế giao diện dễ nhìn - Hệ thống đăng ký, đăng nhập - Phân loại sản phẩm theo danh mục, thương hiệu - Hiển thị thông tin theo lọai sản phẩm, thương hiệu tin tức - Cung cấp hình thức tìm kiếm theo tên sản phẩm - Thiết kế giỏ hàng giúp khách hàng chọn mua hàng dễ dàng cập nhật giỏ hàng - Người quản trị có chức quản lý, thêm, xóa, sửa sản phẩm, danh mục, nhà cung cấp, tin tức, mã khuyến mãi, slider …Quản lý đơn hàng - Thống kê bán hàng 5.1.2 Hạn chế đề tài - Chưa áp dụng dịch vụ mạng xã hôi - Chưa thực đánh giá nhận xét sản phẩm - Chưa áp dụng hình thức tốn trực tuyến 5.2 HƯỚNG PHÁT TRIỂN - Tiếp tục phát triển dịch vụ toán đa dạng - Tiếp tục nghiên cứu tích hợp dịch vụ mạng xã hội - Tiếp tục nghiên cứu học thêm kiến thức để xây dựng hồn thiện chương trình đáp ứng nhu cầu người sử dụng 91 DANH MỤC TÀI LIỆU THAM KHẢO Tiếng việt [1] Code24h, “Cấu trúc project Laravel mơ hình MVC” [Trực tuyến] Địa chỉ: https://code24h.com/cau-truc-project-laravel-5-x-va-mo-hinh-mvcd26627.html [Truy cập 27/10/2021] [2] F8 Official, “HTML, CSS từ Zero Tới Hero” [Trực tuyến] Địa chỉ: https://fullstack.edu.vn/courses/html-css [Truy cập 10/11/2021] [3] F8 Official, “Lập trình Javascript Nâng Cao” [Trực tuyến] Địa chỉ: https://fullstack.edu.vn/courses/javascript-nang-cao [Truy cập13/11/2021] [4] Hybrid, “Mô hình MVC PHP” [Trực tuyến] Địa chỉ: https://jobs.hybrid-technologies.vn/blog/mo-hinh-mvc-trong-php/ [Truy cập 25/11/2021] [5] Khang Trương, “11 thư viện vẽ biểu đồ tốt nhất” [Trực tuyến] Địa chỉ: https://khangtruong.wordpress.com/2015/07/25/11-thu-vien-ho-tro-ve-bieudo-tot-nhat-trong-jquery/ [Truy cập 02/11/2021] [6] Lập trình viên TV “Learn Laravel in one video” [Trực tuyến] Địa chỉ: https://www.youtube.com/watch?v=FJDQBkS1Fqw [Truy cập 05/11/2021] [7] Matbao, “Laravel gì, lợi ích, hướng dẫn cài đặt” [Trực tuyến] Địa chỉ: https://wiki.matbao.net/laravel-la-gi-huong-dan-cai-dat-laravel-nhanh-chong/ [Truy cập 15/10/2021] [8] Melink, “Tìm hiểu mơ hình kinh doanh điện tử” [Trực tuyến] Địa chỉ: https://melink.vn/cac-ve-mo-hinh-kinh-doanh-thuong-mai-dientu.html#:~:text=B2B%20(Business%20to%20Business)%3A,s%E1%BB%91/ [Truy cập 20/11/2021] [9] MonaMedia, “Tổng quan vễ Xampp, hướng dẫn cài đặt” [Trực tuyến] Địa chỉ: https://monamedia.co/phan-mem-xampp-la-gi-huong-dan-cai-dat-xampp/ [Truy cập 25/10/2021] [10] Viblo, “Jquery Ajax kiến thức bản” [Trực tuyến] Địa chỉ: https://viblo.asia/p/jquery-ajax-va-kien-thuc-co-ban-4dbZNxny5YM.[Truy cập 27/10/2021] [11] Viblo, “Phân tích thiết kế hệ thống thông tin UML” [Trực tuyến] Địa chỉ: https://viblo.asia/p/phan-tich-thiet-ke-he-thong-thong-tin-su-dungbieu-douml-phan-1-PjxMe6yNG4YL [Truy cập 11/11/2021] Tiếng anh [13] Laravel [Trực tuyến] Địa chỉ: https://laravel.com/docs/5.8 [Truy cập 02/11/2021] [14] StackOverflow [Trực tuyến] Địa chỉ: https://stackoverflow.com/ [Truy cập 02/12/2021] 92 GIẤY XÁC NHẬN HOÀN THÀNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Nguyễn Minh Lực Lớp: K11TT Mã sinh viên: 17152480201004 Xác nhận sinh viên: Nguyễn Minh Lực chỉnh sửa báo cáo đồ án tốt nghiệp theo ý kiến Giảng viên hướng dẫn Hội đồng đánh giá Tên báo cáo đồ án tốt nghiệp: Xây dựng website bán hàng điện máy Trưởng khoa Kon Tum, ngày 08 tháng 04 năm 2022 Người hướng dẫn