(Đồ án tốt nghiệp) xây dựng ứng dụng web tạo website bán hàng

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Ệ PHẦN MỀM XÂY DỰNG ỨNG DỤNG WEB TẠO WEBSITE BÁN HÀNG GVHD: ThS NGUYỄN MINH ĐẠO SVTH: MAI ĐỨC TUẤN MSSV: 16110509 SVTH: NGUYỄN VĂN VŨ MSSV: 16110528 SKL007160 Tp Hồ Chí Minh, năm 2020 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 MAI ĐỨC TUẤN: 16110509 NGUYỄN VĂN VŨ: 16110528 Đề tài: XÂY DỰNG ỨNG DỤNG WEB TẠO WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN: ThS NGUYỄN MINH ĐẠO KHÓA 2016 - 2020 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 MAI ĐỨC TUẤN: 16110509 NGUYỄN VĂN VŨ: 16110528 Đề tài: XÂY DỰNG ỨNG DỤNG WEB TẠO WEBSITE BÁN HÀNG KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN: ThS NGUYỄN MINH ĐẠO KHÓA 2016 - 2020 ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc **** ******* *** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Mai Đức Tuấn Họ tên Sinh viên 1: Nguyễn Văn Vũ MSSV 1: 16110509 MSSV 1: 16110528 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng web tạo website bán hàng Họ tên Giáo viên hướng dẫn : ThS Nguyễn Minh Đạo 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… năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc **** ******* *** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Mai Đức Tuấn Họ tên Sinh viên 1: Nguyễn Văn Vũ MSSV 1: 16110509 MSSV 1: 16110528 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng web tạo website bán hàng 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… năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo LỜI CÁM ƠN Trong trình nghiên cứu đề tài, giảng viên hỗ trợ, hướng dẫn sinh viên Với tất kính trọng, nhóm thực đề tài xin bày tỏ lòng biết ơn đến quý thầy cô theo dõi hướng dẫn suốt thời gian thực đề tài Đầu tiên, chúng em xin gửi lời cảm ơn sâu sắc đến Ban giám hiệu trường Đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh tạo điều kiện, mơi trường học tập chất lượng, hiệu cho nhóm phát huy cách tốt nghiên cứu Đồng thời, nhóm xin gửi lời cảm ơn đến Ban Chủ nhiệm khoa Công nghệ Thông tin thầy cô khoa Công nghệ Thông tin - trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh tạo môi trường học tập làm việc chuyên nghiệp, nhiệt tình giảng dạy nhóm thực đề tài nói riêng sinh viên khoa Công nghệ Thông tin nói chung q trình học tập làm việc trường Đặc biệt, xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Đạo – giáo viên hướng dẫn Khóa luận tốt nghiệp – Khoa cơng nghệ thông tin – Đại học Sư phạm Kỹ thuật Tp Hồ Chí Minh, hướng dẫn, quan tâm, góp ý ln đồng đồng hành nhóm giai đoạn khó khăn đề tài Với kinh nghiệm thực tiễn cịn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hồi, đóng góp ý kiến bảo thêm q thầy để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau Xin chân thành cảm ơn! i Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa : CNTT ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ Tên SV thực : Mai Đức Tuấn Mã Số SV : 16110509 Họ Tên SV thực : Nguyễn Văn Vũ Mã Số SV : 16110528 Thời gian làm luận văn: từ 30/03/2020 đến 13/07/2020 Chuyên ngành: Công nghệ phần mềm Tên luận văn: Xây dựng ứng dụng web tạo website bán hàng GV hướng dẫn: ThS Nguyễn Minh Đạo Nhiệm vụ luận văn: Tìm hiểu VueJS, NuxtJS, NodeJS, MongoDB, Docker, NGINX Xây dựng ứng dụng web tạo website bán hàng cách kéo thả, cho phép người dùng xem trước deploy website tự động lên subdomain, tạo website đáp ứng tiêu chí “Responsive Web Design” có chức website bán hàng, đồng thời có cơng cụ quản lý giúp người dùng dễ dàng quản lý sản phẩm đơn hàng Đề cương luận văn: PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu - Đối tượng nghiên cứu - Phạm vi nghiên cứu - Phương pháp nghiên cứu - Kết dự kiến đạt PHẦN NỘI DUNG Chương 1: Cơ sở lý thuyết - Ngôn ngữ lập trinh JavaScript - Hệ quản trị sở liệu MongoDB ii Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo - Nền tảng NodeJS - Nền tảng Docker - Khảo sát số trang web - Kết luận tiêu chí website cần đạt - Usecase diagram - Chi tiết actor - Sơ đồ luồng liệu sở liệu nghiệp vụ - Cơ sở liệu cuối - Các hình giao diện guest - Các hình giao diện user - Các hình giao diện admin - Save page - Publish website - Functional testing - User interface testing PHẦN KẾT LUẬN Kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO iii Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo CHƯƠNG 5: TRÍCH DẪN THUẬT TỐN 5.1 SAVE PAGE • Cấu trúc page PAGE SECTION ELEMENT ELEMENT ELEMENT SECTION ELEMENT SECTION ELEMENT ELEMENT 143 Khóa luận tốt nghiệp kỹ sư CNTT • GVHD: ThS Nguyễn Minh Đạo Sequence diagram • Thuật tốn - Khi save element tự động tạo html lưu vào trường generatedHtml - Khi save section lấy danh sách element section, sau tạo html lưu vào trường generatedHtml - Khi save page + B1: Xóa hết element section page cũ + B2: Tạo element + B3: Tạo section gắn element vào section + B4: Gắn section vào page 144 Khóa luận tốt nghiệp kỹ sư CNTT 5.2 • GVHD: ThS Nguyễn Minh Đạo PUBLISH WEBSITE Sequence diagram • Thuật toán - B1: Tạo folder tên mã website folder customer-apps Đường dẫn thư mục: /customer-apps/{websiteId} - B2: Tạo file handlebar vào folder tạo B1 - B3: Copy folder /webY tới folder tạo B1 Folder chứa file để chạy server, khai báo database, khai báo api - B4: Tạo file config chứa thông tin, dynamic data trang web - B5: Tạo file ecosystem.config.json, file dùng để deploy - B6: Chạy lệnh để deploy website - B7: Tạo file nginx config - B8: restart lại nginx 145 Khóa luận tốt nghiệp kỹ sư CNTT • GVHD: ThS Nguyễn Minh Đạo Cấu trúc cuối Hình 102 Cấu trúc website khách hàng tạo 146 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 6.1 FUNCTIONAL TESTING ID Name Đăng nhập Tạo website Design page Save page Preview Publish Khóa luận tốt nghiệp kỹ sư CNTT Thanh toán Quản lý data Xem profile 10 Đăng kí 11 Quên mật 12 Admin Quản lý danh sách user 13 Admin quản lý danh sách Khóa luận tốt nghiệp kỹ sư CNTT website 14 Admin quản lý danh sách support 6.2 ID Name Homepage About us Contact Template Tạo website Khóa luận tốt nghiệp kỹ sư CNTT Profile Manage website Khóa luận tốt nghiệp kỹ sư CNTT Design website Setting website 10 Manage database 151 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo KẾT LUẬN 1.1 - KẾT QUẢ ĐẠT ĐƯỢC Xây dựng thành công ứng dụng web tạo website bán hàng: o Hỗ trợ kéo thả tạo giao diện o Hỗ trợ preview website thiết kế o Deploy tự động với subdomain - Website bán hàng tạo đáp ứng tiêu chí “Responsive Web Design” Có chức bản: o Tìm kiếm, lọc sản phẩm o Tính giỏ hàng, đặt hàng, o Thông báo email trạng thái đơn hàng thay đổi o Xem lịch sử mua hàng - Vận dụng thành công loại công nghệ phần mềm, công nghệ website mới, đại: Nodejs, Vuejs, RestFul API - Tìm hiểu vận dụng sở liệu mới, tiên tiến, hiệu suất cao - Cách hoạt động nhóm hiệu quả, linh hoạt vị trí lĩnh vực công nghệ thông tin 1.2 ƯU ĐIỂM - Giao diện đơn giản bắt mắt, đơn giản thu hút người dùng - Ứng dụng có cấu trúc hồn thiện, có khả bảo trì nâng cấp - Sử dụng cơng nghệ Website đại, có chia cấu trúc Frontend – Backend rõ ràng - Hệ quản trị sở liệu tiên tiến, hiệu cao - Tạo website nhanh chóng cho người dùng, chạy subdomain - Có hệ thống quản lý cho người tạo website - Website tạo có đầy đủ chức website bán hàng - Có trang cho admin để quản lý danh sách khách hàng, danh sách website khách hàng tạo - Có chức tốn website muốn publish lên internet - Đã có custom component cho người dùng chọn 152 Khóa luận tốt nghiệp kỹ sư CNTT 1.3 GVHD: ThS Nguyễn Minh Đạo NHƯỢC ĐIỂM - Số component để tạo website cịn ít, chưa tùy biến nhiều - Số trang web tạo chạy đồng thời bị giới hạn phần cứng server 1.4 HƯỚNG PHÁT TRIỂN - Tạo thêm nhiều component template, có nhiều tùy chỉnh - Trang web khách hàng tạo có thêm nhiều tính - Thêm tính phân quyền cho trang web quản trị khách hàng (thêm cộng tác viên thiết kế website, quản lý database…) - Nghiên cứu áp dụng việc cân tải server giúp phá bỏ rào cản việc phần cứng server làm giới hạn số lượng website chạy đồng thời 153 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo TÀI LIỆU THAM KHẢO [1] https://vuejs.org/v2/guide/, 2018, Hướng dẫn sử dụng VueJS [2] https://hocvps.com/huong-dan-quan-ly-vps-o-vultr/, 2014, Hướng dẫn quản lý VPS Vultr [3] https://www.hostinger.vn/huong-dan/cach-tro-ten-mien-ve-host-hostinger/ , 2017, Cách trỏ tên miền host Hostinger [4] https://v4.keystonejs.com/documentation/, 2015, Hướng dẫn cài đặt sử dụng KeyStoneJS [5] https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/ , 2016, Hướng dẫn sử dụng công cụ pm2 154 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo PHỤ LỤC 155 ... tạo website bán hàng người dùng 1.3.2 Phạm vi nghiên cứu - Nghiên cứu sử dụng VueJS, NodeJS, docker, NGINX để tạo ứng dụng web tạo website bán hàng cách kéo thả, tạo website có tính website bán. .. văn: Xây dựng ứng dụng web tạo website bán hàng GV hướng dẫn: ThS Nguyễn Minh Đạo Nhiệm vụ luận văn: Tìm hiểu VueJS, NuxtJS, NodeJS, MongoDB, Docker, NGINX Xây dựng ứng dụng web tạo website bán hàng. .. nghệ ứng dụng chúng vào thưc tiễn Xây dựng ứng tạo website bán hàng cách đơn giản nhanh chóng giúp người dùng vài phút thiết kế có website bán hàng, cho phép người dùng xem trước deploy website