Tutorial

Silahkan Melihat Tutorial di website kami dengan nyaman ENJOY YOUR LIFE ☕

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

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

?
1
2
3
4
5
6
7
8
9
<!--
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!--
<!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 :

?
1
2
3
4
5
6
7
8
<!--
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
<!--
<?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


?
1
2
3
4
5
6
7
8
9
<!--
<?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


?
1
2
3
4
5
6
7
8
9
10
<!--
<?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

?
1
2
3
4
5
6
7
8
<!--
<?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




0 komentar:

Post a Comment

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