Tuesday, June 14, 2016

Create A Simple Login Form On Popup Box Using jQuery.

Greetings of the day!!!

While I was working on a web project with PHP and MySQL. There was a requirement to create a LOGIN form in the Pop up box instead of creating a login page separately. This provides a great user experience by not redirecting to another login page. This write up will help you to create a login form in Popup box using jQuery.

The pop up login box looks as below:




To create this pop up login, you need to follow the below four steps
  1. Make a HTML file and define markups for Login Form and Popup Box
  2. Make a CSS file and define styling for Login Form and Popup Box
  3. Make a Script file and define Effects for Login Form and Popup Box
  4. Make a PHP file and Do Login

First create a HTML file which triggers this pop up window. Here I am creating a Button which triggers it. Here is the login.html for you:
<html>
   <head>
     <link rel="stylesheet" type="text/css" href="login_style.css">
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript" src="login_effect.js"></script>
   </head>
   
   <body>

     <center>
  <input type="button" id="show_login" value="Show Login">
        
        <div id = "loginform">
        
            <form method = "post" action = "">
                <p>You Need to Login to Clear the Data</p>

                <input type = "image" id = "close_login" src = "images/close.png">
                <input type = "text" id = "login" placeholder = "Email Id" name = "uid">
                <input type = "password" id = "password" name = "upass" placeholder = "***">
                <input type = "submit" id = "dologin" value = "Login">
            </form>

        </div>

     </center>


   </body>
</html>

You can get the close.png from Here

Make a CSS file and define styling for Login and Popup Box
Now we define styling for our Login and Popup Box and save the file with name login_style.css

body
{
   background-color:#BDBDBD;
}
#loginform
{
   width:500px;
   height:330px;
   margin-top:100px;
   background-color:#585858;
   border-radius:3px;
   box-shadow:0px 0px 10px 0px #424242;
   padding:10px;
   box-sizing:border-box;
   font-family:helvetica;
   visibility:hidden;
   display:none;
}
#loginform #close_login
{
   position:absolute;
   top:140px;
   left:735px;
   width:15px;
   height:15px;
}
#loginform p
{
   margin-top:40px;
   font-size:22px;
   color:#E6E6E6;
}
#loginform #login
{
   width:250px;
   height:40px;
   border:2px solid silver;
   border-radius:3px;
   padding:5px;
}
#loginform #password
{
   margin-top:5px;
   width:250px;
   height:40px;
   border:2px solid silver;
   border-radius:3px;
   padding:5px;
}
#loginform #dologin
{
   margin-left:-5px;
   margin-top:10px;
   width:250px;
   height:40px;
   border:none;
   border-radius:3px;
   color:#E6E6E6;
   background-color:grey;
   font-size:20px;
}
Make a Script file and define Effects for Login and Popup Box using jQuery and save it with a name login_effect.js. You can dowload jQuery from this Site


$(document).ready(function(){

   $("#show_login").click(function(){
    showpopup();
   });
   $("#close_login").click(function(){
    hidepopup();
   });

});


function showpopup()
{
   $("#loginform").fadeIn();
   $("#loginform").css({"visibility":"visible","display":"block"});
}

function hidepopup()
{
   $("#loginform").fadeOut();
   $("#loginform").css({"visibility":"hidden","display":"none"});
}


Make a PHP file and do Login
In this step we make a PHP file and save the file with name dologin.phpand recieve login id and password of a user and do login we use PHP for server side processing you can use any sever-side language.

?php

$id = $_POST['uid'];
$pass = $_POST['upass'];

$host = 'localhost';
$user = 'root';
$pass = ' ';

mysql_connect($host, $user, $pass);

mysql_select_db('demo');

$dologin = "select * from user where id = $id and pass = $pass ";
$result = mysql_query( $dologin );

if($result)
{
   if(mysql_num_rows($result) == 1) {
    echo $id;
    // $_SESSION["id"]=$id;
    echo "Successfully Logged In";
    header("location: ./delete.php");
    }

else
{
   echo "Wrong Id Or Password";
   die("Query failed");
   header("location: ./view_data.php");
   
}
}
?>

if the user entered correct Email Id and Password we display Success Message else we display Wrong Id or Password message.

That's it. Thank you. Happy Coding..

No comments: