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 mungk

Upload Dan Crop Image Menggunakan PHP Dan AJAX

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 :

Upload Dan Crop Image Menggunakan PHP Dan AJAX


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 :

Upload Dan Crop Image Menggunakan PHP Dan AJAX


Upload Dan Crop Image Menggunakan PHP Dan AJAX


Upload Dan Crop Image Menggunakan PHP Dan AJAX


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!