Menampilkan modal bootstrap secara dinamis

Menampilkan modal bootstrap secara dinamis

5101
75
SHARE

Masih berkaitan dengan javascript ne.. hehe, tapi menyangkut masalah bootstrap sedikit ya. Yaitu kita akan membahas tentang cara menampilkan modal bootstrap secara dinamis.

Apa itu maksudnya? Jadi misalkan kita punya tabel dengan banyak baris dan kita menginginkan bila kita klik salah satu baris, maka data pada baris tersebut akan muncul di dalam kotak modal bootstrap. Contohnya bila kita mengklik baris 1, maka data yang muncul pada modal adalah data baris 1, Bila kita klik baris 2, data yang muncul pada kotak modal bootstrap adalah data baris 2 dan seterusnya.

Menampilkan modal bootstrap secara dinamis

Langsung saja kita mulai membuatnya.

Step 1 : Buatlah folder, misalkan namanya ‘modal’. Masukkan bootstrap.css, bootstrap.js, serta jquery.js pada folder tersebut sehingga tampilan folder anda menjadi seperti berikut ini.
modal bootstrap
Step 2 : Buatlah file index.php dengan kode sebagai berikut :

Step 3 : Buatlah file hasil.php dengan kode sebagai berikut :

Jalankan index.php melalui browser, cobalah untuk meng klik link show pada masing-masing baris, maka akan tampil modal dengan isi data sesuai dengan baris yang kita klik.

Berikut ini adalah screenshot bila kita klik baris nomor 2 :

modal bootstrap

Penjelasan :

Cara kerja kode ini cukup sederhana, yaitu pada baris 49 s/d 59 index.php, kita menggunakan event clik pada link yang memiliki class ‘edit record’ dan mengirimkan datanya ke hasil.php. Data yang dikirimkan yaitu ‘data-id’ yang merupakan atribute yang kita buat sebagai tempat id. Respon atas pengiriman ajax tersebut di tampilkan dalam modal-body . Sehingga tampilah data id dalam modal box.

DEMO | DOWNLOAD

Pada praktek sebenarnya anda dapat membuat data-id secara dinamis dengan menggunakan loop php, serta membuat hasilnya responsenya menjadi dinamis dengan mengambil data sesuai data-id yang dikirim.

Mudah bukan, selamat mencoba. Bila ada pertanyaan silahkan ditulis di komentar ya. Terima kasih telah berkunjung ke harviacode.com

Bagikan artikel ini ya.. terima kasih

