imdelgado.blogspot.com - In this tutorial, I will explain you how to create a ajax popup log in form with jquery and php.
Demo
Firstly let's create a folder in your www (for wamp) folder and name as ajax_login.
Crate a blank document in your favourite editor and paste following code in your document. And then save as index.php in your ajax_login folder. I have divided index.php into 2 parts. Below is our body part.
<body> <?php session_start(); ?> <div> <?php if(isset($_SESSION['user_name'])){ ?> <a href='logout.php'>Logout</a> <?php }else {?> <a href="#">login</a> <?php } ?> </div> <div> <div></div> <form action="login.php"> <label>User Name:</label> <input type="text" name="user_name" /> <label>Password:</label> <input type="password" name="password" /> <label></label><br/> <input type="submit" value="Login" /> <input type="button" value="Cancel" /> </form> </div> <div></div> </body>In this part, we use the php session variable to check whether the user have already logged in or not. To use session, you need to add session_start() function firstly. If the user has already logged in, we will show the logout. Else we will show login.
And then I create our login_form. We don't want to show this form before the user click the login link. So we need to add the css display:none to our css file for our login_form div.
Following code is our css file. So crate a blank document in your favourite editor and paste the following code. And then save as styles.css in our project folder.
.popup { position: fixed; width: 100%; opacity: 0.9; top:0px; min-height:200px; height:100%; z-index: 100; background: #FFFFFF; font-size: 20px; text-align: center; display:none; } #login_form { position:absolute; width:200px; top:100px; left:45%; background-color:#DDD; padding:10px; border:1px solid #AAA; display:none; z-index:101; -moz-border-radius: 10px; -moz-box-shadow: 0 0 10px #aaa; -webkit-border-radius: 10px; -webkit-box-shadow: 0 0 10px #aaa; }In the index.php head part, first attach the jQuery Library file. And you also need to attach our styles.css. Then write AJAX code into <head> section as following procedure:
<script type="text/javascript"> $(document).ready(function(){ $("#login_a").click(function(){ $("#shadow").fadeIn("normal"); $("#login_form").fadeIn("normal"); $("#user_name").focus(); }); $("#cancel_hide").click(function(){ $("#login_form").fadeOut("normal"); $("#shadow").fadeOut(); }); $("#login").click(function(){ username=$("#user_name").val(); password=$("#password").val(); $.ajax({ type: "POST", url: "login.php", data: "name="+username+"&pwd="+password, success: function(html){ if(html=='true') { $("#login_form").fadeOut("normal"); $("#shadow").fadeOut(); $("#profile").html("<a href='logout.php'>Logout</a>"); } else { $("#add_err").html("Wrong username or password"); } }, beforeSend:function() { $("#add_err").html("Loading...") } }); return false; }); }); </script>Now let's create a login.php script.
<?php session_start(); $username = $_POST['name']; $password = md5($_POST['pwd']); $mysqli=mysqli_connect('localhost','username','password','database'); $query = "SELECT * FROM user WHERE username='$username' AND password='$password'"; $result = mysqli_query($mysqli,$query)or die(mysqli_error()); $num_row = mysqli_num_rows($result); $row=mysqli_fetch_array($result); if( $num_row >=1 ) { echo 'true'; $_SESSION['user_name']=$row['username']; } else{ echo 'false'; } ?>They are fairly straightforward to understand if you know about php and mysql. But you need to change username, password, database and table name for mysql. If you have a problem, don't hesitate to ask me.
The last thing we need to create is logout.php.
<?php session_start(); unset($_SESSION['user_name']); header('Location: index.php'); ?>I think this tutorial will help you.
Download Source Code
other source : http://fb.com, http://tutsforweb.blogspot.com, http://solopos.com
No comments:
Post a Comment