PHP Forma 表单带房型选择的酒店预订表单实现
随着互联网技术的不断发展，在线酒店预订已经成为人们出行前的重要选择。为了提供更好的用户体验，我们需要设计一个功能完善、界面友好的酒店预订表单。本文将围绕PHP Forma表单，结合房型选择功能，详细讲解如何实现一个酒店预订表单。
1. 项目背景
酒店预订表单是酒店预订网站的核心功能之一，它需要满足以下需求：
- 用户可以输入个人信息和预订信息；
- 用户可以选择入住和离店日期；
- 用户可以选择房型；
- 用户可以提交预订请求，并获取预订结果。
2. 技术选型
为了实现上述功能，我们选择以下技术：
- 前端：HTML、CSS、JavaScript、jQuery
- 后端：PHP
- 数据库：MySQL
3. 数据库设计
我们需要设计数据库表来存储用户信息和预订信息。以下是数据库表的设计：
sql
-- 用户信息表
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
phone VARCHAR(20) NOT NULL
);
-- 酒店信息表
CREATE TABLE hotels (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
address VARCHAR(200) NOT NULL,
rating INT NOT NULL
);
-- 房型信息表
CREATE TABLE room_types (
id INT AUTO_INCREMENT PRIMARY KEY,
hotel_id INT NOT NULL,
type VARCHAR(50) NOT NULL,
price DECIMAL(10, 2) NOT NULL,
FOREIGN KEY (hotel_id) REFERENCES hotels(id)
);
-- 预订信息表
CREATE TABLE bookings (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
hotel_id INT NOT NULL,
room_type_id INT NOT NULL,
check_in DATE NOT NULL,
check_out DATE NOT NULL,
status VARCHAR(20) NOT NULL,
FOREIGN KEY (user_id) REFERENCES users(id),
FOREIGN KEY (hotel_id) REFERENCES hotels(id),
FOREIGN KEY (room_type_id) REFERENCES room_types(id)
);
4. 前端设计
接下来，我们使用HTML、CSS和JavaScript来设计酒店预订表单的前端界面。
4.1 HTML结构
html
酒店预订
用户名：
邮箱：
电话：
入住日期：
离店日期：
酒店：
请选择酒店
房型：
请选择房型
4.2 CSS样式
css
/ styles.css /
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: 4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: 45a049;
}
4.3 JavaScript交互
javascript
// scripts.js
document.addEventListener('DOMContentLoaded', function() {
// 动态加载酒店选项
loadHotels();
// 监听酒店选择变化，动态加载房型选项
document.getElementById('hotel').addEventListener('change', function() {
var hotelId = this.value;
loadRoomTypes(hotelId);
});
// 表单提交事件
document.getElementById('bookingForm').addEventListener('submit', function(event) {
event.preventDefault();
// 表单验证和提交逻辑
// ...
});
});
function loadHotels() {
// 调用后端API获取酒店列表，并动态加载到下拉菜单中
// ...
}
function loadRoomTypes(hotelId) {
// 调用后端API获取指定酒店的房型列表，并动态加载到下拉菜单中
// ...
}
5. 后端实现
5.1 PHP代码
php
connect_error) {
die("连接失败: " . $mysqli->connect_error);
}
// 获取酒店列表
$hotelsQuery = "SELECT FROM hotels";
$hotelsResult = $mysqli->query($hotelsQuery);
// 获取房型列表
$roomTypesQuery = "SELECT FROM room_types";
$roomTypesResult = $mysqli->query($roomTypesQuery);
// 处理表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 获取表单数据
$username = $_POST['username'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$checkIn = $_POST['checkIn'];
$checkOut = $_POST['checkOut'];
$hotelId = $_POST['hotel'];
$roomTypeId = $_POST['roomType'];
// 插入预订信息到数据库
$bookingQuery = "INSERT INTO bookings (user_id, hotel_id, room_type_id, check_in, check_out, status) VALUES (?, ?, ?, ?, ?, 'pending')";
$stmt = $mysqli->prepare($bookingQuery);
$stmt->bind_param("iiisss", $userId, $hotelId, $roomTypeId, $checkIn, $checkOut);
$stmt->execute();
$stmt->close();
// 关闭数据库连接
$mysqli->close();
// 重定向到预订成功页面
header('Location: booking_success.php');
exit();
}
// 关闭数据库连接
$mysqli->close();
?>
5.2 数据库操作
在PHP代码中，我们使用了mysqli扩展来连接数据库，并执行SQL查询。这里我们展示了如何获取酒店列表和房型列表，以及如何处理表单提交并插入预订信息到数据库。
6. 总结
本文详细讲解了如何使用PHP Forma表单实现一个带房型选择的酒店预订表单。通过前端HTML、CSS和JavaScript，以及后端PHP和MySQL，我们构建了一个功能完善、界面友好的酒店预订系统。在实际开发中，我们还需要考虑安全性、性能和用户体验等方面，以提升系统的整体质量。
Comments NOTHING