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

111 15 0
(Đồ án tốt nghiệp) xây dựng website bán đồ cũ sử dụng công nghệ mean stack

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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 SKL007152 Tp Hồ Chí Minh, tháng 07/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 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 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) 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) 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ả 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 MSSV: 16110304 Họ tên sinh viên thực : Nguyễn Đình Đạt 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 Ngày bắt STT đầu 1/03/2020 27/03/2018 03/04/2020 10/05/2020 17/04/2020 24/04/2020 08/05/2020 15/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 Giáo viên hướng dẫn (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 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 q 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 để hoà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 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-trinh- nodejs [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-trong- mongodb.html Tất câu lệnh kết nối MongoDB [4] https://github.com/mafintosh/mongojs 108 ... 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... 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... 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

Ngày đăng: 27/12/2021, 08:48