Đề Tài THIẾT KẾ WEBSITE BÁN HÀNG NB STORE

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN  LUẬN VĂN TỐT NGHIỆP (CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN) Đề Tài: THIẾT KẾ WEBSITE BÁN HÀNG NB STORE Giáo viên hướng dẫn : Sinh viên thực : Phùng Duy Long Mã sinh viên : 181161102 Lớp : UD23.13 Hà Nội - 2022 TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP Thiết kế website bán sản phẩm công nghệ Sinh viên thực hiện: Phùng Duy Long Ngành: Công nghệ thông tin Lớp: UD23.13 Hà Nội - Năm 2022 LỜI NÓI ĐẦU Ngày với phát triển mạnh mẽ nhanh chóng lĩnh vực cơng nghệ thông tin ứng dụng ngành nghề, lĩnh vực Từ việc đọc tin tức, nghe nhạc, giải trí hay học tập, thương mại điện tử Cơng nghệ thông tin phát triển không ngừng, việc phát triển website để quảng bá công ty hay website cá nhân khơng cịn xa lạ Trong mợt trang web trực tuyến hỗ trợ việc bán hàng qua mạng hiện rất phổ biến thiếu cửa hàng, giúp cho khách hàng mua cần mà khơng cần phải tốn nhiều thời gian Hiện có nhiều cơng nghệ sử dụng để phát triển website (PHP, ASP, ASP.NET, JSP ) Trong cơng nghệ ReactJS Laravel lựa chọn phù hợp để phát triển trang web tốc độ xử lý nhanh hiệu cao ReactJS mang lại Xuất phát từ nhu cầu thực tế nên chúng em định chọn đề tài “xây dựng website thương mại điện tử” với ngôn ngữ ReactJS Laravel, nhằm xây dựng website bán hàng trực tuyến hiệu cao tiện ích cho người dùng Sinh viên thực đề tài : Phùng Duy Long MSV: 18116102 Điện Thoại: 0928735115 Email: lonhphunh@gmail.com LỜI CẢM ƠN Em xin chân thành cảm ơn quý thầy cô khoa Công Nghệ Thông Tin trường Đại học Kinh Doanh Cơng Nghệ, để hồn thành đồ án tốt nghiệp kết tảng từ kiến thức giảng dạy tận tình quý thầy cô, trang bị cho chúng em kiến thức quý báu vận dụng kiến thức học vào công việc trường Đặc biệt với lòng biết ơn sâu sắc cảm ơn Nguyễn Vân Anh trực tiếp hướng dẫn, đóng góp ý kiến, giúp đỡ chúng em hồn thành đồ án tốt nghiệp Mặc dù cố gắng nổ lực thực đồ án với kiến thức thời gian có hạn, hẳn đồ án khơng tránh khỏi sai sót Em mong nhận thơng cảm đóng góp ý kiến thầy để chúng em hồn thiện tốt cho sau Em xin chân thành cám ơn ! Hà Nội, tháng năm 2022 Sinh viên thực Phùng Duy Long NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Hà Nội, ngày tháng năm 2022 Giáo viên hướng dẫn NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Hà Nội, Ngày …… Tháng…… Năm 2022 Giáo viên phản biện NHẬN XÉT CỦA HỘI ĐỒNG BẢO VỆ ĐỒ ÁN TỐT NGHIỆP Hà Nội, Ngày …… Tháng…… Năm 2022 Thư kí hội đồng Chủ tịch hội đồng MỤC LỤC CHƯƠNG CƠ SỞ LÝ LUẬN Lý chọn đề tài ? .1 1.1 Các công nghệ sử dụng website .2 1.1.1 Laravel Framework 1.1.2 Mơ hình MVC 1.1.3 Công Nghệ ReactJS 1.1.4 Tổng quan Web API 1.1.5 Framework React-Bootstrap .7 1.1.6 Tổng quan Material UI 1.2 Thương mại điện tử 1.2.1 Tổng quan thương mại điện tử .9 1.2.2 Lợi ích chung thương mại điện tử 1.2.3 Các loại hình ứng dụng 10 1.2.4 Thanh toán điện tử 11 CHƯƠNG 2: THỰC TRẠNG 12 2.1 Thực trạng thương mại điện tử Việt Nam .12 2.2 Đánh giá thực trạng 15 2.3 Ưu nhược điểm đề tài .15 2.3.1 Ưu điểm 15 2.3.2 Nhược điểm 16 CHƯƠNG 3.GIẢI PHÁP 11 3.1 Đặc tả chức 11 3.1.1 Đối với người truy cập website 11 3.1.2 Đối với người quản trị 13 3.2 Use Case 14 3.2.1 Xác định tác nhân hệ thống .14 3.2.2 Xác định Use Case khách hàng tổng quát 16 3.2.3 Xác định Use Case Admin tổng quát 17 3.3 Cơ sở liệu 17 3.3.1 Danh mục bảng 17 3.3.2 Mô hình sở liệu 25 3.4 Cấu trúc thư mục đồ án 25 3.4.1 Cấu trúc thư mục Back-end Front-end 25 3.5 Giao diện website khách hàng 26 3.5.1 Giao diện trang chủ website khách hàng 26 3.5.2 Giao diện đăng ký 27 3.5.3 Giao diện đăng nhập 29 3.5.4 Giao diện quên mật 29 3.5.5 Giao diện mail khôi phục mật 31 3.5.6 Giao diện khôi phục mật 31 3.5.7 Giao diện tìm kiếm sản phẩm tự động 32 3.5.8 Giao diện trang kết tìm kiếm .34 3.5.9 Giao diện chi tiết sản phẩm 35 3.5.10 Giao diện giỏ hàng 36 3.5.11 Giao diện toán Momo .37 3.5.12 Giao diện toán Paypal .38 3.5.13 Giao diện toán Vnpay .40 3.5.14 Giao diện chi tiết đơn hàng 41 3.5.15 Giao diện xây dựng cấu hình 42 3.5.16 Giao diện tất đơn hàng chưa toán .44 3.5.17 Giao diện tất đơn hành toán 44 3.5.18 Giao diện tất đơn hàng hoàn thành 45 3.5.19 Giao diện tất đơn hàng hủy .45 3.5.20 Giao diện thông tin tài khoản 46 3.5.21 Giao diện thay đổi mật 47 3.5.22 Giao diện hướng dẫn toán 47 3.6 Giao diện trang quản trị 49 3.6.1 Giao diện trang chủ 49 3.6.2 Giao diện trang quản lý sản phẩm 52 3.6.3 Giao diện trang thêm sản phẩm 53 3.6.4 Giao diện thêm cấu hình sản phẩm 55 3.6.5 Giao diện trang thêm ảnh cho sản phẩm 57 3.5.6 Giao diện trang sửa sản phẩm 57 3.6.7 Giao diện trang quản lý loại sản phẩm .59 3.6.8 Giao diện trang thêm loại sản phẩm 60 3.6.9 Giao diện sửa loại sản phẩm 61 3.6.10 Giao diện quản lý đơn hàng .62 3.6.11 Giao diện chi tiết đơn hàng 63 3.6.12 Giao diện quản lý người dùng 63 3.6.13 Giao diện thêm người dùng 65 3.6.14 Giao diện cập nhật người dùng 65 3.6.15 Giao diện quản lý slide .68 CHƯƠNG 4: KẾT LUẬN 71 4.1 Kết đạt 71 4.2 Phần hạn chế cùa đề tài 71 4.3 Hướng phát triển 72 TÀI LIỆU THAM KHẢO 67 Website thương mại điện tử NBSTORE [1]: Thêm loại sản phẩm [2]: Khung tìm kiếm sản phẩm [3]: Thơng tin loại sản phẩm [4]: Tác vụ xóa, sửa sản phẩm [5]:Thùng rác loại sản phẩm 3.6.8 Giao diện trang thêm loại sản phẩm Sau chọn thêm loại sản phẩm hệ thống chuyển đến trang thêm loại sản phẩm Những thông tin yêu cầu như: tên loại, icon danh mục, loại sản phẩm thuộc loại (cho biết loại sản phẩm loại cha hay thuộc loại khác) Hình 3.3.8 Giao diện trang thêm loại sản phẩm Chú thích: [1]: Vùng nhập thơng tin loại sản phẩm [2]: Chọn loại sản phẩm thuộc loại [3]: Nút thêm loại sản phẩm SVTH: Phùng Duy Long 58 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 3.6.9 Giao diện sửa loại sản phẩm Sau chọn sản phẩm cần sửa hệ thống chuyển hướng đến trang sửa loại sản phẩm Hình 3.3 Gioa diện sửa loại sản phẩm Hình 3.3.9 Giao diện popup thêm cấu hình Chú thích: [1]: Nút thêm cấu hình [2]: Nút thêm cấu hình (CPU, RAM, …) SVTH: Phùng Duy Long 59 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE [3]: Chọn thuộc loại [4]: Nút cập nhật loại sản phẩm [5]: Nút thêm cấu hình vào loại sản phẩm [6]: Loại bỏ cấu hình loại sản phẩm [7]: Ơ nhập cấu hình [8]: Nút thêm cấu hình 3.6.10 Giao diện quản lý đơn hàng Quản lý tất đơn hàng khách hàng đổi trạng thái đơn hàng khách hàng nhận hàng thành công Hình 3.3.10 Giao diện quản lý đơn hàng Chú thích: [1]: Bộ lọc đơn hàng [2]: Khung tìm kiếm đơn hàng [3]: Thông tin đơn hàng [4]: Xem chi tiết đơn hàng SVTH: Phùng Duy Long 60 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 3.6.11 Giao diện chi tiết đơn hàng Sau chọn đơn hàng cần xem hệ thống chuyển đến chi tiết đơn hàng Hình 3.3.11 Giao diện chi tiết đơn hàng Chú thích: [1]: Thơng tin đơn hàng [2]: Nút hoàn thành đơn hàng (Khi khách hàng nhận hàng thành công) [3]: Số lượng sản phẩm đơn hàng 3.6.12 Giao diện quản lý người dùng Quản lý người dùng người quản trị thêm người dùng mới, xem chi tiết tài khoản người dùng, khóa tài khoản người dùng SVTH: Phùng Duy Long 61 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 3.3.12 Giao diện quản lý người dùng Chú thích: [1]: Nút thêm tài khoản [2]: Khung tìm kiếm người dùng [3]: Xem thông tin tài khoản SVTH: Phùng Duy Long 62 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 3.6.13 Giao diện thêm người dùng Hình 3.3.13 Giao diện thêm người dùng (1) Hình 3.3.13.1 Giao diện thêm người dùng (2) Chú thích: [1]: Vùng nhập thông tin người dùng [2]: Chọn loại người dùng (admin người dùng) [3]: Tiến hành thêm quay lại trang quản lý người dùng 3.6.14 Giao diện cập nhật người dùng SVTH: Phùng Duy Long 63 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 3.3.14 Giao diện cập nhật người dùng (1) SVTH: Phùng Duy Long 64 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 3.3.14.1 Giao diện cập nhật người dùng (2) Sau người quản trị chọn tài khoản cần cập nhật, hệ thống chuyển hướng đến trang cập nhật người dùng Ở đây, người quản trị cập nhật thông tin như: Tên người dùng, số điện thoại, địa chỉ, giới tính, mật Chú thích: [1]: Vùng sửa thông tin người dùng [2]: Chọn loại tài khoản [3]: Danh sách đơn hàng người dùng SVTH: Phùng Duy Long 65 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 3.6.15 Giao diện quản lý slide SVTH: Phùng Duy Long 66 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE SVTH: Phùng Duy Long 67 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 3.3.15 Giao diện quản lý slide Hình 3.3.15.1 Giao diện chọn ảnh slide SVTH: Phùng Duy Long 68 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 3.3.15 Giao diện popup xóa ảnh slide Người quản trị thêm ảnh slide trang người dùng Người quản trị lựa chọn nhiều ảnh tùy nhu cầu thao tác dễ dàng Chú thích: [1]: Nút thêm slide [2]: Danh sách ảnh slide [3]: Nút xem ảnh slide [4]: Tiêu đề ảnh [5]: Nút t chọn ảnh từ máy người dùng [6]: Nút thêm ảnh [7]: Nút xóa ảnh SVTH: Phùng Duy Long 69 GVHD: Hồng Lan Phương Chương Tổng kết hướng phát triển Website thương mại điện tử NBSTORE CHƯƠNG 4: KẾT LUẬN 4.1 Kết đạt - Hệ thống website bán hàng trục tuyến sau thời gian bắt đầu làm đến hoàn thành chức cho người dùng:  Đối với người sử dụng webstite  Có thể thực chức xem hàng, mua hàng, bình luận sản phẩm, tìm kiếm sản phẩm nhanh, toán đơn hàng nhiều phương thức tốn trực tuyến Bên cạnh website sử dụng công ngệ (ReactJS)  Các chức tài khoản người dùng: đăng ký, đăng nhập, quên mật khẩu, đổi mật bảo mật cao bảo vệ tài khoản thông tin người dùng  Đối với người quản trị  Các tác vụ quản lý sản phẩm : Thêm, Xoá, Sửa  Quản lý slide phía front-end  Có thể thực chức quản lý đơn hàng cách dễ dàng  Quản lý thông tin người dùng  Quản lý nhập liệu, cập nhật thông tin liệu web  Quản lý thống kê, báo cáo doanh thu  Vận dụng tất kiến thức học trường kiến thức tìm hiểu vận dụng làm đồ án  Khả kết hợp kiến thứ học cơng nghệ tìm hiểu 4.2 Phần hạn chế cùa đề tài Do thời gian với kiến thức, kinh nghiệm giới hạn nên đồ án nhóm chúng em khơng tránh khỏi thiếu sót./’  SVTH: Phùng Duy Long 71 GVHD: Hoàng Lan Phương Chương Tổng kết hướng phát triển Website thương mại điện tử NBSTORE Đề tài hoàn thành chức bản, nhiên bên cạnh có số khuyết điểm :  Chưa tối ưu component  Chưa có hiệu ứng đẹp mắt  Chưa có trang tin tức 4.3 Hướng phát triển  Tích hợp thêm hệ thống chat người dùng nhân viên hệ thống  Sử dụng thêm hiệu ứng đẹp mắt  Tích hợp thêm trang tin tức, viết  Tối ưu component SVTH: Phùng Duy Long 72 GVHD: Hoàng Lan Phương Tài liệu tham khảo Website thương mại điện tử NBSTORE TÀI LIỆU THAM KHẢO  Giao diện:  React-Bootstrap: https://react-bootstrap.github.io  Material-UI: https://material-ui.com  Package: https://www.npmjs.com  Document:  Laravel: https://laravel.com  ReactJS: https://reactjs.org  Thanh toán trực tuyến  Momo: https://developers.momo.vn  Paypal: https://developer.paypal.com/docs/api/overview  Vnpay: https://sandbox.vnpayment.vn/apis SVTH: Phùng Duy Long 73 GVHD: Nguyễn Vân Anh