Cara Update Data Codeigniter dengan Modal Bootstrap

Update data sudah pasti dibutuhkan dalam suatu manajemen sistem informasi. Update data codeigniter digunakan untuk melakukan perubahan data jika ada kesalahan dalam input data codeigniter. Ada berbagai macam cara yang digunakan untuk melakukan update data melalui codeigniter, ada yang membuat halaman baru, ada yang menggunakan ajax, ada pula yang menggunakan popup modal bootstrap seperti yang akan kita bahas saat ini, dan masih banyak cara-cara yang lainnya.

Pertama kali saya belajar menggunakan modal bootstrap ini untuk update data codeigniter, saya sangat kebingungan karena data yang ingin diubah tidak muncul ke dalam form, tidak tahu bagaimana caranya, sudah banyak saya cari tutorial kesana kemari tetap saja tidak dapat. Untuk itu, agar teman-teman tidak mengalami yang sudah saya alami, maka dari itu saya membuat tutorial ini. Lalu Apa kelebihannya jika kita menggunakan modal boostrap? Secara garis besar kita tidak perlu membuat banyak halaman baru untuk melakukan input maupun update data. Untuk itu simak dan pahami dengan baik tutorial kali ini tentang Cara Update Data Codeigniter dengan Modal Bootstrap.

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Persiapan Update Data Codeigniter dengan Modal Bootstrap

Tutorial ini adalah tutorial yang melanjutkan dari pembahasan sebelumnya tentang CRUD codeigniter, setelah menampilkan data, insert data, sekarang saatnya update data. Lalu apa saja persiapan yang dibutuhkan untuk tutorial kali ini? Berikut adalah hal yang harus dipersiapkan untuk tutorial kali ini.

Baca dan implementasi tutorial sebelumnya tentang CRUD Codeigniter.

Hanya itu saja yang diperlukan dalam persiapan Update Data Codeigniter dengan Modal Bootstrap, tidak sulit dan juga tidak begitu mudah.

Tutorial Update Data Codeigniter dengan Modal Bootstrap

Setelah semua persiapan dilakukan, sekarang saatnya untuk melanjutkan tutorial ini.

Controller

Pertama-tama bukalah file controller dengan nama admin.php yang berada di applications/controller. Kemudian tambahkan script ini dibawah fungsi tambah.

Fungsi diatas berguna untuk melakukan mengambil data dari input pengguna dan melakukan updating. Saya akan jelaskan sedikit, pertama-tama id akan dimasukkan kedalam variable id dengan cara :

Kemudian Input Data dari pengguna akan dimasukkan kedalam array $data melalui :

Setelah itu data dan id akan dikirim ke model untuk updating data ke database dan akan kembali lagi ke halaman admin dengan cara berikut :

Setelah digabung dengan fungsi sebelumnya maka akan menjadi seperti berikut ini.

Source Code Controller Admin.php

Model

Hal berikutnya yang harus dilakukan adalah menambah fungsi model yang digunakan untuk update database. Sekarang buka model_admin.php yang berada di applications/model, kemudian tambahkan script ini dibawah fungsi tambah.

Saya jelaskan sedikit, sekarang lihatlah parameter pada fungsi ubah ada $data dan $id, kedua variabel tersebut di dapat dari controller ubah sebelumnya yang berisi data yang di input oleh pengguna. Kemudian tabel orang akan di update dengan kondisi dimana terdapat data dengan id yang sama.

Setelah digabung dengan file sebelumnya maka akan menjadi seperti berikut ini.

View

Nah, untuk bagian view akan sedikit lebih banyak ada beberapa hal yang harus dilakukan. Sekarang bukalah view_admin.php yang berada di applications/view.

Button Update Data Codeigniter

Pertama-tama kita buat button yang digunakan untuk mengubah datanya nanti, dengan cara, cari dan gantilah script dibawah ini :

Menjadi

Script diatas digunakan untuk membuat button yang berfungsi untuk memanggil popup modal bootstrap dengan id edit-data dan menyimpan variabel-variabel data agar dapat muncul di form modal nantinya.

Modal Update Data Codeigniter

Kemudian sama seperti tutorial sebelumnya, kita buat script untuk membuat modal akan tetapi saat ini setiap inputnya diberikan id. Letakkan script untuk membuat modal dibawah modal tambah yang sudah kita buat sebelumnya, buatlah script modal ubah menjadi seperti berikut ini.

jQuery Update Data Codeigniter

Kemudian yang terakhir yaitu membuat script berupa jQuery yang digunakan untuk passing data dari button yang kita buat tadi ke modal bootstrap. Letakkan dibawah modal ubah yang sudah dibuat sebelumnya. Buat seperti berikut ini.

source code

Penjelasan

Saya jelaskan sedikit, script diatas khusus dibuat hanya untuk modal yang mempunyai id edit-data, kemudian perhatikan pada tombol yang kita buat :

disana terdapat data-id, data-nama, data-alamat, dan data-pekerjaan. Variabel-variabel inilah yang nantinya digunakan untuk mendapatkan datanya di jQuery yang sudah dibuat. Sekarang perhatikan script yang ada di jQuery ini.

Maksud dari script diatas adalah dia akan mencari id yang sama yang terdapat di input modal kemudian dia akan menuliskan data yang didapat dari tombol sebelumnya. Contohnya :

Misalnya script jQuery yang dijalankan adalah yang ini

Maka pada modal bootstrap dia akan mencari id=”nama” seperti dibawah ini

Kemudian akan mengambil data pada tombol

dan menuliskannya pada input diatas. Bagaimana sudah paham bukan alurnya? Maka setelah semuanya digabung akan menjadi seperti berikut ini.

Source Code full view_admin.php

Demo Update Data Codeigniter

Sekarang mari kita coba jalankan, petama-tama tuliskan pada url localhost/login, seilahkan login seperti biasanya kemudian lakukan update data seperti dibawah ini.

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Cara Update Data Codeigniter dengan Modal Bootstrap

Kesimpulan

Bagaimana sudah paham bukan bagaimana caranya Update data Codeigniter dengan Modal Bootstrap? Waktu pertama kali dulu saya menggunakan foreach pada modalnya, jadi jika datanya ada 1000 maka sistem yang saya buat dahulu akan membuat browser yang digunakan crash. Itulah pengalaman saya, dan saya membagikan agar tidak ada yang mengalami kejadian yang seperti saya.

Baiklah akhir kata, jika ada yang ingin disampaikan atau ditanyakan dapat langsung bertanya di kolom komentar. Jika ada kesalahan saya mohon maaf, kepada Tuhan saya mohon ampun. Sekian dan Terima Kasih

You may also like...

9 Responses

  1. pke modal memang bisa lebih menghemat code dan form,,
    tapi akan lebih bagus lagi jika dikombinasikan dengan ajax

  2. aladani says:

    kalau ada combobox dinamis di form editnya gmana yaa??

  3. abdi says:

    thx gan bermanfaat sekali

  4. amal says:

    saya udh ngikutin tutorial diatas, tpi ko datanya gk muncul saat edit yah..

Leave a Reply

%d bloggers like this: