THIẾT KẾ & XÂY DỰNG WEBSITE KINH DOANH TRÒ CHƠI TRỰC TUYẾN (BÁO CÁO ĐỒ ÁN TỐT NGHIỆP)

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ 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 NGÀNH: CƠNG NGHỆ THƠNG TIN KHĨA HỌC: 2019-2022 ĐỀ TÀI: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Giảng viên hướng dẫn: Ts.NGUYỄN ĐỨC HIỂN Sinh viên thực hiện: HOÀNG VĂN ANH Lớp: 19I2 MSSV: 191C900124 Đà Nẵng, tháng năm 2021 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE KINH DOANH TRÒ CHƠI TRỰC TUYẾN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ 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 NGÀNH: CƠNG NGHỆ THƠNG TIN KHĨA HỌC: 2019-2022 ĐỀ TÀI: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN SINH VIÊN THỰC HIỆN: BÙI HOÀNG KHOA - 18I3 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Giảng viên hướng dẫn: Ts.NGUYỄN ĐỨC HIỂN Sinh viên thực hiện: HOÀNG VĂN ANH Lớp: 19I2 MSSV: 191C90012 SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 4MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học công nghệ, Công nghệ Thông tin ngành có vị dẫn đầu có vai trị lớn phát triển chung Các ứng dụng công nghệ thông tin áp dụng lĩnh vực nghiên cứu khoa học lĩnh vực đời sống Là phần Công nghệ Thơng tin, Cơng nghệ web có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Cùng với phát triển công nghệ thông tin, người phát minh nhiều sản phẩm công cụ, phần mềm hỗ trợ cho công việc kinh doanh cá nhân, doanh nghiệp Một sản phẩm công nghệ thông tin sử dụng cách rộng rãi qua mạng website bán sản phẩm trị mụn - Website bán sản phẩm trị mụn nơi quảng bá sản phẩm mà khách hàng cần khách hàng tìm kiếm, đặt sản phẩm trực tuyến qua mạng mà đến tận cửa hàng cách mua hàng truyền thống trước - Dựa vấn đề nhu cầu chăm sóc tốt làm da người bị mụn Cũng lợi ích mà sản phẩm trị mụn mang lại cho người dùng với ưu điểm vượt trội laravel nên em muốn xây dựng website bán sản phẩm trị mụn laravel Website giúp cho khách hàng tìm kiếm,tham khảo,đặt sản phẩm giúp người quản trị dễ dàng quản lý trình bán hàng ,dễ dàng cập nhật thay đổi để website mẻ,thu hút khách hàng đến với website.Với việc xây dựng website bán sản phẩm trị mụn laravel giúp em phần hiểu rõ laravel framework Nội dung đề tài gồm chương: Chương 1: Tổng quan công nghệ thiết kế Website Chương 2: Phân tích thiết kế hệ thống Website Chương 3: Thiết kế xây dựng Website LỜI CẢM ƠN Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới thầy cô giáo trường Đại học Công nghệ Thông tin Truyền thông Việt Hàn - Đại học Đà Nẵng nói chung thầy giáo khoa Khoa Học Máy Tính nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức, kinh nghiệm quý báu suốt thời gian hai năm học vừa qua Đặc biệt em xin gửi lời cảm ơn đến thầy NGUYỄN ĐỨC HIỂN tận tình giúp đỡ, trực tiếp bảo, huớng dẫn em suốt trình thực đồ án Trong thời gian học tập làm việc, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu quả, điều cần thiết cho em trình học tập công tác sau Sau xin gửi lời cảm ơn chân thành tới thầy cô, bạn bè động viên, đóng góp ý kiến giúp đỡ em q trình học tập, nghiên cứu hồn thành khố luận tốt nghiệp Một lần nữa, em xin chân thành cảm ơn! NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… …………………………………………… Đà Nẵng, ngày… tháng… năm 2021 GIẢNG VIÊN HƯỚNG DẪN NGUYỄN ĐỨC HIỂN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 1.1 Tìm hiểu ngơn ngữ lập trình 1.1.1 HTML 1.1.2 CSS 1.1.3 Ngơn ngữ lập trình PHP 1.1.4 Framework Laravel .6 1.1.5 Mơ hình MVC 1.2 Một số thư viện hỗ trợ 1.2.1 Thư viện Javascript .7 1.2.2 Thư viện Ajax .7 1.2.3 Thư viện BOOTSTRAP 1.2.4 Thư viện JQUERY 1.3 Cơ sở liệu MySQL 1.3.1 Khái niệm sở liệu MySQL 1.3.2 Các thành phần MySQL 10 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 11 2.1 Khảo sát đặc tả yêu cầu 11 2.1.1 Phần quản lý admin 11 2.1.2 Giao diện người dùng 11 2.2 Các yêu cầu phi chức 12 2.3 Phân tích thiết kế hệ thống 12 2.3.1 Các chức hệ thống 12 2.3.2 Các tác nhân hệ thống 13 2.4 Biểu đồ use case 15 2.4.1 Biểu đồ Use – case tổng quát .15 2.4.2 Use case đăng nhập .15 2.4.3 Use case quản lý sản phẩm 16 2.4.4 Use case quản lý đơn đặt .17 2.5 Biểu đồ 18 2.5.1 Biểu đồ quản lí sản phẩm 18 SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 2.5.2 Biểu đồ quản lý đơn đặt hàng 19 2.6 Biểu đồ, danh sách đối tượng .19 2.6.1 Biểu đồ lớp 19 2.6.2 Danh sách đối tượng 19 2.7 Thiết kế sở liệu 19 2.7.1 Danh sách bảng .19 2.7.2 Bảng hoadon .20 2.7.3 Bảng sanpham .20 2.7.4 Bảng hang 21 2.7.5 Bảng donghoadon .21 2.7.6 Bảng giohang 21 2.7.7 Bảng admin 21 2.7.8 Bảng user 22 CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE 23 3.1 Giao diện hiển thị .23 3.1.1 Giao diện trang chủ .23 3.1.2 Giao diện sản phẩm .24 3.1.3 Giao diện chi tiết sản phẩm 25 3.1.4 Giao diện toán 25 3.1.5 Giao diện giỏ hàng 26 3.1.6 Giao diện đăng nhập, đăng kí tài khoản 27 3.2 Giao diện quản trị 27 3.2.1 Giao diện admin 27 3.2.2 Giao diện quản lí sản phẩm 28 3.2.3 Giao diện quản lý đơn đặt hàng 29 3.2.4 Giao diện quản lý thêm sản phẩm 29 3.2.5 Giao diện quản lý User 30 3.2.6 Giao diện quản lý quản lí tài khoản admin 31 3.2.7 Giao diện quản lý thêm tài khoản admin .31 3.2.8 Giao diện đăng nhập admin 32 KẾT LUẬN 32 TÀI LIỆU THAM KHẢO .34 SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN DANH MỤC HÌNH ẢNH Hình - Biểu đồ Use case tổng quát 15 Hình - Biểu đồ Use case đăng nhập 15 Hình - Biểu đồ Use case quản lý sản phẩm .16 Hình - Biểu đồ Use case quản lý đơn đặt 17 Hình - Biểu đồ quản lí danh mục sản phẩm 18 Hình - Biểu đồ quản lí đơn hàng 19 Hình – Biểu đồ lớp 19 Hình – Giao diện banner quảng cáo trang chủ 23 Hình – Giao diện quảng cáo trang chủ .23 Hình 10 – Giao diện trang sản phẩm 24 Hình 11 – Giao diện sản phẩm .24 Hình 12 – Giao diện chi tiết sản phẩm .25 Hình 13 – Giao diện toán sản phẩm 25 Hình 14 – Giao diên giỏ hàng 26 Hình 15 - Giao diện đơn hàng 26 Hình 16 - Giao diện đăng đăng nhập 27 Hình 17 - Giao diện đăng kí tài khoản .27 Hình 18 - Giao diện trang admin .28 Hình 19 - Giao diện quản lí sản phẩm 28 Hình 20 - Giao diện quản lí đơn đặt hàng 29 Hình 21 - Giao diện quản lí thêm sản phẩm 29 Hình 22 - Giao diện quản lí thêm sản 30 Hình 23 - Giao diện quản lí tất người dùng 30 Hình 24 - Giao diện quản lí tài khoản admin .31 Hình 25 - Giao diện quản lí thêm tài khoản admin 31 Hình 26 - Giao diện đăng nhập admin .32 SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN DANH MỤC BẢNG BIỂU Bảng - Các yêu cầu phi chức ứng dụng 12 Bảng - Bảng chức Admin 13 Bảng - Bảng chức người dùng 14 Bảng - Danh sách đối tượng .20 Bảng - Danh sách bảng .21 Bảng – Bảng hoadon .21 Bảng - Bảng sản phẩm 22 Bảng - Bảng hang 22 Bảng - Bảng đonghoadon .22 Bảng 10 - Bảng giohang 22 Bảng 11 - Bảng admin .23 Bảng 12 - Bảng user 23 SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN User Đonhang Sanpham nghiệp vụ quản lý Admin Mơ tả thuộc tính phương thức liên quan tới nghiệp vụ quản lý danh sách thành viên Mơ tả thuộc tính phương thức liên quan tới nghiệp vụ quản lý danh sách đơn đặt sản phẩm Mơ tả thuộc tính phương thức liên quan tới quản lí sản phẩm Bảng - Danh sách đối tượng 2.7 Thiết kế sở liệu 2.7.1 Danh sách bảng STT Tên bảng Mô tả hoadon Lưu thông tin danh sách đơn hàng sanpham Lưu thông tin danh sách sản phẩm hang Lưu thông tin danh sách hãng Donghoadon Lưu thông tin danh sách chi tiết hóa đơn giohang Lưu thơng tin danh sách giỏ hàng admin Lưu thông tin danh sách admin users Lưu thông tin danh sách thành viên Bảng - Danh sách bảng 2.7.2 Bảng hoadon ID int(11) IDKH int(10) DiaChi SDT NgayTao Varchar(200) int(11) datatime Ràng buộc Khóa Khóa ngoại Not null Not null Not null TongTien int(11) Not null TinhTrang int(11) Not null PhuongThucThanhToan int(11) Not null STT Tên thực thể Kiểu liệu Mô tả Khóa bảng Khóa ngoại liên kết bảng chitietdattour Ngày đặt Id chi tiết đặt tour Id chi tiết đặt phòng Xác nhận nhiên viên liên hệ với khách hàng Xác nhận khách hàng chốt đơn đặt Xác nhận khách hàng toán Bảng - Bảng hoá đơn 2.7.3 Bảng sanpham STT Tên thực thể Kiểu liệu Ràng buộc SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 Mô tả 20 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN id int(10) 10 11 12 13 TenSanPham hang TrongLuong ThanhPhan CongDung Gia Lo NSX HSD TinhTrang Img XuatXu varchar(255) varchar(255) int(255) varchar(255) varchar(255) int(255) int(255) date date varchar(255) varchar(255) varchar(255) Khóa Not Null Not null Not Null Not null Not null Not null Not null Not null Not null Not null Not null Not null Khóa bảng Tên sản phẩm Hãng sản phẩm Trọng lượng sản phẩm Thành phần sản phẩm Công dụng sản phẩm Giá sản phẩm Lô sản phẩm Ngày sản xuất sản phẩm Hạn sử dụng sản phẩm Tình trạng sản phẩm Ảnh sản phẩm Xuất xứ sản phẩm Bảng - Bảng sản phẩm 2.7.4 Bảng hang STT Tên thực thể ID TenHang Kiểu liệu Ràng buộc int(10) varchar(255) Khóa Not null Mơ tả Khóa bảng Tên hãng Bảng 8- Bảng hãng 2.7.5 Bảng donghoadon STT Tên thực thể IDDongHoaDo n IDHoaDon IDSP SL Kiểu liệu int(11) int(11) int(10) int(11) Ràng buộc Khóa Mơ tả Khóa bảng Khóa phụ Id hóa đơn Khóa phụ Id sản phẩm Null Số lượng Bảng - Bảng donghoadon 2.7.6 Bảng giohang STT Tên thực thể IDGioHang Kiểu liệu int(11) Ràng buộc Khóa SINH VIÊN THỰC HIỆN: HỒNG VĂN ANH 19I2 Mơ tả Khóa bảng 21 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN IDSP int(10) IDKH SoLuong int(10) int(11) Khóa phụ Khóa phụ Id khách hàng Null Số lượng Bảng 10 - Bảng giỏ hàng 2.7.7 Bảng admin STT Tên thực thể Kiểu liệu ID int(10) Email_admin varchar(255) Passwordadmin Name-admin SDT-admin Img Created_at Update_at Id sản phẩm Ràng buộc Mơ tả Khóa Khóa bảng Địa email admin/Tài Not null khoản admin varchar(255) Not null Mật varchar(255) varchar(20) varchar(100) timestamp timestamp Not null Not null Not null Null Null Họ tên admin Số điện thoại liên lạc Đường dẫn hình ảnh admin Ngày tạo Ngày chỉnh sửa gần Bảng 11- Bảng admin 2.7.8 Bảng users STT Tên thực thể Kiểu liệu id int(10) name email emailverified-at Password Remembertoken Created-at Updated-at varchar(255) varchar(255) Ràng buộc Mơ tả Khóa Khóa bảng Not null Họ tên thành viên Not null email timestamp Null Xác minh email varchar(255) Not null Mật varchar(100) Null Ghi nhớ timestamp timestamp Null Null Ngày tạo Ngày chỉnh sửa gần Bảng 12 - Bảng users SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 22 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE 3.1 Giao diện hiển thị 3.1.1 Giao diện trang chủ Hình - Giao diện banner quảng cáo trang chủ Hình - Giao diện quảng cáo trang chủ SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 23 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Hình 10 - Giao diện trang sản phẩm 3.1.2 Giao diện sản phẩm Hình 11 - Giao diện sản phẩm SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 24 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 3.1.3 Giao diện chi tiết sản phẩm Hình 12 - Giao diện chi tiết sản phẩm 3.1.4 Giao diện tốn Hình 13 - Giao diện tốn sản phẩm SINH VIÊN THỰC HIỆN: HỒNG VĂN ANH 19I2 25 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 3.1.5 Giao diện giỏ hàng Hình 14 – Giao diện giỏ hàng Hình 15 Giao diện đơn hàng SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 26 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 3.1.6 Giao diện đăng nhập, đăng kí tài khoản Hình 16 Giao diện đăng nhập Hình 17 Giao diện đăng ký tài khoản 3.2 Giao diện quản trị 3.2.1 Giao diện admin SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 27 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Hình 18 Giao diện trang admin 3.2.2 Giao diện quản lí sản phẩm Hình 19 Giao diện quản lí sản phẩm SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 28 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 3.2.3 Giao diện quản lí đơn đặt hàng Hình 20 Giao diện quản lí đơn đặt hàng 3.2.4 Giao diện quản lí thêm sản phẩm Hình 21 Giao diện quản lí thêm sản phẩm SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 29 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Hình 22 Giao diện quản lí thêm sản phẩm 3.2.5 Giao diện quản lí User Hình 23.Giao diện quản lí tất người dùng 3.2.6 Giao diện quản lí admin SINH VIÊN THỰC HIỆN: HỒNG VĂN ANH 19I2 30 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Hình 24.Giao diện quản lí tài khoản admin 3.2.7 Giao diện thêm tài khoản admin Hình 25 Giao diên thêm tài khoản admin SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 31 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN 3.2.8 Giao diện đăng nhập admin Hình 26 Giao diện đăng nhập admin KẾT LUẬN Kết đạt đề tài Sau thời gian tập trung triển khai đề tài, em hoàn thành “Thiết kế & xây dựng website bán sản phẩm trị mụn” với giao diện đẹp, thao tác sử dụng dễ dàng, thân thiện với người dùng Sau hoàn thành xong được đề tài “Thiết kế & xây dựng website bán sản phẩm trị mụn”, em có thêm kỹ tảng để xây dựng website ngôn ngữ PHP MySQL, áp dụng kiến thức HTML, CSS Javascript học vào việc phát triển ứng dụng web Bên cạnh đó, em mở rộng thêm kiến thức chuyên ngành nhờ việc tìm hiểu số kiến thức lập trình để áp dụng vào việc phát triển ứng dụng Nhờ vậy, kỹ tự học vận dụng kỹ em nâng cao Khi thực hoàn thành dự án, em biết thêm nhiều kinh nghiệm quý giá xây dựng website nói riêng phát triển phần mềm nói chung Những kỹ tảng để giúp em nâng cao trình độ thân, kinh nghiệm thực tế để làm việc ngồi mơi trường doanh nghiệp sau Hạn chế đề tài Bên cạnh kết khả quan đạt được, em nhận thấy tồn số hạn chế: Tốc độ xử lý chưa cao, số lỗi phát sinh vận hành hệ thống SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 32 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN Hướng phát triển đề tài Sau hoàn thành đề tài xây dựng “Thiết kế & xây dựng website bán sản phẩm trị mụn”, em tiếp tục nghiên cứu phát triển website nhằm bổ sung thêm tính năng, sửa lỗi tối ưu hóa tốc độ xử lý để đem lại hiệu cao hơn, đưa website vào ứng dụng thực tế SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 33 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP: THIẾT KẾ & XÂY DỰNG WEBSITE BÁN SẢN PHẨM TRỊ MỤN TÀI LIỆU THAM KHẢO Tiếng Việt: https://somebymivn.com/ Tiếng Anh: [1] larvel.org [2] w3schools.com … SINH VIÊN THỰC HIỆN: HOÀNG VĂN ANH 19I2 34