//
you're reading...
Ajax, PHP, Programming

Ajax Login Form dengan jQuery dan PHP


Oke, tutorial kali ini saya akan coba membuat Ajax Login Form dengan jQuery dan PHP, caranya tidak beritu sulit, ikuti langkah-langkah di bawah ini.

Pertma buat folder baru dengan nama ajax_login, kemudian buat sebuah dokumen dengan nama index.php, dan paste code di bawah ini. dalam index.php ini saya membaginya menjadi 2, dan di bawah ini adalah bagian body

<body>
 <?php session_start(); ?>
 <div id="profile">
      <?php if(isset($_SESSION['user_name'])){
      ?>
           <a href='logout.php' id='logout'>Logout</a>
      <?php }else {?>
      <a id="login_a" href="#">login</a>
      <?php } ?>
 </div>
 <div id="login_form">
 <div class="err" id="add_err"></div>
 <form action="login.php">
      <label>User Name:</label>
      <input type="text" id="user_name" name="user_name" />
      <label>Password:</label>
      <input type="password" id="password" name="password" />
      <label></label><br/>
      <input type="submit" id="login" value="Login" />
      <input type="button" id="cancel_hide" value="Cancel" />
 </form>
 </div>
 <div id="shadow" class="popup"></div>
</body>

di bagian ini, kita menggunanak variabel php session untuk mengecek apakah user sudah login atau belum. untuk menggunakan session anda harus mengunakan fungsi session_start();. Jika user sudah login, maka akan muncul link Logout, jika belum maka akan muncul link Login.

Selanjutnya kita buat login form, kita tidak ingin login form ini kelihatan sampai user meng-Klik link Login. Jadi kita perlu menambahkan css display:none di css file pada login_form div.

Kemudian buat dokumen baru, lalu paste code dibawah ini, dan simpan dengan nama styles.css.


.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;
}

Selanjutnya kita beralih ke bagian HEAD dari file index.php.
Pertama cantumkan styles.css, dan juga jQuery librari di head, dan paste code di bawah ini:

<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' id='logout'>Logout</a>");

                  }
                  else
                 {
                      $("#add_err").html("Wrong username or password");
                 }
          },
          beforeSend:function()
          {
               $("#add_err").html("Loading...")
          }
          });
          return false;
     });
});
</script>

Sekarang mari kita buat acript login.php

<?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';
 }
?>

Dan di bawah ini code logout.php

 <?php
 session_start();
 unset($_SESSION['user_name']);
 header('Location: index.php');
 ?>
 

Tutorial ini semoga berguna,

lihat demo disini
download script Ajax Login Form dengan jQuery dan PHP disini

About pinoblog

Just Ordinary Man

Discussion

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: