Oke sob berikut langkah-angkah mengupload gambarnya :
1. Buat Database
Tentu hal yang pertama yang kita buat dalam upload image php pastinya adalah database, saya harap sobat sudah mengerti bagaimana membuat database, jadi saya bisa mempersingkat tutorial ini.. hehehe. silahkan buat database dengan struktur sebagai berikut :
Nama database : tutorial_blog
Nama Tabel : upload_gambar
struktur tabel : - id int Primary AI
- nama Varchar 100
- gambar Varchar 100
Catatan :
- int, varchar adalah jenis type data dari field table tersebut.
- Primary adalah indeks primer yang nanti akan menjadi sebuah nilai unik dari record field tersebut.
- AI adalah singkatan dari auto_increment sehingga field tersebut akan terinput angka secara otomatis dengan urut.
- 100 artinya adalah panjang karakter.
- untuk int sebenarnya bisa saja di beri nilai panjang. Jika kosong maka int default nilainya 11.
2. Membuat direktory / folder Web
Langkah selanjutnya kita buat direktori untuk menyimpan semua file php yang nanti kita akan buat. Buat direktori atau folder baru didalam htdocs pada paket web server XAMPP (*gunakan sesuai dengan paket web server yang sobat pakai). disini saya buat direktori upload_gambar. setelah mebuat direktori gambar sekarang tambahkan folder didalamnya dengan nama dir_gambar. folder dir_gambar tersebut akan menyimpan file gambar yang kita upload. berikut gambarnya :
 |
| folder upload gambar didalam htdocs |
 |
