Thursday, January 10, 2019

Membuat Thumbnail Gambar

Tutorial Pentingnya Membuat Thumbnail Gambar Pada Website dengan PHP (Source Code)

 print this page Print this page
Tutorial Membuat Thumbnail Gambar Pada Website-Thumbnail adalah suatu teknik untuk membuat gambar dalam dimensi ukuran yang telah kita tentukan, dalam teknik thumbnail sendiri, biasanya dimensinya lebih kecil dari gambar aslinya, namun tetap saja memiliki kualitas gambar yang sama dengan gambar aslinya.
Teknik Thumbnail sendiri sangat penting dalam proses develop sebuah website, namun banyak orang atau web developer menyangkal dan mengakalinya dengan Tag HTML seperti:
<img scr="gambar.jpg" width="250" height="150">
Jika ukuran gambar aslinya adalah 1024 x 768, maka bisa saja gambar yang ditampilkan kurang bagus seperti mempunyai bentuk yang tidak proporsional, dan yang paling parah adalah bisa saja mempengaruhi waktu akses website menjadi lebih lama atau boros bandwidth, bagaimana bisa?


karena meskipun gambar yang ditampilkan dimensi ukurannya kecil, tapi sebenarnya yang dipanggil adalah gambar aslinya yang berukuran  1024 x 768 tadi, bayangkan jika yang dipanggil banyak gambar, tentu akan sangat memakan waktu karena "berat".  So, intinya menggunakan teknik resize lewat HTML tidak bisa berbohong pada memory atau resource yang digunakan untuk menampilkan gambar tersebut. Apakah sampai disini kamu sudah tahu pentingnya teknik thumbnail?
Ok, jika sudah paham pengenalan dan teorinya, langsung saja saya akan buat scriptnya.
Oh ya scritpnya agak panjang, tapi tenang saja karena kamu bisa donwload di akhir tutorial.

So what we need?
Pertama, buat database, field dan tablenya serta buat folder dengan nama files untuk menyimpan file yang di upload. 
Kedua, buat fungsi thumbnailnya 
script fungsi_thumbnail.php
<?php
function UploadImage($fupload_name){
  // Tentukan folder dan file gambar yang di upload
  $folder = "files/";

  $file_upload = $folder . $fupload_name;

  // Simpan gambar dalam ukuran aslinya
  move_uploaded_file($_FILES["fupload"]["tmp_name"], $file_upload);

  // Identitas file asli
  $gbr_asli = imagecreatefromjpeg($file_upload);
  $lebar    = imageSX($gbr_asli);
  $tinggi  = imageSY($gbr_asli);

  // Simpan dalam versi thumbnail (110 pixel)
  $thumb_lebar  = 110;
  $thumb_tinggi = ($thumb_lebar/$lebar) * $tinggi;

  // Proses perubahan dimensi ukuran
  $gbr_thumb = imagecreatetruecolor($thumb_lebar,$thumb_tinggi);
  imagecopyresampled($gbr_thumb, $gbr_asli, 0, 0, 0, 0, $thumb_lebar, $thumb_tinggi, $lebar, $tinggi);

  // Simpan gambar thumbnail
  imagejpeg($gbr_thumb,$folder . "thumb_" . $fupload_name);
  
  // Hapus gambar di memori komputer
  imagedestroy($gbr_asli);
  imagedestroy($gbr_thumb);
}
?>
maksud dari script di atas adalah, berapapun ukuran gambar yang di upload, nanti akan dibuat versi thumbnailnya dengan lebar 110pixel, sedangkan tinggi dari gambar akan menyesuaikan secara proporsional menurut lebarnya 

Ketiga, buat script untuk mengupload gambarnya 
script form_thumbnail.php
<html>
<title>Form Upload</title>
<body>

<form enctype="multipart/form-data" method="POST" action="hasil_thumbnail.php">
File Gambar : <input type="file" name="fupload">
<br><br><input type=submit value=Upload>
</form>
dapat dilihat dari script di atas, bahwa setelah file di upload akan langsung direct ke file hasil_thumbnail.php

Kempat, Buat script untuk menampilkan hasil gambar asli dan thumbnail
script hasil_thumbnail.php
<?php
include "fungsi_thumbnail.php";

$lokasi_file    = $_FILES['fupload']['tmp_name'];
$tipe_file      = $_FILES['fupload']['type'];
$nama_file      = $_FILES['fupload']['name'];

// Membuat nama file yang unik
$acak           = rand(1,99);
$nama_file_unik = $acak.$nama_file;

if ($tipe_file!="image/jpeg" AND $tipe_file!="image/pjpeg"){
  echo "Upload Gagal, file yang di upload harus bertipe JPG";
}
else{
  // Gunakan fungsi thumbnail gambar untuk upload gambar
  UploadImage($nama_file_unik);

  // Masukkan informasi file ke database
  $konek = mysqli_connect("localhost","root","","thumbnail");
  $query = "INSERT INTO upload (nama_file) VALUES('$nama_file_unik')";
  mysqli_query($konek, $query);

  // Tampilkan gambar asli di browser
  echo "<img src=\"files/$nama_file_unik\">"; 
  
  // Tampilkan gambar thumbnail di browser
  echo "<br><br>
  <img src=\"files/thumb_$nama_file_unik\">";
}
?>
Gambar yang bisa di thumbnail pada script tersebut baru mendukung format JPG, jadi saat ingin menggunakan fungsi ini pastikan gambarnya berformat JPG
atau bisa berkunjung disinih yah klik

No comments:

Membuat Thumbnail Gambar

Tutorial Pentingnya Membuat Thumbnail Gambar Pada Website dengan PHP (Source Code)    Print this page Tutorial Membuat Thumbnail G...