Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs

Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ~~~o0o~~~ PHẠM THỊ NGỌC HƯỜNG – 16110351 LÊ THỊ THANH NGÂN – 16110396 Đề Tài: XÂY DỰNG WEBSITE BÁN SẢN PHẨM THÂN THIỆN MƠI TRƯỜNG BẰNG NODEJS KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHĨA 2016-2020 LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔN CÔNG NGHỆ PHẦN MỀM, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM tạo điều kiện thuận lợi cho chúng em thực đề tài Chúng em xin gửi lời cảm ơn chân thành đến thầy TS LÊ VĂN VINH, người tận tình bảo hướng dẫn nhóm em thực đề tài Bên cạnh đó, chúng 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 Chúng em nỗ lực nhiều để hoàn thành tốt nhiệm vụ đề tài, khả hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng em mong nhận tận tình bảo thầy để ngày tiến TP Hồ Chí Minh, ngày …… tháng …… năm 2020 Nhóm sinh viên thực hiện: PHẠM THỊ NGỌC HƯỜNG - 16110351 LÊ THỊ THANH NGÂN - 16110396 MỤC LỤC PHẦN 1: PHẦN MỞ ĐẦU 1 TÍNH CẤP THIẾT ĐỀ TÀI MỤC TIÊU CỦA ĐỀ TÀI CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 3.1 Đối tượng nghiên cứu 3.2 Phạm vi nghiên cứu KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC PHẦN 2: PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT TÌM HIỂU CƠNG NGHỆ 1.1 Tìm hiểu Javascript 1.2 Tìm hiểu NodeJS 1.3 Tìm hiểu Express Framework NodeJS 1.4 Tìm hiểu MongoDB 10 1.5 Tìm hiểu Socket.io 13 1.6 Tìm hiểu PassportJS 14 TÌM HIỂU MƠ HÌNH MVC TRONG XÂY DỰNG WEBSITE 16 2.1 Tìm hiểu mơ hình MVC 16 2.2 Chi tiết lớp mơ hình MVC 17 2.3 Ưu - Nhược điểm mơ hình MVC 18 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 19 KHẢO SÁT HIỆN TRẠNG 19 1.1 Nhận xét số website môi trường 19 1.2 Tổng hợp, đánh giá chung websites môi trường 40 1.3 Tổng kết - Rút trang web mong muốn 40 XÁC ĐỊNH YÊU CẦU 41 2.1 Yêu cầu chức 41 2.2 Yêu cầu phi chức 42 MƠ HÌNH HÓA YÊU CẦU 43 3.1 Lược đồ use case 43 3.2 Đặc tả use case 45 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 63 THIẾT KẾ HỆ THỐNG 63 1.1 Lược đồ lớp 63 1.2 Lược đồ 64 THIẾT KẾ CƠ SỞ DỮ LIỆU 69 2.1 Cấu trúc liệu 69 2.2 Các ràng buộc toàn vẹn 73 2.3 Lược đồ thực thể quan hệ 75 2.4 Mô tả chi tiết bảng liệu 76 THIẾT KẾ GIAO DIỆN 69 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 108 CÀI ĐẶT 108 1.1 Thiết lập môi trường 108 1.2 Xây dựng cấu trúc project 108 KIỂM THỬ 111 PHẦN 3: PHẦN KẾT LUẬN 116 KẾT QUẢ ĐẠT ĐƯỢC 116 ƯU ĐIỂM 116 NHƯỢC ĐIỂM 117 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 117 TÀI LIỆU THAM KHẢO 118 DANH MỤC CHỮ VIẾT TẮC Ajax: Asynchronous JavaScript and XML API: Application Programming Interface App: application CSS: Cascading Style Sheets DOM: Document Object Model HTML: Hyper Text Markup Language HTTP: HyperText Transfer Protocol JS / js: Javascript JSX: JavaScript XML MVC: Model – View – Controller REST: Representational State Transfer UI: user interface URL: Uniform Resource Locator XML: eXtensible Markup Language DANH MỤC HÌNH ẢNH Hình 1-Mơ hình MVC [6] 16 Hình 2-Mơ hình hoạt động DAO, BO JAVA BEAN [6] 17 Hình 3-Hình ảnh trang giao diện trang chủ (admin, user) 20 Hình 4-Trang diễn đàn 20 Hình 5-Trang mơi trường 21 Hình 6-Trang chi tiết sản phẩm 22 Hình 7-Form đăng kí 23 Hình 8-Form đăng nhập 24 Hình 9-Trang chủ 28 Hình 10-Trang Design 29 Hình 11-Trang chủ 30 Hình 12-Trang Recycling Locator 31 Hình 13-Trang Recycle week campaign 32 Hình 14-Trang chi tiết cho thơng tin 33 Hình 15-Trang Recycling locations 33 Hình 16-Trang chủ 34 Hình 17-Trang News & Stories 35 Hình 18-Trang enviroment & you 36 Hình 19-Trang chủ 37 Hình 20-Trang travle 38 Hình 21-Trang danh mục 38 Hình 22-Trang đăng kí 39 Hình 23-Lược đồ usecase phía người dùng cuối 43 Hình 24-Lược đồ usecase phía người quản trị 44 Hình 25-Lược đồ lớp – Model Layer 63 Hình 26-Lược đồ View home page 64 Hình 27-Lược đồ Search product 64 Hình 28-Lược đồ View product detail 65 Hình 29-Lược đồ Buy product 66 Hình 30-Lược đồ Register 67 Hình 31-Lược đồ Login 67 Hình 32-Lược đồ Update info 68 Hình 33-Lược đồ Logout 68 Hình 34-Lược đồ thực thể quan hệ 75 Hình 35-Hình ảnh giao diện trang chủ khách hàng 85 Hình 36-Hình ảnh trang chi tiết sản phẩm 87 Hình 37-Hình ảnh trang giao diện đăng nhập khách hàng 88 Hình 38-Hình ảnh trang giao diện đăng ký 89 Hình 39-Hình ảnh trang giao diện trang tin tức 91 Hình 40-Hình ảnh trang giao diện theo danh mục loại 93 Hình 41-Hình ảnh trang giao diện giỏ hàng 94 Hình 42-Hình ảnh trang giao diện thơng tin đặt hàng 95 Hình 43-Hình ảnh trang giao diện thơng tin đơn hàng 96 Hình 44-Hình ảnh trang giao diện quản lý đơn hàng mua 98 Hình 45-Hình ảnh trang giao diện chi tiết hóa đơn 99 Hình 46-Hình ảnh trang giao diện đăng nhập admin 100 Hình 47-Hình ảnh trang giao diện chủ admin 101 Hình 48-Hình ảnh trang giao diện danh sách loại sản phẩm 103 Hình 49-Hình ảnh trang giao diện thêm sản phẩm 104 Hình 50-Hình ảnh trang giao diện xóa sản phẩm 106 Hình 51-Hình ảnh trang giao diện trang thống kê 107 DANH MỤC BẢNG BIỂU Bảng 1-Bảng so sánh RDBMS MongoDB 11 Bảng 2-Bảng đặc tả use case view home page 45 Bảng 3-Bảng đặc tả use case register 46 Bảng 4-Bảng đặc tả use case search product 47 Bảng 5-Bảng đặc tả use case view product detail 48 Bảng 6-Bảng đặc tả use case view news detail 48 Bảng 7-Bảng đặc tả use case login 49 Bảng 8-Bảng đặc tả use case login with Facebook 50 Bảng 9-Bảng đặc tả use case login with Google 51 Bảng 10-Bảng đặc tả use case View user info 52 Bảng 11-Bảng đặc tả use case update user info 53 Bảng 12-Bảng đặc tả use case add product 54 Bảng 13-Bảng đặc tả use case update products info 54 Bảng 14-Bảng đặc tả use case delete products 55 Bảng 15-Bảng đặc tả use case add news 56 Bảng 16-Bảng đặc tả use case update news info 57 Bảng 17-Bảng đặc tả use case delete news 58 Bảng 18-Bảng đặc tả use case buy product 60 Bảng 19-Bảng đặc tả use case Chat 60 Bảng 20-Bảng đặc tả use case logout 61 Bảng 21-Bảng đặc tả use case Statistic (Website owner) 62 Bảng 22-Bảng đặc tả use case add employee 62 Bảng 23-Mô tả chi tiết bảng liệu Authorization 76 Bảng 24-Mô tả chi tiết bảng liệu User 77 Bảng 25-Mô tả chi tiết bảng liệu NewsCategory 78 Bảng 26-Mô tả chi tiết bảng liệu ProductCategory 78 Bảng 27-Mô tả chi tiết bảng liệu Product 79 Bảng 28-Mô tả chi tiết bảng liệu News 81 Bảng 29-Mô tả chi tiết bảng liệu Conversation 81 Bảng 30-Mô tả chi tiết bảng liệu Department 81 Bảng 31-Mô tả chi tiết bảng liệu Employee 82 Bảng 32-Bảng mô tả chi tiết đối tượng giao diện trang chủ 86 Bảng 33-Bảng mô tả chi tiết đối tượng giao diện trang chi tiết sản phẩm 87 Bảng 34-Bảng mô tả chi tiết đối tượng giao diện trang đăng nhập khách hàng 88 Bảng 35-Bảng mô tả chi tiết đối tượng giao diện trang đăng ký khách hàng 89 Bảng 36-Bảng mô tả chi tiết đối tượng giao diện trang tin tức 92 Bảng 37-Bảng mô tả chi tiết đối tượng giao diện trang danh mục loại sản phẩm 93 Bảng 38-Bảng mô tả chi tiết đối tượng giao trang giỏ hàng 94 Bảng 39-Bảng mô tả chi tiết đối tượng giao diện trang thông tin đặt hàng 95 Bảng 40-Bảng mô tả chi tiết đối tượng trang thông tin đặt hàng 97 Bảng 41-Bảng mô tả chi tiết đối tượng giao diện trang danh sách đơn đặt 98 Bảng 42-Bảng mô tả chi tiết đối tượng giao diện trang chi tiêt hóa đơn 99 Bảng 43-Bảng mơ tả chi tiết đối tượng giao diện trang đăng nhập admin 100 Bảng 44-Bảng mô tả chi tiết đối tượng giao diện trang chủ admin 102 Bảng 45-Bảng mô tả chi tiết đối tượng giao diện trang danh sách loại sản phẩm 104 Bảng 46-Bảng mô tả chi tiết đối tượng giao diện trang thêm sản phẩm 105 Bảng 47-Bảng mô tả chi tiết đối tượng giao diện trang sửa sản phẩm 106 Bảng 48-Bảng mô tả chi tiết đối tượng giao diện trang thống kê 107 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN PHẦN 1: PHẦN MỞ ĐẦU TÍNH CẤP THIẾT ĐỀ TÀI Với thực trạng môi trường sống có tầm ảnh hưởng quan trọng - Mọi cơng việc, cơng nghệ có ngày đổi mới, phát triển môi trường sống ngày lại xuống dần hủy hoại sống - Đặc biệt, bên cạnh phát triển cơng nghệ mơi trường sống lại quan tâm Trong mơi trường sống cần thiết nơi tất để học tập, làm việc Để người vừa đổi theo xu hướng công nghệ mà vừa đề cao tầm quan trọng môi trường sống ngày Chúng em định làm trang web bán sản phẩm thân thiện với môi trường thông báo tin tức cập nhập mơi trường sống xung quanh Từ người nắm thông tin nhanh hơn, ý thức - Vậy nên người thử dùng sản phẩm thân thiện với môi trường ngày Hay muốn biết yêu môi trường sống Để đáp ứng truyền tải yêu cầu khách hàng thực cách nhanh chóng, không nhiều thời gian chờ đợi trước cần trang web môi trường MỤC TIÊU CỦA ĐỀ TÀI  Tìm hiểu cơng nghệ liên quan đến đề tài như: + Tìm hiểu HTML5, CSS3 + Tìm hiểu Javascript, Bootstrap + Tìm hiểu Frameword Express + Tìm hiểu kỹ thuật NodeJS + Thư viện EJS + Tìm hiểu MongoDb Atlas + Tìm hiểu chứng thực PassportJS JWT + Tìm hiểu thời gian thực Socket.io  Xây dựng website tìm bán sản phẩm có chức bản: o Đăng ký/Đăng nhập/Đăng xuất KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN Div Thông tin mô tả loại sản phẩm 10 Image Hiển thị hình ảnh đại diện sản phẩm 11 Div Thông tin mô tả ngày sản phẩm 12 Div Thông tin mô tả thông tin sản phẩm 13 Button Xác nhận sửa sản phẩm 14 Button Xác nhận xóa sản phẩm 15 Link Liên kêt đến trang theo phân trang Bảng 45-Bảng mô tả chi tiết đối tượng giao diện trang danh sách loại sản phẩm 3.15 Giao diện trang thêm sản phẩm Hình 49-Hình ảnh trang giao diện thêm sản phẩm 104 KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN LOẠI STT MÔ TẢ Text Thông tin tên trang Lable Thông tin mơ tả Input text Nhập tên sản phẩm Input text Nhập tên giá nhập sản phẩm Input text Nhập tên giá bán sản phẩm Input text Nhập tên số lượng sản phẩm Input text Nhập loại hình ảnh Input Hiển thị chọn loại sản phẩm Lable Input Chọn hình ảnh sản phẩm 10 Input text Nhập ngày nhập sản phẩm 11 textarea Nhập mô tả sản phẩm 12 Button Xác nhận lưu thêm sản phẩm 13 Button Xác nhận xóa Bảng 46-Bảng mô tả chi tiết đối tượng giao diện trang thêm sản phẩm 3.16 Giao diện trang sửa sản phẩm 105 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN Hình 50-Hình ảnh trang giao diện xóa sản phẩm LOẠI STT MƠ TẢ Text Thơng tin tên trang Lable Thơng tin mơ tả Input text Nhập tên sản phẩm Input text Nhập tên giá nhập sản phẩm Input text Nhập tên giá bán sản phẩm Input text Nhập tên số lượng sản phẩm Input Hiển thị chọn loại sản phẩm Input text Nhập loại hình ảnh Div Thơng tin mơ tả 10 Image Hiển thị ảnh đại diện sản phẩm 11 Input file Chọn hình ảnh 12 Input text Nhập ngày nhập sản phẩm 13 textarea Nhập mô tả sản phẩm 14 Button Xác nhận lưu thêm sản phẩm 15 Button Xác nhận hủy cập nhập Bảng 47-Bảng mô tả chi tiết đối tượng giao diện trang sửa sản phẩm 106 KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN 3.17 Giao diện trang thống kê Hình 51-Hình ảnh trang giao diện trang thống kê LOẠI STT MƠ TẢ Text Thơng tin tên trang div Chart Button Xuất chart thành file pdf, jpg, png Bảng 48-Bảng mô tả chi tiết đối tượng giao diện trang thống kê 107 KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ CÀI ĐẶT 1.1 Thiết lập môi trường  Sử dụng công nghệ NodeJS phiên 12.13.0  MongoDB 4.0.12  Trình duyệt Chrome phiên 79.0.3945.88 (Official Build) (64-bit) 1.2 Xây dựng cấu trúc project Project gồm phần (Admin Client), phần (Config) phần xác thực quyền quản lý thông người dùng 108 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THÔNG TIN 1.2.1 Admin  Thư mục quan trọng nhằm tạo server Node.js app.js, bao gồm nhiều thư mục con: models, public, routes,views xác thực người dùng đăng nhập o Models: chứa schema tương ứng với collections sở liệu o public: chức thư viện hỗ trợ hiển thị phía giao diện o views: gồm block page chứa tệp giao diện hiển thị theo hướng Server side 1.2.2 Client  Thư mục quan trọng nhằm tạo server Node.js app.js, bao gồm nhiều thư mục con: models, public, routes,views authentic xác thực người dùng đăng nhập o Authentic: chứa middleware để render tới chức đăng nhập, đăng kí qua controller routes.js o models: chứa schema tương ứng với collections sở liệu o public: chức thư viện hỗ trợ hiển thị phía giao diện o routes: chứa middleware để render giao diện Server side o views: gồm blockClient pageClient chứa tệp giao diện hiển thị theo hướng Client side 1.2.3 Config  Định nghĩa đoạn chuỗi sử dụng nhiều lần muốn bảo mật trình sử dụng sang kiểu xác thực quyền đăng nhập Facebook Google  Chứa database.json chứa định nghĩa mongodb Uri  Chứa passport.json chứng thực quyền bảo mật 109 KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN 1.2.4 Tầng Controller Server.js: thư mục chứa middleware dùng để kiểm tra lại chức năng, Restful APIs, chứa phương thức thao tác với sở liệu Chú thích:  Bên cạnh node_modules chứa module package để thực tác vụ Server Thư mục to hay nhỏ phụ thuộc vào lượng module/package cài đặt  Ngồi cịn có package.json: cấu hình mục cần thiết tên phiên dự án, công nghệ sử dụng, scripts Các package phiên sử dụng hiển thị 110 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN KIỂM THỬ MƠ TẢ STT TEST QUY TRÌNH CASE KẾT QUẢ MONG ĐỢI CHROME 79.0.3945.88 (64BIT) Nhấp vào logo user Ứng dụng giữ để hiển thị khung trang tại, đăng ký/đăng nhập đồng thời logo user Nhấp chọn nút Đăng đổi thành avatar Kiểm thử chức đăng nhập nhập người dùng Pass Nhập Email Mật Gõ phím Enter nhấp vào nút Đăng nhập Nhấp vào logo user Ứng dụng giữ Kiểm thử chức đăng nhập nhanh Google, Facebook để hiển thị khung trang tại, đăng ký/đăng nhập đồng thời logo user Nhấp vào nút Đăng đổi thành avatar người dùng nhập Pass Nhấp vào nút Google (avatar lấy từ Facebook tài khoản Xác nhận bước Google cần thiết Facebook) Nhấp vào logo user Ứng dụng giữ để hiển thị khung trang tại, Kiểm thử chức đăng ký đăng ký/đăng nhập đồng thời đẩy câu Nhấp vào nút Đăng thông báo đăng ký ký thành cơng Ngồi Nhập đầy đủ thơng ra, gửi mail tin xác thực tài khoản 111 Pass KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN Nhấp vào nút Đăng đến email vừa sử dụng để đăng ký ký Nhấp vào avatar để Ứng dụng giữ Kiểm thử hiển thị khung thông trang tại, chức tin đăng xuất đồng thời đổi Pass Nhấp vào nút Đăng avatar thành logo xuất user Ở giao diện xem Ứng dụng giữ thông tin tài khoản, trang tại, Kiểm thử nhập lại trường Đồng chức thông tin muốn thay thông tin thay cập nhật đổi thông tin thời đổi Pass Nhấp chọn nút Cập cập nhật lại giao nhật diện xem thông tin tài khoản Nhập tên sản phẩm Hiển thị danh sách Kiểm thử chức muốn tìm kiếm kết gồm Gõ phím Enter thơng tin bản, tìm kiếm nhấp vào icon kính sản phẩm tìm thơng qua hiển vi (có thể chọn thấy tên sản bán kính muốn phẩm tìm khu vực Pass mong muốn) Nhấp vào liên kết Nội Kiểm thử chức chat online dung Chat Chat giao diện Tin hiển thị tức Nhập vào nội dung tên cần Chat Nhấp vào nút Send 112 Pass KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN Kiểm thử chức hiển thị thị khung thông tin chi tiết xem chi tiết sản phẩm sản phẩm giao diện Kiểm thử 10 Nhấp vào kết Hiển chức xem thông tin tin tức Pass Ở giao diện thông tin Mở tab chi tiết sản phẩm, hiển thị thông nhấp vào tên cửa tin tin tức Pass hàng nút Tin tức Ở giao diện chức Hiện thông báo tạo quản lý tin tức, tin tức thành công, nhấn button “Thêm trở lại trang quản Kiểm thử 11 chức tạo tin tức tin tức” Nhấp lý tin tức chuột mẫu Pass template tin tức Nhập thông tin chi tiết tin tức vào form Nhấn nút xác nhận Ở giao diện quản lý Hệ thống thông Kiểm thử 12 chức thêm sản phẩm sản phẩm, chọn sản báo thêm sản phẩm phẩm muốn thêm thành công Quay Nhập thông tin sản lại giao diện quản phẩm vào form Pass lý Nhấn nút “Thêm sản phẩm” Ở giao diện quản lý Hệ thống thông Kiểm thử 13 chức cập nhật sản phẩm Click báo cập nhật sản chọn sản phẩm muốn phẩm thành công cập nhật, chọn mục sản phẩm Quay lại trang quản lý sản phẩm 113 Pass KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN Cập nhật thông tin sản phẩm mục phép thay đổi Nhấn nút xác nhận thay đổi Ở giao diện quản lý Hệ thống thông tin tức Nhấn chọn báo cập nhật tin 14 Kiểm thử tin tức muốn cập tức thành công chức nhật thông tin cập nhật Quay lại trang Cập nhật thông tin quản lý tin tức thông tin tin tin tức form tức mục Pass phép thay đổi Nhấn nút xác nhận Ở giao diện quản lý tin Hệ thống thông 15 Kiểm thử tức, sản phẩm Nhấn báo chức chọn tin tức, sản cơng xóa tin tức, phẩm sản phẩm thơng tin muốn xóa thành Quay lại xóa trang quản lý Pass Nhấn nút xác nhận Nhấp vào liên kết Hiển thị thông Thống kê giao diện tin liên quan đến Kiểm thử 16 chức xem thông tin tài cửa hàng số lượng sản phẩm khoản thống kê Pass thống kê theo mốc thời gian, … Kiểm thử 17 chức Ở giao diện trang chủ Hệ thống thơng có sản phẩm, chọn báo thêm sản phẩm thêm sản thành công 114 qua Pass KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN phẩm vào sản phẩm muốn thêm việc tăng số lượng giỏ hàng vào giỏ hàng giỏ hàng Nhấn nút “Thêm sản session phẩm” Ở giao diện quản lý Hệ thống cập nhật giỏ hàng Click chọn sản phẩm theo số 18 Kiểm thử sản phẩm muốn thay lượng số tiền chức đổi số lượng Nhấn phù hợp Số lượng cập nhật input thay đổi tăng giỏ hàng tăng giảm sản phẩm giảm giỏ hàng Pass phù hợp, sản phẩm Xóa sản phẩm giỏ hàng Nhấn nút “ Xóa sản phẩm” Ở giao diện đặt hàng Chuyển sang Click chọn sản phẩm trang thông tin muốn mua Nhấn nút khách hàng “Tiến hàng đặt hàng” Nếu chưa đăng Ở giao diện thơng tin kí quay trang Nhập đầy đủ thơng tin đăng kí để nhận hàng Nhấn nút mua hàng Kiểm thử 19 chức đặt hàng “Đồng ý” Hệ thống cập nhập a Xem thông tin đơn thông tin Chuyển hàng sang trang Đơn Nhấn nút “Xem” hàng mua b Xóa đơn hàng Nhấn nút “ Xóa đơn hàng” a Hệ thống chuyển sang trang thông tin đơn hàng b Thông báo xóa thành cơng 115 Pass KHĨA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN PHẦN 3: PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Nghiên cứu thành phần công nghệ như: MongoDB, ExpressJS framework, Ejs library NodeJS platform Sử dụng công nghệ kết hợp để xây dựng ứng dụng web bán sản phẩm với chức năng:  Đăng ký/Đăng nhập/Đăng xuất  Đăng nhập nhanh Google/Facebook  Quản lý tài khoản (Xem/Cập nhật thông tin)  Xem chi tiết thông tin sản phẩm/ tin tức  Tìm kiếm sản phẩm  Chat, chia sẻ tin tức, thêm tin tức  Quản lý tin tức, sản phẩm  Cập nhập sản phẩm, tin tức  Thống kế  Đặt hàng  Quản lý đặt hàng khách hàng  Quản lý đơn hàng, khách hàng  Thống kê kho ƯU ĐIỂM  Dữ liệu mật tài khoản đăng nhập vào hệ thống lưu trữ sở liệu cách an tồn nhờ thực thơng qua giải thuật mã hóa  Người dùng dễ dàng đăng nhập nhanh thông qua Google Facebook  Giao diện quản lý, thống kê của người dùng admin dễ sử dụng cho tất người  Hỗ trợ hiển thị giao diện tảng mobile 116 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN  Hỗ trợ chức trò chuyện trực tuyến khách hàng khách hàng khách hàng người quản trị NHƯỢC ĐIỂM  Chưa làm đánh giá sản phẩm khách hàng HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI  Vì tính chất trang web tìm kiếm sản phẩm mua hàng nên đầu tư phát triển tốt chức hạn chế, đồng thời sử dụng Cơ sở liệu phân tán để giúp rút ngắn thời gian tìm kiếm  Cố gắng làm có đủ thời gian cho khách hàng đánh giá sản phẩm đặt  Khắc phục nhược điểm tồn động tại, lắng nghe ý kiến khách hàng đưa cải tiến, giúp người dùng có trải nghiệm tuyệt vời tương lai 117 KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN TÀI LIỆU THAM KHẢO [1] - Tìm hiểu Javascript: https://developer.mozilla.org/vi/docs/Web/JavaScript/Guide/Gioi-thieu [2] – Tìm hiểu NodeJS: https://viblo.asia/p/tim-hieu-ve-node-js-co-ban-ojaqG0dGEKwZ [3] – Những kết luận sai lầm Các công ty lớn sử dụng NodeJS: https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html [4] – Tìm hiểu ExpressJS: https://techblog.vn/phan-1-tim-hieu-express-js-framework [5] – Tìm hiểu MongoDB: https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 [6] – Tìm hiểu mơ hình MVC: https://itphutran.com/mo-hinh-mvc-trong-java-web-jspservlet-la-gi [7] – Tìm hiểu Socket.io https://topdev.vn/blog/co-ban-ve-socketio/ [8] – Tìm hiểu PassportJS https://viblo.asia/p/passport-trong-nodejs-authentication-1VgZvwdrlAw 118 ... vực mà website phát triển: Bán sản phẩm thân thiện với môi trường  Mô hình triển khai: Mơ hình MVC 3.2 Phạm vi nghiên cứu  Phạm vi nghiên cứu hướng đến mô hình mua bán sản phẩm thân thiện với... web o Xem sản phẩm giỏ hàng o Tạo sản phẩm, chỉnh sửa sản phẩm vào website o Tạo tin tức, chỉnh sửa tin tức vào website o Cập nhật sản phẩm, tin tức o Quản lý tin tức o Quản lý sản phẩm o Thống... với môi trường thông báo tin tức cập nhập mơi trường sống xung quanh Từ người nắm thông tin nhanh hơn, ý thức - Vậy nên người thử dùng sản phẩm thân thiện với môi trường ngày Hay muốn biết yêu môi