How to Connect a PHP Form to a MySQL Database
In web development, connecting a user interface to a backend database is a fundamental skill. In this tutorial, we will walk through how to create a simple Room Booking System web page using HTML and CSS, and then process and save the submitted form data into a MySQL database using PHP.
1. The Frontend Interface (Index.php)
First, we will build the user interface. This file includes an introductory section, a table displaying available room options, and a booking form where users can input their booking details.
We use CSS directly inside the <style> tag to give the page a clean, modern, and responsive layout. The form uses the POST method and points to insert.php to securely send the data.
<html>
<head>
<title>Booking_Hotel</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f6f9;
color: #444;
}
header {
background-color: #4CAF50;
color: white;
padding: 25px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
nav {
background-color: #343a40;
text-align: center;
padding: 12px 0;
}
nav a {
color: #ffffff;
text-decoration: none;
margin: 0 20px;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
nav a:hover {
color: #ff6347;
text-decoration: underline;
}
section {
padding: 25px;
margin: 20px auto;
max-width: 900px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
section:hover {
box-shadow: 0 6px 18 rgba(0, 0, 0, 0.15);
}
section h2 {
color: #007bff;
font-size: 1.8rem;
margin-bottom: 15px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
table th {
background-color: #f1f1f1;
font-weight: 600;
color: #333;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 12px 0;
font-size: 1.2rem;
}
ul li strong {
color: #007bff;
}
form {
max-width: 650px;
margin: 25px auto;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
form input,
form textarea,
form button {
width: 100%;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
form input:focus,
form textarea:focus {
border-color: #007bff;
outline: none;
}
form button {
background-color: #007bff;
color: white;
font-size: 1.1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #0056b3;
}
form button:active {
background-color: #004085;
}
img {
position: relative;
height: 200px;
width: 900px;
}
</style>
</head>
<body>
<header>
<h1>Room Allocation</h1>
</header>
<section id="about">
<h2>About the Page</h2>
<img src="hotel.jpg" alt="Hotel View">
<p>Software is a set of instructions and data that tells a computer's physical hardware exactly how to operate and perform specific tasks. It bridges the gap between humans and machines, translating complex, underlying code into the intuitive apps, operating systems, and websites we use every day.</p>
</section>
<section id="schedule">
<h2>Room Booking Status</h2>
<table>
<thead>
<tr>
<th>Room number</th>
<th>Room type</th>
<th>Capacity</th>
</tr>
</thead>
<tbody>
<tr><td>101</td><td>Single</td><td>2</td></tr>
<tr><td>102</td><td>Double</td><td>4</td></tr>
<tr><td>103</td><td>Suite</td><td>5</td></tr>
<tr><td>104</td><td>Single</td><td>1</td></tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>Room Booking Form</h2>
<form action="insert.php" method="post">
<label for="bookingid">Booking ID:</label>
<input type="number" name="bookingid" required>
<label for="guestid">Guest ID:</label>
<input type="number" name="guestid" required>
<label for="roomnumber">Room Number:</label>
<input type="number" name="roomnumber" required>
<label for="startdate">Start Date:</label>
<input type="date" name="startdate" required>
<label for="enddate">End Date:</label>
<input type="date" name="enddate" required>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>
</section>
<footer>
<nav>
<a href="Timetable.html">Timetable</a> |
<a href="#schedule">Schedule</a> |
<a href="#speakers">Speakers</a> |
<a href="#contact">Contact</a>
</nav>
</footer>
</body>
</html>
2. The Backend Database Connection (Insert.php)
Once the user clicks the "Send" button, the data is transmitted to insert.php. This file handles the backend logic:
Establishes a connection to the MySQL database server using the mysqli object-oriented approach.
Checks if the connection is successful. If it fails, it terminates the script and shows an error message.
Collects data passed from the form using the global $_POST array.
Executes an SQL INSERT statement to store the variables inside the info table of the roombooking database.
Closes the database connection efficiently to free up system resources.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "roombooking";
$port = 3306;
// Create connection
\(conn = new mysqli(\)servername, \(username, \)password, \(dbname, \)port);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Collect form data
\(bookingid = \)_POST['bookingid'];
\(guestid = \)_POST['guestid'];
\(roomnumber = \)_POST['roomnumber'];
\(startdate = \)_POST['startdate'];
\(enddate = \)_POST['enddate'];
// Insert data into database
$sql = "INSERT INTO info (bookingid, guestid, roomnumber, startdate, enddate)
VALUES ('\(bookingid', '\)guestid', '\(roomnumber', '\)startdate', '$enddate')";
if (\(conn->query(\)sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . \(sql . "<br>" . \)conn->error;
}
// Close the connection
$conn->close();
?>
Conclusion
By following this workflow, you can successfully route user-submitted data from a frontend form straight into a MySQL database via PHP. Make sure that your local server (like XAMPP, WAMP, or MAMP) is running and that your database roombooking and table info are already created with matching columns before executing this script.
I hope I made it easier.