Lập trình web Đề tài website travel planner

Website được thiết kế để giúp người dùng dễ dàng tìm kiếm thông tin địa điểm, xây dựng lịch trình chỉ tiết, tối ưu chí phí và quản lý các kế hoạch cá nhân một cách thuận tiện nhất.. Với

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỞNG ĐẠI HỌC ĐÔNG Á KHOA CÔNG NGHỆ THÔNG TIN

ĐÓNG A

Tạo dựng con đường thành công

LẬP TRÌNH WEB

D€tai: Website Travel Planner

Giảng viên hướng dẫn: TS Lý Quỳnh Trân

Lop: ST22C

Sinh viên thực hiện:

Nguyễn Phước Đại

LOI CAM ON

Chúng em xin gửi lời cảm ơn sâu sắc đến cô TS Lý Quỳnh Trân, giảng viên đã trực tiếp giảng dạy học phần Lập trình Web 1, và tận tình hướng dẫn chúng em trong suốt quá trình học tập và thực hiện đ`êtài này Những kiến thức và kinh nghiệm quý báu mà cô chia sẻ đã giúp chúng em không chỉ nắm vững các nền tảng lý thuyết, mà còn ứng dụng thực tiễn hiệu quả vào dự án

Chúng em cũng xin chân thành cảm ơn các th% cô trong Khoa Công nghệ Thông tin, Trưởng Đại học Đông Á, những người đã luôn truy đạt những kiến thức chuyên môn vững vàng và tạo đi 'âi kiện tốt nhất để chúng em hoàn thành học ph này Cuối cùng, nhờ sự hễ trợ và đóng góp ý kiến tử các bạn đ'ng hành, chúng em đã

có thể hoàn thành bài báo cáo này Dù vậy, chúng em hiểu rằng bài làm còn nhi âi hạn chế và rất mong nhận được những ý kiến đóng góp tử quý cô và các bạn để cải thiện hơn trong tương lai

Một l 3n nữa, xin gửi lời cảm ơn chân thành đến tất cả mọi người!

Nhóm sinh viên thực hiện

Nguyễn Phước Đại

Võ Văn Luận

Y Phai Niê Nguyễn Anh Tuấn

Mục Lục:

980 (91000005 5 CHƯƠNG 1 KHẢO SÁT THỰC TRẠNG HỆ THỐNG -2- 25s cs+rxcr+ 6

1.1 Khảo sát thực trạng - -Ă Ăn TH HH ng ng 6 1.2 Phát biểu bài toán/đ`Êtài/dự án Ăn» Hệ, 6

13 Ð xuất các giải pháp kiến nghị để giải quyết bài toán/đ `ềtài/dự án 6 1.4 TiẦần xác định các yếu tố liên quan với dự án -cc<cs<eersee 7 1.5 Xây dựng kế hoạch công việc cụ thể chi tiết để thực hiện 7

CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ VÀ TRIỂN KHAI THỰC HIỆN

WWEBSTTE TRAVEL PUANNEER - Gv 8

2.1 Tóm lược các nội dung quan trọng cñn thực hiện - << <ss<<++ 8

2.2 Phân tích và thiết kế hệ thống - + x2 ng ng 8 2.2.1 Tác nhân của hệ thống - 5 S33 S333 v1 3 1 11 1 1 1 g1 re 8 2.2.2 Các chức năng chính cha website Travel Planner - -+- 8 2.3 Bi€u d GUse Case cccccccccsccssesssessesscensesscensesscensesseenaesscenseseeesseseeeneeseeeeeneees 8 2.3.1 Biểu d GUse Case tổng quát - ST HH HH hy 8 2.3.2 Đặc tả Use Case chính - -.-c- Sc 2+2 32311211122 1021115111211 1 11 0xx k2 9 2.4 Biểu đ `ôlớp (Class Diagraim) 5 ch + HH ke, 10 2.5 Biểu đôtu3n tu (Sequence Diagram) cececcecceeeseseeceseceececeeeeeceeeeenee 11 2.6 Dac ta quy trinh nghiGp VỤ - - 5 S131 v1 Hy HH HH HH 12

CHƯƠNG 3: KHÁI QUÁT CÔNG NGHỆ SỬ DỤNG 5c xe 12

“An ¡9 12

