(Đồ án hcmute) xây dựng website bán đồ cũ sử dụng công nghệ mean stack

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN ĐỒ CŨ SỬ DỤNG CÔNG NGHỆ MEAN STACK GVHD: NGUYỄN THÀNH SƠN SVTH: NGUYỄN ĐÌNH ĐẠT MSSV: 16110304 SKL 0 Tp Hồ Chí Minh, tháng 07/2020 an 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 an 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 an PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : Nguyễn Đình Đạt , MSSV: 16110304 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack Họ tên Giáo viên hướng dẫn: TS Nguyễn Thành Sơ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 05 tháng 07 năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : Nguyễn Đình Đạt, MSSV: 16110304 Ngành: Cơng nghệ Thơng tin Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack Họ tên Giáo viên phản biện: NHẬN XÉT: Về nội dung đề tà & 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 05 tháng 07 năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) an 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 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 yêu cầu, thời gian hạn hẹp khả 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 an ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HỒ 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) an 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 hồ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 Người viết đề cương (Ký ghi rõ họ tên) (ký ghi rõ họ tên) an 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 an 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 an Hình 82: Nhập thơng tin vào form đăng ký  Tải lên ảnh đại diện bạn 95 an  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 an 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 an 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 an 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 an 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 an 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 an 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 an  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 an  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 an Hình 98: Danh sách người dùng  Thay đổi mật Hình 99: Hồ sơ người dùng 105 an 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 an 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 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 cịn nhiều hạn chế việc tối ưu thuật tố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 an 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 an S an K L 0 ... 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Ỹ... tên Sinh viên : Nguyễn Đình Đạt, MSSV: 16110304 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Website bán đồ cũ sử dụng công nghệ MEAN stack Họ tên Giáo viên phản biện: NHẬN XÉT: Về nội dung... 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