Đồ Án Cơ Sở 1 - Đề Tài - Thiết Kế Giao Diện Website Tour Du Lịch

----------

ĐỒ ÁN CƠ SỞ 1
Đề tài: THIẾT KẾ GIAO DIỆN
WEBSITE TOUR DU LỊCH


MỞ ĐẦU
Ngày nay, du lịch đang trở thành một lối sống mới. Du lịch không đơn
thuần là tham quan mà cịn phải khám phá, trải nghiệm, khơng chỉ nghe
hướng dẫn viên thuyết trình mà phải có sự tham gia, tương tác lẫn nhau.
Rất nhiều người đã và đang tìm đến một loại hình du lịch mới - du lịch trải
nghiệm. Đúng như tên gọi của nó, đây là loại hình du lịch mong muốn
đem lại cho khách hàng những trải nghiệm độc đáo, thậm chí là lần đầu
tiên tham gia một hoạt động nào đó, thu hút du khách bởi sự năng động,
mới lạ, hấp dẫn và đầy thử thách. Tuy nhiên, loại hình du lịch này vẫn
chưa phổ biến ở Việt Nam. Bằng chứng là chỉ một vài tỉnh thành ở nước ta
mới bắt đầu để ý đến loại hình này và khơng nhiều cơng ty lữ hành đưa
vào khai thác. Miền Bắc có tour trải nghiệm làng quê ở làng cổ Đường Lâm
(Hà Nội) hay làng Yên Đức (Quảng Ninh). Khu vực miền Trung có các tour
khám phá Cù lao Chàm và làm nông dân ở làng rau Trà Quế (Quảng
Nam). Tây Nguyên có tour “Đà Lạt xanh” với hoạt động thu hoạch rau và
dâu tây.
Mặc dù đang là xu hướng phát triển nhưng du lịch trải nghiệm vẫn cịn xa
lạ đối với các cơ quan, cơng ty lữ hành lẫn du khách. Nhu cầu du lịch của
người dân đang tăng trưởng khá nhanh và ngày càng đa dạng, đòi hỏi
những tour mới lạ. Nhưng thực tế các cơng ty lữ hành chỉ cung cấp số
lượng rất ít tour du lịch trải nghiệm. Ngoài ra, những nghiên cứu về du lịch
rất nhiều nhưng nghiên cứu về du lịch trải nghiệm thì rất khiêm tốn.
Nhận thấy được tiềm năng to lớn cho loại hình du lịch cịn bị bỏ ngỏ này,
Một trong những cách tốt nhất để khám phá văn hóa và lối sống của địa

phương nơi mình đến là trải nghiệm tour du lịch để cảm nhận. Hiểu được
những vấn đề trên , chúng em đã thiết kế một website nhằm giải quyết
vấn đề đó.


LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn chân thành và sâu sắc đến các thầy cô
đặc biệt là giảng viên ThS Nguyễn Văn Bình trong thời gian qua đã giúp đỡ
chúng em trong việc hoàn thành bài báo cáo đồ án cơ sở.
Mặc dù gặp nhiều khó khăn trong việc hoàn thành bài đồ án này,
tuy nhiên chúng em vẫn cố gắng để thực hiện hoàn chỉnh nhất bài báo
cáo. Tuy nhiên, vì chưa có đầy đủ kỹ năng cũng như kinh nghiệm để hoàn
thành bài báo cáo đồ án nên chúng em vẫn cịn nhiều thiếu sót. Rất mong
được sự đóng góp ý kiến của thầy cơ để bài báo cáo đồ án được hoàn
thiện hơn, em xin chân thành cảm ơn.


MỤC LỤC
Trang

CHƯƠNG 1: GIỚI THIỆU
1
1.1 Tổng quan.................................................................................1
1.2

Phương pháp, kết quả................................................................2

1.3

Cấu trúc đồ án...........................................................................2

CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN..................................................3
2.1 Các phương pháp..........................................................................3
2.2 Hạn chế còn tồn tại.......................................................................4
2.3 Kết luận........................................................................................4
2.4 Cơ sở lý thuyết..............................................................................4
2.4.1 Sử dụng phần mềm Visual Studio Code.....................................4
2.4.2 Website tĩnh............................................................................6
2.4.3 JQuery, Javascript, Boostrap...................................................6
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG........................................8
3.1 Phạm vi........................................................................................8
3.1.1 Những việc sẽ làm...................................................................8
3.1.2 Những việc không làm.............................................................8
3.2 Đối tượng hướng đến....................................................................8
3.3 Chức năng....................................................................................8
3.4 Người sử dụng..............................................................................8
3.5

Yêu cầu của từng người sử dụng.................................................8

3.5.1 Quản trị viên...........................................................................8
3.5.2 Người dùng…………………………………………………………..…..8
CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG HỆ THỐNG......................................9
4.1 Mơ hình tổng quan của hệ thống nghiên cứu..................................9
4.2 Thiết kế chi tiết.............................................................................9


CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN....................................21
5.1 Kết luận......................................................................................21
5.2 Hướng phát triển.........................................................................21

DANH MỤC HÌNH
Tran
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
17
Hình
17
Hình
18
Hình
18
Hình

19
Hình
19
Hình

1 - dulichvietnam.com.vn
2 - dulichviet.vn
3 - vietnamtourism.com
4 - Giao diện Visual Studio Code
5 - Mơ hình tổng quan hệ thống nghiên cứu
6 - Trang chủ
7 - Trang chủ
8 - Trang chủ
9 - Tin tức
10 - Khách sạn
11 - Thông tin khách sạn
12 - Đề xuất
13 - Cụ thể chi tiết phòng khách sạn
14 - Đánh giá người dùng
15 - Giới thiệu
16 - Footer
17 - Liên hệ
18 - Trang quản lí
19 - Trang quản lí

3
3
4
5
9

9
10
10
11
11
12
13
14
14
15
15
16
16

20 - Trang quản lí
21 - Dữ liệu khách hàng
22 - Tin nhắn
23 - Tin nhắn
24 - Bản đồ
25 - Hóa đơn

20



CHƯƠNG 1: GIỚI THIỆU
1.1

Tổng quan

Ngày nay, du lịch đang trở thành một lối sống mới. Du lịch không đơn
thuần là tham quan mà cịn phải khám phá, trải nghiệm, khơng chỉ nghe
hướng dẫn viên thuyết trình mà phải có sự tham gia, tương tác lẫn nhau. Rất
nhiều người đã và đang tìm đến một loại hình du lịch mới - du lịch trải
nghiệm. Đúng như tên gọi của nó, đây là loại hình du lịch mong muốn đem
lại cho khách hàng những trải nghiệm độc đáo, thậm chí là lần đầu tiên tham
gia một hoạt động nào đó, thu hút du khách bởi sự năng động, mới lạ, hấp
dẫn và đầy thử thách. Tuy nhiên, loại hình du lịch này vẫn chưa phổ biến ở
Việt Nam.
Mặc dù đang là xu hướng phát triển nhưng du lịch trải nghiệm vẫn còn xa
lạ đối với các cơ quan, công ty lữ hành lẫn du khách. Nhu cầu du lịch của
người dân đang tăng trưởng khá nhanh và ngày càng đa dạng, đòi hỏi những
tour mới lạ. Nhưng thực tế các công ty lữ hành chỉ cung cấp số lượng rất ít
tour du lịch trải nghiệm. Ngoài ra, những nghiên cứu về du lịch rất nhiều
nhưng nghiên cứu về du lịch trải nghiệm thì rất khiêm tốn.
Nhận thấy được tiềm năng to lớn cho loại hình du lịch cịn bị bỏ ngỏ này, Một
trong những cách tốt nhất để khám phá văn hóa và lối sống của địa phương
nơi mình đến là trải nghiệm tour du lịch để cảm nhận được vấn đề đặt ra
trên. Hiểu được những vấn đề ,chúng em đã thiết kế một website nhằm giải
quyết vấn đề đó.
Nội dung thực hiện bao gồm trang chủ, đăng ký, trang tìm kiếm, trang đặt
tour, trang tin tức, trang liên hệ, trang tư vấn, hỗ trợ khách hàng, công việc
dành cho quản lý.

1


1.2
-

-

1.3
-

-

