Cara menggunakan echo

Membuat Edit Data pada Modal dengan Bootstrap dan PHP - Modal adalah sebuah plugin untuk menampilkan dialog box atau popup window diatas halaman utama, utamanya muncul di tengah-tengah halaman. Kegunaan modal tentu saja untuk mempercantik tampilan web dan terlihat lebih elegan. 

Umumnya modal digunakan untuk menampilkan alert atau peringatan pada sebuah halaman web. Misalnya ketika akan melakukan delete, muncul peringatan "apakah yakin untuk menghapus data ?" atau untuk close dari sebuah halaman. Untuk contohnya terlihat seperti berikut ini, yang juga akan kita buat nantinya yang digunakan untuk fungsi update data.

contoh modal bootstrap

Kali ini kita akan membuat sebuah fungsi edit data pada suatu halaman web dengan menggunakan modal bootstrap, php dan mysql. Contoh update, akan kita munculkan seperti gambar diatas.

Code Program

Sebelumnya, penulis menggunakan tutorial yang sudah pernah diposting yaitu membuat tabel dengan datatabel dan bootstrap. Apabila sobat ingin lebih cepat, tanpa mengikuti step dibawah ini kecuali step saat modalnya, bisa didownload disini. Namun akan saya buatkan step by step pada tutorial kali ini.

Pertama kita buat sebuah file koneksi dengan nama koneksidb.php . Untuk database yang digunakan juga diambil dari tutorial sebelumnya bisa diklik disini. Kemudian sobat bisa copy code berikut didalamnya. 

Selanjutnya kita buat sebuah halaman index.php , sobat bisa copy code berikut ini didalamnya.

DataTabels dengan PHP dan Bootstrap








×
Update Data Mahasiswa









Nama
      



Fakultas
      


  
Update
Close


        








No
Id
Nama
Fakultas
Action
                         

  









Edit






          

Kebutuhan awal dari penerapan bootstrap tentu saja file bootstrap dan javascrip yang bisa kita download pada halaman resmmi bootstrap atau dengan menggunakan link.Berikut ini contoh untuk file bootstrap offline dan link online.

//ofline file bootstrap dan javascript




//online bootstrap dan javascript

Yang harus kita perhatikan saat membuah modal adalah atribut yang kita sisipkan yaitu :

• data-toggle ="modal" untuk membuka modal window
• data-target="#myModal" merupakan id modalyang akan kita panggil pada modal content.

Pada contoh code, id modal penulis letakkan pada sebuah button dengan nama id #myModal. Pada code berikut.

Edit

Pada modal yang dibuat, Kita membuat sebuah div yang menampung head, content dan footer dari modal dengan memanggil id #myModal yang berisi data.

Modal yang dibuat menggunakan class="modal fade" yeng ketika modal muncul akan ada efek transisi dan class="modal-dialog". Modal yang dibuat dibagi menjadi tiga bagian yaitu bagian head, bagian content dan bagian footer. Pertama untuk bagian head ada pada code berikut. Yang menampilkan header pada code berikut :

×
Update Data Mahasiswa

Kemudian bagian content dijelaskan dalam code dibawah ini. Yang mana code berikut ini menampilkan form yang berisi data mahasiswa dengan tampilan dari nama dan fakultas.

×
Update Data Mahasiswa









  Nama
        



  Fakultas
        

Dan untuk bagian footer dijelaskan dalam code berikut ini.

  
Update
Close

Terakhir kita buat sebuah file.php utuk proses update data dengan nama editmhs.php. Copy code berikut didalamnya.

Selanjutnya kita save seluruh file yang kita buat. Dan siap untuk di run melalui browser dengan format : localhost/nama_folder_projek/nama_file_index.php .

Hasil Running Program

Berikut ini adalah hasil running program. Kita klik pada salah satu data yang akan diedit. Misalnya pada data ke -6 dengan nama : Samsul Bahri dan fakultas : Pertanian. Akan kita edit namanya menjadi Muhammad Samsul Bahri.

Selanjutnya kita klik button Edit pada kolom action.

Kita ubah pada field nama, ataupun sobat bisa ubah pada field lainnya.

Kemudian klik button update untuk melakukan perubahan

Kita perhatikan apa yang telah kita ubah, dan berhasil apda data ke-6. Demikian untuk tutorial web menggunakan modal bootstrap untuk mengedit data pada database. Semoga tutorial kali ini membantu masalah sobat dan memberikan ilmu baru. Terimakasih.

Artikel lanjutan : 
Membuat CRUD Modal dengan Bootstrap dan PHP : klik disini

Download Program
Mirror Download