Membuat crud dengan modal bootstrap php

CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tips, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7
link : CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7

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

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.

Membuat crud dengan modal bootstrap php

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

Membuat crud dengan modal bootstrap php

Edit Data

Membuat crud dengan modal bootstrap php

Delete Data

Membuat crud dengan modal bootstrap php

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 dari link dibawah ini.


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

Sekianlah artikel CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap (popup) dan Ajax di PHP 7 dengan alamat link https://dev-create.blogspot.com/2019/06/crud-create-read-update-delete-data.html