CRUD Foto Dengan Verot Class Upload PHP
Class.upload.php merupakan library php yang dibuat oleh verot untuk keperluan upload file seperti gambar, dokumen dan lain sebagainya. Class Upload berisi sekumpulan kode yang berisi fungsi untuk penanganan upload file ke server, validasi file atau penanganan kebutuhan tertentu seperti salah satunya kompresi atau croping pada file/gambar yang diungah.
Cara Menggunakan Class.upload.php
Untuk dapat mengilustrasikan bagaimana class.upload.php bekerja, Anda bisa mencoba mengikuti langkah – langkah berikut :
Lakukan instalasi atau tambahkan library melalui composer.
composer require verot/class.upload.php
Selanjutnya kita buat halaman upload untuk menguji coba seperti berikut
Upload.php
<?php
require_once __DIR__.'/vendor/autoload.php';
use Verot\Upload\Upload;
$error = [];
$success = '';
if($_SERVER['REQUEST_METHOD']=='POST'){
$upload = new Upload($_FILES['gambar'], 'id_ID');
$upload->file_max_size = 2000000;
$upload->allowed = array('image/*');
$upload->process('upload');
if($upload->processed){
$success = "Gambar berhasil diunggah";
}else{
$error[]=$upload->error;
}
}
Terakhir, buat halaman index.php untuk menyiapkan formulir upload untuk mengnggah file atau gambar
<?php
require_once 'Upload.php';
?>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Upload Verot</title>
<style>
body {
background-color: #f8f9fa;
}
.card {
margin-bottom: 20px;
}
.result {
background-color: #e9ecef;
border: 1px solid #ced4da;
padding: 15px;
border-radius: 5px;
}
h1 {
color: #007bff;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4"> Verot Class Upload PHP</h1>
<?php
foreach ($error as $err) {
echo '<div class="alert alert-danger">'.$err.'</div>';
}
?>
<?php
if($success==true)
echo '<div class="alert alert-success">'.$success.'</div>';
?>
<div class="card">
<div class="card-body">
<h2 class="card-title">Upload Gambar</h2>
<form enctype="multipart/form-data" method="post" action="<?php $_SERVER['PHP_SELF']?>">
<input type="file" name="gambar" required="">
<input class="btn btn-md btn-primary" type="submit" name="Submit" value="upload">
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<h2 class="card-title">Daftar Gambar</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Gambar</th>
<th>Gambar</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>gambar1.jpg</td>
<td><img src="path/to/gambar1.jpg" alt="Gambar 1" style="width: 100px;"></td>
<td>
<a href="edit.php?id=1" class="btn btn-warning btn-sm">Edit</a>
<a href="delete.php?id=1" class="btn btn-danger btn-sm">Hapus</a>
</td>
</tr>
<!-- Tambahkan baris lain sesuai kebutuhan -->
</tbody>
</table>
</div>
</div>
</div>
<script src="bootstrap/bootstrap.min.js"></script>
</body>
</html>
$upload->process('upload');
Contoh, misalnya Anda ingin mengcroping gambar dengan rasio tertentu sebelum di upload ke server, Anda dapat menambahkan parameter seperti berikut
<?php
//require_once __DIR__ .'/app/Autoloader/Psr4Autoloader.php';
require_once __DIR__.'/vendor/autoload.php';
use Verot\Upload\Upload;
$error = [];
$success = '';
if($_SERVER['REQUEST_METHOD']=='POST'){
$upload = new Upload($_FILES['gambar'], 'id_ID');
$upload->file_max_size = 2000000;
$upload->allowed = array('image/*');
//crop
$upload->image_resize = true;
$upload->image_ratio_crop = true;
$upload->image_x = 200;
$upload->image_y = 200;
$upload->process('upload');
if($upload->processed){
$success = "Gambar berhasil diunggah";
}else{
$error[]=$upload->error;
}
}
Ada beberapa parameter untuk menentukan jenis file yang dapat di upload. Contoh misalnya jika file yang ingin di upload berjenis pdf atau ms word
$upload->allowed = array('application/pdf','application/msword');Dalam contoh kode upload foto diatas, kita menggunakan parameter image/* yang artinya file upload kita menerima semua jenis file yang dapat diunggah. Jika misa kita menginginkan file yang dapat diunggah lebi spesifik, maka kita bisa membuat parameternya menjadi seperti berikut
$upload->allowed = array('image/png','image/jpeg','image/jpg');
KONFIGURASI DATABASE
Tahap selanjutnya adalah Anda perlu menyiapkan sebuah database. Silahkan buat misalnya dengan struktur berikut
CREATE TABLE `verot`.`mahasiswa` (`mahasiswa_id` INT UNSIGNED NOT NULL AUTO_INCREMENT , `mahasiswa_nama` VARCHAR(65) NULL DEFAULT NULL , `mahasiswa_foto` MEDIUMTEXT NULL DEFAULT NULL , PRIMARY KEY (`mahasiswa_id`)) ENGINE = InnoDB;
HALAMAN UPLOAD
Setelah mempersiapkan database, silahkan atur koneksi database masing - masing. Lalu modifikasi file upload.php menjadi seperti berikut
<?php
require_once __DIR__ .'/app/Autoloader/Psr4Autoloader.php';
require_once __DIR__.'/vendor/autoload.php';
use Core\Apps;
use Verot\Upload\Upload;
$app = new Apps;
$error = [];
$sukses = '';
$gagal = '';
if($_SERVER['REQUEST_METHOD']=='POST'){
if(empty($_POST['mahasiswa_nama']))
{
$error [] ='Nama mahasiswa harus diisi';
}
$upload = new Upload($_FILES['mahasiswa_foto'], 'id_ID');
$upload->file_max_size = 2000000;
$upload->allowed = array('image/*');
//simpan nama gambar dengan nama random
$randomHash = bin2hex(random_bytes(16));
$upload->file_new_name_body = $randomHash;
$upload->process('upload');
if(!$upload->processed){
$errors[] = $upload->error;
}
if(count($error)==0)
{
$data=[
'mahasiswa_nama'=>$_POST['mahasiswa_nama'],
'mahasiswa_foto'=>$upload->file_dst_pathname //menyimpan nama file yang sebelumnya telah diunggah
];
if($app->insertTable('mahasiswa',$data))
{
$sukses = 'Data barshasil disimpan';
}else{
$gagal = 'Data gagal disimpan';
}
}
}
Kemudian modifikasi pula halaman index.php sebelumnya menjadi seperti berikut
<?php
require_once 'Upload.php';
?>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Upload Verot</title>
<style>
body {
background-color: #f8f9fa;
}
.card {
margin-bottom: 20px;
}
.result {
background-color: #e9ecef;
border: 1px solid #ced4da;
padding: 15px;
border-radius: 5px;
}
h1 {
color: #007bff;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4"> Verot Class Upload PHP</h1>
<?php
foreach ($error as $err) {
echo '<div class="alert alert-danger">'.$err.'</div>';
}
?>
<?php
if($sukses==true)
echo '<div class="alert alert-success">'.$sukses.'</div>';
?>
<?php
if($gagal==true)
echo '<div class="alert alert-danger">'.$success.'</div>';
?>
<div class="card">
<div class="card-body">
<h2 class="card-title">Upload Gambar</h2>
<form enctype="multipart/form-data" method="post" action="<?php $_SERVER['PHP_SELF']?>">
<div class="form-group">
<label>Nama mahasiswa</label>
<input class="form-control" name="mahasiswa_nama" required="">
</div>
<div class="form-group">
<input type="file" name="mahasiswa_foto" required="">
</div>
<div class="form-group">
<input class="btn btn-md btn-primary" type="submit" name="Submit" value="simpan">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<h2 class="card-title">Daftar Gambar</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Gambar</th>
<th>Gambar</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>gambar1.jpg</td>
<td><img src="path/to/gambar1.jpg" alt="Gambar 1" style="width: 100px;"></td>
<td>
<a href="edit.php?id=1" class="btn btn-warning btn-sm">Edit</a>
<a href="delete.php?id=1" class="btn btn-danger btn-sm">Hapus</a>
</td>
</tr>
<!-- Tambahkan baris lain sesuai kebutuhan -->
</tbody>
</table>
</div>
</div>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Pada tahap selanjutnya, Anda bisa langsung melakukan pengujian dengan cara mengunggah sebuah file ataupun berkas tertentu yang sesuai dengan konfigurasi file yang diperbolehkan dalam contoh diatas
MENAMPILKAN FOTO YANG TERSIMPAN DIDATABASE
Pada tahap selanjutnya kita perlu menampilkan foto yang sudah tersimpan di server/database. Tujuan dari menyimpan nama/path foto didatabase tentu adalah supaya kita dengan mudah menemukan path atau alamat foto yang ingin kita tampilkan dari server.
Untuk itu silahkan modifikasi tabel dari file index.php sehingga terlihat menjadi seperti berikut
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Mahaiswa</th>
<th>Foto</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$tampil = $app->orderBy('mahasiswa_id')->get('mahasiswa');
$tampil->execute();
$no=1;
while($row=$tampil->fetch(PDO::FETCH_ASSOC)):
?>
<tr>
<td><?=$no?></td>
<td><?=$row['mahasiswa_nama']?></td>
<td><img src="<?=$row['mahasiswa_foto']?>" alt="Gambar 1" style="width: 100px;"></td>
<td>
<a href="edit.php?id=<?=$row['mahasiswa_id']?>" class="btn btn-warning btn-sm">Edit</a>
<a href="delete.php?id=<?=$row['mahasiswa_id']?>" class="btn btn-danger btn-sm">Hapus</a>
</td>
</tr>
<?php
$no+=1;
endwhile;
?>
</tbody>
</table>
Sampai disini seharusnya foto yang tersimpan bisa ditampilkan dengan baik seperti berikut ini
DELETE FOTO
Selanjutnya kita buat halaman untuk mendelete foto, buat file baru bernama delete.php lalu tempatkan script berikut didalamnya :
<?php
require_once __DIR__ .'/app/Autoloader/Psr4Autoloader.php';
use Core\Apps;
$app = new Apps;
if($row=$app->getTable('mahasiswa','mahasiswa_id',$_GET['id']))
{
//sebelum dihapus dari database, foto juga akan ikut dihapus dari direktori server
//persiapkan, simpan path foto dari db
$unlink = $row['mahasiswa_foto'];
if(!empty($unlink) && file_exists($unlink)) { unlink($unlink); }
if ($app->deleteTable('mahasiswa', 'mahasiswa_id', $row['mahasiswa_id'])) {
header("location:index.php");
}else{
die("error: Gagal menghapus data");
exit();
}
}
HALAMAN EDIT
Tahap selanjutnya kita akan buat halaman edit foto, dimana halaman edit ini bisa optional, maksudnya kita dapat memilih untuk mengganti foto atau tidak.
<?php
//halaman edit.php
require_once 'edit_proses.php';
?>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Upload Verot</title>
<style>
body {
background-color: #f8f9fa;
}
.card {
margin-bottom: 20px;
}
.result {
background-color: #e9ecef;
border: 1px solid #ced4da;
padding: 15px;
border-radius: 5px;
}
h1 {
color: #007bff;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4"> Verot Class Upload PHP</h1>
<?php
if($row==true):
?>
<div class="card">
<div class="card-body">
<h2 class="card-title">Upload Gambar</h2>
<?php
foreach ($error as $err) {
echo '<div class="alert alert-danger">'.$err.'</div>';
}
?>
<?php
if($sukses==true){
echo '<div class="alert alert-success">'.$sukses.'</div>';
}
?>
<?php
if($gagal==true){
echo '<div class="alert alert-danger">'.$gagal.'</div>';
}
?>
<form enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['REQUEST_URI']?>">
<div class="form-group">
<label>Nama mahasiswa</label>
<input class="form-control" name="mahasiswa_nama" value="<?=$row['mahasiswa_nama']?>" required="">
</div>
<div class="form-group">
<input type="file" name="mahasiswa_foto" >
</div>
<div class="form-group">
<img src="<?=$row['mahasiswa_foto']?>" name="mahasiswa_foto" width="80"/>
</div>
<div class="form-group">
<input class="btn btn-md btn-primary" type="submit" name="Submit" value="simpan">
</div>
</form>
</div>
</div>
<?php
else:
?>
<div class="alert alert-danger">Data tidak temukan</div>
<?php endif; ?>
</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
<?php
//halaman edit_proses.php
require_once __DIR__.'/app/Autoloader/Psr4autoloader.php';
require_once __DIR__.'/vendor/autoload.php';
use Core\Apps;
use Verot\Upload\Upload;
$app = new Apps;
$id = isset($_GET['id'])?(int)$_GET['id']:0;
$row = $app->getTable('mahasiswa','mahasiswa_id',$id);
$error = [];
$sukses = '';
$gagal = '';
if($_SERVER['REQUEST_METHOD']=='POST')
{
//membuat foto pada halaman edit jadi optional
//bisa diganti bisa tidak
$data = [
'mahasiswa_id'=>$row['mahasiswa_id'],
'mahasiswa_nama'=>$_POST['mahasiswa_nama'],
'mahasiswa_foto'=>isset($_FILES['mahasiswa_foto']['name']) ? $_FILES['mahasiswa_foto']['name'] : null,
];
if(empty($data['mahasiswa_nama'])){
$error []= "Nama wajib diisi";
}
//jika foto mahsiswa tidak kosong
if(!empty($_FILES['mahasiswa_foto']['name'])){
$upload = new Upload($_FILES['mahasiswa_foto'],'id_ID');
$upload->file_max_size = 2000000;
$upload->allowed=array('image/*');
//rename
$random_name = bin2hex(random_bytes(16));
$upload->file_new_name_body =$random_name;
//crop
$upload->image_resize = true;
$upload->image_ratio_crop = true;
$upload->image_x = 200;
$upload->image_y = 200;
$upload->process('upload');
if(!$upload->processed){
$error[]=$upload->error;
}
}
if(count($error)==0){
//jika foto tidak kosong
if(!empty($data['mahasiswa_foto'])){
$data['mahasiswa_foto']=$upload->file_dst_pathname;
}else{
//jika kosong pake sebelumnya
$data['mahasiswa_foto']=$row['mahasiswa_foto'];
}
$where = ['mahasiswa_id' => $row['mahasiswa_id']];
if($app->updateTable('mahasiswa', $data, $where)) {
$sukses = 'Data berhasil diupdate';
echo "<meta http-equiv=\"refresh\"content=\"3;URL=index.php\"/>";
}else{
$gagal = 'Data gagal diupdate';
}
}
}
MENYIMPAN FOTO DENGAN BASE64
Selanjutnya jika seandainya kita menginginkan file yang kita simpan kedalam database di enkripsi atau encode oleh fungsi base64 php, maka caranya cukup mudah, kita cukup menggunakan fungsi file_get_content dari path file keseluruhan, selanjutnya kita modifikasi file upload.php dan rubah atau tambah parameter sebelum $data seperti berikut :
if(count($error)==0){
//simpan atau encode ke base64
$filePath = $upload->file_dst_pathname;
$imageData = file_get_contents($filePath);
$base64 = base64_encode($imageData);
$data = [
'mahasiswa_nama'=>$_POST['mahasiswa_nama'],
'mahasiswa_foto'=>$base64
];
if($app->insertTable('mahasiswa',$data))
{
$sukses = 'Berhasil disimpan';
}else{
$gagal = 'Gagal disimpan';
}
}
Selanjutnya untuk menampilkan atau memanggil gambarnya, kita bisa menggunakan parameter seperti brikut :
<td><img src="data:image/jpeg;base64,<?=$row['mahasiswa_foto']?>" width="100px" alt="Foto"></td>
Gambar yang tersimpan didatabase nantinya berupa string format base64 tetapi file di server tidak atau hanya menggunakan string biasa sesuai konfigurasi masing - masing.
Jadi kode diatas akan membuat file gambar dirubah dari binari menjadi string base64 yang terencode. Tetapi perlu diingat bahwa proses ini dapat meningkatkan ukuran data sekitar 33% karena setiap 3 bytes dalam data biner gambar akan dirubah menjadi 4 bytes dalam format base64.
Video CRUD Foto Dengan Verot Class Upload PHP
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple
Pernah coba bikin metode CRUD untuk kamus online. Tanpa gambar sih. Keren ini mas
ReplyDeleteJadi tambah ilmu
ReplyDeletehasilnya keren ya