Cara Membuat Delete Data Dengan Php Mysql + Jquery

Cara Membuat Delete Dengan Php Dan Mysql + Jquery Tanpa Refresh tanpa Loading – setelah hampir satu bulan tidak update blog dan sekarang akhirnya di sempatkan lagi update ini blog, kangen rasanya, kali ini saya akan berbagi sebuat tutorial php. yaitu tutorial cara membuat hapus (delete) data dengan php dan mysql di lengkapi dengan jQuery ajak, hapus di php dan mysql sangat di perlukan, karena jika suatu data yang kita simpan ke database maka sudah pasti kita perlukan sebuah proses untuk menghapus data tersebut, dimana hapus ini diperlukan pada saat terdapat suatu data yang tidak di perlukan lagi maka jika suatu data yang sudah tidak di gunakan tentu akan lebih baik kita hapus agar ruang yang terpakai bisa kita gunakan untuk data yang lain, ya begitulah kira-kita keperluan hapus di php tersebut, namun penjelasan tersebut masih perlu di tambah sesuai dengan kebutuhan anda, karena anda pasti lebih tau apa fungsi hapus itu, dan kenapa di butuhkan hapus, oke lah semuanya pasti mengerti dan pasti sudah pengen tau gimana Cara Membuat Delete Dengan Php Dan Mysql + Jquery baiklah berikut ini Menghapus Data Tanpa Loading/Merefresh Halaman dengan Jquery dan Ajax

2017-04-01_20h41_24

delete data disini dilengkapi dengan popup kompirmasi sebelum menghapus data, setelah kita klik tulisan Ya, maka data akan terhapus tanpa loading halaman, atau terhapus tanpa refresh halaman.

pertama kita buat dulu data basenya, buat database db_delete kemudian import/dump sql dibawah ini.

-- phpMyAdmin SQL Dump
-- version 3.3.9
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 01, 2017 at 03:51 PM
-- Server version: 5.5.8
-- PHP Version: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `db_delete`
--

-- --------------------------------------------------------

--
-- Table structure for table `mahasiswa`
--

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 for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim`, `nama_mhs`, `semester`, `password`, `jurusan`) VALUES
(1, '09.01.000', 'Php dan MySQL', 1, '25f9e794323b453885f5181f1b624d0b', 'Sistem Informasi	 '),
(2, '09.01.001', 'Delete Data Pakai JQuery', 2, '25f9e794323b453885f5181f1b624d0b', 'Sistem Komputer'),
(3, '09.01.002', 'Tutorial Mysql', 1, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika'),
(4, '09.01.003', 'Phpdanmysql.com', 5, '25f9e794323b453885f5181f1b624d0b', 'Teknik Informatika');

oh ya tutorial hapus ini sudah pernah saya gunakan di sebuah program data guru yang saya buat dengan php dan mysql, dan berjalan Work tanpa error

nah setelah selesai membuat database sesuai diatas maka selanjutnya silakan buat sebuah folder di webserver komputer anda, nama foldernya jquery_delete dan selanjutnya salin script berikut ini dan simpan dengan nama index.php

<html>
<head>
<title>Menghapus Data Tanpa Loading Halaman dengan Jquery dan Ajax</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.1.custom.min.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" charset="utf-8">
		
            $(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');
                });
            });
		</script>
</head>
<body>
<br>
<table border="1" align="center" bgcolor="#009999">
  <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("db_delete");
  
  $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"> Anda Yakin? Ingin Menghapus Data Ini. PhpdanMySQL.Com</div>
</body>
</html>

silakan sesuaikan koneksinya dengan koneksi database kawan-kawan semua.

selanjutnya silakan di salin script php berikut dan simpan dengan nama delete.php

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

sesuaikan koneksinya dengan database sobat.

nah dalam hal ini kita sudah selesai membuat script hapus dengan php dan mysql dengan Jquery, namun kita belum bisa melihat effeck dari jquery karena script jquerynya belum kita buat, nah untuk script jquery-nya lihat dibawah ini.

buat file jquery-1.8.3.min.js kemudian simpan script java script dibawah ini kedalam foldernya.

jquery-1.8.3.min

jquery-ui-1.9.1.custom.min

jquery-ui-1.9.1.custom.min

oh ya tutorial hapus dengan php dan mysql ini cukup keren bagi saya setelah kita menghapus suatu data maka kita bisa melihat effect dari jquery tersebut.

sekian tutorial kali ini tentang Cara Membuat Delete Dengan Php Dan Mysql + Jquery tanpa Loading atau refresh.

semoga bermanfaat dan salam.

Keyword:

  • membuat fungsi hapus di php dengan jQuery
  • Membuat jquery hapus data pada php

Get real time updates directly on you device, subscribe now.

loading...
1 Comment
  1. […] sebelumnya saya membuat Cara Hapus Data Dengan Php dan Mysql maka sekarang kita beralih ke Sistem Informasi Absensi Online Dengan Php dan MySQL, jujur saja ini […]

Ingin Berkomentar?

×
Lewat ke baris perkakas