Bootstrap jQuery MySQL PHP

Bootstrap Modal Dinamis dengan PHP, MySQL dan AJAX

Written by Fatoni

Bootstrap Modal Dinamis dengan PHP, MySQL dan AJAX. Kali ini perkenankan saya menuliskan sebuah artikel tentang cara bagaimana membuat Bootstrap Modal Dinamis dengan PHP, MySQL dan AJAX, jadi nanti kita akan membuat sebuah tabel berisi data siswa, dimana nanti ada tombol Lihat data, dan jika di klik akan keluar Modal atau PopUp yang berisi data keseluruhan dari siswa tersebut, tentunya ini tanpa refresh atau reload halaman ya sob, karena kita nanti pakai AJAX.

Bagi sobat yang belum tahu apa itu bootstrap modal, bisa pelajari di web resminya » http://getbootstrap.com/javascript/#modals

Oke sob, karena data yang akan ditampilkan itu dari database MySQL. Maka buat dulu deh database nya. Kasus ini saya buat database tutorialweb, dengan table siswa. Sobat gak usah susah-susah buat table nya, cukup buat database dan jalan script SQL di bawah ini:

Copy dan Paste aja script di atas di menu SQL pada phpmyadmin, dan hasilnya bisa terlihat seperti gambar di bawah ini:

bootstrap-modal-dinamis-database-table

Itu dia sob, sudah ada table dan datanya ya.

Oke, sekarang kita buat koneksinya, koneksi ke database dengan menggunakan mysqli ya, berikut scriptnya

Jangan lupa untuk ganti detail koneksinya sesuai dengan server yang sobat pakai,

Simpan dengan nama koneksi.php

Lanjut…..

Kita buat halaman utamanya sekarang, namanya jelas index.php ya. Pada halaman ini tentu saja menampilkan informasi siswa dalam bentuk tabel, dan menyimpan script untuk modal box nya, ingat! hanya modal nya ya, bukan isi konten modal nya, karena isinya kita panggil dari file lainnya.

Berikut isi dari file index.php

Agak ruwet dan ribet ya, karena penjelasan dari tiap baris kode langsung dimasukkan di file tersebut. Silahkan dipelajari apa saja kegunaan dari tiap baris kode.

Hasilnya kayak di bawah ini sob

Itu dia penampakannya. Ketika di klik tombol Lihat data maka akan muncul Modal nya, tapi kontennya masih kosong.

Nah sekarang kita buat untuk menampilkan datanya, buat file baru dengan nama view.php, file ini berisi script untuk menampilkan data dari database dengan id yang di ambil dari atribut id pada tombol Lihat data. Berikut ini script lengkapnya:

Script di atas sudah saya kasih keterangan tiap baris, silahkan dicermati. dan hasilnya Modal yang tadinya kosong sudah terisi data, seperti gambar di bawah ini

bootstrap-modal-dinamis-modal-view

Selesai sob.

Silahkan di praktekkan, jika butuh file source codenya nanti saya upload.

Jika tutorial ini berguna buat sobat, silahkan kasih bintang di bawah ini sob.. thanks 🙂

About the author

Fatoni

Programming is my hobby, not my job.

Leave a Comment