“An nN 9n 12 3.1.2 Lý do chọn MySQ, - - - HH TH ng HH kg v 12 3.1.3 Cach str dung MySQL trong dự án 5c ssssrsrsereeekke 12 3.2 Spring Boot 13 3.2.1 Spring Boot là gÌ” - - «HH TH TH nh nh HT ni crờ 13 3.2.2 Tại sao chọn Spring ĐOOŸ . - HH km ke 13 3.2.3 Sử dụng Spring Boot trong dự án - -cs-cScSs Set server 13 3.3 Frontend DeveÏopIm€ñ[ << + + x9 1H HH ng re 13

3.3.1 Sử dụng BOOfSIFAD - SG Ă nh TH HT TH HH ve 13 3.3.2 JavaScript và AJÁXX - LH HT TH nh kh 13

3.4 Công cụ hỗ trợ: phát triỂH - ¿+ 22212 St ve erekrkrrvee 14

3.4.1 TDE: Visual Studio COdG c9 HH ng re 14 3.4.2 Máy chủ ứng dụng: ToImcal - - 5 5c 5222332133 21 1E rsvssesrsss 14 3.4.3 Quản lý dependency: Maven cv HH ra 14 3.4.4 MySQL Workbencch << kg ng vn 14 3.5 sa na 14

CHƯƠNG 4: ĐÁNH GIÁ KẾT QUÁ ĐẠT ĐƯỢC -¿-cccscrxerrxererree 14

4.1 Demo code và giao diện sản phẩổm - - 5 5S + vsrrrxresxrres 14 4.1.1 Giao diện sản phiẩm - - <2 s11 5 91121101 9120 ng nu 14 4.1.2 Một số hình ảnh của source code (giả định) - 5-5 +2 20

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 22

5.1 Kết quả đạt ưƯỢC Lọ vn HH TH HH HH ng HH kg 22 1S? 0 0n 23

Nhằm đáp ứng nhu cù trên, nhóm chúng em quyết định thực hiện đ'êtài "Website Travel

Planner" với mục tiêu mang lại một công cụ hỗ trợ toàn điện trong việc lập kế hoạch du

lịch Website được thiết kế để giúp người dùng dễ dàng tìm kiếm thông tin địa điểm, xây dựng lịch trình chỉ tiết, tối ưu chí phí và quản lý các kế hoạch cá nhân một cách thuận tiện nhất

Thông qua học phần Lập trình Web 1, dưới sự hướng dẫn của cô TS Lý Quỳnh Trân, chúng em đã có cơ hội áp dụng những kiến thức n`â tảng vào thực tế để phát triển sản phẩm này Dự án không chỉ giúp chúng em củng cố kỹ năng lập trình mà còn mang lại nhi âu bài học quý giá v ềcách xây dựng và triển khai một ứng dụng thực tiễn

Mặc dù đã nỗ lực hoàn thành dự án trong thời gian giới hạn, nhóm vẫn ý thức được những hạn chế và thiếu sót trong bài báo cáo Chúng em mong nhận được sự góp ý và hướng dẫn tử quý th '#% cô để sản phẩm ngày càng hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

CHUONG 1 KHAO SAT THUC TRANG HỆ THỐNG

1.1 Khảo sát thực trạng

Hiện nay, nhu cu du lịch, khám phá các địa điểm mới đang ngày càng tăng cao Với sự phát triển của công nghệ, các ứng dụng và website hỗ trợ lập kế hoạch du lịch đã trở thành công cụ hữu ích, giúp người dùng:

O Tìm kiếm thông tin vềcác địa điểm du lịch, khách san, nha hang, va dich vụ di

chuyển

Lập lịch trình chỉ tiết, từ đó tiết kiệm thời gian chuẩn bị

Dé dang quản lý chi phí và các hoạt động trong chuyến di

Tuy nhiên, nhĩ `âi ứng dụng hiện nay vẫn còn Lồn tại một số hạn chế, như:

n_ Thiếu tính cá nhân hoá cho từng người dùng, không hỗ trợ tối ưu hoá lịch trình phù hợp với sở thích

n Chưa tích hop day đủ các thông tin cẦn thiết như thời tiết, bản đô và các dịch vụ liên quan

n Giao diện chưa thân thiện, gây khó khăn cho người dùng không quen với công nghệ

Việc phat trién mét website Travel Planner sé mang lại giải pháp hiệu quả, đáp ứng tốt hơn nhu cân của người dùng

1.2 Phát biểu bài toán/đÊtài/dự án

Mục tiêu của đềtài là xây dựng một website Travel Planner hoạt động trên n`n

tảng web, cho phép:

n_ Người dùng dễ dàng tìm kiếm thông tin v địa điểm du lịch, nhà hàng, khách sạn, phương tiện di chuyển

m Lập kế hoạch chuyến đi bao g ôm lịch trình chi tiết, dự toán chi phí

n_ Hỗ trợ lưu trữ và quản lý các kế hoạch du lịch cá nhân

Website sẽ cung cấp giao diện thân thiện, dễ sử dụng, tích hợp các công nghệ hiện đại để tối ưu hoá trải nghiệm người dùng

13 Ðềxuất các giải pháp kiến nghị để giải quyết bài toán/đ`tài/dự án [1 Giao diện người dùng (UI/UX):

Sử dụng các framework như Bootstrap để thiết kế giao điện thân thiện, phù hợp

với cả máy tính và điện thoại di động

H1 Tích hợp bản đô

Sử dụng API từ Google Maps hoặc Mapbox để hiển thị địa điểm và hướng dẫn đường di

H1 Hệ thống gợi ý thông minh:

Áp dụng thuật toán học máy để gợi ý địa điểm, dịch vụ phù hợp với sở thích người dùng

O Quan ly di? liéu:

Sử dụng cơ sở dữ liệu MySQL để lưu trữ thông tin địa điểm, lịch trình, và tài khoản người dùng

O Công nghệ phát triển backend:

Sử dung Spring Boot và Hibernate để xây dựng hệ thống xử lý dữ liệu và các API 1.4 Tin xác định các yếu tố liên quan với dự án

Các tác nhân chính của hệ thống:

1 Admin (Quản trị viên):

o_ Quản lý thông tin địa điểm, dịch vụ du lịch

o Quan ly tai khoan người dùng

o_ Cập nhật và xử lý phản h'ổ từ người dùng

2 Người dùng (User):

o Tim kiém théng tin v édu lich và các dịch vụ liên quan

o_ Lập, lưu trữ và chỉnh sửa kế hoạch du lịch

o_ Đánh giá và chia sẻ trải nghiệm v`êcác địa điểm

1.5 Xây dựng kế hoạch công việc cụ thể chỉ tiết để thực hiện

Dự án sẽ được thực hiện trong khoảng thời gian 4 tuẦn với các bước:

[Tu %h 1 Khảo sát thực trạng và phát biểu bài toán Đang thực hiện

[Tu 2 Phân tích hệ thống, thiết kế giao diện Chưa bất dau IFun 3 Lập trình backend và tích hợp giao diện Chua bat du Iuầ 4 Kiểm thử, tối ưu và hoàn thiện báo cáo Chưa bất đi

CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ VÀ TRIỂN KHAI THỰC HIỆN WEBSITE TRAVEL PLANNER

2.1 Tóm lược các nội dung quan trọng c3n thực hiện

O Phân tích và thiết kế hệ thống ban đn cho website

[1 Phác thảo giao diện người ding (UI/UX)

[1 Xây dựng cơ sở dữ liệu và cấu trúc hệ thống backend

[1 Tích hợp các chức năng chính như tìm kiếm, lập kế hoạch, và quản lý tài khoản

H Kiểm thử và sửa lễi (nếu có)

2.2 Phân tích và thiết kế hệ thống

2.2.1 Tác nhân của hệ thống

Admin (Quản trị viên):

Quản lý thông tin địa điểm, dịch vụ, và tài khoản người dùng

Cập nhật, chỉnh sửa và xóa thông tin không phù hợp

Nguoi ding (User):

Dang ky va đăng nhập tài khoản

Tìm kiếm địa điểm du lịch, nhà hàng, khách sạn

Lập và quản lý kế hoạch du lịch

2.2.2 Các chức năng chính của website Travel Planner

— Dang ky/Dang nhập tài khoản:

o_ Người dùng có thể tạo tài khoản để sử dụng các chức năng của hệ thống

2 Tìm kiếm thông tin:

o_ Tra cứu địa điểm du lịch, nhà hàng, khách sạn, phương tiện đi chuyển

3 Lập kế hoạch du lịch:

o_ Lên lịch trình chỉ tiết (ngày, giờ, hoạt động cụ thể)

o_ Ước tính chi phí cho chuyến đi

4 Quản lý kế hoạch:

o_ Lưu trữ, chỉnh sửa, hoặc xóa kế hoạch du lịch

5 Tích hợp bản đâ

o Hién thi ban dGva chỉ dẫn đường đi giữa các địa điểm

2.3 Biéu d 6Use Case

2.3.1 Biểu đ`ôUse Case tổng quát

Mô tả:

n Các chức năng chính bao g âm: đăng ký, đăng nhập, tìm kiếm, quản lý kế hoạch du lịch, quản lý dữ liệu

Dang ky tour du lic

Nguoi Quan Ly

<<include>>

Dang nhap

<<include>>

Chat voi khach hang

Hình 1 Biểu đ Ôuse case chính

2.3.2 Đặc tả Use Case chính

Dưới đây là mô tả một số UJse Case tiêu biểu:

a) Use Case: Dang nhap hé thống

Tén Use Case: Dang nhap

O Tac nhan: User, Admin

n Mô tả: Cho phép tác nhân đăng nhập vào website để sử dụng các chức năng

O Lu wg chinh:

1 Nguoi ding m& giao dién dang nhap

2 Nhdap théng tin tai khoan (username, password)

3 Hé théng kiém tra thông tin, nếu đúng thì chuyển đến trang chính Nếu sai,

thông báo lỗi

Đi âi kiện trước: Người dùng đã có tài khoản hợp lệ

Đi ôi kiện sau: Người dùng được chuyển đến giao diện chính hoặc nhận thông báo lỗi

m Tên Use Case: Lập kế hoạch

O Tác nhân: User

n_ Mô tả: Hỗ trợ người dùng tạo lịch trình chuyến đi

O Lu wg chinh:

1 Nguoi dùng chọn chức năng "Tạo kế hoạch”

2 Nhập thông tin: địa điểm, thời gian, dịch vụ kèm theo

3 Hệ thống lưu kế hoạch vào cơ sở dữ liệu

2.4 Biểu đ ôlớp (Class Diagram)

Biểu đ ôlớp mô tả cấu trúc hệ thống, bao ø ồn các lớp chính:

1 User

o_ Thuộc tính: ¡đ, username, password, email, role

o_ Phương thức: đăng nhập, đăng ký, chỉnh sửa thông tin

2 Plan (Kế hoạch):

o_ Thuộc tính: ¡d, tên kế hoạch, ngày, danh sách địa điểm, chi phí dự kiến

o_ Phương thức: thêm, chỉnh sửa, xóa kế hoạch

3 Location (Dia diém):

o_ Thuộc tinh: id, tén địa điểm, mô tả, vị trí trên bản đ ồ

o_ Phương thức: tìm kiếm, biển thị thông tin

10

Thnah toan chi Thuc hien

Ngay bat dau thục hien tour

Chon 1 Khach hang nhan

Chon dat

DUNG

Hien thi man hình Khach Hang Kiem tra thong tin

Khong Dung

Hình 2 Biểu đ ôlớp chính

2.5 Biểu đ ôtu3n tự (Sequence Diagram)

Mê tả lu ông hoạt đệng của một số chức năng chính:

a) Biểu đ ôtun tự: Đăng nhập

1 Người dùng nhập thông tin đăng nhập

2 Hệ thống kiểm tra thông tin với cơ sở dữ liệu

3 Nếu đúng, trả v`ềthông báo thành công và chuyển đến giao diện chính

b) Biểu đ ôtu 3n tự: Tao kế hoạch du lịch

11

1

2

3

Người dùng chọn chức năng "Tạo kế hoạch"

Nhập thông tin (địa điểm, thời gian)

Hệ thống xác nhận và lưu kế hoạch vào cơ sở dữ liệu

Người dùng nhập từ khóa (ví dụ: "Hà Nội”)

Hệ thống gửi yêu cân đến cơ sở dữ liệu

Trả v`êdanh sách các địa điểm phù hợp

Người dùng chọn một địa điểm để xem thông tin chỉ tiết

Quy trình: Người dùng thanh toán dịch vụ

1

2 Hệ thống hiển thị tổng chỉ phí và phương thức thanh toán

3

4 ._ Hệ thống lưu thông tin giao địch và gửi thông báo xác nhận

Người dùng chọn các dịch vụ c3 thanh toán (vé máy bay, khách sạn)

Người dùng xác nhận thanh toán

CHƯƠNG 3: KHÁI QUÁT CÔNG NGHỆ SỬ DỤNG

3.1.MySQL

3.1.1 MySQL là gì?

MySQL 1a mét hé quản trị cơ sở dữ liệu mã ngu ôn mở phổ biến, được phát triển và phân phối bởi Oracle Corporation Với ưu điểm nhẹ, mạnh mẽ, và dễ sử dung, MySQL trở thành một trong những lựa chọn hàng đầu để xây dựng các ứng dụng web và quản lý dir liệu lớn

3.1.2 Ly do chon MySQL

Tính ổn định và hiệu suất cao: Phù hợp cho các dự án c3 truy xuất dữ liệu nhanh

Khả năng tích hợp tốt: Tương thích với các ngôn ngữ lập trình phổ biến như Java,

PHP, Python

Hỗ trợ tốt cho hệ thống lớn: Có khả năng quản lý cơ sở đữ liệu lớn, với các tính

năng bảo mật và sao lưu mạnh mẽ

Cộng đồng phát triển mạnh: MySQL có tài liệu phong phú và hỗ trợ tử cộng đ ng lớn trên toàn thế giới

3.1.3 Cach str dung MySQL trong dy an

Tạo cơ sở đữ liệu: Cơ sở dữ liệu MySQL sẽ lưu trữ các bảng chính nhw users,

locations, plans, va services

12