CARA UPLOAD IMAGE DENGAN PERVIEW IMAGE MENGGUNAKAN PHP DAN MySQL
Pada Kesempatan kali ini kita akan membahas tentang cara mengupload image ke
database, namun yang disimpan di database hanya berupa nama file image tersebut, kemudia untuk menampilkanya, pada script PHP dipanggil lokasi dari nama file tersebut.
1. Langkah pertama : Buatlah sebuah database yang diberinama Behangat, kemudai create tabel upload ('Buat tabel dan diberinama upload') yang
berisikan script sql seperti berikut:
CREATE TABLE 'upload' (
'id' int(11) NOT NULL AUTO_INCREMENT, 'Judul' varchar(100) NOT NULL,
'path' varchar(100) NOT NULL, 'Waktu' datetime NOT NULL, PRIMARY KEY ('id')
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1
2. Langkah kedua : Buat file yang diberinama index.php dari text editor yang kalian miliki. index.php ini bertujuan sebagai interface dari inputan yang dimasukkan
oleh user. Berikut ini script code index.php yang membentuk form untuk inputan:
Belajar Upload Foto/Gambar dengan PHP Bersama BeHangat
Judul
<table border="1" cellpadding="2" cellspacing="2"> <tr>
<td>
<h2 align="center">Belajar Upload Foto/Gambar dengan PHP<br /> Bersama BeHangat</h2><hr>
<form method="post" action="posting.php" enctype="multipart/form-data"> <table cellspacing="2" cellpadding="2" align="center">
<tr>
<td>Judul</td>
<td><input type="text" name="judul"></td> </tr>
<tr>
<td>Gambar</td>
<td><input id="uploadImage" type="file" name="image" onchange="PreviewImage();" /></td>
</tr> <tr>
<td colspan="2" align="center"> <hr>
<input type="reset" name="Batal" value="Batal"> <input type="submit" name="simpan" value="Simpan" > </td>
Tampilan Index.php Pada bagian :
<input id="uploadImage" type="file" name="image" onchange="PreviewImage();" />
Terrdapat code javascript : onchange="PreviewImage()".
Tujuan dari koding ini adalah untuk preview image yang dipilih sebelum diupload
ke database.
3. Langkah ketiga: Buat lagi file baru dan di berinama posting.php.
Fungsi posting.phpyaitu untuk menyimpan inputan yang dimasukkan user dan
akan disimpan ke dalam database. File posting.php berisikan script seperti
berikut:
<?php
mysql_connect("localhost", "root", ""); mysql_select_db("Behangat");
$judul=$_POST['judul']; $tgl = date('Y-m-d H:i:s');
if (isset($_POST['simpan'])){
$fileName = $_FILES['image']['name'];
$sql = "insert into upload Values (NULL, '$judul', '$fileName', '$tgl')"; mysql_query($sql);
}
?>
Dalam file ini, ada penambahan : $tgl = date('Y-m-d H:i:s'); bertujuan untuk
mendapatkan tanggal dan waktu terkini untuk disimpan ke dalam database.
Format date pada MySQL hanya mendampung format ('Y-m-d H:i:s'). Pastikan
kalian telah membuat folder baru yang bernama image pada lokasi file
kalian. Susunan Folder
4. Langkah keempat: Pada langkah ke empat atau Pada tahap terakhir ini, kalian akan memangil data dari database dan menampilkannya pada halaman web.
Interface tampilan.php
Buat File baru dan di beri nama tampil.php, untuk scrip kodenya kalian bisa
menuliskan seperti ini:
<b>Hasil Simpanan Foto / Gambar</b>
<button><a href="index.php">+ Gambar/Foto</a></button><br /><br /> <?php
mysql_connect("localhost", "root", "");
mysql_select_db("BeHangat");
$kueri = mysql_query(" SELECT * FROM upload");
while($baris=mysql_fetch_array($kueri))
{
$formatted = date('d-M-Y H:i:s', strtotime($baris['Waktu']));
echo "
<tr>
<td>Hari / Jam</td> <td>=</td>
<td>".$formatted.";</td> </tr>
<tr>
<td>Judul</td> <td>=</td>
<td>".$baris[1]."</td> </tr>
<tr>
<td>Foto</td> <td>=</td>
<td><img src=image/".$baris[2]. "></td> </tr>
</table> <hr> ";
}
