Pada tutorial kali ini penulis membuat contoh buku tamu menggunakan Framework CodeIgniter. Apabila menggunakan Form HTML biasa maka browser akan me-load halaman baru untuk membuka form pengisian pesan tamu. Sebagai contoh perhatikan screenshoot berikut :
Pada gambar diatas apabila menggunakan html murni maka ketika mengklik tombol Tambah Data akan membuka halaman baru, namun dengan bootstrap menggunakan component modal dialog makan ketika tombol tambah diklik akan tampak seperti berikut :
Untuk membuat modal dialog dengan kemampuan live insert komponen yang dibutuhkan adalah :
1. Bootstrap untuk membuat modal dialog nya
2. Jquery untuk proses penyimpanan dan penampilan secara live
3. Script Jquery untuk aplikasi dimana script yang dibuat disimpan dalam tamu_script.js.
4. Didalam script tamu_script.js, dibuat fungsi untuk meload data buku tamu yang sudah masuk
5. Dari script diatas didalam Code Igniter buat sebuah controller dimana didalam controller tersebut terdapat fungsi tampil dan tambah, selain itu buat fungsi index dan simpan.
6. Buat fungsi untuk menyimpan data pada script tamu_script.js, ketika tombol simpan di klik maka menjalankan fungsi berikut
7. Buat model di dengan nama m_tamu untuk proses pengambilan data dan penyimpanan data
8. Buat tiga buah view di folder view yaitu v_tamu sebagai view untuk menampilkan seluruh halaman buku tamu, v_tamu_data untuk menampilkan daftar pesan dari tamu berupa tabel, dan v_tamu_tambah untuk menampilkan form pengisian buku tamu.
Untuk mempelajari script diatas silahkan download aplikasinya :
Post a Comment