Website bán quần áo, phụ kiện thời trang với chat bot tư vấn

Mục tiêu Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm theo hiểu biết và trải nghiệm từ phía người dùng, để tạo nên một website bán hàng online hoàn chỉnh –

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1 WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG

VỚI CHAT BOT TƯ VẤN

LỜI CẢM ƠN

Nhóm chúng em xin chân thành cảm ơn trường Đại học Công nghệ thông tin nói chung và GV ThS Nguyễn Thị Thanh Trúc nói riêng đã tạo điều kiện cho chúng em thực hiện đồ án 1 này

Với sự giúp đỡ của GV ThS Nguyễn Thị Thanh Trúc chúng em đã xây dựng thành công một trang web full stack với các chức năng phù hợp với nhu cầu của người dùng

Đề tài này của nhóm đã được hoàn thành trong vòng 4 tháng tính luôn cả thời gian học về các ngôn ngữ front end và back end Vì là lần đầu nhóm chúng em tiếp cận với lập trình web nên có thể vẫn còn tồn tại các lỗi không mong muốn Nhóm em rất mong nhận được sự góp ý của cô để giúp mình ngày càng hoàn thiện và có nhiều kinh nghiệm hơn để chuẩn bị cho các đồ án, các sản phẩm cho tương lai

Một lần nữa, chúng em xin chân thành cảm ơn GV ThS Nguyễn Thị Thanh Trúc và chúc

cô luôn dồi dào sức khỏe để tiếp tục công việc đào tạo các lớp trẻ IT tiếp theo

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

……., ngày…… tháng……năm 2022

(Ký tên và ghi rõ họ tên)

Tên đề tài: Xây dựng website bán quần áo, phụ kiện thời trang với chatbot tư vấn

Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc

Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 11/6/2022

Sinh viên thực hiện:

Võ Thành Phát – 19522003

Võ Tấn Việt - 19522519

Nội dung đề tài:

Giới thiệu bài toán:

Ngày nay, xã hội ngày càng phát triển, đời sống con người càng được cải thiện, người ta không chỉ no đủ vật chất mà còn chú trọng nhiều đến đời sống tinh thần, đặc biệt là thời trang nhằm thỏa mãn nhu cầu thẩm mỹ ngày càng cao Dân gian cũng đã có câu "Người đẹp vì lụa, lúa tốt vì phân"

là lẽ đó, cách ăn mặc có mối quan hệ khá mật thiết với văn hoá, phản ánh một phần đời sống, văn minh của con người Chính vì thế, như một lẽ tự nhiên của thời đại công nghệ 4.0, các website thương mại, buôn bán quần áo ngày càng phát triển và được tín dụng Một phần là vì nó cung cấp cho người dùng những sự tiện lợi, nhanh gọn trong mua bán sản phẩm, vừa giúp người dùng có thể lựa ra cho mình những món đồ ưng ý, hợp với nhu cầu nhất mà không nhất thiết phải ra tận cửa hàng để có thể lựa chọn như ngày xưa Nhờ có các webstie thương mại mà các chủ cửa hàng quần

áo có thể tạo các website đơn giản, phục vụ mục đích bán hàng của mình lại còn tăng cao thu nhập

Mục tiêu

Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm theo hiểu biết và trải nghiệm từ phía người dùng, để tạo nên một website bán hàng online hoàn chỉnh – tối ưu hoá về mọi mặt, để sau này dễ phát triển

- Học và tìm hiểu các ngôn ngữ lập trình, công nghệ hỗ trợ phát triển 1 trang web full stack

- Tìm hiểu về kiến trúc hệ thống cũng như quản lý database

- Tìm hiểu và nghiên cứu về chatbot

- Tìm hiểu cách mô phỏng giao diện của một ứng dụng trên Figma

- Vẽ được các diagram mô tả các chức năng của hệ thống

- Xây dựng thành công website bán quần áo, phụ kiện thời trang

- Tìm hiểu và học về HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL

- Khảo sát thực trạng các website bán quần áo trên thị trường

- Phân tích thiết kế hệ thống và xây dựng website

- Tìm hiểu về thiết kế UX/UI và tiến hành thiết kế giao diện cho website

- Xây dựng website cho người dung và nhân viên

- Tiến hành triển khai và kiểm thử

Công nghệ, ngôn ngữ nghiên cứu và thiết kế chatbot: Rasa framework, Python

Công cụ thiết kế UI : Figma

Công cụ phân tích thiết kế, vẽ diagram: draw.io

Công cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE

Công cụ quản lý dự án: Github, Messenger Group, MicrosoftTeams

Công cụ lưu trữ các tài liệu liên quan: Google Drive, Github

Kết quả mong đợi

- Hoàn thành yêu cầu đặt ra ban đầu, đáp ứng được đầy đủ tính năng cần thiết của một ứng dụng Website thương mại bán quần áo phụ kiện thời trang

- Giao diện thân thiện, thao tác nhanh gọn, dễ sử dụng

- Nắm được các ngôn ngữ, công nghệ trong bước đầu tạo website như: HTML, CSS, Javascript, Bootstrap, JSP, Servlet, Java, MySQL

- Nắm được các công cụ sử dụng trong quá trình thực hiện đồ án như: Github, Figma, DrawIO

- Nắm được quá trình phát triển và tạo nên một chatbot thông qua nền tảng RASA

- Học được cách nghiên cứu, học các công nghệ mới một cách nhanh gọn và hiệu quả Đặc biệt là

có hướng để từ các ngôn ngữ, công nghệ cơ bản đó mà tiến đến các Framework cao cấp hỗ trợ tốt hơn và tạo nên các sản phẩm tốt hơn

