[TUTORIAL] Delete data MySQL dengan Bootstrap Confirm Modal AJAX jQuery

Hello World!

Di postingan kali ini saya akan buat tutorial bagaimana menghapus data dari data base mysql dengan ajax jquery dan bootstrap confirm modal. Di tutorial ini kita membutuhkan file bootstrap, jquery dan bootbox jquery plugin yang harus teman-teman download terlebih dahulu disini.
Setelah selesai didownload, ekstrak dan copy kan di folder project teman-teman.

Oke kita mulai.

Pertama, kita buat sebuah database terlebih dahulu dengan nama ajax-jquery-php lalu membuat table tbl_product.

CREATE TABLE IF NOT EXISTS `tbl_products` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(35) NOT NULL,
  PRIMARY KEY (`product_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

Selanjutnya kita dumping data ke table tersebut. copy sql berikut

INSERT INTO `tbl_products` (`product_id`, `product_name`) VALUES
(1, 'Galaxy Jmax'),
(2, 'Killer Note5'),
(3, 'Asus ZenFone2'),
(4, 'Moto Xplay'),
(5, 'Lenovo Vibe k5 Plus'),
(6, 'Redme Note 3'),
(7, 'LeEco Le 2'),
(8, 'Apple iPhone 6S Plus');

Setelah itu sebuah file php dengan nama dbconfig.php untuk konfigurasi database.

<?php
	
	$DBhost = "localhost";
	$DBuser = "root";
	$DBpass = "";
	$DBname = "ajax-jquery-php";
	
	try{
		
		$DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
		$DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
		
	}catch(PDOException $ex){
		
		die($ex->getMessage());
	}

Langkah selanjutnya adalah membuat sebuah file dengan nama index.php yang didalamnya berisi kode untuk menampilkan daftar data yang ada di database. Isinya seperti berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Delete Data MySQL dengan BootStrap Confirm Modal


</head>
<body>

    


Delete Data MySQL dengan BootStrap Confirm Modal

<tr>
            	<th>#ID</th>
                <th>Product Name</th>
                <th>Action</th>
                </tr>
            
            
            <?php
			require_once 'dbconfig.php';
			$query = "SELECT product_id, product_name FROM tbl_products";
			$stmt = $DBcon->prepare( $query );
			$stmt->execute();
			while ($row=$stmt->fetch(PDO::FETCH_ASSOC) ) {
				extract($row);
				?>
                
                <?php
			}
			?>
            
        
        

                <?php echo $product_id; ?>
                <?php echo $product_name; ?>
                
                
                
                


</body>
</html>

Lalu masukan kode ajax jquery berikut tepat diatas tag </body>

Buat sebuah file lagi dengan nama delete.php yang berguna sebagai target dari ajax.

<?php

	require_once 'dbconfig.php';
	
	if ($_REQUEST['delete']) {
		
		$pid = $_REQUEST['delete'];
		$query = "DELETE FROM tbl_products WHERE product_id=:pid";
		$stmt = $DBcon->prepare( $query );
		$stmt->execute(array(':pid'=>$pid));
		
		if ($stmt) {
			echo "Product Deleted Successfully ...";
		}
		
	}

Setelah itu silakan di tes dan Viola Done!
Jika ada error atau pertanyaan silakan tinggalkan komentar atau download projectnya disini