Hosting Unlimited Indonesia

Recent Comment

Navigation

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.

Share
Hosting Unlimited Indonesia

agus ribudi

Programmer, Web Developer, Android Developer and Blogger

Post A Comment:

0 comments:

Rekomendasi Untuk Anda × +