membuat crud dengan codeigniter jquery ajax datatables dan modal bootstap
Crud codeigniter ajax |
asalamualaikum wr wb
selamat malam selamat datang di blog ini dan alhamdulillah kita masih di beri kesempatan bertemu lagi di sini.pada kesempatan kali ini saya mau berbagi ilmu bagai mana caranya membuat crud dengan php codeigniter jquery ajax dan dataTables dengan modal bootstrap.kenapa menggunakan dataTables? karena kita sudah di buatkan penampil data yang rapi dan banyak fitur dan ringan.
dengan menggunakan ajax, aplikasi crud yang nanti kita akan buat jika melakukan aksi tidak akan berpindah halaman.intinya si ajax ini akan me request dari belakang layar.
baiklah mari kita mulai tutorialnya dan ini adalah bahan bahan yang harus di siapkan dahulu
framework codeigniter
framework bootstrap
framework jquery
framework dataTables
Baca juga : cara membuat login dengan codeigniter dan bootstrap untuk pemula
jika syarat syarat sudah siap dan sudah di exstrack semuanya dulu, mari kita belajar bersama dan ikuti langkah langkah ini
pertama buat lah database db_crud dan tabet tb_crud terlebih dahulu
rename folder codeigniter menjadi crud
buka folder crud dan buatlah folder assets
pindahkan bootstrap jquery dan dataTables yang sudah di ekstrak kedalam folder assets
buka folder crud aplication controllers dan buatlah file home.php di situ lalu masukkan kode ini kedalamnya
Sedikit penjelasan dari kode di atas :
Baris6-9 mengambil data dari hasil model mcrud ambil yang akan ditampilkan di view tampil data
Baris 12 kode untuk mengalihkan ke halaman tambah data
Baris16-20 mengambil data valeu dari form input berdasarkan nama form dan di ubah menjadi bentuk array
Baris 21 mengirim data ke model
Baris 22 mengembalikan data ke view dalam bentuk Jason array jika berhasil
Baris 26 mengambil data berdasarkan id yang di pilih untuk di edit
Baris 31-33 menangkap dari form yang datanya sudah di ubah lalu menjadikan ke bentuk array
Baris 40 menghapus data berdasarkan id yang di pilih.
Selanjutnya buka folder crud aplication models dan buatlah file mcrud.php lalu masukkan kode ini di dalamnya
Penjelasan dari scrip di atas :
Baris 6-8 mengambil data dari database yang di simpan di tabel tb_crud lalu mengembalikan dalam bentuk result
Baris 12 meng input data ke database
Baris16-17 mengambil data dari database berdasarkan id yang di pilih
Baris 21-23 meng edit data dari database berdasarkan id yang di pilih.
Langkah selanjutnya buka folder crud aplication views dan buatlah file
Sedikit penjelasan program di atas
Baris 12 memasukkan file bootstrap dengan kode html PHP
Baris 22 kode html untuk membuat tabel yang sudah di beri atribut kode data tabel
Baris 37 melakukan looping atau perulangan banyak data yang akan di tampilkan
Baris 42-45 menampilkan data ke browser.
Semua tampilan view tersebut di bangun dengan framework bootstrap dan data tabel saya tidak memberikan lagi kode csss dan html nya
tampilan.php lalu masukkan kode ini
buka folder crud assets buat folder js lalu buat file js.js dan masukkan kode ini
Penjelasanya :
Baris 1 memberitahukan jika dokumen sudah di load jalan kan fungsi yang ada di dalamnya
Baris 2 meload framework data tabel
baris4 membuat fungsi jika ada tombol yang ber class tersebut maka jalankan fungsi
Untuk penjelasan kode yang lain Adah kode Ajax saja.
terus sekarang jalankan codenya d browser dengan alamat http://localhost:8080/crud
Kurang lebih hasilnya seperti ini
Baca juga : cara upload file dengan codeigniter
dan cukup sekian tutorial kali ini semoga bermanfaat dan sampai ketemu lagi di tutorial berikutnya
wasalamualaikum wr wb
note: untuk code lengkapnya bisa di ambil di sini jika link rusak harap lapor di kolom komentar
Makasih bang atas kunjunganya segera meluncur
ReplyDeletelink rusak gan
ReplyDelete