Cara Praktis Teknik Upload gambar dengan Thumbnail Dalam artikel kali ini kita akan membahas salah satu teknik PHP yang biasanya berada pada sebuah website, yakni Upload Gambar dengan Thumbnail.
Apa sih itu Thumbnail???
Thumbnail merupakan gambar kecil atau seperti icon yang merupakan hasil resize menjadi ukuran lebih kecil dari gambar aslinya. Secara sederhana untuk membuat thumbnail, kita cukup merubah ukuran gambar menjadi lebih kecil. Tetapi dengan cara ini gambar yang dihasilkan tidak persegi dan akan menghasilkan gambar yang tidak bagus atau perbandingan panjang dan lebar tidak sama dengan aslinya.
-
Dalam urusan upload images, nanti kita akan menemukan batasan-batasan, seperti :
-
Ukuran file yang boleh di upload tidak boleh lebih dari 2M sehingga apabila ada pengguna yang mengupload file lebih dari 2M, berikan informasi atau peringatan bahwa ukuran file melebihi ketentuan. Untuk mendapatkan informasi ukuran file, gunakan fungsi :
$_FILES['nama_file']['size'] -
Menentukan type file yang boleh di upload, dalam beberapa kasus seperti upload foto maka jangan sampai pengguna bisa mengupload file yang bukan foto. Untuk mendapatkan informasi type dari suatu file, gunakan fungsi :
$_FILES['nama_file']['type'] - Mencegah terjadinya overwrite file, pada saat mengupload file, ada kemungkinan terjadi nama file yang diupload sudah ada diserver, inilah yang disebut dengan overwrite, dimana file sebelumnya akan hilang karena akan tertimpa oleh file yang baru saja diupload dengan nama yang sama. Untuk mengatasi masalah tersebut, kita akan memberikan nama yang unik pada setiap file yang diupload dan dilakukan secara otomatis.
Hadewh.... dari tadi teori mulu nih....., Oke, kita langsung aja ke TKP.
-
Hal pertama kita harus membuat database. Buat database dengan nama latihan_php, dengan nama tabel upload_images.
-
Berikut struktur tabelnya :
- id int(3) primary key auto_increment not null
- nama varchar(30) not null
- images varchar(100) not null
- tgl_upload date
- Selanjutnya yang harus dilakukan kita harus menyiapkan sebuah folder untuk menyimpan gambar yang di upload, buat folder dengan nama images
-
Selanjutnya kita membuat file dengan nama index.php, file ini berfungsi untuk mengupload file images dan config.php untuk koneksi databanya.
index.php<!DOCTYPE html> <html> <head> <title>Upload Images</title> <style type="text/css"> *{ font-family: sans-serif; } body{ width:80%; margin: 10% auto; } span{ margin: 20px; font-weight: bold; } button{ background-color: red; color: #fff; margin-left: 20px padding : 5px; } </style> </head> <body> <h2>sks.com</h2> <p>Belajar Upload Images dengan Thumbnail dengan meresize ukuran gambar</p> <div id="wrapper"> <form action="proses.php" method="post" enctype="multipart/form-data"> <span>Nama</span> <input type="text" name="nama"><br><br> <span>Image</span> <input type="file" name="image"><br><br> <button type="submit" name="upload">Upload Images</button> </form> </div> </body> </html>config.php<?php // deklarasi vaiabel $host = "localhost"; $user = "root"; $pass = ""; $database = "latihan_php"; $con = mysqli_connect($host, $user, $pass, $database) or die(mysqli_error("Database tidak diketemukan")); ?>Pada sintaks diatas akan menghasilkan tampilan seperti dibawah ini
-
Kemudian kita membuat file dengan nama proses.php, file ini yang bertanggung jawab untuk proses upload file gambar di database dan ke folder images
proses.php<?php // include koneksi include_once "config.php"; include_once "thumbnail.php"; // pendeklarasian variabel $nama = $_POST['nama']; $filename = $_FILES['image']['name']; $upload = $_POST['upload']; $tgl_upload = date("Ymd"); // logika jika tombol upload diklik if(isset($upload)){ if(empty($nama)){ echo "<script>alert('Form tidak boleh kosong!!!'); window.location=('index.php');</script>"; }else{ $extension = getExtension($filename); $extension = strtolower($extension); if(($extension != "jpg")&& ($extension != "jpeg") && ($extension != "png")){ echo "<script>window.alert('Maaf! Hanya mendukung JPG, JPEG, PNG'); window.location=('index.php');</script>"; }else{ $sizekb = filesize($_FILES['image']['tmp_name']); if($sizekb > MAX_SIZE*1024){ echo "<script>window.alert('maaf! file terlalu besar'); window.location=(index.php);</script>"; }else{ $image_name = time().'.'.$extension; $ins = mysqli_query($con, "Insert INTO upload_images (nama, images, tgl_upload) values ('$nama', '$image_name','$tgl_upload')"); $new_name = "images/".$image_name; $copied = copy($_FILES['image']['tmp_name'], $new_name); $thumb_name = 'images/thumb_'.$image_name; $thumb = thumb($new_name,$thumb_name,WIDTH,HEIGHT); echo "<script>window.alert('berhasil di upload'); window.location=('view.php');</script>"; } } } } ?> -
buat file dengan nama thumbnail.php, pada bagian inilah yang bertanggungjawab untuk meresize images dari ukuran yang sebenarnya ke ukuran yang telah ditentukan (resize).
thumbnail.php<?php // membuat ukuran file upload dengan fungsi define define("MAX_SIZE", 800); // membuat ukuran width dan height menjadi 200 define("HEIGHT", 200); define("WIDTH", 200); // membuat function thumbnail image function thumb($img_name, $filename, $new_w, $new_h){ $ext = getExtension($img_name); if(!strcmp("jpg",$ext) or !strcmp("jpeg",$ext)){ $src_img = imagecreatefromjpeg($img_name); } if (!strcmp("png",$ext)) { $src_img = imagecreatefrompng($img_name); } //membuat dimensi dari image $src_w = imagesx($src_img); $src_h = imagesy($src_img); //membuat dimensi untuk thumbnail image $ratio1 = $src_w/$new_w; $ratio2 = $src_h/$new_h; if ($ratio1 > $ratio2) { $dst_w = $new_w; $dst_h = $src_w/$ratio1; }else{ $dst_h = $new_h; $dst_w = $src_h/$ratio2; } // menbuat image dengan dimensi baru $dst_img = imagecreatetruecolor($dst_w,$dst_h); imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dst_w, $dst_h, $src_w, $src_h); if(!strcmp("png",$filename)) imagepng($dst_img, $filename); else imagejpeg($dst_img, $filename); imagedestroy($dst_img); imagedestroy($src_img); } function getExtension($str){ $i = strrpos($str, "."); if(!$i){ return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1, $l); return $ext; } ?> -
langkah terakhir buat file view.php, disini kita akan menampilkan gambar yang sudah diupload.
view.php<?php include_once "config.php"; ?> <!DOCTYPE html> <html> <head> <title>Upload Images</title> <style type="text/css"> #wrapper{ margin:10% auto; width :80%; } button{ background-color: red; } a{ font-size: 15px; background-color: red; padding: 5px; color: #fff; text-decoration: none; } #tabel{ margin-top: 10px; } </style> </head> <body> <div id="wrapper"> <h2>Belajar membuat Upload Gambar</h2> <a href="index.php">Input File</a> <table id="tabel" border="1" cellspacing="0" cellpadding="5px"> <tr> <th>No</th> <th>Nama</th> <th>Gambar</th> <th>Tanggal Upload</th> </tr> <?php $query = mysqli_query($con, "select * from upload_images"); if(mysqli_num_rows($query) > 0){ $no = 1; while($r = mysqli_fetch_array($query)){ $id = $r['id']; $nama = $r['nama']; $gambar = "images/thumb_".$r['images']; $tgl_upload = $r['tgl_upload']; echo " <tr> <td>$no</td> <td>$nama</td> <td><img title='$nama' src='$gambar' width='100px' height='125px' ></td> <td>$tgl_upload</td> </tr> "; $no++; } } ?> </table> </div> </body> </html>Dari sintaks diatas akan menghasilkan view untuk file gambar yang sudah di upload
Jika temen-temen mengikuti langkah-langkah secara benar, maka akan didapat struktu dari folder dan file-file seperti pada gambar dibawah ini
Cukup mudah kan?? sekedar masukan aja, anda wajib menguasai teknik ini, karena saat anda mengerjakan suatu project web, saya pastikan teknik ini pasti akan ada pada project yang anda kembangkan. Cukup ini dulu yang saya share buat temen-temen, mungkin jika ada pertanyaan langsung aja komen pada form dibawah ini dan untuk link downloadnya ada dibawah ini.
1 Tanggapan untuk "Cara Praktis Teknik Upload gambar dengan Thumbnail"
proses.php tidak berjalan
Posting Komentar