 |
| Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap |
Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap | Pada pembahasan kali ini, kita akan coba membuat Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap, Dalam aplikasi ini Form tambah dan form edit nya akan kita letakkan pada modal bootstrap.
kenapa harus menggunakan modal..?
Salah satu kelebihan Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap yang paling saya sukai adalah, ketika koneksi internet terbatas alias lemot tidak perlu meload halaman baru untuk menampilkan form tambah atau form edit.
Kelebihan lain nya kita akan menggunakan Ajax Jquery untuk memproses pengiriman data di sisi server, baik itu untuk menambah data, mengedit data atau menghapus data..
Baiklah mari kita siap kan bahan2 nya...
Download dulu file css dan jquerynya yang sudah saya siapkan Disini
Setelah itu buat database nya dengan struktur seperti berikut ini..
Siapkan juga file koneksi.php berikut scriptnya
Selanjutnya kita buat halaman utama yang akan menampilkan data dari database. buat file index.php dan masukkan script di bawah ini..
Jangan lupa buat juga file data.php dan masukkan script di bawah ini..
Lalu jalankan di browser, kurang lebih hasilnya seperti ini..
|
| Tampil Data |
Coba klik tombol Add New warna biru, akan muncul modal dialog yang menampilkan form tambah data mahasiswa seperti ini..
 |
| Modal Form Tambah |
Nah, kita akan buat action untuk memproses pengiriman data, buat file input.php lalu masukkan script di bawah ini..
Agar aplikasi bisa berjalan tanpa meload halaman saat input, edit atau hapus data, kita perlu menambahkan file script.js, yang sudah di load melalui halaman index.php tadi. script ini yang menangani pemrosesan input, edit, atau hapus data tanpa load halaman. nah, kita buat file dengan nama script.js lalu masukkan script di bawah ini..
Dan sekarang biarkan formnya kosong lalu klik tombol Simpan atau Enter.. Hasilnya akan seperti di bawah ini..
 |
| Fitur Validasi Form Dengan ajax jquery |
Yup.. Aplikasi ini sudah di lengkapi dengan validasi menggunakan Ajax Jquery..
Setelah berhasil buat input data berserta validasinya, selanjutnya kita buat fitur edit data menggunakan modal bootstrap..
Buat file edit.php lalu masukkan script di bawah ini..
Lalu coba jalankan dengan klik link edit pada kolom opsi, akan modal dialog akan menampikan form edit beserta detail data berupa value di dalam form..
 |
| Modal Form edit |
Untuk memproses edit kita buat action edit berupa file update.php, buatlah filenya lalu masukkan script di bawah ini..
sama seperti form tambah form edit ini juga di lengkapi dengan fitur validasi form menggunakan Ajax
dan yang terakhir adalah fitur hapus data tanpa perlua meload halaman, buat file hapus.php lalu masukkan script di bawah ini..
Coba jalankan script hapusnya, dengan cara klik link hapus pada kolom opsi..
Nah.. selesai pembuatan Aplikasi CRUD Sederhana Menggunakan Ajax Jquery & Modal Bootstrap nya, hasil nya bisa di coba langsung melalui link Demo di bawah, dan Source Code Lengkapnya Juga sudah saya sertakan melalui Link Download di bawah ini..
Demo | Download
Semoga bermanfaat yah..
Baca juga :
Trims..semoga berkah ilmu nya gan..
ReplyDeleteSaya mau nanya min, saya coba tambah input type file di dalam modal pada saat menambahkan mahasiswa, tapi gk muncul di table maupun di database. Mohon solusinya min
ReplyDeleteSaya mau nanya min, saya coba tambah input type file di dalam modal pada saat menambahkan mahasiswa, tapi gk muncul di table maupun di database. Mohon solusinya min
ReplyDeletebagaimana kalo pake retun confirm ya? kok meskipun udah di batal tetep kehapus datanya
ReplyDeletesudah bisa gan?
Deletecoba ini:
$(document).on('click','#hapus',function(e){
e.preventDefault();
if (confirm('Hapus Data?')) {
$.post('hapus.php',
{id:$(this).attr('data-id')},
function(html){
$('#data-mahasiswa').load(data);
}
);
}
});
Bagaimana menambahkan notif sukses apabila menambahkan dan edit data ya gan?
ReplyDelete