- Học được cách tổ chức làm việc nhóm, tập trung vào công việc, đưa các ý kiến các nhân vào đồ

án nhóm, đặt bản thân mình vào con mắt, nhu cầu của người dùng nhằm phát triển đồ án tốt hơn

Các tiêu chí khác:

Tính thẩm mỹ: Website có giao diện thân thiện, dễ sử dụng

Tính logic và bảo mật:

+ Các tính năng hoạt động mượt mà, không bị lỗi

+ Dữ liệu người dùng được bảo mật

23/2/2022 – 28/2/2022 Tìm hiểu về đề tài Tìm hiểu đề tài

1/3/2022 – 6/3/2022 Tham khảo các trang web có

chức năng tương tự

Tham khảo các trang web có chức năng tương tự

servlet

Tìm hiểu và học về java, jsp,

servlet

10/3/2022 – 11/3/2022 Lựa chọn ngôn ngữ, công

nghệ phù hợp với trang web Phân tích hệ thống

11/3/2022 – 14/3/2022 Phác thảo sơ giao diện trên

figma

Phác thảo sơ giao diện trên

figma

2/5/2022 - 7/5/2022 Tổng thay đổi giao diện web

bằng JSP kết hợp html,css,javascript và bootstrap

Thiết kế database tổng kết sau khi nghiên cứu hết các chức năng của app

8/5/2022 – 12/5/2022 Dùng Java,Servlet, JDBC

xây dựng các chức năng bên phía người dùng bao gồm:

Đăng nhập, Show các sản phẩm ra Homepage, Thêm sản phẩm vào giỏ hàng, xem chi tiết

Dùng Java,Servlet, JDBC xây dựng chức năng bên phía người dùng bao gổm: đăng ký tài khoản, thay đổi thông tin người dùng, xem hóa đơn mua hàng

12/5/2022 – 14/5/2022 Xây dựng chức năng tìm

kiếm sản phẩm, xem giỏ hàng, đặt hàng Xây dựng các chức năng bên phía admin như: thêm sản phẩm vào trang web, quản lý sản phẩm, thêm, xóa sửa, quản

lý hóa đơn mua hàng, đặt hàng và giao hàng

Xây dựng chức năng tìm kiếm sản phẩm, xem giỏ hàng, đặt hàng Xây dựng các chức năng bên phía admin như: thêm sản phẩm vào trang web, quản lý sản phẩm, thêm, xóa sửa, quản

lý hóa đơn mua hàng, đặt hàng và giao hàng

14/5/2022 – 10/6/2022 Thực hiện nghiên cứu

chatbot bằng RASA framework kết hợp viết báo cáo đồ án

Thực hiện nghiên cứu chatbot bằng RASA framework kết hợp viết báo cáo đồ án

11/6/2022 – 13/6/2022 Thực hiện chatbot đã nghiên

cứu được trên IDE visual studio

Thực hiện chatbot đã nghiên cứu được trên IDE visual studio

10/6/2022 – 13/6/2022 Test trang web, thực hiện

các kiểm thử bằng test case

và hoàn thiện báo cáo đồ án

Test trang web, thực hiện các kiểm thử bằng test case

và hoàn thiện báo cáo đồ án

MENU

DANH MỤC HÌNH ẢNH 14

DANH MỤC CÁC BẢNG 17

1 Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI 18

1.1 Giới thiệu về đề tài 18

1.1.1 Nhu cầu về các website thương mại và thời trang 18

1.1.2 Lý do chọn đề tài 18

1.2 Khảo sát hiện trạng 19

1.3 Công nghệ và đối tượng nghiên cứu 19

1.4 Phạm vi nghiên cứu 20

1.5 Phương pháp nghiên cứu 20

1.6 Nhiệm vụ của đề tài 20

1.7 Mục tiêu của đề tài 21

2 Chương 2 - CƠ SỞ LÝ THUYẾT 22

2.1 Các ngôn ngữ và công nghệ để tạo nên một trang web fullstack 22

2.1.1 HTML 22

2.1.2 CSS 26

2.1.3 Javascript 30

2.1.4 Bootstrap 34

2.1.5 JSP 38

2.1.6 Servlet 41

2.1.7 JDBC- Java Database Connectivity 44

2.1.8 Server để chạy web – Tom Cat 46

2.1.9 Java 48

2.1.10 Cấu trúc lập trình - Java Design Pattern – DAO 50

2.1.11 Cơ sở dữ liệu – MySQL 53

2.2 Công cụ nghiên cứu về chatbot: 56

2.2.1 Rasa Framework 56

2.3 Một số công cụ sử dụng trong đồ án 57

2.3.1 Figma 57

2.3.2 Github 57

3 Chương 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 59

3.1 Mô tả yêu cầu 59

3.1.1 Yêu cầu chức năng 59

3.1.2 Yêu cầu phi chức năng 61

3.2 Kiến trúc hệ thống 61

3.2.1 Mô tả kiến trúc Front-End 61

3.2.2 Mô tả kiến trúc Back-End 66

3.2.3 Về Design Pattern DAO: 66

4 Chương 4 - HIỆN THỰC HỆ THỐNG 70

4.1 Sơ đồ use case 70

4.2 Sơ đồ tuần tự 71

4.3 Đặc tả use case 72

4.3.1 Đăng kí 72

4.3.2 Đăng nhập 74

4.3.3 Chỉnh sửa thông tin cá nhân 75

4.3.4 Tìm kiếm sản phẩm 75

4.3.5 Mua hàng 76

4.3.6 Xem giỏ hàng 77

4.3.7 Đặt hàng 78

4.3.8 Xem chi tiết món hàng 78

