Posted on by

How to create simple login form using Php, Mysql and jQuery

In this post I am going to create simple login form using Php, Mysql and jquery. What I am going to do is, First of all I will create login form using email and password field, then I fill that form.

If I add correct email and password then I will login otherwise wrong email and password message will appear. I will also add some jquery validation for checking my client side errors. I will check all my code on local server using Xampp software. If you don’t know how to install xampp on local machine, then check my previous post. Now lets start

Steps to follow

  • Create database and table
  • Create config file and connect to database
  • Create HTML file and add php logic
  • Create Css file
  • Create jQuery file for client side validation

Step 1: Create database and table

Goto localhost/phpmyadmin and create database as ‘my_website’ and then create table ‘user_table’ in my_website database. Once table is created add single dummy record for testing.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
use my_website;
 
CREATE TABLE `user_table` (
`user_id` INT(11) NOT NULL AUTO_INCREMENT,
`email` VARCHAR(90) NOT NULL,
`password` VARCHAR(90) NOT NULL,
PRIMARY KEY (`user_id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=MyISAM
AUTO_INCREMENT=2;
 
INSERT INTO 'my_website'.'user_table' ('email', 'password') VALUES ('user@example.com', 'pass123');
 

Step 2: Create config file and connect to database

Now its time to create database connection file name as “config.php”.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
$host = "localhost";
$userName = "root";
$password = "";
$dbName = "my_website";
 
// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);
 
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
 

For database connection and queries I am using MySQLi built-in class. I have also covered tutorial on MySQLi Object Oriented for beginners.

Step 3: Create HTML file and add php logic

Now, I am creating login.php file.In this file I will add config.php file, setup login condition, validate user, add logout code, include css file for html, add google jquery and custom js validation file and most important login form.

Never store plain password in database. Below code is just an example for absolute beginners. For better understanding for password read my post How to use PHP password_hash in Registration and Login form

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<?php
require_once("config.php");
session_start();
 
//for logout
if(isset($_GET['logout']) && $_GET['logout'] !='')
{
session_destroy();
header("location:".$_SERVER['PHP_SELF']);
exit();
}
if((isset($_POST['email']) && $_POST['email'] !='') && (isset($_POST['password']) && $_POST['password'] !=''))
{
$sql = "select * from user_table where email = '".$_POST['email']."' and password = '".$_POST['password']."'";
if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
if($result->num_rows > 0)
{
//create session for user
$_SESSION['user'] = $_POST['email'];
}
else
{
$error_msg = "Wrong email or password";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<?php if(isset($_SESSION['user']) && $_SESSION['user'] != '')
{
echo '<div class="success_msg">';
echo "Welcome ".$_SESSION['user']." you are successfully login <br/>";
echo "<a href='".$_SERVER['PHP_SELF']."?logout=true'>Logout</a>";
echo '</div>';
}
else
{
?>
<h3 class="heading">Login</h3>
<?php
if(isset($error_msg))
{
echo '<div class="error_msg">';
echo $error_msg;
echo '</div>';
unset($error_msg);
}
?>
<div class="form-cont">
<form name="myForm" id="loginForm" method="POST" action="<?php echo $_SERVER['PHP_SELF']?>">
<input type="text" name="email" placeholder="Type your Email" id="email_add"/>
<input type="password" name="password" placeholder="Type your Password" id="add_password"/>
<input type="button" id="submit-frm" value="Submit" />
</form>
</div>
<?php
}
?>
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
 

Step 4: Create Css file

Now I am going to add css for html

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
body{
font-family:verdana;
}
 
.container{
width:276px;
margin:0 auto;
margin-top:197px;
padding:10px;
border-radius:4px;
-webkit-box-shadow: -1px 0px 21px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 0px 21px -8px rgba(0,0,0,0.75);
box-shadow: -1px 0px 21px -8px rgba(0,0,0,0.75);
}
 
.heading{
font-size:26px;
line-height:26px;
margin:0px 0px 11px 0px;
color: #4387fd;
}
 
.form-cont input[type=text], .form-cont input[type=password]{
display:block;
height:25px;
width:270px;
margin-bottom:5px;
border:1px solid #eeeeee;
border-radius:2px;
padding-left:2px;
}
 
.form-cont input[type=button]{
background:#4387fd;
color:#ffffff;
border:1px solid #4387fd;
height:25px;
}
 
.form-cont input[type=button]:hover{
box-shadow:0 1px 0 rgba(0,0,0,0.30);
}
 
.success_msg{
font-size:14px;
}
 
.error_msg{
background:#EE5A5B;
border:1px solid #ee0000;
font-size:12px;
margin:5px 0 5px 0;
padding:3px;
color:#ffffff;
}
 

Step 5: Create jQuery file for client side validation

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
$(document).ready(function(){
$("#submit-frm").click(function(){
if($("#email_add").val() === '')
{
$("#email_add").css("border","1px solid red");
return false;
}
else if($("#add_password").val() === '')
{
$("#add_password").css("border","1px solid red");
return false;
}
else
{
$("#loginForm").submit();
}
});
$("#email_add").blur(function(){
if($("#email_add").val() != '')
{
$("#email_add").css("border","1px solid #eeeeee");
}
});
$("#add_password").blur(function(){
if($("#add_password").val() != '')
{
$("#add_password").css("border","1px solid #eeeeee");
}
});
});
 

If you will follow all steps one by one I hope you won’t have any problem.

use user@example.com as email and pass123 as password

 

More from WDB24.com

Posted in PHP

Published by Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.

Leave a Reply

Your email address will not be published. Required fields are marked *