SignUp Form in PHP
In this tutorial, we will learn how to create a secure SignUp system. If you want to insert student, employee, or user data into a MySQL database, you need to create a registration form. Basic knowledge of HTML forms and PHP scripting is required to build a functional SignUp form.
In a previous tutorial, we created a login form using PHP and MySQL, also known as a SignIn form. Almost all modern websites require users to SignUp before they can SignIn. Here, we will build a simple and secure SignUp form using PHP.
Registration Form Using MySQL & PHP
When building a dynamic website, you often need to collect data from users. To achieve this, we create an HTML form, commonly referred to as a registration or signup form. We also need to create a table inside a MySQL database to store this information securely.
The user's data is inserted into the database using an SQL `INSERT` query executed within our PHP script.
MySQL INSERT Query for Registration Forms
We use the `INSERT` query to add new rows of data into a MySQL table. You must define both the column names and the values you want to insert. Let's look at the basic syntax of an `INSERT` query:
INSERT INTO `table_name` (`column_1`, `column_2`, `column_3`) VALUES ('value-1', 'value-2', 'value-3');
Step 1: Create a MySQL Database Table
To create a SignUp system, you first need a database table. You can create this table in two ways:
1. Use the phpMyAdmin interface.
2. Execute an SQL query.
Before creating the form, we must decide which fields (columns) are required. Here is the SQL query to create our `users` table:
CREATE TABLE `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(100) NOT NULL,
`gender` VARCHAR(20) NOT NULL,
`dob` DATE NOT NULL,
`email` VARCHAR(100) NOT NULL,
`mobile` VARCHAR(20) NOT NULL,
`password` VARCHAR(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Step 2: Make an HTML Form
Just like we created a login form, we now need an HTML form for registration. The form will contain all the necessary input fields. When the user fills out the information and clicks submit, the data is sent to the server. We use the POST method to securely transmit this data. Let's create the form:
HTML SignUp Form
<html>
<head>
<title>Sign Up Form</title>
</head>
<body>
<center>
<form action="signup.php" method="POST">
<fieldset style="width: 30%; text-align: left;">
<legend>Sign Up</legend>
<label>Name:</label><br/>
<input name="name" type="text" required /><br/><br/>
<label>Gender:</label><br/>
<input name="gender" type="radio" value="Male" required /> Male
<input name="gender" type="radio" value="Female" required /> Female<br/><br/>
<label>DOB:</label><br/>
<input name="dob" type="date" required /><br/><br/>
<label>Email:</label><br/>
<input name="email" type="email" required /><br/><br/>
<label>Mobile:</label><br/>
<input name="mobile" type="text" required /><br/><br/>
<label>Password:</label><br/>
<input name="password" type="password" required /><br/><br/>
<input name="submit" type="submit" value="Sign Up" />
</fieldset>
</form>
</center>
</body>
</html>
Step 3: Design the SignUp Form Using CSS
A good design improves the user experience. You can use a CSS stylesheet to make the registration form look attractive. Add the following CSS inside your HTML file's <head> section:
<style type="text/css">
input[type=text], input[type=date], input[type=email], input[type=password] {
width: 95%;
padding: 10px;
margin: 5px 0;
border: 1px solid #000;
outline: none;
border-radius: 4px;
}
input[type=text]:focus, input[type=date]:focus, input[type=email]:focus, input[type=password]:focus {
background-color: lightblue;
}
input[type=submit] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
background-color: blue;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
input[type=submit]:hover {
background-color: green;
}
</style>
Step 4: Create a Configuration File (Database Connection)
The configuration file handles the secure connection between your PHP script and the MySQL database. We will use PDO (PHP Data Objects) because it is highly secure and prevents SQL injection.
Create a file named config.php and add the following code:
<?php
$databaseHost = '127.0.0.1'; // or localhost
$databaseName = 'test'; // Your database name
$databaseUsername = 'root'; // Default is 'root' for localhost
$databasePassword = ''; // Default is empty for localhost
try {
$pdo = new PDO("mysql:host=$databaseHost;dbname=$databaseName;charset=utf8mb4", $databaseUsername, $databasePassword);
// Set PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
die("ERROR: Could not connect. " . $e->getMessage());
}
?>
Step 5: Create a PHP Script for User Registration
Now, we will write the PHP logic to process the form data and save it into the database.
1. Include the `config.php` file to connect to the database.
2. Check if the form was submitted using `isset($_POST['submit'])`.
3. Hash the user's password using the secure `password_hash()` function before saving it.
4. Use a PDO Prepared Statement to execute the `INSERT` query securely.
PHP Registration Script (signup.php)
<?php
// Include the database connection file
require_once("config.php");
if(isset($_POST['submit'])) {
$name = trim($_POST['name']);
$gender = $_POST['gender'];
$dob = $_POST['dob'];
$email = trim($_POST['email']);
$mobile = trim($_POST['mobile']);
// Always hash passwords before storing them in the database!
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
// Validate if any field is empty
if(empty($name) || empty($email) || empty($mobile) || empty($_POST['password'])) {
echo "<font color='red'>All fields are required!</font>";
} else {
try {
// Prepare an SQL statement using PDO
$sql = "INSERT INTO users (name, gender, dob, email, mobile, password)
VALUES (:name, :gender, :dob, :email, :mobile, :password)";
$stmt = $pdo->prepare($sql);
// Bind parameters and execute the query
$stmt->execute([
':name' => $name,
':gender' => $gender,
':dob' => $dob,
':email' => $email,
':mobile' => $mobile,
':password' => $password
]);
echo "<font color='green'>Registration Successful!</font>";
} catch(PDOException $e) {
echo "<font color='red'>Error: " . $e->getMessage() . "</font>";
}
}
}
?>
SignUp Using POST vs GET Methods in PHP
In the above example, we used the POST method. The POST method sends form data securely via an HTTP header. It is the best and most secure method for SignIn and SignUp forms because passwords and sensitive data are hidden from the URL.
Although you *can* use the GET method to submit forms, **it is highly discouraged for registration systems.** The GET method appends the submitted data directly to the URL separated by a `?` sign. This means the user's password will be visible to anyone looking at the browser history.
http://example.com/signup.php?name=John&password=MySecretPassword123&submit=Sign+Up
Security Rule: Always use the POST method for submitting passwords, emails, and sensitive user data.
Recommended Posts:-
