PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis - Salam programmer sahabat App Source Code, Pada sharing Script/Source Code kali ini yang berjudul PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis, saya telah menyediakan Source Code lengkap dengan Databasenya. mudah-mudahan isi postingan App Source Code yang saya tulis ini dapat anda pahami. okelah, ini dia Source Code Programnya.

Judul : PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis
Link : PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis

PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis

Artikel JQUERY, Artikel MYSQL, Artikel PHP,

Langsung saja sesuai judulnya, tutorial yang saya buat adalah mengenai bagaimana caranya menghapus sebuah data tanpa mereload halaman dengan bantuan Jquery dan Ajax (Asynchronous Javascript and XML).

Langkah pertama kita buat terlebih dahulu databasenya dan tabel mahasiswa, bisa di lihat dibawah ini.

CREATE TABLE IF NOT EXISTS `mahasiswa` ( `id_mahasiswa` int(3) NOT NULL AUTO_INCREMENT, `nim` varchar(20) NOT NULL, `nama_mhs` varchar(100) NOT NULL, `semester` int(3) NOT NULL, `password` varchar(100) NOT NULL, `jurusan` varchar(100) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (`id_mahasiswa`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; -- -- Dumping data untuk tabel `mahasiswa` -- INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim`, `nama_mhs`, `semester`, `password`, `jurusan`) VALUES (1, '09.01.000', 'Ahmad Subaini', 1, '25f9e794323b453885f5181f1b624d0b', 'Sistem Informasi '), (2, '09.01.001', 'Aris Pratama', 2, '25f9e794323b453885f5181f1b624d0b', 'Sistem Komputer'), (3, '09.01.002', 'Jarot Jaya Kusuma', 1, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika'), (4, '09.01.003', 'Dian Pratiwi', 5, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika'), (5, '010.01.000', 'Andre Rosi', 7, '5a47a5034c83d1a0cab5b802b1d631ea', 'Teknik Informatika');

Kemudian download terlebih dahulu file jquery disini dan jqueryUI disini karena kita akan mengunakan kotak konfirmasi tidak menggunakan javascript tapi menggunakan effect dialog yang terdapat di jqueryUI ini, biar kelihatan wow gitu :D. silakan pilih tema atau kostumisasi sendiri di situs tersebut.

Panggil file tersebut di script yang anda buat.

Buat script php yang berguna untuk menghapus data yg dikirimkan oleh ajax contoh seperti dibawah ini.

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
if (isset($_POST['id'])) {
mysql_query("delete from mahasiswa where id_mahasiswa= '".$_POST['id']."'");
}
?>

Selanjutnya kita akan membuat tabel untuk menampilkan data yang kita ambil dari database dan tag id html untuk kotak dialognya.

<table border="1" align="center">
  <thead>
    <tr >
      <th>Nim</th>
      <th>Nama</th>
      <th>Semester</th>
      <th>Jurusan</th>
      <th width="100px">Pilihan</th>
    </tr>
  </thead>
  <?php
  mysql_connect("localhost","root","");
  mysql_select_db("test");
  
  $sql= "select * from mahasiswa";
 $result = mysql_query($sql); 
 while($row=mysql_fetch_array($result)) {
  ?>
  <tr align="center" id="<?php echo $row['id_mahasiswa'];?>">
    <td><?php echo $row['nim'];?></td>
    <td><?php echo $row['nama_mhs'];?></td>
    <td><?php echo $row['semester'];?></td>
    <td><?php echo $row['jurusan'];?></td>
    <td width="100px"><center>
    <img class="hapus" id="<?php echo $row['id_mahasiswa'];?>" src="del.png" style="cursor: pointer;" />
      </center></td>
  </tr>
  <?php } ?>
</table>
<div id="konfirm-box"> Apakah Anda yakin akan menghapus ini?</div>

Dibawah ini adalah script jquery dan ajaxnya.

          $(function () {
    //Box Konfirmasi Hapus
                $('#konfirm-box').dialog({
                    modal: true,
                    autoOpen: false,
                    show: "bounce",
                    hide: "explode",
                    title: "Konfirmasi",
                    buttons: {
     
                        "Ya": function () {
      jQuery.ajax({
      type: "POST",
      url: "delete.php",
      data: 'id=' +id,
      success: function(){
      $('#'+id).animate({ backgroundColor: "#fbc7c7" }, "fast")
      .animate({ opacity: "hide" }, "slow");
      }
      });
                        $(this).dialog("close");
                        },

                        "Batal": function () {
      //jika memilih tombol batal
                        $(this).dialog("close");
      
                        }
                    }
                });
    
    //Tombol hapus diklik
                $('.hapus').click(function () {
                    $('#konfirm-box').dialog("open");
     //ambil nomor id
                    id = $(this).attr('id');
                });
            });

Penjelasan sedikit script diatas adalah ketika tombol yang memiliki class hapus di klik maka akan membuka box dialog id konfirm-box, ketika tombol "YA" di klik maka ajax akan melakukan tugasnya yaitu mengirimkan data ke script php delete.php yg kita buat sebelumya berdasarkan data yg telah kita ambil dengan membaca nilai tag id. Script delete.php akan menghapus data tersebut. Jquery akan menyembunyikan tampilan yang memuat tag id yang telah kita buat di tabel, tutup box dialog. jika tombol "Batal" diklik tutup box dialog.

Untuk link demo dan download source codenya bisa klik link dibawah ini .

. Download Script     Live Demo

Demikianlah Artikel PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis

Sekian Source Code PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan App Source Code kali ini.

Anda sedang membaca artikel PHP Script Menghapus Data Mysql dengan Jquery, Ajax dan PHP Gratis dan artikel ini url permalinknya adalah https://app-sourcecode.blogspot.com/2013/05/php-script-menghapus-data-mysql-dengan.html Semoga artikel ini bisa bermanfaat.

Tag : JQUERY, MYSQL, PHP,

Tweet