Connect an HTML Form to a MySQL Database Using PHP

In this tutorial, I’ll guide you through the process of connecting your HTML forms to a MySQL database using PHP. Recently, I received numerous questions and comments requesting a detailed tutorial on form backends, and today, I’m excited to address those requests. We’ll walk through each step involved in setting up the backend with PHP and MySQL. I’ll explain everything in detail to ensure you have a clear understanding.

Step 1: Setting Up Your Local Server Environment

To get started, we’ll first need to install XAMPP. Installing XAMPP will automatically set up PHP along with Apache, MySQL, and other essential components. It’s a comprehensive package that provides everything needed to create a local server environment for web development.

Installing XAMPP:
  1. Visit Apache Friends and click on the download button.
  2. Since I’m using Windows, I’ll download the Windows installer.
  3. Follow the straightforward installation process. You can choose a different installation folder if you don’t want it on the C drive.
  4. Once installed, open the XAMPP Control Panel.
  5. Start Apache and MySQL.

Under MySQL, click Admin to open phpMyAdmin, where we’ll create the database and tables for the backend.

Step 2: Creating the Database

  1. In phpMyAdmin, click New to create a new database.
  2. Name your database user_data (you can name it whatever you want, just remember it for later).
  3. Click Create.
  4. Next, create a table named users with the following columns:
    • id (INT, Primary Key, Auto Increment)
    • first_name (VARCHAR)
    • username (VARCHAR)
    • password (VARCHAR)

Step 3: Building the HTML Form

We’ll now create a simple HTML form that collects the user’s First Name, Username, and Password.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <form action="connect.php" method="post">
            <h2>Register</h2>
            <input type="text" name="first_name" placeholder="First Name" required>
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <button type="submit">Sign Up</button>
        </form>
    </div>
</body>
</html>

Step 4: Styling the Form

To make our form visually appealing, we’ll create a styles.css file and add the necessary CSS styles.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9;
}

.container {
    width: 400px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

input {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

Step 5: Connecting to MySQL with PHP

Next, we’ll create the connect.php file, which will handle form submission and store the data in MySQL.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_data";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $first_name = $_POST['first_name'];
    $username = $_POST['username'];
    $password = $_POST['password'];

    $sql = "INSERT INTO users (first_name, username, password) VALUES ('$first_name', '$username', '$password')";

    if ($conn->query($sql) === TRUE) {
        echo "Registration successful!";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

$conn->close();
?>

And that’s it! You now have a fully functioning HTML form that sends data to a MySQL database using PHP. When you submit the form, the data is securely stored in the database and you get a confirmation message.