Xây dựng website bán hàng thời trang

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐẶNG BẢO LINH CAO THỊ HỒNG HẠNH ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN HÀNG 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: ĐẶNG BẢO LINH LỚP: K11TT MSSV: 17152480201007 CÁN BỘ HƯỚNG DẪN: ĐÀO THÌ HỒNG ÁNH Kon Tum, tháng 03 năm 2022 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐẶNG BẢO LINH CAO THỊ HỒNG HẠNH ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG GIẢNG VIÊN HƯỚNG DẪN : TS ĐỒNG NGỌC NGUYÊN THỊNH SINH VIÊN THỰC HIỆN : ĐẶNG BẢO LINH CAO THỊ HỒNG HẠNH LỚP : K11TT MSSV : 17152480201007 17152480201021 Kon Tum, tháng 03 năm 2022 LỜI CẢM ƠN Qua thời gian tìm hiểu thực đến đề tài “Xây dựng website bán hàng thời trang” hoàn thành Trong suốt trình thực đề tài, em nhận nhiều giúp đỡ nhiệt tình thầy cô bạn Lời chúng em xin bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Phân hiệu Đại học Đà Nẵng Kon Tum quý thầy cô khoa Công Nghệ mơn tận tình giảng dạy, trang bị kiến thức quan trọng suốt trình học tập trường Đặc biệt, chúng em gửi lời cảm ơn đến Thầy Đồng Ngọc Nguyên Thịnh tận tình giúp đỡ, hướng dẫn chúng em suốt trình thực đồ án tốt nghiệp Với bảo thầy, chúng em có định hướng tốt việc triển khai thực yêu cầu q trình làm đồ án tốt nghiệp Tuy nhiên, cịn có nhiều hạn chế, chúng em khơng thể phát huy ý tưởng, khả hỗ trợ ngôn ngữ kỹ thuật lập trình vào đề tài Trong trình thực đồ án, tránh khỏi sai sót, mong nhận giúp đỡ thơng cảm quý thầy cô Chúng em xin chân thành cảm ơn! Sinh viên Đặng Bảo Linh Cao Thị Hồng Hạnh 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 ĐÍCH NGHIÊN CỨU 1.4 PHƯƠNG PHÁP NGHIÊN CỨU 1.4.1 Lý thuyết 1.4.2 Khảo sát thực tế .2 1.4.3 Nghiên cứu thực nghiệm 1.5 PHẠM VI NGHIÊN CỨU .2 CHƯƠNG CƠ SỞ LÝ THUYẾT .3 2.1 NGƠN NGỮ LẬP TRÌNH .3 2.1.1 Laravel .3 2.1.2 PHP 2.1.3 HTML .7 2.1.4 CSS 2.1.5 Javascrpit 2.2 CÔNG NGHỆ SỬ DỤNG 2.2.1 Xampp 2.2.2 Visual Studio Code 2.3 THƯ VIỆN HỖ TRỢ .8 2.3.1 Bootstrap 2.3.2 Font awesome 2.4 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU 2.5 MƠ HÌNH THƯƠNG MẠI ĐIỆN TỬ B2B, B2C .10 2.5.1 Mơ hình B2B 10 2.5.2 Mơ hình B2C 10 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .11 3.1 CHỨC NĂNG CỦA CHƯƠNG TRÌNH 11 3.1.1 Đối với khách hàng 11 3.2.2 Đối với thành viên 12 3.1.3 Đối với người quản trị 13 3.2 YÊU CẦU VỀ HỆ THỐNG 16 3.2.1 Yêu cầu tính sử dụng 16 3.2.2 Yêu cầu bảo mật .16 3.2.3 Yêu cầu lưu 16 3.2.4 Yêu cầu khả dụng 16 3.2.5 Các yêu cầu ràng buộc thiết kế .16 3.3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 17 3.3.1 Biểu đồ Usecase tổng quát 17 i 3.3.2 Sơ đồ 31 3.3.2 Sơ đồ lớp .52 3.3.3 Lược đồ quan hệ sở liệu .53 CHƯƠNG KẾT QUẢ 60 4.1 GIAO DIỆN TRANG KHÁCH HÀNG 60 4.1.1 Giao diện trang chủ .60 4.1.2 Giao diện giới thiệu sản phẩm .61 4.1.3 Giao diện footer .62 4.1.4 Giao diện trang đăng ký .63 4.1.5 Giao diện trang đăng nhập 64 4.1.6 Giao diện trang tìm kiếm 65 4.1.7 Giao diện trang xem chi tiết sản phẩm .66 4.1.8 Giao diện trang giỏ hàng 67 4.1.9 Giao diện trang toán 68 4.1.10 Giao diện trang tin tức 69 4.1.11 Giao diện chọn sản phẩm theo thương hiệu .70 4.1.12 Giao diện trang xem lịch sử mua hàng .71 4.1.13 Giao diện đơn đặt hàng gửi tới email khách hàng 71 4.1.14 Giao diện toán VNPay 72 4.1.15 Giao diện lấy lại mật 74 4.2 GIAO DIỆN TRANG ADMIN 76 4.2.1 Giao diện trang đăng nhập 76 4.2.2 Giao diện trang chủ .77 4.2.3 Giao diện trang quản lý danh mục sản phẩm 78 4.2.4 Giao diện quản lý thương hiệu sản phẩm 80 4.2.5 Giao diện quản lý sản phẩm 82 4.2.6 Giao diện quản lý viết .84 4.2.7 Giao diện quản lý mã giảm giá 87 4.2.8 Giao diện quản lý phí vận chuyển .89 4.2.9 Giao diện quản lý đơn hàng 89 4.2.10 Giao diện in hóa đơn 90 4.2.11 Giao diện thống kê doanh thu 91 CHƯƠNG KẾT LUẬN 92 5.1 ĐÁNH GIÁ KẾT QUẢ 92 5.1.1 Chức làm 92 5.1.2 Hạn chế đề tài 92 5.2 HƯỚNG PHÁT TRIỂN .92 DANH MỤC TÀI LIỆU THAM KHẢO 93 ii DANH MỤC VIẾT TẮT B2B : Business to Business (doanh nghiệp với doanh nghiệp) B2C : Business to Consumer (doanh nghiệp với khách hàng) CSS : Cascading Style Sheets CSDL : Cơ sở liệu CTRL : Controller HTML : Hypertext Markup Language MVC : Model – View - Controller PHP : Hypertext Preprocessor iii DANH MỤC BẢNG Số hiệu bảng Tên bảng Trang 2.1 Cấu trúc thư mục Laravel 3.1 Các tác nhân sơ đồ usecase tổng quát 17 3.2 Đặc tả sơ đồ usecase Đăng ký 18 3.3 Đặc tả sơ đồ usecase Đăng nhập 19 3.4 Đặc tả sơ đồ usecase Tìm kiếm 20 3.5 Đặc tả sơ đồ usecase Xem chi tiết sản phẩm 20 3.6 Đặc tả sơ đồ usecase Thêm sản phẩm vào giỏ hàng 21 3.7 Đặc tả sơ đồ usecase Thanh toán 21 3.8 Đặc tả sơ đồ usecase Đăng nhập admin 22 3.9 Đặc tả sơ đồ usecase Xem đơn hàng 23 3.10 Đặc tả sơ đồ usecase Xóa đơn hàng 23 3.11 Đặc tả sơ đồ usecase Thêm sản phẩm 24 3.12 Đặc tả sơ đồ usecase Sửa sản phẩm 24 3.13 Đặc tả sơ đồ usecase Xóa sản phẩm 25 3.14 Đặc tả sơ đồ usecase Thêm danh mục sản phẩm 26 3.15 Đặc tả sơ đồ usecase Sửa danh mục sản phẩm 26 3.16 Đặc tả sơ đồ usecase Xóa danh mục sản phẩm 27 3.17 Đặc tả sơ đồ usecase Thêm phí vận chuyển 27 3.18 Đặc tả sơ đồ usecase Sửa phí vận chuyển 28 3.19 Đặc tả sơ đồ usecase Thêm mã giảm giá 28 3.20 Đặc tả sơ đồ usecase Xóa mã giảm giá 29 3.21 Đặc tả sơ đồ usecase Thống kê doanh thu 30 3.22 Danh sách lớp 52 3.23 Dữ liệu admin 53 3.24 Dữ liệu danh mục sản phẩm 54 3.25 Dữ liệu thương hiệu sản phẩm 54 3.26 Dữ liệu mã giảm giá 54 3.27 Dữ liệu khách hàng 55 3.28 Dữ liệu phí vận chuyển 55 3.29 Dữ liệu đơn hàng 55 3.30 Dữ liệu chi tiết đơn hàng 56 iv 3.31 Dữ liệu sản phẩm 56 3.32 Dữ liệu quận – huyện 57 3.33 Dữ liệu tỉnh – thành phố 57 3.34 Dữ liệu xã – phường 57 3.35 Dữ liệu thông tin vận chuyển 57 3.36 Dữ liệu slide 58 3.37 Dữ liệu thống kê doanh thu 58 v DANH MỤC HÌNH Số hiệu hình Tên Trang 2.1 Mơ hình MVC 2.2 Luồng hoạt động Laravel 2.3 Cấu trúc thư mục Laravel 3.1 Sơ đồ Usecase Tổng quát 18 3.2 Sơ đồ Usecase Đăng ký 19 3.3 Sơ đồ Usecase Đăng nhập 19 3.4 Sơ đồ Usecase Tìm kiếm 20 3.5 Sơ đồ Usecase Xem chi tiết sản phẩm 20 3.6 Sơ đồ Usecase Thêm sản phẩm vào giỏ hàng 21 3.7 Sơ đồ Usecase Thanh toán 22 3.8 Sơ đồ Usecase Đăng nhập Admin 23 3.9 Sơ đồ Usecase Quản lý đơn hàng 24 3.10 Sơ đồ Usecase Quản lý sản phẩm 25 3.11 Sơ đồ Usecase Quản ly danh mục sản phẩm 27 3.12 Sơ đồ Usecase Quản lý phí vận chuyển 28 3.13 Sơ đồ Usecase Quản lý mã giảm giá 29 3.14 Sơ đồ Usecase Quản lý thông kê doanh thu 30 3.15 Sơ đồ Đăng ký 31 3.16 Sơ đồ Đăng nhập 32 3.17 Sơ đồ Đăng xuất 33 3.18 Sơ đồ Tìm kiếm sản phẩm 33 3.19 Sơ đồ Xem chi tiết sản phẩm 34 3.20 Sơ đồ Thêm sản phẩm vào giỏ hàng 35 3.21 Sơ đồ Thanh toán 36 3.22 Sơ đồ Quản lý đơn hàng 37 3.23 Sơ đồ Thêm sản phẩm 38 3.24 Sơ đồ Sửa sản phẩm 39 3.25 Sơ đồ Xóa sản phẩm 40 3.26 Sơ đồ Thêm danh mục 41 3.27 Sơ đồ Sửa danh mục 42 3.28 Sơ đồ Xóa danh mục 43 vi 3.29 Sơ đồ Thêm thương hiệu 44 3.30 Sơ đồ Sửa thương hiệu 45 3.31 Sơ đồ Xóa thương hiệu 46 3.32 Sơ đồ Quản lý phí vận chuyển 47 3.33 Sơ đồ Thêm mã giảm giá 48 3.34 Sơ đồ Thêm viết 49 3.35 Sơ đồ Sửa viết 50 3.36 Sơ đồ Xóa viết 51 3.37 Sơ đồ Thống kê doanh thu 51 3.38 Sơ đồ lớp 53 3.29 Lược đồ quan hệ sở liệu 59 4.1 Giao diện trang chủ website 60 4.2 Giao diện giới thiệu sản phẩm bật 61 4.3 Giao diện giới thiệu sản phẩm theo thương hiệu, tin tức 62 4.4 Giao diện footer website 62 4.5 Giao diện trang đăng ký 63 4.6 Giao diện trang đăng nhập 64 4.7 Giao diện trang tìm kiếm sản phẩm 65 4.8 Giao diện trang xem chi tiết sản phẩm 66 4.9 Giao diện trang giỏ hàng 67 4.10 Giao diện trang toán 68 4.11 Giao diện trang tin tức 69 4.12 Giao diện chọn sản phẩm theo thương hiệu 70 4.13 Giao diện lịch sử mua hàng 71 4.14 Giao diện đơn đặt hàng gửi tới email khách hàng 71 4.15 Giao diện cổng toán VNPAY 72 4.16 Giao diện toán qua ngân hàng 73 4.17 Giao diện nhập mã xác thực 73 4.18 Giao diện lấy lại mật 74 4.19 Giao diện lấy lại mật gửi mail 74 4.20 Giao diện nhập lại mật vừa thay đổi 75 4.21 Giao diện trang đăng nhập admin 76 4.22 Giao diện trang chủ trang quản lý 77 vii 4.2.4 Giao diện quản lý thương hiệu sản phẩm Hình 26: Giao diện thêm thương hiệu sản phẩm Giao diện giúp quản trị viên thêm Thương hiệu sản phẩm Bao gồm Tên thương hiệu, Slug Mô tả,… sau nhập xong thông tin, quản trị viên nhấn vào nút Thêm thương hiệu để lưu lại Hình 27: Giao diện quản lý thương hiệu sản phẩm Quản trị viên Sửa Xóa Thương hiệu sản phẩm cột chỉnh sửa để cập nhập lại thương hiệu 80 Hình 28: Giao diện sửa thương hiệu sản phẩm Giao diện sửa Thương hiệu, quản trị viên sửa lại chi tiết bị sai sót, sau điền lại thông tin, nhấn vào nút Cập nhập để cập nhập lại Thương hiệu sản phẩm 81 4.2.5 Giao diện quản lý sản phẩm Hình 29: Giao diện thêm sản phẩm 82 Quản trị viên thêm sản phẩm vào web bao gồm Tên sản phẩm, Slug, Giá, Số lượng, Hình ảnh Thơng tin mô tả Sau quản trị viên nhập xong thơng tin nhấn vào nút Thêm sản phẩm để lưu lại sản phẩm vừa nhập Hình 30: Giao diện quản lý sản phẩm Tại giao diện này, người quản quản trị viên quản lý tất sản phẩm có trang web Quản trị viên Sửa, Xóa sản phẩm - Nếu có sai sót sản phẩm, quản trị viên sửa sản phẩm cách nhấn vào Sửa cột Chỉnh sửa để sửa lại chi tiết sản phẩm - Nếu sản phẩm hết, quản trị viên nhấn vào nút Xóa cột Chỉnh sửa để xóa sản phẩm 83 4.2.6 Giao diện quản lý viết Hình 31: Giao diện thêm viết Quản trị thêm viết, tin tức vào web Sau quản trị viên nhập xong thơng tin viết, tin tức nhấn vào nút Thêm viết để lưu lại 84 Hình 32: Giao diện quản lý viết Tại giao diện quản lý viết, quản trị viên Sửa, Xóa viết 85 Hình 33: Giao diện sửa viết Quản trị viên sửa lại thơng tin viết, sau nhấn vào Cập nhập viết để lưu lại viết 86 4.2.7 Giao diện quản lý mã giảm giá Hình 34: Giao diện thêm mã giảm giá Quản trị viên thêm mã giảm giá vào web Bao gồm Tên mã giảm giá, số lượng, thời gian,… Sau nhập xong, quản trị viên nhấn vào Thêm mã giảm giá để lưu lại Hình 35: Giao diện quản lý mã giảm giá Tại giao diện quản lý mã giảm giá, quản trị viên Sửa, Xóa tất mã giảm giá - Nếu có sai sót, quản trị viên sửa lại nhấn vào nút Sửa cột Chỉnh sửa để sửa lại chi tiết mã giảm giá - Nếu mã giảm giá hết hạn, không cần thiết, quản trị viên nhấn vào nút Xóa cột Chỉnh sửa để xóa mã - Quản trị viên gửi Mã giảm giá cho khách hàng cách nhấn nút Gửi mã giảm giá cho khách hàng 87 Hình 36: Giao diện mã giảm giá gửi tới mail khách hàng Mã giảm giá gửi email khách hàng thành viên cửa hàng Để khách hàng mua sắm sử dụng mã Hình 37: Giao diện sửa mã giảm giá 88 Quản trị viên sửa lại mã giảm giá, cập nhập lại thơng tin mã Sau nhấn vào nút Cập nhập mã giảm giá để lưu lại 4.2.8 Giao diện quản lý phí vận chuyển Hình 38: Giao diện quản lý phí vận chuyển Tại giao diện quản lý thêm phí vận chuyển khu vực, địa Khách hàng tự tính phí vận chuyển lúc đặt hàng 4.2.9 Giao diện quản lý đơn hàng Hình 39: Giao diện quản lý đơn hàng Giao diện quản lý đơn hàng giúp quản trị viên kiểm soát đơn hàng, biết thông tin chi tiết đơn đặt hàng khách hàng 89 Hình 40: Giao diện xem chi tiết đơn hàng Khi quản trị viên muốn xem thơng tin chi tiết cụ thể chọn vào đơn hàng phần giao diện quản lý đơn hàng Sau quản trị viên biết khách hàng muốn mua sản phẩm 4.2.10 Giao diện in hóa đơn Hình 41: Giao diện in hóa đơn file PDF Sau quản trị viên xác nhận đơn hàng in hóa đơn cho khách hàng 90 4.2.11 Giao diện thống kê doanh thu Hình 42: Giao diện thống kê doanh thu Quản trị viên xem thống kê doanh thu theo ngày biểu đồ Ở ngày số đơn hàng, số lượng tổng doanh số đạt ngày Hoặc quản trị viên chọn ngày để xem tổng doanh thu ngày 91 CHƯƠNG KẾT LUẬN 5.1 ĐÁNH GIÁ KẾT QUẢ 5.1.1 Chức làm Qua thời gian tìm hiểu cơng cụ, phân tích u cầu với nỗ lực thân, chúng em xây dựng hệ thống với số chức như: - Đăng ký, đăng nhập; - Tìm kiếm sản phẩm; - Xem thông tin chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng; - Quản lý giỏ hàng; - Gửi email phản hồi khách đặt mua sản phẩm; - Xem viết quần áo online; - Quản lý danh mục sản phẩm, sản phẩm, slide, viết,… - Quản lý hàng tồn kho, in đơn hàng file PDF, thống kê doanh thu 5.1.2 Hạn chế đề tài - Việc thu thập liệu, phân tích nghiệp vụ cịn nhiều hạn chế - Chưa thể cập nhập hết tất sản phẩm có mặt thị trường 5.2 HƯỚNG PHÁT TRIỂN Website bán quần áo hoàn thành chức trang web thương mại điện tử tương lai chúng 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ư: - Thêm loại hình dịch vụ khác cho khách hàng - Tích hợp gợi ý sản phẩm cho khách hàng loại kiểu dáng theo nhu cầu - Tích hợp nhiều hình thức tốn trình đăng ký dịch vụ đơn giản 92 DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Việt [1] “blog.dammaynho”, “Tổng quan ngành thương mại điện tử B2B B2C” [Trực tuyến] Địa chỉ: https://blog.dammaynho.com/marketing/b2b-va-b2c.html [Truy cập 20/11/2021] [2] Đoàn Văn Ban, Nguyễn Thị Tĩnh (2011), Phân tích thiết kế hướng đối tượng UML, NXB Đại học sư phạm, Hà Nội [3] Hieu Tran, “Lập trình website Laravel Framework” [Trực tuyến] Địa chỉ: Lập trình website Laravel Framework - YouTube [Truy cập 02/11/2021] [4] Nguyễn Quang Hải (2014), Nhập môn HTML CSS, NXB Giáo dục, Việt Nam [5] “vinasupport”, “Laravel gì? Tổng quan Laravel PHP Framework” [Trực tuyến] Địa chỉ: https://vinasupport.com/laravel-la-gi-tong-quan-ve-laravelphp-framework [Truy cập 18/10/2021] [6] “VietJack”, “Học MySQL nâng cao” [Trực tuyến] Địa chỉ: https://vietjack.com/mysql/ [Truy cập 20/11/2021] [7] “Wikipedia”, “PHP” [Trực tuyến] Địa chỉ: https://vi.wikipedia.org/wiki/PHP [Truy cập 20/11/2021] Tiếng Anh [8] “github”, “A PHP framework for web artisans” [Trực tuyến] Địa chỉ: https://github.com/laravel/laravel [Truy cập 19/11/2021] [9] Jennifer Niederst Robbins(2018), Learning Web Design A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, O’Reilly Media [10] “Sandbox”, “Cổng toán VNPAY” [Trực tuyến] Địa chỉ: https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/ [Truy cập: 08/02/2022] [11] “w3schools”, “Laravel Tutorial”, 20/10 [Trực tuyến] Địa chỉ: https://www.w3schools.in/laravel [Truy cập 20/11/2021] 93 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: ĐẶNG BẢO LINH MSSV: 17152480201007 Họ tên sinh viên 2: CAO THỊ HỒNG HẠNH MSSV: 17152480201021 Lớp: K11TT Xác nhận sinh viên Đặng Bảo Linh Cao Thị Hồng Hạnh 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 thời trang Kon tum, ngày 08 tháng 04 năm 2022 Trưởng khoa Người hướng dẫn ... bán ra, đồng thời biết thông tin khách hàng mua hóa đơn Đồng thời cập nhập thời gian lên đơn hàng, thời gian mua hàng, thời gian giao hàng, giá thành sản phẩm, số lượng, chi tiết đơn hàng - Đầu... tiêu dùng nên chọn đề tài ? ?Xây dựng website bán hàng thời trang? ?? để đáp ứng nhu cầu khách hàng 1.3 MỤC ĐÍCH NGHIÊN CỨU - Nhằm phục vụ nhu cầu mua sắm quần áo cho khách hàng Đảm bảo tính dễ sử dụng,... mua chen lấn có hàng sale Chỉ cần smartphone hay máy tính kết nối internet mua sản phẩm muốn Vậy việc ? ?Xây dựng website bán hàng thời trang? ?? đáp ứng nhu cầu người, giúp cho người bán người mua