Assalamualaikum..
Halo berjumpa lagi di blog praktikum..
kali ini saya akan membahas bagai mana Bootsrap modal penggunaanya dan ajax..
Pertama apa itu modal??
Modal bootstrap adalah semacam kotak dialog yang muncul di tengah-tengah layar.
jadi fungsinya ini itu adalah sebagai pemberi pesan berupa konfimasi ataupun hal lainya..
Dan apa itu Ajax??
suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.
..
Pertama-tama yang harus di lakukan
1.Menyiapkan JQuery,bootsrapnya,dan toastr.
2.Hubungkan media dengan project kalian..
Lanjut ke cara, contoh dan hasilnya :.....
1.Menghubungkan
JQuery,bootsrapnya,dan toastr dengan project kalian..
pertama download dulu media tadi
untuk contoh loksi penyimpananya sebagi berikut ini :
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.css">
selanjutnya mulai kita mengcoding...
Pertama kita buat modal Bootsrapnya :
Simpan di Bawah akhir sebelum tag Body
selanjutnya kita tambahkan Class bootstrap untuk membuat button pada web , contoh nya Web CRUD saya ini..
<a href="edit.php?nis=<?= $siswa['nis'] ?>" class="btn btn-warning">Edit</a>//CLASS
<a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a> //CLASS
nahh selanjutnya tambah kan JavaScript nya sama yaitu di bawah sebelum tag Body
Selanjutnya Pada Delete.php
tambhakan result Ajax nya
nahh untuk Hasilnya ini :
Tambah Data Baru
ketika akan di hapus datanya
Ketika di Hapus (Ya) seusudah di hapus
Ada Pemberitahuan/Konfirmasi Seperti Contohnya
Terimakasihh Telah Berkunjungg....
Halo berjumpa lagi di blog praktikum..
kali ini saya akan membahas bagai mana Bootsrap modal penggunaanya dan ajax..
Pertama apa itu modal??
Modal bootstrap adalah semacam kotak dialog yang muncul di tengah-tengah layar.
jadi fungsinya ini itu adalah sebagai pemberi pesan berupa konfimasi ataupun hal lainya..
Dan apa itu Ajax??
suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.
..
Pertama-tama yang harus di lakukan
1.Menyiapkan JQuery,bootsrapnya,dan toastr.
2.Hubungkan media dengan project kalian..
Lanjut ke cara, contoh dan hasilnya :.....
1.Menghubungkan
JQuery,bootsrapnya,dan toastr dengan project kalian..
pertama download dulu media tadi
untuk contoh loksi penyimpananya sebagi berikut ini :
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.css">
selanjutnya mulai kita mengcoding...
Pertama kita buat modal Bootsrapnya :
Simpan di Bawah akhir sebelum tag Body
selanjutnya kita tambahkan Class bootstrap untuk membuat button pada web , contoh nya Web CRUD saya ini..
<a href="edit.php?nis=<?= $siswa['nis'] ?>" class="btn btn-warning">Edit</a>//CLASS
<a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a> //CLASS
nahh selanjutnya tambah kan JavaScript nya sama yaitu di bawah sebelum tag Body
Selanjutnya Pada Delete.php
tambhakan result Ajax nya
nahh untuk Hasilnya ini :
Tambah Data Baru
ketika akan di hapus datanya
 |
| Modalnya Muncul |
Ketika di Hapus (Ya) seusudah di hapus
Ada Pemberitahuan/Konfirmasi Seperti Contohnya
Terimakasihh Telah Berkunjungg....
Komentar
Posting Komentar