| Buat folder dir_gambar didalam folder upload_gambar |
3. Mengkoneksikan database
Selanjutnya buat file koneksi dengan php. File ini yang akan mengkoneksikan program kita dengan database. silahkan tulis script dibawah ini :
koneksi.php
<?php
/**
* author Pandu A.P
* visit my blog : http://www.angkringanblogpandu.blogspot.com/
*/
error_reporting(E_ALL^E_NOTICE);
$host = "localhost"; // definisi variabel host.
$username = "root";
$pass = ""; // karna saya menggunakan XAMPP secara default pass kosong!!!
$db_name = "tutorial_blog"; //definisi variable db_name (nama_database)
// melakukan koneksi dengan database
$conn = mysql_connect($host,$username,$pass) or die("koneksi gagal :".mysql_error());
mysql_select_db($db_name, $conn);
?>
Simpan didalam direktori upload_gambar yang tadi kita buat: C:/xampp/htdocs/upload_gambar/
4. Buat halaman utama
Buat halaman utama, dimana halaman ini akan muncul pertama kali jika program di jalankan web browser. buat dengan nama index. php
index.php
<?php
error_reporting(E_ALL^E_NOTICE);
include "koneksi.php"; // menyertakan file koneksi
?>
<!-- hmtl 5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Gambar | <?php echo $_GET['aksi'] ?></title>
</head>
<body>
<div align="center" id="HEADER"> <!-- header untuk judul -->
<h2>TUTORIAL UPLOAD GAMBAR</h2>
<h4>Upload dan simpan di database SQL menggunakan PHP </h4>
<hr>
</div>
<div id="content" align="center">
<?php
// membuat paging
$aksi = $_GET['aksi'];
switch ($aksi) {
default: // default ketika halaman/program pertama kali di buka
?>
<table border="1">
<tr>
<td colspan="4">
<button type="button" onclick="location.href='?aksi=tambah'">+ Tambah Gambar</button>
</td>
</tr>
<tr align="center">
<td>Id_gambar</td>
<td>Nama Gambar</td>
<td>Gambar</td>
<td>Aksi</td>
</tr>
<?php
// menampilkan data yang ada di database
$query_tampil = mysql_query("select * from upload_gambar"); // deklarasi query tampil untuk mnyeleksi keseluruhan field dalam table
while ($fetch_tampil = mysql_fetch_array($query_tampil)) { // mengambil value dari database dengan array
?>
<tr>
<td width="50"><?php echo $fetch_tampil[0] ?></td> <!-- menampilkan data dari field id_gambar -->
<td width="150"><?php echo $fetch_tampil[1] ?></td> <!-- menampilkan data dari field nama_gambar -->
<td width="300"><img src="dir_gambar/<?php echo $fetch_tampil[2] ?>" alt="maaf gamabar tidak ada" width=200 height=200></td> <!-- menampilkan data dari field gambar / mengambil nama gambar yang telah di upload -->
<td width="100"> <a href="?aksi=hapus&id=<?php echo $fetch_tampil[0] ?>"> Hapus</a></td>
</tr>
<?php
}
?>
</table>
<?php
break;
case 'tambah':
include "tambah.php"; //meyertakan file tambah untuk upload file
break;
case 'hapus':
include "hapus.php";
break;
}
?>
</div>
<div id="footer" style="margin-top : 10%;" align="center">
<p><b>visit my blog : <a href="http://www.angkringanblogpandu.blogspot.com/">http://angkringanblogpandu.blogspot.com/</a></b></p>
</div>
</body>
</html>
Pada kode diatas saya menggunakan teknik modularitas untuk mengeksekusi link-link yang ada di dalam file tersebut. penjelasan modularitas sudah saya bahas di artikel sebelumnya (baca disni : Modularitas Program dengan Fungsi Inlcude()).
5. Membuat form tambah
Selanjutnya buat form tambah yang nanti dengan nama tambah.php. hal ini disesuaikan dengan nama yang sudah kita masukan dalam file index diatas (lihat di struktur case pada file index.php). tulis kode dibawah ini.
tambah.php
<!-- membuat form untuk Upload gambar -->
<!-- Agar from terlihat lebih rapi saya menggunakan table -->
<form action="aksi_simpan.php" method="post" name="fupload" enctype="multipart/form-data">
<table border=0>
<tr>
<td colspan="3">
<h4>Form Upload Gambar </h4>
<hr>
</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>
<input type="text" name="nama" id="" placeholder="masukan nama" required>
</td>
</tr>
<tr>
<td>Pilih gambar</td>
<td>:</td>
<td>
<input type="file" name="gambar" accept="image/*" id="" required>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="simpan" value="Simpan Gambar">
<button type="button" onclick="history.go(-1)">Batal</button>
</td>
</tr>
</table>
</form>
Kenapa pada file tambah.php tidak terdapat struktur html? karna saya menggunakan teknik modularitas, jadi dalam form tersebut kita tidak perlu menulis kembali struktur html. mudah kan.. :). simpan file tersrbut sama dengan file koneksi yaitu berada di folder upload_gambar yang ada di htdocs : C:/xampp/htdocs/upload_gambar/
6. Membuat aksi untuk form tambah
Selanjutnya yang kita buat adalah aksi tambah. aksi tambah ini yang nanti akan mengeksekusi form pada file tambah.php... Saya sengaja memisah antara file form dengan file untuk eksekusinya, hal ini untuk memudahkan sobat dalam memahami kode program yang saya buat. silahkan tulis syntax dibawah ini beri nama aksi_simpan.php
aksi_simpan.php
<?php
error_reporting(E_ALL^E_NOTICE);
include "koneksi.php"; // menyertaakan file koneksi
// mengeksekusi form upload
// deklarasi variabel
$nama = $_POST['nama']; // deklarasi variabel yang mendefinisikan method post nama
if (isset($_POST['simpan'])) { //jika tombol simpan di klik
//deklarasi variabel untuk file yang di upload
$temp = $_FILES['gambar']['tmp_name']; // untuk menyimpan sementara file yang di upload
$format = $_FILES['gambar']['type']; // untuk menentukan format gambar
//maksud $_FILES['gambar'] adalag mengambil nilai pada form dengan input yang bernama gambar tadi
//membuat validasi file yang di upload gambar atau bukan
if ($format == "image/jpg" || $format == "image/jpeg" || $format == "image/png" || $format == "image/JPG") {
$nama_gambar = $_FILES['gambar']['name']; // definisi variabel nama gambar
$dir = "dir_gambar/$nama_gambar"; // definisi direktori atau folder tempat untuk disimpan gambar
$query_tambah = mysql_query("insert into upload_gambar values('','$nama','$nama_gambar')"); // karna field id_gambar saya buat Auto Increment. intinya nanti field tersebut akan terisi otomatis
if($query_tambah){ //jika query benar maka
move_uploaded_file($temp, $dir); //memindahkan file yang disimpan sementara tadi ke dalam direkori yang sudah kita buat.
?>
<script>
alert("berhasil di simpan");
location.href="index.php";
</script>
<?php
}
} else { //pengecualian jika format gambar bukan salah satu yang sudah di validasi
echo '<script>alert("maaf format file harus : *.jpg *.jpeg *.png")</script>';
}
}
?>
simpan file tersebut berada di folder upload_gambar yang ada di htdocs : C:/xampp/htdocs/upload_gambar/. Sebenarnya disyntax saya beri comment untuk penjelasan kode-kode diatas. Tapi saya kan sedikit akan mejelaskan beberapa kode yang penting dalam file diatas :
- ['tmp_name'] : ini adalah temporary atau penyimpanan sementara img yang di upload lewat form tadi.
- ['type'] : ini adalah format file yang di upload. dan untuk memvalidasi file upload tersebut agar terdeteksi gambar, maka saya buat syarat kondisi menggunkan IF, seperti kode file diatas.
- move_uploaded_file() : ini adalah fungsi untuk memindah file gamabar yang ada di penyimpanan sementara tadi ke dalam dir_gambar.
7. Membuat file hapus data
Sekarang kita buat file php untuk menghapus data gambar. Dalam sebuah program pastinya data gambar yang kita simpan tidak selamanya akan tersimpan terus, terkadang ingin menghapusya. Nah bagaimana menghapus file gambar yang tersimpan beserta data yang berapa pada database. silahkan tulis kode dibawah ini, beri nama hapus.php
hapus.php
<?php
error_reporting(E_ALL^E_NOTICE);
include "koneksi.php";
$id = $_GET['id']; // deklarasi vasriable id dengan nilai yang mengacu pada data yang di pilih
$query_select = mysql_query("select gambar from upload_gambar where id = '$id'"); // menyeleksi gambar untuk menghapus file gambar pada folder dir_gambar
$fetch_select = mysql_fetch_array($query_select);
//menghapus gambar pada direktori dir_gamabr
$dir = "dir_gambar/$fetch_select[gambar]"; // definisi untuk menentukan folder gambar dengan nama file yang akan dihapus
unlink($dir); // untuk menghapus file gambar.
//menghapus data gambar yang berada di database
$query_hapus = mysql_query("delete from upload_gambar where id ='$id'");
if($query_hapus){ // jika query berhasil
?>
<script>
alert("Hapus Berhasil !!!");
location.href = "index.php";
</script>
<?php
}
?>
penjelasan syntax sudah ada di dalam kode diatas. Semua file yang dbutuhkan sudah kita buat. selanjutnya kita uji program tersebut. lihat gambar dibawah : |
| Keseluruhan file didalam folder upload_gambar |
 |
