ĐỀ tài xây DỰNG WEBSITE bán BALO (2)

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT - HÀN Khoa Khoa Học Máy Tính BÁO CÁO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN BALO Sinh viên thực : Nguyễn Văn Hiếu Lớp : 19I2 Giảng viên hướng dẫn: TS LÊ THỊ THU NGA Đà Nẵng, tháng 11 năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT - HÀN Khoa Khoa Học Máy Tính BÁO CÁO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN BALO Sinh viên: Nguyễn Văn Hiếu Mã: 191C900075 Giảng viên hướng dẫn: TS LÊ THỊ THU NGA Đà Nẵng, tháng 11 năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƢỚNG DẪN LỜI CẢM ƠN Để hoàn thành báo cáo này, trước hết, em xin cảm ơn thầy cô giáo khoa công nghệ thông tin Trường Đại học CNTT Truyền Thông Việt - Hàn, em nhận nhiều quan tâm, giúp đỡ quý thầy cô bạn bè Em xin gửi lời cảm ơn đến ban giám hiệu nhà trường tạo điều kiện tốt cho em củng bạn suốt thời gian học tập Em xin cảm ơn cô Lê Thị Thu Nga giúp đỡ hỗ trợ số vấn đề liên quan đến trình thực đồ án tốt nghiệp Em xin chân thành cảm ơn! Sinh viên, Nguyễn Văn Hiếu MỤC LỤC DANH MỤC BẢNG MỞ ĐẦU Giới thiệu Lý chọn đề tài Mục tiêu đề tài 10 Nhiệm vụ hướng giải 10 Ý nghĩa thực tiển đề tài 11 Bố cục đề tài 11 Chương CÔNG CỤ VÀ CÔNG NGHỆ SỬ DỤNG 12 1.1 Công nghệ 12 1.1.1 HTML 12 1.1.2 CSS 13 1.1.3 JavaScript 14 1.1.4 Thư viện Tailwind.css 15 1.1.5 Icon boxicon.com 16 1.1.6 PHP 17 1.1.7 Hệ quản trị sở liệu MYSQL 18 1.1.8 Framework Laravel 19 1.2 Công cụ 19 1.2.1 Visual Studio Code 19 1.2.2 Xampp 20 Chương PHÂN TÍCH MƠ HÌNH HỆ THỐNG 21 2.1 Phân tích yêu cầu 21 2.1.1 Yêu cầu hình thức 21 2.1.2 Yêu cầu bảo mật 21 2.2 Phân tích chức 22 2.2.1 Chức dành cho khách hàng 22 2.2.2 Chức dành cho người quản trị 23 2.3 Sơ đồ use case 24 2.3.1 Sơ đồ use case tổng quát 24 2.3.2 Sơ đồ use case người dùng 24 2.3.3 Sơ đồ use case quản trị viên 26 2.4 Biểu đồ hoạt động 27 2.4.1 Biểu đồ hoạt động người dùng 27 2.4.2 Biểu đồ hoạt động quản trị viên 28 2.5 Biểu đồ lớp 28 2.6 Phân tích sở liệu 29 2.6.1 Sơ đồ quan hệ 29 2.6.2 Phân tích chi tiết bảng 29 Chương XÂY DỰNG ỨNG DỤNG 33 3.1 Giao diện khách hàng 33 3.1.1 Giao diện trang chủ 33 3.1.2 Giao diện sản phẩm 34 3.1.3 Giao diện chi tiết sản phẩm 35 3.1.4 Giao diện giỏ hàng 36 3.1.5 Giao diện toán 37 3.1.6 Giao diện thông tin cá nhân 37 3.1.7 Giao diện đổi mật 38 3.2 Giao diện dành cho người quản trị 38 3.2.1 Giao diện quản lí sản phẩm 38 3.2.2 Giao diện quản lí khách hàng 39 3.2.3 Giao diện quản trị tổng quan 39 KẾT LUẬN 40 Kết đạt 40 Hướng phát triển 41 TÀI LIỆU THAM KHẢO 42 DANH MỤC HÌNH Hình 1: Hình minh họa HTML 12 Hình 2:Ví dụ code HTML 13 Hình 3:Hình minh họa CSS 13 Hình 4:Ví dụ code CSS 14 Hình 5:Hình minh họa Javascrip 14 Hình 6:Ví dụ code Javascrip 15 Hình 7:Hình minh họa taidwindcss 15 Hình 8:Ví dụ code taidwindcss 16 Hình 9:Ví dụ boxicon 16 Hình 10:Hình minh họa PHP 17 Hình 11:Ví dụ code PHP 17 Hình 12:Hình minh họa MySQL 18 Hình 13:Giao diện MySQL 18 Hình 14:Hình minh họa Laravel 19 Hình 15:Giao diện visual studio code 20 Hình 16:Giao diện XAMPP 20 Hình 17:Biểu đồ usecase tổng quát 24 Hình 18:Biểu đồ usecase khách hàng 24 Hình 19:Usecase quản lí giỏ hàng 25 Hình 20:Usecase lọc sản phẩm 25 Hình 21:Usecase quản lí thơng tin cá nhân 25 Hình 22:Biểu đồ usecase quản trị viên 26 Hình 23:Usecase quản lí sản phẩm 26 Hình 24:Usecase quản lí khách hàng 26 Hình 25:Biểu đồ hoạt động quản lí giỏ hàng 27 Hình 26:Biểu đồ hoạt động lọc sản phẩm 27 Hình 27:Biểu đồ hoạt đọng quản lí sản phẩm 28 Hình 28:Biểu đồ lớp 28 Hình 29: Sơ đồ quan hệ bảng 29 Hình 30:Giao diện trang chủ 33 Hình 31:Giao diện trang chủ 33 Hình 32:Giao diện trang chủ 34 Hình 33:Giao diện sản phẩm 34 Hình 34:Giao diện chi tiết sản phẩm 35 Hình 35:Giao diện chi tiết sản phẩm 35 Hình 36:Giao diện chi tiết sản phẩm 36 Hình 37:Giao diện giỏ hàng 36 Hình 38:Giao diện tốn 37 Hình 39:Giao diện thông tin cá nhân 37 Hình 40:Giao diện đổi mật 38 Hình 41:Giao diện quản lí sản phẩm 38 Hình 42:Giao diện quản lí khách hàng 39 Hình 43:Giao diện quản trị tổng quan 39 DANH MỤC BẢNG Bảng 1: Bảng khách hàng 29 Bảng 2: Bảng dòng sản phẩm 30 Bảng 3: Bảng sản phẩm 30 Bảng 4:Nhóm sản phẩm 31 Bảng 5:Bảng giỏ hàng 31 Bảng 6:Bảng đơn hàng 31 Bảng 7:Bảng chi tiết đơn hàng 32 Bảng 8:Thơng tin tốn 32 Bảng 9:Phương thức toán 32 MỞ ĐẦU Giới thiệu Trong thời đại cơng nghiệp hóa - đại hóa đất nước ngày nói đến cơng nghệ thơng tin hình dung tới mơi trường phát triển động xếp vào hàng bậc giới Công nghệ thông tin ứng dụng rộng rãi vào lĩnh vực đời sống xã hội Từ phần mềm quản lý giúp cho công việc bán hàng cửa hàng trở nên nhanh chóng dễ dàng, ngày công nghệ thông tin phát triển mạnh mẽ nữa, Website đời không đáp ứng cho khách hàng đến trực tiếp cửa hàng mua sản phẩm mà cịn phục vụ cho khách hàng xa Không thế, với việc giới thiệu, quảng bá hình ảnh hàng, cơng ty mở rộng quy mô lớn giúp cho việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi nhiều,mang lại hiệu kinh tế cao tạo uy tín khách hàng Trong thời đại 4.0 nay, Việt Nam có 45 triệu người sử dụng Internet ngày có 75% có xu hướng tìm kiếm thơng tin, mua sắm trực tuyến Vì thế, việc bán balo, túi xách online xem hướng đắn, mang lại hiệu tối đa cho doanh nghiệp Lý chọn đề tài Việc mua sắm online xu toàn giới tất mặt hàng khơng phải xa mà chọn sản phẩm ưng ý kiểu dáng Và việc mua sắm balo, túi xách tương tự vậy, có nhu cầu mua sắm online chị em thường phân vân nên chọn mua đâu mẫu mã đẹp chất lượng uy tín Việc lên mạng tìm kiếm mua sản phẩm trở nên gần gũi với bạn trẻ ngày Do em định thực đề tài với mong muốn đưa đến nhiều lựa chon cho khách hàng, phát triển hàng quy mô lớn giúp cho việc mua sắm balo, phụ kiện sản phẩm liên quan trở nên dễ dàng Những vấn đề hạn chế đường không cần thiết, 2.4.2 Biểu đồ hoạt động quản trị viên H nh 27:Biểu đồ hoạt đọng quản lí sản phẩm 2.5 Biểu đồ lớp H nh 28:Biểu đồ lớp 28 2.6 Phân tích sở liệu 2.6.1 Sơ đồ quan hệ H nh 29: Sơ đồ quan hệ bảng 2.6.2 Phân tích chi tiết bảng - Khách hàng Tên Mô tả Kiểu Độ lớn Ràng buộc IDKhachHang ID khách hàng Varchar 10 Khóa HoTen Tên khách hàng Varchar 100 DiaChi Địa Varchar 50 NgaySinh Ngày sinh Date SoDienThoai Số điện thoại Varchar 10 Email Email Varchar 50 MatKhau Mật Varchar 100 Bảng 1: Bảng khách hàng 29 - Dòng sản phẩm Tên Mô tả Kiểu Độ dài Ràng buộc IDDongSanPham ID dịng sản phẩm Varchar 10 Khóa IDNhomSanPham ID nhóm sản phẩm Varchar 10 Khóa ngoại Varchar 50 TenDong Tên dòng Bảng 2: Bảng dòng sản phẩm - Sản phẩm Tên Mô tả Kiểu Độ dài Ràng buộc IDSanPham ID sản phẩm Varchar 10 Khóa IDDongSanPham ID dịng sản phẩm Varchar 10 Khóa ngoại MauSanPham Màu sản phẩm Varchar 20 KichCo Kích cỡ Varchar 20 TenSanPham Tên sản phẩm Varchar 100 ChatLieu Chất liệu VarChar 20 ThuongHieu Thương hiệu Varchar 20 DonGia Đơn giá Float KhuyenMai Khuyến Int 11 MoTa Mô tả Varchar 1000 ChiTiet Chi tiết Varchar 1000 Anh Ảnh Json TinhTrang Tình trạng Int 11 Bảng 3: Bảng sản phẩm 30 - Nhóm sản phẩm Tên Mô tả Kiểu Độ dài Ràng buộc IDNhomSanPham ID nhóm sản phẩm Varchar 10 Khóa TenNhom Tên nhóm Varchar 50 Bảng 4:Nhóm sản phẩm - Giỏ hàng Tên Mô tả Kiểu Độ dài Ràng buộc IDGioHang ID giỏ hàng Varchar 10 Khóa IDKhachHang ID khách hàng Varchar 10 Khóa ngoại IDSanPham ID sản phẩm Varchar 10 Khóa ngoại SoLuong Số lượng Int Bảng 5:Bảng giỏ hàng - Đơn hàng Tên Mô tả Kiểu Độ dài Ràng buộc IDDonHang ID đơn hàng Varchar 10 Khóa IDKhachHang ID khách hàng Varchar 10 Khóa ngoại DiaChi Địa Varchar 50 TongTien Tổng tiền Float IDPhuongThucThanhToan ID Phương thức tốn Varchar 20 TinhTrang Tình trạng Varchar 20 Khóa ngoại Bảng 6:Bảng đơn hàng 31 - Chi tiết đơn hàng Tên Mô tả IDChiTietDonHang ID chi tiết đơn hàng Kiểu Độ dài Ràng buộc Varchar 10 Khóa IDDonHang ID đơn hàng Varchar 10 Khóa ngoại IDSanPham ID sản phẩm Varchar 10 Khóa ngoại SoLuong Số lượng Int Bảng 7:Bảng chi tiết đơn hàng - Thông tin tốn Tên Mơ tả Kiểu Độ dài Ràng buộc IDThongTinThanhToan ID thơng tin tốn Varchar 10 Khóa TenNganHang Tên ngân hàng Varchar 50 SoTaiKhoan Số tài khoản Float Bảng 8:Thơng tin tốn - Phương thức tốn Tên Mơ tả Kiểu Độ dài Ràng buộc IDPhuongThucThanhToan ID phương thức Varchar 10 Khóa tốn TenPhuongThucThanhToan Tên phương thức toán Varchar 30 MacDinh Mặc định Varchar 20 Bảng 9:Phƣơng thức toán 32 Chƣơng XÂY DỰNG ỨNG DỤNG 3.1 Giao diện khách hàng 3.1.1 Giao diện trang chủ H nh 30:Giao diện trang chủ H nh 31:Giao diện trang chủ 33 H nh 32:Giao diện trang chủ 3.1.2 Giao diện sản phẩm H nh 33:Giao diện sản phẩm 34 3.1.3 Giao diện chi tiết sản phẩm H nh 34:Giao diện chi tiết sản phẩm H nh 35:Giao diện chi tiết sản phẩm 35 H nh 36:Giao diện chi tiết sản phẩm 3.1.4 Giao diện giỏ hàng H nh 37:Giao diện giỏ hàng 36 3.1.5 Giao diện toán H nh 38:Giao diện toán 3.1.6 Giao diện thông tin cá nhân H nh 39:Giao diện thông tin cá nhân 37 3.1.7 Giao diện đổi mật H nh 40:Giao diện đổi mật 3.2 Giao diện dành cho ngƣời quản trị 3.2.1 Giao diện quản lí sản phẩm H nh 41:Giao diện quản lí sản phẩm 38 3.2.2 Giao diện quản lí khách hàng H nh 42:Giao diện quản lí khách hàng 3.2.3 Giao diện quản trị tổng quan H nh 43:Giao diện quản trị tổng quan 39 KẾT LUẬN Kết đạt đƣợc Qua trình làm đề tài tốt nghiệp, em nhận thấy đề tài đạt số kết sau: Về phía ngƣời quản trị: - Hồn thành chức quản lý như: quản lý danh mục, sản phẩm, tài khoản, người dùng, đơn hàng - Ngồi cịn có chức quản lý banner, quản lý bình luận, quản lí khuyến Về phía ngƣời dùng: - Khách hàng đăng nhập, đăng ký, xem thông tin sản phẩm - Mua hàng, thêm sản phẩm vào giỏ hàng, xếp, tìm kiếm sản phẩm, cập nhật giỏ hàng - Khách hàng cịn thay đổi thơng tin mật - Xem lịch sử mua hàng - Đăng xuất Về phía thân: - Phân tích liệu chức hệ thống - Thiết kế CSDL giao diện chương trình - Xây dựng Website tương đối hoàn chỉnh so với yêu cầu đặt - Xây dựng bố cục trang web hợp lí, bước đầu thực nghiệp vụ hệ thống - Cơ nắm bước xây dựng website bán hàng trực tuyến, thực quy trình Tuy nhiên, chương trình cịn số hạn chế sau: - Website nhỏ, mang tính chất mô - Cơ sở liệu nhỏ, chức phân quyền chưa tối ưu 40 Hƣớng phát triển - Xây dựng website sử dụng đáp ứng đầy đủ yêu cầu nghiệp vụ hệ thống - Phân quyền quản trị tối ưu - Tìm hiểu sâu hệ quản trị sở liệu để đáp ứng nhu cầu người dùng, phát triển tối ưu hóa hệ thống - Xây dựng website với quy mơ lớn hơn, thêm nhiều chức 41 TÀI LIỆU THAM KHẢO [1] Trang web: https://baloonline.com/ [2] Trang web: W3Schools Online Web Tutorials [3] Trang web: MySQL [4] Trangweb: tailwindcss.com 42 ... dựng website - Tiến hành kiểm tra chạy thử - Thay đổi, bổ sung, khắc phục lỗi để website hoàn chỉnh Ý nghĩa thực tiển đề tài Ý nghĩa thực tiễn đề tài sau: - Ý nghĩa doanh nghiệp :Website xây dựng. .. Qua đề tài này, em xây dựng website để ứng dụng vào thực tế với giao diện thân thiện, dễ dàng sử dụng q trình xem thơng tin dễ quản lý Bố cục đề tài Ngoài phần mở dầu kết luận, nội dung đề tài. .. diện chương trình - Xây dựng Website tương đối hoàn chỉnh so với yêu cầu đặt - Xây dựng bố cục trang web hợp lí, bước đầu thực nghiệp vụ hệ thống - Cơ nắm bước xây dựng website bán hàng trực tuyến,