Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

PHP

Cara Membuat CRUD Plus Upload Gambar dengan PHP AJAX Bootstrap

img-responsive

Sesuai request dari beberapa teman-teman dari salah satu komunitas pemograman di media sosial. Saya akan coba menjelaskan step by step mengenai cara membuat CRUD (Create, Read, Update, Delete) plus Upload Gambar dengan menggunakan PHP, AJAX, Database MySQL, dan Bootstrap. Catatan ini adalah pengembangan dari catatan sebelumnya mengenai Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL.

Sebelum masuk ke materi utama, saya akan menjelaskan beberapa hal yang terkait dengan catatan ini yang saya ambil dari beberapa blog (URL Sumber blog saya beri di bawah catatan ini).

AJAX
Apa itu AJAX? AJAX adalah singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language – seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet. Belakangan ini, JSON (“JavaScript Object Notation”) lebih populer dan bisa dibaca – secara bawaan (native) – oleh JavaScript.

Bootstrap
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Perbedaan PDO dan MySQLi
Kenapa saya membahas ini? Karena pada catatan ini saya menggunakan PDO untuk melakukan koneksi dan query ke database MySQL nya. Berikut ini perbedaan keduanya yang saya ambil dari blog lain :

  1. PDO memiliki kelebihan yaitu mendukung 12 Jenis Database dengan script yang sama. Hanya sedikit perubahan query-nya. kekurangannya yaitu Hanya bisa digunakan dengan model Object Oriented.
  2. MySQLi memiliki kelebihan yaitu Mendukung penggunaan secara prosedural maupun Object Oriented. Kekuranganya yaitu Harus melakukan perubahan pada script dan query-nya jika akan menggunakan database selain MySQL.

DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – Persiapan
Berikut ini adalah hal-hal yang harus dipersiapkan :

  1. Download JQUERY, klik link berikut : Download.
  2. Download Bootstrap, klik link berikut : Download.
  3. Buat sebuah folder baru dengan nama crud_ajax, lalu simpan pada folder xampp/htdocs/.
  4. Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/crud_ajax/.
  5. Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/crud_ajax/.
  6. Buat sebuah folder dengan nama foto, lalu simpn pada folder xampp/htdocs/crud_ajax/. Folder ini nanti akan kita gunakan untuk menampung foto yang diupload oleh user.
  7. Esktrak file bootstrap.7z yang telah didownload tadi.
  8. Copy and paste folder fonts dari folder bootstrap yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/.
  9. Copy and paste file bootstrap.min.css dari folder bootstrap/css/ yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/css/.
  10. Copy and paste file bootstrap.min.js dari folder bootstrap/js/ yang telah diekstrak tadi ke folder xampp/htdocs/crud_ajax/js/.
  11. Copy and paste file jquery.min.js yang telah di download tadi ke folder xampp/htdocs/crud_ajax/js/.

