Xây dựng website bán trang sức trực tuyến dựa trên nền tảng nodejs và reactjs

- ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ HUẾ ́ Ki nh tê ́H uê KHOA HỆ THỐNG THƠNG TIN KINH TẾ ̣c KHĨA LUẬN TỐT NGHIỆP ho XÂY DỰNG WEBSITE BÁN TRANG SỨC TRỰC TUYẾN Đ ại DỰA TRÊN NỀN TẢNG NODEJS VÀ REACTJS Tr ươ ̀ng Sinh viên thực hiện: HÀ THỊ MAI TRÂM Huế, 10/2021 - ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KINH TẾ HUẾ ́ Ki nh tê ́H uê KHOA HỆ THỐNG THƠNG TIN KINH TẾ ̣c KHĨA LUẬN TỐT NGHIỆP ho XÂY DỰNG WEBSITE BÁN TRANG SỨC TRỰC TUYẾN Giảng viên hướng dẫn: ThS Trần Thái Hòa Sinh viên thực hiện: Hà Thị Mai Trâm Mã sinh viên: 18K4081034 Lớp: K52 Tin học kinh tế Tr ươ ̀ng Đ ại DỰA TRÊN NỀN TẢNG NODEJS VÀ REACTJS Huế, 10/2021 - LỜI CẢM ƠN Để hồn thành khóa luận này, đúc kết, nghiên cứu em thời gian năm kiến tập học tập Trung tâm Công nghệ Thông tin Thừa Thiên Huế tháng thực tập công ty LEANO GROUP, đồng thời dựa kiến thức học trường Đại học Kinh Tế Huế suốt bốn năm vừa qua ́ uê Với lòng biết ơn chân thành, em xin gửi đến quý thầy cô giáo khoa Hệ ́H thống thông tin Kinh tế - Đại học Kinh tế Huế, với gia đình, bạn bè giúp đỡ động viên thời gian hoàn thành khóa luận tốt nghiệp tê Đặc biệt, em xin gửi lời cảm ơn đến thầy Trần Thái Hòa, người tận tình hướng dẫn, quan tâm, thường xuyên theo dõi, giải đáp thắc mắc đưa nh lời góp ý, nhận xét để em hồn thành khóa luận tốt nghiệp cách tốt Ki Đồng thời, em xin gửi lời cảm ơn đến Trung tâm Công nghệ Thông tin Thừa ̣c Thiên Huế công ty LEANO GROUP tạo điều kiện cho em thực tập, học hỏi ho công nghệ cần thiết để xây dựng đề tài hoàn chỉnh Vì kiến thức thân lực cịn hạn chế, q trình thực tập, hồn ại thiện khóa luận em khơng tránh khỏi sai sót, kính mong nhận ý kiến Đ đóng góp, bổ sung q thầy để em hoàn thiện đề tài tốt Sinh viên thực Tr ươ ̀ng Xin chân thành cảm ơn! Hà Thị Mai Trâm - MỤC LỤC MỤC LỤC .i DANH MỤC TỪ VIẾT TẮT vi DANH MỤC HÌNH ẢNH vii ́ uê PHẦN I: PHẦN MỞ ĐẦU ́H Lý chọn đề tài tê Mục tiêu nhiệm vụ nghiên cứu 2.1 Mục tiêu nh 2.2 Nhiệm vụ Ki Đối tượng phạm vi nghiên cứu Đối tượng nghiên cứu 3.2 Phạm vi nghiên cứu ho ̣c 3.1 Phương pháp nghiên cứu ại Bố cục khóa luận Đ PHẦN II: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ LUẬN VỀ XÂY DỰNG WEBSITE BÁN TRANG ̀ng SỨC TRỰC TUYẾN DỰA TRÊN NỀN TẢNG NODEJS VÀ REACTJS ươ 1.1 Tổng quan bán hàng trực tuyến Tr 1.2 Tổng quan quy trình xây dựng website bán hàng 11 1.3 Công cụ xây dựng trang web 12 CHƯƠNG 2: GIỚI THIỆU BÀI TOÁN XÂY DỰNG TRANG WEB BÁN TRANG SỨC TRỰC TUYẾN DỰA TRÊN NỀN TẢNG NODEJS VÀ REACTJS18 2.1 Thực trạng xã hội 18 2.2 Một số trang web bán trang sức trực tuyến 19 i - 2.3 Mơ tả tốn xây dựng trang web bán trang sức trực tuyến .20 2.4 Xác định chức tác nhân 21 2.5 Yêu cầu chung trang web 22 CHƯƠNG 3: PHÁT TRIỂN TRANG WEB BÁN TRANG SỨC TRỰC ́ uê TUYẾN DỰA TRÊN NỀN TẢNG NODEJS VÀ REACTJS 23 3.1 Phân tích hệ thống 23 ́H 3.2 Thiết kế hệ thống 44 tê PHẦN III: KẾT LUẬN 62 nh Kết đạt 62 Hạn chế đề tài 62 Ki Hướng phát triển đề tài 63 ̣c DANH MỤC THAM KHẢO .64 Tr ươ ̀ng Đ ại ho KIỂM TRA KẾT QUẢ ĐẠO VĂN 67 ii - DANH MỤC TỪ VIẾT TẮT Chữ viết tắt API Tiếng Anh Tiếng Việt Interface dụng CPU Central Processing Unit Đơn vị xử lý trung tâm DOM Document Object Model HTTP HTTPS HTML JSX MERN noSQL 10 ́ Giao diện lập trình ứng Protocol ́H Giao thức truyền tải siêu văn Protocol Secure Giao thức truyền tải siêu nh Hypertext Transfer văn bảo mật Ngôn ngữ đánh dấu siêu Language văn Ki Hypertext Markup Cú pháp mở rộng ngôn Markup Language ngữ Javascript ho ̣c Javascript Extensible MongoDB ExpressJs ại React NodeJs Query Language quan hệ RAM Random Access Memory Bộ nhớ truy cập ngẫu nhiên UI User Interface Giao diện người dùng Uniform Resource Định vị tài nguyên thống Locator (đường dẫn) Đ Ngôn ngữ truy vấn phi URL Tr 12 tài liệu Not only Structured ươ 11 Mơ hình đối tượng tê Hypertext Transfer Application Programming ̀ng STT vi - DANH MỤC HÌNH ẢNH Hình 1: Thanh tốn điện tử thẻ Hình 2: Thanh tốn qua ví điện tử Hình 3: Thanh tốn điện thoại thơng minh ́ uê Hình 4: Mơ hình phát triển MERN STACK 13 Hình 5: Visual Studio Code editor 17 ́H Hình 6: Quy trình tốn nút Paypal 18 Hình 1: Biểu đồ gói trang web 24 tê Hình 2: Biểu đồ Usecase tổng quát 25 nh Hình 3: Biểu đồ Usecase Quản lý hệ thống 26 Hình 4: Sơ đồ Usecase Quản lý đơn hàng 27 Ki Hình 5: Biểu đồ Usecase Quản lý nhân viên 28 Hình 6: Biểu đồ Usecase Quản lý danh mục 29 ̣c Hình 7: Biểu đồ Quản lý danh mục 30 ho Hình 8: Biểu đồ Usecase Thống kê 31 Hình 9: Biểu đồ đăng nhập 32 ại Hình 10: Biểu đồ đăng ký 33 Đ Hình 11: Biểu đồ tìm kiếm sản phẩm 35 Hình 12: Biểu đồ thêm sản phẩm vào giỏ hàng 36 ̀ng Hình 13: Biểu đồ toán 37 ươ Hình 14: Biểu đồ cập nhật đơn hàng 39 Hình 15: Biểu đồ thống kê 40 Hình 16: Biểu đồ thêm sản phẩm 41 Tr Hình 17: Biểu đồ sửa sản phẩm 42 Hình 18: Biểu đồ xóa sản phẩm 43 Hình 19: Cơ sở liệu trang web 45 Hình 20: Giao diện 49 Hình 21: Giao diện đăng ký 50 Hình 22: Giao diện đăng nhập 51 vii - Hình 23: Giao diện quản lý đơn hàng 52 Hình 24: Giao diện quản lý sản phẩm 53 Hình 25: Giao diện quản lý mẫu mã 53 Hình 26: Giao diện quản lý nhân viên 54 Hình 27: Giao diện quản lý thống kê 55 ́ uê Hình 28: Giao diện trang sản phẩm 56 Hình 29: Giao diện trang chi tiết sản phẩm 57 ́H Hình 30: Giao diện trang khách hàng 58 tê Hình 31: Giao diện trang giỏ hàng 58 Hình 32: Giao diện đăng nhập Paypal 59 nh Hình 33: Giao diện yêu cầu chấp nhận toán 60 Hình 34: Giao diện xác nhận tốn 61 Tr ươ ̀ng Đ ại ho ̣c Ki Hình 35: Giao diện email xác nhận toán 61 viii - DANH MỤC BẢNG BIỂU Bảng 1: Các tác nhân Hệ thống 24 Bảng 2: Bảng mô tả chức Đăng nhập 32 Bảng 3: Bảng mô tả chức Đăng ký 34 Bảng 4: Bảng mô tả chức Tìm kiếm sản phẩm 35 ́ uê Bảng 5: Bảng mô tả chức Thêm sản phẩm vào giỏ hàng 36 ́H Bảng 6: Bảng mô tả chức Thanh toán 37 Bảng 7: Bảng mô tả chức Cập nhật đơn hàng 39 tê Bảng 8: Bảng mô tả chức Thống kê 40 Bảng 9: Bảng mô tả chức Thêm sản phẩm 41 nh Bảng 10: Bảng mô tả chức Sửa sản phẩm 42 Bảng 11: Bảng mô tả chức Xóa sản phẩm 43 Ki Bảng 12: Collection Categories 45 ̣c Bảng 13: Collection Employee 46 ho Bảng 14: Collectiion Products 46 Bảng 15: Collection Order 47 ại Bảng 16: Collection Customer 47 Tr ươ ̀ng Đ Bảng 17: Collection Review 48 ix - PHẦN I: PHẦN MỞ ĐẦU Lý chọn đề tài Trong năm gần đây, nhu cầu làm đẹp người ngày tăng cao, trang sức kèm làm bật đẳng cấp thân nên ́ uê nhiều người ưa chuộng, kinh doanh trang sức hội vô tiềm cho bạn trẻ để khởi nghiệp, làm giàu Kinh doanh mặt hàng phù hợp với ́H lứa tuổi nguồn vốn bỏ nhẹ nhàng, mẫu mã mặt hàng đa dạng đặc tê biệt dễ bán Tuy dễ bán thành công lựa chọn khởi nghiệp với mặt hàng nh Nhu cầu làm đẹp bật thân trở thành điều tất yếu, mà phụ kiện trang sức mặt hàng có sức hút lớn Thời trang ngày Ki phát triển, người biết cách chọn trang phục phù hợp đồng thời kết hợp tinh tế với phụ kiện trang sức làm họ bật lên đẳng cấp Trang sức phục ho ̣c vụ đối tượng khách hàng đặc biệt nguồn cung ứng hàng hóa đa dạng, dồi thoải mái lựa chọn Bên cạnh đó, trang sức khơng cần chiếm nhiều diện tích để trưng bày chứa hàng, dễ dàng chụp hình sản phẩm ại Ai muốn cho mang vẻ đẹp riêng cá tính riêng Do cửa hàng Đ bán trang sức trực tuyến nhận thấy hội tiềm để phát triển ̀ng mạnh với mang đến cho người đồ trang sức đẹp độc lạ Việc mua hàng sàn thương mại điện tử ngày phổ biến, gần ươ gũi với người tiêu dùng nên việc mở website bán hàng trang sức điều kiện phù hợp tiếp cận nhiều khách hàng tiềm đặc biệt giới trẻ, bắt kịp xu hướng Tr thời trang theo thời đại theo phong cách Cửa hàng ln tìm độc lạ, hiểu khách hàng để phục vụ tốt Qua khảo sát thực tế Huế tỉnh thành khác xuất nhiều tiệm trang sức bán hàng trực tiếp, hình thức mua bán truyền thống Khách hàng nhắm tới người yêu thích thời trang, đẹp, mà thành phần nhiều học sinh, sinh viên, người trẻ tuổi Do đó, để tận dụng hết tiện ích mà thương mại điện tử mang lại, tiếp xúc với hình thức mua bán trực ́ nh tê ́H uê - Ki Hình 24: Giao diện quản lý sản phẩm Giao diện quản lý mẫu mã ho ̣c - Điều kiện kích hoạt: Đăng nhập Hình 25: Giao diện quản lý mẫu mã Tr ươ ̀ng Đ ại - Trang dùng để thêm sửa xóa mẫu mã sản phẩm 53 - Giao diện quản lý nhân viên - Điều kiện kích hoạt: Đăng nhập ́ ̣c Ki nh tê ́H uê - Trang dùng để thêm sửa xóa nhân viên Giao diện thống kê ho Hình 26: Giao diện quản lý nhân viên ại - Điều kiện kích hoạt: Đăng nhập Đ - Quản lý chọn khoảng thời gian thống kê mẫu mã thống kê để thống Tr ươ ̀ng kê sản phẩm bán chạy doanh thu 54 ́ ho ̣c Ki nh tê ́H uê - Hình 27: Giao diện quản lý thống kê ại Giao diện trang sản phẩm Đ - Điều kiện kích hoạt: Chọn vào Shop phần header Tr ươ ̀ng - Trang hiển thị sản phẩm để khách hàng lựa chọn 55 ́ ươ ̀ng Đ ại ho ̣c Ki nh tê ́H uê - Hình 28: Giao diện trang sản phẩm Tr Giao diện trang chi tiết sản phẩm - Điều kiện kích hoạt: Chọn vào sản phẩm trang Shop - Trang hiển thị chi tiết sản phẩm đánh giá sản phẩm 56 ́ Đ ại ho ̣c Ki nh tê ́H uê - ̀ng Hình 29: Giao diện trang chi tiết sản phẩm Giao diện trang khách hàng ươ - Điều kiện kích hoạt: Đăng nhập - Khách hàng cập nhật thông tin, đổi mật theo dõi đơn hàng Tr trang 57 ́ nh tê ́H uê - ̣c Giao diện trang giỏ hàng Ki Hình 30: Giao diện trang khách hàng ho - Điều kiện kích hoạt: Đã thêm sản phẩm vào giỏ hàng đăng nhập Tr ươ ̀ng Đ ại - Trang hiển thị sản phẩm mà khách hàng muốn mua Hình 31: Giao diện trang giỏ hàng 58 - Giao diện đăng nhập Paypal - Điều kiện kích hoat: Chọn vào nút Paypal ́ ươ ̀ng Đ ại ho ̣c Ki nh tê ́H uê - Trang dùng để đăng nhập vào tài khoản Paypal Hình 32: Giao diện đăng nhập Paypal Tr Giao diện yêu cầu chấp nhận toán - Điều kiện kích hoạt: Đăng nhập vào trang Paypal - Sau đăng nhập vào khách hàng nhấn Paynow để toán 59 ́ ̀ng Đ ại ho ̣c Ki nh tê ́H uê - ươ Hình 33: Giao diện yêu cầu chấp nhận toán Tr Giao diện xác nhận toán 60 ́ tê ́H uê - nh Hình 34: Giao diện xác nhận tốn Ki - Điều kiện kích hoạt: Thanh tốn thành cơng - Sau tốn thành cơng trang hiển thị ho ̣c Giao diện email xác nhận toán Tr ươ ̀ng Đ ại - Điều kiện kích hoạt: Thanh tốn thành cơng Hình 35: Giao diện email xác nhận tốn 61 - PHẦN III: KẾT LUẬN Kết đạt Qua q trình tìm tịi, nghiên cứu để xây dựng trang web bán trang sức trực tuyến học thêm nhiều kiến thức quan trọng như: ́ - Biết tích hợp cổng tốn điện tử vào trang web - Cách đưa trang web lên địa thực tê - Học cách triển khai từ ý tưởng đến thực tiễn ́H - Học sở liệu hoàn toàn so với sở liệu truyền thống - Nắm vững kiến thức công cụ sử dụng trình nh phát triển - Cách thiết kế viết mã cho nội dung email web bán hàng trực tuyến như: Ki - Về sản phẩm, trang web đáp ứng đủ chức trang ̣c  Thanh toán cổng toán điện tử Paypal ho  Gửi mail xác nhận đơn hàng  Thống kê sản phẩm bán chạy theo mẫu mã ại  Khách hàng đánh giá sau mua hàng Đ  Cập nhật tình trạng đơn hàng số chức khác ̀ng Hạn chế đề tài Ngoài kết đạt được, đề tài cịn có hạn chế sau: ươ - Chưa sử dụng biểu đồ để trực quan hóa thống kê - Chưa tích hợp thư viện để hạn chế số lượng yêu cầu (Request) lấy liệu từ Tr phía khách hàng, phương thức để bảo vệ trang web khỏi kẻ công mạng Hậu bị công vô nghiêm trọng - Chưa thống kê số lượng hàng hóa tồn kho để biết nhập hàng - Chưa thống kê doanh số theo khách hàng để có chương trình ưu đãi, tặng q khách hàng thân thiết 62 - Hướng phát triển đề tài Trong trình nghiên cứu, trang web đáp ứng đầy đủ chức trang bán hàng trực truyến Tuy nhiên, hạn chế kiến thức chuyên môn thời gian thực nên để so sánh với trang bán hàng tiếng ́H - Tích hợp thêm nhiều hình thức tốn trực tuyến khác uê - Tích hợp phương thức bảo mật chặt chẽ để bảo vệ trang web ́ nay, có số đề xuất ý tưởng phát triển như: - Hỗ trợ đăng nhập Google, Facebook tê - Hỗ trợ đa ngơn ngữ để tiếp cận với nhiều phân khúc khách hàng - Thêm số chức để hỗ trợ cho việc bán hàng như: nh  Chức để hỗ trợ khách hàng trả giá sản phẩm đưa mức giá hợp lý cho người bán lẫn khách hàng khách hàng việc mua hàng Ki  Tích hợp Chatbot để tự động trả lời câu hỏi bản, hỗ trợ ho ̣c  Sử dụng trí tuệ nhân tạo để đề xuất sản phẩm liên quan người Tr ươ ̀ng Đ ại dùng xem chi tiết sản phẩm 63 - DANH MỤC THAM KHẢO [1] “Bán hàng trực tuyến gì? bán hàng trực tuyến kinh doanh nhà hàng,” NowPOS https://www.nowpos.vn/bai-viet/ban-hang-truc-tuyen-la-gi (accessed Dec 16, 2021) ́ “Thanh toán điện tử hình thức tốn điện tử phổ biến uê [2] nay,” Hóa đơn điện tử https://einvoice.vn/tin-tuc/thanh-toan-dien-tu (accessed Dương L sư N V., “Quy định pháp luật kinh doanh online trực tê [3] ́H May 25, 2020) tuyến,” Luật Dương Gia, Feb 08, 2021 https://luatduonggia.vn/quy-dinh-ve-kinh- [4] nh doanh-tren-mang-truc-tuyen/ (accessed Feb 23, 2022) “Quy định bán hàng online - HAS IT Solutions.” Ki https://www.haiausolution.com/tin-tuc/quy-dinh-ve-ban-hang-online-32.html “Khơng bán online hàng hóa nào ?,” Việt Luật - ho [5] ̣c (accessed Feb 23, 2022) Chun Thành lập cơng ty & Đầu tư nước ngồi, Oct 25, 2021 [6] Đ Feb 23, 2022) ại https://vietluat.vn/khong-duoc-ban-online-doi-voi-nhung-hang-hoa-nao.html (accessed “3 loại thuế phải nộp bán hàng online,” Phần mềm Hóa đơn điện tử ̀ng EasyInvoice, Jun 02, 2021 https://easyinvoice.vn/3-loai-thue-phai-nop/ (accessed ươ Feb 23, 2022) [7] “Cổng dịch vụ công Bộ Công Thương.” Tr https://dichvucong.moit.gov.vn/TTHCOnlineDetail.aspx?DocId=116 (accessed Feb 23, 2022) [8] “mern stack - Google Tìm kiếm.” https://www.google.com/search?q=mern+stack+l%C3%A0+g%C3%AC&sxsrf=AOae mvJ_5xw8CiLKZTu91cEP8R5PY5P9yA:1640099510931&source=lnms&tbm=isch& sa=X&ved=2ahUKEwigz_rllvX0AhXX73MBHV2gCSAQ_AUoAXoECAIQAw&csh 64 - id=1640099687930745&biw=1366&bih=625&dpr=1#imgrc=OA4MBQ2BtYONCM (accessed Dec 21, 2021) [9] “NoSQL gì? | Cơ sở liệu phi quan hệ, Mơ hình liệu sơ đồ linh hoạt | AWS,” Amazon Web Services, Inc https://aws.amazon.com/vi/nosql/ (accessed ́ [10] uê Dec 21, 2021) “Bắt đầu với NoSQL MongoDB,” Viblo, Mar 22, 2020 ́H https://viblo.asia/p/bat-dau-voi-nosql-va-mongodb-jvEla00zZkw (accessed Dec 21, 2021) “Tổng quan NodeJS - Một số điểm khác biệt với PHP,” Viblo, Oct tê [11] nh 15, 2020 https://viblo.asia/p/tong-quan-ve-nodejs-mot-so-diem-khac-biet-voi-php1Je5E9945nL (accessed Dec 21, 2021) “ReactJS gì? Những điều bạn chưa biết ReactJS,” 200Lab Ki [12] “ReactJS gì? Những điều cần biết ReactJSC,” Viblo, Sep 25, 2019 ho [13] ̣c Blog, Jul 02, 2021 https://200lab.io/blog/reactjs-la-gi/ (accessed Dec 21, 2021) https://viblo.asia/p/reactjs-la-gi-nhung-dieu-can-biet-ve-reactjsc-djeZ1GJo5Wz T Blog, “Expressjs gì? Tất tần tật khái niệm Express.js,” TopDev, Đ [14] ại (accessed Dec 21, 2021) Dec 14, 2017 https://topdev.vn/blog/express-js-la-gi/ (accessed Dec 21, 2021) Cường Q C., “Visual Studio Code gì? Tính bật Visual ̀ng [15] ươ Studio Code,” Technology Diver, Mar 22, 2020 https://cuongquach.com/visualstudio-code-la-gi.html (accessed Dec 22, 2021) Động C ty C phần T G D., “PayPal gì? Cách tạo thiết lập tài Tr [16] khoản PayPal nhanh chóng,” dienmayxanh.com, Jul 22, 2019 http://www.dienmayxanh.com/kinh-nghiem-hay/paypal-la-gi-cach-tao-va-thiet-lap-taikhoan-paypa-1179841 (accessed Dec 22, 2021) [17] CodeWebDao.Com, “Hướng dẫn tích hợp PayPal Express Checkout vào website | CodeWebDao.Com,” Code Web Dạo - CodeWebDao.Com 65 - https://codewebdao.com/huong-dan-tich-hop-paypal-express-checkout-vaowebsite.348.html (accessed Dec 22, 2021) [18] “Uml Là Gì? Giới Thiệu Về Ngơn Ngữ UML Các Biểu đồ Của Nó.” https://tapchithethao.com/uml-la-gi/ (accessed Dec 24, 2021) ́ “Use case gì? - phan mem case.” uê [19] https://sites.google.com/site/phanmemcase/home/use-case-la-gi (accessed Dec 23, “Sơ Đồ Tuần Tự 01 - Biểu Đồ Tuần Tự ( Sequence Diagram) - l2r.vn.” https://l2r.vn/so-do-tuan-tu/ (accessed Dec 24, 2021) “Rules of Thumb for MongoDB Schema Design · Keon’s Blog.” nh [21] tê [20] ́H 2021) Tr ươ ̀ng Đ ại ho ̣c Ki https://keon.github.io/mongodb-schema-design/ (accessed Feb 27, 2022) 66 - ́ Tr ươ ̀ng Đ ại ho ̣c Ki nh tê ́H uê KIỂM TRA KẾT QUẢ ĐẠO VĂN 67