Login script using PHP, MYSQL, JQUERY, BOOTSTRAP

Hi friends, We are going to create a login script using PHP, MySQL, jquery, bootstrap. using this script u can authenticate the user when user trying to log in into your website.We assume you already have a PHP development environment installed in your machine. if you haven't then download any php website development environment like Xampp or Wamp. In this tutorial, we are going to use xampp so Download xampp from official web page   download  and install it following simple instructions of its installer.

Step 1:   create a database in MySQL

                 1.go to localhost/phpmyadmin after installing xampp or in xampp control panel click on MySQL's admin button.

                 2.go to database navbar menu .

                 3. create database by entering any name i.e. mydb. click on create will create a database and it takes to next step.

                 4.In next step create a table by entering the table name and defining a number of column in your table . i.e. tbl_user, the number of columns:4  click on the GO button.

                 5.Create column in table i.e. user_id,user_name,user_email,user_password,user_activation_timeStamp etc . according to your need.define their size and user_id as primary key scroll down and click on save button. this will create a table named tbl_user.I nsert some data.

Step 2: create php file login.php and install bootstrap ,jquery 

               1.download bootstrap official download page and jquery download.

               2.put it on vendors directory of your project.

3.include css file in your web page head  and js in footer section.

4.Create login.php with form.

.example given in below code section


<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="http://localhost/yourproject/assets/bootstrap-4.1.1/css/bootstrap.min.css">
<title>
Login</title>
</head>
<body class="mx-0 px-0">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card mx-5 my-5">
<div class="card-body bg-secondary text-white font-weight-bold">
<form>
<div id="tooltip-user" class="form-group">
<label for="username">
User Name</label>
<input id="username" class="form-control" type="text" placeholder="User Name" aria-describedby="userlHelp" />
<small id="userHelp" class="form-text text-dark">
Please enter user name.</small>
</div>
<div id="tooltip-pass" class="form-group">
<label for="password">
Password</label>
<input id="password" class="form-control" type="password" placeholder="Password" />
<small id="passHelp" class="form-text text-dark">
Please enter password.</small>
</div>
<div class="form-group form-check">
<input id="exampleCheck1" class="form-check-input" type="checkbox" />
<label class="form-check-label" for="exampleCheck1">
Check me out</label>
</div>
<button id="login" class="btn btn-success" type="submit">
Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="scripts">
<script src="js/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js">
</script>
<script src="js/login.js">
</script>
 </div>
</div>
</body>
</html>

Step 3:create jquery script to send data to server

example code is given below

$(document).ready(function(){
	$("#login").on("click",function(event){
	 event.preventDefault();
		if(!$.trim($("#username").val()).length)
		{
$("#tooltip-user").tooltip({"title":"this field is required"});
$("#username").css({"background-color":"aqua"}).focus();
	    }
	    else if(!$.trim($("#password").val()).length)
			{
$("#tooltip-pass").tooltip({"title":"this field is required"});
$("#password").css({"background-color":"aqua"}).focus();
			}
			else
			{
	$.ajax({
		url:"http://localhost/yourproject/path-to-server-handler/loginCheck.php",
		type:"POST",
		data:{user:$("#username").val(),pass:$("#password").val()},
		success:function(data)
		{

		var res=$.parseJSON(data);
		if(res==="ok")
		{
$.toaster({"title":"Success","message":"User logged in successfully","priority":"success"});
window.open("http://localhost/yourproject/home","_self");
		}
		else
$.toaster({"title":"Error!","message":"username or password incorrect","priority":"danger"});				
		}
		},
error:function(jxHr,msg,thrownerror)
		{
	alert(msg);
		}
				});
			}
		});
	});

Step 4:create php script to handle login request 

      1.create a php  file i.e. checkUser.php 

      2.put it at the directory where you given the url in jquery ajax method 

note:-http://localhost/yourproject/path-to-server-handler/loginCheck.php (if using simple php for mvc we will explain it on another tutorial)

      3.Sample code is given below .

session_start();
function test($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
if((isset($_POST["email"])&&(!empty($_POST["email"])))
&&((isset($_POST["password"]))&&(!empty($_POST["password"]))))
{
	$connect=new mysqli("localhost","yourdbUsername","yourDbPassword","YourDBname");
	$stmt=$connect->prepare("SELECT `user_email`,`user_name`,`user_password` FROM `tbl_user` WHERE `user_email`=? AND `user_password`=? ");
	$stmt->bind_param("ss",test($_POST["email"]),test($_POST["password"]));
	$stmt->execute();
	$stmt->store_result();
	$stmt->bind_result($email,$name,$pass);
	if($stmt->num_rows>0)
	{
	$stmt->fetch();
	$_SESSION["username"]=$name;
	$_SESSION["email"]=$email;
	$res="ok";

	}
	else
	{
        $res="error";
        session_destroy();
	}
}
else
{
	$res="error";
	session_destroy();
}
echo json_encode($res);

the reason of using php prepared statement is here is making server side authentication more secure. 

Other posts