STEP 2 – Database
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode.
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL

    CREATE TABLE IF NOT EXISTS `siswa` (  
      `nis` varchar(11) NOT NULL,  
      `nama` varchar(50) NOT NULL,  
      `jenis_kelamin` varchar(10) NOT NULL,  
      `telp` varchar(15) NOT NULL,  
      `alamat` text NOT NULL,  
      `foto` varchar(200) NOT NULL,  
      PRIMARY KEY (`nis`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

STEP 3 – Koneksi Database
Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/crud_ajax/. Berikut ini kodenya :

<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya

// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>

STEP 4 – View Data
Langkah selanjutnya adalah membuat 1 buah file yang berguna sebagai template utamanya. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut tampilan dan kodenya :

View Data - Cara Membuat CRUD Plus Upload Gambar dengan PHP AJAX Bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CRUD AJAX</title>

    <!-- Load File bootstrap.min.css yang ada difolder css -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .align-middle{
      vertical-align: middle !important;
    }
    </style>
  </head>
  <body>
    <!-- Membuat Menu Header / Navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" style="color: white;"><b>CRUD AJAX</b></a>
        </div>
        <p class="navbar-text navbar-right hidden-xs">
          <a href="https://www.mynotescode.com" style="color: white;" class="navbar-link">www.mynotescode.com</a>
        </p>
      </div>
    </nav>
    
    <div style="padding: 0 15px;">
      <button type="button" id="btn-tambah" data-toggle="modal" data-target="#form-modal" class="btn btn-success pull-right">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Tambah Data
      </button>
      <h2>Data Siswa</h2>	
      
      <div id="pesan-sukses" class="alert alert-success"></div>
      
      <!--
      -- Buat sebuah div dengan id="view" yang digunakan untuk menampung data 
      -- yang ada pada tabel siswa di database
      -->
      <div id="view"><?php include "view.php"; ?></div>
    </div>
    
    <!-- 
    -- Membuat sebuah tag div untuk Modal Dialog untuk Form Tambah dan Ubah
    -- Beri id "form-modal" untuk tag div tersebut
    -->
    <div id="form-modal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">
              <!-- Beri id "modal-title" untuk tag span pada judul modal -->
              <span id="modal-title"></span>
            </h4>
          </div>
          <div class="modal-body">
            <!-- Beri id "pesan-error" untuk menampung pesan error -->
            <div id="pesan-error" class="alert alert-danger"></div>
            
            <!-- Beri id "form" untuk tag form -->
            <form id="form">
              <!-- 
              -- Beri id untuk masing-masing form input
              -- textbox nis : id="nis"
              -- textbox nama : id="nama"
              -- combobox jenis kelamin : id="jenis_kelamin"
              -- textbox no.telepon : id="telp"
              -- textarea alamat : id="alamat"
              -- checkbox foto : id="checkbox_foto"
              -- input file foto : id="foto"
              -->
              <div class="form-group">
                <label>NIS</label>
                <input type="text" class="form-control" id="nis" name="nis" placeholder="NIS">
              </div>
              <div class="form-group">
                <label>Nama</label>
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Nama">
              </div>
              <div class="form-group">
                <label>Jenis Kelamin</label>
                <select id="jenis_kelamin" name="jenis_kelamin" class="form-control">
                  <option value="">Pilih</option>
                  <option value="Laki-laki">Laki-laki</option>
                  <option value="Perempuan">Perempuan</option>
                </select>
              </div>
              <div class="form-group">
                <label>No. Telepon</label>
                <input type="text" class="form-control" id="telp" name="telp" placeholder="No. Telepon">
              </div>
              <div class="form-group">
                <label>Alamat</label>
                <textarea class="form-control" id="alamat" name="alamat" placeholder="Alamat"></textarea>
              </div>
              <div class="form-group">
                <label>Foto</label>
                <div id="checkbox_foto">
                  <input type="checkbox" id="ubah_foto" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto
                </div>
                <input type="file" class="form-control" id="foto">
              </div>
              <button type="reset" id="btn-reset"></button>
            </form>
          </div>
          <div class="modal-footer">
            <!-- Beri id "loading-simpan" untuk loading ketika klik tombol simpan -->
            <div id="loading-simpan" class="pull-left">
              <b>Sedang menyimpan...</b>
            </div>
            
            <!-- Beri id "loading-ubah" untuk loading ketika klik tombol ubah -->
            <div id="loading-ubah" class="pull-left">
              <b>Sedang mengubah...</b>
            </div>
            
            <!-- Beri id "btn-simpan" untuk tombol simpan nya -->
            <button type="button" class="btn btn-primary" id="btn-simpan">Simpan</button>
            
            <!-- Beri id "btn-ubah" untuk tombol simpan nya -->
            <button type="button" class="btn btn-primary" id="btn-ubah">Ubah</button>
            
            <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 
    -- Membuat sebuah tag div untuk Modal Dialog untuk Form Tambah dan Ubah
    -- Beri id "form-modal" untuk tag div tersebut
    -->
    <div id="delete-modal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">
              Konfirmasi
            </h4>
          </div>
          <div class="modal-body">
            <!--
            -- Beri id "data-nis" untuk textbox nis yang digunakan untuk menampung
            -- data nis yang akan dihapus
            -->
            <input type="hidden" id="data-nis">
            
            Apakah anda yakin ingin menghapus data ini?
          </div>
          <div class="modal-footer">
            <!-- Beri id "loading-hapus" untuk loading ketika klik tombol hapus -->
            <div id="loading-hapus" class="pull-left">
              <b>Sedang meghapus...</b>
            </div>
            
            <!-- Beri id "btn-hapus" untuk tombol hapus nya -->
            <button type="button" class="btn btn-primary" id="btn-hapus">Ya</button>
            
            <button type="button" class="btn btn-default" data-dismiss="modal">Tidak</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Load File jquery.min.js yang ada difolder js -->
    <script src="js/jquery.min.js"></script>
    
    <!-- Load File bootstrap.min.js yang ada difolder js -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Load file ajax.js yang ada di folder js -->
    <script src="js/ajax.js"></script>
  </body>
</html>

Pada kode diatas, kita akan me-load librari / plugin yang dibutuh kan seperti Jquery dan Bootstrap. Dan kita juga me-load sebuah file ajax.js yang akan kita buat pada langkah selanjutnya. Selain itu kita juga membuat sebuah form yang disimpan didalam sebuah modal dialog. ketika user mengklik tombol Tambah Data atau Tombol Ikon Pencil (Edit data) maka modal dialog tersebut akan muncul. Lihat gambar dibawah ini :

Modal Dialog - Cara Membuat CRUD Plus Upload Gambar dengan PHP AJAX Bootstrap

Dalam bootstrap, struktur dasar untuk membuat sebuah modal adalah sebagai berikut :

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Untuk lebih jelasnya soal modal dialog di bootstrap, klik disini.

Selanjutnya pada kode index.php diatas, lihat kode pada baris ke 55. Disitu terdapat kode <?php include “view.php”; ?>, Kode tersebut berfungsi untuk me-load file view.php yang isinya adalah tabel yang menampung data dari hasil query ke tabel siswa di database. Sekarang kita akan coba buat file tersebut. Buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th class="text-center">NO</th>
      <th class="text-center">FOTO</th>
      <th>NIS</th>
      <th>NAMA</th>
      <th>JENIS KELAMIN</th>
      <th>TELP</th>
      <th>ALAMAT</th>
      <th colspan="2" class="text-center"><span class="glyphicon glyphicon-cog"></span></th>
    </tr>
    <?php
    // Include / load file koneksi.php
    include "koneksi.php";
    
    // Buat query untuk menampilkan semua data siswa
    $sql = $pdo->prepare("SELECT * FROM siswa");
    $sql->execute(); // Eksekusi querynya
    
    $no = 1; // Untuk penomoran tabel, di awal set dengan 1
    while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
    ?>
      <tr>
        <td class="align-middle text-center"><?php echo $no; ?></td>
        <td class="align-middle text-center">
          <img src="foto/<?php echo $data['foto']; ?>" width="80" height="80">
        </td>
        <td class="align-middle"><?php echo $data['nis']; ?></td>
        <td class="align-middle"><?php echo $data['nama']; ?></td>
        <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
        <td class="align-middle"><?php echo $data['telp']; ?></td>
        <td class="align-middle"><?php echo $data['alamat']; ?></td>
        <td class="align-middle text-center">
          <a href="javascript:void();" data-toggle="modal" data-target="#form-modal" onclick="edit(<?php echo $no; ?>);" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></a>
        </td>
        <td class="align-middle text-center">
          <a href="javascript:void();" data-toggle="modal" data-target="#delete-modal" onclick="hapus(<?php echo $no; ?>);" class="btn btn-danger"><span class="glyphicon glyphicon-erase"></span></a>
        </td>
      </tr>
      <!--
      -- Membuat sebuah textbox hidden yang akan digunakan untuk form ubah
      -->
      <input type="hidden" id="nis-value-<?php echo $no; ?>" value="<?php echo $data['nis']; ?>">
      <input type="hidden" id="nama-value-<?php echo $no; ?>" value="<?php echo $data['nama']; ?>">
      <input type="hidden" id="jeniskelamin-value-<?php echo $no; ?>" value="<?php echo $data['jenis_kelamin']; ?>">
      <input type="hidden" id="telp-value-<?php echo $no; ?>" value="<?php echo $data['telp']; ?>">
      <input type="hidden" id="alamat-value-<?php echo $no; ?>" value="<?php echo $data['alamat']; ?>">
    <?php
      $no++; // Tambah 1 setiap kali looping
    }
    ?>
  </table>
</div>

<script>
// Fungsi ini akan dipanggil ketika tombol edit diklik
function edit(no){
  $("#btn-simpan").hide(); // Sembunyikan tombol simpan
  $("#btn-ubah, #checkbox_foto").show(); // Munculkan tombol ubah dan checkbox foto
  
  // Set judul modal dialog menjadi Form Ubah Data
  $("#modal-title").html("Form Ubah data");
  
  var nis = $("#nis-value-" + no).val(); // Ambil nis dari input type hidden
  var nama = $("#nama-value-" + no).val(); // Ambil nama dari input type hidden
  var jeniskelamin = $("#jeniskelamin-value-" + no).val(); // Ambil jenis kelamin dari input type hidden
  var telp = $("#telp-value-" + no).val(); // Ambil telp dari input type hidden
  var alamat = $("#alamat-value-" + no).val(); // Ambil alamat dari input type hidden
  
  // Set value dari textbox nis yang ada di form
  // Set textbox nis menjadi Readonly
  $("#nis").val(nis).attr("readonly","readonly");
  
  $("#nama").val(nama); // Set value dari textbox nama yang ada di form
  $("#jenis_kelamin").val(jeniskelamin); // Set value dari textbox nama yang ada di form
  $("#telp").val(telp); // Set value dari textbox nama yang ada di form
  $("#alamat").val(alamat); // Set value dari textbox nama yang ada di form
  $("#foto").val("");
}

// Fungsi ini akan dipanggil ketika tombol hapus diklik
function hapus(no){
  var nis = $("#nis-value-" + no).val(); // Ambil nis dari input type hidden
  
  // Set textbox hidden nis yang ada di modal dialog hapus
  $("#data-nis").val(nis);
}
</script>

Saya akan coba jelaskan sedikit mengenai kode diatas.

include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.

$sql = $pdo->prepare(“SELECT * FROM siswa”);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada cotoh diatas, kita akan melakukan query untuk menampilkan semua data dari tabel siswa.

$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.

<td class="align-middle text-center"><?php echo $no; ?></td>
<td class="align-middle text-center">
  <img src="foto/<?php echo $data['foto']; ?>" width="80" height="80">
</td>
<td class="align-middle"><?php echo $data['nis']; ?></td>
<td class="align-middle"><?php echo $data['nama']; ?></td>
<td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
<td class="align-middle"><?php echo $data['telp']; ?></td>
<td class="align-middle"><?php echo $data['alamat']; ?></td>

Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.


STEP 5 – AJAX
Langkah selanjutnya adalah kita akan membuat kode AJAX untuk mengirim datanya ke file proses. Buat sebuah file dengan nama ajax.js, lalu simpan pada folder xampp/htdocs/crud_ajax/js/. Berikut kodenya :

$(document).ready(function(){
  // Sembunyikan loading simpan, loading ubah, loading hapus, pesan error, pesan sukes, dan tombol reset
  $("#loading-simpan, #loading-ubah, #loading-hapus, #pesan-error, #pesan-sukses, #btn-reset").hide();
  
  $("#btn-tambah").click(function(){ // Ketika tombol tambah diklik
    $("#btn-ubah, #checkbox_foto").hide(); // Sembunyikan tombol ubah dan checkbox foto
    $("#btn-simpan").show(); // Munculkan tombol simpan
    
    // Set judul modal dialog menjadi Form Simpan Data
    $("#modal-title").html("Form Simpan data");
  });
  
  $("#btn-simpan").click(function(){ // Ketika tombol simpan di klik
    // Buat variabel data untuk menampung data hasil input dari form
    var data = new FormData();
    
    data.append('nis', $("#nis").val()); // Ambil data nis
    data.append('nama', $("#nama").val()); // Ambil data nama
    data.append('jenis_kelamin', $("#jenis_kelamin").val()); // Ambil data jenis kelamin
    data.append('telp', $("#telp").val()); // Ambil data telepon
    data.append('alamat', $("#alamat").val()); // Ambil data alamat
    
    // Ambil data foto yang dipilih pada form, dan masukkan ke variabel data
    data.append('foto', $("#foto")[0].files[0]);
    
    $("#loading-simpan").show(); // Munculkan loading simpan
    
    $.ajax({
      url: 'proses_simpan.php', // File tujuan
      type: 'POST', // Tentukan type nya POST atau GET
      data: data, // Set data yang akan dikirim
      processData: false,
      contentType: false,
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        $("#loading-simpan").hide(); // Sembunyikan loading simpan
        
        if(response.status == "sukses"){ // Jika Statusnya = sukses
          // Ganti isi dari div view dengan view yang diambil dari proses_simpan.php
          $("#view").html(response.html);
          
          /*
           * Ambil pesan suksesnya dan set ke div pesan-sukses
           * Lalu munculkan div pesan-sukes nya
           * Setelah 10 detik, sembunyikan kembali pesan suksesnya
           */
          $("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
          
          $("#form input, #form select").val(""); // Untuk meng-clear isian pada form
          $("#form-modal").modal('hide'); // Close / Tutup Modal Dialog
        }else{ // Jika statusnya = gagal
          /*
           * Ambil pesan errornya dan set ke div pesan-error
           * Lalu munculkan div pesan-error nya
           */
          $("#pesan-error").html(response.pesan).show();
        }
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
        alert(xhr.responseText); // munculkan alert
      }
    });
  });
  
  $("#btn-ubah").click(function(){ // Ketika tombol ubah di klik
    // Buat variabel data untuk menampung data hasil input dari form
    var data = new FormData();
    
    data.append('nis', $("#nis").val()); // Ambil data nis
    data.append('nama', $("#nama").val()); // Ambil data nama
    data.append('jenis_kelamin', $("#jenis_kelamin").val()); // Ambil data jenis kelamin
    data.append('telp', $("#telp").val()); // Ambil data telepon
    data.append('alamat', $("#alamat").val()); // Ambil data alamat
    
    // Cek apakah checkbox ubah foto di ceklis
    if($("#ubah_foto").is(":checked")) // Jika di ceklis
      data.append('ubah_foto', $("#ubah_foto").val()); // Ambil data ubah foto (dari checkbox foto)
    
    // Ambil data foto yang dipilih pada form, dan masukkan ke variabel data
    data.append('foto', $("#foto")[0].files[0]);
    
    $("#loading-ubah").show(); // Munculkan loading ubah
    
    $.ajax({
      url: 'proses_ubah.php', // File tujuan
      type: 'POST', // Tentukan type nya POST atau GET
      data: data, // Set data yang akan dikirim
      processData: false,
      contentType: false,
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        $("#loading-ubah").hide(); // Sembunyikan loading ubah
        
        if(response.status == "sukses"){ // Jika Statusnya = sukses
          // Ganti isi dari div view dengan view yang diambil dari proses_ubah.php
          $("#view").html(response.html);
          
          /*
           * Ambil pesan suksesnya dan set ke div pesan-sukses
           * Lalu munculkan div pesan-sukes nya
           * Setelah 10 detik, sembunyikan kembali pesan suksesnya
           */
          $("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
          
          $("#form input, #form select").val(""); // Untuk meng-clear isian pada form
          $("#form-modal").modal('hide'); // Close / Tutup Modal Dialog
        }else{ // Jika statusnya = gagal
          /*
           * Ambil pesan errornya dan set ke div pesan-error
           * Lalu munculkan div pesan-error nya
           */
          $("#pesan-error").html(response.pesan).show();
        }
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
        alert(xhr.responseText); // Munculkan alert
      }
    });
  });
  
  $("#btn-hapus").click(function(){ // Ketika tombol hapus di klik
    // Buat variabel data untuk menampung data hasil input dari form
    var data = new FormData();
    data.append('nis', $("#data-nis").val()); // Ambil data nis
    
    $("#loading-hapus").show(); // Munculkan loading hapus
    
    $.ajax({
      url: 'proses_hapus.php', // File tujuan
      type: 'POST', // Tentukan type nya POST atau GET
      data: data, // Set data yang akan dikirim
      processData: false,
      contentType: false,
      dataType: "json",
      beforeSend: function(e) {
        if(e && e.overrideMimeType) {
          e.overrideMimeType("application/json;charset=UTF-8");
        }
      },
      success: function(response){ // Ketika proses pengiriman berhasil
        $("#loading-hapus").hide(); // Sembunyikan loading hapus
        
        // Ganti isi dari div view dengan view yang diambil dari proses_hapus.php
        $("#view").html(response.html);
        
        /*
         * Ambil pesan suksesnya dan set ke div pesan-sukses
         * Lalu munculkan div pesan-sukes nya
         * Setelah 10 detik, sembunyikan kembali pesan suksesnya
         */
        $("#pesan-sukses").html(response.pesan).fadeIn().delay(10000).fadeOut();
        
        $("#delete-modal").modal('hide'); // Close / Tutup Modal Dialog
      },
      error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
        alert("ERROR : "+xhr.responseText); // Munculkan alert
      }
    });
  });
  
  $('#form-modal').on('hidden.bs.modal', function (e){ // Ketika Modal Dialog di Close / tertutup
    $("#btn-reset").click(); // Klik tombol reset agar form kembali bersih
    $("#nis").removeAttr('readonly'); // Enable textbox nis
  });
});

Akan saya jelaskan sedikit mengenai ajax, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.

  • url : diisi dengan url file yang akan dituju
  • type :  diisi dengan method yang ingin digunakan. isi dengan GET atau POST
  • data : data yang akan dikirim ke file yang dituju
  • success : function(){} : ketika proses pengiriman selesai, lakukan aksi
  • error : function(){} : ketika terjadi error, lakukan aksi

untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini.


STEP 6 – Proses Simpan
Kita akan coba membuat file php untuk melakukan proses simpan ke databasenya. Buat sebuah file dengan nama proses_simpan.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :

<?php
// Include / load file koneksi.php
include "koneksi.php";

// Ambil data yang dikirim dari form
$nis = $_POST['nis']; // Ambil data nis dan masukkan ke variabel nis
$nama = $_POST['nama']; // Ambil data nama dan masukkan ke variabel nama
$jenis_kelamin = $_POST['jenis_kelamin']; // Ambil data jenis_kelamin dan masukkan ke variabel jenis_kelamin
$telp = $_POST['telp']; // Ambil data telp dan masukkan ke variabel telp
$alamat = $_POST['alamat']; // Ambil data alamat dan masukkan ke variabel alamat
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];

// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;

// Set path folder tempat menyimpan fotonya
$path = "foto/".$fotobaru;

// Proses upload
// Cek apakah gambar berhasil diupload atau tidak
if(move_uploaded_file($tmp, $path)){ // Jika proses upload sukses
  // Proses simpan ke Database
  $sql = $pdo->prepare("INSERT INTO siswa VALUES(:nis,:nama,:jk,:telp,:alamat,:foto)");
  $sql->bindParam(':nis', $nis);
  $sql->bindParam(':nama', $nama);
  $sql->bindParam(':jk', $jenis_kelamin);
  $sql->bindParam(':telp', $telp);
  $sql->bindParam(':alamat', $alamat);
  $sql->bindParam(':foto', $fotobaru);
  $sql->execute(); // Eksekusi query insert
  
  // Load ulang view.php agar data yang baru bisa muncul di tabel pada view.php
  ob_start();
  include "view.php";
  $html = ob_get_contents();
  ob_end_clean();
  
  // Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
  $response = array(
    'status'=>'sukses', // Set status
    'pesan'=>'Data berhasil disimpan', // Set pesan
    'html'=>$html // Set html
  );
}else{ // Jika proses upload gagal
  $response = array(
    'status'=>'gagal', // Set status
    'pesan'=>'Gambar gagal untuk diupload', // Set pesan
  );
}

echo json_encode($response); // konversi variabel response menjadi JSON
?>

Berikut beberapa penjelasan dari kode diatas.

$nis = $_POST[‘nis‘];
$nama = $_POST[‘nama‘];
$jenis_kelamin = $_POST[‘jenis_kelamin‘];
$telp = $_POST[‘telp‘];
$alamat = $_POST[‘alamat‘];
$foto = $_FILES[‘foto‘][‘name’];
$tmp = $_FILES[‘foto‘][‘tmp_name’];
Pada kode tersebut, ada kode yang saya beri warna merah. Itu harus sama dengan kode (pada file ajax.js) yang saya beri warna hijau berikut ini:
data.append(‘nis‘, $(“#nis”).val());
data.append(‘nama‘, $(“#nama”).val());ta nama
data.append(‘jenis_kelamin‘, $(“#jenis_kelamin”).val());
data.append(‘telp‘, $(“#telp”).val());
data.append(‘alamat‘, $(“#alamat”).val());
data.append(‘foto‘, $(“#foto”)[0].files[0]);

$_FILES[‘foto’][‘name’]
Kode ini berfungsi untuk mengambil nama file yang diupload.

$_FILES[‘foto’][‘tmp_name’]
Kode ini berfungsi untuk mengambil url/path folder tempat penyimpanan sementara file yang diupload, sebelum dipindahkan ke folder foto.

move_uploaded_file($tmp_file, $path)
kode inilah yang berfungsi untuk memindahkan foto / file yang telah diupload dari folder tmp ke dalam folder di website kita (pada catatan ini kita upload gambarnya ke folder foto).


STEP 7 – Proses Ubah
Selanjutnya kita akan membuat sebuah file untuk melakukan proses ubah ke database. Buat sebuah file baru dengan nama prose_ubah.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :

<?php
// Include / load file koneksi.php
include "koneksi.php";

// Ambil data yang dikirim dari form
$nis = $_POST['nis']; // Ambil data nis dan masukkan ke variabel nis
$nama = $_POST['nama']; // Ambil data nama dan masukkan ke variabel nama
$jenis_kelamin = $_POST['jenis_kelamin']; // Ambil data jenis_kelamin dan masukkan ke variabel jenis_kelamin
$telp = $_POST['telp']; // Ambil data telp dan masukkan ke variabel telp
$alamat = $_POST['alamat']; // Ambil data alamat dan masukkan ke variabel alamat

// Cek apakah user ingin mengubah fotonya atau tidak
if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada di form ubah, lakukan :
  // Ambil data foto yang dipilih dari form
  $foto = $_FILES['foto']['name'];
  $tmp = $_FILES['foto']['tmp_name'];
  
  // Rename nama fotonya dengan menambahkan tanggal dan jam upload
  $fotobaru = date('dmYHis').$foto;
  
  // Set path folder tempat menyimpan fotonya
  $path = "foto/".$fotobaru;

  // Proses upload
  // Cek apakah gambar berhasil diupload atau tidak
  if(move_uploaded_file($tmp, $path)){ // Jika proses upload sukses
    // Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
    $sqlcek = $pdo->prepare("SELECT * FROM siswa WHERE nis=:nis");
    $sqlcek->bindParam(':nis', $nis);
    $sqlcek->execute(); // Eksekusi / Jalankan query
    $data = $sqlcek->fetch(); // Ambil data dari hasil eksekusi $sqlcek
    
    // Cek apakah file foto sebelumnya ada di folder foto
    if(is_file("foto/".$data['foto'])) // Jika foto ada
      unlink("foto/".$data['foto']); // Hapus file foto sebelumnya yang ada di folder foto
    
    // Proses ubah ke Database
    $sql = $pdo->prepare("UPDATE siswa SET nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat, foto=:foto WHERE nis=:nis");
    $sql->bindParam(':nama', $nama);
    $sql->bindParam(':jk', $jenis_kelamin);
    $sql->bindParam(':telp', $telp);
    $sql->bindParam(':alamat', $alamat);
    $sql->bindParam(':foto', $fotobaru);
    $sql->bindParam(':nis', $nis);
    $sql->execute(); // Eksekusi query insert
    
    // Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
    ob_start();
    include "view.php";
    $html = ob_get_contents();
    ob_end_clean();
    
    // Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
    $response = array(
      'status'=>'sukses', // Set status
      'pesan'=>'Data berhasil diubah', // Set pesan
      'html'=>$html // Set html
    );
  }else{ // Jika proses upload gagal
    $response = array(
      'status'=>'gagal', // Set status
      'pesan'=>'Gambar gagal untuk diupload', // Set pesan
    );
  }
}else{ // Jika user tidak menceklis checkbox yang ada di form, lakukan :
  // Proses ubah ke Database
  $sql = $pdo->prepare("UPDATE siswa SET nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat WHERE nis=:nis");
  $sql->bindParam(':nama', $nama);
  $sql->bindParam(':jk', $jenis_kelamin);
  $sql->bindParam(':telp', $telp);
  $sql->bindParam(':alamat', $alamat);
  $sql->bindParam(':nis', $nis);
  $sql->execute(); // Eksekusi query insert
  
  // Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
  ob_start();
  include "view.php";
  $html = ob_get_contents();
  ob_end_clean();
  
  // Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
  $response = array(
    'status'=>'sukses', // Set status
    'pesan'=>'Data berhasil diubah', // Set pesan
    'html'=>$html // Set html
  );
}

echo json_encode($response); // konversi variabel response menjadi JSON
?>

 

Saya akan coba jelaskan sedikit mengenai alur ubah data nya. Pertama, ketika user mengklik link Edit pada salah satu data siswa, maka kode javascript yang ada di file view.php yaitu function edit($no) akan dipanggil. Fungsi tersebut berguna untuk menset textbox yang ada di form ubah mulai dari nis, nama, jenis kelamin, telepon, dan alamat sesuai dengan data yang ingin dia ubah. Kedua, pada proses ubah ini kita membuat sebuah checkbox pada form ubah yang akan digunakan agar sistem bisa mengetahui apakah user ingin mengubah fotonya juga atau tidak. Maka dari itu pada file proses_ubah.php dilakukan validasi untuk mengecek apakah user menceklis checkbox tersebut atau tidak. Jika user menceklis checkbox tersebut, maka sistem akan mengupload foto baru sesuai yang dipilih oleh user kemudian akan menghapus foto lama yang ada pada folder foto. Jika user tidak menceklis, maka sistem hanya akan mengubah data selain foto.


STEP 8 – Proses Hapus
Terakhir, kita akan membuat proses hapusnya. Buat sebuah file baru dengan nama proses_hapus.php, lalu simpan pada folder xampp/htdocs/crud_ajax/. Berikut kodenya :

<?php
// Load file koneksi.php
include "koneksi.php";

// Ambil data NIS
$nis = $_POST['nis'];

$sqlcek = $pdo->prepare("SELECT * FROM siswa WHERE nis=:nis");
$sqlcek->bindParam(':nis', $nis);
$sqlcek->execute(); // Eksekusi / Jalankan query
$data = $sqlcek->fetch(); // Ambil data dari hasil eksekusi $sqlcek

// Cek apakah file fotonya ada di folder foto
if(is_file("foto/".$data['foto'])) // Jika foto ada
  unlink("foto/".$data['foto']); // Hapus file fotonya yang ada di folder foto

// Query untuk menghapus data siswa berdasarkan NIS yang dikirim
$sql = $pdo->prepare("DELETE FROM siswa WHERE nis=:nis");
$sql->bindParam(':nis', $nis);
$sql->execute(); // Eksekusi/Jalankan query

// Load ulang view.php agar data diubah tadi bisa terubah di tabel pada view.php
ob_start();
include "view.php";
$html = ob_get_contents();
ob_end_clean();

// Buat variabel reponse yang nantinya akan diambil pada proses ajax ketika sukses
$response = array(
  'pesan'=>'Data berhasil dihapus', // Set pesan
  'html'=>$html // Set html
);
echo json_encode($response); // konversi variabel response menjadi JSON
?>

Source Code
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini

Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ing ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Terimakasih.

Sumber & Referensi
Dokumentasi Bootstrap : http://getbootstrap.com/getting-started/
http://ekajogja.com/mengenal-javascript-ajax-jquery-angularjs-dan-node-js/
http://dul.web.id/bootstrap/3/tuts-tips/belajar-bootstrap-untuk-pemula.php
http://kursuswebprogramming.com/beda-pdo-dan-mysqli-di-php/
Tutorial membuat CRUD dan Upload Gambar dengan PHP AJAX dan Bootstrap, Step by Step membuat CRUD Plus Upload Gambar dengan PHP AJAX dan Bootstrap, Cara membuat CRUD Plus Upload Gambar dengan PHP JQUERY AJAX dan Bootstrap, Source Code CRUD Plus Upload Gambar dengan PHP JQUERY AJAX dan Bootstrap

CRUD

(Total : 40,796 viewers, 1 viewers today)
cara-membuat-crud-plus-upload-gambar-dengan-php-ajax-bootstrap

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS TO Rizaldi Maulidia Achmad (Cancel)

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

162 Comments

  1. aif ramadan

    Bang kok gak mau ke simpan yaa? kan saya tambah data pas saya klik simpan dia diem aja.. knapa ya?

    • coba buka refresh dulu page nya, lalu buka console browsernya, dan coba simpan lagi. kalau ada masalah harusnya muncul error di console nya

      • aif ramadan

        oke bang terimakasih.. kalo saya mau ganti upload file nya dengan pdf itu gmna ya bang, apa saja yang diganti?

        • aif ramadan

          aku pake pdo juga ,udh bisa ke simpen di folder tapi gak bisa tampil di preview aku udh buat link nya padahal?

        • sama aja om. yang harus di ganti cuman 1, cara menampilkan pdf nya. karena pdf ga bisa di panggil pakai tag img. makanya biasanya kalau saya di kasih link aja dan di arahkan ke tempat file pdf nya di simpan

  2. muhammad yudhey

    req untuk CodeIgniter om

  3. joseph me

    I think I have solved it, and I invite you to test it too, for greater security. In the “index.php” file, as css files, I have inserted some cnds (which can be saved locally and include them directly from the “css” folder):

    And as js files, at the end of the document, the following files:

    Locally it doesn’t give me back the mistakes I wrote to you before, everything runs perfectly. I hope it will be of help to someone who has encountered my own problems.
    I really thank you for your tutorials that I will continue to experiment because they are the best I have found on the web, thanks

    • joseph me

      Ooooppsss … I realized that the links I had written are not accepted by the form …
      coem can I include them so that they can be shared?

  4. joseph me

    Hi there, in the “index.php” file you have some link on css and js file, at the top and bottom page.
    Unfortunately, by downloading to the mysqli version, the links to the css files are different and greater, and they are not present in the respective “css” and “js” folders included in the download. I tried to download several “cdn” online, but in the user insertion and modification form, the alert fields appear under the text areas. Can you please include these files? Thanks.

    • Oh sorry, actually that file is not needed for this tutorial. I have modified The source code of MySQLi Version. Please try to download it again. Thank you for your report.

      • joseph me

        Thanks for your reply and for including a corrected version of the “mysqli” zip. Unfortunately I have to inform you that by testing locally, the modal data entry window shows several errors: the “x” has disappeared to be able to close it and moreover all the error fields are present under the textfields of the form (I think that a proper css is missing) . In addition, the following error message appears on the “index.php” page:
        “Warning: mysqli_fetch_array () expects parameter 1 to be mysqli_result, bool given in D: \ xampp \ htdocs \ CRUDimage2 \ view.php on line 24”

        Please, can you correct it? Thanks.

  5. ranggatriutomo

    trus untuk upload file pdf sama upload gambar itu sama apa beda ya

    • sama aja om, ga ada bedanya, paling nanti ketika validasi type file nya di ubah, bukan lagi image/png atau imge/jpg. tapi jadi application/pdf kalau untuk pdf, bisa cek disini untuk type file (mime file) www*freeformatter*com/mime-types-list.html

      • ranggatriutomo

        ditunggu gan untuk yang download klo bisa yang versi native gan ya hehehe soal nya masih baru belajar jngn yang versi CI.

        • siap om paling hari sabtu atau minggu sekarang saya buatnya ya om. nanti saya kabari om kalau sudah dibuat 😀

  6. Prozoila

    Kalau inputan jenis kelaminnya menggunakan radio button gimana mas ?
    dibagian mana saja yang di ubah kodingannya ?

  7. Taufik Hidayat

    Mas yang mysqli ajaxnya kok enggak bisa crud ya

  8. SugarBaby

    Terimakasih atas ilmunya gan. Semoga berkah 🙂

  9. kennedy g

    Pagi gan, brarti kalo misalkan data nya banyak ga otomatis pagination ya? ada tutorial nya ga gan? pagination + search + edit ajax makasih

  10. Prozoila

    Kalau mau buat upload file nya optional gimana bos ?
    walaupun file foto tidak di pilih/di inputkan oleh user, data yang lain (NIS, Nama, Jenis Kelamin, No Telp dan Alamat) tetap tersimpan didatabase sedangkan untuk foto didatabasenya kosong…
    Mohon bantuannya bos…

  11. Ahmad Maulana

    Gan kok proses crudnya gak jalan yah?

  12. denni rh

    terima kasih sharingnya gan. Namun saya ada kendala gan, , muncul ini diconsol:
    dataTables.bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    dataTables.bootstrap.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    dataTables.responsive.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    2jquery.dataTables.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    dataTables.responsive.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    dataTables.bootstrap.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    ajax.js:5 Uncaught TypeError: $(…).DataTable is not a function
    at HTMLDocument. (ajax.js:5)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)
    dataTables.bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

    Terima KAsih

    • om nya pakai datatables? soalnya itu errornya bukan dari tutorial saya kayanya, itu error pada datatablesnya om
      dari errornya sih kan itu katanya file dataTables.bootstrap.min.css tidak ditemukan

  13. benny djoede k

    tanya gan.
    muncul pesan undefined index: suku in C:
    padahal sudah sesuai dgn database, proses_simpan.php, ajax.js. index.php

  14. lucky septian

    Tampilan fotonya kan square. Kalo pengen dibikin circle gimana ya ? Thanks

    • Rizaldi Maulidia Achmad

      karena disini kita pakai bootstrap. kita bisa gunakan class img-circle. tambahkan atribut class tersebut pada tag img nya. contoh :
      <img src="image.png" class="img-circle">
      .
      untuk lebih detailnya silahkan baca disini : https://getbootstrap.com/docs/3.3/css/#images

  15. Rory Rio

    Itu dari id data base

    • Rizaldi Maulidia Achmad

      gini saja. coba kirim file proses_simpan.php, file ajax, sama file form nya via fans page fb kami om. biar bisa saya cek

  16. rory rio

    noticeundefined index: id in C:
    /xampp/htdocs/crud_ajax/proses_simpan.php
    on line6

    INI GIMANA MASTAH

    • Rizaldi Maulidia Achmad

      itu undefined index id. asal usulnya dari mana itu id?

  17. Ricky Sanjaya

    min.. Mau tanya.. yang bagian proses simpan klau ga pakai foto.. bgian if nya di gnti apa yaa ??.

    • Rizaldi Maulidia Achmad

      yang harus di ganti ada pada file form, ajax, dan juga proses simpan nya om. di hilangkan saja skrip yang mengacu soal upload nya

  18. fadhlanonly

    Siang Min !!!! yang alamat sya ubah jdi isi berita…..dan saya input lbih dari 1000 charater ..pas diedit gak muncul semua min….mohon bantuannya

    • Rizaldi Maulidia Achmad

      Coba kirim screenshot nya om

  19. XHEROZNO

    Kenapa saya error di path nya yha?
    erronya ini
    Parse error: syntax error, unexpected ‘$path’ (T_VARIABLE) in C:\xampp\htdocs\skripsi\proses_simpan.php on line 22

    • Rizaldi Maulidia Achmad

      coba kirim file proses_simpan.php nya om. saya mau lihat. kirim via pesan di fans page facebook kami om

    • Rizaldi Maulidia Achmad

      harus dihilangkan mulai dari database nya dulu, lalu skrip nya pada php dan juga ajax nya harus di hapus

  20. Iramysheila

    Sangat mudah dipahami dengan cermat, terima kasih atas sharenya, ijin download gan.

    • Rizaldi Maulidia Achmad

      Alhamdulillah, sama-sama mba. Silahkan mba 😀

  21. Pradiptya

    Ilmunya sangat bermanfaat, mudah di ikuti step by stepnya. terimakasih gan,
    btw saya ada error untuk menghilangkan fitur file uploadnya gan. mohon pencerahannya master. source nya saya upload via pesan fb.

    • Rizaldi Maulidia Achmad

      Sama-sama om. Iyaa nanti malam saya cek nya om hehe

      • Pradiptya

        makasih gan, lagi pgn belajar CRUD yg tanpa upload photo. mw belajar PHP Ajax OOP dulu, kalo dah lancar lanjut belajar tutorial agan yg Codeigniter.

  22. Muhamad Hasbi

    terimakasih informasi dan ilmunya
    mau bertanya , kalau ditambah validasi pada upload gambar nya (buat tambah keamanan)
    ?

  23. Yusup Miftahuddin

    terima kasih informasinya.
    saya mau bertanya. saya mau buat insert delete dan update data namun tidak memasukan upload file.
    tetapi saya masih mengalami error program yg nambah hapus dan edit.
    pdahal saya sudah menghilangkan yang berhubungan dengan file upload.
    file ajax jg sudah diubah.
    tapi masih saja ketika pilih simpan atau hapus, langsung tidak keluar pop up dan kaya ngehang .
    terima kasih

    • Rizaldi Maulidia Achmad

      Coba tekan ctrl + shift + i. Lalu coba lagi, terus screenshot. Ini untuk lihat console browser nya apakah ada error atau tidak. Kirim screenshotnya via pesan di fans page fb kami.

  24. zulfikar

    mas ada yg buat bootstrap 4 nggk , pantesan ane nyoba nggk mw nampil modalnya sekalinya ini pake bootstrap 3 yaa…

    • Rizaldi Maulidia Achmad

      Ga ada om kalo yang bootstrap 4. Tinggal custom aja ubah jadi bootstrap 4, itu kan hanya design tampilan saja hehe

  25. markojok

    terimakasih atas artikelnya sangat bermanfaat…namun ketika sy mengklik button tambah data dan edit , mengapa tidak muncul ya mas?? mohon pencerahannya..

    • Rizaldi Maulidia Achmad

      Sama-sama om 😀
      Pasti ada yang error itu. Pakai browser apa?

  26. tri mulya dharma

    kalau misalkan kita buat tombol baru untuk memanggil halaman lain bagaimana min.

    • Rizaldi Maulidia Achmad

      Halaman lain nya halaman apa om? Maksudnya untuk pindah ke halaman tersebut?

  27. Irsyadul

    Koding ini
    if(move_uploaded_file($tmp, $path)){

    Bisa diganti apa om kalo kita gak mau pakai upload foto di sistem yang kita buat? Makasih ya om

    • Rizaldi Maulidia Achmad

      itu tinggal di hilangkan saja skrip tersebut. jangan lupa di bawah hilangkan juga tanda “}”. lalu pada tag form juga, hilangkan atribut enctype=”multipart/form-data”

      • Irsyadul

        if(move_uploaded_file($tmp, $path)){ // Jika proses upload sukses
        // Proses simpan ke Database
        $sql = $pdo->prepare(“INSERT INTO siswa VALUES(:nis,:nama,:jk,:telp,:alamat,:foto)”);
        $sql->bindParam(‘:nis’, $nis);
        $sql->bindParam(‘:nama’, $nama);
        $sql->bindParam(‘:jk’, $jenis_kelamin);
        $sql->bindParam(‘:telp’, $telp);
        $sql->bindParam(‘:alamat’, $alamat);
        $sql->bindParam(‘:foto’, $fotobaru);
        $sql->execute(); // Eksekusi query insert

        Ini kalo dihilangkan gimana gan? Nanti gak masuk dong datanya di dbase (proses_simpan.php)

        • Rizaldi Maulidia Achmad

          lah iyah om. kenapa mau dihilangkan?

  28. anonymoussgirl

    Salam, im from mlysia. I nk tanya i dh ubah semua variable yg related tp knp btn submit trs tak function. Really need help. For my final project. Pls. Email me.

    • Rizaldi Maulidia Achmad

      Salam, coba sebelum di jalankan, buka dulu console dari browser nya. Lalu tekan CTRL+SHIFT+I untuk mozilla firefox, tekan CTRL+SHIFT+J untuk google chrome. Lalu screenshot dan coba kirim kan screenshot dari consolenya ke saya. Kirimkan lewat fans page fb kami

  29. rido ardiyanto

    mas mau tanya.. pas mau simpan data nya kok muncul pesan seperti ini “call to undefined fuction json_encode() in C:/XXXXXXXX\proses_simpan.php on line 52 “. kira” kurang apa nya ya mas ?
    terimakasih,
    Maaf ya mas saya masih belajar..hehe

    • Rizaldi Maulidia Achmad

      Coba saya mau lihat skrip nya om. Kirim file proses_simpan.php nya lewat fans page kami. Nanti saya bantu cek apa yang salah nya

  30. AZIKI456

    OK BROW…TQ SUKSES….

  31. andreas ks

    Mau tanya gan. Ane kan mau belajar lagi nih web programming (udah agak-agak lupa), nah ane kan ngikutin tutorial disini nih. Ane ketik manual dari awal. Udah anek coba, cek, berhasil tampil, delete, simpan. Pas edit kenapa variabel NIS dsb di file proses_ubah.php tidak terdefinisi ya?? Ane udah telusuri semua nih source code nya, nggak ada yang beda tuh (cuma nama fieldsnya aja sih ane bedain).

    • Rizaldi Maulidia Achmad

      Coba kirim aja source code nya ke saya om. Biar saya bisa cek. Tapi paling jam 5an saya cek nya. Soalnya lagi kerja dulu sekarang hehe. Kirim ke fans page fb kami om

  32. shahira husein

    Terimakasih sudah share ilmunya..
    kak saya mau nanya, pas di Run Wen nya fungsi deletenya gak jalan itu kenapa ya ?

    • Rizaldi Maulidia Achmad

      Coba sebelum di run. Buka dulu console broswer nya. Kalo pakai chrome tekan CTRL+SHIFT+J. Kalo firefox tekan CTRL+SHIFT+I. Setelah console muncul. Lalu coba run kembali. Cek apakah di console ada errornya atau tidak.

  33. Anjar Syaefa

    Artikelnya mantabbb.. sangat bermanfaat gan…

    Gan maaf mau tanya nih, ane mau hapus kolom foto dan beberapa kolom, tabelnya muncul tapi ko gabisa insert sama update ya. fungsi Foto udah ane buat comment semua gan (di ajax juga) sama $no. data didalam tabel di hapis juga gabisa gan, tapi gada pesan eror. Mohon bantuannya gan. Terimakasih

    • Rizaldi Maulidia Achmad

      Error nya apa om?

  34. domain com

    terimakasih sudah share ilmu nya sangat bermanfaat

  35. Sunny748

    Bro mau nanya, kalo saat mau tambah data tapi fotonya belum tersedia saat itu juga, alhasil dikosongin dulu, lalu simpan. kenapa eror ya bro? Bisa ngga kalo bisa tetap simpan meskipun fotonya tidak ada?

    • Rizaldi Maulidia Achmad

      tinggal di hilangkan saja om if yang baris ke 22 pada file proses_simpan.php nya.
      maaf baru sempat balas om

      • sunny748

        tetep ngga bisa bro.

        Dan kalo belum diisi semua tapi user udah klik simpan duluan, bakalan eror bro. Ane coba tambah “required” di inputan modalnya tapi kenapa ngga bisa juga ya? Padahal ane kasih “readonly”, mau. Tapi ane kasih “required” kok ngga mau ya?

        Jadi intinya itu bagaimana caranya agar tidak terjadi eror, bila sudah klik “Simpan” padahal inputan masih ada yang kosong atau bahkan kosong semuanya?kalo tanpa AJAX, biasanya ane tinggal kasih “required” tapi tadi udah ane coba, ngga bisa.

        • Rizaldi Maulidia Achmad

          gunakan if saja pada javscriptnya om. jadi sebelum proses ajax, di if dulu untukcek apakah semua data sudah disii atau belum

  36. aulia rosiana

    Warning: move_uploaded_file(../upload/produk/): failed to open stream: No such file or directory in C:\xampp\htdocs\karya Technik Multifinance\admin\pages\do_input.php on line 23

    Warning: move_uploaded_file(): Unable to move ‘C:\xampp\tmp\phpF099.tmp’ to ‘../upload/produk/’ in C:\xampp\htdocs\karya Technik Multifinance\admin\pages\do_input.php on line 23

    kak ada warning :”) salah dimana ya kak, bisa tolong bantu?

    • Rizaldi Maulidia Achmad

      itu salah kayanya path nya mba. lanjut ngobrol via fanspage facebook kami saja mba. terus coba upload project nya disana. biar saya cek

  37. muhammad rahmat

    keren postingannya,,
    tapi mau tanya kan ane udah ganti beberapa fdatanya tapi pas mau klik tombol simpan ama ubah nggak terjadi apa2
    mohon solusinya dong?

    • Rizaldi Maulidia Achmad

      Terimakasih om hehe
      Pasti ada yang error om. Karena disini kita pakai javascript / jquery, biar tahu errornya apa. Buka console pada browser nya ketika menjalankan proses simpan / editnya. Untuk buka console di mozilla firefox tinggal tekan CTRL+SHIFT+I
      Lihat disitu apa errornya om? Kalau bisa screenshot, lalu kirim ke saya. Bisa lewat fanspage fb kalo mau biar saya pandu

  38. Sunny748

    Tambahan:
    ketika sudah selesai input dan berhasil. lalu keluar dari modal. tapi masuk lagi ke tambah data, nah data yang sebelumnya masih ada.
    Jadi misalnya saya input siswa K, sudah berhasil diinput. Lalu tutup modalnya, tapi saya lupa kalo harus input siswa B. Otomatis harus buka lagi modal tambah data. Dan disaat itulah, data siswa K masih ada di modal tambah data.

    apa solusinyya?

    • Rizaldi Maulidia Achmad

      oh iyah om. maaf itu saya kelewat hehe. sudah saya perbaiki dan edit tutorialnya pada skrip ajax.js nya. lihat pada baris ke 54 dan 115 pada file ajax.js
      disitu saya menambahkan skrip ini :
      $(“#form input, #form select”).val(“”);

      skrip tersebut untuk menghapus / mengkosongkan kembali inputandi form
      maaf baru sempat saya balas sekarang

  39. Sunny748

    Mas bro mau nanya, jadi begini ceritanya.
    Saya input siswa A dan sudah berhasil. Saya edit siswa A juga berhasil. Tapi mengapa saat saya mau input siswa B, di modal malah muncul data dari siswa A ya?
    Mohon pencerahannya Mas bro.
    Tengkyu

  40. Agung Adnyana

    Maaf saya mau tanya, kenapa ya setelah berhasil simpan dan keluar pesan berhasil simpan data pada tabel tidak diperbaharui ya? Harus refresh halamannya agar datanya mau diperbaharui.

    • Rizaldi Maulidia Achmad

      kalau dari tutorial yang saya buat ini, seharusnya reload otomatis itu tabelnya om. coba running lagi tapi sebelumnya buka dulu console pada browsernya untuk mengetahui apakah ada error atau tidaknya. kalau mau saya pandu kontak lewat fans page facebook om (http://www.facebook.com/mynotescode). tapi mungkin akan saya balas nanti malam om. soalnya ini lagi kerja dulu di kantor hehe

      • Agung Adnyana

        Sudah bisa ternyta, saya yang salah. Saya rubah nama view-nya, tap di ajax-nya belum saya rubah. hehehehe

  41. Agung Adnyana

    Terima kasih atas infonya, selain share coding juga berisi keterangnnya jadi sangat membantu. Terima kasih banya ^_^

    • Rizaldi Maulidia Achmad

      sama-sama om
      senang bisa membantu 😀

  42. @KataOny

    Terima Kasih banyak Gan tapi agak beda gan setelah saya pusing 7keliling mencari arti kode sesungguhnya :V akhirnya berhasil, agan pakenya if($ukuran_file = 10000){ . Sekali lagi Thank You Gan terima kasih banyak ilmunya 😀 ditunggu karya selanjutnya ….

  43. @KataOny

    Bang Mau nanya supaya foto max 1 MB coding nya apa ? terus kalo digabungin sama jquery lain lain bentrok yah gk jalan ? maksudnya jadi saya itu download template boostrap gitu terus saya gabungin sama punya loe bang tpi setiap tambah data ubah data pas disimpan jadi stuck :v harus direfresh dulu baru dah lancar lagi :v jawab yg 1MB dulu aja dah bang kalo ribet yg kedua :v thank you ….

      • @KataOny

        Terima Kasih banyak Gan tapi agak beda gan setelah saya pusing 7keliling mencari arti kode sesungguhnya :V akhirnya berhasil agan pakenya if($ukuran_file = 10000). Sekali lagi Thank You Gan terima kasih banyak ilmunya 😀 ditunggu karya selanjutnya ….

        • Rizaldi Maulidia Achmad

          Mantaaap hahaha 😀
          Sama-sama om, senang bisa membantu 🙂

          siap om, blog kami akan update 2 tutorial baru setiap bulannya. Ditunggu saja om hehe

  44. pallah00

    mas ko gagal simpan ya??malah tampil kembali scrip code proses_simpan pas d klik tombol simpan.apa yg error mas??

    • Rizaldi Maulidia Achmad

      Ada tulisan error yang muncul tidak om?

      • pallah00

        tidak ada muncul pesan error mas makanya.sya udah kirim mas screens photonya via fb.

        • Rizaldi Maulidia Achmad

          cek fb om. sudah saya balas. ngobrol via fb saja

  45. ashihadina

    kak, saya di view.php nya kok error kak. katanya : Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\nav\view.php on line 87
    line 87.

    • Rizaldi Maulidia Achmad

      Itu errormya di line 87. Coba saya liat skripnya. Kalau bisa copas ke pastebin.com skripnya

  46. Ryan Rahman Setiawan

    Tutorialnya bagus sekali, terus update artikel seperti ini ya mas, sangat berkualitas artikelnya.. TOP deh.

    • Rizaldi Maulidia Achmad

      Hahaha siaaap om. Senang kalo bisa membantu dan bisa bermanfaaat hehe 😀

  47. Mochammad Arif R

    mas kalo konek ke mysql nya harus pake pdo ya? kalo pake mysql bisa ga mas?

    • Rizaldi Maulidia Achmad

      Ga harus pakai pdo om. Pakai mysqli juga bisa. Cuman saya lebih merekomendasikan pakai pdo. Agar lebih fleksibel. Coba searching saja kelebihan pdo om.

  48. muhamad marno

    thanks infonya
    mau tanya ni mas, misal proses simpan,ubah,delete dijadikan dalam satu file gmnya mas
    sy sdh coba tp kok ga mau jalan normal, pdhl url di ajax nya sdh sy ubah
    trmkasih

    • Rizaldi Maulidia Achmad

      Sama-sama om.
      Ada error yang keluar tidak?
      Karena mengunakan ajax. coba running lagi tapi sebelumnya buka dulu console di browsernya om. caranya tekan CTRL+SHIFT+I (untuk Firefox), CTRL+SHIFT+J (untuk Chrome). Lalu coba running. cek apa ada error yang keluar atau tidak.

  49. suyitno12

    Maaf mas. saya baru belajar php.. ini web pertama saya untuk referensi belajar..
    saya udah ikuti tutorial sampe step akhir. dan alhamdulillah work mas.. cuman yang saya mau tanyakan waktu hapus data kok data masih ada ya mas, baik di table maupun di databasenya.. toast data berhasil di hapus sih muncul, tapi databasenya masih ada… makasih mas sebelumnya

    • Rizaldi Maulidia Achmad

      Karena mengunakan ajax. coba running lagi tapi sebelumnya buka dulu console di browsernya om. caranya tekan CTRL+SHIFT+I (untuk Firefox), CTRL+SHIFT+J (untuk Chrome). Lalu coba running. cek apa ada error yang keluar atau tidak. kalau ada apa errornya om?
      Maaf baru bisa balas om 🙂

  50. Mochammad Arif R

    mas kalo button simpan sama ubah nya pas di klik tidak terjadi apaapa itu kenapa ya? dari source code mas nya sih tidak masalah pas saya ubah memakai db sendiri malah terjadi seperti itu

    • Rizaldi Maulidia Achmad

      coba periksa file koneksi.php nya om. cek apakah nama databasenya sudah sama dengan nama database yang om buat. lalu cek juga nama2 kolom dari tabel yang om buat. pastikan sama dengan yang ada pada query sql di skrip nya om

  51. Yuni Setyowati

    tutorialnya super sekali gan,,

    mohon petunjuknya bagaimana kalau ditambahi dengan pagination dan search (pencarian data,, )

    mohon petunjuk dan pencerahannya,,

    terima kasih banyak

    • Rizaldi Maulidia Achmad

      Terimakasih mba 🙂

      untuk pagination dan search, kalo dijelasin lewat komentar lumayan panjang mba haha. Mungkin nanti akan coba saya buatkan tutorialnya mengenai pagination dan search secara terpisah hehe

      • Yuni Setyowati

        siiipp,, saya tunggu master tutorialnya,,

  52. astrid makiolor

    maaf mau nanya,, kok datanya nggak muncul ya?? yang dari database?

    • Rizaldi Maulidia Achmad

      Coba cek di databasenya. Datanya ada tidak mba? Terus apakah ada error yang muncul?

  53. Agung Adnyana

    Maaf mau tanya, ini kenapa ya?
    errornya aneh, saya tidak ngerti T_T
    saya cuma merubah telp menjadi kelas, sudah semua kata “telp” menjadi “kelas” tapi tetap error T_T
    Bisa di tolong mas?

    *NB: Error pada saat tambah data
    Ini Screenshot errornya : http://prntscr.com/dzzv50

    • Rizaldi Maulidia Achmad

      Yang di file ajax.js sudah di ubah juga belum? Pastikan di file ajax.js juga sudah diubah.

  54. fredy santoso

    mas ini gambar kok gak bisa uplod eror kyk gini out line 19 proses_simpan “” failed to open stream: No such file or directory in “”
    ini gmana mas mohon bantuan

    • Rizaldi Maulidia Achmad

      Itu karena folder foto belum dibuat. coba cek pada step ke 1, langkah ke 6. tadi sudah saya update tutorialnya. ternyata ketinggalan langkah tersebut hehe. Terimakasih juga sudah kasih tahu errornya.

      Maaf baru bales om. 🙂

  55. Denny Marcell

    bos,,, tambahin pagination dan search lah… sya tunggu 🙂
    Trimakasih

  56. Nila Wilda A

    Om, Punyaku kok gak bisa ya.

    Awalnya masih bisa muncul alert, tapi pas tak lanjutin ke step berikutnya, alertnya malah gak muncul nih. 🙁

    • Rizaldi Maulidia Achmad

      Errornya waktu proses apa mba? coba jalankan lagi, tapi sebelumnya buka dulu console browser nya. caranya CTRL+SHIFT+J (untuk google chrome) atau CTRL+SHIFT+I (untuk mozilla firefox). terus screenshot consolenya atau copas errornya disini. saya mau lihat errornya apa.

      • Nila Wilda A

        Sudah bisa Mas, ternyata folder js-nya belum aku chmod 🙂 😀

        Makasih infonya mas 🙂

        • Rizaldi Maulidia Achmad

          sama-sama mba 🙂

  57. Denny Marcell

    Berhasil gan…

    Gimana cara membuat page misalkan datanya 15 yang di tampilkan 5 dan next page.

    Trus sama Search juga untuk filter data.

    Trims 🙂

    • Rizaldi Maulidia Achmad

      Skrip nya lumayan panjang om. Udh coba cari di google? Saya kasih keywordnya aja.
      1. Cara buat pagination dengan php ajax
      2. Cara buat pencarian dengan php ajax

      Tapi kalo pengen yang lebih simpel, coba pakai Jquery Datatables.

      • Nila Wilda A

        Sudah bisa Mas, ternyata folder js-nya belum aku chmod 🙂 😀

        Makasih infonya mas 🙂

  58. raka ibnu

    gan mau tanya dong kok di view saya fotonya gak tampil ya ?? apa yang harus dirubah ya.. tolong pencerahannya
    #dapat source code dari group fb php indonesia

    • Rizaldi Maulidia Achmad

      Coba cek di folder foto. Ada tidak foto yang diupload nya? Itu download source code dari sini maksudnya?

  59. Dadan suhendar

    Bang tolong dong kirim donwload no 1 dan 2 ,,saya gak ada konfirmasi ke email saya,,dadansuhendar667@gmail.com

  60. DAdan mr

    saya gak bisa dowload no 1 dan 2?gimaa cara NYa

    • Rizaldi Maulidia Achmad

      Tinggal copy and paste url nya om. Lalu tuggu 5 detik. Kemdian akan ada tombol SKIP AD di pojok kanan atas. Klik link tersebut. Nanti akan masuk ke halaman dropbox untuk download filenyA

  61. Ade Warsan

    Tombol data ny gk fungsi(pas di klik gk ada from isi data ) kang… mksh

    • Rizaldi Maulidia Achmad

      Maaf tombol data? Maksudnya tombol yang mana om? Tombol tambah, edit atau delete?

      • Ade Warsan

        Iyah gan yang tambah data… harus ny kan muncul pop up(modal d bootstrap)

        • Rizaldi Maulidia Achmad

          File JS Bootstrap nya udah di load belum di index.php nya om?

    • ade wrsan

      mas.. kok pas mau tambah data gk mau ya,,, mksh..

      • Rizaldi Maulidia Achmad

        Ada error yang muncul?
        coba tekan CTRL+SHIFT+J pada browser untuk membuka Console. disitu keliatan kalau ada error pada javascriptnya

        • adewarsan

          maaf mas,, mash error line 6,7,8,9,10,, hehehh,, baru di php mass

          • Rizaldi Maulidia Achmad

            tulisan error nya apa om? coba copas disini tulisan errornya

  62. rifkynur

    masih ada error om,kalo kita update foto, foto yang ada di folder foto jadi hilang

    • Rizaldi Maulidia Achmad

      Kan emamg seharusnya gitu. Kalo user mengupdate fotonya. Fotonya sebelumnya akan dihapus, lalu mengupload foto yg baru.

    • rifkynur

      ohh…gitu ya 😀 baru tau,makasih atas infonya

  63. Harri Hidayat

    keren gan, mau nanya ni gan, jika kita tekan edit tapi kita tutup/ga jadi edit, seteleh itu klik tambah data, form modalnya seperti edit/isi isinya telah terisi, itu masih bug ya gan? solusinya gmana ya?

    • Rizaldi Maulidia Achmad

      Sudah saya perbaiki. tutorial sama source code nya sudah diupload ulang. saya menambahkan kode berikut pada file ajax.js nya :

      $('#form-modal').on('hidden.bs.modal', function (e){ // Ketika Modal Dialog di Close / tertutup
      $("#btn-reset").click(); // Klik tombol reset agar form kembali bersih
      $("#nis").removeAttr('readonly'); // Enable textbox nis
      });

      Terimakasih atas laporan errornya om.

      • Harri Hidayat

        mau nanya ni gan, kalau pakai dua file foto, jadi tambah 1 kolom lagi di db buat foto ke 2, itu editnya gmana ya gan? saya stuck nyoba untuk foto lebih dari 1 bagian editnya

        • Rizaldi Maulidia Achmad

          kalo dijelasin di kolom komentar susah om. soalnya lumayan skripnya. udah coba cari di google cara multiple upload dengan ajax?

          • Harri Hidayat

            sudah gan, untuk add, delete dah ok, cuma editnya aja, harus dua dua foto, kalo salah satu diabaikan, gagal

    • Rizaldi Maulidia Achmad

      Template dari wordpressnya. Cuma sudah saya edit-edit sedikit

  64. AnggaDeong

    Sangat membantu ku .. terimakasih ,, ijin coba

    • Rizaldi Maulidia Achmad

      Sama-sama om. Terimakasih sudah berkunjung.

NOTE ARCHIVES