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ẬT TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣ THÔNG TIN - - 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 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, Tháng – 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ẬT TP HỒ CHÍ MINH KHOA CÔNG NGHÊ ̣ THÔNG TIN - - 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 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 Khoá: 2017-2021 Ngành: CÔNG NGHỆ THÔNG TIN TP.HCM, Tháng – 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 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 Lớp: 17110IS 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 Giáo viên phản biện (Ký & ghi rõ họ tên) năm 202 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 CẢM Ơ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ận chuyên ngành Đồ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ật 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ó, những đàn anh, đàn chị đã chia sẻ kinh nghiệm kiến thức thời gian thực đề tài, để đề tài 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 Chúng 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 .10 CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 11 1.1 Phân tích hiêṇ trạng: .11 1.2 Phân tích yêu cầu 11 1.2.1 Yêu cầu chức nghiêp̣ vụ: 11 1.2.2 Bảng yêu cầu chức nghiêp̣ vụ: .12 1.2.3 Bảng yêu cầu chức ̣ thống: .12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .13 2.1 MongoDB 13 2.1.1 Ưu điểm của Mongo DB 13 2.1.2 Nhược điểm của Mongo DB 13 2.2 ExpressJS .14 2.3 React 14 2.4 NodeJS 14 CHƯƠNG 3: PHÂN TÍCH TRANG WEB 16 3.1 Thành phần liệu 16 3.1.1 Thành phần tổ chức .16 3.2.1 Thành phần liệu 16 3.2 Thiết kế liệu 19 CHƯƠNG 4: MƠ HÌNH HỐ U CẦU VÀ PHÂN TÍCH HỆ THỐNG 21 4.1 Các tác nhân chức năng: 21 4.1.1 4.2 Mô tả chi tiết chức tác nhân: 22 Sơ đồ use-case 24 4.2.1 Sơ đồ usecase: 24 4.2.2 Đặc tả use-case .27 4.3 Biểu đồ hoạt động: 36 4.3.1 Đăng ký thành viên: .36 4.3.2 Đăng nhập vào hệ thống: .36 4.3.3 Đổi mật khẩu: 37 4.3.4 Tìm kiếm sản phẩm: 37 4.3.5 Xem sản phẩm: .38 4.3.6 Xem giỏ hàng: 38 Báo cáo tiểu luận chuyên ngành 4.3.7 Xem thông tin cá nhân: 39 CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 40 5.1 Trang người dùng 40 5.1.1 Trang đăng nhập (Login) 40 5.1.2 Trang đăng kí (Register) .40 5.1.3 Trang chủ (Home) 41 5.1.4 Trang sản phẩm (Products) 42 5.1.5 Trang chi tiết sản phẩm 42 5.1.6 Trang danh sách địa khách hàng 43 5.1.8 Trang đặt hàng .43 5.1.9 Trang xem lịch sử giao dịch 44 5.2 Trang quản trị người dùng 45 5.2.1 Trang chủ .45 5.2.2 Trang quản lý người dùng .45 5.2.3 Trang quản lý sản phẩm 46 5.2.4 Trang quản lý loại sản phẩm 46 5.2.5 Trang quản lý đơn hàng 47 5.2.6 Trang chi tiết đơn hàng 47 6.1 Để cài đặt ứng dụng .49 6.1.1 6.2 Các bước cài đặt .49 Kiểm thử phần mềm 52 6.2.1 Chức đăng ký 52 6.2.2 Chức đăng nhập 53 6.2.3 Chức quên mật 53 6.2.4 Chức tạo lại mật 54 CHƯƠNG 7: TỔNG KẾT 55 7.1 Kết đạt 55 7.2 Ưu điểm nhược điểm .55 7.2.1 Ưu điểm 55 7.2.2 Nhược điểm 55 7.3 Kinh nghiệm đạt 55 7.4 Hướng phát triển tương lai 55 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 hố đơ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 toá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” 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 xố 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 hố đơ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, 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 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 kết sau Hình Màn hình Intergrate Command Line (server) Giao diện trang chủ khởi chạy đầu tiên: http://localhost:3000 Báo cáo tiểu luận chuyên ngành 6.2 Kiể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ý Test Case STT Test steps Description Đăng ký tài khoản Nhâ ̣p các thông tin user yêu cầu màn hình: họ tên, email, mật Nhấn nút Đăng ký Kiểm tra trường hợp không diền đầy đủ Kiểm tra nhâ ̣p email đã tồn ̣ thống Expected Output Đăng ký thành công chuyển sang màn với thơng tin đăng ký Result Pass Bỏ trống Yêu cầu nhâ ̣p lại Pass trường nhấn thông tin đăng ký Nhâ ̣p các thông tin Hê ̣ thống không cho Pass yêu cầu và nhâ ̣p tạo tài khoản email email đã tồn tồn và yêu cầu ̣ thống phải nhâ ̣p lại Nhấn nút Đăng ký Kiểm tra mật Nhâ ̣p các thông tin Hệ thống báo lỗi Pass yêu cầu yêu cầu nhập lại Nếu độ dài mật