4.3.9 Xem hóa đơn đã mua 79

4.3.10 Hộp chat tư vấn giới thiệu sản phẩm 80

4.3.11 Thêm sản phẩm 80

4.3.12 Quản lý sản phẩm 81

4.3.13 Xóa sản phẩm 82

4.3.14 Sửa thông tin sản phẩm 83

4.3.15 Quản lý hóa đơn mua hàng của khách hàng 84

4.3.16 Xem thông tin đặt hàng và giao hàng cho người dùng 84

4.3.17 Đăng xuất 85

4.4 Thiết kế dữ liệu 86

4.5 Danh sách các đối tượng trong hệ thống 87

4.5.1 Dữ liệu người dùng - user 87

4.5.2 Dữ liệu sản phẩm – product_dt 88

4.5.3 Dữ liệu giỏ hàng – cart 89

4.5.4 Dữ liệu hóa đơn – product_order 89

4.6 Thiết kế giao diện 90

4.6.1 Giao diện của người dùng 90

4.6.2 Giao diện của admin 112

5 CHƯƠNG 5 – NGHIÊN CỨU VỀ CHATBOT 116

5.1 Cơ sở lý thuyết 116

5.1.1 Cấu trúc 117

5.2 Cách cài đặt: 118

5.3 Giai đoạn chuẩn bị chi tiết – tạo chatbot 126

6 CHƯƠNG 6 - KẾT LUẬN 138

6.1 Đánh giá 138

6.1.1 Thuận lợi 138

6.1.2 Khó khăn 138

6.2 Kết quả đạt được 139

6.2.1 Ưu điểm 139

6.2.2 Nhược điểm 139

6.3 Hướng phát triển 139

7 CHƯƠNG 7 - TÀI LIỆU THAM KHẢO 141

7.1 Tài liệu tiếng Việt 141

7.2 Tài liệu tiếng Anh 142

DANH MỤC HÌNH ẢNH Hình 2.1 HTML 22

Hình 2.2 Cấu trúc HTML 25

Hình 2.3 CSS 26

Hình 2.4 Javascript 30

Hình 2.5 Bootstrap 34

Hình 2.6 Bootstrap js 35

Hình 2.7 JSP 38

Hình 2.8 Vị trí jsp trong một trang web 39

Hình 2.9 Kiến trúc Servlet 42

Hình 2.10 JDBC 44

Hình 2.11 Cấu trúc kết nối jdbc 44

Hình 2.12 Apache Tomcat 46

Hình 2.13 HTTP server 47

Hình 2.14 Ngôn ngữ lập trình Java 48

Hình 2.15 Design Pattern DAO 51

Hình 2.16 Cấu trúc DAO 52

Hình 2.17 MySQL 53

Hình 2.18 Rasa Chatbot 56

Hình 2.19 Figma 57

Hình 2.20 Github 57

Hình 3.1 Vị trị JSP 62

Hình 3.2 Ví dụ một file jsp 63

Hình 3.3 Cấu trúc thư mục Front End 64

Hình 3.4 Cấu trúc thư mục jsp chứa các link Bootstrap 65

Hình 3.5 navbar.jsp 65

Hình 3.6 Cấu trúc Servlet 66

Hình 3.7 Cấu trúc file thiếu kế theo DAO 67

Hình 4.1 Sơ đồ Use Case 70

Hình 4.2 Sơ đồ tuàn tự đăng nhập 71

Hình 4.3 Sơ đồ tuần tự edit profile 71

Hình 4.4 Workflow quá trình mua hàng 72

Hình 4.5 Workflow mô phỏng quá trình mua hàng và thanh toán 72

Hình 4.6 Cơ sở dữ liệu 86

Hình 4.7 Home Page 91

Hình 4.8 Home Page.2 91

Hình 4.9 Home Page.3 92

Hình 4.10 Main Navigation 92

Hình 4.11 Logo 92

Hình 4.12 Thanh search 92

Hình 4.13 Nút login và đăng ký 93

Hình 4.14 Navigation 93

Hình 4.15 Các đề mục 93

Hình 4.16 Slider 93

Hình 4.17 Mục hiển thị sản phẩm 94

Hình 4.18 Footer 94

Hình 4.19 Recent Product 95

Hình 4.20 New Product 95

Hình 4.21 Old Product 96

Hình 4.22 Auto Scroll 96

Hình 4.23 Màn hình đăng nhập 97

Hình 4.24 Màn hình đăng ký 97

Hình 4.25 Màn hình search result 98

Hình 4.26 Home Page sau khi đăng nhập 99

Hình 4.27 Dialog Logout 99

Hình 4.28 After Logout 100

Hình 4.29 Normal Product Cart 101

Hình 4.30 Old Product Cart 102

Hình 4.31 Trang xem chi tiết sản phẩm 103

Hình 4.32 Trang xem chi tiết sản phảm - cũ 103

Hình 4.33 Cart 104

Hình 4.34 Trang giỏ hàng và thanh toán 104

Hình 4.35 Mục giỏ hàng 105

Hình 4.36 Mục thanh toán 106

Hình 4.37 Nút order và tiếp tục mua sắm 107

Hình 4.38 Thông báo nhắc nhở 107

Hình 4.39 Sau khi mua hàng 108

Hình 4.40 Màn hình Order của khách hàng 109

Hình 4.41 Nút Setting và Contact Us 109

Hình 4.42 Màn hình quản lý thông tin khách hàng 110

Hình 4.43 Màn hình chỉnh sửa thông tin 110

Hình 4.44 Quản lý hóa đơn 111

Hình 4.45 Trung tâm hỗ trợ khách hàng 111