| file index.php atau program pertama kali dijalankan |
 |
| form tambah.php untuk menambahkan data gambar |
 |
| Alert ketika berhasil disimpan |
 |
| File gambar berhasil disimpan |
 |
| alert ketika file gambar berhasil dihapus |
Sobat bisa lihat demonya di sini : Demo Program Upload Image PHP
Download Source code di sini : download upload image php
Nah itu tadi sacuil ilmu yang saya bagikan ke sobat angkringan semua. Silahkan modifikasi sesuai dengan kebutuhan sobat, atau mungkin sobat bisa membuat dengan teknik yang lebih mudah lagi. karna dalam pemrograman itu bisa diperibahasakan "Banyak jalan menuju roma". Artinya teknik untuk memcahkan masalah dalam pemrograman itu banyak sob, tinggal kalian pilih saja teknik mana yang akan digunakan. Atau malah kalian dapat menemukan teknik baru, siapa tau kan sob? Oke semoga postingan yang saya share ini bermanfaat bagi sobat semua. Jangan lupa comment sob, dan akhir kata
SALAM BLOGGER :)
min, ekstensinya kalo pakek mysql gak bisa.
ReplyDeletesekarang pakek mysqli or PDO....
di update dong minn... thanks
tolong update koneksi.php nya dong min.
ReplyDeletekarena Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\xampp\htdocs\upload_gambar\koneksi.php on line 8, thanks
Mantap bosku
ReplyDeleteMy blog
My Campus
Terimakasih.. tulisannya sangat bermanfaat..
ReplyDeleteMy blog
My Campus
tulisanya sangat bermanfaat
ReplyDeletemy blog
my campus