Cara membuat script login dengan Jquery ajax dan php


2013-04-23-23-06-55_xSambil mengerjakan script – script PHP, berikut kami coba sempatkan menulis tutorial Cara membuat script login dengan menggunakan JQUERY AJAX. Penggunaan AJAX tanpa bantuan JQUERY akan membuat kita harus mengetik banyak kode Javascript sehingga tentunya akan menyulitkan juga terutama untuk para pemula, dengan pemanfaat JQUERY, kode Javascript yang harus kita ketikkan menjadi lebih ringkas, dan itulah tentunya keuntungan kita menggunakan Javascript Framework JQUERY
Langkah – langkah yang dilakukan untuk membuat script login dengan JQUERY AJAX adalah sebagai berikut :

1. Menyiapkan JQUERY
Untuk menggunakan fungsi AJAX pada JQUERY, terlebih dahulu kita harus menyiapkan JQUERY dengan cara mendownloadnya kemudian kita simpan dalam komputer kita bersebelahan dengan script – script tutorial kita supaya tutorial ini dapat dijalankan pada komputer lokal meskipun tidak terkoneksi ke internet. Pada contoh script dibawah sudah kami siapkan Jquery lengkap dengan contoh project tutorial kita kali ini

2. Membuat form login » index.php
Script ini akan digunakan sebagai sarana untuk memasukkan username dan password ketika hendak login, berikut contoh script index.php sebagai halaman login

</pre>
<div>
<div><code><html></code></div>
<div><code>    </code><code><head></code></div>
<div><code>        </code><code><title>Login dengan Jquery AJAX</title></code></div>
<div><code>        </code><code><style type=</code><code>"text/css"</code><code>></code></div>
<div><code>            </code><code>#login{</code></div>
<div><code>                </code><code>font:bold 16px Tahoma,Verdana;</code></div>
<div><code>                </code><code>display:block;</code></div>
<div><code>                </code><code>border:#7596c0 1px solid;</code></div>
<div><code>                </code><code>width:400px;</code></div>
<div><code>                </code><code>height:280px;</code></div>
<div><code>                </code><code>margin-left:auto;</code></div>
<div><code>                </code><code>margin-right:auto;</code></div>
<div><code>                </code><code>border-radius:5px;</code></div>
<div><code>                </code><code>background-color:#98c1f3;</code></div>
<div><code>                </code><code>box-shadow: 5px 5px 5px rgb(150, 149, 149); </code></div>
<div><code>                </code><code>visibility:visible;</code></div>
<div><code>                </code><code>color:#e9ecf0;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>            </code><code>h3{</code></div>
<div><code>                </code><code>font:bold 20px Tahoma,Verdana;</code></div>
<div><code>                </code><code>margin:0 0 0 0;</code></div>
<div><code>                </code><code>padding:0 0 0 0;</code></div>
<div><code>                </code><code>color:#2572d2;</code></div>
<div><code>                </code><code>text-align:center;</code></div>
<div><code>                </code><code>line-height:50px;</code></div>
<div><code>                </code><code>border-bottom:#ffffff 1px solid;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>            </code><code>#inner{</code></div>
<div><code>                </code><code>margin:0 20px 0 20px;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>            </code><code>input.txt{</code></div>
<div><code>                </code><code>font:normal 14px Tahoma,Verdana;</code></div>
<div><code>                </code><code>padding:10px;</code></div>
<div><code>                </code><code>margin:5px 0 5px 0;</code></div>
<div><code>                </code><code>width:100td_persen;</code></div>
<div><code>                </code><code>background-color:#dee9f6;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>            </code><code>input.btn{</code></div>
<div><code>                </code><code>font:bold 14px Tahoma,Verdana;</code></div>
<div><code>                </code><code>padding:10px;</code></div>
<div><code>                </code><code>margin:5px 0 10px 0;</code></div>
<div><code>                </code><code>width:100td_persen;</code></div>
<div><code>                </code><code>text-align:center;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>        </code><code></style></code></div>
<div><code>        </code><code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"jquery-1.6.1.min.js"</code><code>></code><code>//memanggil jquery</script></code></div>
<div><code>        </code><code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"login.js"</code><code>></code><code>//memanggil script ajax</script></code></div>
<div><code>    </code><code></head></code></div>
<div><code>    </code><code><body></code></div>
<div><code>        </code><code><div id=</code><code>"login"</code><code>></code></div>
<div><code>            </code><code><h3>LOGIN ADMINISTRATOR</h3></code></div>
<div><code>            </code><code><div id=</code><code>"inner"</code><code>></code></div>
<div><code>                 </code></div>
<div><code>                </code><code><input type=</code><code>"text"</code> <code>class</code><code>=</code><code>"txt"</code> <code>placeholder=</code><code>"Username anda"</code> <code>id=</code><code>"txt_username"</code><code>/></code></div>
<div><code>                 </code></div>
<div><code>                </code><code><input type=</code><code>"password"</code> <code>class</code><code>=</code><code>"txt"</code> <code>placeholder=</code><code>"Password anda"</code> <code>id=</code><code>"txt_password"</code><code>/></code></div>
<div><code>                </code><code><input type=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn"</code> <code>name=</code><code>"btn"</code> <code>id=</code><code>"btnLogin"</code> <code>onclick=</code><code>"check_login();"</code> <code>value=</code><code>"Login"</code><code>/></code></div>
<div><code>            </code><code></div></code></div>
<div><code>        </code><code></div></code></div>
<div><code>    </code><code></body></code></div>
<div><code></html></code></div>
</div>
<pre>

3. Membuat script AJAX » login.js

Script ini merupakan script Jvascript AJAX yang akan menggunakan fungsi AJAX pada JQUERY dengan susunan script sebagai berikut :

</pre>
<div>
<div><code>function</code> <code>check_login()</code></div>
<div><code>{</code></div>
<div><code>    </code><code>//Mengambil value dari input username & Password</code></div>
<div><code>    </code><code>var</code> <code>username = $(</code><code>'#txt_username'</code><code>).val();</code></div>
<div><code>    </code><code>var</code> <code>password = $(</code><code>'#txt_password'</code><code>).val();</code></div>
<div><code>    </code><code>//Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda</code></div>
<div><code>    </code><code>var</code> <code>url_login    = </code><code>'<a href="http://localhost/tutorial/login.php">http://localhost/tutorial/login.php</a>'</code><code>;</code></div>
<div><code>    </code><code>var</code> <code>url_admin    = </code><code>'<a href="http://localhost/tutorial/admin.php">http://localhost/tutorial/admin.php</a>'</code><code>;</code></div>
<div><code>    </code></div>
<div><code>    </code><code>//Ubah tulisan pada button saat click login</code></div>
<div><code>    </code><code>$(</code><code>'#btnLogin'</code><code>).attr(</code><code>'value'</code><code>,</code><code>'Silahkan tunggu ...'</code><code>);</code></div>
<div><code>    </code></div>
<div><code>    </code><code>//Gunakan jquery AJAX</code></div>
<div><code>    </code><code>$.ajax({</code></div>
<div><code>        </code><code>url     : url_login,</code></div>
<div><code>        </code><code>//mengirimkan username dan password ke script login.php</code></div>
<div><code>        </code><code>data    : </code><code>'var_usn='</code><code>+username+</code><code>'&var_pwd='</code><code>+password, </code></div>
<div><code>        </code><code>//Method pengiriman</code></div>
<div><code>        </code><code>type    : </code><code>'POST'</code><code>,</code></div>
<div><code>        </code><code>//Data yang akan diambil dari script pemroses</code></div>
<div><code>        </code><code>dataType: </code><code>'html'</code><code>,</code></div>
<div><code>        </code><code>//Respon jika data berhasil dikirim</code></div>
<div><code>        </code><code>success : </code><code>function</code><code>(pesan){</code></div>
<div><code>            </code><code>if</code><code>(pesan==</code><code>'ok'</code><code>){</code></div>
<div><code>                </code><code>//Arahkan ke halaman admin jika script pemroses mencetak kata ok</code></div>
<div><code>                </code><code>window.location = url_admin;</code></div>
<div><code>            </code><code>}</code></div>
<div><code>            </code><code>else</code><code>{</code></div>
<div><code>                </code><code>//Cetak peringatan untuk username & password salah</code></div>
<div><code>                </code><code>alert(pesan);</code></div>
<div><code>                </code><code>$(</code><code>'#btnLogin'</code><code>).attr(</code><code>'value'</code><code>,</code><code>'Coba lagi ...'</code><code>);</code></div>
<div><code>            </code><code>}</code></div>
<div><code>        </code><code>},</code></div>
<div><code>    </code><code>});</code></div>
<div><code>}</code></div>
</div>
<pre>

Dengan penjelasan – penjelasasn seperti pada contoh diatas, kami berharap pembaca sekalian dapat memahami maksud dari masing – masing line script yang kita gunakan

4. Membuat script pemrosesan » login.php

Script login.php merupakan script php sederhana yang kami gunakan untuk melakukan pengecekan kebenaran username dan password pada database, jika username dan password benar, maka script dibawah akan mencetak kata “ok”, sedangkan jika username dan password salah maka akan dicetak kata “Username atau Password Salah !”

</pre>
<div>
<div><code><?php</code></div>
<div><code>session_start();</code></div>
<div><code>//koneksi ke database</code></div>
<div><code>$conn</code> <code>= mysql_connect(</code><code>'localhost'</code><code>,</code><code>'root'</code><code>,</code><code>'kutukupret'</code><code>);</code></div>
<div><code>$db</code>   <code>= mysql_select_db(</code><code>'tutorial'</code><code>,</code><code>$conn</code><code>);</code></div>
<div><code>if</code><code>(isset(</code><code>$_POST</code><code>[</code><code>'var_usn'</code><code>]) AND isset(</code><code>$_POST</code><code>[</code><code>'var_pwd'</code><code>])){</code></div>
<div><code>    </code><code>$username</code> <code>= </code><code>addslashes</code><code>(</code><code>$_POST</code><code>[</code><code>'var_usn'</code><code>]);</code></div>
<div><code>    </code><code>$password</code> <code>= </code><code>addslashes</code><code>(</code><code>$_POST</code><code>[</code><code>'var_pwd'</code><code>]);</code></div>
<div><code>    </code><code>$check</code>    <code>= mysql_query(</code><code>'select * from admin where Usn="'</code><code>.</code><code>$username</code><code>.</code><code>'" AND Pwd="'</code><code>.</code><code>$password</code><code>.</code><code>'" '</code><code>);</code></div>
<div><code>    </code><code>if</code><code>(mysql_num_rows(</code><code>$check</code><code>)==0){</code></div>
<div><code>        </code><code>echo</code> <code>'Username atau Password Salah !'</code><code>;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>    </code><code>else</code><code>{</code></div>
<div><code>        </code><code>$_SESSION</code><code>[</code><code>'login'</code><code>][</code><code>'usn'</code><code>] = </code><code>$username</code><code>;</code></div>
<div><code>        </code><code>$_SESSION</code><code>[</code><code>'login'</code><code>][</code><code>'pwd'</code><code>] = </code><code>$password</code><code>;</code></div>
<div><code>        </code><code>echo</code> <code>'ok'</code><code>;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>}</code></div>
<div><code>?></code></div>
</div>
<pre>

Pesan login diatas selanjutnya yang akan diambil oleh script login.js, dimana kalo script diatas mencetak kata “ok”, maka user akan langsung diarahkan ke halaman berikutnya, sebaliknya jika script diatas mencetak pesan kesalahan, maka script login.js akan memberikan javascript alert sebagai tanda peringatan kesalahan username dan password

5. Membuat script halaman admin » admin.php

</pre>
<div>
<div><code><?php</code></div>
<div><code>session_start();</code></div>
<div><code>if</code><code>(isset(</code><code>$_GET</code><code>[</code><code>'logout'</code><code>]) AND </code><code>$_GET</code><code>[</code><code>'logout'</code><code>]==</code><code>'1'</code><code>){</code></div>
<div><code>    </code><code>unset(</code><code>$_SESSION</code><code>[</code><code>'login'</code><code>]);</code></div>
<div><code>    </code><code>session_destroy();</code></div>
<div><code>}</code></div>
<div><code>if</code><code>(!isset(</code><code>$_SESSION</code><code>[</code><code>'login'</code><code>])){</code></div>
<div><code>    </code><code>header(</code><code>'location: index.php'</code><code>);</code></div>
<div><code>}</code></div>
<div><code>else</code><code>{</code></div>
<div><code>    </code><code>echo</code> <code>'<h3>SELAMAT DATANG : '</code><code>.</code><code>$_SESSION</code><code>[</code><code>'login'</code><code>][</code><code>'usn'</code><code>].</code><code>'</h3>'</code><code>;</code></div>
<div><code>    </code><code>echo</code> <code>'Halaman ini kita asumsikan sebagai halaman Administrator, dimana halaman ini hanya bisa diakses ketika Admin sudah login'</code><code>;</code></div>
<div><code>    </code><code>echo</code> <code>'<br/><a href="?logout=1">LOGOUT</a>'</code><code>;</code></div>
<div><code>}</code></div>
<div><code>?></code></div>
</div>
<pre>

Script diatas kita asumsikan sebagai halaman administrator yang mengharuskan user untuk login terebih dahulu ketika hendak mengakses halaman ini

Untuk mencoba script – script diatas tanpa adanya perubahan direktory, sebaiknya kita tempatkan script – script diatas pada folder dengn nama tutorial pada direktory web server komputer anda.

Download script lengkap tutorial ini

Sumber : http://media-kreatif.com/home/post/65/cara-membuat-script-login-dengan-jquery-ajax-dan-php.prm

About these ads

5 comments on “Cara membuat script login dengan Jquery ajax dan php

Tinggalkan Pesan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s