PHP: Ajax dan Bootstrap file

Assalamu'alaikum warahmatullahi wabarakatuh.

Halo teman-teman semuanya! Bagaimana kabarnya? 

Semoga dalam kondisi dan keadaan yang prima dan baik-baik saja ya! 

Perkenalkan kembali lagi bersama saya Ilham, saya dari kelas XI RPL 2 yang sekarang dalam artikel kali ini, kita akan membahas materi mengenai AJAX pada bahasa pemrograman PHP,   tanpa berlama-lama lagi mari langsung saja kita ke inti bahasan materinya!


AJAX 

AJAX singkatan dari Asynchronous Javascript And XML, AJAX sendiri digunakan untuk berbagai hal diantaranya:
  • Mengambil data dari server di background    
  • Update tampilan website tanpa harus me-reload page browser
  • Mengirim data ke server  secara background
Cara menggunakannya disini kita pakai JQuery untuk AJAX agar lebih mudah dan untuk disini untuk studi kasusnya kita akan membuat sebuah modal box untuk mengkonfirmasi penghapusan data untuk menjalankan si AJAX.

File views/insert.php 

Tambahkan plugins javascript JQuery dan Toastr pada file views/index.php
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="assets/vendor/toastr/toastr.min.js"></script>
Lalu tambahkan code dibawah ini sebelum plugins tadi:
<!-- Delete Data Modal -->
<div class="delete-modal modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Konfirmasi</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>

            <div class="modal-body">
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Tidak</button>
                <button type="button" class="btn btn-primary btn-delete">Ya</button>
            </div>
        </div>
    </div>
</div>
Lalu ubah tombol delete didalam baris data students
<a href="delete.php?nis=<?= $student['nis'] ?>" data-delete="<?= $student['name'] ?>">Delete</a>
Kemudian tambahkan script untuk menggunakan AJAX setelah baris code plugins:
<script>
    // Menjalankan JQuery ketika seluruh halaman sudah ter-load
    $(function() {
        // Ambil elemen tombol delete, lalu ketika tombol di-klik jalankan function tersebut
        $('[data-delete]').on('click', function(e) {
            // Karena, tombol delete memakai tag <a>, maka
            // kita batalkan aksi tersebut agar halaman tidak berpindah sesuai href-nya
            e.preventDefault();

            // Ambil nama yang terdapat di data-delete
            const nama = this.dataset.delete;
            // Ambil row data student
            const studentRow = $(this).parent().parent();
            // Ambil link yang terdapat di tombol delete
            const href = this.href;

            // Tampilkan Modal Delete
            $('.delete-modal').modal('show');
            // Tambahkan teks konfirmasi didalam .modal-body
            $('.delete-modal .modal-body').html(`Anda yakin ingin menghapus data <b>${nama}</b>?`);

            // Ketika tombol konfirmasi 'Ya' di-klik maka jalankan function AJAX
            $('.btn-delete').off();
            $('.btn-delete').on('click', function() {
                // Konfigurasi AJAX
                $.ajax({
                    // URL tujuan
                    'url': href,
                    // Tipe AJAX
                    'type': 'GET',
                    // Jika berhasil jalankan function tersebut
                    'success': function(result) {
                        // Cek jika result == 1
                        if (result == 1) {
                            // Hilahkan Modal Delete dan row data student yang kita hapus
                            $('.delete-modal').modal('hide');
                            studentRow.fadeOut();

                            // Tampilkan pesan success
                            toastr.success('Data berhasil dihapus', 'Informasi');
                        }
                    },
                });
            });
        });
    });
</script>

File delete.php 
// Cek jika query berhasil maka tampilkan 1, jika gagal 0
if ($mysqli->query($query)) {
    echo 1;
} else {
    echo 0;
};
Ketika dicoba:


Terlihat bawa data yang dihapus langsung menghilang dari tabel kita tanpa harus meng-reload websitenya, inilah kelebihan dan kegunaan dari AJAX!

Mungkin cukup sekian materi AJAXnya.  Semoga sobat-sobat codingers paham, mengerti dan menguasainya. 

Dan mohon maaf atas semua kesalahan yang telah saya perbuat, tolong berikan koreksi mengenai bagian mana yang salah/kurang pas dalam postingan ini, untuk pengembangan lebih baik kedepannya.

Sekian, saya ucapkan terimakasih banyak atas waktu yang telah diluangkan, saya ucapkan kembali mohon maaf atas segalanya kesalahan. 

Wabilahiltaufik walhidayah, Wassalamu'alaikum warahmatullahi wabarakatuh.
Keep Coding Stay Awesome

0 Response to "PHP: Ajax dan Bootstrap file"

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel