Đồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean Stack

Đồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean StackĐồ án tốt nghiệp: Xây dựng Website bán đồ cũ sử dụng công nghệ Mean Stack

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THƠNG TIN NGUYỄN ĐÌNH ĐẠT - 16110304 ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG CÔNG NGHỆ MEAN STACK KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS NGUYỄN THÀNH SƠN KHÓA 2016 - 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN HỆ THỐNG THƠNG TIN NGUYỄN ĐÌNH ĐẠT - 16110304 ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG CÔNG NGHỆ MEAN STACK KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS NGUYỄN THÀNH SƠN KHÓA 2016 - 2020 LỜI CẢM ƠN Em xin chân thành cảm ơn Thầy Nguyễn Thành Sơn – giảng viên khoa Công nghệ thông tin trường Đại học Sư Phạm Kỹ Thuật TP.HCM, nhiệt tình giúp đỡ em nhiều việc định hướng thực đề tài khóa luận tốt nghiệp, hướng dẫn thực hiện, nêu ý kiến nhận xét, cung cấp tài liệu tham khảo trình thực đề tài “Xây dựng Website bán đồ cũ sử dụng cơng nghệ MEAN stack” Bên cạnh đó, em xin gửi lời cảm ơn đến thầy cô giảng viên trường Đại học Sư Phạm Kỹ Thuật TP.HCM nói chung thầy cô giảng viên khoa Công nghệ thơng tin nói riêng, người giảng dạy, tạo điều kiện cho em tích lũy kiến thức quý báu năm học qua Dù cố gắng hồn thành khóa luận tốt nghiệp u cầu, thời gian hạn hẹp khả cịn hạn chế nên chắn khơng tránh khỏi thiếu sót Em mong nhận thơng cảm tận tình bảo q thầy TP Hồ Chí Minh, ngày 05 tháng 07 năm 2020 Sinh viên thực Nguyễn Đình Đạt ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT Họ tên sinh viên thực : Nguyễn Đình Đạt MSSV: 16110304 Thời gian làm khóa luận tốt nghiệp: Từ 01/03/2020 Đến 01/08/2020 Chuyên ngành: Hệ Thống Thông Tin Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack Giảng viên hướng dẫn: TS Nguyễn Thành Sơn Nhiệm vụ khóa luận: * Tìm hiểu tổng quan MEAN stack * Tìm hiểu MongoDB AngularJS * Tìm hiểu Express NodeJS * Cấu hình môi trường kết nối database * Tiến hành cài đặt website bán đồ cũ - Sử dụng passportjs làm chức đăng ký đăng nhập + sử dụng token để lưu tiến trình đăng nhập - Làm chức Comment - Làm chức đăng - Làm chức tìm kiếm - Làm chức hồ sơ cá nhân chỉnh sửa thông tin cá nhân - Làm chức upload hình ảnh vào sở liệu - Làm chức quản lý đăng,người dùng,comment - Làm chức xác thực đăng,người dùng - Làm chức gửi email - Viết api Giáo viên hướng dẫn (Ký & ghi rõ họ tên) KẾ HOẠCH THỰC HIỆNp STT Ngày bắt đầu Ngày kết thúc 1/03/2020 26/03/2020 27/03/2018 02/04/2020 03/04/2020 09/04/2020 10/05/2020 16/05/2020 17/04/2020 23/04/2020 24/04/2020 30/04/2020 08/05/2020 14/05/2020 15/05/2020 21/05/2020 10 11 12 14 15 16 22/05/2020 29/05/2020 05/06/2020 19/06/2020 26/06/2020 03/07/2020 28/05/2020 04/05/2020 11/06/2020 25/06/2020 02/07/2020 09/07/2020 Kết thực Công việc giao Tìm hiểu tổng quan khái niệm cơng nghệ MEAN STACK Tìm hiểu MongoDB Cài đặt chương trình (Nodejs, MongoDB, Express, AngularJS, ) Khởi tạo ứng dụng với môi trường: Back-End FrontEnd Thiết kế sở liệu Xây dựng ứng dung BackEnd, viết api Xây dựng ứng dung BackEnd, viết api Hoàn thành đặc tả website bán đồ cũ Xây dựng project Angular Xây dựng project Angular Xây dựng project Angular Tiến hành thiết kế giao diện Tiếp tục hoàn thiện giao diện Viết báo cáo khóa luận Đánh giá 80% 80% 40% 60% 100% 50% 80% 90% 30% 50% 85% 30% 80% 100% Ngày tháng năm 2020 Giáo viên hướng dẫn (Ký ghi rõ họ tên) Người viết đề cương (ký ghi rõ họ tên) DANH MỤC HÌNH ẢNH Hình 1.2 1: Cấu trúc express 27 Hình 1: Mở lệnh "mongod–dbpath D:\MongoDB\data" 30 Hình 2: Kết sau chạy thành công với Port 27017 30 Hình 3: Gõ lệnh "mongo" khởi động mongoDB xong 31 Hình 4: Gõ câu lệnh "show dbs" .31 Hình 5: Tạo database MongoDB .31 Hình 6: Xóa database 31 Hình 7: Thêm document vào collection 31 Hình 8: Thêm nhiều document vào collection 32 Hình 9: Hiện thị tất docment có collection 32 Hình 10: Update document collection 32 Hình 11: Xóa document .33 Hình 12: Kết nối thành cơng với mongodb .35 Hình 13: Các bước thiết lập project Angular 35 Hình 14: Cấu trúc file với project Angular 36 Hình 15: khởi chạy project Angular 37 Hình 16: Download postman máy tính 37 Hình 17: Sau download xong 38 Hình 18:Giao diện postman 38 Hình 1:Xác định Actor 40 Hình 2:Mơ hình ERD database 42 Hình 3:Collection Product 49 Hình 4:Collection Comment 50 Hình 5:Collection Comment Children .51 Hình 6:Collection Users 51 Hình 7:Collection Category 52 Hình 1: Tạo folder BackEnd FrontEnd 53 Hình 2: Tạo project backend .53 Hình 3:Khởi tạo git 54 Hình 4: Thực cài đặt express .54 Hình 5: Cài đặt express thành công 54 Hình 6: Cài đặt nodemon 55 Hình 7: Cài đặt thành cơng .55 Hình 8: Khởi tạo FrontEnd .56 Hình 9: Thực lệnh để chạy project 56 Hình 10: Giao diên FrontEnd 56 Hình 11: Cài đặt mongoose .57 Hình 12: File cấu hình mơi trường 57 Hình 13: Cấu hình file server.js 58 Hình 14: Folder chứa hình ảnh 58 Hình 15: Code xử lý gửi email 59 Hình 16: Tạo model 60 Hình 17: Xử lý tải hình ảnh xác thực token 61 Hình 18: Thiết lập request đăng nhập 62 Hình 19: Api đăng nhập thành công 62 Hình 20: Thiết lập request đăng ký người dùng .63 Hình 4.21 : Api đăng ký người dùng thành cơng 63 Hình 22: Thiết lập request lấy danh sách người dùng .64 Hình 23: Api lấy danh sách người dùng thành công .64 Hình 24: Gán token request lấy thông tin người dùng .65 Hình 25: Api lấy thơng tin người dùng theo ID thành cơng .65 Hình 26: Thiết lập request upload hình ảnh .66 Hình 27: Api upload hình ảnh thành cơng 66 Hình 28: Thiết lập request tìm người dùng theo email 66 Hình 29: Api tìm kiếm người dùng theo email thành cơng .67 Hình 30: Gán token request đổi mật 67 Hình 31: Thiết lập request thay đổi mật 68 Hình 32: Api thay đổi mật thành công 68 Hình 33: Gán token request tạo sản phẩm 69 Hình 34: Thiết lập request tạo sản phẩm 69 Hình 35: Api tạo sản phẩm thành công .69 Hình 36: Gán token request lấy danh sách sản phẩm 70 Hình 37: Api lấy tất danh sách sản phẩm thành công 70 Hình 38: Gán token request lấy chi tiết sản phẩm 71 Hình 39: Thiết lập request lấy chi tiết sản phẩm .71 Hình 40: Api lấy chi tiết sản phẩm theo ID thành cơng .71 Hình 41: Gán token request xóa sản phẩm 72 Hình 42: Thiết lập request xóa sản phẩm 72 Hình 43: Xóa sản phẩm thành công 72 Hình 44: Gán token request upload ảnh đại diện sản phẩm .73 Hình 45: Thiết lập request upload ảnh đại diện .73 Hình 46: Api upload ảnh đại diện sản phẩm thành công 73 Hình 47: Gán token request upload danh sách hình ảnh 74 Hình 48: Thiết lập request upload danh sách hình ảnh 74 Hình 49: Api upload danh sách hình ảnh chi tiết sản phẩm thành cơng 74 Hình 50: Thiết lập request tìm kiếm sản phẩm 75 Hình 51: Api tìm kiếm sản phẩm thành công .75 Hình 52: Gán token request tạo bình luận 75 Hình 53: Thiết lập request tạo bình luận 76 Hình 54: Api tạo bình luận thành cơng .76 Hình 55: Api lấy danh sách tất bình luận thành cơng 77 Hình 56: Api lấy danh sách danh mục sản phẩm thành công 78 Hình 57: Thiết lập request lây chi tiết danh mục sản phẩm .79 Hình 58: Api lấy chi tiết danh mục sản phẩm thành cơng 79 Hình 59: Thiết lập request lấy danh sách chi tiết danh mục sản phẩm 80 Hình 60: Api lấy danh sách chi tiết danh mục thành cơng .80 Hình 61: Cấu trúc thư muc frontend 81 Hình 62:Diagram NgRx Angular .82 Hình 63:Cấu trúc thư mục tạo form login 83 Hình 64: Xử lý form login 83 Hình 65: Tạo service 84 Hình 66: Code file auth.guard.ts .84 Hình 67: Danh sách danh mục sản phẩm 85 10 Hình 68: Gán token người dùng tạo request xuống server 85 Hình 69: code server 86 Hình 70: Cấu trúc Module home 86 Hình 71: Giao diện danh mục sản phẩm 88 Hình 72: Giao diện danh sách sản phẩm 88 Hình 73: Lọc sản phẩm có giá từ thấp đến cao 88 Hình 74: Lọc sản phẩm có giá từ cao xuống thấp 89 Hình 4.75: Giao diện chi tiết sản phẩm 90 Hình 4.76:Giao diện xem danh sách bình luận .90 Hình 4.77:Giao diện đăng bình luận .91 Hình 4.78:Thơng báo đăng nhập để truy cập .91 Hình 4.79:Thơng tin người dùng 93 Hình 4.80:Giao diện Form đăng nhập người dùng 93 Hình 4.81 : Giao diện người dùng đăng nhập thành công 94 Hình 4.82:Giao diện nhập thơng tin vào form đăng ký .95 Hình 4.83:Giao diện thơng báo đăng ký thành công 96 Hình 4.84:Thơng báo địa email sau đăng ký 97 Hình 4.85:Thơng báo email sau tài khoản xác nhận 97 Hình 4.86:Giao diện Form lấy thông tin sản phẩm 98 Hình 4.87: Giao diện sản phẩm đăng ký thành công 99 Hình 4.88:Giao diện tìm kiếm .99 Hình 4.89:Giao diện danh sách sản phẩm tìm thấy 100 Hình 4.90:Chọn địa danh mục sản phẩm bạn tìm kiếm 100 Hình 4.91:Sản phẩm tìm thấy .101 Hình 4.92:Giao diện đăng nhập quản trị viên 102 Hình 4.93:Thơng báo lỗi đăng nhập 102 Hình 4.94:Giao diện bảng điều khiển 103 Hình 4.95:Danh sách sản phẩm 103 Hình 4.96:Tài khoản cần xác thực 104 Hình 97: Sản phẩm cần xác thực 104 Hình 98: Danh sách người dùng .105 Hình 99: Hồ sơ người dùng .105 11 DANH MỤC BẢNG BIỂU Bảng Ràng buộc bảng User 42 Bảng 2: Ràng buộc bảng Product .44 Bảng 3Ràng buộc bảng Comment .45 Bảng 4Ràng buộc bảng Comment Children 46 Bảng Ràng buộc bảng Category Level1 47 Bảng Ràng buộc bảng Category Level2 48 12 Hình 82: Nhập thơng tin vào form đăng ký  Tải lên ảnh đại diện bạn 95  Bạn nhận thông báo sau đăng ký thành cơng Hình 83: Thơng báo đăng ký thành cơng • Thơng báo địa email  Sau bạn đăng ký thành công địa email bạn dùng để đăng ký nhận email thơng báo 96 Hình 84: Thông báo email sau đăng ký thành công  Sau người dùng xác nhận tài khoản bạn nhận email thơng báo Hình 85: Thơng báo email sau tài khoản xác nhận • Đăng sản phẩm  Bạn điều đầy đủ thông tin sản phẩm bạn muốn đăng  Người dùng đăng nhập để tạo sản phẩm 97 Hình 86: Form lấy thơng tin sản phẩm  Sau click đăng tiếp tục bạn tải hình ảnh lên làm hình ảnh đại diện sản phẩm  Tiếp tục bạn dẫn số đường dẫn hình ảnh chi tiết sản phẩm bạn 98 Hình 87: Sản phẩm đăng thành cơng • Tìm kiếm sản phẩm theo từ khóa  Nhập từ khóa bạn muốn tìm kiếm Hình 88: Nhập từ khóa vào tìm kiếm  Sản phẩm tìm thấy 99 Hình 89: Danh sách sản phẩm tìm thấy • Tìm kiếm sản phẩm theo địa danh mục  Chọn địa danh mục sản phẩm bạn cần tìm kiếm 100 Hình 90: Chọn địa danh mục sản phẩm cần tìm kiếm Hình 91: Sản phẩm tìm thấy Bước 18: Chạy project quản trị viên:  Quản trị viên phải đăng nhập để dử dụng website 101 Hình 92: Giao diện đăng nhập quản trị viên  Chỉ có quản trị viên phép đăng nhập Hình 93: Thơng báo lỗi đăng nhập 102  Sau đăng nhập quản trị viên thấy giao diện bảng điều khiển Hình 94: Giao diện bảng điều khiển  Danh sách sản phẩm  Sau người dùng đăng sản phẩm thơng báo chờ đợi quản trị xác thực  Danh sách sản phẩm sau xác thực Hình 95: Danh sách sản phẩm  Danh sách tài khoản cần xác thực 103  Tương tự tạo sản phẩm mới.Tài khoản người dùng tạo phải chờ quản trị xác thực Hình 96: Tài khoản cần xác thực  Danh sách sản phẩm cần xác t Hình 97: Sản phẩm cần xác thực  Danh sách người dùng  Quản trị viên phép thêm quản trị viên khác 104 Hình 98: Danh sách người dùng  Thay đổi mật Hình 99: Hồ sơ người dùng 105 CHƯƠNG 5: TỔNG KẾT 5.1 KẾT LUẬN • Về phần lý thuyết: Đề tài trình bày tổng quan chi tiết khái niệm công nghệ MEAN stack Giúp bạn hiểu rõ khái niệm cớ bản, đặc điểm cấu tạo ưu nhược điểm ngơn ngữ lập trình MongoDB, NodeJS, Express, Angular • Về phần thực hành: Đề tài hướng dẫn bạn cài đặt cấu hình database MongoDB, Express, NodeJS, Angular Cài đặt môi trường công cụ cần thiết để hoàn thiện dự án Gitbash, Visual Studio Code, Mongodb…Ngồi đề tài cịn cách khởi tạo Project thực tế • Cài đặt proejct: Một số chức project thực được: - Đăng ký người dùng - Đăng nhập ,đăng xuất tài khoản - Thông báo email tạo người dùng - Chỉnh sửa thông tin tài khoản - Phân quyền người dùng quản trị - Thực chức tạo sản - Thực chức tìm kiếm theo từ khóa - Thực chức tìm kiếm theo địa danh mục sản phẩm - Xem danh sách sản phẩm - Xem chi tiết sản phẩm - Lọc danh sách sản phẩm theo giá từ cao xuống thấp từ thấp lên cao - Xóa sản phẩm - Xóa người dùng - Xác nhận sản phẩm - Xác nhận người dùng Mức độ hoàn thiện 106 Project hoàn thành số chức website bán đồ cũ, số chức quan em chưa thực em tiếp tục phát triền hoản thiện project thời gian tới 5.2 KHÓ KHĂN GẶP PHẢI • Nguồn tài liệu đề tài cịn nên trình tìm kiếm phục vụ cho đề tài gặp nhiều khó khăn • Do kiến thức cịn nhiều hạn chế ngôn ngữ nhóm nên q trình thực gặp nhiều trục trặc lỗi • Do thời gian cịn hạn hẹp có nhiều đề tài nghiên cứu học kì nên chưa có hội để hồn thiện giao diện chức Website bán đồ cũ 5.3 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM: 5.3.1 Ưu điểm: - Giao diện dễ dàng sử dụng - Đáp ứng đầy đủ tính đưa ban đầu - Đảm bảo chương trình hoạt động mượt mà, hạn chế tối đa lỗi xảy 5.3.2 Nhược điểm: - Chức chương trình đơn giản - Tính nhiều hạn chế việc tối ưu thuật toán với liệu lớn 5.4 PHƯƠNG HƯỚNG KHẮC PHỤC - Cần bỏ nhiều thời gian để trau truốt làm - Tìm tịi nhiều nguồn tài liệu để có nhiều kiến thức - Hỏi đàn anh thắc mắc chưa giải - Tích cực lên gặp giáo viên hướng dẫn để có phướng hướng làm việc khoản thời gian tới tìm hướng giải nhiệm vụ tuần trước 107 TÀI LIỆU THAM KHẢO MongoDB [1] https://viblo.asia/p/tong-quan-ve-mongodb-EoDkQoxqGbV https://viblo.asia/p/su-khac-nhau-giua-unit-integration-va-functional-testingYmjeoLZrkqa [6] https://viblo.asia/p/nhung-diem-khac-biet-giua-sql-va-nosql-gDVK2WPjZLj Angular [7] https://angular.io/docs NodeJS [2] https://techmaster.vn/posts/33428/nodejs-la-gi-va-tai-sao-toi-nen-hoc-lap-trinhnodejs [2] https://outofuet.wordpress.com/2015/02/20/dac-diem-va-loi-the-cua-nodejs/ Câu lệnh MongoDB [3] https://hoangsi.com/toan-tap-ve-cai-dat-su-dung-va-tuong-tac-voi-du-lieu-trongmongodb.html Tất câu lệnh kết nối MongoDB [4] https://github.com/mafintosh/mongojs 108 S K L 0 ... THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THƠNG TIN NGUYỄN ĐÌNH ĐẠT - 16110304 ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG CÔNG NGHỆ MEAN STACK KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT... Thống Thông Tin Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack Giảng viên hướng dẫn: TS Nguyễn Thành Sơn Nhiệm vụ khóa luận: * Tìm hiểu tổng quan MEAN stack * Tìm hiểu MongoDB... Website bán đồ cũ đơn giản công nghệ MEAN STACK? ?? Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN: Đề tài hướng đến mục đích xây dựng Website bán đồ cũ giúp mang ý nghĩa tiết kiệm tránh lãng phí dụng kiến thức