Ticker

6/recent/ticker-posts

Header Ads Widget

Crud (Create, Read, Update, Delete) Php Mysqli Dilengkapi dengan upload gambar dan ckeditor

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Sebelum kita memulai tutorial ini ada sebaiknya kita mengetahui terlebih dahulu apa itu Crud (Create, Read, Update, Delete)?


Create yang berarti membuat sebuah data baru, contoh kita sedang melakukan penginputan sebuah data mahasiswa itu sudah merupakan Create dari CRUD karena kita membuat dan menyimpan data ke database.

Read Membaca atau menampilkan suatu data yang tadinya berada didatabase MySQL, kemudian ditampilkan di WEB menggunakan bahasa pemrograman Php

Update proses ini adalah mengedit sebuah data dari database yang kemudian di update menggunakan bahasa pemrograman Php. Contoh ada data mahasiswa yang salah namanya kemudian nama tersebut diganti, hal ini dinamakan proses update dalam crud.

Delete proses ini adalah untuk melakukan penghapusan data di database melalui bahasa Php. Contoh pada data mahasiswa, dan mahsiswa tersebut sudah keluar dari kampus atau gak kuliah lagi datanya kan gak perlu terus dihapus, itu sudah termasuk proses delete dalam CRUD.




Setelah mengetahui apa itu crud, maka kita akan masuk kepembahasan, pada tutorial ini sobat bisa mempelajari
  • Crud (create, read, updatae & delete) Php dengan Mysqli
  • Pagination data
  • Ckedtior & Kcfinder
  • Unlink gambar (menghapus gambar dari dalam folder)
Untuk mempelajari keempat hal diatas ikutilah langkah-langkah dibawah ini

Langkah Pertama
Donwload semua library untuk pembuatan crud disni, didalam zip tersebut sudah saya sediakan bootsrap 4 Alpha, jquery, ckeditor yang sudah terintegerasi dengan kcfinder, images.

Langkah Kedua
Buatlah database dengan nama dbmahasiswa atau sesuai dengan yang sobat inginkan, kemudian buatalah sebuah tabel dengan nama mashsiswa, struktur tabel tersebut seperti script tabel dibawah ini

