Xây dựng hệ thống website bán thực phẩm phòng gym

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐÀO LÊ HẢI ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG HỆ THỐNG WEBSITE BÁN THỰC PHẨM PHÒNG GYM Kon Tum, tháng 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 HỆ THỐNG WEBSITE BÁN THỰC PHẨM PHÒNG GYM GIẢNG VIÊN HƢỚNG DẪN : TS ĐỒNG NGỌC NGUYÊN THỊNH SINH VIÊN THỰC HIỆN : ĐÀO LÊ HẢI LỚP : K12TT MSSV : 1817480201003 Kon Tum, tháng năm 2022 LỜI CẢM ƠN Để hoàn thành đồ án tốt nghiệp này, em xin tỏ lòng biết ơn sâu sắc đến thầy Đồng Ngọc Nguyên Thịnh, tận tình hướng dẫn suốt trình xây dựng chương trình viết báo cáo tốt nghiệp Em chân thành cảm ơn quý thầy, cô khoa Công nghệ, Trường phân hiệu Đại Học Đà Nẵng Kon Tum tận tình truyền đạt kiến thức năm em học tập Với vốn kiến thức tiếp thu q trình học khơng tảng cho trình nghiên cứu đề tài tốt nghiệp mà cịn hành trang q báu để em bước vào đời cách vững tự tin Em xin cảm ơn gia đình bạn bè ln ủng hộ giúp đỡ em suốt năm ngồi ghế giảng đường đại học Cuối em kính chúc quý thầy, cô dồi sức khỏe thành công nghiệp cao quý Sinh viên Đào Lê Hải MỤC LỤC CHƢƠNG TỔNG QUAN ĐỀ TÀI 1.1 TỔNG QUAN VỀ 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 Về lý thuyết 1.3.2 Về kỹ thuật 1.3.3 Về ứng dụng 1.4 PHƢƠNG PHÁP NGHIÊN CỨU 1.4.1 Khảo sát thực tế 1.4.2 Nghiên cứu lý thuyết 1.4.3 Nghiên cứu công nghệ 1.5 PHẠM VI NGHIÊN CỨU CHƢƠNG TỔNG QUAN LÝ THUYẾT 2.1 MƠ HÌNH KIẾN TRÚC HỆ THỐNG SỬ DỤNG 2.2 MƠ HÌNH MVC 2.2.1 Khái niệm 2.2.2 Luồng tƣơng tác 2.2.3 Ƣu nhƣợc điểm mơ hình MVC 2.3 CÔNG NGHỆ SỬ DỤNG 2.3.1 Frontend 2.3.2 Backend 2.4 CÔNG CỤ SỬ DỤNG 2.4.1 Visual Studio Code 2.4.2 Xampp CHƢƠNG PHÂN TÍCH VÀ THIẾT KẾ hệ thống 11 3.1 TÁC NHÂN HỆ THỐNG 11 3.2 PHÂN TÍCH CHỨC NĂNG CỦA KHÁCH HÀNG 11 3.2.1 Đăng nhập 11 3.2.2 Đăng ký tài khoản 11 3.2.3 Tìm kiếm sản phẩm 12 3.2.4 Xem thông tin sản phẩm 12 3.2.5 Giỏ hàng 12 3.2.6 Thêm sản phẩm vào danh sách mong muốn 13 3.2.7 Liên hệ 13 3.2.8 Thanh tốn hóa đơn 13 3.3 PHÂN TÍCH CHỨC NĂNG CỦA ADMIN 14 3.3.1 Đăng nhập 14 3.3.2 Đăng ký tài khoản 14 3.3.3 Quản lý danh mục sản phẩm 14 i 3.3.4 Quản lý sản phẩm 15 3.3.5 Quản lý đơn đặt hàng 15 3.3.6 Quản lý tài khoản 15 3.3.7 Quản lý liên hệ 16 3.3.8 Quản lý tin tức 16 3.4 MÔ TẢ HỆ THỐNG QUA SƠ ĐỒ 17 3.4.1 Sơ đồ Use case 17 3.4.2 Sơ đồ 25 3.4.3 Sơ đồ lớp 52 3.4.4 Lƣợc đồ quan hệ sở liệu 56 3.5 DEMO CHƢƠNG TRÌNH 59 3.5.1 Chức chƣơng trình 59 3.5.2 Chức Admin 69 DANH MỤC TÀI LIỆU THAM KHẢO 76 GIẤY XÁC NHẬN HOÀN THÀNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP 77 ii DANH MỤC BẢNG Số hiệu bảng 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 3.29 3.30 3.31 3.32 3.33 3.34 3.35 3.36 Tên bảng Bảng mơ tả tác nhân Phân tích chức đăng nhập khách hàng Phân tích chức đăng ký tài khoản Phân tích chức tìm kiếm sản phẩm Phân tích chức xem thơng tin sản phẩm Phân tích chức giỏ hàng Phân tích chức thêm sản phẩm vào danh sách mong muốn Phân tích chức liên hệ Phân tích chức tốn hóa đơn Phân tích chức đăng nhập Admin Phân tích chức đăng ký tài khoản admin Phân tích chức quản lý danh mục sản phẩm Phân tích chức quản lý sản phẩm Phân tích chức quản lý đơn đặt hàng Phân tích chức quản lý tài khoản Phân tích chức quản lý liên hệ Phân tích chức quản lý tin tức Mơ tả thuộc tính Use case tổng qt Mơ tả đặc tả Use case đăng nhập Mô tả đặc tả Use case đăng ký Mô tả đặc tả Use case xem thông tin sản phẩm Mô tả sơ đồ chức tìm kiếm sản phẩm Mơ tả đặc tả Use case đặt hàng Mô tả đặc tả Use case kiểm tra giỏ hàng Mô tả đặc tả Use case quản lý sản phẩm Mô tả đặc tả Use case quản lý danh mục Mô tả đặc tả Use case quản lý đơn hàng Mô tả đặc tả Use case quản lý tài khoản người dùng Mô tả đặc tả Use case quản lý liên hệ khách hàng Mô tả sơ đồ chức đăng nhập Mô tả sơ đồ chức đăng ký tài khoản Mô tả sơ đồ chức tìm kiếm sản phẩm Mơ tả sơ đồ chức xem thông tin sản phẩm Mô tả sơ đồ chức đặt hàng Mô tả sơ đồ chức huỷ đặt hàng Mô tả sơ đồ thêm sản phẩm vào danh sách mong muốn iii Trang 11 12 12 12 13 13 13 14 14 14 15 15 15 16 16 17 17 17 19 19 20 20 21 22 22 23 24 24 25 25 26 27 28 29 30 31 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 3.57 3.58 3.59 3.60 3.61 3.62 3.63 3.64 Mô tả sơ đồ chức liên hệ Mô tả sơ đồ chức tốn hóa đơn Mơ tả sơ đồ xem danh mục sản phẩm Mô tả sơ đồ quản lý danh mục Mô tả sơ đồ quản lý sửa danh mục Mô tả sơ đồ quản lý xóa danh mục Mơ tả sơ đồ quản lý sản phẩm Mô tả sơ đồ quản lý thêm sản phẩm Mô tả sơ đồ quản lý sửa sản phẩm Mô tả sơ đồ quản lý xóa sản phẩm Mơ tả sơ đồ xem đơn đặt hàng Mô tả sơ đồ quản lý xóa đơn đặt hàng Mơ tả sơ đồ xem tài khoản Mơ tả sơ đồ quản lý xóa tài khoản Mô tả sơ đồ xem liên hệ khách hàng Mơ tả sơ đồ xóa liên hệ khách hàng Mô tả sơ đồ xem tin tức Mô tả sơ đồ quản lý thêm tin tức Mô tả sơ đồ quản lý sửa tin tức Mô tả sơ đồ quản lý xố tin tức Mơ tả thuộc tính phương thức sơ đồ lớp Mô tả Users Mô tả Products Mô tả Orders Mô tả Cart Mô tả Wishlist Mô tả Media Mô tả Blog iv 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 57 57 57 58 58 58 58 DANH MỤ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 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 Tên hình Mơ hình kiến trúc hệ thống sử dụng Mơ hình MVC Luồng tương tác thành phần MVC Ngôn ngữ HTML Ngôn ngữ CSS Ngôn ngữ JavaScript Bootstrap Ngôn ngữ lập trình PHP Hệ quản trị sở liệu MySQL Phần mềm Visual Studio Code Phần mềm Xampp Sơ đồ Use case tổng quát Đặc tả Use case đăng nhập Đặc tả Use case đăng ký Đặc tả Use case xem thông tin sản phẩm Đặc tả Use case tìm kiếm sản phẩm Đặc tả Use case đặt hàng Đặc tả Use case kiểm tra giỏ hàng Đặc tả Use case quản lý sản phẩm Đặc tả Use case quản lý danh mục Đặc tả Use case quản lý đơn hàng Đặc tả Use case quản lý tài khoản người dùng Đặc tả Use case quản lý liên hệ khách hàng Sơ đồ chức đăng nhập Sơ đồ chức đăng ký tài khoản Sơ đồ chức tìm kiếm sản phẩm Sơ đồ chức xem thông tin sản phẩm Sơ đồ chức đặt hàng Sơ đồ chức hủy đặt hàng Sơ đồ thêm sản phẩm vào danh sách mong muốn Sơ đồ chức liên hệ Sơ đồ chức tốn hóa đơn Sơ đồ xem danh mục sản phẩm Sơ đồ thêm danh mục sản phẩm Sơ đồ sửa danh mục sản phẩm Sơ đồ xóa danh mục sản phẩm Sơ đồ xem sản phẩm v Trang 3 6 8 10 12 18 18 19 20 20 21 21 22 23 23 24 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 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 3.57 3.58 3.59 3.60 3.61 3.62 3.63 3.64 3.65 Sơ đồ thêm sản phẩm Sơ đồ sửa sản phẩm Sơ đồ xóa sản phẩm Sơ đồ xem đơn đặt hàng Sơ đồ xóa đơn đặt hàng Sơ đồ xem tài khoản Sơ đồ xóa tài khoản Sơ đồ xem liên hệ khách hàng Sơ đồ xóa liên hệ khách hàng Sơ đồ xem tin tức Sơ đồ xem thêm tin tức Sơ đồ xem sửa tin tức Sơ đồ xem xoá tin tức Sơ đồ lớp Lược đồ quan hệ sở liệu Trang chủ header Trang chủ body Trang chủ body Trang chủ body Trang chủ footer Đăng nhập Đăng kí Thông tin người dùng Đổi mật Trang thông tin website Sản phẩm Chi tiết sản phẩm Tìm kiếm sản phẩm Trang giỏ hàng Chọn phương thức toán Thanh tốn trực tiếp Thanh tốn online Đặt hàng thành cơng sau tốn Bình luận sản phẩm Liên hệ Trang chủ admin Quản lí sản phẩm Quản lý danh mục sản phẩm Giao diện thêm danh mục sản phẩm vi 39 40 41 42 43 44 45 46 47 48 49 50 51 55 56 59 59 60 60 60 61 61 62 62 63 63 64 64 65 66 67 67 67 68 68 69 69 70 70 3.66 3.67 3.68 3.69 3.70 3.71 3.72 3.73 3.74 3.75 3.76 3.77 Giao diện thêm danh mục sản phẩm Giao diện thêm danh mục sản phẩm Giao diện thêm danh mục sản phẩm Giao diện xoá danh mục sản phẩm Quản lý sản phẩm Giao diện thêm sản phẩm Giao diện thêm sản phẩm Giao diện xoá sản phẩm Quản lý tin tức Thêm tin tức Quản lý giỏ hàng khách hàng Mã hoá đơn vii 70 71 71 71 72 72 73 73 74 74 75 75 d Thông tin người dùng Người dùng truy cập vào trang thông tin người dùng cách bấm vào nút sidebar để hiển thị phần hồ sơ bấm vào phím tắt phần header để chuyển đến trang thông tin người dùng Trang thông tin người dùng hiển thị số thơng tin người dùng Hình 3.49: Thông tin ngƣời dùng e Đổi mật Chức đổi mật giúp cho người dùng bảo vệ thơng tin tài khoản mua hàng Hình 3.50: Đổi mật 63 f Trang thông tin website Trang thơng tin Website giúp khách hàng nắm thêm thông tin trang Web thương mại điện tử họ truy cập Hình 3.51: Trang thơng tin website g Sản phẩm Trang sản phẩm chia thành danh mục, thuận tiện cho việc tìm kiếm tiết kiệm thời gian cho khách hàng Hình 3.52: Sản Phẩm 64 h Chi tiết sản phẩm Người dùng truy cập vào trang chi tiết sản phẩm cách bấm vào nút chi tiết sản phẩm bấm trực tiếp vào hình sản phẩm Trang chi tiết hiển thị số thơng tin tên sản phẩm, danh mục, kích thước, màu sắc, giá sản phẩm, số lượng thơng tin sản phẩm Hình 3.53: Chi tiết sản phẩm i.Tìm kiếm sản phẩm Chức tìm kiếm sản phẩm giúp khách hàng tìm kiếm sản phẩm mà không cần phải thao tác qua menu menu phụ khác Giúp tiết kiệm thời gian nhanh chóng đưa kết tìm kiếm sản phẩm mong muốn kháchhàng Với chức tìm kiếm khách hàng cần bấm vào tìm kiếm phần header sau nhập từ khóa muốn tìm kiếm bấm vào biểu tượng tìm Khách hàng nhận kết tìm kiếm có khơng tìm sản phẩm Hình 3.54: Tìm kiếm sản phẩm 65 j Trang giỏ hàng Trang giỏ hàng cầu nối trang sản phẩm trang tốn Khi khách hàng muốn mua hàng khách hàng phải chọn sản phẩm bỏ vào giỏ hàng Sau bỏ hàng vào giỏ sau khách hàng với kiểm tra định toán để đặt hàng Để đưa sản phẩm mong muốn vào giỏ hàng người dùng chọn vào mục chi tiết sản phẩm, trang chi tiết sản phẩm có mục đặt hàng người sử dụng cần bấm vào sản phẩm đưa vào giỏ hàng Hình 3.55: Trang giỏ hàng k Phương thức tốn Sau lựa chọn sản phẩm theo mong muốn người dùng chọn tốn để đặt sản phẩm Người dùng có hai hình thức tốn tốn ngoại tuyến hay cịn gọi toán trực tiếp nhận hàng hay toán online thơng qua ví điện tử thẻ ngân hàng Hình 3.56: Chọn phƣơng thức tốn 66 Đối với hình thức tốn ngoại tuyến sau chọn tốn hiển thị thơng tin giỏ hàng, thông tin người đặt hàng số tiền phải tốn Sau thấythơng tin người dùng bấm đặt hàng để chốt đơn hàng nhận đượcthơng báo đặt hàng thành cơng Sau khách hàng chờ đơn hàng giải từ bên bán hàng nhận hàng khách hàng tốn đơn đặt hàng Hình 3.57: Thanh tốn trực tiếp Cịn tốn online sau chọn tốn qua vnpay người dùng cần nhập đầy đủ thông tin hợp lệ mà ngân hàng yêu cầu cung cấp Sau nhập xong bấm xác thực thông tin thông báo lỗi yêu cầu nhập lại cịn thơng tin ngân hàng gửi mã OTP số điện thoại người dùng đăng ký người dùng nhập mã vào xác nhận toán Sau nhận thơng báo đặt hàng thành cơng Hình 3.58: Thanh tốn online Hình 3.59: Đặt hàng thành cơng sau tốn l Bình luận sản phẩm Bình luận sản phẩm chức giúp cho khách hàng mua hàng Website đánh giá, phản hồi chất lượng sản phẩm Website có tốt hay 67 khơng tốt để có nhìn khách quan cho khách hàng khác tham khảo nói lên chất lượng sản phẩm, dịch vụ chăm sóc khách hàng Website có tốt hay khơng Để bình luận sản phẩm người dùng cần đăng nhập tài khoản Website Hình 3.60: Bình luận sản phẩm m Liên hệ Chức liên hệ giúp cho khách hàng có thắc mắc sản phẩm, chất lượng dịch vụ đóng góp ý kiến, đánh giá khách quan theo quan điểm cá nhân nhằm giúp cho chất lượng sản phẩm, dịch vụ chăm sóc khách hàng Website cải thiện ngày tốt Hình 3.61: Liên hệ 68 3.5.2 Chức Admin a Trang chủ Admin Trang chủ Admin gồm phần header, body footer Phần header có tên Website, tên Admin quản lý phần logout Phần body có menu quản lý mục danh mục sản phẩm, thương hiệu sản phẩm, sản phẩm, slider, đơn đặt hàng, bình luận, liên hệ thư ý kiến Phần footer có thơng tin người thiết kế Để truy cập trangchủ Admin cần phải đăng nhập tài khoản Admin cấp sẵn Hình 3.62: Trang chủ Admin b Quản lý danh mục sản phẩm Chức quản lý danh mục sản phẩm nhằm mục đích quản lý nhóm sản phẩm tương tự có liên quan với Giúp quản lý phân loại sản phẩm đưa đến khách hàng tốt Để truy cập đến trang quản lý danh mục sản phẩm Admin cần đăng nhập vào hệ thống quản lý tài khoản có sẵnTrong mục danh mục sản phẩm Admin xem tất danh mục, thêm, sửa xóa danh mục sản phẩm Hình 3.63: Quản lý danh mục sản phẩm Thêm danh mục Admin cần nhập tên danh mục chọn ảnh, đầy đủ thơng tin thơng báo thêm danh mục thành công, Đối với sửa danh mục sản phẩm Admin chỉnh sửa thơng tin danh mục xong bấm cập nhật thông báo cập nhật danh mục 69 thành cơng Cịn xóa danh mục sản phẩm Admin chọn xóa, sau hệ thống thơng báo bạn có muốn xóa Admin chọn đồng ý danh mục sản phẩm xóa thơng báo xóa thành cơng danh mục sản phẩm Hình 3.64: Quản lý danh mục sản phẩm Hình 3.65: Giao diện thêm danh mục sản phẩm Hình 3.66: Giao diện thêm danh mục sản phẩm 70 Hình 3.67: Giao diện thêm danh mục sản phẩm Hình 3.68: Giao diện thêm danh mục sản phẩm Hình 3.69: Giao diện xố danh mục sản phẩm 71 c Quản lý sản phẩm Chức quản lý sản phẩm nhằm mục đích giúp cho Admin nắm rõ thơng tin sản phẩm, thêm sản phẩm mới, cập nhật xóa sản phẩm nhanh chóng Trong mục sản phẩm Admin xem, thêm, sửa xóa Hình 3.70: Quản lý sản phẩm Thêm sản phẩm Admin cần nhập tất thông tin sản phẩm bấm thêm sau nhận thơng báo thêm sản phẩm thành cơng Đối với sửa sản phẩm Admin chỉnh sửa thông tin sản phẩm xong bấm cập nhật thơng báo cập nhật sản phẩm thành cơng Cịn xóa sản phẩm Admin chọn xóa, sau hệ thống thơng báo bạn có muốn xóa Admin chọn đồng ý sản phẩm xóa thơng báo xóa thành cơng sản phẩm Hình 3.71: Giao diện thêm sản phẩm 72 Hình 3.72: Giao diện thêm sản phẩm Hình 3.73: Giao diện xố sản phẩm 73 d Quản lý tin tức Chức quản lý tin tức nhằm mục đích giúp cho Admin nắm rõ thông tin tin tức, thêm tin tức mới, cập nhật xóa sản phẩm nhanh chóng Trong mục tin tức Admin xem, thêm, sửa xóa Hình 3.74: Quản lí tin tức Hình 3.75: Thêm tin tức 74 e Quản lý giỏ hàng khách hàng Chức quản lý giỏ hàng khách hàng nhằm mục đích giúp cho Admin nắm rõ thông tin sản phẩm khách hàng, cập nhật xóa sản phẩm nhanh chóng Hình 3.76: Quản lý giỏ hàng khách hàng Hình 3.77: Mã hố đơn 75 DANH MỤC TÀI LIỆU THAM KHẢO [1] HOSTINGER, Javascript, https://www.hostinger.vn/huong-dan/javascript-la-gi, Ngày truy cập: 05/03/2022 [2] HOSTINGER, MySQL, https://www.hostinger.vn/huong-dan/mysql-la-gi/, Ngày truy cập: 06/03/2022 [3] HOSTINGER, PHP, https://www.hostinger.vn/huong-dan/php-la-gi, Ngày truy cập: 05/03/2022 [4] MATBAO, Bootstrap, https://wiki.matbao.net/bootstrap-la-gi-cai-dat-bootstrapweb-chuan-responsive/, Ngày truy cập: 05/03/2022 [5] Melink, Visual Studio, https://fptshop.com.vn/tin-tuc/danh-gia/visual-studio-codela-gi-cac-tinh-nang-noi-bat-cua-visual-studio, Ngày truy cập: 09/03/2022 [6] Monamedia, MVC Paradigm, https://monamedia.co/mvc-la-gi-ung-dung-cua-mohinh-mvc-trong-lap-trinh/, Ngày truy cập: 04/03/2022 [7] TINOGROUP, XAMPP, https://wiki.tino.org/phan-mem-xampp-la-gi/, Ngày truy cập: 06/03/2022 [8] TOPDev, CSS, https://topdev.vn/blog/css-la-gi/, Ngày truy cập: 04/03/2022 [9] WIKIPEDIA, HTML, https://vi.wikipedia.org/wiki/HTML, Ngày truy cập: 04/03/2022 76 GIẤY XÁC NHẬN HOÀN THÀNH ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Đào Lê Hải Lớp: K12TT Mã số sinh viên: 1817480201003 Xác nhận sinh viên: Đào Lê Hải chỉnh sửa đồ án tốt nghiệp theo ý kiến Giảng viên hướng dẫn Hội đồng đánh giá Tên đồ án tốt nghiệp: Xây dựng hệ thống website bán thực phẩm phòng Gym Kon tum, ngày tháng năm 2022 Trƣởng khoa Ngƣời hƣớng dẫn 77