Google Ads

Creating a Simple Login Using MySQLi Prepared Statement / jQuery PHP Script


Creating a Simple Login Using MySQLi Prepared Statement / jQuery PHP Script

In this tutorial, we will create a Simple Login Using MySQLi Prepared Statement / jQuery. Most of the website nowadays are required to use MySQLi / PDO statement due to the depreciated of MySQL. This time we will try to work out with MySQLi and Ajax call function to make our simple application more interactive.

Let’s start coding!

First we will create the database
*Open the database web server that are already installed from your computer(WAMP, XAMP, etc…)
*Next, Open the internet browser(Chrome, IE, etc..), and type in the url address “localhost/phpmyadmin”
*Create your database, and name it “sample”
*After creating the database, click SQL and paste the code below

 

CREATE TABLE IF NOT EXISTS `user` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

Creating the database connection

After we created the database, we will now create the database connection. To do that, first open any kind of text editor(Notepad++, etc…) that your computer already have. Then, just copy the code below, then name it “connect.php”

 

<?php
$conn = new mysqli('localhost', 'root', '', 'sample');
if($conn->connect_error){
die("Fatal Error: Can't connect to database: ". $conn->connect_error);
}
?>

 

Creating the HTML form

Now that the connection is already created, we will now create the HTML form, The HTML form will display the forms that we will going to use to login the accounts of the user. Just copy the code below, then paste it inside the body tag and name it “index.php”

 

<div id = "content">
<form method = "POST">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type = "text" id = "username"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type = "password" id = "password"></td>
</tr>
<tr>
<td colspan = "2"><br /></td>
</tr>
<tr>
<td colspan = "2"><button type = "button" style = "width:100%;" id = "login">Login</button></td>
</tr>
<tr>
<td colspan = "2"><div id = "result"></div></td>
</tr>
</table>
</form>
</div>

 

Then, we will add some design for the form, just copy and paste it inside the head tag

 

<style>
#content{
background-color: #ffeecc;
width:280px;
height:110px;
margin: 100px auto;
padding:10px;
border-radius:2px;
-webkit-box-shadow:0px 0px 30px 3px #000;
}
</style>

 

Next we will now create the jQuery function, just copy the code below and name it “login.js”

 

$(document).ready(function(){
$error = $('<center><label style = "color:#ff0000;">Invalid username or password</label></center>');
$error2 = $('<center><label style = "color:#ff0000;">User not found!</label></center>');
$success = $('<center><label style = "color:#00ff00;">Successfully login!</label></center>');
$loading = $('<center><img src = "loading.gif" height = "5px" width = "100%"/></center>');
$('#login').on('click', function(){
$error.remove();
$error2.remove();
$username = $('#username').val();
$password = $('#password').val();
if($username == "" && $password == ""){
$error.appendTo('#result');
}else{
$loading.appendTo('#result');
setTimeout(function(){
$loading.remove();
$.post('validator.php', {username: $username, password: $password},
function(result){
if(result == "Success"){
$('#username').val('');
$('#password').val('');
$success.appendTo('#result');
setTimeout(function(){
$success.remove();
window.location = 'home.php';
}, 1000);
}else{
$('#username').val('');
$('#password').val('');
$error2.appendTo('#result');
}
}
)
}, 3000);
}
});
});

 

After that we will now create the validator, this script will check if the accounts of the user is existing in the database

 

<?php
require_once 'connect.php';
$username = $_POST['username'];
$password = $_POST['password'];
$stmt = $conn->prepare("SELECT * FROM `user` WHERE username = '$username' && `password` = '$password'") or die(mysqli_error());
if($stmt->execute()){
$result = $stmt->get_result();
$num_rows = $result->num_rows;
}
if($num_rows > 0){
echo "Success";
}else{
echo "Error";
}
?>

Next, we will now create the home page, just copy the code below"home.php"

<!DOCTYPE html>
<html lang = "eng">
<head>
<style>
#content{
background-color: #ffeecc;
width:280px;
height:110px;
margin: 100px auto;
padding:10px;
border-radius:2px;
-webkit-box-shadow:0px 0px 30px 3px #000;
}
</style>
</head>
<body>
<div id = "content">
<center><h2>Welcome!</h2></center>
<center><a href = "index.php" style = "text-decoration:none;">Back</a></center>
</div>
</body>
</html>

 

Lastly, insert the jquery plugin along with login.js to make the script worked, here’s how you do it

 

<body>
<div id = "content">
<form method = "POST">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type = "text" id = "username"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type = "password" id = "password"></td>
</tr>
<tr>
<td colspan = "2"><br /></td>
</tr>
<tr>
<td colspan = "2"><button type = "button" style = "width:100%;" id = "login">Login</button></td>
</tr>
<tr>
<td colspan = "2"><div id = "result"></div></td>
</tr>
</table>
</form>
</div>
</body>
<script src = "jquery-3.1.1.js"></script>
<script src = "login.js"></script>
</html>

There you have it, we created a simple login form. I hope that this tutorial help you to your projects. For more tutorials and updates, just kindly visit this site. Enjoy Coding!!!

 

 


Related Post

Upload files on php/mysql site server and saving d... Upload files on php/mysql site server and saving details on database PHP Script Upload files on php/mysql site server and saving on database ins...
Text pattern v4.5.3 Blog PHP Script Download Text pattern v4.5.3 Blog PHP Script Download Textpattern is a web application designed to help overcome the hurdles to publishing online, and to si...
Facebook Auto Responder PHP Script Download Facebook Auto ResponderFacebook Auto ResponderFacebook Auto Responder automatically responds to Posts and Comments on your Facebook Business Fan Pages...
Refresh to Change Background Image PHP Script Refresh to Change Background Image PHP Script In this tutorial you are going to learn how to Change the Background Image using PHP. This is simple ...
readyChat v2.2 – PHP/AJAX Chat Room PHP Scri... readyChat v2.2 - PHP/AJAX Chat RoomreadyChat v2.2 - PHP/AJAX Chat RoomreadyChat is a chat product from DesignSkate. Greatly improving upon our previou...

Have any Question or Comment?

Leave a Reply

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