Pop Up Login Form dengan Fancybox tanpa Validasi Javascript pada Lokomedia

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 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 :

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 :

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.

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.