Xây dựng website shop thời trang

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM OUTHONTHAM MESA XAYMONGKHOUN VILOUTH ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE SHOP THỜI TRANG 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 SHOP THỜI TRANG GIẢNG VIÊN HƯỚNG DẪN : ThS LÊ THỊ BẢO YẾN SINH VIÊN THỰC HIỆN : OUTHONTHAM MESA : XAYMONGKHOUN VILOUTH LỚP : K11TT MSSV : 17152480201015 : 17152480201017 Kon Tum, tháng 04 năm 2022 LỜI CÁM ƠN Trả qua thời gian học tập rèn luyện mái trường Phân Hiệu Đại Học Đà Nắng kon Tum, thân em bạn tiếp thu nhiều kiến thức thầy cô phân hiệu đặc biệt thầy cô thuộc khoa Kỹ Thuật Nông Nghiệp Các em xin gửi lời cảm ơn đến thầy cô Các em xin chân thành cảm ơn cô Lê Thị Bảo yến tận tình hướng dẫn, giúp đỡ nhóm em hồn thành đồ án tốt nghiệp Các em xin gửi lời cảm ơn đến thầy Đồng Ngọc Nguyên Thịnh, người đưa ý kiến, đóng góp để giúp em hồn thiện đồ án cách chỉnh chu Cuối cùng, Các em chúc tất thầy cô công tác tốt dồi sức khỏe để cống hiến cho hệ sinh viên Chúng em xin chân thành cảm ơn! OUTHONTHAM Mesa XAYMONGKHOUN Vilouth MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1 TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU 1.2 LÝ DO CHỌN ĐỀ TÀI 1.3 MỤC TIÊU NGHIÊN CỨU 1.3.1 Lý thuyết 1.3.2 Công nghệ 1.3.3 Ứng dụng 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Khảo sát thực tế .2 1.4.2 Lý thuyết 1.4.3 Công nghệ 1.5 PHẠM VI ỨNG DỤNG CHƯƠNG CƠ SỞ LÝ THUYẾT .4 2.1 GIẢI PHÁP THIẾT KẾ 2.1.1 Mơ hình Client – Server 2.1.2 Mơ hình MVC 2.1.3 Mơ hình thương mại điện tử 2.1.4 Authentication .10 2.1.5 Authorization 12 2.2 CÔNG NGHỆ SỬ DỤNG 12 2.2.2 PHP 13 2.2.3 MySQL 13 2.2.4 Xampp 14 2.2.5 Visual Studio Code 15 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.1 ĐẶC TẢ YÊU CẦU 17 3.1.1 Yêu cầu chức 17 3.1.2 Yêu cầu phi chức 19 3.2 PHÂN TÍCH CHỨC NĂNG 19 3.2.1 Phân tích chức Admin 19 3.2.2 Phân tích chức khách hàng 27 3.2.3 Phân tích chức nhân viên .30 3.3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 31 3.3.1 Sơ đồ usecase 31 3.3.2 Đặc tả sơ đồ usecase 32 3.3.3 Sơ đồ 47 3.3.4 Sơ đồ lớp .66 3.3.5 Lược đồ sở liệu 69 CHƯƠNG DEMO KẾT QUẢ 72 i 4.1 FRONTEND 72 4.1.1 Giao diện trang chủ .72 4.1.2 Giao diện trang bán chạy .73 4.1.3 Giao diện trang kết tìm kiếm 74 4.1.4 Giao diện trang xem sản phẩm 74 4.1.5 Giao diện trang tra cứu đơn hàng .75 4.1.6 Giao diện trang thông tin đơn hàng 75 4.1.7 Giao diện trang giỏ hàng 75 4.1.8 Giao diện trang đặt hàng thành công 76 4.1.9 Giao diện trang đăng nhập 77 4.1.10 Giao diện trang đăng ký .77 4.1.11 Giao diện trang thông tin tài khoản 77 4.1.12 Giao diện trang chỉnh sửa tài khoản 78 4.1.13 Giao diện trang đơn hàng đặt .78 4.1.14 Giao diện trang đơn hàng đảm nhiệm 79 4.2 BACKEND 81 4.2.1 Quản lý tài khoản 81 4.2.2 Quản lý danh mục sản phẩm .83 4.2.3 Quản lý thương hiệu sản phẩm 84 4.2.4 Quản lý sản phẩm 86 4.2.5 Quản lý đơn hàng 87 4.2.6 Quản lý voucher 89 4.2.7 Thống kê 91 CHƯƠNG KẾT LUẬN 92 5.1 KẾT LUẬN 92 5.1.1 Kết đạt 92 5.1.2 Hạn chế 92 5.2 HƯỚNG PHÁT TRIỂN .93 DANH MỤC TÀI LIỆU THAM KHẢO 94 GIẤY XÁC NHẬN ĐÃ HOÀN THÀNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ii DANH MỤC CÁC TỪ VIẾT TẮT CSDL TMDT : Cơ sở liệu : Thương mại điện tử iii DANH MỤC CÁC BẢNG Số hiệu bảng 2.1 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 Tên bảng Các công nghệ sử dụng Mô tả chức hệ thống Yêu cầu phi chức Mô tả tác nhân usecase Đặc tả sơ đồ usecase đăng nhập Đặc tả sơ đồ usecase đăng ký tài khoản Đặc tả sơ đồ usecase thêm tài khoản Đặc tả sơ đồ usecase chỉnh sửa tài khoản Đặc tả sơ đồ usecase xóa tài khoản Đặc tả sơ đồ usecase thêm danh mục sản phẩm Đặc tả sơ đồ usecase chỉnh sửa danh mục sản phẩm Đặc tả sơ đồ usecase xóa danh mục sản phẩm Đặc tả sơ đồ usecase thêm thương hiệu sản phẩm Đặc tả sơ đồ usecase chỉnh sửa thương hiệu sản phẩm Đặc tả sơ đồ usecase xóa thương hiệu sản phẩm Đặc tả sơ đồ usecase thêm sản phẩm Đặc tả sơ đồ usecase chỉnh sửa sản phẩm Đặc tả sơ đồ usecase xóa sản phẩm Đặc tả sơ đồ usecase thêm voucher Đặc tả sơ đồ usecase chỉnh sửa voucher Đặc tả sơ đồ usecase xóa voucher Đặc tả sơ đồ usecase xác nhận đơn hàng Đặc tả sơ đồ usecase xóa đơn hàng Đặc tả sơ đồ usecase hủy đơn hàng Đặc tả sơ đồ usecase thêm sản phẩm vào giỏ hàng Đặc tả sơ đồ usecase xóa sản phẩm khỏi giỏ hàng Đặc tả sơ đồ usecase đặt hàng Giải thích sơ đồ lớp Giải thích lược đồ sở liệu iv Trang 12 17 19 31 32 33 34 34 35 35 36 37 37 38 39 39 40 41 41 42 42 43 44 44 45 46 46 66 69 DANH MỤC CÁC HÌNH Số hiệu hình 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 Tên hình Mô Client – Server Nguyên tắc hoạt động mô Client – Server Mô MVC Luồng xử lý MVC Mô kinh doanh thương mại điện tử Mô B2B Xác thực khóa Authorization Authentication PHP Hệ quản trị sở liệu MySQL Công cụ Xampp Phần mềm Visual Studio Code Logo Bootstrap Sơ đồ usecase tổng quát Sơ đồ usecase đăng nhập Sơ đồ usecase đăng ký tài khoản Sơ đồ usecase quản lý tài khoản Sơ đồ usecase thêm tài khoản Sơ đồ usecase chỉnh sửa tài khoản Sơ đồ usecase xóa tài khoản Sơ đồ usecase Sơ đồ usecase thêm danh mục sản phẩm Sơ đồ usecase chỉnh sửa danh mục sản phẩm Sơ đồ usecase xóa danh mục sản phẩm Sơ đồ usecase quản lý thương hiệu Sơ đồ usecase thêm thương hiệu sản phẩm Sơ đồ usecase chỉnh sửa thương hiệu sản phẩm Sơ đồ usecase xóa thương hiệu sản phẩm Sơ đồ usecase quản lý sản phẩm Sơ đồ usecase thêm sản phẩm Sơ đồ usecase chỉnh sửa sản phẩm Sơ đồ usecase xóa sản phẩm Sơ đồ usecase quản lý voucher Sơ đồ usecase thêm voucher Sơ đồ usecase chỉnh sửa voucher Sơ đồ usecase xóa voucher Sơ đồ usecase quản lý đơn hàng v Trang 7 11 12 13 13 14 15 16 32 33 33 33 34 35 35 35 36 37 37 37 38 39 39 39 40 40 41 41 42 42 43 43 3.25 3.26 3.27 3.28 3.29 3.30 3.31 3.32 3.33 3.34 3.35 3.36 3.37 3.38 3.39 3.40 3.41 3.42 3.43 3.44 3.45 3.46 3.47 3.48 3.49 3.50 3.51 3.52 3.53 3.54 3.55 3.56 4.1 4.2 4.3 4.4 4.5 4.6 4.7 Sơ đồ usecase xác nhận đơn hàng Sơ đồ usecase xóa đơn hàng Sơ đồ usecase hủy đơn hàng Sơ đồ usecase quản lý giỏ hàng Sơ đồ usecase thêm sản phẩm vào giỏ hàng Sơ đồ usecase xóa sản phẩm khỏi giỏ hàng Sơ đồ usecase đặt hàng Sơ đồ đăng nhập Sơ đồ tạo tài khoản Sơ đồ chỉnh sửa tài khoản Sơ đồ xóa tài khoản Sơ đồ tạo danh mục sản phẩm Sơ đồ chỉnh sửa danh mục sản phẩm Sơ đồ xóa danh mục sản phẩm Sơ đồ thêm thương hiệu Sơ đồ chỉnh sửa thương hiệu Sơ đồ xóa thương hiệu Sơ đồ tạo sản phẩm Sơ đồ chỉnh sửa sản phẩm Sơ đồ xóa sản phẩm Sơ đồ tạo voucher Sơ đồ chỉnh sửa voucher Sơ đồ xóa voucher Sơ đồ đăng ký Sơ đồ tìm kiếm sản phẩm Sơ đồ xem chi tiết sản phẩm Sơ đồ thêm sản phẩm vào giỏ hàng Sơ đồ đặt hàng Sơ đồ xem đơn hàng Sơ đồ xác nhận đơn hàng Sơ đồ lớp Lược đồ sở liệu Giao diện trang chủ máy tính Giao diện trang chủ điện thoại Giao diện trang bán chạy Giao diện trang kết tìm kiếm Giao diện trang xem sản phẩm Giao diện trang tra cứu đơn hàng Giao diện trang thông tin đơn hàng vi 44 44 45 45 46 46 47 47 48 49 50 51 52 53 54 55 56 56 57 58 59 60 61 61 62 62 63 64 65 65 66 69 72 73 73 74 74 75 75 Hình 4.21: Email thơng báo đơn hàng giao thành công 4.2 BACKEND 4.2.1 Quản lý tài khoản - Danh sách tài khoản: Trang danh sách tài khoản hiển thị email, loại tài khoản, tên, số điện thoại, địa nút chức tương ứng với tài khoản Hình 4.22: Giao diện danh sách tài khoản 81 - Thêm tài khoản: Hiển thị form thêm tài khoản mới, bao gồm email, loại tài khoản (Admin, Nhân viên giao hàng, khách hàng), tên, số điện thoại, địa chỉ, mật nhập lại mật Hình 4.23: Giao diện thêm tài khoản - Chỉnh sửa tài khoản: Hiển thị form chỉnh sửa tài khoản, bao gồm tên, số điện thoại, địa chỉ, đổi mật nhập lại mật Hình 4.24: Giao diện chỉnh sửa tài khoản 82 4.2.2 Quản lý danh mục sản phẩm - Danh sách danh mục sản phẩm: Quản lý loại danh mục sản phẩm, bao gồm thông tin tên danh mục, số lượng sản phẩm danh mục, mô tả sản phẩm nút chức tương ứng với danh mục Hình 4.25: Giao diện danh sách danh mục sản phẩm - Thêm danh mục sản phẩm: Hiển thị form thêm danh mục bao gồm tên danh mục mơ tả Hình 4.26: Giao diện chỉnh sửa danh mục sản phẩm 83 - Chỉnh sửa danh mục sản phẩm: Hiển thị form chỉnh sửa danh mục, bao gồm tên danh mục mơ tả Hình 4.27: Giao diện chỉnh sửa danh mục sản phẩm 4.2.3 Quản lý thương hiệu sản phẩm - Danh sách thương hiệu sản phẩm: Quản lý thương hiệu hệ thống website, bao gồm tên thương hiệu, ảnh logo, số lượng sản phẩm thương hiệu, mô tả thương hiệu nút chức tương ứng với thương hiệu sản phẩm Hình 4.28: Giao diện danh sách thương hiệu sản phẩm 84 - Thêm thương hiệu sản phẩm: Hiển thị form thêm thương hiệu bao gồm tên thương hiệu mơ tả Hình 4.29: Giao diện chỉnh sửa thương hiệu sản phẩm - Chỉnh sửa thương hiệu sản phẩm: Hiển thị form chỉnh sửa thương hiệu bao gồm tên thương hiệu mơ tả Hình 4.30: Giao diện chỉnh sửa thương hiệu sản phẩm 85 4.2.4 Quản lý sản phẩm - Danh sách sản phẩm: Quản lý sản phẩm website, bao gồm tên sản phẩm, ảnh sản phẩm, số lượng kho, bán, giá, ngày nhập, mô tả nút chức Hình 4.31: Giao diện danh sách sản phẩm - Thêm sản phẩm: Hiển thị form thêm sản phẩm bao gồm chọn danh mục, chọn thương hiệu, tên sản phẩm, thêm ảnh, bán, giá, giá gốc mơ tả Hình 4.32: Giao diện chỉnh sửa sản phẩm 86 - Chỉnh sửa sản phẩm: Hiển thị form chỉnh sửa sản phẩm bao gồm chọn danh mục, chọn thương hiệu, tên sản phẩm, thêm ảnh, bán, giá, giá gốc mơ tả Hình 4.33: Giao diện chỉnh sửa sản phẩm 4.2.5 Quản lý đơn hàng - Danh sách đơn hàng: Quản lý tất đơn hàng khách hàng Hình 4.34: Giao diện danh sách đơn hàng 87 - Xác nhận đặt hàng giao cho nhân viên đảm nhiệm hàng: Khi chờ xác nhận, admin nhấn nút xác nhận đơn hàng chọn nhân viên để đảm nhận đơn hàng Hình 4.35: Giao diện giao cho nhân viên đảm nhiệm đơn hàng Hình 4.36: Email thơng báo đơn hàng đảm nhiệm cho nhân viên 88 Hình 4.37: Email thơng báo đơn hàng xác nhận 4.2.6 Quản lý voucher - Danh sách voucher: Hiển thị voucher giảm giá hệ thống website Mỗi voucher có thơng tin bao gồm mã code, tên voucher, mức giảm giá, số lượng, ngày hiệu lực ngày hết hạn Hình 4.38: Giao diện danh sách voucher 89 - Thêm voucher: Hiển thị form thêm voucher bao gồm mã code, tên voucher, mức giảm giá, số lượng, ngày hiệu lực ngày hết hạn Hình 4.39: Giao diện chỉnh sửa voucher - Chỉnh sửa voucher: Hiển thị form chỉnh sửa voucher bao gồm mã code, tên voucher, mức giảm giá, số lượng, ngày hiệu lực ngày hết hạn Hình 4.40: Giao diện chỉnh sửa voucher 90 4.2.7 Thống kê Tại trang thống kê hiển thị thông tin: - Doanh thu tháng sản phẩm bán - Hai biểu đồ cột thể doanh thu tháng số lượng sản phẩm bán tháng (trong vịng tháng) - Bảng phía thể hiển doanh thu tháng số lượng sản phẩm bán dạng bảng Hình 4.41: Giao diện trang xem thống kê 91 CHƯƠNG KẾT LUẬN 5.1 KẾT LUẬN 5.1.1 Kết đạt a Lý thuyết - Nắm mơ hình MVC vào việc xây dựng web; - Nắm mơ hình thương mại điện tử phổ biến b Công nghệ - Sử dụng thành thạo ngôn ngữ PHP; - Sử dụng thành thạo công nghệ HTML, CSS, JavaScript Bootstrap; - Kết nối quản trị sở liệu MySQL c Ứng dụng Xây dựng website với chức quan trọng website bán hàng sau: - Khách hàng:  Xem danh sách sản phẩm;  Xem chi tiết sản phẩm;  Thêm sản phẩm vào giỏ hàng;  Đặt mua sản phẩm;  Nhận email thông báo đơn hàng;  Đăng ký tài khoản;  Quản lý thông tin cá nhân - Admin:  Quản lý sản phẩm;  Quản lý đơn hàng;  Thống kê (doanh thu tháng số lượng mua tháng);  Quản lý danh mục sản phẩm;  Quản lý thương hiệu sản phẩm;  Quản lý voucher;  Quản lý tài khoản người dùng; - Nhân viên giao hàng:  Quản lý đơn hàng khách hàng (xem đơn hàng, xác nhận đơn hàng);  Quản lý thông tin cá nhân 5.1.2 Hạn chế Giao diện nhiều hạn chế hình ảnh, màu sắc, hiệu ứng 92 5.2 HƯỚNG PHÁT TRIỂN Website hoàn thành chức trang web thương mại điện tử tương lai em tích hợp nhiều loại hình dịch vụ cơng nghệ để giúp cho trải nghiệm khách hàng tốt như: - Nâng cấp giao diện website đẹp - Thêm loại hình dịch vụ khác cho cửa hàng - Tích hợp gợi ý sản phẩm cho khách hàng các loại kiểu dáng theo nhu cầu - Tích hợp nhiều hình thức tốn online trình đăng ký dịch vụ đơn giản 93 DANH MỤC TÀI LIỆU THAM KHẢO [1] [2] [3] [4] [5] [6] [7] [8] [9] BKNS, “Client server gì? Ưu nhược điểm mơ hình Client server” [Trực tuyến] Địa chỉ: https://www.bkns.vn/client-server-la-gi.html [Truy cập 20/11/2021] Chiến Lục, “Nhận xét Phân Biệt “authentication” Và “ Authorization Là Gì” [Trực tuyến] Địa chỉ: https://chienluc.vn/nhan-xet-phan-biet-authentication-vaauthorization-la-gi [Truy cập 30/11/2021] HocLapTrinh, “Bootstrap gì?” [Trực tuyến] Địa chỉ: https://hoclaptrinh.vn /posts/bootstrap-la-gi [Truy cập 01/12/2021] MatBao, “XAMPP gì? Cách cài đặt sử dụng XAMPP Windows Linux” [Trực tuyến] Địa chỉ: https://wiki.matbao.net/xampp-la-gi-cach-caidat-va-su-dung-xampp-tren-windows-va-linux/ [Truy cập 25/12/2021] MauWebsite, “MySQL gì? Tổng hợp kiến thức cần biết MySQL” [Trực tuyến] Địa chỉ: https://mauwebsite.vn/mysql-la-gi/ [Truy cập 03/12/2021] Melink, “Tìm hiểu mơ hình kinh doanh thương mại điện tử” [Trực tuyến] Địa chỉ: https://melink.vn/cac-ve-mo-hinh-kinh-doanh-thuong-mai-dien-tu html [Truy cập 26/11/2021] MonaMedia, “PHP gì? Tất tần tật kiến thức cần biết ngôn ngữ PHP” [Trực tuyến] Địa chỉ: https://mona.media/php-la-gi/ [Truy cập 10/11/2021] Solution IAS, “Authentication gì? Tìm hiểu tổng quan” [Trực tuyến] Địa chỉ: https://thuannhat.com.vn/authentication-la-gi-tim-hieu-tong-quan/ [Truy cập 04/12/2021] Vietnix, “Tìm hiểu mơ hình MVC gì? Ví dụ cách sử dụng mơ hình MVC” [Trực tuyến] Địa chỉ: https://vietnix.vn/tim-hieu-mo-hinh-mvc-la-gi/ [Truy cập 16/11/2021] 94 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 1: OUTHONTHAM Mesa MSSV: 17152480201015 Họ tên sinh viên 2: XAYMONGKHOUN Vilouth MSSV: 17172480201017 Lớp: K11TT Xác nhận sinh viên OUTHONTHAM Mesa XAYMONGKHOUN Vilouth chỉnh sửa báo cáo 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 thực tập tốt nghiệp: Xây dựng website shop thời trang Trưởng khoa Kon Tum, ngày tháng năm 2022 Người hướng dẫn ... Giao diện trang chủ máy tính Giao diện trang chủ điện thoại Giao diện trang bán chạy Giao diện trang kết tìm kiếm Giao diện trang xem sản phẩm Giao diện trang tra cứu đơn hàng Giao diện trang thông... thiết bị máy tính, điện thoại có kết nối internet để truy cập vào website Với lý nêu trên, đề tài ? ?Xây dựng website shop thời trang? ?? thực nhằm giúp người mua hàng mà khơng cần đến cửa hàng tham... có nhiếu chức khác xây dựng website 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Khảo sát thực tế - Tìm hiểu website bán hàng mạng Internet; - Khảo sát mong muốn sử dụng website thời trang địa bàn Kon Tum