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

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 HÌNH DANH MỤC BẢNG MỞ ĐẦU 10 Giới thiệu 10 Lý chọn đề tài 10 Mục tiêu đề tài 11 Nhiệm vụ hướng giải 11 Ý nghĩa thực tiển đề tài: 12 Bố cục đề tài 12 Chương CÔNG CỤ VÀ CÔNG NGHỆ SỬ DỤNG 13 1.1 Công nghệ 13 1.1.1 HTML 13 1.1.2 CSS 14 1.1.3 JavaScript 15 1.1.4 Thư viện Tailwind.css 16 1.1.5 Icon boxicon.com 17 1.1.6 PHP 18 1.1.7 Hệ quản trị sở liệu MYSQL 19 1.1.8 Framework Laravel 20 1.2 Công cụ: 20 1.2.1 Visual Studio Code 20 1.2.2 Xampp 21 Chương PHÂN TÍCH MƠ HÌNH HỆ THỐNG 22 2.1 Phân tích yêu cầu 22 2.1.1 Yêu cầu hình thức 22 2.1.2 Yêu cầu bảo mật 22 2.2 Phân tích chức 23 2.2.1 Chức dành cho khách hàng 23 2.2.2 Chức dành cho người quản trị 25 2.3 Sơ đồ use case 26 2.3.1 Sơ đồ use case tổng quát 26 2.3.2 Sơ đồ use case người dùng 26 2.3.3 Sơ đồ use case quản trị viên 28 2.4 Biểu đồ hoạt động 29 2.4.1 Biểu đồ hoạt động người dùng 29 2.4.2 Biểu đồ hoạt động quản trị viên 30 2.5 Phân tích sở liệu 31 2.5.1 Sơ đồ quan hệ 31 2.5.2 Phân tích chi tiết bảng 31 Chương XÂY DỰNG ỨNG DỤNG 35 3.1 Giao diện khách hàng 35 3.1.1 Giao diện trang chủ 35 3.1.2 Giao diện sản phẩm 36 3.1.3 Giao diện chi tiết sản phẩm 37 3.1.4 Giao diện giỏ hàng 38 3.1.5 Giao diện toán 39 3.1.6 Giao diện thông tin cá nhân 39 3.1.7 Giao diện đổi mật 40 3.2 Giao diện dành cho người quản trị 40 3.2.1 Giao diện quản lí sản phẩm 40 3.2.2 Giao diện quản lí khách hàng 41 3.2.3 Giao diện quản trị tổng quan 41 KẾT LUẬN 42 Kết đạt 42 Hướng phát triển 43 TÀI LIỆU THAM KHẢO 44 DANH MỤC HÌNH Hình 1: Hình minh họa HTML 13 Hình 2:Ví dụ code HTML 14 Hình 3:Hình minh họa CSS 14 Hình 4:Ví dụ code CSS 15 Hình 5:Hình minh họa Javascrip 15 Hình 6:Ví dụ code Javascrip 16 Hình 7:Hình minh họa taidwindcss 16 Hình 8:Ví dụ code taidwindcss 17 Hình 9:Ví dụ boxicon 17 Hình 10:Hình minh họa PHP 18 Hình 11:Ví dụ code PHP 18 Hình 12:Hình minh họa MySQL 19 Hình 13:Giao diện MySQL 19 Hình 14:Hình minh họa Laravel 20 Hình 15:Giao diện visual studio code 21 Hình 16:Giao diện XAMPP 21 Hình 17:Biểu đồ usecase tổng quát 26 Hình 18:Biểu đồ usecase khách hàng 26 Hình 19:Usecase quản lí giỏ hàng 27 Hình 20:Usecase lọc sản phẩm 27 Hình 21:Usecase quản lí thơng tin cá nhân 27 Hình 22:Biểu đồ usecase quản trị viên 28 Hình 23:Usecase quản lí sản phẩm 28 Hình 24:Usecase quản lí khách hàng 28 Hình 25:Biểu đồ hoạt động quản lí giỏ hàng 29 Hình 26:Biểu đồ hoạt động lọc sản phẩm 29 Hình 27:Biểu đồ hoạt đọng quản lí sản phẩm 30 Hình 28:Giao diện trang chủ 35 Hình 29:Giao diện trang chủ 35 Hình 30:Giao diện trang chủ 36 Hình 31:Giao diện sản phẩm 36 Hình 32:Giao diện chi tiết sản phẩm 37 Hình 33:Giao diện chi tiết sản phẩm 37 Hình 34:Giao diện chi tiết sản phẩm 38 Hình 35:Giao diện giỏ hàng 38 Hình 36:Giao diện toán 39 Hình 37:Giao diện thơng tin cá nhân 39 Hình 38:Giao diện đổi mật 40 Hình 39:Giao diện quản lí sản phẩm 40 Hình 40:Giao diện quản lí khách hàng 41 Hình 41:Giao diện quản trị tổng quan 41 DANH MỤC BẢNG Bảng 1: Bảng khách hàng 31 Bảng 2: Bảng dòng sản phẩm 32 Bảng 3: Bảng sản phẩm 32 Bảng 4:Nhóm sản phẩm 33 Bảng 5:Bảng giỏ hàng 33 Bảng 6:Bảng đơn hàng 33 Bảng 7:Bảng chi tiết đơn hàng 34 Bảng 8:Thơng tin tốn 34 Bảng 9:Phương thức toán 34 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ở 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 tồn giới tất mặt hàng 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 10 2.4.2 Biểu đồ hoạt động quản trị viên n 27:Biểu đồ oạt đọng quản lí sản p ẩm 30 2.5 Phân tích sở liệu 2.5.1 Sơ đồ quan hệ 2.5.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 31 - 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 IDNhomSanPham ID nhóm sản phẩm Varchar 10 Khóa ngoại 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 Bảng 3: Bảng sản phẩm 32 11 - 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 toán Varchar 20 TinhTrang Tình trạng Varchar 20 Bảng 6:Bảng đơn hàng 33 Khóa ngoại - 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 34 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ủ n 28:Giao diện trang c ủ n 29:Giao diện trang c ủ 35 n 30:Giao diện trang c ủ 3.1.2 Giao diện sản phẩm n 31:Giao diện sản p ẩm 36 3.1.3 Giao diện chi tiết sản phẩm n 32:Giao diện c i tiết sản p ẩm n 33:Giao diện c i tiết sản p ẩm 37 n 34:Giao diện c i tiết sản p ẩm 3.1.4 Giao diện giỏ hàng n 35:Giao diện giỏ 38 àng 3.1.5 Giao diện toán n 36:Giao diện t an toán 3.1.6 Giao diện thông tin cá nhân n 37:Giao diện t ông tin cá n ân 39 3.1.7 Giao diện đổi mật n 3.2 38:Giao diện đổi mật k ẩu Giao diện dành cho ngƣời quản trị 3.2.1 Giao diện quản lí sản phẩm n 39:Giao diện quản lí sản p ẩm 40 3.2.2 Giao diện quản lí khách hàng n 40:Giao diện quản lí k ác àng 3.2.3 Giao diện quản trị tổng quan n 41:Giao diện quản trị tổng quan 41 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 - Ngoà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 42 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 43 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 44 ... xây 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. .. 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,