CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootsrap (popup) dan Ajax di PHP 7

Asslmualaikum Warahmatullahi Wabarakatu
Bismilahirrahmanirrahiim

Crud (Create, Read, Update, dan Delete) adalah kebutuhan sebuah aplikasi web yang dinamis untuk mengolah data, dengan membuat crud menggunakan modal bootstrap akan memperindah tampilan halaman CRUD dan memberikan UX yang lebih user friendly, disini saya akan membahas bagaimana cara membuat CRUD Dengan Modal Bootstrap yang mungkin menjadi kebutuhan dan solusi dari permasalahan yang sobat hadapi, oke langsung saja ….
Sebelum kita memulai saya akan memberikan screen dari popup edit data menggunakan modal bootstrap, seperti gambar dibawah ini.

Tampilan diatas lebih menarik bukan?, dibandingkan kita mengedit data dengan tampilan standart.

Langkah Pertama
Dowload bootstrap disini , dan download jquery disini

Langkah Kedua
Extract file bootstrap dan jquery yang sobat download kedalam root aplikasi sobat, root aplikasi saya di c:\xampp\htdocs\php7\modal, sesuaikan dengan folder root yang sobat miliki.

Langkah Ketiga
Sobat buat database, database milik saya namanya dbphp7 kalau sobat terserah mau buat apa namanya, dan buat tabel dengan nama modal

<!--

CREATE TABLE `modal` (

  `modal_id` int(11) NOT NULL AUTO_INCREMENT,

  `modal_name` varchar(255) DEFAULT NULL,

  `description` text,

  `date` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,

  PRIMARY KEY (`modal_id`)

) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;

-->

Langkah Keempat
Setelah ketiga langka diatas sobat lakukan, ketiklah kode dibawah ini, simpan dengan nama, index.php

<!--

<!doctype html>

<html lang="en">

<head>

<title>Aguzrybudy.com | Crud Menggunakan Modal Bootstrap (popup)</title>

<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>

<meta content="Aguzrybudy" name="author"/>

<link href="css/bootstrap.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">  <h2>Crud PHP 7 Menggunakan Modal Bootstrap (Popup)</h2><p>Bootstrap Modal  (Popup) By Aguzrybudy, Selasa 19 April 2016</p><p><a href="#" class="btn btn-success" data-target="#ModalAdd" data-toggle="modal">Add Data</a></p><table id="mytable" class="table table-bordered"><thead>       <th>No</th>       <th>Name</th>       <th>Description</th>       <th>Action</th>     </thead> <?php 

  include "koneksi.php";

  $no = 0;

  $modal=mysqli_query($koneksi,"SELECT * FROM modal");

  while($r=mysqli_fetch_array($modal)){

  $no++;

?>

<tr>       <td><?php echo $no; ?></td>       <td><?php echo  $r['modal_name']; ?></td>       <td><?php echo  $r['description']; ?></td>       <td>

<a href="#" class='open_modal' id='<?php echo  $r['modal_id']; ?>'>Edit</a>

<a href="#" onclick="confirm_modal('proses_delete.php?&modal_id=<?php echo  $r['modal_id']; ?>');">Delete</a>

</td>   </tr>

<?php } ?> </table></div><script type="text/javascript">

   $(document).ready(function () {

   $(".open_modal").click(function(e) {

      var m = $(this).attr("id");

     $.ajax({

          url: "modal_edit.php",

          type: "GET",

          data : {modal_id: m,},

          success: function (ajaxData){

            $("#ModalEdit").html(ajaxData);

            $("#ModalEdit").modal('show',{backdrop: 'true'});

           }

         });

        });

      });

</script>

<script type="text/javascript">

    function confirm_modal(delete_url)

    {

      $('#modal_delete').modal('show', {backdrop: 'static'});

      document.getElementById('delete_link').setAttribute('href' , delete_url);

    }

</script>

</body>

</html>

-->

Langkah Kelima
Buat file dengan nama modal_edit.php :

<!--

<?php

    include "koneksi.php";

 $modal_id=$_GET['modal_id'];

 $modal=mysqli_query($koneksi,"SELECT * FROM modal WHERE modal_id='$modal_id'");

 while($r=mysqli_fetch_array($modal)){

?>

-->

Langkah Keenam
Buat koneksi dabatase mysqli, simpan dengan nama koneksi.php

<!--

<?php

$host="localhost";

$user="root";

$pass="";

$database="dbphp7";

$koneksi=new mysqli($host,$user,$pass,$database);

if (mysqli_connect_errno()) {

   trigger_error('Koneksi ke database gagal: '  . mysqli_connect_error(), E_USER_ERROR); 

 }

?>

-->

Langkah Ketujuh
Buat proses simpan data dengan nama proses_save.php

<!--

<?php

include "koneksi.php";

$modal_name = $_POST['modal_name'];

$description = $_POST['description'];

mysqli_query($koneksi,"INSERT INTO modal (modal_name,description) VALUES ('$modal_name','$description')");

header('location:index.php');

?>

-->

Langkah Kedelapan
Buat proses edit data dengan nama proses_edit.php

<!--

<?php

include "koneksi.php";

$modal_id=$_POST['modal_id'];

$modal_name = $_POST['modal_name'];

$description = $_POST['description'];

$modal=mysqli_query($koneksi,"UPDATE modal SET modal_name = '$modal_name',description = '$description' WHERE modal_id = '$modal_id'");

 header('location:index.php');

?>

-->

Langkah Kesembilan
Buat proses delete data dengan nama proses_delete.php

<!-- 

<?php

include "koneksi.php";

$modal_id=$_GET['modal_id'];

$modal=mysqli_query($koneksi,"Delete FROM modal WHERE modal_id='$modal_id'");

header('location:index.php');

?>

-->

Langkah Kesepuluh
Silahkan sobat test program yang sobat buat, jika berhasil maka indexnya akan muncul seperti gambar dibawah ini .

Add Data

Edit Data

Delete Data

NB : Sobat harus download code dari link yang sudah saya siapkan dibawah ini, karena kode diatas tidak lengkap.

Code diatas saya tulis menggunakan PHP 7.
sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file PDF -NYA download disini dan jika sobat ingin code dari aplikasi diatas download disini.

Source : http://aguzrybudy.blogspot.co.id/2016/04/cara-membuat-crud-simpan-baca-edit_21.html