Hình 4.46 Đăng nhập bằng tài khoản admin 112

Hình 4.47 Màn hình quản lý của admin 112

Hình 4.48 Các chức năng 113

Hình 4.49 Màn hình thêm sản phẩm 113

Hình 4.50 Quản lý sản phẩm 114

Hình 4.51 Nút sửa và xóa 114

Hình 4.52 Màn hình chỉnh sửa 114

Hình 4.53 Quản lý hóa đơn khách hàng 115

Hình 4.54 Đăng xuất 115

Hình 5.1 Rasa Framework 116

Hình 5.2 Cấu trúc rasa 117

Hình 5.3 Trang tải python 118

Hình 5.4 cmd check version python 118

Hình 5.5 cmd cài đặt rasa 119

Hình 5.6 cmd cài đặt rasa 2 119

Hình 5.7 check rasa version 119

Hình 5.8 khởi tạo rasa trong thư mục 120

Hình 5.9 Quá trình khởi tạo 120

Hình 5.10 Quá trình khởi tạo rasa2 121

Hình 5.11 Quá trình khởi tạo rasa3 121

Hình 5.12 Cấu trúc thư mục rasa 122

Hình 5.13 Mở folder rasa trên visual code 123

Hình 5.14 file credentials.yml 124

Hình 5.15 Chỉnh sủa file credentials 125

Hình 5.16 Thực hiện import thư viện và khởi tạo chatbot ở local 126

Hình 5.17 Cấu trúc file của chatbot 127

Hình 5.18 file nlu.yml 128

Hình 5.19 file domain.yml 129

Hình 5.20 file stories.yml 130

Hình 5.21 file config.yml 131

Hình 5.22 file rules.yml 132

Hình 5.23 Quá trình train chat bot 133

Hình 5.24 Giao diện chatbot 133

Hình 5.25 Các phân đoạn tương tác 134

Hình 5.26 Bảng class css để thay đổi giao diện chatbot 135

Hình 5.27 Đổi màu chatbot 135

Hình 5.28 Thay đổi màu và các tương tác chatbot khác 136

Hình 5.29 Tương tác chatbot 137

DANH MỤC CÁC BẢNG Bảng 2-1 So sánh SQL vs MySQL 56

Bảng 3-1 Bảng mô tả chức năng của các actor 60

Bảng 3-2 Bảng mô tả các thành phần BackEnd 68

Bảng 4-1 Use case Đăng ký 74

Bảng 4-2 Use case Đăng nhập 74

Bảng 4-3 Use Case chỉnh sửa thông tin cá nhân 75

Bảng 4-4 Use Case Tìm kiếm sản phẩm 76

Bảng 4-5 Use Case Mua hàng 77

Bảng 4-6 Use Case xem giỏ hàng 77

Bảng 4-7 Use Case Đặt hàng 78

Bảng 4-8 Use Case xem chi tiết món hàng 79

Bảng 4-9 Use Case xem hóa đơn đã mua 80

Bảng 4-10 Use case hộp chat tư vấn giới thiệu sản phẩm 80

Bảng 4-11 Use Case Thêm sản phẩm 81

Bảng 4-12 Use Case Quản lý sản phẩm 82

Bảng 4-13 Use Case xóa sản phẩm 83

Bảng 4-14 Use Case Sửa thông tin sản phẩm 83

Bảng 4-15 Use Case quản lý hóa đơn mua hàng của khách hàng 84

Bảng 4-16 Use Case xem thông tin đặt hàng và giao hàng cho người dùng 85

Bảng 4-17 Use Case Đăng xuất 86

Bảng 4-18 Bảng Danh sách đối tượng hệ thống 87

Bảng 4-19 Bảng dữ liệu người dùng 88

Bảng 4-20 Bảng dữ liệu sản phẩm 89

Bảng 4-21 Bảng dữ liệu giỏ hàng 89

Bảng 4-22 Bảng dữ liệu hóa đơn 90

1 Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI

1.1 Giới thiệu về đề tài

1.1.1 Nhu cầu về các website thương mại và thời trang

Ngày nay, xã hội ngày càng phát triển, đời sống con người càng được cải thiện, người ta không chỉ no đủ vật chất mà còn chú trọng nhiều đến đời sống tinh thần, đặc biệt là thời trang nhằm thỏa mãn nhu cầu thẩm mỹ ngày càng cao Dân gian cũng đã

có câu "Người đẹp vì lụa, lúa tốt vì phân" là lẽ đó, cách ăn mặc có mối quan hệ khá mật thiết với văn hoá, phản ánh một phần đời sống, văn minh của con người Chính

vì thế, như một lẽ tự nhiên của thời đại công nghệ 4.0, các website thương mại, buôn bán quần áo ngày càng phát triển và được tín dụng Một phần là vì nó cung cấp cho người dùng những sự tiện lợi, nhanh gọn trong mua bán sản phẩm, vừa giúp người dùng có thể lựa ra cho mình những món đồ ưng ý, hợp với nhu cầu nhất mà không nhất thiết phải ra tận cửa hàng để có thể lựa chọn như ngày xưa Nhờ có các webstie thương mại mà các chủ cửa hàng quần áo có thể tạo các website đơn giản, phục vụ mục đích bán hàng của mình lại còn tăng cao thu nhập

1.1.2 Lý do chọn đề tài

Về lý do của chính mình, thì chính đáng nhất đó là sự yêu thích, mong muốn

có thể tự phát triển được một sản phẩm website full stack, nhờ đó mà có thể nâng cao trình độ học thuật của bản thân, cũng như có một sản phẩm tốt cho môn đồ án một Ngoài ra với niềm đam mê với các sản phẩm quần áo mang đậm tính thời trang và nghệ thuật trong nó đã cho nhóm chúng em thêm động lực để chọn và thực hiện đề tài này

Về nhu cầu của xã hội, thì với sự phát triển vượt bậc của internet cũng như hệ thống vận tải logictics thì các ngành nghề kinh doanh, thương mại điện tử đang ngày càng phát triển Các công ti, tập đoàn sẵn sàng chi lượng lớn tiền vào ngành này Hệ thống thương mại điện tử hiện nay có nhiều sự vượt trội hơn so với các ngành nghề thương mại truyền thống Chỉ với vài thao tác đơn giản trên các thiết bị thông minh

người dùng dễ dàng lựa chọn các sản phẩm mình mong muốn chúng sẽ được vận chuyển đến tận nhà của họ Nắm bắt được các yếu tố trên nhóm chúng em quyết định lựa chọn để tài “Tìm hiều và xây dựng WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG VỚI CHAT BOT TƯ VẤN” để phục vụ cho nhu cầu tìm kiếm và mua sản phẩm thời trang trên internet một cách thuận lợi nhất cho người dùng.

1.2 Khảo sát hiện trạng

Thực hiện khảo sát hiện trang trên thị trường bằng cách nghiên cứu các website bán quần áo có chức năng tương như đề tài của nhóm như: fiona.com.vn, sixdo.vn, yame.vn… Nhóm em thấy đa số các trang web điều tập trung vào một mảng bán hàng còn về phần quản lý tài khoản người dùng vẫn còn hạn chế Nên nhóm em mong muốn có phần thay đổi trong việc quản lý tài khoản người dùng, giúp người dùng có nhiều tương tác hơn với shop thông qua việc theo dõi đơn hàng hiện có, chỉnh sửa thông tin người dùng cũng như tương tác với shop bằng chat bot

1.3 Công nghệ và đối tượng nghiên cứu

Các công nghệ và ngôn ngữ sử dụng trong đồ án:

 Các ngôn ngữ công nghệ lập trình front end: HTML, Css/Scss, Javascript, Bootstrap, JSP (JavaServerPages)

 Các ngôn ngữ công nghệ lập trình back end: Servlet, JDBC, Java

 Database: MySQL

 Công nghệ, ngôn ngữ nghiên cứu và thiết kế chatbot: Rasa framework, Python

 Công cụ thiết kế UI : Figma

 Công cụ phân tích thiết kế, vẽ diagram: draw.io, Microsoft Visio

 Công cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE

 Công cụ quản lý dự án: Github, Messenger Group, Microsoft Teams

 Công cụ lưu trữ các tài liệu liên quan: Google Drive, Github

Đối tượng trong phạm vi đề tài hướng đến:

 Các shop quần áo có nhu cầu mở rộng việc kinh doanh của mình trên internet bằng hình thức bán hàng qua website online thương mại

 Các khách hàng, người dùng có nhu cầu mua quần áo thời trang trên internet, vừa tiện lợi, dễ sử dụng lại có ship hàng đến tận nhà

1.4 Phạm vi nghiên cứu

Đề tài tập trung vào nghiên cứu về website bán thời trang, phục vụ việc kinh doanh online của shop quần áo

Thực hiện học và nghiên cứu các ngôn ngữ lập trình front end, back end, tìm

ra công dụng của chúng trong quá trình thực hiện đồ án – tạo nên một trang web full stack Tìm hiểu về cách hoạt động của cơ sở dữ liệu trong quá trình lưu các ràng buộc của trang web Nghiên cứu cách tạo nên chat bot và cách hoạt động của nó Tìm hiểu

và thực hiện các công cụ quản lý dự án như github Học và thực hiện các bảng use case, diagram và tìm ra hướng phát triển cho quá trình nghiên cứu trong tương lai

1.5 Phương pháp nghiên cứu

Nhóm đã sử dụng các phương pháp nghiên cứu:

- Xem các video Youtube hướng dẫn học

- Xem các trang web có các tài liệu về ngôn ngữ, nghiên cứu

- Đọc tài liệu tham khảo trên mạng, các nghiên cứu của những người đi trước

- Thực hiện khảo sát các trang web có các chức năng tương tự, phân tích yêu cầu người dùng

1.6 Nhiệm vụ của đề tài

Đề tài “Website bán quần áo, phụ kiện thời trang với chatbot tư vấn” là một ứng dụng chạy trên nền web đáp ứng được các yêu cầu sau:

 Cung cấp đầy đủ các tính năng như tìm kiếm sản phẩm, mua bán các loại sản phẩm khác nhau thích hợp với nhiều đối tượng khách hàng, quản lý tài khoản người dùng, người dùng có thể thực hiện đăng ký, đăng nhập tài khoản để mua hàng, người dùng có thể thực hiện đặt hàng online và sẽ được shop giao hàng thông qua hình thức shipping

 Cung cấp đầy đủ các tính năng cho chủ shop/admin như: quản lý các sản phẩm trên website, thực hiện thêm, xóa, sửa các sản phẩm theo nhu cầu của shop, quản lý đơn hàng của người dùng, quản lý người dùng

1.7 Mục tiêu của đề tài

Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm theo hiểu biết và trải nghiệm từ phía người dùng, để tạo nên một website bán hàng online hoàn chỉnh – tối ưu hoá về mọi mặt, để sau này dễ phát triển

 Học và tìm hiểu các ngôn ngữ lập trình, công nghệ hỗ trợ phát triển 1 trang web full stack

 Tìm hiểu về kiến trúc hệ thống cũng như quản lý database

 Tìm hiểu và nghiên cứu về chatbot

 Tìm hiểu cách mô phỏng giao diện của một ứng dụng trên Figma

 Vẽ được các diagram mô tả các chức năng của hệ thống

 Xây dựng thành công website bán quần áo, phụ kiện thời trang

2 Chương 2 - CƠ SỞ LÝ THUYẾT

2.1 Các ngôn ngữ và công nghệ để tạo nên một trang web fullstack

Front End

2.1.1 HTML

Hình 2.1 HTML

HTML là gì ?

HTML là chữ viết tắt của HyperText Markup Language, dịch ra tiếng Việt

có nghĩa là ngôn ngữ đánh dấu siêu văn bản Nó dùng để định dạng bố cục, các

thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một

chương trình đặc biệc, ta gọi là trình duyệt browser

Cú pháp :

<tagname></tagname>

Mỗi tagname như trên ta gọi là một thẻ HTML, và công dụng của chúng là khác

nhau Ví dụ bạn muốn in đậm một chữ nào đó thì có thể đặt trong thẻ <strong>Nội dung in đậm</strong>

Ngoài ra, mỗi thẻ HTML còn có một số thuộc tính riêng và danh sách các thuộc tính

sẽ nằm bên trong thẻ mở như sau:

<tagname pro1="value1" prop2="value2"></tagname>

Bố cục của một trang web HTML

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Trong đó:

 <!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để

trình duyệt (Browser) biết

 <html> và </html> là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại Thẻ này là bát buộc

 <head> và </head> là phần khai báo thông tin của trang web

 <title> và </title> nằm bên trong thẻ <head> và đây chính là khai báo tiêu đề cho trang web

 <body> và </body> là thành phần quan trọng nhất, nó chứa nhưng đoạn mã HTML dùng để hiển thị trên website

 Các thẻ còn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu Như vậy trong một website chúng ta chia làm 2 phần chính:

 Phần 1: Là những khai báo thông tin cho trang web và ta đặt nó trong thẻ head

 Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong

thẻ body

Các vị trí cơ bản khi tạo nên một trang web

Thông thường giao diện của một trang web sẽ được chia thành các phần như sau:

Hình 2.2 Cấu trúc HTML

Trong đó:

 header: header là phần đầu tiên của trang web, chứa logo trang web, banner

chính ngang, menu phụ như thông tin, ô tìm kiếm, ngày tháng, thời tiết,…

 navigation: thanh điều hướng (hay là menu chính), là một thanh ngang, chứa

các mục chính (thể loại chính) của trang web Phần menu này rất quan trọng giúp người dùng và cơ chế tìm kiếm định hình hiểu rõ về cấu trúc website của bạn

 content: chứa nội dung chính website

 sidebar: thanh bên, chứa các phần liên quan đến nội dung chính như các menu

phụ, các bài viết liên quan, quảng cáo,… Một số website có 1 thanh bên, 2 thanh bên hoặc hơn nữa là tùy theo bố cục

 footer: phần chân (đáy) trang, chứa thông tin về trang web như tình trạng bản

quyền

2.1.2 CSS

Hình 2.3 CSS

CSS là gì ?

CSS là chữ viết tắt của cụm từ tiếng Anh "Cascading Style Sheet", khác với

HTML ta dùng nó để định tạo khung của một trang web, thì css dùng để trình bày bố cục, tô điểm giao diện của các thẻ HTML đó Nói đơn giản hơn thì CSS sẽ tác động thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hơn hay nhằm một mục đích cụ thể nào đó

Có một ví dụ trực quan để diễn tả nhiệm vụ của CSS như sau, giả sử bạn xây nhà và bạn sẽ sử dụng gạch để xây dựng ngôi nhà Nhưng để trang trí cho ngôi nhà thì bạn sẽ sử dụng một số đồ nội thất khác như sơn màu, thì lúc này sơn màu sẽ tác động làm thay đổi color mặc định của gạch Nói ví von thi màu sơn chính là CSS và gạch chính là HTML

CSS đóng một vai trò rất quan trọng khi bạn xây dựng giao diện Website Thông thường bạn sẽ sử dụng một chương trình thiết kế như Photoshop để tạo giao diện,

sau đó các Frontend Developer sẽ dựa vào file đó kết hợp với HTML & CSS để

convert thanh một file có đuôi mở rộng là html, file File này sẽ chứa code HTML

 Text: CSS tùy chỉnh cách hiển thị đoạn text

 Font: CSS tùy chỉnh kích thước, kiểu chữ

 Link: CSS tùy chỉnh link

 List: CSS tùy chỉnh danh sách

 Table: CSS tùy chỉnh bảng

 Box model: Mô hình box model kết hợp padding, margin, border

Cú pháp CSS

Chúng ta chia một đoạn mã CSS ra gồm hai phần đó là:

 selector: selector sẽ trỏ đến những đối tượng (html) chịu ảnh hưởng bởi CSS

 declaration: các thuộc tính CSS dùng để style cho thẻ selector

Ví dụ: thiết lập màu nền đỏ và chữ xanh cho các thẻ H1

h1 {

background: red;

color: blue

}

 inline: viết trực tiếp trên thẻ thông qua thuộc tính style

 external: viết riêng một thẻ có phần đuôi css rồi sau đó import vào bằng

<div>Nội dung </div>

# external

Cách này hơi rườm rà vì chúng ta cần tạo một file style.css (có phần mở rộng là css)

và sau đó import vào file HTML thông qua thẻ link Sau đây là một ví dụ cho cách này

Bước 1: Tạo một file style.css với nội dung sau:

div{

background:red;

color: blue;

}

Bước 2: Tạo một file index.html cùng cấp với file style.css với nội dung sau:

<link href="style.css" rel="stylesheet"/>

<div>Nội dung</div>

Sau đó chạy lên các bạn sẽ thấy kết quả cũng không có gì khác so với hai ví dụ trên Nhưng có một số lưu ý dành cho bạn như sau:

 trong thẻ link có một thẻ href, bạn sẽ truyền đường dẫn đến file CSS của bạn

 rel="stylesheet" báo cho trình duyệt đây là file CSS

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó

có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend

Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp tất cả các chức

năng này đều được xử lý bằng Javascript đấy các bạn ạ

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS

(chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend

khác như Angular, jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ

khóa Javascript Fullstack

Ưu điểm của Javascript là gì?

 Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client Ví dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều

có những phiên xử lý Javascript khác nhau, không ảnh hưởng lẫn nhau

 Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows,

macOS cho đến các hệ điều hành trên mobile

 Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần

phải cài đặt quá nhiều phần mềm

Nhược điểm của Javascript là gì?

 Vì là một ngôn ngữ rất dễ dàng bị soi code nên dễ bị khai thác Hacker có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng

 Có thể bạn đã thấy những tool về Facebook trên mạng, hoặc những đoạn code làm thay đổi chức năng và giao diện của Facebook, chúng được viết từ Javascript đấy các bạn ạ

 Cấu trúc viết Javascript

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>, ví dụ:

<script language="javascript">

alert("Hello World!");

</script>

Đặt thẻ script ở đâu?

Chúng ta có ba cách đặt thường được sử dụng sau đây:

Cách 1: Internal - viết trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên

đó không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những đoạn mã đó phải được bao lại bằng thẻ script

Cách 2: External - viết ra một file js khác rồi import vào

Bạn có thể viết những đoạn mã javascript ở một file có phần mở rộng là js, sau đó

dùng thẻ script để import vào (giống CSS vậy) Ví dụ file JS của mình có tên

là demo.js thì lúc này mình import vào như sau:

Code import Css:

<script language="javascript" src="demo.js"></script>

Lúc này bên trong file demo.js bạn không đặt thẻ scirpt nữa nhé vì nó là file có phần đuôi là js rồi nên trình duyệt tự nhận diện đây là file chứa mã Javascript

Cách 3: Inline - viết trực tiếp trong thẻ HTML

Inline nghĩa là bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML luôn Như ví dụ dưới đây là mình đang viết dạng inline vì đoạn mã alert(1) được đặt trong

sự kiện onclick của thẻ button

Code bên trong thẻ:

<input type="button" onclick="alert(1)" value="Click Me"/>

Thẻ script là gì?

Thẻ script dùng để khai báo cho trình duyệt biết nội dung bên trong sẽ là một đoạn

mã Javascript

Type = text/javascript là gì?

Khi bạn khai báo thẻ script thì sẽ có thuộc tính type="text/javascript" Đây là tham

số dùng để khai báo media type cho dữ liệu nằm bên trong của thẻ script Mặc định

nếu bạn không khai báo thì nó sẽ hiểu là text/javascript

2.1.4 Bootstrap

Hình 2.5 Bootstrap

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template

dùng để phát triển website chuẩn responsive Bootstrap cho phép quá trình thiết kế

website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có

như typography, forms, buttons, tables, grids, navigation, image carousels…

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo

ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn

như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong

quá trình thiết kế giao diện website

3 file chính của Bootstrap

Dưới đây là 3 File chính giúp quản lý các chức năng của Website và giao

diện người dùng:

 Bootstrap.CSS

 Bootstrap.JS

 Glyphicons

Bootstrap.CSS

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các

trang Web HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý bố cục của Website Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thực hiện được hành động cụ thể

Giờ bạn sẽ không phải tốn thời gian để chỉnh sửa thủ công chỉ để thay đổi một thiết kế nhỏ Thay vào đó, bạn có thể dùng CSS để tạo giao diện thống nhất trên nhiều Website mà không bị giới hạn

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng,

bố cục hình Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và

Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tương

tác của Website Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sẽ sử dụng jQuery Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn thêm nhiều chức năng vào trang Web

Theo kinh nghiệm của tôi, jQuery sẽ thực hiện một số chức năng như:

 Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt

 Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript

 jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS

 Thêm một số tính năng động cho nội dung các trang Web của bạn

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động

tốt, nhưng vẫn cần jQuery để tạo thiết kế Responsive Nếu thiếu đi phần này, bạn chỉ

có thể dùng các phần tĩnh của CSS mà thôi

Ưu điểm:

 Nền tảng tối ưu: Trong bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà thiết kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân Điều này giúp cho việc phát triển website trở nên nhanh chóng bởi vì bạn có thể lựa chọn một mẫu có sẵn phù hợp và thêm màu sắc, hình ảnh, video là đã có ngay giao diện đẹp

 Hơn nữa, bootstrap được viết bởi những người thông mình trên thế giới nên

sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể yên tâm với kết quả mình làm ra, thậm chí bạn còn có thể bỏ qua cả bước kiểm tra lại, và bạn sẽ tiết kiệm được thời gian, tiền bạc cho website của mình

 Tương tác tốt với smartphone: Nếu như trước đây khi truy cập website bằng điện thoại di động bạn thường nhận được result từ trang tìm kiếm như mobile.trangweb.com, tức là trang web này được lập trình cho cả 2 phiên bản,

nhưng với bootstrap có sử dụng grid system nên bootstrap mặc định hỗ trợ responsive và viết theo xu hướng mobile first ưu tiên giao diện mobile trước, điều này cải thiện đáng kể hiệu suất trang web khi có người dùng truy cập bằng

mobile Khách hàng thiết kế web của bạn không còn nỗi lo trang web của

mình có thể chạy trên nền tảng di động hay không

 Giao diện đầy đủ, sang trọng: Giao diện của bootstrap có màu xám bạc rất sang trọng và hỗ trợ gần như đầy đủ các thành phần mà một website hiện đại cần có

 Cầu trúc HTML rõ ràng giúp bạn nhanh chóng nắm bắt được cách sử dụng và phát triển

 Không những vậy, bootstrap còn giúp website hiển thị tốt khi chúng ta co dãn màn hình windows

 Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap cũng hỗ trợ thêm tính năng customizer, bạn có thể thay đổi gần như tất cả những thuộc tính của nó để phù hợp với chương trình của bạn Nếu những tuỳ chình này vẫn không đáp ứng được yêu cầu của bạn, bạn hoàn toàn có thể chỉnh sửa trực tiếp trên mã nguồn của bootstrap

Nhược điểm:

 Tính kém phổ biến: Bootstrap không phải là ứng dụng web phổ biến nên để

tìm được một tổ chức, cá nhân thành thạo bootstrap để có thể sử dụng với nền

tảng lập trình web không nhiều

 Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của bạn đòi hỏi sản

phẩm nhẹ thì việc sử dụng bootstrap sẽ là cả một gánh nặng cho web

 Chưa hoàn thiện: Bootstrap chưa đầy đủ các thư viện cần thiết Các phát triển

chưa thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùng phiên bản dành riêng cho mobile

 Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ưu điểm

khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một trang web

responsive hiện đại Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung caaps

 Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes

sẵn có, gọi ra cái class từ stylesheet và thế là bạn đã có một trang web responsive trông cũng ổn ổn Sự tiện dụng và dễ dàng của Bootstrap nhiều khi

sẽ khuyễn khích tính lười sáng tạo, vốn luôn thường trực trong mỗi chúng ta Kết quả là, chúng ta thướng thoả hiệp những gì mình thực sự muốn cho website

để đổi lấy sự tiện dụng và tiết kiệm thời gian mà Bootstrap mang lại

2.1.5 JSP

Hình 2.7 JSP

JSP là gì?

JSP là viết tắt của JavaServer Pages là một công nghệ để phát triển các trang

web động JSP giúp các nhà phát triển chèn java code vào các trang HTML bằng cách

sử dụng các thẻ JSP đặc biệt

JSP là một kiểu Java servlet được thiết kế để tạo ra giao diện người dùng cho

một ứng dụng Java web Các nhà phát triển web viết các JSP như các tệp văn bản kết hợp mã HTML hoặc XHTML, các phần tử XML, các action và lệnh JSP

Sử dụng JSP, bạn có thể thu thập dữ liệu đầu vào từ người dùng thông qua các Form của trang web, trình bày các bản ghi từ một cơ sở dữ liệu hoặc một nguồn khác,

và tạo các trang web động

Các thẻ JSP có thể được sử dụng cho nhiều mục đích khác nhau, chẳng hạn như truy xuất thông tin từ cơ sở dữ liệu hoặc đăng ký mới, truy cập các thành phần JavaBeans, kiểm soát giữa các trang và chia sẻ thông tin giữa các request, các trang

Vị trí của JSP trong một ứng dụng web:

Hình 2.8 Vị trí jsp trong một trang web

Tại sao sử dụng JSP?

Các trang JavaServer thường phục vụ cùng một mục đích như các chương trình

được thực hiện bằng cách sử dụng Common Gateway Interface (CGI) Nhưng JSP

cung cấp một số lợi thế so với CGI

 Hiệu suất tốt hơn đáng kể vì JSP cho phép nhúng các thành phần động trong các trang HTML thay vì có các tệp CGI riêng biệt

 JSP luôn được biên soạn trước khi chúng được xử lý bởi máy chủ không giống như CGI / Perl, yêu cầu máy chủ tải một trình thông dịch và tập lệnh đích mỗi khi trang được request

 Giống như Servlet, JSP cũng có quyền truy cập vào tất cả các Enterprise Java APIs, bao gồm JDBC, JNDI, EJB, JAXP vv

 Các trang JSP có thể được sử dụng kết hợp với các servlet xử lý logic nghiệp

vụ, model được hỗ trợ bởi Java servlet

JSP là một phần của Java EE, một nền tảng hoàn chỉnh cho các ứng dụng enterprise

Ưu điểm của JSP

Dưới đây là các lợi ích khác của việc sử dụng JSP đối với các công nghệ khác:

 Active Server Pages (ASP): Có 2 lợi thế của JSP so với Active Server Pages

(ASP) Thứ nhất, phần động được viết bằng Java, không phải Visual Basic hoặc ngôn ngữ MS cụ thể khác, vì vậy nó mạnh hơn và dễ sử dụng hơn Thứ hai, nó là khả chuyển cho hệ điều hành khác và máy chủ Web không phải của

Microsoft

 Servlet thuần: JSP thuận tiện hơn Servlet thuần để viết (và để sửa đổi) HTML

hơn là sử dụng lệnh println() để tạo ra HTML rối rắm

 Server-Side Includes (SSI): SSI thực sự chỉ dành cho những thứ đơn giản,

không phải cho các chương trình "thực" sử dụng form dữ liệu, tạo các kết nối

cơ sở dữ liệu và những thứ tương tự

 JavaScript: JavaScript có thể tạo HTML động trên máy khách nhưng hầu như

không thể tương tác với máy chủ web để thực hiện các tác vụ phức tạp như

truy cập cơ sở dữ liệu và xử lý hình ảnh vv

Ví dụ về trang jsp