Signup form using PHP and MySQL Database

6 min readJun 21, 2024

How to insert data into database using core php and mysql

In this blog post, we’ll walk through creating a secure and efficient sign-up form using PHP and MySQL. We’ll cover everything from creating the HTML form, handling form submissions with PHP, and securely storing user data in a MySQL database. Let’s dive in!

Step 1: Install XAMPP

Download XAMPP:

Go to the XAMPP website.

Download the version of XAMPP compatible with your operating system (Windows, macOS, or Linux).

Install XAMPP:

Run the installer and follow the installation instructions.
Choose the components you need (typically Apache, MySQL, PHP, and phpMyAdmin).

Step 2: Start Apache and MySQL

Open XAMPP Control Panel:

Launch the XAMPP Control Panel from the installation directory (e.g., C:\xampp\xampp-control.exe on Windows).

Start Apache and MySQL:

Click the “Start” button next to Apache.
Click the “Start” button next to MySQL.

Step 3: Configure PHP Project Directory

Locate the XAMPP htdocs Directory:

The htdocs folder is the root directory for your web server. It is located in the XAMPP installation directory (e.g., C:\xampp\htdocs on Windows).

Create a New Folder for Your Project:

Inside the htdocs folder, create a new folder for your PHP project (e.g., C:\xampp\htdocs\myproject).

Copy Your PHP Project Files:

Copy all your PHP project files into the new folder you created in the htdocs directory or if you dont want to create new folder directly you can copy as well

Step 4: Access Your PHP Project in a Browser

Open a Web Browser:

Launch your preferred web browser.

Navigate to Your Project:

In the address bar, type http://localhost/myproject (replace myproject with the name of the folder you created in htdocs).

Run Your PHP Files:

Your PHP project’s main file (e.g., index.php) should load. You can navigate through your project as you would on a live server.

Go to http://localhost/ your_file_name.php in your web browser.
You should replace your_file_name.php with your ones

Step 1: Create the HTML Sign-Up Form

First, we’ll create an HTML file named signup.html that includes a form for collecting user email and password information.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
</head>
<body>
    <form action="http://localhost/myproject/create_user.php" method="POST">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <label for="confirm_password">Confirm Password:</label>
        <input type="password" id="confirm_password" name="confirm_password" required><br><br>

        <input type="submit" value="Sign Up">
    </form>
</body>
</html>

This form collects the user’s email, password, and a confirmation of the password. The form data is submitted to create_user.php via the POST method.

This comparison highlights the key differences between the GET and POST methods :

comparison of the major differences between GET and POST methods via html form

Step 2: Create the Database Connection File

Next, we’ll create a connection.php file to handle the database connection.

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

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

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} else {
   echo "working";
}
?>

This file establishes a connection to the MySQL database using the credentials provided.

These variables store the connection parameters needed to connect to the MySQL database:

$servername: The hostname of the MySQL server. localhost is used when the database server is on the same machine as the PHP script.
$username: The username to connect to the MySQL server. The default username for XAMPP is root.
$password: The password for the MySQL user. By default, XAMPP's root user has no password.
$dbname: The name of the database you want to connect to, in this case, user_login_info
at step 4 you can see we have created user_login_info

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

This line creates a new instance of the mysqli class, which represents the connection to the MySQL database.

The constructor of the mysqli class takes four parameters: server name, username, password, and database name. If the connection is successful, the $conn variable becomes an object that you can use to interact with the database.

Below conditional statement checks if there was an error during the connection attempt:

$conn->connect_error: This property holds the error message if the connection fails.
die(): This function outputs a message and terminates the current script. If the connection fails, it outputs "Connection failed: " followed by the specific error message.

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

Step 3: Handle Form Submission in `create_user.php`

Now, let’s create the create_user.php file to process the form data and save it to the database securely.

<?php
include 'connection.php';

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

    if ($password === $confirm_password) {
        $hashed_password = password_hash($password, PASSWORD_DEFAULT);

        $stmt = $conn->prepare("INSERT INTO users (email, password) VALUES (?, ?)");
        $stmt->bind_param("ss", $email, $hashed_password);

        if ($stmt->execute()) {
            echo "User created successfully";
        } else {
            echo "Error: " . $stmt->error;
        }

        $stmt->close();
    } else {
        echo "Passwords do not match.";
    }
}

$conn->close();
?>

first line includes the connection.php file, establishing a connection to the MySQL database (user_login_info). This ensures that the database connection is available for executing queries in create_user.php.
second line the conditional statement checks if the form was submitted using the HTTP POST method. If true, it proceeds to handle the form data.
These lines retrieve the form data submitted via POST:
$email: Stores the user's email address.
$password: Stores the user's chosen password.
$confirm_password: Stores the confirmation of the user's password.

Hashing the Password:

$hashed_password = password_hash($password, PASSWORD_DEFAULT);

This line uses PHP’s password_hash() function to securely hash the password using the bcrypt algorithm (PASSWORD_DEFAULT). The resulting hash is stored in $hashed_password and is suitable for storing in the database.

Prepare and Execute SQL Insert Statement:

$stmt = $conn->prepare("INSERT INTO users (email, password) VALUES (?, ?)");
$stmt->bind_param("ss", $email, $hashed_password);

Prepare Statement: $conn->prepare() prepares an SQL statement for execution. In this case, it prepares an INSERT statement to insert a new user into the users table.
Bind Parameters: $stmt->bind_param() binds variables to a prepared statement as parameters. "ss" indicates that the parameters are strings (email and hashed password).

Execute the Statement:

if ($stmt->execute()) {
    echo "User created successfully";
} else {
    echo "Error: " . $stmt->error;
}

Execute: $stmt->execute() executes the prepared statement. If successful, it outputs "User created successfully". Otherwise, it outputs an error message indicating the nature of the error.

Close Statement: $stmt->close() frees the resources associated with the prepared statement.

$conn->close(); This line closes the connection to the MySQL database, freeing up resources.

Step 4: Create the Database Table

Start XAMPP if not started yet:

Open the XAMPP Control Panel.
Start the Apache and MySQL modules by clicking the “Start” buttons next to them.

Open phpMyAdmin:

In your web browser, navigate to http://localhost/phpmyadmin/.

Create the Database:

In phpMyAdmin, click on the “Databases” tab.
Enter user_login_info as the database name in the "Create database" field.
Click “Create”.

Create the users Table:

After creating the database, select it from the left sidebar.
Click on the “SQL” tab.
Copy and paste the following SQL script into the text area:

CREATE DATABASE user_login_info;

USE user_login_info;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    email VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL
);

Click “Go” to run the script.

This SQL script creates the database and the users table with fields for id, email, and password.

In your web browser, navigate to http://localhost/signup/signup.html to access the sign-up form.

Now you can go to admin to see data saved or not

Security: The use of password_hash() ensures that passwords are securely hashed before being stored in the database, protecting user credentials.