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
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.
22 Comments
mantappp boss,izin download yah sangat membantu saya dalam belajar php
ReplyDeletesippppp
ReplyDeleteIzin download gan :)
ReplyDeletewww.atmaluhur.ac.id
ReplyDeletesaya 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
Cara download nya gimna ya? Maaf newbie
ReplyDeleteTekan tombol Download merah dibawa postingan mas (o)
DeleteTerimakasih Mas Agus Ribudi atas ilmunya,
ReplyDeletesangat berguna buat kami.
yang ingin saya tanyakan adalah bagaimana caranya menambahkan upload gambarnya lebih dari 1?
mohon bantuannya Mas
Pakek plugin dropzonejs mas, bisa lihat disini https://www.dropzonejs.com/, saya belum buat tutorial untuk uploadnya
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteTerimakasih bang sangat membantu...
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteTerimakasih 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..
ReplyDeleteAssalamualaikum, mas Budy. Tolong catat wa saya 085235996009, mau private belajar PHP , semoga bermanfaat ilmunya buat persiapan syarat kuliah nnti
ReplyDeletelink mati bro ,upload file codenya lg pls
ReplyDeletegak mati mas bro, dicoba lagi saya udah test
Deletepunyaku error serti ini saat selesai save inputan
ReplyDeleteWarning: 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
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
ReplyDeleteTksh mas 🙏
DeleteFatal 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.
ReplyDeleteSolusinya gimana gan, mohon bantuannya
link download bahan nya mati :(
ReplyDeleteAssalamu'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/)
ReplyDeleteBermanfaat 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/)
ReplyDeleteBerkomentarlah dengan baik dan sopan