Masih membahas tentang penggunaan modal bootstrap, setelah pada artikel sebelumnya membahas bagaimana memanfaatkan modal bootstrap untuk dijadikan sebagai dialog konfirmasi (baca : Membuat Dialog Konfirmasi dengan Modal Bootstrap), maka pada artikel kali ini akan kita manfaatkan modal bootstrap untuk menampilkan detail data, sebagai intro penjelasan, anggaplah penulis memiliki data seperti berikut :
Dari gambar diatas jika kita ingin melihat detail nya maka kita tinggal meng-klik icon pada masing masing baris. Cara klasik ketika link tersebut di klik maka akan berpindah halaman dan berganti tampilan layar menjadi seperti berikut :
Tampak pada tampilan tersebut aplikasi sudah sempurna namun ada satu kelemahan jika menggunakan cara diatas yaitu aplikasi akan membuka halaman baru artinya client melakukan request data ke server hanya untuk menampilkan data. Dengan modal bootstrap tidak perlu seperti itu, karena pada saat load data seperti tampak pada gambar diatas kita bisa memanfaatkan untuk membuat tampilan tanpa berpindah layar / request ulang, sehingga apabila aplikasi diatas menggunakan modal bootstrap untuk detail data, tampilan detail data akan tampak seperti berikut :
Coba perhatikan mana yang lebih elegan ?? mana yang lebih cepat tampil datanya ?? dengan modal bootstrap bukan ? bagaimana membuatnya ? pada kali ini contoh dibuat menggunakan framework CodeIgniter (tidak berbeda jika menggunakan php procedural atau PHP OOP murni) berikut langkah-langkahnya :
- Pada halaman tampil data, tepatnya setelah tag penutup </table> buat script html untuk membuat modal bootstrap
Dari script modal diatas yang perlu diperhatikan adalah bagian id modal dengan nama ModalDetail, dan id pada class modal-body yaitu IsiModal, karena jika salah modal bootstrap tidak akan dapat ditampilkan. - Tahap selanjutnya pada setiap baris dibagian tampil data buatlah link detail dengan syntax script sebagai berikut :
Perhatikan script a href diatas, atribut href merujuk pada id modal yaitu ModalDetail (lihat langkah 1 diatas), berikutnya siapkan data yang akan dikirim ke modal-body disimpan dalam atribut id dimana setiap data dipisahkan dengan karakter |, beri nama a href tersebut dengan atribut class dengan nama detail-mahasiswa dan untuk mengaktifkan modal bootstrap ketika link di klik buat atribut data-toggle dengan nilai atribut modal. - Langkah terakhir buat javascript untuk menampilkan modal bootstrap dan data didalamnya berdasarkan baris data yang diklik. Javascript dibuat sebelum tag penutup </body>, berikut scriptnya :
- Langkah terakhir lakukan pengujian, jika ada kesalahan silahkan download contoh script pada link download dibawah untuk bahan evaluasi pembelajaran
Post a Comment