Skip to content

Cauza Multimedia Creatifa


IDCloudHost | SSD Cloud Hosting Indonesia
Menu
  • Home
  • Privacy Policy
  • Youtube
HomeWebsitePop Up Login Form dengan Fancybox tanpa Validasi Javascript pada Lokomedia

Pop Up Login Form dengan Fancybox tanpa Validasi Javascript pada Lokomedia

November 29, 2012

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 :

// Form komentar
  echo "<br /><br /><b>Isi Komentar :</b>";
  if(!empty($_SESSION[session_username])){
  	$data =mysql_fetch_array(mysql_query("SELECT * FROM member WHERE username='$_SESSION[session_username]'"));
        echo"<form name='form' action=simpankomentar.php method=POST onSubmit=\"return validasi(this)\">
		<table width=100% style='border: 1pt dashed #0000CC;padding: 10px;'>
        <input type=hidden name=id value=$_GET[id]>
        <tr><td>Nama</td><td> : $data[username]<input type=hidden name=nama_komentar value=$data[username]></td></tr>
        <tr><td>Website</td><td> : $data[email]<input type=hidden name=url value=$data[email]></td></tr>
        <tr><td valign=top>Komentar</td><td> <textarea name='isi_komentar' style='width: 300px; height: 100px;'></textarea></td></tr>
        <tr><td>&nbsp;</td><td><img src='captcha.php' id='captcha'></td></tr>
        <tr><td>&nbsp;</td><td>(Masukkan 6 kode diatas)<br /><input type=text name=kode size=6 maxlength=6><br /></td></tr>
        <tr><td>&nbsp;</td><td><input type=submit name=submit value=Kirim></td></tr>
        </table></form><br />"; 
		}else{
			echo "<p>Anda harus <a class='loginpopup' href='#loginpopup'>Login</a> terlebih dahulu untuk memberikan komentar</p>";
		}

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 :

<script type="text/javascript">
		$(document).ready(function() {
			$(".loginpopup").fancybox();
		});
</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 :

<div style="display: none;">
	<div id="loginpopup" style="width:400px;">
	<h2>LOGIN ANGGOTA</h2>
        <form action=cek-login.html method=POST>
		<table width=100% style='border: 1pt dashed #0000CC;padding: 10px;'>
        <tr><td>Username</td><td> : <input type=text name=username size=40></td></tr>
        <tr><td>Password</td><td> : <input type=password name=password size=40></td></tr>
        <tr><td colspan=2><input type=submit name=submit value=Login></td></tr></table>
        </form><br />Belum punya akun ? Klik <a class='loginpopup' href='#registerpopup'>Daftar</a> | <a href='lupa-password.html'>Lupa Password</a>
		</div>
</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.

if($cek_akun==1){
	$_SESSION[session_nama] = $nama[nama];
	$_SESSION[session_username] = $username;
	$_SESSION[session_password] = $password;
	$ref=$_SERVER['HTTP_REFERER'];
	echo "<span class=posting>&#187; <b>Cek Login</b></span><br /><br />"; 
 		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>";
	echo "<meta http-equiv='refresh' content='0; url=$ref' />";
} else {
	echo "<span class=posting>&#187; <b>Cek Login</b></span><br /><br />"; 
 		echo "<p align=center>Maaf <b>USERNAME</b> atau <b>PASSWORD</b> Anda salah. <br /><a href='login.html'>Kembali</a></p>";
}

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.

loginform

Tags:login coment, login popup, modal, pop up

Related Posts

Membuat Peta Jakarta denga Hover Effect (jQuery)

Menambahkan Search Engine Canggih pada Lokomedia (Google CSE)

Belajar Website di Localhost

About The Author

cauza

CEO at CMC (Cauza Multimedia Creatifa), Senior of IT & Multimedia Departement at PT. Zafa Mulia Mandiri (Zafa Tour) Lives in Palembang

Recent Posts

  • Menulis HTML Pertamamu dan Melihatnya Hidup di Browser!
  • Mereka Ada di Mana-Mana, Tapi Sering Diabaikan: Yuk Kenalan dengan Superglobals PHP
  • Struktur Dasar HTML – Anatomi Halaman Web
  • Kotak Ajaib di PHP: Fungsi-Fungsi Bawaan yang Wajib Kamu Kenal
  • Apa Itu HTML? – Yuk Kenalan dengan Biangnya Website

Recent Comments

  • willy cauza on Menu Drop Down Multilevel (Unlimited) pada Lokomedia
  • willy cauza on FPDI : Manipulasi Dokumen PDF (Split Halaman PDF)
  • diva surabaya on FPDI : Manipulasi Dokumen PDF (Split Halaman PDF)
  • cauza on Menu Drop Down Multilevel (Unlimited) pada Lokomedia
  • Ayii Muzzarot on Menu Drop Down Multilevel (Unlimited) pada Lokomedia

Archives

  • June 2025
  • May 2025
  • July 2018
  • July 2013
  • May 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012

Wordpress Blog

  • Kelola Pembayaran Jamaah — Mulai dari Master Metode hingga Upload Bukti Bayar – AHU PART 11
    July 4, 2025
    Dalam artikel ini kita akan mulai membuat fitur pembayaran untuk memudahkan jamaah/admin mencatat dan mengelola pembayaran yang mendukung berbagai metode pembayaran. Kemudian juga untuk merekam […]
  • Pemberkasan Digital: Upload Scan KTP, Paspor, dan Vaksin Tanpa Ribet – AHU PART 10
    July 2, 2025
    Agar data dokumen KTP, Paspor dan Vaksin jamaah tersimpan rapi mari kita buatkan fitur upload dokumen jamaah untuk memudahkan verifikasi yang cepat dan aman. Selain […]
  • Fitur Kelola Jamaah — Tambah, Ubah, dan Hapus Sesuai Pendaftaran – AHU PART 9
    June 26, 2025
    Setiap pendaftaran bisa memiliki banyak jamaah — sesuai jumlah yang dipesan (qty_jamaah). Tapi kadang data jamaah tidak diisi semua saat awal, jadi kita perlu fitur […]
  • Batasi Jumlah, Lindungi Kuota — Validasi Ketat untuk Pendaftaran Jamaah – AHU PART 8
    June 25, 2025
    Seiring bertambahnya fitur, aplikasi kita juga harus makin cerdas. Salah satu logika penting dalam sistem perjalanan ibadah adalah membatasi jumlah jamaah agar tidak melebihi kapasitas: […]
  • Satu Klik Menuju Tanah Suci — Fitur Pendaftaran Jamaah yang Dinamis & Fleksibel – AHU PART 7
    June 25, 2025
    Kalau sebelumnya kita sudah bisa membuat dan mengelola paket perjalanan, sekarang waktunya membuka akses untuk jamaah mendaftar. Tapi, pendaftaran ini nggak bisa asal simpan data […]
© 2025 Cauza Multimedia Creatifa | WordPress Theme by Superb WordPress Themes
Back to Top ↑