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


WHMC Full Version 6 Download WHMC Full Version 6 Download is a hosting manager. Version 6.0 introduces a new client area template theme named six. This will be the default theme ...
eXtplorer File Management PHP Script Download eXtplorer File Management PHP Script Download   eXtplorer is a php-based file manager for your own web space. It's cross-browser compliant ...
phpFreeChat v0.9 PHP Script Download phpFreeChat v0.9 PHP Script Download phpFreeChat is a free, simple to install, fast, customizable and multi languages chat that uses a simple files...
SiteDoctor v1.5.2 – Website Health Checker &... SiteDoctor v1.5.2 - Website Health Checker - nulled PHP Script SiteDoctor can check your website’s health status within a minute. Follow the sugges...
Flipper Poll PHP Script Download Flipper PollFlipper Poll Do you need a lightweight poll with back-end admin panel and auto-installation script? This is exactly what are you lookin...

Read Me

Have any Question or Comment?

Leave a Reply

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