75 COMMENTS

    • tinggal d looping aja seperti menampilkan data secara looping biasa, cm d atribute data-id diisi pakai id tabel. Smentara itu d hasil.php kita tangkap id yg d kirim pakai method post. Dari situ kita jalankan query select by id. Gitu kira2.. πŸ˜€

      • permisi gan ane masih bingung ni soal yang tangkap id yng di kirim method post dan jalankan query select by , bisa di jelasin detail nya gan??

        terima kasih

        • gini mas, kan di file index.php baris 52 s/d 56 kita mengirimkan parameter ID ke hasil.php. Nah di file hasil.php itu ID yang kita kirim tadi kita gunakan untuk mengambil data. Jadi bisa pakai SELECT from TABLE WHERE id=ID, sehingga akan muncul data atas ID yang dikirim tadi. Contohnya, kita punya daftar nama mahasiswa, lalu kita klik nama mahasiswa itu maka detail mahasiswa itu akan muncul dalam modal.

  1. guna bootstrap.css, bootstrap.js, serta jquery.js apa? nggak diisi kodingnya juga,apa sebagai trap n boot aja?

    Tampilannya hanya ada

    button close

    Modal title

    button close button save changes

    Nama Alamat Aksi
    Hari Jakarta Show
    Hera Bekasi Show

    Diklik show,save changes dan close tidak terpengaruh??apakah salah saya…

    • .css untuk tampilan gan, sedangkan .js buat modalnya dll. silahkan lihat dokumentasi tentang bootstrap di http://getbootstrap.com/. save mmg belum di buat aksinya, jadi hanya contoh aja. kalo closenya nggak bekerja berarti ada yang salah pada js nya. hehe

  2. mau tanya, itu kan kita harus bikin file baru dengan nama hasil.php. Kalu misalnya kita mau mengambil id nya itu ket halaman asalnya gimana?

    Thx

    • bikin aja variabel di javascriptnya. nilainya di ambil dari URL pakai GET. contoh : var id_url = tagpembukaphp echo $_GET[‘id’]; tangpenutupphp, lalu yang id:$(this).attr(‘data-id’) menjadi id : id_url. tp kalo seperti itu sebenarnya tidak perlu lagi secara dinamis. langsung saja ditampilkan di modal.

  3. Terimakasih banyak atas tutorialnya mas πŸ™‚ ,
    saya cari cari di website lain , akhirnya nemu juga cara yang mudah dimengerti yaitu cara seperti yang agan ajarkan diatas.

    mantap (y). tambahin lagi tutor yang lain ya mas. hehe

  4. saya mau tanya, pada coding $.post(‘hasil.php’,
    {id:$(this).attr(‘data-id’)},

    Nah file php itu harus satu folder dengan file index.php? dan bagaimana jika file script, index.php dan hasil.php terpisah. soalnya saya tidak bisa post idnya terima kasih.

    • gak harus satu folder gan. bila beda folder ditulis juga path nya. intinya kita mw kirim data ke hasil.php. nah lokasi file tersebut dimana kita harus tulis jelas. misalnya $.post(‘namafolder/hasil.php’)..dst

  5. pastikan attribute data-id nya ada gan, lalu pastikan juga pengiriman dengan ajax nya benar. jika responnya benar harusnya muncul.

  6. Bagaimana jika saya ingin menampilkan dokumen pdf pada modal dialog? tapi pdf tersebut berasal dari query sql. Bingung bagaimana menempilkan dokumen yang berbeda dari setiap row :-s

  7. gan skrip di index.php ada yang kurang ga ya ? karena di ane ga jalan tapi setelah ditambahkan data-toggle=”modal” di tombol SHOW baru jalan.. tapi itu juga belum nampilkan data dari hasil.php , itu kenapa ya gan ?

  8. Gan permisi klo dalam satu baris record banyak field yg perlu ditampilkan dengan modal bootstrap? bisa kasih dikit modif kodenya?

    • Udah sya kirim contoh kodenya melalui email. Intinya cuma perlu :
      1. copas modal nya lalu kasih id yang berbeda
      2. copas linknya, ubah nama class dan data-* nya
      3. copas javascriptnya, sesuaikan nama class2 dan id2 nya
      4. bikin file hasil2.php untuk handle response link yang baru.
      Terima kasih mas hadi..

  9. Waktu di file hasil.php dtmbh kn form method post, textfield n submit button untuk ngedit data brdasarkn idx .. Kok ga bsa ya gan? Cumn refresh pagex aj dy.. Mohon pncerahanx..
    Intix klo bwt nampilkn data brhasil.. tp ktika djdiin untuk edit data, kok ga bsa2 ya..

    • hehe.. kalo untuk edit harus murni menggunakan ajax. sebenarnya langkahnya sama aja. tinggal diambil datanya menggunakan ajaz lalu dikirim untuk diproses.

    • tinggal ditambahin css nya mas

      body .modal {
      /* lebar modal yang diinginkan */
      width: 560px;
      /* harus setengah dari lebar modal (minus) */
      margin-left: -280px;
      }

  10. kalo misalnya ga pake bootstrap gimana om? ada perbedaan atau sama aja? soalnya ane bikin modal sendiri. trus ane juga msh agak bingung kalo implementasi dengan databasenya hehe

    • sama aja mas mw pakai bootstrap ataupun tidak. Intinya saat diklik membuka modal, lalu menampilkan respon ajax kedalam modal. kalo pakai bootstrap kan $(“#myModal”).modal(‘show’); nah mungkin kalo modal bikinan sendiri tinggal disesuaikan. hehe

  11. misi mas, mau nanya…. klo yang masu buat kan itu ID yang di post… nah bagaimana kalo id dan nama juga di post… bingung di {id:$(this).attr(‘data-id’)} nya mas….
    terima kasih sebelumnya

    • tambahkan ada data-nama di properties nya mas.. nanti di javascriptnya {id:$(this).attr(β€˜data-id’), nama:$(this).attr(β€˜data-nama’)}. btw mengapa harus kirim nama juga kalo id nya udah terkirim? kan nanti di hasil.php nya bisa di ambil nama berdasarkan id yang terkirim…

    • Bisa gan, pakai datatables. Tapi pengalaman saya tidak banyak berguna pagination di modal cz orang ingin klik pasti yang dihalaman pertama aja.

  12. Gan tabel yg ditampilkan di modal saya kok gak seperti tabel yg biasanya ya, (search gak ada,tidak bisa sortir) saya pakai bosstrap 3, apakah file hasil.php perlu di include kan file bosstrapnya?
    thanks sebelumnya.

LEAVE A REPLY