Tutorial PHP Lanjutan Part 33 : Upload Dan Crop Image Menggunakan PHP Dan AJAX
Tutorial PHP Lanjutan Part 33 : Upload Dan Crop Image Menggunakan PHP Dan AJAX - Hello everyone selamat datang kembali
diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih
mempelajari Upload Dan Crop Image Menggunakan PHP Dan AJAX.
Dalam
pengembangan sebuah website mungkin kamu akan membuat fitur upload foto untuk
kebutuhan foto profile, dokumen atau hal yang lainnya. Namun mungkin kamu akan
menginginkan kalau ukuran foto harus sesuai dengan kebutuhan aplikasi atau kamu
ingin membuat fitur upload foto namun foto tersebut harus dicrop terlebih
dahulu sebelum diupload keserver maka dari itu saya ingin berbagi tutorial
untuk membuat fitur tersebut.
Penasaran
gak? Simak terus ya guys!
Upload Dan Crop Image Menggunakan PHP Dan AJAX
Teman-teman
mungkin pada tutorial sebelumnya pada website ini, saya membahas upload file/foto
namun foto tersebut dipindahkan kedalam folder yang kita. Nah pada tutorial ini
sangat berbeda sekali ya! Karena saya akan menyimpan fotonya kedalam
databasenya jadi jangan bingung lagi ya :D.
Membuat Database
Buatlah
database dengan nama “belajarwithib” lalu buat table didalam database tersebut
dengan nama “foto” setelah itu isi kolom/fieldnya seperti dibawah :
Perlu kamu
perhatikan pada field “foto_nama” disitu kita menggunakan tipe data “longblop”
jika beda kemungkinan akan error.
Kamu dapat
mencopy SQL dibawah agar jadi lebih mudah.
CREATE TABLE `foto` (
`id_foto` int(11) NOT NULL,
`foto_nama` longblob NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Okey saya
rasa kamu sudah berhasil membuat databasenya dan sekarang mari kita lanjutkan
lagi.
Tampilan Upload Foto
Oiya karena
kita menggunakan fitur CROP Image jadi saya menggunakan plugin/libbray CROPPIE buatan orang untuk mempermudah pekerjaan kita, kamu dapat mengecek nya disini untuk lebih jelas mengenai plugin/libbary tersebut .
Buat file
baru dengan nama index.php lalu ketikanlah code seperti dibawah :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
<title>Upload Dan Crop Image Menggunakan PHP Dan AJAX</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="card mt-5">
<div class="card-header">
Upload Dan Crop Image Menggunakan PHP Dan AJAX
</div>
<div class="card-body">
<div class="row">
<div class="mb-3">
<label class="form-label">Upload Foto Kamu Disini!</label><br>
<input type="file" name="upload_foto" id="upload_foto" >
</div>
<div id="daftar_foto"></div>
</div>
</div>
</div>
</div>
</div>
<!-- AWAL MODAL CROP -->
<div class="modal fade" id="modal_crop">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Crop Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id="image_preview" style="width:350px; margin-top:30px"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary crop_foto">Simpan Foto</button>
</div>
</div>
</div>
</div>
<!-- AKHIR MODAL CROP -->
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// Settingan dasar untuk CROPPIE
$image_crop = $('#image_preview').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
// Mengcrop foto yang ingin diupload
$('#upload_foto').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#modal_crop').modal('show');
});
// Memproses data
$('.crop_foto').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:'upload_foto.php',
type:'POST',
data:{"image":response},
success:function(data){
$('#modal_crop').modal('hide');
load_images();
alert(data);
}
})
});
});
// Load function
load_images();
// Menampilkan data dari database
function load_images(){
$.ajax({
url:"ambil_foto.php",
success:function(data){
$('#daftar_foto').html(data);
}
})
}
});
</script>
</body>
</html>
Penjelasan Singkat
Untuk
meload gambar dari database kita menggunakan AJAX lalu menampilkannya pada TAG
HTML yang sudah ditargetkan. bisa dijelaskan pada code dibawah :
// Load function
load_images();
// Menampilkan data dari database
function load_images(){
$.ajax({
url:"ambil_foto.php",
success:function(data){
$('#daftar_foto').html(data);
}
})
}
Karena kita
menggunakan library CROPPIE, saya memanggil asset diperlukan menggunakan CDN
agar lebih ringan dan lebih simple saja.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
Pada code
diatas, kita tetap menggunakan JQUERY ya!
Lalu untuk
membuat cropnya bisa dilihat pada code dibawah ini :
// Settingan dasar untuk CROPPIE
$image_crop = $('#image_preview').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
// Mengcrop foto yang ingin diupload
$('#upload_foto').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#modal_crop').modal('show');
});
// Memproses data
$('.crop_foto').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:'upload_foto.php',
type:'POST',
data:{"image":response},
success:function(data){
$('#modal_crop').modal('hide');
load_images();
alert(data);
}
})
});
});
Fitur crop
tampil bersamaan dengan modal yang sudah disetting setelah selesai di crop maka
ajax lah yang akan mengirimkan data nya untuk diproses lebih lanjut.
Memproses Data Foto Yang Sudah Dicrop
Langsung
saja buat file baru dengan nama upload_foto.php lalu ketik code seperti dibawah
:
upload_foto.php
<?php
if(isset($_POST["image"])){
// Koneksi ke database
$koneksi = mysqli_connect("localhost","root","","belajarwithib");
// Mengembalikan hasil encode atau men-decode string
$data = $_POST["image"];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents($imageName, $data);
$image_file = addslashes(file_get_contents($imageName));
// Memasukan data kedalam database
$query = "INSERT INTO foto(foto_nama) VALUES ('$image_file')";
$insert = mysqli_query($koneksi,$query);
if($insert){
echo 'Foto berhasil diupload!';
unlink($imageName);
}
}
?>
Nah code
diatas akan mengubah foto sesuai dengan request yang nanti keluaran dari file
nya berekstensi PNG setelah itu kita langsung saja deh upload ke database.
Menampilkan Data Dari Database
Karena untuk menampilkan datanya menggunakan ajax jadi disini kita buat file khusus untuk memanggil data dari database.
Buat file
baru dengan nama “ambil_foto.php” lalu
ketikan saja code seperti dibawah
ambil_foto.php
<?php
// Membuat koneksi kedatabase
$koneksi = mysqli_connect("localhost","root","","belajarwithib");
// Mengambil data dari database
$ambi_foto = mysqli_query($koneksi,"SELECT * FROM foto ORDER BY id_foto DESC");
// Menghitung jumlah record data
$cek_foto = mysqli_num_rows($ambi_foto);
// Variabel kosong yang nantinya akan diisi sesuai kondisi
$output = '';
// Mengecek ketersedian data apa kah ada atau kosong
if ($cek_foto > 0) {
// Mengubah data kebentuk array
while($dta = mysqli_fetch_array($ambi_foto)){
$output .= '<div class="col-md-12 mt-2">';
$output .= '<img src="data:image/png;base64,'.base64_encode($dta['foto_nama']).'" class="img-thumbnail" />';
$output .= '</div>';
}
} else{
$output .= '<div class="col-md-12">';
$output .= '<h4 class="text-center">Tidak Ada Data!<h4>';
$output .= '</div>';
}
// Menampilkan keluaranan
echo $output;
?>
Memanggil
filenya sama seperti biasanya cumin bedanya disini kita menggunakan base64_encode()
yang fungsinya berguna untuk men-encode string.
Hasil dari
artikel ini akan seperti dibawah kurang lebih :
File Untuk Kebutuhan Belajar
Source Code
Upload Dan Crop Image Menggunakan PHP Dan AJAX
Selebihnya
kamu dapat mengembangkannya sendiri misalnya cropnya inginnya berbentuk
lingkaran juga bisa atau ukurannya bisa juga disetting untuk kebutuhan kalian
tinggal baca saja didalam documentasinya karena semua sudah lengkap dibahas
untuk penggunakan CROPPIE.
Semoga Membantu!