In this tutorial will going to help you, how to add user registration for your website. In order to create a new user account, we required a minimal amount of information from the user like username, address, email id, phone no, gender, etc and store it in a database. After that, we use this data for to authenticate our user while login. For creating this user registration, we will use Bootstrap for front end design and PHP and MySQL for back-end-design.
We will use simple tags and also, we will use bootstrap classes in the Sign-Up.html webpage. Let’s start:
Table of Contents
Creating Database Table
Firstly, we have to create our database which stores our data.
For creating a database:
1. Open phpmyadmin
2. Click create table and name it as ‘user_reg’.
3. Then name the database as “‘techjunkgigs_reg'”.
4. After creating a database name, click the SQL and paste the below code.
CREATE TABLE IF NOT EXISTS `user_reg` ( `user_id` int(12) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `gender` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `mobile_no` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `city` varchar(255) NOT NULL, `state` varchar(255) NOT NULL, `remark` varchar(500) NOT NULL, PRIMARY KEY (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
Main Screen
This page contains text field, password field, radio button field, dropdown and text area field where user have to enter his/her details and which will authorize the user for login the page.
To create a form, open your HTML code editor and paste the code below after the tag and save it as reg.php
reg.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add User</title>
</head>
<body>
<div class="container">
<form class="well form-horizontal" action="db_reg.php" method="POST" id="student_details">
<fieldset>
<!-- Form Name -->
<legend>Add User</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">User Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="username" placeholder="Name" class="form-control" type="text" required>
</div> </div></div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input name="password" placeholder="Password" class="form-control" type="password" required>
</div> </div></div>
<!-- Radio Button input-->
<div class="form-group">
<label class="col-md-4 control-label">Gender</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div></div> </div>
<div class="form-group">
<label class="col-md-4 control-label">E-mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="email" placeholder="abc@xyz.com" class="form-control" type="text">
</div> </div></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Mobile no.</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="mobile_no" placeholder="987-654-3210" class="form-control"/>
</div> </div></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"> <i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div> </div></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div> </div></div>
<!-- Dropdown input-->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select your state</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
</select> </select> </div></div></div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Remark</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="remark" placeholder="Remark"></textarea>
</div> </div></div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-2">
<button type="submit" class="btn btn-warning" >Save </button>
</div>
<div class="col-md-2">
<button type="reset" class="btn btn-warning" >Clear<span class="glyphicon glyphicon-send"></span></button>
</div></div>
</fieldset>
</form></div> </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Database connection and Logic page
In this section we will first connect to the database, then we select the database, if the values are posted, then we will run a MySQL query, it will insert the values into the database.
To create a form, open your HTML code editor and paste the code below after the tag and save it as Db_reg.php
Db_reg.php
<?php
$conn=mysql_connect('localhost','root','');
if(!$conn)
{
echo 'Database not connected';
}
if(!mysql_select_db('techjunkgigs_reg'))
{
echo" database not selected";
}
$username= $_POST['username'];
$password= $_POST['password'];
$gender= $_POST['gender'];
$email= $_POST['email'];
$mobile_no= $_POST['mobile_no'];
$address= $_POST['address'];
$city= $_POST['city'];
$state= $_POST['state'];
$remark= $_POST['remark'];
$sql = "INSERT INTO user_reg(username,password,gender,email,mobile_no,address,city,state,remark) VALUES ('$username','$password','$gender','$email','$mobile_no','$address','$city','$state','$remark')";
if(!mysql_query($sql))
{ echo ("<SCRIPT LANGUAGE='JavaScript'>
window.alert('Not Added Please try again')
window.location.href='reg.php';
</SCRIPT>");
}
else
{
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.alert('Added successfully')
window.location.href='reg.php';
</SCRIPT>");
}
?>
Demo Image
Demo Video
I hope this tutorial helped you to learn user registration using PHP and MySQL . To get the latest news and updates follow us on twitter & facebook, subscribe to our YouTube channel. And If you have any query then please let us know by using comment form.
Find Login Page with PHP and MySQL database Here
Simple Login Page Using PHP and MySQL