Hosting Unlimited Indonesia

Recent Comment

Navigation

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

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

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

Untuk PHP 7
Untuk PHP 5
Untuk Datatables

Share
Hosting Unlimited Indonesia

agus ribudi

Programmer, Web Developer, Android Developer and Blogger

Post A Comment:

115 comments:

  1. Bikin tutorial CRUD ajax nya pakai insert gambar juga pakai CKEDITOR dong master, biar gak mainstrem..

    ReplyDelete
    Replies
    1. Beres tunggu aja mas.... masih banyak tutorial menarik lainnya yang akan saya bagikan

      Delete
    2. Mas bisa kirim ke email sy gak ya. sya download tapi gak bisa2. thx mas
      mohamad.yusuf251014@gmail.com

      Delete
    3. belum ada email masuk mas. coba cek lagi email sy. takut salah, hehe
      mohamad.yusuf251014@gmail.com

      Delete
    4. email siapa yg salah mas? itu email sy sudah benar mas, tapi kok belum ada email masuk dari mas nya ya , hehe.

      Delete
  2. kok formatnya exe gan ? kedetek virus pula ;-(

    ReplyDelete
    Replies
    1. gak exe mas downloadnya dari link yanda ada dibawah bacaanya direct download link bukan download yang diatas mas [-(

      Delete
    2. iya gan link donlod yang di atas ga bisa di klik masa ;-( bole minta tolong reuplod di hosting yang lain mas. hehe buat belajar nih saya :P atau mungkin bisa di kirim via email mas,, terima kasih banyak mas agus sebelumnya :D

      Delete
  3. mas kalo php 4 atau php jalan ga mas?

    ReplyDelete
  4. jalan mas .... tinggal ganti koneksi ... sama querynya aja mass .....

    ReplyDelete
  5. mas saya rubah jadi menggunakan data tabel tpi bagian edit dan delete nya jadi tidak berfungsi. mohon bantuannya

    ReplyDelete
    Replies
    1. oke mas, emang gimana kode yang mas buat kok gak jalan? :-?

      Delete
    2. wah sama nih.. pas klik bagian " EDIT " Gak jalan.. ane cuman ngambil bagian edit nya aja.

      Gimsns ysh doludinys ? makasih
      btw ini code nae. salah dimana yah ?

      tolong bantu min. ini kode nya :
      http://pastebin.com/p7t80x9r

      Delete
    3. wah sama nih.. pas klik bagian " EDIT " Gak jalan.. ane cuman ngambil bagian edit nya aja.

      Gimsns ysh doludinys ? makasih
      btw ini code nae. salah dimana yah ?

      tolong bantu min. ini kode nya :
      http://pastebin.com/p7t80x9r

      Delete
    4. maaf mas baru di bales, mas saya boleh minta kode lengkapnya gak mas, bisa kirim kodenya kesini mas aguzrybudy@ymail.com, biar saya benerin ntar saya kirim balek ke mas.
      #kalau mas gak keberatan.

      Delete
  6. kalo cuma mau nampilin detail nya aja gimana yaa??

    ReplyDelete
  7. kalo cuma mau nampilin detail nya aja gimana yaa??

    ReplyDelete
  8. mas boleh minta bantuan gak saya masih gak bisa edit modalnya

    ReplyDelete
  9. Boleh, apa yang bisa saya bantu mas?

    ReplyDelete
  10. kak kok di dalam zip gak ada psswd nya yah?

    ReplyDelete
  11. kak kok di dalam zipnya gak ada psswd nya yah?

    ReplyDelete
    Replies
    1. kalau gak ada passwordnya massukkan aja ini passwordnya aguzrybudy.blogspot.co.id

      Delete
  12. mas kalau saya mau buat ngaktifin edit pake link edit.php bisa gak mas

    ReplyDelete
  13. modal tambah + modal deletenya bisa keluar mas.
    tp modal editnya gak bisa keluar, itu gmna ya mas ?
    mhon bantuannya

    ReplyDelete
    Replies
    1. coba perikas id pemanggilan modalnya mas, atau kalau mas mau perlihatkan kodenya ma di kotak koment.

      Delete
  14. kalau versi PHP nya PHP 5.4 bisa nggak ya mas? sudah saya coba kok nggak bisa, :D

    ReplyDelete
    Replies
    1. Bisa mas, nanti linknya saya kirim ke email emas kalau sudah saya buat untuk php versi 5.4 :)

      Delete
  15. Assalamualaikum :) Edit nya kok gabisa yaaa? error nya : Notice: Undefined index: id_siswa in C:\xampp\htdocs\modal\modal_edit.php on line 8 mohon bantu saya, terimakasih :)

    ReplyDelete
    Replies
    1. Gajadi deh udah bisa hehe :D makasih banyak yaaaaa hihi

      Delete
  16. salam kenal
    menurut mas bagaimana klo edit datanya menggunakan 2 kondisi. misalnya modal_id dan tanggal.
    saya coba dgn modal_id sdh bisa tampil data dan mengeditnya dan menyimpannya. lalu saya ingin di < href="#"> ada 2 kondisi yaitu id= dan tgl=..terima kasih atas solusinya

    ReplyDelete
    Replies
    1. iya salam kenal kembali,
      sebelumnya saya minta maaf mas, kalau menggunakan dua kondisi saya belum tau mas karena id hanya bisa satu kali dipakek mas, gak bisa dua kali, nanti kalau saya sudah ketemu caranya saya bakalan kasih mas, terimakasih mas sudah berkomentar

      Delete
    2. ok sama2..terima kasih share ilmunya

      Delete
    3. @mas Agus Ribudi: ditagih request nya Agus Aulia K yg menggunakan CKEDITOR ya.

      Delete
    4. @Dody H: urun rembug aja, untuk edit data dgn 2 kondisi bisa ditambahkan variabel nya spt ini:
      ...
      var m = $(this).attr("id");
      var t = $(this).attr("tgl");
      $.ajax({
      url: "modal_edit.php",
      type: "GET",
      data : {modal_id: m, tanggal: t,},
      ..dst

      dan nilai variabel tgl disertakan di link edit nya:
      id='' tgl=''

      asumsi: $r['tgl']; --> pastikan di tabelnya ada field tgl

      monggo dikoreksi kalau ada kesalahan. Maklum newbie.

      Delete
    5. Oke mas, saya akan posting pada postingan selanjutnya, full crud menggunakan ckeditor di php 7, thanks.

      keren mas komennya Dayat's Blog:)

      Delete
    6. ya mas agus kalau 2 kondisi bagaimana ya :)

      Delete
    7. This comment has been removed by the author.

      Delete
    8. oh sudah bisa mas hehehe,
      untuk 2 kondisi atau lebih saya gunakan saran mas dayat,

      thx mas agus n mas dayat,
      oiya mas agus kalau ada lanjutan tutor bab crud ini mungkin bisa ditambahkan tutor search, paging dan printnya :D

      Delete
  17. mas kalau function update tidak muncul itu dikarenakan apa nya ya?
    query di file modal_edit mempengaruhi gag soalnya saya udah mirip seperti coding mas hanya saya ubah query dan form edit di file modal_edit saya tambahin query untuk tampilkan jabatan berupa list view dan jenis kelamin berupa check box?
    mohon pencerahannya mas baru belajar modal.

    ReplyDelete
    Replies
    1. maaf mas udah clear ternyata id nya salah
      terimakasih

      Delete
  18. mas, kok setelah edit dan konfirmasi halaman tidak mau redirect ya ?
    datanya berhasil diupdate, namun harus refresh manual agar data baru tsb muncuk di browser

    ReplyDelete
  19. editnya gak berhasil tapi gk ada eror cuman gk mau ganti , tapi delete berhasil knp yah

    ReplyDelete
  20. Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

    ReplyDelete
  21. gan, kenapa gak bisa didownload. Mohon bantuannya ...

    ReplyDelete
    Replies
    1. Maaf gan linknya ternyata salah, sudah saya perbaiki jika ada masalah lagi silahkan tanya kembali, thanks.

      Delete
    2. kalau susah downloadnya dari sana, agan bisa kasih email agan ke saya biar saya kirim kodenya

      Delete
    3. ini gan, ikbal569@gmail.com, terimakasih sebelumnya gan...

      Delete
  22. GAN, ANE proses updatenya kok g bisa ya:D mohon bantuannya.

    ReplyDelete
    Replies
    1. Kode yang agan gunakan gimana?, biar coba dibantu cek

      Delete
  23. Gan saya tidak bisa download ? bisakah dikirim file diatas via email saya :D newbiebandit@gmail.com

    ReplyDelete
  24. link adfly nya tidak bisa mas. jika berkenan, mohon kirim ke email widodo024@gmail.com
    trims ;)

    ReplyDelete
  25. edit dan delete gak bisa tolong bantuannya

    ReplyDelete
    Replies
    1. yang mas buat codenya gimana mas, bisa kasih lihat?

      Delete
  26. mas bisa kirim ke email saya buat refrensi .
    diditramadhan77@gmail.com

    ReplyDelete
  27. mas bisa kirim ke email saya buat refrensi .
    diditramadhan77@gmail.com

    ReplyDelete
  28. Mas link nya bisa dibuka tapi adf ly nya ga jalan, saya ingin melihat yang PHP5 mas.
    Bisa kirimkan ke noval.ahda@gmail.com
    Terimakasih mas

    ReplyDelete
  29. terima kasih mas tutorialnya sangat membantu ^-^

    ReplyDelete
  30. link nya nggak bisa dibuka kak, bisa dikirimkan ke email adikomang20@gmail.com terima kasih kak :)

    ReplyDelete
    Replies
    1. oh iya minta yang versi php5 nya kak sorry ngerepotin ty

      Delete
  31. bisa kirim ke email saya gak febritriakbar@gmail.com terimakasih bnyak sebelumnya

    ReplyDelete
  32. Maaf mas jika tidak keberatan bisa kirim ke email fendraps@gmail.com,
    soal nya link nya tidak kebuka.
    terima kasih.

    ReplyDelete
  33. mas bisa kirim ke email saya :).
    potecelleng@gmail.com

    ReplyDelete
  34. Untuk semua yang minta code popup modal bootstrap sudah saya kirim ke Email, silahkan di cek

    ReplyDelete
  35. Link adfly gak bisa, minta kodenya mas. uptdsurabaya5@gmail.com

    ReplyDelete
  36. password filenya apa yah mas ? kalo boleh minta tolong kirimin codenya ke hadypratamaa4@gmail.com buat belajar soalnya.

    terimakasih :D

    ReplyDelete
  37. om kirim ke email saya om...

    zkydroid@gmail.com

    ReplyDelete
    Replies
    1. Mas boleh minta script nya mas makasih nya om muhamad.septian91@yahoo.com

      Delete
  38. saya sangat berterima kasih kepada mas. saya sudah mencoba diberbagai website tutorial, web mas lah yang paling mudah dimengerti. terima kasih sekali lagi :)

    ReplyDelete
    Replies
    1. Sama sama mas, terima kasih kembali karena sudah berkungjung

      Delete
  39. oh ya mas, ane kebingungan sekarang.saya sudah mencoba menambahkan datatables pada CRUD diatas, namun permasalahan nya sekarang adalah fungsi edit dan hapus gak berfungsi. ada solusinya?

    ReplyDelete
    Replies
    1. Gimana mas kode yang digunakan, bisa ditunjukkan atau kirim ke email saya

      Delete
  40. asslamualaikum mas, kok gk bisa dikirim y mas...?
    kalau berkenan kirimkan ke email saya nataheru27@gmail.com

    ReplyDelete
  41. misi mas klo kek gini gmna ngatasinnya ?

    Warning: mysqli_query() expects parameter 1 to be mysqli, null given in /home/u500370561/public_html/home/adm/modal_edit.php on line 9

    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given in /home/u500370561/public_html/home/adm/modal_edit.php on line 10

    ReplyDelete
    Replies
    1. Mas saya bisa lihat codenya, beserta field database

      Delete
  42. mas, yang php 5nya kenapa modal editnya kalau ganti nama ga muncul ?
    contoh :
    modal_edit.php saya ganti jadi
    modal_edit_mhs.php padahal yg di indexnya semua linknya udah saya ganti
    mohon bantuannya mas
    terimakasih

    ReplyDelete
  43. linknya gabisa tolong kirim ke anony.m79@Yahoo.com

    ReplyDelete
  44. Gan ane mau tanya saat saya di implementasikan menggunakan datatable pas di halaman ke2 tidak tampil modal popupnya lagi gan. Gimana solusinya gan.
    Terima kasih

    ReplyDelete
    Replies
    1. Saya akan kasih contohnya untuk implementasi editnya menggunakan data tables, mohon ditunggu mas, nanti kalau dah beres saya buat link donwloadnya

      Delete
  45. ., mas, kalo mau kasih adsite, jgn pake adfly. susah kebuka.

    ReplyDelete
    Replies
    1. kalau gak kebuka silahkan komen e-mail aja, atau kirim request ke email saya biar saya kirim kodenya

      Delete
  46. maaf mau nanya...apakah bisa mengambil data dari datatables untuk ditampilkan di Modal Bootstrap? jadi saya mau menampilkan detail data dari datatables agar tampil di modal bootstrap..

    ReplyDelete
    Replies
    1. Bisa mas, diatas sudah ada contoh untuk data table mas, silahkan di download & di coba dulu mas

      Delete
  47. Mas ga bisa didownload ya filenya? kalo bisa kirim ke email rezarahmatullah@gmail.com
    terima kasih banyak mas

    ReplyDelete
    Replies
    1. Email salah mas, silahkan kirim email yang benar

      Delete
  48. mas kirim yg php 5 dong ke email ane : reza.up2u@gmail.com
    mau donlot susah via adfly gak kebuka linknya
    thanks

    ReplyDelete
  49. Makasih sebelumnya mas.. sangat membantu sekali.. BTW, password file RAR nya apa ya?

    ReplyDelete
  50. terimakasih ilmunya sangat bermanfaat

    ReplyDelete
  51. kok gagal terus ya donlodnya, link dari adflynya kayaknya ada yg salah deh mas
    bisa tolong kirim ke e-mail akbardawam1992@gmail.com
    makasih sebelumnya

    ReplyDelete
  52. data : {modal_id: m,},

    mas itu keterangannya apa aja bisa di jelasin ngga mas?, terimakasih
    lagi belajar ngoding juga ini

    ReplyDelete

Rekomendasi Untuk Anda × +