TUTORIAL

Cara Membuat Form Login dengan PHP, Jquery Ajax dan CSS3

シックス , TUTORIAL
0
7220

Form Login adalah form yang digunakan sebagai pengaman atau penyaring user, apabila di form login user memasukan username dan passwordnya dengan benar maka program akan lanjut ke form berikutnya, tapi apabila di form login user memasukan username dan passwordnya salah akan ada pemberitahuan dari program tersebut.

Sekarang kita akan mulai membuat kode program.

 

Struktur HTML

 

Head

<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
    <!-- Javascript code here -->
</script>

 

 

Body

<div class="lg-container">
    <h1>Admin Area</h1>
    <form action="waka-login.php" id="lg-form" name="lg-form" method="post">

        <div>
            <label for="username">Username:</label>
            <input type="text" name="username" id="username" placeholder="username"/>
        </div>

        <div>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" placeholder="password" />
        </div>

        <div>
            <button type="submit" id="login">Login</button>
        </div>

    </form>
    <div id="message"></div>
</div>

 

Kode html diatas sederhana sekali, yang paling penting yaitu field text username dan password, serta sebuah div dengan id message yang akan menampung pesan/respon.

 

Kode Javascript/Jquery

 

$(document).ready(function(){
    $("#login").click(function(){

        var action = $("#lg-form").attr('action');
        var form_data = {
            username: $("#username").val(),
            password: $("#password").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response)
            {
                if(response == "success")
                    $("#lg-form").slideUp('slow', function(){
                        $("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
                    });
                else
                    $("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
            }
        });
        return false;
    });
});

 

Jadi logikanya ketika kita melakukan klik pada tombol Login, maka javascript akan mengirim request Ajax ke file waka-login.php untuk mengetahui user dan password yang dimasukan benar atau tidak.

 

Jika salah maka menampilkan pesan error, jika benar maka akan terjadi slide, dan muncul pesan redirecting…

* Semua itu bisa anda rubah sesuai dengan keperluan anda nantinya.

 

Kode CSS

Setelah struktur html selesai kita saat nya kita percantik halaman ini dengan css

 

body{
    background-image:url(bg.png);
    font-family: 'Oleo Script', cursive;
}

.lg-container{
    width:275px;
    margin:100px auto;
    padding:20px 40px;
    border:1px solid #f4f4f4;
    background:rgba(255,255,255,.5);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;

    -webkit-box-shadow: 0 0 2px #aaa;
    -moz-box-shadow: 0 0 2px #aaa;
}
.lg-container h1{
    font-size:40px;
    text-align:center;
}
#lg-form > div {
    margin:10px 5px;
    padding:5px 0;
}
#lg-form label{
    display: none;
    font-size: 20px;
    line-height: 25px;
}
#lg-form input[type="text"],
#lg-form input[type="password"]{
    border:1px solid rgba(51,51,51,.5);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    padding: 5px;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
    font-family: 'Oleo Script', cursive;
    text-align:center;
}
#lg-form div:nth-child(3) {
    text-align:center;
}
#lg-form button{
    font-family: 'Oleo Script', cursive;
    font-size: 18px;
    border:1px solid #000;
    padding:5px 10px;
    border:1px solid rgba(51,51,51,.5);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;

    -webkit-box-shadow: 2px 1px 1px #aaa;
    -moz-box-shadow: 2px 1px 1px #aaa;
    cursor:pointer;
}
#lg-form button:active{
    -webkit-box-shadow: 0px 0px 1px #aaa;
    -moz-box-shadow: 0px 0px 1px #aaa;
}
#lg-form button:hover{
    background:#f4f4f4;
}
#message{width:100%;text-align:center}
.success {
    color: green;
}
.error {
    color: red;
}

 

PHP

 

Untuk memproses username dan password yang diinput user, kita membutuhkan PHP, berikut code php yang digunakan, disini tidak melakukan pengecekan pada database, karena ini hanya konsep, query yang diperlukan nantinya bisa diletakan di file PHP itu juga.

 

<?php

    $is_ajax = $_REQUEST['is_ajax'];
    if(isset($is_ajax) && $is_ajax)
    {
        $username = $_REQUEST['username'];
        $password = $_REQUEST['password'];


        if($username == 'demo' && $password == 'demo')
        {
            echo "success";
        }
    }

?>

 

LIVE DEMO    DOWNLOAD SOURCE CODE

 

Username: wakaka
Password: design

 

Saya berharap kode ini akan berguna dalam proyek PHP Anda. Semoga berhasil!

0 Comments

×