Đồ án thiết kế website quản lý khách sạn

TRƯỜNG ĐẠI HỌC TIỀN GIANG
KHOA KỸ THUẬT CÔNG NGHỆ

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

BÁO CÁO
ĐỒ ÁN NGÀNH

ĐỀ TÀI: THIẾT KẾ, XÂY DỰNG
WEBSITE KHÁCH SẠN
SINH VIÊN THỰC HIỆN:

GIẢNG VIÊN HƯỚNG DẪN:

Lê Thành Quốc

Giảng viên Nguyễn Minh Khánh

ĐHCNTT19A

Võ Thành Chiến ĐHCNTT19A
Lê Hoàng Phúc

ĐHCNTT19B

Tiền Giang, tháng 11 năm 2021


LỜI NÓI ĐẦU
Đầu tiên, chúng em xin cảm ơn Ban Giám Hiệu nhà trường – Khoa Kỹ Thuật
Công Nghệ đã tạo điều kiện cho chúng em thực hiện đề tài này.

Đặc biệt, chúng em xin cảm ơn Giảng viên Nguyễn Minh Khánh đã tận tình giúp
đỡ, dẫn dẳt chúng em từ lúc hình thành ý tưởng đến khi hồn thành đề tài.
Qua quá trình nghiên cứu thực hiện đề tài, chúng em đã học được rất nhiều điều
bổ ích, biết lên kế hoạch và sắp xếp công việc một cách khoa học và đây là một cơ hội
quý báu cho chúng em được hiểu biết hơn. Chúng em hy vọng qua thời gian thực hiện
đề tài này, những điều chúng em học được sẽ giúp chúng em cũng cố kiến thức và là
hành trang đầu tiên cho chúng em đạt được những bước tiến tốt hơn trong tương lai.
Chúng em xin chân thành cảm ơn.


LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Khánh là giáo
viên hướng dẫn đồ án cho chúng em. Thầy đã luôn theo sát quá trình thực hiện đồ án,
nhiệt tình hướng dẫn, chỉ bảo để chúng em hoàn thành đồ án này
Trong quá trình làm đồ án, tuy chúng em đã cố gắng hết sức để tìm hiểu, trao dồi
kiến thức để có thể hồn thành tốt đồ án của mình nhưng chắc chắn khơng tranh khỏi
những thiếu sót. Chúng em rất mong nhận được sự thơng cảm và góp ý của q thầy
cô.
Chúng em xin chân thành cảm ơn!
Tiền Giang,01 tháng 2 năm 2022
Nhóm sinh viên thực hiện


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU.............................................................................................1
1.1

Giới thiệu đề tài:.................................................................................................1

1.2

Lý do chọn đề tài:...............................................................................................1

1.3

Bối cảnh thực tiễn:..............................................................................................1

1.4

Mục tiêu:..............................................................................................................1

1.5

Phân công nhiệm vụ và tiến trình làm việc.......................................................1

1.6

Hình thức sitemap...............................................................................................3

CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ.........................................................................4
2.1

Lí thuyết..............................................................................................................4

2.2

Phân tích.............................................................................................................. 4

2.2.1

Yêu cầu website............................................................................................4

2.2.2

Yêu cầu chức năng.......................................................................................4

2.2.3

Thiết kế.........................................................................................................5

2.3

Cài đặt XAMPP..................................................................................................9

2.4

Cài đặt chức năng liên hệ.................................................................................13

2.5

Một số hình ảnh về trang web..........................................................................20

CHƯƠNG 3: TỔNG KẾT ĐÁNH GIÁ & HƯỚNG PHÁT TRIỂN CỦA TRANG
WEB................................................................................................................................ 24
3.1

Kết quả đạt được:.............................................................................................24

3.2

Kết luận:............................................................................................................24

3.3

Hướng phát triển..............................................................................................24


