TIỂU LUÂN CHUYÊN NGÀNH ̣ đề tài xây DỰNG và THIẾT kế hệ THỐNG cửa HÀNG bán LINH KIỆN điện tử sử DỤNG CÔNG NGHỆ MERN STACK

BÔ ̣GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUÂṬ TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣THÔNG TIN - - TIỂU LUÂṆ CHUYÊN NGÀNH Đề tài: XÂY DỰNG VÀÀ̀ THIẾT KẾ HỆ THỐNG CỬA HÀÀ̀NG BÁÁ́N LINH KIỆN ĐIỆN TỬ SỬ DỤ ̣NG CÔNG NGHỆ MERN STACK GVHD: Ths LÊ THỊ MINH CHÂU Sinh viên thực hiên: ̣ NGÔ VĂN HẢI 17110292 TRƯƠNG QUANG TỊNH 17110381 Lớp: 17110IS Khố: 2017-2021 Ngành: CƠNG NGHỆ THÔNG TIN TP.HCM, Thang – 2020 Báo cáo tiểu luận chuyên ngành BÔ ̣GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUÂṬ TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣THÔNG TIN - - TIỂU LUÂṆ CHUYÊN NGÀNH Đề tài: XÂY DỰNG VÀÀ̀ THIẾT KẾ HỆ THỐNG CỬA HÀÀ̀NG BÁÁ́N LINH KIỆN ĐIỆN TỬ SỬ DỤ ̣NG CÔNG NGHỆ MERN STACK GVHD: Ths LÊ THỊ MINH CHÂU Sinh viên thực hiên: ̣ NGÔ VĂN HẢI TRƯƠNG QUANG TỊNH Lớp: 17110IS Khố: 2017-2021 Ngành: CƠNG NGHỆ THÔNG TIN TP.HCM, Thang – 2020 Báo cáo tiểu luận chuyên ngành Xà HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự ̣ – Hạnh phúc ******* Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 PHIẾU NHẬN XÉT CỦA GIÁÁ́O VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Ngô Văn Hải MSSV: 17110292 Họ tên Sinh viên 2: Trương Quang Tịnh MSSV: 17110381 Ngành: Công nghệ Thông tin Chuyên ngành: Hệ thống thông tin Lớp: 17110IS Họ tên Giáo viên hướng dẫn: Th.S Lê Thị Minh Châu SĐT: 0902200557 Tên đề tài: XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG CỬA HÀNG BÁN LINH KIỆN ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ MERN STACK NHẬN XÉT: Về nội dung đề tài khối lượng thực hiên: ………………………………………………………………………………………… ………………………………………………………………………………………… ……………………………………………………………………………………… Ưu điểm: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Khuyết điểm: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 202 Báo cáo tiểu luận chuyên ngành Xà HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự ̣ – Hạnh phúc ******* Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 PHIẾU NHẬN XÉT CỦA GIÁÁ́O VIÊN PHẢN BIỆN MSSV: 17110292 Họ tên Sinh viên 1: Ngô Văn Hải MSSV: 17110381 Họ tên Sinh viên 2: Trương Quang Tịnh Lớp: 17110IS Ngành: Công nghệ Thông tin Chuyên ngành: Hệ thống thông tin Tên đề tài: XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG CỬA HÀNG BÁN LINH KIỆN ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ MERN STACK Họ tên Giáo viên phản biện: ………………………………………………………… NHẬN XÉT: Về nội dung đề tài khối lượng thực hiên: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Ưu điểm: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Khuyết điểm: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 202 Giáo viên phản biện (Ký & ghi rõ họ tên) Báo cáo tiểu luận chuyên ngành Báo cáo tiểu luận chuyên ngành LỜI CAM ƠN Nhóm em xin chân thành cảm ơn quí thầy cô giúp đỡ thực đề tài Đặc biệt Lê Thị Minh Châu tận tình hướng dẫn, giúp đỡ, bảo nhóm suốt thời gian thực tiểu luâṇ chuyên nganh Đồng thời nhóm xin trân trọng cảm ơn tình cảm q báu mà thầy cô trường Đai Học sư phạm kỹ thuâṭ TPHCM truyền đạạ̣t cho nhóm, kinh nghiệm, kỹỹ̃ thuật cách thức việc xây dựng đề tài Và cuối nhóm xin gửi lời cảm ơn đến người bạạ̣n gắn bóó́, đan anh, đan chị đa chia sẻ kinh nghiệm kiến thức thời gian thực đề tài, đểể̉ đề tài cóó́ thểể̉ hồn thành cách thành cơng Song, cịn nhiều hạạ̣n chế đề tài nhóó́m xây dựng khơng tránh khỏi thiếu sóó́t Rất mong thầy bạạ̣n đóó́ng góó́p ý kiến đểể̉ chương trình ngày hoàn thiện đưa vào sử dụng Chung em xin chân thành cảm ơn TP.HCM, ngày… tháng … năm … Sinh viên thực hiên Ngô Văn Hải Trương Quang Tịnh Báo cáo tiểu luận chuyên ngành MỤ ̣C LỤ ̣C LỜI NÓI ĐẦU CHƯƠNG 1: KHẢO SÁÁ́T HIỆN TRẠ ̣NG 1.1 Phân tích hiêṇ trang: 1.2 Phân tích yêu cầu 1.2.1 Yêu cầu chức nghiêp ̣ vụ: 1.2.2 Bảng yêu cầu chức nghiêp ̣ vụ: 1.2.3 Bảả̉ng yêu cầu chức t ̣ hống: CHƯƠNG 2: CƠ SỞ LÝ THUYÊT 2.1 MongoDB 2.1.1 Ưu điểm của Mongo DB 2.1.2 Nhược điểm của Mongo DB 2.2 ExpressJS 2.3 React 2.4 NodeJS CHƯƠNG 3: PHÂN TÍÁ́CH TRANG WEB 3.1 Thành phầÀ̀n liệu 3.1.1 Thành phầÀ̀n tổ chứÁ́c 3.2.1 Thành phầÀ̀n liệu 3.2 Thiết kế liệu CHƯƠNG 4: MƠ HÌNH HOÁÁ́ U CẦÀ̀U VÀÀ̀ PHÂN TÍÁ́CH HỆ THỐNG 4.1 Các tác nhân chứÁ́c năng: 4.1.1 Mô tảả̉ chi tiết chứÁ́c tác nhân: 4.2 Sơ đồ use-case 4.2.1 Sơ đồ usecase: 4.2.2 Đặc tảả̉ use-case 4.3 Biểu đồ hoạt động: 4.3.1 Đăng ký thành viên: 4.3.2 Đăng nhập vào hệ thốÁ́ng: 4.3.3 Đổi mật khẩu: 4.3.4 Tìm kiếm sảả̉n phẩm: 4.3.5 Xem sảả̉n phẩm: 4.3.6 Xem giỏ hàng: Báo cáo tiểu luận chuyên ngành 4.3.7 Xem thông tin cá nhân: CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 5.1 Trang người dùng 5.1.1 Trang đăng nhập (Login) 5.1.2 Trang đăng kíÁ́ (Register) 5.1.3 Trang chủ (Home) 5.1.4 Trang sảả̉n phẩm (Products) 5.1.5 Trang chi tiết sảả̉n phẩm 5.1.6 Trang danh sách địa khách h 5.1.8 Trang đặt hàng 5.1.9 Trang xem lịch sử giao dịch 5.2 Trang quảả̉n trị người dùng 5.2.1 Trang chủ 5.2.2 Trang quảả̉n lý người dùng 5.2.3 Trang quảả̉n lý sảả̉n phẩm 5.2.4 Trang quảả̉n lý loại sảả̉n phẩm 5.2.5 Trang quảả̉n lý đơn hàng 5.2.6 Trang chi tiết đơn hàng 6.1 Để cài đặt ứÁ́ng dụ ̣ng 6.1.1 Các bước cài đặt 6.2 Kiểm thử phầÀ̀n mềm 6.2.1 ChứÁ́c đăng ký 6.2.2 ChứÁ́c đăng nhập 6.2.3 ChứÁ́c quên mật 6.2.4 ChứÁ́c tạo lại mật CHƯƠNG 7: TỔNG KẾT 7.1 Kết quảả̉ đạt 7.2 Ưu điểm nhược điểm 7.2.1 Ưu điểm 7.2.2 Nhược điểm 7.3 Kinh nghiệm đạt 7.4 Hướng phát triển tương lai Báo cáo tiểu luận chuyên ngành DANH MỤ ̣C HÌNH ẢNH Hình Thiết kế liệu 19 Y Hình Sơ đồ tổng quát hệ thốÁ́ng 25 Hình Biểu đồ usecase đăng kíÁ́ đăng nhập 25 Hình Biểu đồ uscase tìm kiếm sảả̉n phẩm 26 Hình 4 Biểu đồ usecase quảả̉n líÁ́ đơn hàng 26 Hình Biểu đồ usecase mua hàng khách hàng 27 Hình Sơ đồ thốÁ́ng kê 27 Hình Biểu đồ hoạt dộng đăng ký thành viên 37 Hình Biểu đồ hoạt dộng đăng nhập hệ thốÁ́ng 37 Hình Biểu đồ hoạt động đổi mật 38 Hình 10 Biểu đồ hoạt động tìm kiếm sảả̉n phẩm 38 Hình 11 Biểu đồ hoạt động xem sảả̉n phẩm 39 Hình 12 Biểu đồ hoạt động xem giỏ hàng 39 Hình 13 Biểu đồ hoạt động xem thơng tin cá nhân 40 Hình Trang dăng nhập 41 Hình Trang đăng ký 41 Hình Trang chủ (client) 42 Hình Trang sảả̉n phẩm 43 Hình 5 Trang chi tiết sảả̉n phẩm 43 Hình Trang danh sách địa khách hàng 44 Hình Trang giỏ hàng 44 Hình Trang đặt hàng 45 Hình Trang lịch sử giao dịch 45 Hình 10 Trang chủ (Admin) 46 Hình 11 Trang quảả̉n lý người dùng 46 Hình 12 Trang quảả̉n lý sảả̉n phẩm 47 Hình 13 Trang quảả̉n lý loại sảả̉n phẩm 47 Hình 14 Trang quảả̉n lý đơn hàng 48 Hình 15 Trang chi tiết đơn hàng 48 Hình 16 Trang xuất hoá đơn 50 Y Hình Giao diện visual studio code (client) 46 Hình Giao diện visual studio code (server) 47 Hình Màn hình Intergrate Command Line (client) 47 Hình Màn hình Intergrate Command Line (server) 47 Hình Màn hình Intergrate Command Line (client) 48 Hình 6 Màn hình Intergrate Command Line (server) 48 Báo cáo tiểu luận chuyên ngành DANH MỤ ̣C BẢNG YBảả̉ng 1 Bảả̉ng yêu cầÀ̀u chứÁ́c nghiệp vụ ̣ Bảả̉ng Bảả̉ng yêu cầÀ̀u chứÁ́c hệ thốÁ́ng 13 Y Bảả̉ng Bảả̉ng Users 16 Bảả̉ng Bảả̉ng Products 17 Bảả̉ng 3 Bảả̉ng Categories 17 Bảả̉ng Bảả̉ng Checkout 18 Bảả̉ng Bảả̉ng tác nhân chứÁ́c 22 Bảả̉ng Bảả̉ng mô tảả̉ chứÁ́c quảả̉n trị viên 23 Bảả̉ng Bảả̉ng mô tảả̉ chứÁ́c khách 23 Bảả̉ng 4 Bảả̉ng mô tảả̉ chứÁ́c khách hàng 24 Bảả̉ng Đặc tảả̉ use case đăng nhập 28 Bảả̉ng Đặc tảả̉ use case đăng ký 29 Bảả̉ng Đặc tảả̉ use case toán 30 Bảả̉ng Đặc tảả̉ use case tìm kiếm sảả̉n phẩm 30 Bảả̉ng Đặc tảả̉ use case thêm sảả̉n phẩm 31 Bảả̉ng 10 Đặc tảả̉ use case xoá sảả̉n phẩm 31 Bảả̉ng 11 Đặc tảả̉ use case xem sảả̉n phẩm 32 Bảả̉ng 12 Đặc tảả̉ use case xem thông tin cá nhân 32 Bảả̉ng 13 Đặc tảả̉ use case thêm vào giỏ hàng 33 Bảả̉ng 14 Đặc tảả̉ use case nhận giao hàng 33 Bảả̉ng 15 Đặc tảả̉ use case cập nhật thông tin sảả̉n phẩm 34 Bảả̉ng 16 Đặc tảả̉ use case thêm loại sảả̉n phẩm 34 Bảả̉ng 17 Đặc tảả̉ use case xoá loại sảả̉n phẩm 35 Bảả̉ng 18 Đặc tảả̉ use case cập nhật loại sảả̉n phẩm 35 Bảả̉ng 19 Đặc tảả̉ use case quên mật 36 Y Bảả̉ng Kiểm thử chứÁ́c đăng ký 49 Bảả̉ng Kiểm thử chứÁ́c đăng nhập 50 Bảả̉ng Kiểm thử chứÁ́c quên mật 50 Bảả̉ng Kiểm thử chứÁ́c tạo lại đổi mật 51 Báo cáo tiểu luận chuyên ngành 5.1.6 Trang danh sách địa khách hàng - Hiển thị danh sách sản phẩm - Button “X” cho phép người dùng xoá địa chọn - “ADD New Address” cho phép người dùng thêm địa Hình Trang danh sách địa khách hàng 5.1.7 Trang giỏ hàng - Button “+”, “-” cho phép người dùng chỉnh số lượng sản phẩm - Button “X” cho phép người dùng xố sản phẩm khơng muốn chọn - Button “Checkout” cho phép người dùng tiếp tục mua hàng Hình Trang giỏ hàng Báo cáo tiểu luận chuyên ngành 5.1.8 Trang đặt hàng - Danh sách địa cho phép người dùng chọn địa giao hàng - Input “Your Discount Code” cho phép người dùng chọn mã giảm giá - Button “Order” cho phép người dùng dặt hàng toán nhà - Button “Paypal” cho phép người dùng đặt hàng tốn online Hình Trang đặt hàng 5.1.9 Trang xem lịch sử giao dịch - Button Cancel cho phép người dùng huỷ hàng hàng chưa xác nhận “ViewDetail” cho phép người dùng xem chi tiết đơn hàng Hình Trang lịch sử giao dịch Báo cáo tiểu luận chuyên ngành 5.2 Trang quảả̉n trị người dùng 5.2.1 Trang chủ - Hiển thị thống kê cửa hàng Hình Trang chủ (Admin) 5.2.2 Trang quảả̉n lý người dùng - Hiển thị thông tin khách hàng - Button “BlockAcount” sẽẽ̃ khoá tài khoản khách hàng vi phạm sách cửa hàng Hình Trang quảả̉n lý người dùng Báo cáo tiểu luận chuyên ngành 5.2.3 Trang quảả̉n lý sảả̉n phẩm - Button “Create Product” cho phép tạo sản phẩm - Icon “Edit” cho phép sửa thông tin sản phẩm - Icon “X” cho phép xoá sản phẩm - Button “Prev/Next” có chức phân trang Hình Trang quảả̉n lý sảả̉n phẩm 5.2.4 Trang quảả̉n lý loại sảả̉n phẩm - Input “Search” cho phép người dùng tìm kiếm loại sản phẩm Input “Category” cho phép người dùng thêm/sửa loại sản phẩm Hình Trang quảả̉n lý loại sảả̉n phẩm Báo cáo tiểu luận chuyên ngành 5.2.5 Trang quảả̉n lý đơn hàng - Icon “Export Bill” cho phép người quản trị xuất đơn hàng gọi điện xác nhận thành công - “ViewDetail” cho phép người dùng xem chi tiết đơn hàng Hình Trang quảả̉n lý đơn hàng 5.2.6 Trang chi tiết đơn hàng Hình Trang chi tiết đơn hàng Báo cáo tiểu luận chuyên ngành 5.2.7 Trang xuất hoá đơn - Button “Bill” dùng để in hoá đơn Hình Trang xuất hố đơn Báo cáo tiểu luận chuyên ngành CHƯƠNG 6: CÀÀ̀I ĐẶT VÀÀ̀ THỬ NGHIỆM 6.1Để cài đặt ứÁ́ng dụ ̣ng  Máy phải có npm  Máy có cài đặt NodeJS  Máy phải có Git Bash 6.1.1 Các bước cài đặt Ở hướng dẫn này, nhóm sử dụng IDE Visual Studio Code Bước 1: Clone download project từừ̀ link github: https://github.com/sttinh99/client (bên phíÁ́a client) https://github.com/sttinh99/API-TLCN (bên server) Bước 2: Sau giải nén, sẽẽ̃ hai thư mục client API-TLCN Bước 3: Mở hai thư mụ ̣c lên visual studio code ta giao diện sau: Hình Giao diện visual studio code (client) Báo cáo tiểu luận chuyên ngành Hình Giao diện visual studio code (server) Nếu phía server chưa có file env Tạo file có tên env điền vào thơng tin hình Nó sinh để ta cấu hình thông số môi trường project cách dễ dàng Bước 4: Tại giao diện ta mở terminal cách: Tại taskbar ta chọn Terminal  New Termianl bấm Ctrl Shift + Sau cửa sổ Command Line tích hợp ra, chạy lệnh “npm install” để cập nhật thư viện, package thiếu máy mà project cần Báo cáo tiểu luận chuyên ngành Hình Màn hình Intergrate Command Line (client) Hình Màn hình Intergrate Command Line (server) Báo cáo tiểu luận chuyên ngành Bước 5: Tại giao diện phía client chạy lệnh “npm start” ta sẽẽ̃ kết sau Hình Màn hình Intergrate Command Line (client) Tại giao diện phía server chạy lệnh “npm run dev” ta sẽẽ̃ kết sau Hình Màn hình Intergrate Command Line (server) Giao diện trang chu sẽẽ̃ khởi chạy đầu tiên: http://localhost:3000 Báo cáo tiểu luận chuyên ngành 6.2Kiểm thử phầÀ̀n mềm Sau thực xong việc kiểm thử nhóm xin trình bày số test case tiêu biểu 6.2.1 ChứÁ́c đăng ký STT Test Case Description Đăng ký tai khoan user Kiểm tra trường hợp không diền đầy đủ Kiêm tra nhâpp̣ email đa tồn p̣thông Kiểm tra mật Bảả̉ng Kiểm Báo cáo tiểu luận chuyên ngành 6.2.2 ChứÁ́c đăng nhập Test Case STT Description Kiểm tra việc đăng nhập chưa có tài khoản Đăng nhâpp̣ băng tai khoan user Đăng nhâpp̣ băng tai khoan admin Bảả̉ng Kiểm thử chứ 6.2.3 ChứÁ́c quên mật Test Case STT Description Kiểm tra nhập tài khoản chưa tồn hệ thống Kiểm tra việc nhập email Bảả̉ng Kiểm thử chứÁ́c quên mật Báo cáo tiểu luận chuyên ngành 6.2.4 ChứÁ́c tạo lại mật STT Test Case Description Kiểm tra mật với việc xác nhận mật sai Kiểm tra mật với việc xác nhận mật Bảả̉ng Kiểm thử chứÁ́c n Báo cáo tiểu luận chuyên ngành CHƯƠNG 7: TỔNG KẾT 7.1 Kết quảả̉ đạt Kỹ làm việc nhóm tốt, kỹ giao tiếp team, phân công công việc làm dự án ngắn ngày Kỹ tìm kiếm giải pháp mạng cho khúc mắc trình xây dựng đồ án Biết cách áp dụng sở liệu không quan hệ (noSQL) để xây dựng database cho hệ thống, xây dựng web server REST API phục vụ cho ứng dụng web lẫn ứng dụng di động, xây dựng giao diện trang web dạng Single Page Application React 7.2 Ưu điểm nhược điểm 7.2.1 Ưu điểm Website thiết kế với giao diện dễ nhìn, thân thiện với người dùng Thao tác đặt mua tốn đơn giản Có chức tốn online để khách hàng thuận tiện việc mua sản phẩm 7.2.2 Nhược điểm Về giao diện, cịn nhiều thiếu sót việc thiết kế nên website tương thích với máy tính cịn nhiều trang chưa thực ổn việc thiết kế Về vấn đề tương tác admin với khách hàng, khơng tích hợp chat box nên khách hàng có cách để phản hồi với admin thông qua email 7.3 Kinh nghiệm đạt Học cách quản lýý́ source control bản, hỗ trợ tốt việc làm dự án nhiều người Học cách phân chia component để dễ quản lýý́ source code Học cách phân bố thời gian hợp lýý́ 7.4 Hướng phát triển tương lai Mở rộng phát triển thêm chức chat realtime, đánh giá sản phẩm, flash sale… Phát triển cửa hàng thành chuỗi cửa hàng Hiệu suất cho trang web Tích hợp thêm chức nâng cao Báo cáo tiểu luận chuyên ngành TÀÀ̀I LIỆU THAM KHẢO [1] https://reactjs.org/tutorial/tutorial.html [2] https://mongoosejs.com/docs/guide.html [3] https://expressjs.com/en/4x/api.html [4] https://viblo.asia/p/cach-phan-chia-folder-va-dat-ten-components-cho-mot-app-react- aWj53891K6m [5] https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 [6] https://phongvu.vn [7] https://www.codehub.com.vn/Xay-Dung-Ung-Dung-React-Voi-MERN-Stack- MongoDB-Express-js-ReactJS-va-Node-js ... Tịnh Lớp: 17110IS Ngành: Công nghệ Thông tin Chuyên ngành: Hệ thống thông tin Tên đề tài: XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG CỬA HÀNG BÁN LINH KIỆN ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ MERN STACK Họ tên Giáo... Ngành: Công nghệ Thông tin Chuyên ngành: Hệ thống thông tin Lớp: 17110IS Họ tên Giáo viên hướng dẫn: Th.S Lê Thị Minh Châu SĐT: 0902200557 Tên đề tài: XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG CỬA HÀNG BÁN... cáo tiểu luận chuyên ngành BÔ ̣GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUÂṬ TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣THÔNG TIN - - TIỂU LUÂṆ CHUYÊN NGÀNH Đề tài: XÂY DỰNG