Memberi Thumbnail Gambar Pada Foto Dengan Kode PHP

Tahukah Anda dengan istilah thumbnail? Thumbnail adalah image yang berukuran lebih kecil dari ukuran aslinya. Misalkan ukuran asli pixel dari suatu image adalah 1000×2000, dan misalkan kita buat thumbnail dari image tersebut dengan proporsi 50% dari image aslinya, maka akan diperoleh image dengan ukuran 500×1000 pixel.

Biasanya thumbnail ini digunakan untuk katalog untuk toko online guna memamerkan daftar produknya, seperti halnya rencana mas Erwin Julianto yang ingin membuka toko onlinenya. Thanks mas Erwin atas permintaannya untuk mbuatin scriptnya, so… saya termotivasi untuk menulis artikel ini. Selain itu thumbnail biasa digunakan untuk album foto, seperti miliknya Friendster.

Nah pada artikel kali ini, akan saya jelaskan cara membuat script PHP untuk membuat thumbnail ini. Skenarionya adalah, user bisa mengupload file image asli ke database, lalu daftar image yang sudah diupload akan ditampilkan dalam bentuk thumbnail. Untuk setiap thumbnail bisa diklik untuk melihat image secara full view sesuai ukuran aslinya.

Pertama-tama, kita siapkan terlebih dahulu tabel untuk menyimpan file imagenya.

CREATE TABLE image (
  id int(11) NOT NULL auto_increment,
  title varchar(100),
  image longblob,
  PRIMARY KEY  (`id`)
)

Oya… untuk menampung data foto di database, kita butuh field dengan tipe data BLOB. Boleh menggunakan BLOB, LONGBLOB atau MEDIUMBLOB, tergantung perkiraan ukuran image.

Selanjutnya kita buat form untuk proses upload image.

<form enctype="multipart/form-data" action="upload.php" method="post">
Judul Image <input name="text" type="title" />
Pilih File Image <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input name="image" type="file" />
<input type="submit" name="submit" value="Submit" />
</form>

Tag

Digunakan untuk mengatur ukuran maksimum file yang akan diupload. Dalam hal ini dibatasi 2MB.

Setelah form dibuat, kita bisa membuat script upload.php nya

<?php
// membuat temporary name untuk file image
$tmpName   = $_FILES['image']['tmp_name'];
$title     = $_POST['title'];

// membaca data file image temporary
$fp        = fopen($tmpName, 'r');
$dataimage = fread($fp, filesize($tmpName));

// mengganti data image berupa slash menjadi double slash
$dataimage = addslashes($dataimage);

fclose($fp);

mysql_connect('hostName','dbUserName','dbUserPass');
mysql_select_db('dbName');

$query = "INSERT INTO image(title, image) VALUES ('$title', '$dataimage')";
$hasil = mysql_query($query);
if ($hasil) echo "Upload image ke database sukses";
else echo "Upload image ke database gagal";
?>

Nah… setelah kita buat script untuk upload, selanjutnya kita akan buat script untuk menampilkan thumbnail semua image yang telah diupload.

index.php

<?php

mysql_connect('hostName','dbUserName','dbUserPass');
mysql_select_db('dbName');

$query = "SELECT id, title FROM image";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 echo "<img src='thumbnail.php?id=".$data['id']."'><br>".$data['title']."<br>";
 echo "<a href='view.php?id=".$data['id']."'>Full View</a><br><hr>";
}
?>

Perhatikan script index.php di atas, bahwa untuk setiap menampilkan thumbnail, digunakan script thumbnail.php disertai dengan parameter id. Fungsi dari script thumbnail.php ini adalah membuat thumbnail untuk setiap image sesuai id image masing-masing. Di bawah thumbnail terdapat judul image dan juga link untuk melihat image aslinya. Link ini menuju ke script view.php, disertai dengan parameter id image.

Berikut ini isi script dari thumbnail.php nya

thumbnail.php

<?php

mysql_connect('hostName','dbUserName','dbUserPass');
mysql_select_db('dbName');

// mendapatkan id image
$id = $_GET['id'];

$query = "SELECT image FROM image WHERE id = $id";
$hasil = mysql_query($query);
$data  = mysql_fetch_array($hasil);

$proporsi = 0.1; // thumbnail 10% dari ukuran asli

// membuat image dari string database
$img = imagecreatefromstring($data['image']);

// mendapatkan ukuran panjang dan tinggi pixel
$width = imagesx($img);
$height = imagesy($img);

// mengatur panjang dan lebar ukuran thumbnail
// sesuai proporsi
define("T_WIDTH", $width*$proporsi);
define("T_HEIGHT", $height*$proporsi);

// menyiapkan image baru untuk thumbnail
$img_copy = imagecreatetruecolor(T_WIDTH, T_HEIGHT);

// membuat image untuk thumbnail dengan mengubah ukuran
// image asli
imagecopyresized($img_copy, $img, 0, 0, 0, 0, T_WIDTH, T_HEIGHT, $width, $height);

// output thumbnail
header("Content-type: image/jpeg");
imagejpeg($img_copy);

?>

Sedangkan isi dari view.php adalah

view.php

<?

mysql_connect('hostName','dbUserName','dbUserPass');
mysql_select_db('dbName');

$id = $_GET['id'];

$query = "SELECT image FROM image WHERE id = $id";
$hasil = mysql_query($query);
$data = mysql_fetch_array($hasil);

header('Content-type: image/jpeg');
echo $data['image'];

?>

Wuih… panjang juga tutorialnya. Tapi… mudah-mudahan berguna bagi Anda. Bila ada hal-hal yang perlu didiskusikan atau ditanyakan, silakan isi komentar di bawah ini.

Oya… Anda bisa mendapatkan source code script di atas dengan mendownloadnya disini

Tweet