Sebelum ditemukannya jquery dan bootsrtrap, popup merupakan teknologi pendahulunya. membuat popup jika menggunakan bootstrap istilahnya adalah modal dialog dan untuk membuatnya silahkan baca artikel membuat modal dialog pada artikel Membuat Output PDF dengan CodeIgniter Menggunkan Modal Dialog.
Perhatikan screenshoot berikut, ketika icon buku disebelah kanan di-klik maka akan menjalankan popup menampilkan detail dari buku yang bersangkutan.
Berikut tampilan popup-nya:
Popup tidak hanya berguna untuk menampilkan data seperti diatas, namun bisa juga menampilkan data untuk diambil nilainya dan dikirim ke form yang dituju, sebagai contoh ketika tombol tambah diklik maka akan tampak seperti berikut :
Pada gambar diatas perhatikan pada bagian penerbit dan pengarang, jika kita menggunakan dropdown biasa tidak menjadi masalah ketika data penerbit atau pengarangnya sedikit, namun akan jadi masalah ketika datanya banyak maka dropdown akan memanjang kebawah nah mengakalinya dengan membuat popup, sebagai contoh ketika tombol cari pada bagian pengarang di klik akan menjalankan popup berikut :
Perhatikan gambar diatas, bisa diatur menggunakan paging / pemenggalan halaman, dan ketika di-klik kode pengarangnya, otomatis kode dan nama pengarang akan dibawah ke kotak kode dan nama pengarang pada form tambah buku diatas.
Penasaran membuatnya ?? berikut langkah garis besarnya :
1. Load helper URL di autoload.php pada folder application config
autoload[‘helper’]=array(‘url’);
2. buat class dalam hal ini misal class popup
3. buat fungsi-fungsi di dalam class popup , satu fungsi untuk satu popup, misal
public function penerbit(){
kode php
}
untuk menampilkan popup daftar penerbit
4. buat view, pada bagian atas view buat atribut berupa array untuk menyiapkan setting popup
5. pada view yang akan menggunakan popup untuk menjalankan popupnya dengan mengetikan syntax
anchor_popup(alamat_url_popup,text_link,atribut_popup);
misal :
6. Sedangkan untuk mengambil nilai ketika sebuah link didalam popup di klik berikut potongan scriptnya :
Untuk jelasnya silahkan download full script nya pada link dbawah ini.
Post a Comment