Phương pháp, kết quả
Phương pháp: Để xây dựng một trang web tìm tour du lịch, đầu tiên
chúng ta phải hình thành ý tưởng của mình. Tiếp theo, chúng ta sẽ tham
khảo các trang web có sẵn để tiếp thu những kiến thức để định hướng ý
tưởng, phác thảo ý tưởng của mình ra giấy, nắm được các kiến thức về
ngơn ngữ lập trình như sử dụng HTML, CSS, PHP, JavaScript, Bootstrap,
JQuery,… cuối cùng chúng ta sẽ bắt đầu vào việc thực hiện dự án
Kết quả: Có được một trang web giúp cho mọi đối tượng người dùng tìm
kiếm tour du lịch.

Cấu trúc đồ án
Chương 1: Giới thiệu
1.1 Tổng quan
1.2 Phương pháp, kết quả
Chương 2: Nghiên cứu tổng quan
2.1 Các phương pháp
2.2 Hạn chế còn tồn tại
2.3 Kết luận
2.4 Cơ sở lý thuyết

-

Chương 3: Phân tích hệ thống thiết kế

3.1 Phạm vi
3.2 Đối tượng hướng đến
3.3 Chức năng
3.4 Người sử dụng
3.5 Yêu cầu của từng người sử dụng

-

Chương 4: Triển khai xây dựng hệ thống
4.1 Mơ hình tổng quan của hệ thống nghiên cứu
4.2 Thiết kế chi tiết

-

Chương 5: Kết luận và hướng phát triển
5.1 Kết luận
5.2 Hướng phát triển

2


CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN
2.1 Các phương pháp
-

Các website tương tự hiện có: Hiện nay, các website tìm kiếm tour du lịch
xuất hiện khá nhiều trên internet. Khi bạn tìm kiếm từ khóa “Tìm kiếm
tour du lịch” trên Google sẽ xuất hiện nhiều trang tìm kiếm việc làm như :
du lịch VietNam, Du lịch viet, Vietnamtourism,…

Hình 1 – dulichvietnam.com.vn

Hình 2 - dulichviet.vn

3


Hình 3 - vietnamtourism.com

-

Những trang web tìm kiếm tour du lịch thường có giao diện bắt mắt, thân
thiện với người dùng, dễ dàng sử dụng và độ uy tín khá cao, thu hút
người dùng.

2.2 Hạn chế còn tồn tại
-

Hiện nay có rất nhiều website tour du lịch với vơ vàn loại hình, đa dạng
về dịch vụ, thuận tiện cho người dùng và rất tối ưu vì mới mẻ nên vẫn
đang trên đường hoàn thiện, những hạn chế của các website hiện nay là :
+ Các tour du lịch đăng tuyển vẫn chưa phân ra một cách chi tiết
nhất.
+ Các danh mục về phương tiện đi lại, chỗ ở,…vẫn còn hạn chế
+ Người tìm tour du lịch khi tìm tour du lịch vẫn khơng có được sự hỗ
trợ từ website, nên sẽ rất khó khăn cho người dùng trong việc tìm ra
tour du lịch phù hợp với bản thân.
+ Trong phần chi tiết các tour cụ thể, khơng có những phần đánh giá
của những người đã từng tham gia trước để có thể phản hồi một
cách chân thực nhất về sự chuyên nghiệp của website và tạo độ tin

cậy cho người dùng.
+ Nhà tuyển dụng khi muốn đăng tải thông tin họ phải cung cấp phí
cho chủ trang web.

4


2.3 Kết luận
-

Chúng ta cần một trang web gần gủi với người dùng nhất, cập nhật đầy
đủ các loại hình dịch vụ, các chức thông tin chi tết về tour du lịch.

2.4 Cơ sở lý thuyết
2.4.1 Sử dụng phần mềm Visual Studio Code
a. Khái niệm :
- Visual Studio Code là một trình biên tập mã được phát triển
bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức
năng debug, đi kèm với Git, có syntax highlighting, tự hồn thành
mã thơng minh, snippets, và cải tiến mã nguồn. Nó cũng cho
phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím
tắt, và cá tùy chọn khác. Nó miễn phí và là phần mềm mã nguồn
mở, mặc dù gói tải xuống chính thì là có giấy phép.

Hình 4 - Giao diện Visual Studio Code

b. Ưu điểm:
- Hỗ trợ lập trình trên nhiều ngơn ngữ như C/C++, C#, F#,
Visual Basic, HTML, CSS, JavaScript. Phiên bảnVisual Studio
2015 có hổ trợ ngơn ngữ Python.

- Visual Studio là một công cụ hỗ trợ việc Debug một cách mạnh
mẽ, dễ dàng nhất (Break Point, xem giá trị của biến trong quá
trình chạy, hỗ trợ debug từng câu lệnh).
5


-

-

-

-

Giao diện Visual Studio rất dễ sử dụng đối với người mới bắt
đầu.
Visual Studio hỗ trợ phát triển ứng dụng desktop MFC, Windows
Form, Universal App, ứng dụng mobileWindows Phone 8/8.1,
Windows
10,
Android
(Xamarin),
iOS và
phát
triển website WebForm, ASP.NET MVC và phát triển Microsoft
Office.
Visual Studio hỗ trợ kéo thả để xây dựng ứng dụng một cách
chuyên nghiệp, giúp các bạn mới bắt đầu có thể tiếp cận nhanh
hơn.
Visual Studio cho phép chúng ta tích hợp những extension từ

bên ngoài như Resharper (hổ trợ quản lý và viết mã nhanh cho
các ngôn ngữ thuộc .Net), hay việc cài đặt thư viện nhanh
chóng thơng qua Nuget.
Visual Studio được sử dụng đơng đảo bởi lập trình viên trên
tồn thế giới.

2.4.2 Website tĩnh
a. Đặc điểm
- Website tĩnh có thể hiểu là website với dữ liệu không được thay
đổi thường xun
- Nó khơng có cơ sở dữ liệu ở bên dưới hệ thống
- Khơng có cơng cụ để điều khiển được nội dung gián tiếp
- Để thay đổi được nội dung trên trang web thì người quản trị phải
truy cập vào mã lệnh để thay đổi thông tin
b. Ưu điểm:
- Dễ dàng quản lý nội dung
- Dễ dàng nâng cấp và bảo trì
- Có thể xây dụng được web lớn
- Thường sử dụng tương tác với người dùng cao
c. Khuyết điểm :
- Chi phí xây dựng cao
- Nếu web lớn có thể cần thêm nhân sự chuyên ngành
2.4.3 JQuery, Javascript, Boostrap
a. Khái niệm :
6


-

-

-

b.
-

JavaScript là một ngơn ngữ lập trình của HTML và WEB. Nó là nhẹ
và được sử dụng phổ biến nhất như là một phần của các trang
web, mà sự thi hành của chúng cho phép Client-Side script tương
tác với người sử dụng và tạo các trang web động. Nó là một ngơn
ngữ chương trình thơng dịch với các khả năng hướng đối tượng.
JQuery là một thư viện JavaScript nhanh, nhỏ và giàu tính năng.
Nó làm cho mọi thứ như chuyển đổi và thao tác tài liệu HTML, xử
lý sự kiện, hoạt hình và Ajax đơn giản hơn nhiều với API dễ sử
dụng, hoạt động trên vơ số trình duyệt. Với sự kết hợp giữa tính
linh hoạt và khả năng mở rộng, jQuery đã thay đổi cách hàng triệu
người viết JavaScript.
Bootstrap là một bộ công cụ mã nguồn mở để phát triển với HTML,
CSS và JS. Nhanh chóng tạo nguyên mẫu cho ý tưởng của bạn
hoặc xây dựng toàn bộ ứng dụng của bạn với các biến và hỗn hợp
Sass của chúng tôi, hệ thống lưới đáp ứng, các thành phần dựng
sẵn mở rộng và các plugin mạnh mẽ được xây dựng trên jQuery.
Đã ứng dụng :
Css để có thể thiết lập màu sắc và bố cụ của website.
Bootstraps để có thể hiển thị website trên nhiều thiết bị để có thể
phù hợp với nhiều đối tượng sử dụng hơn.
Javascript, JQuery để xử lý các sự kiện của các liên kết, nút bấm
và các cài đặt.

7

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
3.1 Phạm vi
3.1.1 Những việc sẽ làm
- Cung cấp cho người sử dụng, nhà quản lý một giao diện việc làm
năng động cùng những chức năng cần thiết để thao tác, cũng như
tương tác với trang web, có thể quản lý hoạt động của người dùng
để theo dõi tình hình phát triển của trang web.
3.1.2 Những việc không làm
- Hệ thống không quản lý xét duyệt, đánh giá chất lượng tour giữa
người dùng và nhà lữ hành, sau khi đăng kí được tour giai đoạn tiếp
theo hoàn toàn do nhà cung cấp dịch vụ quyết định.

3.2 Đối tượng hướng đến
- Đối tượng hướng đến chủ yếu là những người có sở thích du lịch, những
người muốn được trải nghiệm và khám khá thêm về cuộc sống và khung
cảnh thiên nhiên, những doanh nghiệp đang cần quảng bá tour du lịch.

3.3 Chức năng
-

Đăng nhập/ Đăng ký
Quản lý tour
Xem thơng tin về tour du lịch
Tìm kiếm tour,phịng,phương tiện
Đăng tải thơng tin về tour
Gữi thơng tin liên hệ

3.4 Người sử dụng

- Quản trị viên
- Người tìm kiếm tour

3.5 Yêu cầu của từng người sử dụng
3.5.1 Quản trị viên:
- Đăng nhập/ Đăng ký
- Quản lý thông tin trang web
- Quản lý người dùng
- Bảo trì hệ thống, nâng cấp hệ thống
3.5.2 Người dùng:
8


-

Đăng nhập/ Đăng ký
Tìm kiếm thơng tin: xem danh sách, chi tiết tour
Bình luận
Liên hệ
Gửi các thắc mắc cần giải đáp

CHƯƠNG 4: TRIỂN KHAI XÂY DỰNG HỆ THỐNG
4.1 Mơ hình tổng quan của hệ thống nghiên cứu

Hình 5 - Mơ hình phân tích tổng quan hệ thơng nghiên cứu

4.2 Thiết kế chi tiết
-

Trang chủ: Là trang liên kết với các trang cịn lại, cung cấp những thơng

tin về tour du lịch có thể bạn thích, các thơng tin lớn,…

9


Hình 6 - Trang chủ

+
+

Phần Header trên Hình 6 bao gồm các nút bấm liên kết với những nội
dung khác như Tour, Khách sạn, Dịch vụ, Giới thiệu, Tin tức, Liên hệ,…
Phía dưới phần Header là phần Banner, tại đây chúng ta có thể xem tin
tức các tour phù hợp với người dùng theo các loại hình phương tiện .

Hình 7 - Trang chủ

+

Tiếp theo là phần tour du lịch có thể bạn thích như Hình 7, ở đây có
những thơng tin nổi bậc có thể bạn sẽ quan tâm,…

10


Hình 8 – Trang chủ

+

-

Phần thơng tin về tên của một số tour du lịch nổi bật, giá cả như Hình
8 sẽ giới thiệu cho người dùng, và chỉ số đanh giá để nâng cao uy tín
và độ tin cậy cao,…
Tin tức : Là trang giúp khách hàng trong việc cập nhập tin tức xung
quanh tới việc du lịch, có thêm kinh nghiệm và những thông tin thú vị
mới,… như sau:

Hình 9– Tin tức

-

Khách sạn: Là trang hiển thị các khách sạn để người dùng có thể chọn
nơi lưu trú (Hình 10)
11


Hình 10– Khách sạn

+

Đầu tiên là thơng tin khách sạn (Hình 11), phần thơng tin này sẽ khác
với thơng tin khách sạn ở Trang chủ là hiển thị cụ thể hơn về chi tiết
khách sạn.

12


Hình 11 – Thơng tin khách sạn

+

Bên trái là phần Đề xuất, tại đây đề xuất thể loại phòng, vị trí, cơ sở
vật chất, Bên phải là phần tìm kiếm, sẽ có phạm vi giá để bạn điều
chỉnh phù hợp với khả năng và book phịng để kiểm tra.(Hình 12)

13


Hình 12 – Đề xuất

+ Ở phần thơng tin khách sạn ( Hình 11), sẽ có nút bấm để xem cụ thể
chi tiết về tất cả các phòng hiện đang có ở khách sạn đó. Sau đó chọn
Hotel Ezi nó sẽ hiện cụ thể như Hình 13:

14