PHP banyak digunakan untuk membuat aplikasi berbasis web. PHP ini merupakan server scripting yang artinya seluruh script dieksekusi di sisi server. Jadi jika Anda sedang mengakses sebuah web yang ada script PHP-nya, ini artinya Anda sedang menjalankan script yang ada di server bukan di PC/laptop Anda walaupun Anda mengakses aplikasi web melalui web browser yang ada di laptop. Jadi seluruh resource yang dibutuhkan aplikasi web ada di server, sama sekali tidak menghabiskan resource yang ada di PC lokal (kecuali sedikit memori di RAM untuk menjalankan aplikasi web browser).
Demikian sedikit overview mengenai PHP, mari kita lanjut pembelajaran PHP untuk membuat form upload. Halaman web berbasi PHP ini digunakan untuk mengunggah (upload) file image (gambar) dari PC lokal ke file storage (harddisk) yang Anda di server. Ingat, tadi sudah saya katakan di awal bahwa script PHP ini running di server, jadi file yang di-upload akan disimpan di server bukan di harddisk PC/laptop Anda (kecuali jika PC/laptop lokal dijadikan server).
Upload Image dengan PHP
Baik, langsung saja. Berikut ini adalah script PHP untuk upload image. Simpan dengan nama ‘upload.php’
<?php
$target_dir = "images/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// cek image/file gambar
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File adalah image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File bukan image.";
$uploadOk = 0;
}
}
// Cek error
if ($uploadOk == 0) {
echo "file gagal di-upload";
// jika ok, try to upload
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "File ". basename( $_FILES["fileToUpload"]["name"]). " sukses di-upload";
} else {
echo "Maaf, ada error...";
}
}
?>
Berikutnya, kita bikin form HTML-nya untuk membuat tampilan sederhana untuk menangani user experience. Form ini digunakan untuk memanggil API file explorer yang di PC lokal dan mengunggahnya ke server setelah menekan tombol ‘upload’. Berikut adalah file html-nya. Simpan dengan nama ‘index.html’
<!DOCTYPE html> <html> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> Pilih image yang akan di-upload: <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </body> </html>
Simpan kedua file di atas di folder yang sama, katakanlah dengan nama ‘upload’. Letakkan folder ‘upload’ ini di bawah folder ‘htdocs’ di C:/xampp
Catatan: XAMPP adalah freeware berbasis Windows yang menyediakan bundling Apache (web server), PHP5 (server scripting/preprocessor) dan MySQL (database). Bisa Anda download di sini. XAMPP ini bisa Anda gunakan untuk membuat semacam web server lokal di PC/laptop Anda. Dengan demikian Anda dapat men-simulasikan server-client di PC lokal sebelum Anda pindah ke server sebenarnya di internet/intranet.
Perhatikan dalam file ‘index.html’, Anda akan ‘melempar’ parameter yang dimasukkan user ke file ‘upload.php’ dalam bentuk form dengan method ‘POST’ (parameter tidak terlihat saat ‘dilempar’ ke php server). Jika Anda menggunakan metode POST di sisi client (HTML), maka di sisi server Anda juga harus menanganinya dengan metode POST juga (lihat kembali file upload.php)
Catatan : Ada dua macam metode komunikasi antara client dan server menggunakan HTTP request, yakni GET dan POST
Perhatikan pula bahwa untuk meng-upload sebuah image (file PNG atau JPG/JPEG), tipe parameter ‘enctype’ dalam form HTML harus menggunakan ‘multipart/form-data’. Tipe ini sebenarnya adalah untuk meng-upload tipe file dalam bentuk data stream.
Catatan: file image kalau kita lihat secara low level adalah kumpulan angka biner (1 dan 0) yang membentuk sebuah tampilan visual (gambar). Cara mengirimnya ke server adalah dengan cara mengirim satu persatu angka biner tadi melalui saluran komunikasi (internet/intranet). Inilah yang dinamakan ‘data stream’.
Ohya, berdasarkan script php di atas, setiap image yang di-upload akan disimpan di folder ‘images’. Oleh karena itu buatlah subfolder ‘images’ di bawah folder ‘/upload’ untuk menampung file yang di-upload. Untuk mengeksekusi script di atas, buka web browser Anda dan ketik http://localhost/upload. Tampilannya kurang lebih seperti pada gambar di bawah
Jika sudah berhasil, Anda dapat dengan mudah memindah script di atas ke server di internet (web hosting) di folder public_html
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com
di line 23 php nya saya eror eknapa ya dia bilang gni : File adalah image – image/jpeg.
Warning: move_uploaded_file(images/20171204_160806.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\Amey\upload.php on line 23
Warning: move_uploaded_file(): Unable to move ‘C:\xampp\tmp\php175D.tmp’ to ‘images/20171204_160806.jpg’ in C:\xampp\htdocs\Amey\upload.php on line 23
Maaf, ada error…
perhatikan folder path-nya mas, coba cek sekali lagi