Thông tin tài liệu
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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 tún hỡ trơ viêc ban hang qua mang 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ó rấế́t 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 quyếế́t đị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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 q 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 tấế́m lòng biếế́t ơn sâu sắc cảm ơn cô Nguyễn Vân Anh trực tiếế́p hướng dẫn, đóng góp ý kiếế́n, giúp đỡ chúng em hoà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 rấế́t mong nhận thơng cảm đóng góp ý kiếế́n thầy để chúng em hoà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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat MỤC LỤC CHƯƠNG CƠ SỞ LÝ LUẬN Lý chọn đề tài ? 1.1 Các công nghệ sử dụng website 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-B 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ử 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 1.2.4 Thanh toán điện tử CHƯƠNG 2: THỰC TRẠNG 2.1 Thực trạng thương mại điện tử Việt Nam 2.2 Đánh giá thực trạng 2.3 Ưu nhược điểm đề tài 2.3.1 Ưu điểm 2.3.2 Nhược điểm CHƯƠNG 3.GIẢI PHÁP 3.1 Đặc tả chức 3.1.1 Đối với người truy cập website 3.1.2 Đối với người quản trị 3.2 Use Case TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat Website thương mại điện tử NBSTORE SVTH: Phùng Duy Long 67 GVHD: Hoàng Lan Phương TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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: Hoàng Lan Phương TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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, tốn đơn hàng nhiều phương thức toá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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat 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 TIEU LUAN MOI download : skknchat123@gmail.com moi nhat ... 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... toán.Từ vấế́n đề đặt trên, đồng ý hướng dẫn tận tình thầy cơ, em chọn đề tài: “THIẾT KẾ WEBSITE BÁN HÀNG NB STORE? ?? Với mong muốn đề tài đưa vào ứng dụng cho cửa hàng điện tử NBSTORE, yậy em cố... skknchat123@gmail.com moi nhat Website thương mại điện tử NBSTORE CHƯƠNG CƠ SỞ LÝ LUẬN Lý chọn đề tài ? - Ngày nay, công nghệ thông tin không ngừng phát triển cách mạnh mẽ đại Các ứng dụng công nghệ thông tin ngày
Ngày đăng: 30/10/2022, 17:37
Xem thêm:
