Pop Up Login Form dengan Fancybox tanpa Validasi Javascript pada Lokomedia

By Kang Anam di October 18, 2015

Mudah-mudahan script login dan register yang saya tulis pada tutorial sebelumnya bisa berjalan mulus. Sehingga kita bisa lanjutkan dengan improvisasi yang lebih luas lagi. Kita masih menggunakan template eljquery. Sebagai contoh kasus pop up login form ini adalah misalnya kita ingin orang-orang yang memberikan komentar pada artikel kita adalah member saja. Tentu kita harus menyembunyikan form komentar yang sebelumnya bisa diakses oleh siapa saja. Caranya dengan memasukkannya ke dalam kondisi jika ada sesi username seperti ini :

view sourceprint?

01.// Form komentar

02.echo "<br /><br /><b>Isi Komentar :</b>";

03.if(!empty($_SESSION[session_username])){

04.$data =mysql_fetch_array(mysql_query("SELECT * FROM member WHERE username='$_SESSION[session_username]'"));

05.echo"<form name='form' action=simpankomentar.php method=POST onSubmit=\"return validasi(this)\">

06.<table width=100% style='border: 1pt dashed #0000CC;padding: 10px;'>

07.<input type=hidden name=id value=$_GET[id]>

08.<tr><td>Nama</td><td> : $data[username]<input type=hidden name=nama_komentar value=$data[username]></td></tr>

09.<tr><td>Website</td><td> : $data[email]<input type=hidden name=url value=$data[email]></td></tr>

10.<tr><td valign=top>Komentar</td><td> <textarea name='isi_komentar' style='width: 300px; height: 100px;'></textarea></td></tr>

11.<tr><td>&nbsp;</td><td><img src='captcha.php' id='captcha'></td></tr>

12.<tr><td>&nbsp;</td><td>(Masukkan 6 kode diatas)<br /><input type=text name=kode size=6 maxlength=6><br /></td></tr>

13.<tr><td>&nbsp;</td><td><input type=submit name=submit value=Kirim></td></tr>

14.</table></form><br />";

15.}else{

16.echo "<p>Anda harus <a class='loginpopup' href='#loginpopup'>Login</a> terlebih dahulu untuk memberikan komentar</p>";

17.}

Form komentar sudah dimodifikasi untuk tidak memasukkan data username dan url lagi, karena data tersebut diambil dari tabel member dalam database. Sehingga tipe input yang kita gunakan adalah tipe hidden. Kemudian link login akan muncul jika kondisi sesi username tidak ada. Untuk menautkan link login dengan popup fancybox kita gunakan class baru (.loginpopup) pada link sehingga tidak mengganggu fancybox galeri yang sebelumnya sudah dibuat. Ini bisa dilakukan dengan menambahkan javascript berikut :

view sourceprint?

1.<script type="text/javascript">

2.$(document).ready(function() {

3.$(".loginpopup").fancybox();

4.});

5.</script>

Sehingga semua tag yang mempunyai class loginpopup akan ditampilkan dalam fancybox. Karena link login mengarah pada id #loginpopup maka kita harus membuat layer baru di file template php yang berisi form login dengan id div #loginpopup. Kemudian sembunyikan layer itu didalam layer lain dengan menggunakan style display:none. Sehingga scriptnya seperti ini :

view sourceprint?

01.<div style="display: none;">

02.<div id="loginpopup" style="width:400px;">

03.<h2>LOGIN ANGGOTA</h2>

04.<form action=cek-login.html method=POST>

05.<table width=100% style='border: 1pt dashed #0000CC;padding: 10px;'>

06.<tr><td>Username</td><td> : <input type=text name=username size=40></td></tr>

07.<tr><td>Password</td><td> : <input type=password name=password size=40></td></tr>

08.<tr><td colspan=2><input type=submit name=submit value=Login></td></tr></table>

09.</form><br />Belum punya akun ? Klik <a class='loginpopup' href='#registerpopup'>Daftar</a> | <a href='lupa-password.html'>Lupa Password</a>

10.</div>

11.</div>

Untuk selanjutnya proses pembuatan pop up login form ini sudah selesai. Namun jika ingin lebih bagus lagi setelah login berhasil akan dikembalikan ke halaman detail berita yang dibaca. Maka kita perlu menggunakan bantuan url refferensi. Ini bisa dilakukan dengan menambahkan script pada module cek login dengan script berikut.

view sourceprint?

01.if($cek_akun==1){

02.$_SESSION[session_nama] = $nama[nama];

03.$_SESSION[session_username] = $username;

04.$_SESSION[session_password] = $password;

05.$ref=$_SERVER['HTTP_REFERER'];

06.echo "<span class=posting>&#187; <b>Cek Login</b></span><br /><br />";

07.echo "<p align=center><b>Selamat dantang <b>$nama[nama]</b> di situs kami. <br /><a href='index.php'>Klik untuk kembali ke beranda</a></b></p>";

08.echo "<meta http-equiv='refresh' content='0; url=$ref' />";

09.} else {

10.echo "<span class=posting>&#187; <b>Cek Login</b></span><br /><br />";

11.echo "<p align=center>Maaf <b>USERNAME</b> atau <b>PASSWORD</b> Anda salah. <br /><a href='login.html'>Kembali</a></p>";

12.}

Kelemahan script login popup ini adalah tidak menggunakan validasi javascript sehingga ketika kita salah memasukkan inputan, login popupnya akan menghilang sehingga kita harus menekan lagi link login.
Sumber : cauza.web.id

---

http://anamwebsite.com/berita--pop-up-login-form-dengan-fancybox-tanpa-validasi-javascript-pada-lokomedia.html#ixzz3ouYicRYG