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
- Make a HTML file and define markups for Login Form and Popup Box
- Make a CSS file and define styling for Login Form and Popup Box
- Make a Script file and define Effects for Login Form and Popup Box
- 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>
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:
Post a Comment