CREATE TABLE `mahasiswa` (
  `id` int(11) NOT NULL,
  `nim` varchar(255) DEFAULT NULL,
  `nama` varchar(255) DEFAULT NULL,
  `jurusan` varchar(255) DEFAULT NULL,
  `alamat` text,
  `gambar` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Jika sobat membutuhkan sample datanya bisa excute query dibawah ini

INSERT INTO `mahasiswa` (`id`, `nim`, `nama`, `jurusan`, `alamat`, `gambar`) VALUES
(1, '2012030123', 'Aguzrybudy', 'Manajemen Informatika', 'Medan Indonesia\r\n', 'profile2.png'),
(2, '2012030121', 'Budi Santoso', 'Manajemen Informatika', 'Medan Timur\r\n', 'profile2.png'),
(4, '2012030120', 'Agus Kuncoro', 'Manajemen Informatika', 'Medan Barat\r\n', 'profile2.png'),
(5, '2012030122', 'Rio Syahputra', 'Tehnik Informatika', 'Medan Barat\r\n', 'profile3.png'),
(6, '2012030123', 'Muhammad ali', 'Tehnik Komputer', 'Medan Sumatera Utara\r\n', 'profile2.png'),
(7, '2012030124', 'Ridho ', 'Sistem Informasi', 'Medan Johor\r\n', 'profile3.png'),
(8, '2012030125', 'Muhammad Ridho', 'Tehnik Informatika', 'Medan Barat\r\n', 'profile2.png'),
(9, '2012030126', 'Logia', 'Tehnik Informatika', 'Medan Angkasa\r\n', 'profile3.png');

Langkah Ketiga



Extractlah library yang sudah sobat download ke dalam folder local web server sobat, kalau yang menggunakan xampp folder local ada di xampp > htdocs > nama folder (nama folder terserah sobat), setelah di extract buatlah sebuah file dengan nama index.php, kemudian ketikalah kode dibawahi ini

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Crud Php & Mysqli</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  </head>
  <body>

    <div id="wrapper">
      <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="http://aguzrybudy.com">Aguzrybudy.com</a>
      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.php">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.php?page=add">Add Data</a>
        </li>
      </ul>
      </nav>
      <div class="container box">
       <?php include "pages.php";?>
      </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      CKEDITOR.replace( 'alamat',{height: 300} );
    </script>
  </body>
</html>

Langkah Keempat
Buatlah file dengan koneksi.php, yang berfungsi untuk menghubungkan database mysql ke program php

<?php
 $host="localhost";
 $user="root";
 $pass="";
 $database="dbphp7";
 $mysqli=new mysqli($host,$user,$pass,$database);
 if (mysqli_connect_errno()) {
   trigger_error('Koneksi ke database gagal: '  . mysqli_connect_error(), E_USER_ERROR); 
 }
?>

Langkah Kelima
Buatlah file dengan nama pages.php, yang berfunsgi untuk mendapatkan semua halaman Crud tanpa meload ulang semua halaman, kemudian ketiklah kode dibawah ini.

<?php
 error_reporting( error_reporting() & ~E_NOTICE );
 include "koneksi.php";

   
     if ($_GET['page']=="add") {
  include "add.php";
 }

 else if ($_GET['page']=="create") {
  include "create.php";
 }

 else if ($_GET['page']=="edit") {
  include "edit.php";
 }

 else if ($_GET['page']=="update") {
  include "update.php";
 }

 else if ($_GET['page']=="delete") {
  include "delete.php";
 }

 else{
  include "read.php";
 }
?>

Langkah Keenam



Buatlah file dengan nama read.php, yang berfungsi untuk menampilkan data mahasiswa dari database, kemudian ketiklah kode dibawah ini

<table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>NIM</th>
              <th>Nama</th>
              <th>Jurusan</th>
              <th>Alamat</th>
              <th>Gambar</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>


          <?php 
            $no = 0;
            $mahasiswa=$mysqli->query("SELECT * FROM mahasiswa");
            while($m=mysqli_fetch_array($mahasiswa)){
            $no++;    
          ?>  

          <?php 
            include"paging.php";
            $p   = new paging_mahasiswa;
            $batas  = 5;
            $posisi = $p->cariPosisi($batas);
            $mahasiswa=$mysqli->query("SELECT * FROM mahasiswa 
            ORDER BY id DESC LIMIT  $posisi,$batas");
            $no=0;
            while($m=mysqli_fetch_array($mahasiswa)){   
            $no++;
          ?>

            <tr>
              <th scope="row"><?php echo $no;?></th>
              <td><?php echo $m['nim']; ?></td>
              <td><?php echo $m['nama']; ?></td>
              <td><?php echo $m['jurusan']; ?></td>
              <td><?php echo $m['alamat']; ?></td>
              <td><img src="images/<?php echo $m['gambar'];?>" height="50"></td>
              <td>
               <a href="index.php?page=edit&id=<?php echo $m['id'];?>"><i class="fa fa-pencil"></i></a> | 
               <a href="index.php?page=delete&id=<?php echo $m['id'];?>"><i class="fa fa-trash-o"></i></a>
              </td>
            </tr>

            <?php } ?>
            
          </tbody>
        </table>

      <div class="halaman">
        <nav aria-label="...">
          <ul class="pagination">

          <?php } ?>
          <?php 
              $jmldata     = mysqli_num_rows($mysqli->query("SELECT * FROM mahasiswa"));
              $jmlhalaman  = $p->jumlahHalaman($jmldata, $batas);
              $linkHalaman = $p->navHalaman($_GET['home'], $jmlhalaman);
              echo " <li  class='page-item'> $linkHalaman </li>"; 
          ?>
          
          </ul>
        </nav>
      </div>

Langkah Ketujuh
Buatlah sebuah file dengan nama paging.php, yang berfunsgi untuk membuat pagination (halaman data), kemudian ketiklah kode dibawah ini.

<?php
class paging_mahasiswa{

 function cariPosisi($batas){

  if(empty($_GET['home'])){
   $posisi=0;
   $_GET['home']=1;
  }
  else{
   $posisi = ($_GET['home']-1) * $batas;
  }
   return $posisi;
  }

  // Fungsi untuk menghitung total halaman
  function jumlahHalaman($jmldata, $batas){
  $jmlhalaman = ceil($jmldata/$batas);
  return $jmlhalaman;
  }

  // Fungsi untuk link halaman 1,2,3 
  function navHalaman($halaman_aktif, $jmlhalaman){
  $link_halaman = "<li class='page-item'></li>";

  // Link ke halaman pertama (first) dan sebelumnya (prev)
  if($halaman_aktif > 1){
   $prev = $halaman_aktif-1;
   $link_halaman .= " 
   <li class='page-item'><a class='page-link' href=index.php?home>First</a></li>
   <li class='page-item'><a class='page-link' href=index.php?home=$prev> Prev</a></li>  ";
  }
  else{ 
   $link_halaman .= "  <li class='page-item disabled'><a class='page-link' href='#' tabindex='-1' aria-label='Previous'>  Previous </a></li>  ";
  }

  // Link halaman 1,2,3, ...
  $angka = ($halaman_aktif > 3 ? "<li class='page-item'> <span aria-hidden='true'>...</span> " : " </li>"); 
  for ($i=$halaman_aktif-2; $i<$halaman_aktif; $i++){
    if ($i < 1)
     continue;
     $angka .= "<li class='page-item'><a class='page-link' href=index.php?home=$i>$i</a></li>  ";
    }
  
    $angka .= " <li class='page-item active'>  <a class='page-link' href='#'>$halaman_aktif</a> <span class='sr-only'>(current)</span></li>  ";
     
  for($i=$halaman_aktif+1; $i<($halaman_aktif+3); $i++){
      if($i > $jmlhalaman)
        break;
     $angka .= "<li class='page-item'><a class='page-link' href=index.php?home=$i>$i</a></li>  ";
      }
   $angka .= ($halaman_aktif+2<$jmlhalaman ? " <li class='page-item'>  <span aria-hidden='true'>...</span> <a  class='page-link' href=index.php?home=$jmlhalaman>  $jmlhalaman</a>  " : " </li>");
   $link_halaman .= "<li class='page-item'>$angka</li>";

   // Link ke halaman berikutnya (Next) dan terakhir (Last) 
   if($halaman_aktif < $jmlhalaman){
    $next = $halaman_aktif+1;
    $link_halaman .= "
    <li class='page-item'><a class='page-link' href=index.php?home=$next>Next</a></li>
    <li class='page-item'><a class='page-link' href=index.php?home=$jmlhalaman>Last </a><li>";
   }
   else{
    $prev = $halaman_aktif-1;
    $link_halaman .= " <li class='page-item'><a class='page-link' href='index.php?home=$next' aria-label='Next'> Next</a></li> ";
   }
    return $link_halaman;
  }
}
?>

Langkah Kedelapan
Buatlah file dengan nama add.php, yang berfungsi untuk membuat data mahasiwa dengan sebuah form, kemudian ketiklah kode dibawah ini

<form name="form_mahasiwa" action="index.php?page=create" method="post" enctype="multipart/form-data">

  <div class="form-group">
    <label for="NIM">NIM</label>
    <input type="text" class="form-control" id="nim" placeholder="Nomor Indux Mahasiswa" name="nim" required>
  </div>

  <div class="form-group">
    <label for="Nama">Nama</label>
    <input type="text" class="form-control" id="nama" placeholder="Nama" name="nama" required>
  </div>

  <div class="form-group">
    <label for="Jurusan">Jurusan</label>
    <select name="jurusan" class="form-control" id="jurusan" name="jurusan" required>
     <option value="">None</option>
     <option value="Manajemen Informatika">Manajemen Informatika</option>
     <option value="Tehnik Informatika">Tehnik Informatika</option>
     <option value="Tehnik Komputer">Tehnik Komputer</option>
     <option value="Sistem Informasi">Sistem Informasi</option>
    </select>
  </div>

  <div class="form-group">
    <label for="Alamat">Alamat</label>
    <textarea class="form-control" id="alamat" placeholder="Alamat" name="alamat" required></textarea>
  </div>

  <div class="form-group">
    <label for="Gambar">Gambar</label>
    <input type="file" class="form-control" id="gambar" name="gambar" required>
  </div>

  <div class="form-group">
    <button type="reset" class="btn btn-danger">Reset</button>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>

</form>

Langkah Kesembilan
Buatlah sebuah file dengan nama create.php, yang berfungsi untuk melakukan save data kedalam database, kemudian ketiklah kode dibawah ini

<?php
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$jurusan = $_POST['jurusan'];
$alamat = $_POST['alamat'];
$gambar = $_FILES['gambar']['name'];
$mysqli->query("INSERT INTO mahasiswa(nim,nama,jurusan,alamat,gambar) VALUES('$nim','$nama','$jurusan','$alamat','$gambar')");
move_uploaded_file($_FILES['gambar']['tmp_name'],'images/'.$gambar);
header('location:index.php');
?>

Langkah Kesepuluh



Buatlah file dengan nama edit.php, yang berfunsgi untuk melakukan pengeditan data pada sebuah form, kemudian ketiklah kode dibawah ini.

<?php 
  $edit=$mysqli->query("select*from mahasiswa where id='$_GET[id]'");
  $e=mysqli_fetch_array($edit);
?>

<form name="form_mahasiwa" action="index.php?page=update" method="post" enctype="multipart/form-data">

  <div class="form-group">
    <label for="NIM">NIM</label>
    <input type="hidden" name="id" value="<?php echo $e['id'];?>">
    <input type="text" class="form-control" id="nim" placeholder="Nomor Indux Mahasiswa" name="nim" required value="<?php echo $e['nim'];?>">
  </div>

  <div class="form-group">
    <label for="Nama">Nama</label>
    <input type="text" class="form-control" id="nama" placeholder="Nama" name="nama" required value="<?php echo $e['nama'];?>">
  </div>

  <div class="form-group">
    <label for="Jurusan">Jurusan</label>
    <select name="jurusan" class="form-control" id="jurusan" name="jurusan" required>
     <option value="<?php echo $e['jurusan'];?>"><?php echo $e['jurusan'];?></option>
     <option value="Manajemen Informatika">Manajemen Informatika</option>
     <option value="Tehnik Informatika">Tehnik Informatika</option>
     <option value="Tehnik Komputer">Tehnik Komputer</option>
     <option value="Sistem Informasi">Sistem Informasi</option>
    </select>
  </div>

  <div class="form-group">
    <label for="Alamat">Alamat</label>
    <textarea class="form-control" id="alamat" placeholder="Alamat" name="alamat" required><?php echo $e['alamat'];?></textarea>
  </div>

  <div class="form-group">
    <label for="Gambar">Gambar</label>
    <input type="file" class="form-control" id="gambar" name="gambar">
    <span><?php echo $e['gambar'];?></span>
  </div>

  <div class="form-group">
    <button type="reset" class="btn btn-danger">Reset</button>
    <button type="submit" class="btn btn-primary">Update</button>
  </div>


</form>

Langkah Kesebelas
Buatlah file dengan nama update.php, yang berfunsgi untuk melakukan proses edit data untuk disimpan kedatabase, kemudian ketiklah kode dibwah ini

<?php 
  $gambar   = $_FILES['gambar']['name'];
  // Apabila gambar tidak diganti
  if (empty($gambar)){
    $mysqli->query("UPDATE mahasiswa SET nim     = '$_POST[nim]',
                        nama    = '$_POST[nama]',
                        jurusan = '$_POST[jurusan]',
                        alamat  = '$_POST[alamat]'
                    WHERE id = '$_POST[id]'");
  }else{

    $hapus= $mysqli->query("select*from mahasiswa where id='$_POST[id]'");
    // menghapus gambar yang lama
    $nama_gambar=mysqli_fetch_array($hapus);
    // nama field gambar
    $lokasi=$nama_gambar['gambar'];
    // alamat tempat foto
    $hapus_gambar="images/$lokasi";
    // script untuk menghapus gambar dari folder
    unlink($hapus_gambar);
    move_uploaded_file($_FILES['gambar']['tmp_name'],'images/'.$gambar);
    $mysqli->query("UPDATE mahasiswa SET nim     = '$_POST[nim]',
                        nama    = '$_POST[nama]',
                        jurusan = '$_POST[jurusan]',
                        alamat  = '$_POST[alamat]',
                        gambar  = '$gambar'
                    WHERE id = '$_POST[id]'");
  }
  header('location:index.php');
?>

Langkah Kedua Belas
Buatlah sebuah file dengan nama delete.php, yang berfungsi untuk mendelete data dari database dan menghapus file gambar dari dalam folder images, kemudian ketiklah kode dibawah ini

<?php 
   $hapus=$mysqli->query("select*from mahasiswa where id='$_GET[id]'");
    // memilih gambar untuk dihapus
    $nama_gambar=mysqli_fetch_array($hapus);
    // nama field gambar
    $lokasi=$nama_gambar['gambar'];
    // alamat tempat gambar
    $hapus_gambar="images/$lokasi";
    // script delete gambar dari folder
    unlink($hapus_gambar);
    $mysqli->query("DELETE FROM mahasiswa WHERE id='$_GET[id]'");
    header('location:index.php');
?>

Jika sobat sudah melakukan semua langkah-langkah diatas dengan benar maka sobat akan melihat hasilnya seperti gambar dibwah ini

Read


Add


Edit






Demikianlah tutorial crud (ceate, read, update, delete) pada mysqli, kalau sobat ada yang gak ngerti sama kode diatas silahkan tinggalkan komentar, semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran, jika sobat ingin kode dari aplikasi diatas download dari link dibawah ini.




Post a Comment

22 Comments

  1. mantappp boss,izin download yah sangat membantu saya dalam belajar php

    ReplyDelete
  2. www.atmaluhur.ac.id

    saya lihat website org biasanya bnyak iklan" yang muncul bnyk sekali iklanya..
    cara bikin sperti itu caranya gimna. bisa jelaskan di email saya

    1622500121@mahasisawa.atmaluhur.ac.id

    ReplyDelete
  3. Cara download nya gimna ya? Maaf newbie

    ReplyDelete
    Replies
    1. Tekan tombol Download merah dibawa postingan mas (o)

      Delete
  4. Terimakasih Mas Agus Ribudi atas ilmunya,
    sangat berguna buat kami.

    yang ingin saya tanyakan adalah bagaimana caranya menambahkan upload gambarnya lebih dari 1?

    mohon bantuannya Mas

    ReplyDelete
  5. Pakek plugin dropzonejs mas, bisa lihat disini https://www.dropzonejs.com/, saya belum buat tutorial untuk uploadnya

    ReplyDelete
  6. This comment has been removed by the author.

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

    ReplyDelete
  8. Terimakasih banyak mas ilmunya.. sya sangat terbantu dengan adanya tutorial ini.. jangan kapok share ilmunya ya mas.. terus lanjutkan bikin tutorial2 yang up to date, terutama tentang php & mysqli ini mas.. sekali lagi terimakasih mas..

    ReplyDelete
  9. Assalamualaikum, mas Budy. Tolong catat wa saya 085235996009, mau private belajar PHP , semoga bermanfaat ilmunya buat persiapan syarat kuliah nnti

    ReplyDelete
  10. link mati bro ,upload file codenya lg pls

    ReplyDelete
  11. punyaku error serti ini saat selesai save inputan

    Warning: Cannot modify header information - headers already sent by (output started at /home/............./public_html/index.php:1) in /home/............./public_html/create.php on line 9

    Mohon petunjuknya mas

    ReplyDelete
  12. itu biasa terjadi mas, kalau ada spasi/enter setelah tag pembuka <?php caranya mas cek dulu kodenya 1/1 mana tau ada <?php yang ke ke enter

    ReplyDelete
  13. Fatal error: Uncaught Error: Call to a member function jumlahHalaman() on null in C:\xampp\htdocs\crud\read.php:72 Stack trace: #0 C:\xampp\htdocs\crud\pages.php(33): include() #1 C:\xampp\htdocs\crud\index.php(38): include('C:\\xampp\\htdocs...') #2 {main} thrown in C:\xampp\htdocs\crud\read.php on line 72.

    Solusinya gimana gan, mohon bantuannya

    ReplyDelete
  14. Assalamu'alaikum admin, artikel admin sangat membantu saya dalam membuat Crud (Create, Read, Update, Delete) Php Mysqli Dilengkapi dengan upload gambar dan ckeditor artikel anda sangat mudah di pahami , perkenalkan nama saya fariz alfaiq (1822500083), kunjungi juga web kampus saya (https://www.atmaluhur.ac.id/)

    ReplyDelete
  15. Bermanfaat sekali tutorial nya kak, Terimakasih banyak ilmunya,sangat terbantu sekali dengan adanya tutorial ini.. jangan pernah bosan untuk share ilmunya kak Sukses Terus, terutama tentang php & mysqli ini kak, sekali lagi terimakasih ya kak,Nama Saya Sekar Widya Lestari dari kampus STMIK ATMA LUHUR. Jangan lupa kunjungi Website kampus kita kak (https://www.atmaluhur.ac.id/)

    ReplyDelete

Berkomentarlah dengan baik dan sopan

Rekomendasi Untuk Anda × +