..:: Arian-Cyber ::..: Membuat Halaman Login dengan PHP Ajax jQuery

Tuesday, 5 November 2013

Membuat Halaman Login dengan PHP Ajax jQuery

11:43 | Posted by Arian |

Sebelum memasuki sebuah website biasanya kita disuguhkan adanya halaman Login, meski tidak semua Web memakai halaman Login ini. Kali ini saya akan membahas mengenai halaman login, pembahasan ini sudah saya singgung pada postingan sebelumnya mengenai "Membuat Halaman Login Sederhana". Apa perbedaan dari postingan sebelumnya ???.

Pada postingan sebelumnya saya membuat Login dengan PHP MySQL nah sekarang ada sedikit ditambahkan dengan Ajax dan jQuery. Hasilnya lebih mantap menurut saya, tampilan lebih dinamis dan modern dan otomatis tentunya.

Maksudnya otomatis disini adalah anda tidak perlu repot menekan Enter pada keyboard ataupun klik sebuah button untuk submit username dan password anda.

Secara sederhana logikanya seperti ini:

Masukkan Username anda
Masukkan Password anda
Jika Username & Password benar maka halaman akan loading ke halaman berikutnya
Jika Username & Password salah maka anda akan tetap pada halaman Login sampai anda benar mengisi Username & Password.

Baik langsung saja ke pembahasan mengenai Membuat halaman Login ini, yang perlu anda siapkan seperti biasa ! he he. Siapkan Text Editor anda bisa pakai Notepad, Sublime, PHPCoder dll.

Silakan buat file PHP, simpan dengan nama Index.php. Tuliskan atau Copy script code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Coding an Instant Login Form with jQuery and Ajax</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>
 <div id="c">
  <h1>
Halaman Admin, Masukan User & Pwd Anda</h1>
<div id="loader">
<img src="img/fbloader.gif" alt="loading…" /></div>
<form action="" method="post" id="instantform">
      <label>Username:</label>
      <input type="text" id="username" name="username" />
      <label>Password:</label>
      <input type="password" id="pw" name="pw" />
  </form>
<p id="logindetails">
<em>username: arian / password: aaa123</em></p>
<div id="results">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
 $("#loader").hide();
 
 $("#pw, #username").keyup(function(){
  var passnum = $("#pw").val();
  var usernum = $("#username").val();
  
  if(passnum.length > 1 && usernum.length > 2) {
   var qry = 'username='+ $("#username").val() + '&pw=' + passnum;
   
   if($("#loader").attr("class") != "loading") {
    $("#loader").addClass("loading");
    $("#loader").show();
   }
   
            $.ajax({
                type: "POST",
                url: "login.php",
                data: qry,
                success: function(html) {
                    if(html == 'good') {
                     $("#loader").hide();
                        $("#instantform").fadeOut(1100, 'swing')
                        $("#instantform").next("p").fadeOut(1100, function(){
                         $("#results").append('<h2>
Success! Logged in as <strong>'+usernum+'</strong>!!');
                        });
                        
                        $("#loader > img").attr("src", "img/checkmark.png");
                        $("#loader").fadeIn(800);
                    }
                    else { 
                     // handling errors if needed
                    }
               }
            });
  } 
 });
});
</script>
</body>
</html></pre>

Kemudian buat file lagi, simpan dengan nama Login.php. Tuliskan atau Copy script code berikut:

<?php
if($_POST) {
 $u = $_POST['username'];
 $p = $_POST['pw'];
 
 if($u == "arian" && $p == "aaa123") {
  echo "good";
 }
 
 else { 
 }
}
?></pre>

Selanjutnya adalah pembuatan CSS, untuk CSS silakan bisa anda kembangkan dan kreasikan sesuai selera anda. Untuk yang mau pakai CSS ini bisa copy kode CSS berikut:

* { margin: 0; padding: 0; }
html { height: 101%; font-family: Arial, Tahoma, sans-serif; }
body { font-size: 62.5%; background: #00ff99; }

h1 { font-size: 1.7em; color: #343434; margin-bottom: 20px; }
h2 { font-size: 2.0em; font-weight: normal; font-family: Helvetica, Geneva, sans-serif; color: #b0d3ed; margin-bottom: 22px; margin-top: 10px; }
p { display: block; font-size: 1.2em; color: #343434; margin-bottom: 15px; }

h2 strong { color: #86a5d5; }

input[type="text"], input[type="password"], textarea, select { outline: none; } /* hide outlines in chrome */

/* @group page boxes */
#c { width: 600px; margin: 0 auto; padding: 8px 12px; margin-top: 44px; border: 1px solid #c3d1d7; background: #fefefe; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

/* @group form */
#instantform { padding: 7px 12px; margin-bottom: 30px; margin-top: -12px; }
#instantform input[type=text], #instantform input[type=password] { background: #fefefe; font-size: 1.4em; color: #898989; font-family: Verdana, Arial, sans-serif; border: 1px solid #d5d9da; padding: 9px 7px; width: 420px; }

#instantform input[type=text]:focus, #instantform input[type=password]:focus { border-color: #b3d5eb; color: #444; }

label { display: block; margin-top: 25px; margin-bottom: 4px; color: #444; font-weight: bold; font-size: 1.2em; }</pre>

Terakhir buat folder baru dengan nama Img atau sesuai keinginan anda. Folder ini berisi gambar nantinya. Untuk download gambar pendukung bisa anda klik
Setelah semua selesai simpan semua File Index.php dan Login.php Folder Img dalam satu folder. Letakkan di folder htdocs anda.
Silakan jalankan pada web browser anda.

Jasa Pembuatan Website Murah, dengan tampilan elegan, ArianCyber

Untuk download semua filenya klik button Untuk Demo klik button

Sekian pembahasan atau postingan saya mengenai Pembuatan halaman Login dengan PHP, Ajax dan jQuey . Apabilla ada kesalahan dalam pembahasan atau postingan saya mohon untuk dibenarkan karena saya masih dalam tahap belajar bukan Expert. Apabila ada Saran atau kritik silakan anda tulis di kotak komentar yang sudah di sediakan atau bisa kontak langsung ke saya. Semoga bermanfaat.
Apabila ada dari anda ingin memposting halaman ini harap cantumkan sumbernya dan dengan bahasa anda sendiri, jadilah blogger yang baik dan mempunyai Etika dalam dunia maya.

http://arian-tales.blogspot.com/2013/11/membuat-halaman-login-dengan-php-ajax.html

/* Codes Is Fun */
//.D

1 comment:

nenty1 May 2019 at 12:59
keren banget si serius, jadi pengen minta ajarin. aku dari bsi cengkareng
ReplyDelete
Replies

Add comment

..:: Arian-Cyber ::..

Being Bad Is Good, But Being Good Is Better !!!

Welcome

Search

Category

Popular Post

Membuat Halaman Login dengan PHP Ajax jQuery

1 comment:

Me on G+

Colleger

Blog Arsive

Translate

Visitor Total

This Yours