DANH MỤC HÌNH ẢNH
Hình 1: Site map...........................................................................................................3
Hình 2: Sơ đồ use case..................................................................................................5
Hình 3: Mơ hình class...................................................................................................6
Hình 4: Giao diện trang chủ tải về................................................................................9
Hình 5: Cửa sổ cài đặt XAMPP..................................................................................10
Hình 6: Chọn nơi lưu trữ XAMPP..............................................................................10
Hình 7: Bỏ chọn “Learn more about Bitnami for XAMPP“........................................11
Hình 8: Cài đặt xong XAMPP.....................................................................................11
Hình 9: Bảng điều khiển của XAMPP........................................................................12
Hình 10: Bảng điều khiển của XAMPP......................................................................12
Hình 11: Bật nút ”Cho phép ứng dụng kém an tồn”..................................................13
Hình 12: Giao diện trang web PHP.............................................................................14
Hình 13: Download zip...............................................................................................14
Hình 14: Cửa sổ PHPMailer-master............................................................................15
Hình 15: Cài đặt..........................................................................................................16
Hình 16: Giao diện điều khiển XAMPP......................................................................16
Hình 17: Cửa sổ Subline text......................................................................................17
Hình 18: Liên hệ.........................................................................................................20
Hình 19: Giao diện trang chủ......................................................................................21
Hình 20: Giao diện trang liên hệ.................................................................................22
Hình 21: Giao diện phịng...........................................................................................22

Hình 22: Trang hội nghị..............................................................................................23


DANH MỤC TỪ VIẾT TẮT
Từ viết tắt

Tên viết tắt

1

SQL sever

Structure Query Language

2

HTML

Hypertext Markup Language

3

CSS

Cascading Style Sheets

4

JS

JavaScrip

5

XML

Xtensible Markup Language

6

PHP

Hypertext Preprocessor

7

XAMPP

Cross-Platform (X), Apache (A), MariaDB (M),
PHP (P) và Perl (P)

8

CSDL

Cơ sở dữ liệu


TÓM TẮT
Báo cáo được chia làm 3 phần:

CHƯƠNG 1:Giới thiệu
 Giới thiệu đề tài
 Lý do chọn đề tài
 Mục tiêu
 Phân cơng nhiệm vụ và tiến trình làmm việc
 Hình thức Sitemap
CHƯƠNG 2:PHÂN TÍCH, THIẾT KẾ
 Cơng nghệ được sử dụng
 Các công việc thiết kế
 Mô tả chức năng của trang web, các bước lưu đồ
 Cài đặt
CHƯƠNG 3:KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN
 Tổng kết thành quả đạt được.
o Điểm mạnh , điểm yếu
o So sánh
 Định hướng phát triển.
 Tài liệu tham khảo


CHƯƠNG 1: GIỚI THIỆU
1.1 Giới thiệu đề tài:
Là đề tài thiết kế, xây dựng website khách sạn đáp ứng nhu cầu cho khách du lịch
1.2 Lý do chọn đề tài:
Ngành du lịch Việt Nam đang ngày càng phát triển mạnh mẽ, đã và đang thu hút hàng
triệu khách tham quan du lịch mỗi năm, với con số thống kê khoảng 35 đến 37 triệu
khách du lịch trong nước cùng với 7 đến 8 triệu khách du lịch ngoài nước. Đây chính là
một cơ hội lớn cho lĩnh vực khách sạn, song cũng khơng dễ dàng gì bởi có rất nhiều
khách sạn mọc lên mỗi năm, việc cạnh tranh gay gắt tranh giành khách hàng là điều
không thể tránh khỏi.Thiết kế một website chuyên nghiệp là một trong những vấn đề
quan tâm hàng đầu của những người kinh doanh lĩnh vực này.

1.3 Bối cảnh thực tiễn:
Hiện nay trong khi đời sống con người nâng cao, nhu cầu du lịch ngày càng phát triển
thì nhu cầu tìm những khách sạn có phịng nghỉ chất lượng và dịch vụ tốt để nghỉ ngơi
thư giãn ngày càng phổ biến. Bằng cách truy cập vào các website tìm kiếm thơng tin
phịng tại khách sạn giúp khách hàng chọn được phịng theo ý thích của mình. Với tình
hình dịch bệnh đã được giảm bớt như hiện nay, nhu cầu việc đi du lịch của người dân
được tăng cao. Đặc biệt là vào dịp cuối năm cũ bước sang năm mới thì nhu cầu đi du lịch
cực kì cao. Việc thiết kế, xây dựng website khách sạn vào thời gian này là hồn tồn hợp
lí, phù hợp với tình hình thực tiễn hiện tại.
1.4 Mục tiêu:
 Mục tiêu của trang web đặt ra khi hoàn thành xong là:
 Mục tiêu cá nhân
 Thao tác nhuần nhuyễn hơn với làm Web, phục vụ khả năng nghề nghiệp sau khi
ra trường.
 Nắm bắt được cấu trúc phần cứng, sơ đồ khối, nguyên lý hoạt động vận hành của
trang Web.
 Biết cách làm một đồ án hoàn chỉnh phục vụ cho việc làm đồ án tốt nghiệp về sau.
 Mục tiêu sản phẩm:
 Sản phẩm hoạt động ổn định, có nhiều sự lựa chọn khi đi du lịch.
 Sản phẩm mang tính thẩm mỹ cao, dễ dàng sử dụng.
 Phù hợp với đời sống hiện nay.
1.5 Phân công nhiệm vụ và tiến trình làm việc

1


Mã số sinh
viên

Họ và tên

Công việc thực hiện

019101012

Lê Thành Quốc

Thiết kế layout, đóng góp ý tưởng

019101016

Võ Thành Chiến

Đóng góp ý kiến thiết kế layout – ý tưởng,
viết báo cáo

019101046

Lê Hoàng Phúc

Code chính hồn thiện website

Ngày

Thành viên thực hiện

Mơ tả

1/10/2021

Cả nhóm

Nhận đề tài

8/10/2021

Cả nhóm

Lên ý tưởng thiết kế

10/10/2021

Lê Thành Quốc – Lê
Hoàng Phúc

Viết code thiết kế
website

25/11/2021

Võ Thành Chiến

Viết báo tiến độ

28/11/2021

Cả nhóm

Tiếp tục hồn thiện

5/12/2021

Cả nhóm

Viết báo cáo đồ án

Cả nhóm

Thuyết trình báo cáo

2

Ghi chú


1.6 Hình thức sitemap

Hình 1: Site map

3


CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ, CÀI ĐẶT
2.1 Lí thuyết
HMTL: là một ngơn ngữ lập trình được phát triển trên nền tảng ngôn ngữ HTML và
quan trọng nhất của World Wide Web (WWW). Nó được sử dụng để thiết kế và cấu trúc
các website, hỗ trợ cho đa phương tiện tối đa nhưng vẫn giúp cho website thân thiện với
mọi người dùng và mọi thiết bị, các chương trình máy tính, trình duyệt web…
CSS: là ngơn ngữ tạo phong cách cho trang web – Cascading Style Sheet language.
Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ

đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để
tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội
dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.
JAVASCRIPT: làm cho trang web của bạn năng động hơn. Một trang web động có thể
phản ứng với các sự kiện và cho phép người dùng tương tác.JavaScript là ngôn ngữ kịch
bản phổ biến nhất trên internet và nó hoạt động với tất cả các trình duyệt chính.
XAMPP: là chương trình tạo web server được ứng dụng trên các hệ điều hành Linux,
MacOS, Windows, Cross-platform, Solaris. XAMPP được sử dụng cho mục đích nghiên
cứu, phát triển website qua Localhost của máy tính cá nhân. XAMPP được ứng dụng
trong nhiều lĩnh vực từ học tập đến nâng cấp, thử nghiệm Website của các lập trình viên.
2.2 Phân tích
2.2.1 Yêu cầu website
Yêu cầu

Chức năng

Hệ thống menu

Menu dịch vụ, các loại phòng

Đăng nhập

Khách hàng đăng nhập vào để đặt phòng

Liên hệ

Khách hàng điền vào form và gửi đến email của
khách sạn

Tìm kiếm

Khách hàng tìm kiếm phịng và dịch vụ

2.2.2 Yêu cầu chức năng
a. Giao diện
Thay đổi hình ảnh linh hoạt
Giao diện phải bắt mắt về màu sắc
b. Hệ thống menu
4


Menu phải được thể hiện ngang và xổ dọc xuống
Màu sắc hài hòa với màu nền của trang web
c. Thể hiện phịng
Những thuộc tính cơ bản của phịng phải được thể hiện đầy đủ: tên phịng, diện tích,
giá cả
Phải có mục chi tiết để khách hàng có thể xem được nội thất, cách trang trí của phịng
cũng có thể đặt phịng tại mục chi tiết phịng
d. Liên hệ
Phải có các mục điền như:


Tên



Email



Chủ đề



Nội dung

Màu sắc phải trùng với các màu của các trang khác
2.2.3 Thiết kế
 Sơ đồ use case

Hình 2: Sơ đồ use case

5


 Mơ hình class

Hình 3: Mơ hình class
2.2.4 Xây dựng biểu đồ use case
a. Xác định các actor và các use case
Danh sách các actor
Actor
Người Quản Lý

Sử dụng use case
Quản lý thơng tin các khách hàng, ngày đặt phịng, nhận
phịng, trả phịng, thêm, sửa, xóa các phịng.v.v
Bảng 2.1. Danh sách các actor

6

Danh sách các use case
Use case
Tìm kiếm

Ý nghĩa
Cho phép khách hàng tìm và xem thơng tin các phịng

và dịch vụ
Đăng Nhập với khách Cho phép khách hàng đăng nhập để dặt phòng
hàng
Đăng Nhập với admin

Cho phép người quản lý thêm sửa xóa các phịng, xem

Liên hệ

ngày đặt phịng, trả phịng của khách
Cho phép khách hàng liên hệ hỏi đáp các thắc mắc
Bảng 2.2. Danh sách các use case

b. Kịch bản cho các use case
Use case : Tìm kiếm phịng và dịch vụ
Tác nhân chính: Khách hàng
Tiền điều kiện: Khách hàng đã truy cập vào Website
Hậu điều kiện: Khơng có
Điều kiện tối thiểu: Khơng có
Các sự kiện chính:
1) Khách hàng chức năng “Tìm kiếm” trong Website

2) Hệ thống hiển thị thơng tin phịng và dịch vụ

Ngoại lệ:
- Khách hàng có thể khơng tìm kiếm

Bảng 2.3. Kịch bảng cho use case tìm kiếm

7


Use case : Đăng nhập
Tác nhân chính: Người quản lý
Tiền điều kiện: Người quản lý đã vào website
Hậu điều kiện: Tài khoản và mật khẩu đúng định dạng
Điều kiện tối thiểu: Phải có tài khoản và mật khẩu
Các sự kiện chính:
1) Người quản lý chọn chức năng “Đăng nhập” trong webiste
2) Hệ thống hiển thị form đăng nhập
3) Người quản lý điền thông tin đăng nhập
4) Người quản lý xem thơng tin khách hàng, xem ngày đặt phịng, trả phịng.
5) Người quản lý thêm sửa xóa phịng và dịch vụ
Ngoại lệ:
Người quản lý quên mật khẩu
Bảng 2.4. Kịch bản cho use case Đăng nhập
Use case : Liên hệ
Tác nhân chính: Khách hàng
Tiền điều kiện: Khách hàng đã vào website
Hậu điều kiện: Khơng có
Điều kiện tối thiểu: Khơng có
Các sự kiện chính:

1) Khách hàng chọn chức năng “liên hệ” trong Website
2) Hệ thống hiển thị form liên hệ
3) Khách hàng điền nội dung thắc mắc vào form liên hệ
Ngoại lệ:
Khách hàng không gửi được
Bảng 2.5. Kịch bản cho use case liên hệ

2.3 Cài đặt XAMPP
8


Các bước cài đặt XAMPP:
Bước 1:
Truy cập đường link bên dưới để tải phần mềm:
/>
Hình 4: Giao diện trang chủ tải về
Các bạn chọn liên kết phù hợp với máy rồi tải xuống
Bước 2: Tiến hành cài đặt
Sau khi tải file cài đặt về xong bấm vào file “ xampp-windows-x64-8.0.13-0-VS16installer” để chạy, sau đó chọn Next.

9


Hình 5: Cửa sổ cài đặt XAMPP
Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP. Lưu ý
rằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cập vào
thư mục này. Bạn nên để mặc định là c:\xampp.( bạn có thể cài ở ổ khác, do máy tui ổ C
đã đầy nên tui cài ổ D). Tiếp tục ấn Next.

Hình 6: Chọn nơi lưu trữ XAMPP

10


Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“. Và ấn
Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP.

