(Đồ án hcmute) 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 SKL 0 Tp Hồ Chí Minh, năm 2020 an 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 an 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 an Đ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 MSSV 1: 16110509 Họ tên Sinh viên 1: Nguyễn Văn Vũ 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) an Đ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 MSSV 1: 16110509 Họ tên Sinh viên 1: Nguyễn Văn Vũ 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) an 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 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 an 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 an 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 Chương 2: Khảo sát trạng ‑ Khảo sát số trang web ‑ Kết luận tiêu chí website cần đạt Chương 3: Mơ hình hóa u cầu thiết kế sở liệu ‑ Usecase diagram ‑ Chi tiết actor ‑ Sơ đồ luồng liệu sở liệu nghiệp vụ ‑ Cơ sở liệu cuối Chương 4: Thiết kế giao diện xử lý ‑ Các hình giao diện guest ‑ Các hình giao diện user ‑ Các hình giao diện admin Chương 5: Trích dẫn thuật tốn ‑ Save page ‑ Publish website Chương 6: Kiểm thử phần mềm ‑ 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 an Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo KẾ HOẠCH THỰC HIỆN STT Thời gian 30/03 → 13/04/2020 13/04 →27/04/2020 Công việc - Thiết kế giao diện trang admin WebX - Tạo reverse proxy NGINX để điều phối subdomain - Tạo chức trang admin WebX - Deploy app docker - Cải tiến chức kéo thả giao 27/04 → 04/05/2020 diện cho WebX - Tìm hiểu toán Momo - Làm giao diện chức toán 04/05 → 18/05/2020 - Thêm component cho WebX - Tích hợp tốn Momo backend 18/05 → 25/05/2020 - Tạo thêm component, template cho WebX 25/05 → 08/06/2020 - Làm chức liên quan đến user cho web khách hàng 08/06 → 15/06/2020 15/06 → 22/06/2020 - Hoàn thiện ứng dụng, test fix 22/06 → 13/07/2020 bug - Cải thiện giao diện WebX - Nghiên cứu tạo file server - Cải tiến hiệu suất cho WebX WebY - Viết báo cáo iv an Ghi Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo Ngày 30 tháng năm 2020 Người viết đề cương Mai Đức Tuấn Ý kiến giáo viên hướng dẫn (ký ghi rõ họ tên) v an Khóa luận tốt nghiệp kỹ sư CNTT 4.3.6.4 STT GVHD: ThS Nguyễn Minh Đạo Lập danh sách xử lý Điều kiện gọi thực Tên xử lý Lưu support Click vào button “Save” Bảng 78 Bảng danh sách xử lý quản lý chi tiết support 4.3.6.5 Mô tả xử lí giống 3.3.3.3 142 an 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 an 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 an 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 File dung để trỏ subdomain trang web tới port - B8: restart lại nginx 145 an 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 an 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 Expected result Step result Đăng nhập - Thông báo thất bại đăng nhập thất bại - Chuyển hướng đến trang chủ đăng nhập thành công B1: Click button login góc phải hình Pass B2: Trang web chuyển đến trang login, có form login gồm username password B3: Nhập username password B4: Click button login Tạo website website tạo ra, gồm page: + home + about-us + contact + cart + detail B1: Click nút "create your website now" trang chủ B2: Chọn template(optional), sau nhấn skip B3: Nhập tên website, subdomain, upload logo nhấn create Design page - Kéo thả component từ ngồi vơ: component hiển thị đúng, ko bị vỡ lay out - Sửa style component: component thay đổi tương ứng - Thay đổi theme: page thay đổi theme tương ứng - Sửa style header foooter: header footer thay đổi tương ứng Ở trang quản lý danh sách website B1: Nhấn vào nút design website B2: Thực design page Pass Save page Sau save, người dùng f5 lại trang, thay đổi giữ lại Ở trang design website B1: Thực design page B2: Nhấn vào nút save pass Preview Người dùng preview tồn Ở trang design website website họ B1: Người dùng nhấn nút preview Pass Publish - Sau nhấn nút publish, thông báo "your website is running on abc.designwebx.online", người dùng truy cập web Ở trang design website B1: Người dùng nhấn nút publish website Pass 147 an Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo abc.designwebx.online - Nếu người dùng chưa tốn, chuyển đến trang tốn Thanh toán - Hiện thị trang toán - Người dùng dùng mã QR quét mã toán Sau người dùng nhấn publish website, người dùng chưa tốn, chuyển đến trang tốn momo Pass Quản lý data - Người dùng tới trang quản lý thao tác với data họ Ở trang quản lý danh sách website B1: Người dùng chọn managedatabase B2: Chuyển đến trang quản lý data cho người dùng B3: Người dùng quản lý user, contact, order, product pass Xem profile Xem thông tin user bao gồm name email phone gender Sau đăng nhập, người dùng click vào account góc bên phải, chọn profile Pass 10 Đăng kí Thơng báo tài khoản tạo thành cơng chuyển hướng trang chủ Đang trang chủ Pass B1: Click vào nút Login góc phải hình Màn hình form login B2: Click vào register now B3: Hiện form đăng kí B4: Điền thơng tin vào click nút đăng kí 11 Quên mật Nhận email có gắn link tới trang đổi mật Đang trang chủ Pass B1: Click vào nút Login góc phải hình Màn hình form login B2: Click vào "Forgot your password" B3: Hiện form nhập email B4: Nhập email muốn lấy lại mật "Send" 12 Admin Có thể thêm sửa xóa update Quản lý danh sách user danh sách user B1: Vào admin.designwebx.online B2: Chọn mục user B3: Quản lý user Pass 13 Admin Có thể xem danh sách, detail quản lý deploy stop danh sách website B1: Vào admin.designwebx.online B2: Chọn mục website Pass 148 an Khóa luận tốt nghiệp kỹ sư CNTT 14 GVHD: ThS Nguyễn Minh Đạo website B3: Quản lý website Admin Có thể thêm sửa xóa update quản lý danh sách support danh sách support B1: Vào admin.designwebx.online B2: Chọn mục support B3: Quản lý support pass Bảng 79: Bảng functional test case 6.2 USER INTERFACE TESTING ID Name Expected result Homepage - Nó nên hiển thị trang chủ website, gồm: Step Result B1: Truy cập Pass designwebx.online + Danh sách template sẵn có + Các animation nên hoạt động + Mục gửi contact cho admin + Thông tin "about us" About us Trang web scroll đến mục about B1: Truy cập us designwebx.online Pass B2: Click vào "ABOUT US" nav bar Contact Trang web scroll đến mục contact B1: Truy cập Pass designwebx.online B2: Click vào "CONTACT" nav bar Template Trang web scroll đến mục B1: Truy cập designweb template B2: Click vào Pass "TEMPLATE" nav bar Tạo B1: Hiển thị trang chủ B1: Truy cập website B2: designwebx.online - Trang web nên chuyển hướng đến B2: Click button http://designwebx.online/create- "CREATE YOUR website WEBSITE" - Hiện thị danh sách template cho B3: Chọn template 149 an Pass Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo người dùng chọn nhấn skip - Số tơ hình trịn B4: Điền tên website, xanh (được hiểu step 1) domain, upload logo B3: nhấn "CREATE - Số tơ hình tròn WEBSITE" xanh (được hiểu step 2) - Hiện thị input field để nhập tên website - Hiển thị input field để nhập tên domain - Hiển thị button "UPLOAD LOGO" button - Hiển thị template chọn (nếu có) B4: - Số tơ hình tròn xanh (được hiểu step 3) - Title trang "Create website success" - Hiển thị button "DESIGN YOUR WEBSITE" Profile - Bên trái hiển thị danh sách B1: Truy cập component designwebx.online - Bên phải thị Page thiết B2: Login kế B3: Click vào tên người - Trên hiển thị menu, dùng góc bên phải bao gồm: B4: Click vào Profile + Button save, button preview, menu xổ xuống Pass button publish + List page, list theme + Setting Manage - Hiển thị danh sách website mà B1: Truy cập website người dùng tạo theo hàng designwebx.online - Mỗi hàng bao gồm tên website, B2: Login B3: Click vào tên người 150 an Pass Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo button "Setting" button "Design" dùng góc bên phải B4: Click vào "MANAGE WEBSITE" menu xổ xuống Design - Bên trái hiển thị danh sách C1: website component - Từ trang Manage - Bên phải thị Page thiết website, click vào button kế "Design" - Trên hiển thị menu, C2: bao gồm: - Trong bước tạo + Button save, button preview, website, click "DESIGN button publish YOUR WEBSITE" Pass + List page, list theme + Setting Setting - HIện thị tên website tiêu đề C1: website - Ở bên trái, hiển thị: - Từ trang Manage + Link website website, click vào button + Logo website "Setting" + Button "Manage Database" C2: - Ở bên phải, hiển thị danh sách - Từ trang design, click pages theo hàng, bao gồm: vào mục setting + Tên page navbar Pass + Button Preview + Button Design 10 Manage - Trang web nên chuyển hướng tới B1:Từ trang setting database trang quản lý data website, click vào button - Hiển thị side menu bên trái, gồm: "Manage database" order, product, user, contact - Bên phải hiển thị chart Bảng 80: Bảng user interface test case 151 an Pass 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 an 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 í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 an 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 an Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo PHỤ LỤC 155 an S an K L 0 ... 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