Thiết kế website bán giày

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á KHOA CÔNG NGHỆ THÔNG TIN ====0O0==== ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN GIÀY Tên sinh viên: Lê Thanh Quyền Ngày sinh: 08/12/1998 Mã sinh viên: 1752480201048 Khóa: Khoa Công nghệ thông tin Lớp: DCCNTT8.10 Giảng viên hướng dẫn: Th.S.Đặng Trần Long Bắc Ninh, tháng năm 2022 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á KHOA CÔNG NGHỆ THÔNG TIN ====0O0==== LÊ THANH QUYỀN ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN GIÀY CÁN BỘ CHẤM CÁN BỘ CHẤM (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) Giáo viên hướng dẫn: Th.S.Đặng Trần Long Bắc Ninh, tháng 04 năm 2022 NHẬN XÉT CỦA GIÁO VIÊN MỤC LỤC MỤC LỤC DANH MỤC TỪ VIẾT TẮT: DANH MỤC HÌNH ẢNH LỜI NÓI ĐẦU MỞ ĐẦU Tên đề tài Lý thực đề tài Mục đích nghiên cứu CHƯƠNG 1: TỔNG QUAN VỀ WORDPRESS VÀ PLUGIN WOOCOMMERCE 10 1.1 Giới thiệu chung Wordpress 10 1.2 Cài đặt thiết lập bản: 13 1.2.1 Tìm hiểu trang Woocommerce: 19 1.3 Thêm sản phẩm đơn giản: 21 1.3.1 Nhập thông tin sản phẩm: 21 1.3.2 Thiết lập danh mục sản phẩm 25 1.3.3 Ảnh sản phẩm 25 1.3.4 Thư viện hình ảnh sản phẩm 26 1.3.5 Thử nghiệm chức giỏ hàng toán 28 1.4 Các thiết lập cài đặt thành phần Woocommerce: 29 1.4.1 Thiết lập thuế: 35 1.4.2 Thêm tỉnh thành Việt Nam tối ưu thông tin khách hàng 35 1.4.3 Tổng quan chức tính phí-giao nhận (vận chuyển) 36 1.4.4 Thiết lập toán 37 1.4.4.1 Thanh toán nhận hàng 37 1.4.4.2 Thanh toán qua VNPAY 37 1.4.5 Thanh toán qua Momo,Zalopay,ShoppeePay 39 1.4.6 Thiết lập Email thông báo: 40 1.4.7 Chuyển đổi ngôn ngữ 41 1.5 Sử dụng Widget Woocommerce: 42 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 44 2.1 Biểu đồ usecase 44 2.2 Biểu đồ trình tự 44 2.2.1 Đăng kí thành viên: 44 2.2.2 Đăng nhập 45 CHƯƠNG 3: DEMO CÁC CHỨC NĂNG CỦA WEBSITE 51 3.1 Xem danh mục sản phẩm 51 3.2 Tìm kiếm giày 51 3.3 Thanh toán qua VNPAY 52 3.4 Kiểm tra đơn hàng 55 3.5 Chuyển đổi ngôn ngữ 56 CHƯƠNG 4: KẾT LUẬN 57 4.1 Chức làm được 57 4.2 Hạn chế đề tài 57 4.3 Hướng phát triển 58 TÀI LIỆU THAM KHẢO 59 DANH MỤC TỪ VIẾT TẮT: STT Ký hiệu Ý nghĩa PHP Hypertext Preprocessor CMS Content Management System MySQL Hệ quản trị sở liệu DANH MỤC HÌNH ẢNH Hình 1.2.1 Tìm plugin “Woocommerce” thư viện 13 Hình 1.2.2 Cài đặt dịch thiết lập cho Woocommerce 14 Hình 1.2.3 Cài đặt trang cần thiết cho Woocommerce 15 Hình 1.2.4 Thiết lập vị trí định dạng tiền tệ phù hợp với Việt Nam 16 Hình 1.2.5 Đã thiết lập hoàn thành 17 Hình 1.2.6 Cấu hình định dạng tiền mặt 18 Hình 1.2.7 Bỏ số đơn vị thập phân tiền tệ 19 Hình 1.2.1.1 Các trang mặc định Woocommerce 20 Hình 1.2.1.2 Thiết lập trang cửa hàng 21 Hình 1.3.1.1 Menu thêm sản phẩm 22 Hình 1.3.1.2 Nhập tiêu đề mơ tả chi tiết sản phẩm 22 Hình 1.3.1.3 Khung nhập liệu sản phẩm 23 Hình 1.3.1.4 Nhập liệu sản phẩm .24 Hình 1.3.1.5 Khung mơ tả ngắn sản phẩm 25 Hình 1.3.2.1 Tạo danh mục sản phẩm 25 Hình 1.3.3.1 Ảnh đại diện sản phẩm .26 Hình 1.3.4.1 Thư viện ảnh sản phẩm 26 Hình 1.3.4.2 Xem trang cửa hàng 27 Hình 1.3.4.3 Sản phẩm hiển thị trang Cửa hàng 27 Hình 3.3.5.1 Thêm sản phẩm vào giỏ 28 Hình 1.3.5.2 Trang giỏ hàng 28 Hình 1.3.5.3 Trang tốn .29 Tại chọn phương thức toán tiến hành toán .29 Hình 1.4.1 Tổng quan trang thiết lập .29 Hình 1.4.2 Cài đặt chung 30 Hình 1.4.3 Thiết lập cài đặt sản phẩm 32 Hình 1.4.1.1 tính thuế 35 Hình 1.4.2.1 Thiết lập địa mặc định 36 Hình 1.4.3.1 Trang cài đặt tính phí giao nhận Woocommerce 36 Hình 1.4.4.1.1 Thiết lập toán nhận hàng .37 Hình 1.4.4.2.1 tốn qua VNPAY 38 Hình 1.4.4.2.2 trang đăng ký tài khoản 38 Hình 1.4.4.2.3 thơng tin cấu hình 39 Hình 1.4.5.1 Cài plugin 39 Hình 1.4.5.2 Bật cổng tốn 40 Hình 1.4.6.1 Các tùy chọn thiết lập email Woocommerce .40 Hình 1.4.7.1 cài plugin 41 Hình 1.4.7.2 cấu hình plugin 41 Hình 1.5.1 Giao diện Wiget 42 Bảng 2.1.1 Biểu đồ UseCase 44 Hình 2.2.1.1 Biểu đồ trình tự đăng ký thành viên 45 Hình 2.2.2.1 Biểu đồ trình tự đăng nhập .45 Hình 2.2.3.1 Biểu đồ trình tự xem giỏ hàng 45 Hình 2.2.4.1 Biểu đồ trình tự xem đơn hàng đặt .46 Hình 2.2.5.1 Biểu đồ trình tự xem chi tiết sản phẩm 46 Hình 2.2.6.1 Biểu đồ trình tự xem thơng tin tài khoản .47 Hình 2.2.7.1 Biểu đồ trình tự sửa thơng tin tài khoản 48 Hình 2.2.8.1 Biểu đồ trình tự tốn .49 Hình 2.2.9.1 Biểu đồ trình tự xóa sản phẩm giỏ hàng 50 Hình 3.1.1 trang chủ 51 Hình 3.1.2 danh mục giày nam 51 Hình 3.2.1 Tìm kiếm giày 52 Hình 3.3.1 Chọn sản phẩm 52 Hình 3.3.2 chọn cổng toán 53 Hình 3.3.3 tốn qua vnpay 53 Hình 3.3.4 chọn ngân hàng 54 Hình 3.3.5 tốn 54 Hình 3.4.6 quản trị vnpay 55 Hình 3.4.1 Kiểm tra đơn hàng .55 Hình 3.5.1 Chuyển ngơn ngữ .56 Hình 3.5.2 Giao diện sau chuyển đổi 56 LỜI NÓI ĐẦU - Hiện nay, dịch bệnh làm cho khách hàng khó mua hàng trực tiếp cửa hàng nhằmđể tiết kiệm thời gian cho khách hàng, tạo nên “Website bán giày” Nhằm giúp người mua hàng mà khơng cần đến cửa hàng tham khảo sản phẩm giá tiền trước đặt mua - Sau chức trang web: + Đăng nhập, đăng ký + Xem thông tin sản phẩm, + Thêm sản phẩm vào giỏhàng + Đặt mua sản phẩm + Thanh toán online + Thêm thông tin đặt hàng + Thống kê doanh thu + Chuyển đổi ngôn ngữ Anh -Việt + Quản lý danh mục sản phẩm + Quản lý sản phẩm + Quản lý mã giảm giá + Quản lý phí vận chuyển + Quản lý đơn hàng + Một số chức khác SINH VIÊN THỰC HIỆN LÊ THANH QUYỀN MỞ ĐẦU Tên đề tài “Thiết kế website bán giày” Lý thực đề tài Hiện việc mua sắm trực tuyến người ưa chuộng tiết kiệm thời gian, khơng tốn cơng đến cửa hàng, có thời gian nghiên cứu sản phẩm lựa chọn đa dạng, chủ động Trong hoạt động thể dục thể thao chũng ta ln cần có đơi giày phù hợp chất lượng để dễ dàng tập luyện hay vận động sống thường ngày cách thoải mái Không thế, nhu cầu xây dựng cho thân hình ảnh bên ngồi lịch đẹp mắt người xung quanh khách hàng ngày tăng cao, đặc biệt giới trẻ, họ có nhu cầu mua đơi giày để tạo thu hút với người tạo nên bật thân Hơn giới trẻ họ không muốn tốn nhiều thời gian để đến cửa hàng mua giày mà họ muốn nhà đặt hàng qua mạng chờ người giao đến tận nhà, vừa có cảm giác mong chờ, chờ đợi sản phẩm đặt mua đưa đến tận tay nào.Website xây dựng nhằm giúp khách hàng tiết kiệm nhiều thời gian dùng thời gian làm nhiều việc khác Giới trẻ ngày đặc biệt hấp dẫn thu hút đơi giày Họ chi hàng triệu đồng để có đơi giày làm bật họ.Khơng có người trẻ tuổi mà người lớn tuổi cảm nhận cần thiết đôi giày nên em định xây dựng “Website bán giày”để đáp ứng nhu cầu khách hàng Mục đích nghiên cứu Mục đích chủ yếu đề tài là: Xây dựng website thương mại điện tử nhằm phục vụ nhu cầu mua giày cho khách hàng Đảm bảo tính gần gũi với khách hàng dễ dàng sử dụng với lứa tuổi Website giúp khách hàng mua sản phẩm cách dễ dàng hơn, giao diện thân thiện với người dùng, dễ hiểu giúp khách hàng dễ chịu thoải mái sử dụng website Đối tượng phạm vi nghiên cứu Đối tượng nghiên cứu: Đề tài tập trung vào đối tượng có nhu cầu tìm kiếm giày internet Hình 2.2.1.1 Biểu đồ trình tự đăng ký thành viên 2.2.2 Đăng nhập Khach hang Form CSDL Chon chuc nang dang nhap Hien thi form Yeu cau nhap thong tin tai khoan 4.Nhap thong tin Kiem tra thong tin khach hang Kiem tra cong Dang nhap vao he thong Hình 2.2.2.1 Biểu đồ trình tự đăng nhập 2.2.3 Xem thông tin giỏ hàng Khach hang Giao dien CSDL Chon chuc nang gio hang Kiem tra thong tin gio hang Tra ve ket qua Hien thi thong tin gio hang Hình 2.2.3.1 Biểu đồ trình tự xem giỏ hàng 45 2.2.4 Xem đơn hàng đặt Khach hang Form CSDL Truy cap vao trang tai khoan Hien form dang nhap Yeu cau nhap thong tin dang nhap Nhap thong tin tai khoan Kiem tra tai khoan Tra ve ket qua Chon chuc nang xem don hang Hien thi from xem don hang Chon don hang can xem 10.Kiem tra thong tin don hang 11 Tra ve ket qua Hien thi thong tin don hang Hình 2.2.4.1 Biểu đồ trình tự xem đơn hàng đặt 2.2.5 Xem chi tiết sản phẩm Khach hang Giao dien CSDL Chon san pham can xem Kiem tra thong tin san pham Tra ve ket qua Hien thong tin san pham Hình 2.2.5.1 Biểu đồ trình tự xem chi tiết sản phẩm 46 2.2.6 Xem thông tin tài khoản Khach hang Form CSDL Dang nhap vao he thong Gui thong tin tai khoan len Server 3.Kiem tra thong tin Tra ve ket qua Chon chuc nang xem thong tin Kiem tra Tra ve ket qua Hien thi len giao dien Hình 2.2.6.1 Biểu đồ trình tự xem thông tin tài khoản 47 2.2.7 Sửa thông tin tài khoản Khach hang CSDL Form Tien hanh dang nhap 2.Hien thi form 3.Yeu cau nhap thong tin Nhap thong tin tai khoan Kiem tra thong tin dang nhap Tra ve ket qua Hien thi thong tin tai khoan Chon chuc nang sua thong tin Hien thi form sua thong tin 10 Dien thong tin can thiet 11 Kiem tra thong tin 12 Tra ve ket qua 14 Hien thi ket qua 13 Luu vao CSDL Hình 2.2.7.1 Biểu đồ trình tự sửa thơng tin tài khoản 48 2.2.8 Thanh tốn đơn hàng Khach hang Form CSDL Dang nhap vao he thong Kiem tra thong tin dang nhap Kiem tra cong Chon san pham can mua Kiem tra thong tin san pham Tra ve ket qua Luu san pham vao gio hang Hien thi gio hang Thanh toan 10 Hien thi form toan 11 Dien thong tin toan 12 Kiem tra thong tin 13 Tra ve ket qua 14 Luu vao CSDL 15 Hien thi ket qua Hình 2.2.8.1 Biểu đồ trình tự tốn 49 2.2.9 Xóa sản phẩm giỏ hàng Khach hang Form CSDL Dang nhap vao he thong Kiem tra thong tin dang nhap Dang nhap cong Chon chuc nang gio hang Hien thi gio hang Chon san pham can xoa Kiem tra va xoa san pham Luu lai thong tin Tra ve ket qua 10 Hien thi gio hang Hình 2.2.9.1 Biểu đồ trình tự xóa sản phẩm giỏ hàng 50 CHƯƠNG 3: DEMO CÁC CHỨC NĂNG CỦA WEBSITE 3.1 Xem danh mục sản phẩm Tại giao diện trang chủ ta chọn vào danh mục sách cần tìm kiếm Hình 3.1.1 trang chủ Hình 3.1.2 danh mục giày nam 3.2 Tìm kiếm giày Nhập thơng tin cần tìm kiếm tìm kiếm trang chủ 51 Hình 3.2.1 Tìm kiếm giày 3.3 Thanh tốn qua VNPAY Chọn sản phẩm muốn mua Hình 3.3.1 Chọn sản phẩm Để toán qua vnpay ta chọn cổng toán vnpay trang toán 52 Hình 3.3.2 chọn cổng tốn Hình 3.3.3 tốn qua vnpay Tại ta tiến hành chọn phương thức toán tiến hành toán Thanh toán thẻ ngân hàng chọn Thẻ ATM tài khoản ngân hàng 53 Hình 3.3.4 chọn ngân hàng Tại tiến hành chọn ngân hàng tốn Hình 3.3.5 tốn Tại nhập thơng tin thẻ quét QR để toán Để quản lý giao dịch qua vnpay ta tiến hành vào trang quản trị mà vnpay cung cấp email cấu hình 54 Hình 3.4.6 quản trị vnpay 3.4 Kiểm tra đơn hàng Để kiểm tra đơn đặt hàng ta vào trang quản trị chọn Woocommerce -> đơn hàng để xem đơn đặt hàng Hình 3.4.1 Kiểm tra đơn hàng Tại ta tiến hành kiểm tra tình trạng kiểm tra đơn hàng, đơn hàng hồn thành tiến hành đổi trạng thái đơn hàng để kết thúc đơn hàng 55 3.5 Chuyển đổi ngôn ngữ Tại trang chủ website menu topbar chọn ngôn ngữ để chuyển đổi Hình 3.5.1 Chuyển ngơn ngữ Hình 3.5.2 Giao diện sau chuyển đổi 56 CHƯƠNG 4: KẾT LUẬN Đánh giá kết 4.1 Chức làm được - Qua thời gian tìm hiểu vềcác cơng cụ, phân tích yêu cầu, với nỗ lực thân, 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ôngtin sản phẩm, thêmsả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 + Thanh toán online + Quản lý sản phẩm, slider, đơn hàng, chi tiết đơn hàng, danh mục, + Quản lý hàng tồn kho + Thống kê doanh thu 4.2 Hạn chế đề tài + Do làm việc cá nhân nên việc thu thập dữliệu, phân tích nghiệp vụcịn nhiều hạn chế + Chưa thể cập nhật hết tất cảnhững sản phẩm có mặt thị trường 57 4.3 Hướng phát triển Website kinh doanh giày hoàn thành chức trang webthươ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ững chức em tích hợp tương lai: + 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 vềcác loại giày theo nhu cầu + Tích hợp nhiều hình thức tốn q trình đăng ký dịch vụ đơn giản 58 TÀI LIỆU THAM KHẢO [1] https://ecpmedia.vn/7-ly-do-nen-chon-wordpress-lam-nen-tang-xay-dungwebsite.html [2] https://imta.edu.vn/huong-dan-su-dung-flatsome-theme/ 59