Hình 7: Bỏ chọn “Learn more about Bitnami for XAMPP“
Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của
XAMPP. Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng khơng
khởi động được localhost.

Hình 8: Cài đặt xong XAMPP
11


Khởi động localhost
Bây giờ bạn hãy vào thư mục c:\xampp và mở file xampp-panel.exe lên để bật bảng
điều khiển của XAMPP.

Hình 9: Bảng điều khiển của XAMPP
Bạn để ý sẽ thấy hai ứng dụng Apache và MySQL có nút Start, đó là dấu hiệu bảo 2
ứng dụng này chưa được khởi động, hãy ấn vào nút Start của từng ứng dụng để khởi động
Webserver Apache và MySQL Server lên thì mới chạy được localhost. Nếu cả hai ứng
dụng chuyển sang màu xanh như hình dưới là đã khởi động thành cơng.

Hình 10: Bảng điều khiển của XAMPP
12

Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ
là http://localhost/dashboard/ sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình
dưới.
*Lưu ý: phải chạy phần mềm và bật start của Apache và MySQL trong suốt quá trình
làm việc thì dự án bạn mới chạy được
2.4 Cài đặt chức năng liên hệ
Đầu tiên các bạn mở trình duyệt và truy cập vào đường link dưới đây:
/>Các bạn chọn địa chỉ mail mà bạn muốn khách hàng gửi cho bạn

Hình 11: Bật nút ”Cho phép ứng dụng kém an toàn”
Các bạn click vào nút bật cho phép ứng dụng kém an toàn.
Tiếp theo các bạn mở trình duyệt và truy cập đường link dưới đây:
/>
13


Hình 12: Giao diện trang web PHP
Tại ơ Code màu xanh lá các bạn nhấn vào và bấm download zip

Hình 13: Download zip
Sau khi tải về các bạn giải nén file có tên PHPMailer-master ra

14


Hình 14: Cửa sổ PHPMailer-master
Bạn mở thư mục src và copy hết các file trong đó vào project nằm trong htdocs

15

Hình 15: Cài đặt
Tiếp theo mở phần mềm xampp control panel lên và bấm start 2 mục apache và
MySQL

Hình 16: Giao diện điều khiển XAMPP
Tiếp theo các bạn mớ dự án của mình trong thư mục htdocs
Các file có đi html các bạn phải đổi qua đuôi php ( mở sublime text hoặc visual
studio code để đổi)

16


Hình 17: Cửa sổ Subline text
Tới đây xong phần cài đặt
Bây giờ tới phần code:
Các bạn tạo file có tên lienhe.php và code 1 form liên hệ vào file dưới đây là 1 phần
của code tạo form liên hệ:
lienhe.php
<div class="w3-container w3-padding-32" id="contact">

Liên hệ

Bạn có thắc mắc khó khăn cần giúp đỡ xin hãy điền thơng tin và nội dung bên dưới

<form id="myForm">
required>

placeholder="import content" required>
<div class="form-submit mt-5">
onclick="sendEmail()" value="Send An Email" ><i class="material-icons mdi mdi-messageoutline"></i> Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</form>
</div>

Tiếp theo các bạn thêm 1 đoạn javascript vào để cấu hình chức năng cho form liên hệ
17


Script
<script src=" /><script type="text/javascript">
function sendEmail() {
var name = $("#name");
var email = $("#email");
var subject = $("#subject");
var body = $("#body");
if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) &&
isNotEmpty(body)) {
$.ajax({
url: 'sendEmail.php',
method: 'POST',
dataType: 'json',
data: {
name: name.val(),

email: email.val(),
subject: subject.val(),
body: body.val()
}, success: function (response) {
$('#myForm')[0].reset();
$('.sent-notification').text("Gửi thành công.");
}
});
}
}
function isNotEmpty(caller) {
if (caller.val() == "") {
caller.css('border', '1px solid red');
return false;
} else
caller.css('border', '');
return true;
}
</script>

Tiếp tục các bạn tạo 1 file sendEmail.php file này dùng dể code phần giao thức
SMTP/SSL/POST để gửi email qua lại
sendEmail.php
use PHPMailer\PHPMailer\PHPMailer;
if(isset($_POST['name']) && isset($_POST['email'])){
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$body = $_POST['body'];

18