October 15, 2021

Log Of Oyazhuryachna

Blog berbagi resource programming

Live Insert dengan JQUERY via Modal Form Boostrap Menggunakan CodeIgniter

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 :

live_insert_1

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 :live_insert_2

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

live_insert_5

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.

live_insert_4

6. Buat fungsi untuk menyimpan data pada script tamu_script.js, ketika tombol simpan di klik maka menjalankan fungsi berikut

live_insert-6
7. Buat model di dengan nama m_tamu untuk proses pengambilan data dan penyimpanan data

live_insert_7

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 :

DOWNLOAD

You may have missed