If you want to add login form to your websites, then you need to add sign up or registration form in order to get values from user and store it into Mysql database. Your registration form should be made in HTML and the values are stored in Mysql using PHP. Lets see create the registration form in PHP , Mysql, HTML.
First you need to create database to store user values. You need to use below Mysql query to create database in your phpmyadmin.
Create database db_name
ie,
Create database new
where new is my database name
Then you've to use below Mysql query for use created database.
Use db_name
ie,
Use new
After created database, you need to create table for store users values. You can create table using below Mysql query.
create table login (name varchar(30),password varchar(30),mail varchar(50))
Now you can see created table is presented in your database.
After finished database and table creation, you need to create front end design which can be viewed by users. ie, client side script. Using below HTML code to create registration form in HTML.
After created form in HTML, it should not be present user attractable one. So you need to add CSS styles to HTML form in order to make form colorful. Just add below CSS codes to your html form.
After add CSS to your form, you've to validate your form using javascript or jquery. You can validate empty textbox, validate valid email id and valid phone number using below javascript. Add below javascript validation to your HTML form.
Then you need to write server side script to store values into database. First you make connection to Mysql database to store user values using PHP. Visit How to connect Mysql database using PHP. Add below PHP codes
Here is the PHP code for insert user data into Mysql database. This is the code for avoid duplicate entries in table. visit How to avoid duplicate values storing in Mysql table while inserting using PHP.
Now you combine all above codes to single PHP file. Then you'll get code like below one. visit How to insert values into Mysql database using PHP.
When you run this file, your screen should be like this:
For example, you'll try to store values guru, guru, guruparthiban19@gmail.com, then your screen like below:
After enter submit button, the values are registered in Mysql database. Now you can see the values are present in yout table.
You will get error message when you tried to insert same values again. This is below
Now your table contains user details. So you can add login form to validation user name and password of users.
Related Post:
Login form validation using PHP and Mysql
Login form validation with remeber me function using PHP and Mysql
Send forgot password to mailin login form using PHP and Mysql
1. Create Database
First you need to create database to store user values. You need to use below Mysql query to create database in your phpmyadmin.
Create database db_name
ie,
Create database new
where new is my database name
Then you've to use below Mysql query for use created database.
Use db_name
ie,
Use new
2. Create table in Mysql database
After created database, you need to create table for store users values. You can create table using below Mysql query.
create table login (name varchar(30),password varchar(30),mail varchar(50))
Now you can see created table is presented in your database.
3. Create registration form in HTML
After finished database and table creation, you need to create front end design which can be viewed by users. ie, client side script. Using below HTML code to create registration form in HTML.
<form action="#" method="post">
<table id="tbl" align="center">
<tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
<tr><td>Password:</td><td><input type="text" name="password" id="password"></td></tr>
<tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
<tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
</table>
</form>
<table id="tbl" align="center">
<tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
<tr><td>Password:</td><td><input type="text" name="password" id="password"></td></tr>
<tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
<tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
</table>
</form>
4. Add styles to registration form
After created form in HTML, it should not be present user attractable one. So you need to add CSS styles to HTML form in order to make form colorful. Just add below CSS codes to your html form.
body {
color:white;
font-size:14px;
}
.contact {
text-align:center;
background: none repeat scroll 0% 0% #8FBF73;
padding: 20px 10px;
box-shadow: 1px 2px 1px #8FBF73;
border-radius: 10px;
width:520px;
}
#name, #password, #mail {
width: 250px;
margin-bottom: 15px;
background: none repeat scroll 0% 0% #AFCF9C;
border: 1px solid #91B57C;
height: 30px;
color: #808080;
border-radius: 8px;
box-shadow: 1px 2px 3px;
}
#submit
{
background:none repeat scroll 0% 0% #8FCB73;
display: inline-block;
padding: 5px 10px;
line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
border-radius: 8px;
border: 1px solid #8FCB73;
text-decoration: none;
opacity: 0.9;
cursor: pointer;
color:white;
}
#er {
color: #F00;
text-align: center;
margin: 10px 0px;
font-size: 17px;
}
color:white;
font-size:14px;
}
.contact {
text-align:center;
background: none repeat scroll 0% 0% #8FBF73;
padding: 20px 10px;
box-shadow: 1px 2px 1px #8FBF73;
border-radius: 10px;
width:520px;
}
#name, #password, #mail {
width: 250px;
margin-bottom: 15px;
background: none repeat scroll 0% 0% #AFCF9C;
border: 1px solid #91B57C;
height: 30px;
color: #808080;
border-radius: 8px;
box-shadow: 1px 2px 3px;
}
#submit
{
background:none repeat scroll 0% 0% #8FCB73;
display: inline-block;
padding: 5px 10px;
line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
border-radius: 8px;
border: 1px solid #8FCB73;
text-decoration: none;
opacity: 0.9;
cursor: pointer;
color:white;
}
#er {
color: #F00;
text-align: center;
margin: 10px 0px;
font-size: 17px;
}
5. Form validation in javascript
After add CSS to your form, you've to validate your form using javascript or jquery. You can validate empty textbox, validate valid email id and valid phone number using below javascript. Add below javascript validation to your HTML form.
$(document).ready(function() {
$('#submit').click(function() {
var name=document.getElementById('name').value;
var password=document.getElementById('password').value;
var mail=document.getElementById('mail').value;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
$('#er').html('Enter your name');
return false;
}
if(password=='')
{
$('#er').html('Enter your password');
return false;
}
if(mail=='')
{
$('#er').html('Enter your mail');
return false;
}
if(!chk.test(mail))
{
$('#er').html('Enter valid email');
return false;
}
});
});
$('#submit').click(function() {
var name=document.getElementById('name').value;
var password=document.getElementById('password').value;
var mail=document.getElementById('mail').value;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
$('#er').html('Enter your name');
return false;
}
if(password=='')
{
$('#er').html('Enter your password');
return false;
}
if(mail=='')
{
$('#er').html('Enter your mail');
return false;
}
if(!chk.test(mail))
{
$('#er').html('Enter valid email');
return false;
}
});
});
6. Connect Mysql database using PHP
Then you need to write server side script to store values into database. First you make connection to Mysql database to store user values using PHP. Visit How to connect Mysql database using PHP. Add below PHP codes
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('new') or die(mysql_error());
mysql_select_db('new') or die(mysql_error());
7. Add PHP code for store values into database
Here is the PHP code for insert user data into Mysql database. This is the code for avoid duplicate entries in table. visit How to avoid duplicate values storing in Mysql table while inserting using PHP.
$name=$_POST['name'];
$password=$_POST['password'];
$mail=$_POST['mail'];
$q=mysql_query("select * from login where name='".$name."' or mail='".$mail."' ") or die(mysql_error());
$n=mysql_fetch_row($q);
if($n>0)
{
$er='The username name '.$name.' or mail '.$mail.' is already present in our database';
}
else
{
$insert=mysql_query("insert into login values('".$name."','".$password."','".$mail."')") or die(mysql_error());
if($insert)
{
$er='Values are registered successfully';
}
else
{
$er='Values are not registered';
}
}
$password=$_POST['password'];
$mail=$_POST['mail'];
$q=mysql_query("select * from login where name='".$name."' or mail='".$mail."' ") or die(mysql_error());
$n=mysql_fetch_row($q);
if($n>0)
{
$er='The username name '.$name.' or mail '.$mail.' is already present in our database';
}
else
{
$insert=mysql_query("insert into login values('".$name."','".$password."','".$mail."')") or die(mysql_error());
if($insert)
{
$er='Values are registered successfully';
}
else
{
$er='Values are not registered';
}
}
8. PHP script for register values into Mysql database
Now you combine all above codes to single PHP file. Then you'll get code like below one. visit How to insert values into Mysql database using PHP.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body {
color:white;
font-size:14px;
}
.contact {
text-align:center;
background: none repeat scroll 0% 0% #8FBF73;
padding: 20px 10px;
box-shadow: 1px 2px 1px #8FBF73;
border-radius: 10px;
width:520px;
}
#name, #password, #mail {
width: 250px;
margin-bottom: 15px;
background: none repeat scroll 0% 0% #AFCF9C;
border: 1px solid #91B57C;
height: 30px;
color: #808080;
border-radius: 8px;
box-shadow: 1px 2px 3px;
}
#submit
{
background:none repeat scroll 0% 0% #8FCB73;
display: inline-block;
padding: 5px 10px;
line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
border-radius: 8px;
border: 1px solid #8FCB73;
text-decoration: none;
opacity: 0.9;
cursor: pointer;
color:white;
}
#er {
color: #F00;
text-align: center;
margin: 10px 0px;
font-size: 17px;
}
</style>
</head>
<body>
<?php
error_reporting('E_ALL ^ E_NOTICE');
if(isset($_POST['submit']))
{
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('new') or die(mysql_error());
$name=$_POST['name'];
$password=$_POST['password'];
$mail=$_POST['mail'];
$q=mysql_query("select * from login where name='".$name."' or mail='".$mail."' ") or die(mysql_error());
$n=mysql_fetch_row($q);
if($n>0)
{
$er='The username name '.$name.' or mail '.$mail.' is already present in our database';
}
else
{
$insert=mysql_query("insert into login values('".$name."','".$password."','".$mail."')") or die(mysql_error());
if($insert)
{
$er='Values are registered successfully';
}
else
{
$er='Values are not registered';
}
}
}
?>
<div class="contact">
<h1>Registration Form</h1>
<div id="er"><?php echo $er; ?></div>
<form action="#" method="post">
<table id="tbl" align="center">
<tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
<tr><td>Password:</td><td><input type="text" name="password" id="password"></td></tr>
<tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
<tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var name=document.getElementById('name').value;
var password=document.getElementById('password').value;
var mail=document.getElementById('mail').value;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
$('#er').html('Enter your name');
return false;
}
if(password=='')
{
$('#er').html('Enter your password');
return false;
}
if(mail=='')
{
$('#er').html('Enter your mail');
return false;
}
if(!chk.test(mail))
{
$('#er').html('Enter valid email');
return false;
}
});
});
</script>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body {
color:white;
font-size:14px;
}
.contact {
text-align:center;
background: none repeat scroll 0% 0% #8FBF73;
padding: 20px 10px;
box-shadow: 1px 2px 1px #8FBF73;
border-radius: 10px;
width:520px;
}
#name, #password, #mail {
width: 250px;
margin-bottom: 15px;
background: none repeat scroll 0% 0% #AFCF9C;
border: 1px solid #91B57C;
height: 30px;
color: #808080;
border-radius: 8px;
box-shadow: 1px 2px 3px;
}
#submit
{
background:none repeat scroll 0% 0% #8FCB73;
display: inline-block;
padding: 5px 10px;
line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
border-radius: 8px;
border: 1px solid #8FCB73;
text-decoration: none;
opacity: 0.9;
cursor: pointer;
color:white;
}
#er {
color: #F00;
text-align: center;
margin: 10px 0px;
font-size: 17px;
}
</style>
</head>
<body>
<?php
error_reporting('E_ALL ^ E_NOTICE');
if(isset($_POST['submit']))
{
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('new') or die(mysql_error());
$name=$_POST['name'];
$password=$_POST['password'];
$mail=$_POST['mail'];
$q=mysql_query("select * from login where name='".$name."' or mail='".$mail."' ") or die(mysql_error());
$n=mysql_fetch_row($q);
if($n>0)
{
$er='The username name '.$name.' or mail '.$mail.' is already present in our database';
}
else
{
$insert=mysql_query("insert into login values('".$name."','".$password."','".$mail."')") or die(mysql_error());
if($insert)
{
$er='Values are registered successfully';
}
else
{
$er='Values are not registered';
}
}
}
?>
<div class="contact">
<h1>Registration Form</h1>
<div id="er"><?php echo $er; ?></div>
<form action="#" method="post">
<table id="tbl" align="center">
<tr><td>Name:</td><td><input type="text" name="name" id="name"></td></tr>
<tr><td>Password:</td><td><input type="text" name="password" id="password"></td></tr>
<tr><td>Email:</td><td><input type="text" name="mail" id="mail"></td></tr>
<tr><td></td><td><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var name=document.getElementById('name').value;
var password=document.getElementById('password').value;
var mail=document.getElementById('mail').value;
var chk = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(name=='')
{
$('#er').html('Enter your name');
return false;
}
if(password=='')
{
$('#er').html('Enter your password');
return false;
}
if(mail=='')
{
$('#er').html('Enter your mail');
return false;
}
if(!chk.test(mail))
{
$('#er').html('Enter valid email');
return false;
}
});
});
</script>
</body>
</html>
When you run this file, your screen should be like this:
For example, you'll try to store values guru, guru, guruparthiban19@gmail.com, then your screen like below:
After enter submit button, the values are registered in Mysql database. Now you can see the values are present in yout table.
You will get error message when you tried to insert same values again. This is below
Now your table contains user details. So you can add login form to validation user name and password of users.
Related Post:
Login form validation using PHP and Mysql
Login form validation with remeber me function using PHP and Mysql
Send forgot password to mailin login form using PHP and Mysql
