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 GVHD: ThS Nguyễn Minh Đạo MỤC LỤC LỜI CÁM ƠN i ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP .ii MỤC LỤC HÌNH ẢNH MỤC LỤC BẢNG BIỂU PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.2 MỤC TIÊU CỦA ĐỀ TÀI 1.3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu 1.3.3 Phương pháp nghiên cứu 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 NGƠN NGỮ LẬP TRÌNH JAVASCRIPT 1.2 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MONGODB 1.2.1 Giới thiệu 1.2.2 Ưu điểm 1.2.3 Nhược điểm 1.3 NỀN TẢNG NODEJS 10 1.3.1 Giới thiệu 10 1.3.2 Đặc điểm 10 1.4 FRAMEWORK VUEJS 10 1.5 NỀN TẢNG DOCKER 11 1.5.1 Giới thiệu 11 1.5.2 Đặc điểm 11 1.5.3 Một số khái niệm 11 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 13 2.1 KHẢO SÁT MỘT SỐ TRANG WEB 13 2.1.1 Wordpress (http://www.wordpress.com) 13 2.1.2 Wix (https://www.wix.com) 15 2.1.3 Weebly (http://www.weebly.com) 17 2.2.1 Những ưu điểm cần học 18 Khóa luận tốt nghiệp kỹ sư CNTT 2.2.2 GVHD: ThS Nguyễn Minh Đạo Những nhược điểm cần khắc phục 19 CHƯƠNG 3: MƠ HÌNH HÓA YẾU CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 20 3.1 USE CASE DIAGRAM 20 3.2 CHI TIẾT CÁC ACTOR 21 3.2.1 Guest 21 3.2.2 User 26 3.2.3 Admin 35 3.3 SƠ ĐỒ LUỒNG DỮ LIỆU VÀ CƠ SỞ DỮ LIỆU CÁC NGHIỆP VỤ 39 3.3.1 Các nghiệp vụ Guest 39 3.3.2 Các nghiệp vụ User 52 3.3.3 Các nghiệp vụ Admin 80 3.4 CƠ SỞ DỮ LIỆU CUỐI CÙNG 86 3.4.1 Cơ sở liệu 86 3.4.2 Mô tả sở liệu 87 3.4.3 Mô tả sở liệu website khách hàng 92 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 95 4.1 CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST 95 4.1.1 Màn hình đăng nhập 95 4.1.2 Màn hình đăng ký 97 4.1.3 Màn hình quên mật 99 4.1.4 Màn hình reset mật 101 4.1.5 Màn hình section header trang chủ 103 4.1.6 Màn hình section service trang chủ 104 4.1.7 Màn hình section template trang chủ 105 4.1.8 Màn hình section about-us trang chủ 107 4.1.9 Màn hình section contact trang chủ 108 4.1.10 Màn hình section footer trang chủ 109 4.1.11 Màn hình chọn template 110 4.2 CÁC MÀN HÌNH GIAO DIỆN CỦA USER 111 4.2.1 Màn hình trang chủ 111 4.2.2 Màn hình trang template 111 4.2.3 Màn hình khởi tạo website 111 4.2.4 Màn hình kết tạo webiste 114 4.2.5 Màn hình quản lý danh sách web 115 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo 4.2.6 Màn hình trang cấu hình website 116 4.2.7 Màn hình trang thiết kế website 117 4.2.8 Màn hình trang quản lý database website 121 4.2.9 Màn hình trang quản lý product 123 4.2.10 Màn hình trang quản lý chi tiết product 125 4.2.11 Màn hình trang quản lý order 127 4.2.12 Màn hình trang quản lý chi tiết order 128 4.2.13 Màn hình trang upload file 130 4.2.14 Màn hình trang quản lý danh sách user 130 4.2.15 Màn hình trang quản lý chi tiết user 131 4.2.16 Màn hình trang quản lý danh sách support 133 4.2.17 Màn hình trang quản lý chi tiết support 133 4.3 CÁC MÀN HÌNH GIAO DIỆN CỦA ADMIN 135 4.3.1 Màn hình trang quản lý danh sách user 135 4.3.2 Màn hình trang quản lý chi tiết user 137 4.3.3 Màn hình trang quản lý danh sách website 138 4.3.4 Màn hình trang quản lý chi tiết website 139 4.3.5 Màn hình trang quản lý danh sách support 140 4.3.6 Màn hình trang quản lý chi tiết support 141 CHƯƠNG 5: TRÍCH DẪN THUẬT TOÁN 143 5.1 SAVE PAGE 143 5.2 PUBLISH WEBSITE 145 CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 147 6.1 FUNCTIONAL TESTING 147 6.2 USER INTERFACE TESTING 149 KẾT LUẬN 152 1.1 KẾT QUẢ ĐẠT ĐƯỢC 152 1.2 ƯU ĐIỂM 152 1.3 NHƯỢC ĐIỂM 153 1.4 HƯỚNG PHÁT TRIỂN 153 TÀI LIỆU THAM KHẢO 154 PHỤ LỤC 155 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo MỤC LỤC HÌNH ẢNH Hình Trang chủ wordpress 13 Hình Trang chọn theme template 13 Hình Trang quản lý site wordpress 14 Hình Trang quản lý site wix 15 Hình Trang danh sách template wix 15 Hình Trang chỉnh sửa giao diện wix 16 Hình Trang quản lý site weebly 17 Hình Trang thiết kế giao diện weebly 17 Hình Trang chủ weebly 18 Hình 10 Sơ đồ use case diagram 20 Hình 11 Biểu mẫu đăng ký 22 Hình 12 Biểu mẫu đăng nhập 23 Hình 13 Biểu mẫu quên mật 23 Hình 14 Biểu mẫu xem trang chủ 24 Hình 15 Biểu mẫu xem trang template 24 Hình 16 Biểu mẫu preview template 25 Hình 17 Biểu mẫu yêu cầu hỗ trợ 25 Hình 18 Biểu mẫu cấu hình website 30 Hình 19 Biểu mẫu quản lý website 30 Hình 20 Biểu mẫu quản lý sản phẩm 31 Hình 21 Biểu mẫu quản lý đơn hàng 31 Hình 22 Biểu mẫu quản lý user 32 Hình 23 Biểu mẫu quản lý yêu cầu hỗ trợ 32 Hình 24 Biểu mẫu setting website 33 Hình 25 Biểu mẫu thiết kế giao diện 33 Hình 26 Biểu mẫu quản lý profile 34 Hình 27 Biểu mẫu trang tốn 34 Hình 28 Biểu mẫu admin quản lý user 36 Hình 29 Biểu mẫu admin xem chi tiết user 36 Hình 30 Biểu mẫu admin quản lý website 37 Hình 31 Biểu mẫu admin xem chi tiết website 37 Hình 32 Biểu mẫu admin quản lý yêu cầu hỗ trợ 38 Hình 33 Biểu mẫu admin xem chi tiết yêu cầu hỗ trợ 38 Hình 34 CSDL nghiệp vụ đăng kí guest 40 Hình 35 CSDL nghiệp vụ quên mật guest 44 Hình 36 CSDL nghiệp vụ xem trang template guest 47 Hình 37 CSDL nghiệp vụ preview template guest 49 Hình 38 CSDL nghiệp vụ yêu cầu hỗ trợ guest 51 Hình 39 CSDL nghiệp vụ cấu hình website user 55 Hình 40 CSDL nghiệp vụ quản lý sản phẩm user 61 Hình 41 CSDL nghiệp vụ quản lý đơn hàng user 64 Hình 42 CSDL nghiệp vụ quản lý người dùng user 66 Hình 43 CSDL nghiệp vụ quản lý yêu cầu hỗ trợ user 68 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo Hình 44 CSDL nghiệp vụ lưu page user 73 Hình 45 CSDL nghiệp vụ tốn user 80 Hình 46 Cơ sở liệu cuối 86 Hình 47 Cơ sở liệu website khách hàng tạo 86 Hình 48 Giao diện đăng nhập 95 Hình 49 Xử lý giao diện đăng nhập 96 Hình 50 Giao diện đăng ký 97 Hình 51 Xử lý giao diện đăng ký 98 Hình 52 Giao diện quên mật 99 Hình 53 Xử lý giao diện đăng ký 100 Hình 54 Giao diện reset mật 101 Hình 55 Xử lý giao diện reset mật 102 Hình 56 Giao diện section header trang chủ 103 Hình 57 Xử lý giao diện section header trang chủ 104 Hình 58 Giao diện section service trang chủ 104 Hình 59 Giao diện section template trang chủ 105 Hình 60 Giao diện section about us trang chủ 107 Hình 61 Giao diện section contact trang chủ 108 Hình 62 Xử lý giao diện section contact trang chủ 109 Hình 63 Giao diện section footer trang chủ 109 Hình 64 Giao diện trang chọn template 110 Hình 65 Giao diện trang khởi tạo website 112 Hình 66 Xử lý giao diện đăng nhập 113 Hình 67 Giao diện trang kết tạo website 114 Hình 68 Giao diện trang danh sách website 115 Hình 69 Giao diện trang cấu hình website 116 Hình 70 Giao diện trang thiết kế website 117 Hình 71 Giao diện trang thiết kế website 118 Hình 72 Xử lý giao diện trang thiết kế website 119 Hình 73 Xử lý giao diện trang thiết kế website 120 Hình 74 Giao diện trang quản lý database website 121 Hình 75 Xử lý giao diện quản lý database website 122 Hình 76 Giao diện trang quản lý product 123 Hình 77 Xử lý giao diện trang quản lý product 124 Hình 78 Giao diện trang quản lý chi tiết product 125 Hình 79 Xử lý giao diện trang quản lý chi tiết product 126 Hình 80 Giao diện trang quản lý order 127 Hình 81 Xử lý giao diện trang quản lý order 127 Hình 82 Giao diện trang quản lý chi tiết order 128 Hình 83 Xử lý giao diện trang quản lý chi tiết order 129 Hình 84 Giao diện trang upload file 130 Hình 85 Giao diện trang quản lý danh sách order 130 Hình 86 Xử lý giao diện trang quản lý danh sách user 131 Hình 87 Giao diện trang quản lý chi tiết user 131 Hình 88 Xử lý giao diện trang quản lý chi tiết user 132 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo Hình 89 Giao diện trang quản lý danh sách support 133 Hình 90 Giao diện trang quản lý chi tiết support 133 Hình 91 Xử lý giao diện trang quản lý chi tiết support 134 Hình 92 Giao diện trang quản lý danh sách user 135 Hình 93 Xử lý giao diện trang quản lý danh sách user 136 Hình 94 Giao diện trang quản lý chi tiết user 137 Hình 95 Xử lý giao diện trang quản lý chi tiết user 137 Hình 96 Giao diện trang quản lý danh sách website 138 Hình 97 Giao diện trang quản lý chi tiết website 139 Hình 98 Xử lý giao diện trang quản lý chi tiết website 139 Hình 99 Giao diện trang quản lý danh sách support 140 Hình 100 Giao diện trang quản lý chi tiết support 141 Hình 101 Xử lý giao diện trang quản lý chi tiết support 141 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 MỤC LỤC BẢNG BIỂU Bảng Bảng nghiệp vụ guest 21 Bảng Bảng quy định guest 22 Bảng Bảng nghiệp vụ user 27 Bảng Bảng quy định user 29 Bảng Bảng nghiệp vụ admin 35 Bảng Bảng quy định admin 35 Bảng Bảng mô tả liệu user 87 Bảng Bảng mô tả liệu website 87 Bảng Bảng mô tả liệu page 88 Bảng 10 Bảng mô tả liệu section 88 Bảng 11 Bảng mô tả liệu element 89 Bảng 12 Bảng mô tả liệu component 89 Bảng 13 Bảng mô tả liệu component_type 89 Bảng 14 Bảng mô tả liệu layout 89 Bảng 15 Bảng mô tả liệu user game 90 Bảng 16 Bảng mô tả liệu template_website 90 Bảng 17 Bảng mô tả liệu template_notification 90 Bảng 18 Bảng mô tả liệu notification 91 Bảng 19 Bảng mô tả liệu support 91 Bảng 20: Bảng mô tả liệu payment 92 Bảng 21: Bảng mô tả liệu payment request 92 Bảng 22 Bảng mô tả liệu product 92 Bảng 23 Bảng mô tả liệu order 93 Bảng 24 Bảng mô tả liệu order item 93 Bảng 25 Bảng mô tả liệu support 93 Bảng 26 Bảng mô tả liệu user 94 Bảng 27 Mô tả đối tượng giao diện trang đăng nhập 95 Bảng 28 Bảng danh sách xử lý đăng nhập 96 Bảng 29 Mô tả đối tượng giao diện trang đăng ký 98 Bảng 30 Bảng danh sách xử lý đăng ký 99 Bảng 31 Mô tả đối tượng giao diện trang quên mật 99 Bảng 32 Bảng danh sách xử lý quên mật 100 Bảng 33 Mô tả đối tượng giao diện trang reset mật 101 Bảng 34 Bảng danh sách xử lý quên mật 102 Bảng 35 Mô tả đối tượng giao diện section header trang chủ 103 Bảng 36 Bảng danh sách xử lý section header trang chủ 104 Bảng 37 Mô tả đối tượng giao diện section header trang chủ 105 Bảng 38 Mô tả đối tượng giao diện section template trang chủ 106 Bảng 39 Mô tả đối tượng giao diện section about us trang chủ 108 Bảng 40 Mô tả đối tượng giao diện section contact trang chủ 108 Bảng 41 Bảng danh sách xử lý section header trang chủ 109 Bảng 42 Mô tả đối tượng giao diện section footer trang chủ 110 Bảng 43 Mô tả đối tượng giao diện trang chọn template 111 Bảng 44 Mô tả đối tượng giao diện trang khởi tạo website 112 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo Bảng 45 Bảng danh sách xử lý đăng nhập 113 Bảng 46 Mô tả đối tượng giao diện trang kết tạo website 114 Bảng 47 Mô tả đối tượng giao diện trang quản lý danh sách website 115 Bảng 48 Mô tả đối tượng giao diện trang cấu hình webiste 117 Bảng 49 Mô tả đối tượng giao diện trang thiết kế website 119 Bảng 50 Bảng danh sách xử lý thiết kế website 120 Bảng 51 Mô tả đối tượng giao diện quản lý database website 122 Bảng 52 Bảng danh sách xử lý quản lý database website 122 Bảng 53 Mô tả đối tượng giao diện quản lý product 123 Bảng 54 Bảng danh sách xử lý quản lý product 124 Bảng 55 Mô tả đối tượng giao diện quản lý chi tiết product 126 Bảng 56 Bảng danh sách xử lý quản lý chi tiết product 126 Bảng 57 Mô tả đối tượng giao diện quản lý order 127 Bảng 58 Bảng danh sách xử lý quản lý order 128 Bảng 59 Mô tả đối tượng giao diện quản lý chi tiết order 129 Bảng 60 Bảng danh sách xử lý quản lý chi tiết order 129 Bảng 61 Mô tả đối tượng giao diện trang upload file 130 Bảng 62 Mô tả đối tượng giao diện quản lý danh sách user 131 Bảng 63 Bảng danh sách xử lý danh sách user 131 Bảng 64 Mô tả đối tượng giao diện quản lý chi tiết user 132 Bảng 65 Bảng danh sách xử lý quản lý chi tiết user 132 Bảng 66 Mô tả đối tượng giao diện quản lý danh sách support 133 Bảng 67 Mô tả đối tượng giao diện quản lý chi tiết support 134 Bảng 68 Bảng danh sách xử lý quản lý chi tiết support 134 Bảng 69 Mô tả đối tượng giao diện quản lý danh sách user 136 Bảng 70 Bảng danh sách xử lý quản lý danh sách user 136 Bảng 71 Mô tả đối tượng giao diện quản lý chi tiết user 137 Bảng 72 Bảng danh sách xử lý quản lý chi tiết user 138 Bảng 73 Mô tả đối tượng giao diện quản lý danh sách website 138 Bảng 74 Mô tả đối tượng giao diện quản lý chi tiết website 139 Bảng 75 Bảng danh sách xử lý quản lý chi tiết website 140 Bảng 76 Mô tả đối tượng giao diện quản lý danh sách support 140 Bảng 77 Mô tả đối tượng giao diện quản lý chi tiết support 141 Bảng 78 Bảng danh sách xử lý quản lý chi tiết support 142 Bảng 79: Bảng functional test case 149 Bảng 80: Bảng user interface test case 151 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Tốc độ phát triển xã hội ngày nhanh Công nghệ ngày phát triển Và điều kiện thuận lợi để thương mại điện tử ngày phát triển Đối với nhà kinh doanh, doanh nghiệp, từ thương mại điện tử xuất chi phí sản xuất, chi phí tìm kiếm khách hàng, chi phí bán hàng, chi phí tiếp thị giảm mạnh Quy mơ khách hàng mở rộng Dễ dàng tìm kiếm khách hàng đối tác Quá trình kinh doanh diễn nhanh Theo đó, suất bán hàng, lợi nhuận tăng nhiều Đối với khách hàng, kênh thương mại điện tử ln mở 24/7 nên việc tìm hiểu mua sản phẩm diễn lúc Tiết kiệm thời gian, chi phí lại Ngồi ra, khách hàng lựa chọn, so sánh nhiều loại sản phẩm để chọn sản phẩm tốt cho Tuy nhiên, để tạo kênh thương mại điện tử cần phải có nhiều hiểu biết công nghệ, tốn nhiều thời gian công sức Nắm bắt xu hướng tiếp cận vấn đề đó, nhóm định chọn đề tài “Xây dựng ứng dụng tạo website bán hàng” làm đề tài nghiên cứu đồng thời ứng dụng thực tế 1.2 MỤC TIÊU CỦA ĐỀ TÀI Đề tài đời với mục đích giúp sinh viên tổng hợp lại kiến thức tiếp thu q trình, đồng thời có nhìn tổng quan ngành lập trình web Là hội để sinh viên tìm hiểu cơ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 tự động, website tạo đá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 Khóa luận tốt nghiệp kỹ sư CNTT 1.3 GVHD: ThS Nguyễn Minh Đạo CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1.3.1 Đối tượng nghiên cứu - Nghiên cứu sử dụng ngôn ngữ JavaScript, framework VueJS, tảng NodeJS, docker, NGINX để xây dựng ứng dụng - Sử dụng hệ quản trị sở liệu MongoDB để xây dựng database lưu trữ liệu - Nghiên cứu nhu cầu sử dụng, 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 hàng, cho phép deoploy tự động lên subdomain 1.3.3 Phương pháp nghiên cứu - Phương pháp tổng hợp lý thuyết: nghiên cứu tìm hiểu tài liệu, ứng dụng liên quan đến cơng nghệ tìm hiểu - Phương pháp chun gia: tham khảo ý kiến thầy hướng dẫn anh chị, bạn bè có kinh nghiệm liên quan đến vấn đề tiểu luận tạo độ xác khoa học cho đề tài - Phương pháp mô hình hóa: mơ ứng dụng bước từ thiết kế cài đặt kết thành phẩm ứng dụng 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC ‑ Tạo công cụ hỗ trợ kéo thả giao diện, tùy biến thành phần website (màu sắc, style, theme, font chữ, bố cục) ‑ Cho phép preview deploy website tự động subdomain ‑ Các website tạo đáp ứng tiêu chí “Responsive Web Design” ‑ Tạo cơng cụ quản lý database cho website tạo ‑ Website tạo có chức website bán hàng: 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 Khóa luận tốt nghiệp kỹ sư CNTT 4.3.4.4 GVHD: ThS Nguyễn Minh Đạo Lập danh sách xử lý STT Điều kiện gọi thực Tên xử lý Restart website Click vào button “Restart” Stop website Click vào button “Stop” Bảng 75 Bảng danh sách xử lý quản lý chi tiết website 4.3.4.5 Mô tả xử lý: tương tự phần 3.3.3.2 4.3.5 Màn hình trang quản lý danh sách support 4.3.5.1 Mơ tả đối tượng giao diện Hình 99 Giao diện trang quản lý danh sách support 4.3.5.2 Danh sách đối tượng Tên đối tượng GD STT Kiểu hrDashboard Href lblSupport Label txtSearch TextBox tbSupport Table btnPrevPage Button btnPage Button btnNextPage Button cbbPageSize Combobox Bảng 76 Mô tả đối tượng giao diện quản lý danh sách support 140 Ghi Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS Nguyễn Minh Đạo 4.3.6 Màn hình trang quản lý chi tiết support 4.3.6.1 Mơ tả đối tượng giao diện Hình 100 Giao diện trang quản lý chi tiết support 4.3.6.2 Danh sách đối tượng Tên đối tượng GD STT Kiểu hrDashboard Href hrSupport Href txtName TextBox txtPhone TextBox txtEmail TextBox cbbStatus Combobox taQuestion TextArea btnSave Button Bảng 77 Mô tả đối tượng giao diện quản lý chi tiết support 4.3.6.3 Thiết giao diện thiết kế xử lý Hình 101 Xử lý giao diện trang quản lý chi tiết support 141 Ghi 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 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 File dung để trỏ subdomain trang web tới port - 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 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 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 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 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 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 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 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 ... 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. .. 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. .. database cho website tạo ‑ Website tạo có chức website bán hàng: 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 Khóa luận