Modal Bootstrap 4 Data Remote

Tulisan kal ini masih membahas tentang modal bootstrap setelah empat bahasan sebelumnya tentang penggunaan modal bootstrap dalam pengembangan aplikasi web yaitu :

1. Mencetak Modal Bootstrap
2. Membuat Detail Data dengan Modal Bootstrap
3. Membuat Dialog Konfirmasi dengan Modal Bootstrap
4. Live Insert dengan JQUERY via Modal Form Boostrap Menggunakan CodeIgniter

Pada tulisan kali ini akan membahas tentang modal bootstrap dimana informasi didalam class modal-body berasal dari url lain atau istilah lainnya modal bootstrap data remote, sebenarnya modal bootstrap data remote di bootstrap versi 4 sudah dihapus (deprecated), namun hal itu bukan berarti tidak bisa membuat modal bootstrap di versi 4. Sebagai demo perhatikan video berikut ini :

Setelah anda melihat demo-nya, berikut proses pembuatan modal bootstrap 4 data remote pada PHP Framework CodeIgniter.

1. Download Codeigniter di codeigniter.com
2. Extract CodeIgniter dan simpan di web directory anda (htdocs atau /var/www/html)
3. Download bootstrap 4 di getbootstrap.com
4. Extract bootstrap dan simpan di directory codeigniter
5. Rename Directory CodeIgniter anda menjadi tokoku, sehingga aplikasi web akan diakses di alamat http://localhost/tokoku
6. Lakukan setting config.php, autoload.php, database.php serta route.php di Framework Codeigniter anda
7. Buat database tokoku dan sebuah tabel dengan nama produk dengan script  seperti berikut :
   
8. Buat Controller home dengan script seperti berikut :
   
9. Buat Model M_produk dengan script seperti berikut :
   
10. Buat view v_home dengan script seperti berikut :
    
11. Buat view v_detail_produk dengan script seperti berikut :
    
12. Buat view v_hubungi_kami dengan script seperti berikut :
    
13. Buat view v_cara_belanja dengan script seperti berikut :
    
14. Buat view v_hasil_cari dengan script seperti berikut :
    
15. Buat view v_produk_terbaru dengan script seperti berikut :
    

Penjelasan Script :

Modal bootstrap dijalankan dengan merubah tag href yang standar html-nya seperti berikut :

<a href=”url_address”>Item Link</a>

Diubah menjadi :

<a href=”url_address” class=”btn btn-info” data-judul=”Judul Baru Modal Bootstrap” data-toggle=”modal” data-target=”#KotakDialog”>Item Link</a>

Adapun maksud dari :

class=”btn btn-info” : Merubah link html menjadi button bootstrap

data-toggle=”modal” : atribut untuk mengaktifkan modal bootstrap

data-target=”#KotakDialog” : atribut untuk memilih modal bootstrap yang akan diaktifkan

Sebagai bahan latihan, silahkan download script contoh pada link dibawah ini :

DOWNLOAD