Loading...

Modal Bootstrap Dengan Data Dinamis

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis

Membuat modal bootstrap dengan data dinamis. Pada postingan kali ini, Kita akan mencoba menampilkan sebuah data dengan modal bootstrap. Apa itu modal bootstrap? Modal bootstrap yaitu sebuah kotak obrolan yang biasa dipakai untuk melaksanakan konfirmasi atas suatu agresi yang dilakukan oleh pengguna.
Misalnya saat akan menyimpan sebuah data yang telah di isi, di edit ataupun saat akan menghapus sebuah data. Selain itu, modal bootstrap modal juga sanggup dipakai untuk menampilkan sebuah data dan masih banyak lagi kegunaan lainnya.

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis
Contoh modal bootstrap

Baik tak panjang lebar, kini kita pribadi saja praktekan. Anggaplah kita memiliki sebuah tabel dengan data sebagai berikut.

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis


Kita akan menciptakan tabel database dari data diatas, silahkan salin dan insert skrip sql berikut ini.

Persiapan Direktori
  • Buat folder utama proyek, pada pola ini namanya yaitu "modal_dinamis".
  • Buat 2 sub folder di dalam folder modal_dinamis, yaitu application dan assets.
  • Buat 2 sub folder di dalam folder application, yaitu config dan view.
  • Buat 2 sub folder di dalam folder assets, yaitu css dan js. Ini dipakai untuk menyimpan file-file eksternal css dan javascript. Atau sanggup juga kita impor secara online namun pada goresan pena ini Saya tidak memakai metode tersebut.
Sehingga struktur foldernya yaitu sebagai berikut.

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis

Membuat Koneksi ke Database
Buat file dengan nama database.php dan simpan pada folder: application/config/database.php.
Silahkan sesuaikan dengan database yang akan digunakan.

Menampilkan Tabel dari Database
Buat file dengan nama index.php dan simpan pada folder utama proyek yaitu: modal_dinamis/index.php.
Penjelasan untuk arahan diatas tersedia pada baris komentar, jadi silahkan dibaca dan dipahami sendiri ya 😄.
Sekarang buka alamat http://localhost/modal_dinamis pada browser. Jika tidak ada kesalahan maka balasannya menyerupai dibawah ini.

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis

Jika kita klik pada button Detail akan muncul modal namun masih kosong datanya alasannya yaitu kita belum menciptakan file untuk menampilkannya.

Membuat File untuk Menampilkan Data pada Modal
Buat file gres dengan nama detail.php dan simpan pada folder: application/view/detail.php.
Sekarang coba kita klik kembali pada button Detail, seharusnya modal sudah sanggup tampil dengan sempurna.

Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis

Coba kita perhatikan file application/view/detail.php. Pada form diatas, terdapat baris kode:
<form method="post" action="./application/view/save.php">
Ini mengartikan bahwa kalau kita mengedit dan menyimpan, maka akan diteruskan ke file application/view/save.php untuk di eksekusi. Kaprikornus file save.php tersebut-lah yang akan melaksanakan interaksi dengan database. Namun untuk hal ini akan kita bahas pada goresan pena berikutnya. Sekarang cukup isikan baris arahan berikut dan simpan pada folder: application/view/save.php. File ini hanya berisi alert seolah-olah kita telah berhasil melaksanakan perubahan terhadap database


Menampilkan modal bootstrap dengan data dinamis Modal Bootstrap dengan Data Dinamis

Nah, demikian-lah postingan mengenai cara menampilkan modal bootstrap dengan data dinamis. Untuk file-file pendukung menyerupai css dan javascript silahkan rekan download sendiri ya 😁, atau kalau ada yang menginginkan source code-nya secara lengkap silahkan tinggalkan komentar, nanti akan saya upload.
Terima kasih.
Sumber https://www.wadagizig.com

Subscribe to receive free email updates:

0 Response to "Modal Bootstrap Dengan Data Dinamis"

Posting Komentar