bikin halaman upload foto dengan thumbnails dan resize

Tutorial kali ini gw akan ngebahas gimana caranya lo upload image berukuran besar dan image asli tetap tersimpan di folder berikut image yang sudah di resize ukurannya sehingga menjadi image thumbnail. Sebelum melangkah lebih jauh mending buka ini dulu deh Membuat halaman Upload dan Download gunanya untuk mereview kembali cara upload lewat php dan menyimpan file itu ke dalam folder yang kita buat di htdocs.

Jika sudah dan merasa gak perlu oke kita lanjutin yah.ini merupakan tutorial untuk mengupload foto dalam web php kita, dan foto asli yang kita upload akan langsung kita buat thumbnailsnya yaitu menyimpan foto ukuran asli dan menyimpan foto ukuran yang sudah terkompres. yang pertama kita siapin adalah databasenya dulu kasih nama databasenya 'image', siapin table dengan format

CREATE TABLE IF NOT EXISTS `resize` (
  `id_img` int(11) NOT NULL AUTO_INCREMENT,
  `filename` varchar(100) NOT NULL,
  `size` varchar(100) NOT NULL,
  `type` varchar(100) NOT NULL,
  PRIMARY KEY (`id_img`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=125 ;

lalu kita buat folder bernama resize di htdocs seperti gambar ini

folder dan file-file yang harus dibuat

di dalam folder gambar buat folder lagi bernama thumbs. oke kita buat dulu file koneksinya ya supaya terhubung ke database yang udah kita buat berikut ini file koneksi.php

<?php
$host    = "localhost";
$user    = "root";
$pass    = "";
$db      = "image";

mysql_connect("$host","$user","$pass") or die ("tidak ada koneksi");
mysql_select_db("$db") or die ("tidak ada database");
?>

lanjut kita buat form buat upload filenya simpan dengan nama form_img.php berikut ini skripnya

<form method="POST" name="form_img" action="form_submit.php" enctype='multipart/form-data'>
<table>
<tr>
        <td>Add image</td>
        <td>:</td>
        <td><input type='file' name='F1'><i> *)Pilih Gambar yang sesuai dengan Kode Film</i></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <th><input type='submit' name='save' value='Save to Directory'></th>
    </tr>
</table>
</form> 

berikut ini adalah hasil dari skrip diatas, bikin simpel aja dulu yaa *padahal gw sendiri yang males*

loh kok ada F1?? itu fungsinya buat namain aja biar keren, nanti kepake pas di skrip selanjutnya. oke lanjut lagi buat file form_submit.php berikut ini adalah skripnya 

<?php
include "koneksi.php";
include "thumbnail.php";

$F1         = $_FILES['F1']['tmp_name'];
$F1Name     = $_FILES['F1']['name'];
$F1Type     = $_FILES['F1']['type'];
$F1Size     = $_FILES['F1']['size'];

Upload($F1Name);

mysql_query("INSERT INTO resize(filename,size,type)
        VALUES (
                '$F1Name',
                '$F1Size',
                '$F1Type')");
        echo "<script>alert('Image berhasil diupload');window.location='form_img.php'</script>";
?> 

liat ada yang gw tebelin ?? itu inti dari skrip buat bikin thumbnailsnya sekarang bikin file thumbnails.php
<?php
function Upload($uploadName){
    $direktori          = "gambar/";
    $direktoriThumb     = "gambar/thumbs/";
    $file               = $direktori.$uploadName;
   
    //simpan gambar ukuran sebenernya
    $realImagesName     = $_FILES['F1']['tmp_name'];
    move_uploaded_file($realImagesName, $file);
   
    //identitas file gambar
    $realImages             = imagecreatefromjpeg($file);
    $width                  = imageSX($realImages);
    $height                 = imageSY($realImages);
   
    //simpan ukuran thumbs
    $thumbWidth     = 150;
    $thumbHeight    = ($thumbWidth / $width) * $height;
   
    //mengubah ukuran gambar
    $thumbImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
    imagecopyresampled($thumbImage, $realImages, 0,0,0,0, $thumbWidth, $thumbHeight, $width, $height);
   
    //simpan gambar thumbnail
    imagejpeg($thumbImage,$direktoriThumb."thumb_".$uploadName);
   
    //hapus objek gambar dalam memori
    imagedestroy($realImages);
    imagedestroy($thumbImage);
    }

?>

berikut ini adalah hasilnya kalo sukses ya, cek di folder resize kita dan liat di database yang kita buat apakah ada informasi mengenai file yang kita upload

isi folder gambar kalo sukses

kalo sukses berati kan tinggal di tampilin doang kan ya, terus biar nampilinya gimana ?? bikin file kasih nama view.php. ini dia skripnya. 

<?php
include "koneksi.php";
$tampil = mysql_query("SELECT * FROM resize ");
while ($r=mysql_fetch_array($tampil))
{
echo"
<table>
        <tr>
        <td>
        ini adalah thumbnail
        <img src='gambar/thumbs/thumb_$r[filename]'>
        </td>
        </tr>
        <tr>
        <td>
        Ukuran Asli<br/>
        $r[filename]<br/>
        $r[type]<br/>
        $r[size]<br/>
        <img src='gambar/$r[filename]'></td>
        </tr>
</table>";
}
?>

dan kalo kita liat di browser maka hasilnya seperti ini

hasil di browser

keliatan kan perbandingan antara gambar thumbnailnya sama gambar aslinya. tutorial ini diambil dari berbagai sumber jadi terserah kalo mau di copy paste mah. kalo ada yang masih bingung atau belum sukses boleh tanya gw langsung kok. muchos gracias !!