In this tutorial, we will learn how to create and design a registration (sign-up) form in which if the user enters details, the HTML form data are inserted into our MySQL server database.
Check out Login System with PHP and MySQL at Login System with PHP and MySQL Database
Before creating the registration form, first, we need to know about the pre-requisites to create the login module.
Pre-requisites
- HTML, CSS, PHP, and MySQL basics
- Text Editor - For writing the code - Notepad, Notepad++, Dreamweaver, etc.
- XAMPP - XAMPP is a cross-platform software, which stands for Cross-platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a complete software package, so, we don't need to install all these separately.
Create Project Directory
Let's create a project directory named "registration-form-php-mysql".
Within the "registration-form-php-mysql" directory, we are going to create files required to build the Registration form.
SQL Script
Use the below SQL script to create a database and table:
CREATE DATABASE registration_form;
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`user_name` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `users` (`id`, `user_name`, `password`, `name`) VALUES
(1, 'admin', '202cb962ac59075b964b07152d234b70', 'admin'),
(2, 'user', '202cb962ac59075b964b07152d234b70', 'user');Create db_conn file
Let's create a db_conn file that contains information about MySQL Database configuration.
PHP code to create a MySQL database connection:
<?php
$host= "localhost";
$username= "root";
$password = "";
$db_name = "registration_form";
$conn = mysqli_connect($host, $username, $password, $db_name);
if (!$conn) {
echo "Connection failed!";
}Now, we have successfully connected to our Database, in the next step, we will create the registration or signup form.
Create signup.php file
Now, we will write the PHP code to design the sign-up form. Let's create a signup.php file with the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>SIGN UP</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="signup-check.php" method="post">
<h2>SIGN UP</h2>
<?php if (isset($_GET['error'])) { ?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<?php if (isset($_GET['success'])) { ?>
<p class="success"><?php echo $_GET['success']; ?></p>
<?php } ?>
<label>Name</label>
<?php if (isset($_GET['name'])) { ?>
<input type="text"
name="name"
placeholder="Name"
value="<?php echo $_GET['name']; ?>"><br>
<?php }else{ ?>
<input type="text"
name="name"
placeholder="Name"><br>
<?php }?>
<label>User Name</label>
<?php if (isset($_GET['uname'])) { ?>
<input type="text"
name="uname"
placeholder="User Name"
value="<?php echo $_GET['uname']; ?>"><br>
<?php }else{ ?>
<input type="text"
name="uname"
placeholder="User Name"><br>
<?php }?>
<label>Password</label>
<input type="password"
name="password"
placeholder="Password"><br>
<label>Confirm Password</label>
<input type="password"
name="re_password"
placeholder="Re_Password"><br>
<button type="submit">Sign Up</button>
</form>
</body>
</html>Note that we have added validation for form fields. You can modify it as per your requirement.
Note that in the above file, we have added style.css so we will create a style.css file in the next step.
Create style.php file
Now, we will create a style.css file to provide a more attractive view of the registration form. The CSS code for the style.css file is given below:body {
background: #1690A7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
*{
font-family: sans-serif;
box-sizing: border-box;
}
form {
width: 500px;
border: 2px solid #ccc;
padding: 30px;
background: #fff;
border-radius: 15px;
}
h2 {
text-align: center;
margin-bottom: 40px;
}
input {
display: block;
border: 2px solid #ccc;
width: 95%;
padding: 10px;
margin: 10px auto;
border-radius: 5px;
}
label {
color: #888;
font-size: 18px;
padding: 10px;
}
button {
float: right;
background: #555;
padding: 10px 15px;
color: #fff;
border-radius: 5px;
margin-right: 10px;
border: none;
}
button:hover{
opacity: .7;
}
.error {
background: #F2DEDE;
color: #A94442;
padding: 10px;
width: 95%;
border-radius: 5px;
margin: 20px auto;
}
.success {
background: #D4EDDA;
color: #40754C;
padding: 10px;
width: 95%;
border-radius: 5px;
margin: 20px auto;
}
h1 {
text-align: center;
color: #fff;
}
.ca {
font-size: 14px;
display: inline-block;
padding: 10px;
text-decoration: none;
color: #444;
}
.ca:hover {
text-decoration: underline;
} Create signup_check.php file
Now, let write a PHP code to store User registered form data into MySQL database.
Let's create a file named signup_check.php with the following content into it:
<?php
session_start();
include "db_conn.php";
if (isset($_POST['uname']) && isset($_POST['password'])
&& isset($_POST['name']) && isset($_POST['re_password'])) {
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$uname = validate($_POST['uname']);
$pass = validate($_POST['password']);
$re_pass = validate($_POST['re_password']);
$name = validate($_POST['name']);
$user_data = 'uname='. $uname. '&name='. $name;
if (empty($uname)) {
header("Location: signup.php?error=User Name is required&$user_data");
exit();
}else if(empty($pass)){
header("Location: signup.php?error=Password is required&$user_data");
exit();
}
else if(empty($re_pass)){
header("Location: signup.php?error=Re Password is required&$user_data");
exit();
}
else if(empty($name)){
header("Location: signup.php?error=Name is required&$user_data");
exit();
}
else if($pass !== $re_pass){
header("Location: signup.php?error=The confirmation password does not match&$user_data");
exit();
}
else{
// hashing the password
$pass = md5($pass);
$sql = "SELECT * FROM users WHERE user_name='$uname' ";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
header("Location: signup.php?error=The username is taken try another&$user_data");
exit();
}else {
$sql2 = "INSERT INTO users(user_name, password, name) VALUES('$uname', '$pass', '$name')";
$result2 = mysqli_query($conn, $sql2);
if ($result2) {
header("Location: signup.php?success=Your account has been created successfully");
exit();
}else {
header("Location: signup.php?error=unknown error occurred&$user_data");
exit();
}
}
}
}else{
header("Location: signup.php");
exit();
}Demo
Hit http://localhost/registration-form-php-mysql/signup.php link in browser:
Source code on GitHub
The source code of this tutorial available on our GitHub repository at https://github.com/sourcecodeexamples/registration-form-php-mysql
Comments
Post a Comment