Upload dan Menampilkan Blob Image dari Database
Sesuai dengan judul diatas, edisi tutorial pemrograman web kali ini, akan mengupas tentang upload image ke database dan memanggil image dari database untuk ditampilkan pada web kita. Dengan memahami mekanisme cara upload dan menampilkan image dari database, harapannya anda dapat membuat web media online.
Untuk mengupload image ke database, kita dapat menggunakan dua cara: yang pertama dengan mengset tipe data blob untuk image, yang kedua dengan mengset string untuk path dari image.
Tipe data blob pada MySQL termasuk kategori tipe string, sama halnya dengan Varchar. Namun Blob digunakan untuk menyimpan string dalam biner. Blob biasanya digunakan jika berkaitan dengan image atau tipe file lainnya.
Percobaan
Buatlah database yang diberinama artikel, kemudia buat tabel yang diberinama artikel seperti script sql dibawah ini :CREATE TABLE `gambar` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`Judul` varchar(50) NOT NULL,
`name` varchar(50) NOT NULL,
`image` blob NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1Kemudian buatlah file yang diberinama editor.php yang berisikan form seperti script berikut :
<form name="visi" method="post" action="posting.php" enctype="multipart/form-data">
Judul <input type="text" name="judul">
Gambar<br>
<img id="uploadPreview" style="width: 150px; height: 150px;" /><br>
<input id="uploadImage" type="file" name="image" onchange="PreviewImage();" />
<br><br>
<input type="submit" width="120" height="24" name="simpan" value="Submit" >
</form>Langkah berikutnya, buatlah file posting.php yang akan memproses penyimpanan data yang diinputkan pada editor.php untuk disimpan pada database MySQL seperti yang ditunjukkan script berikut :
<?php
// Connect to Database
mysql_connect("localhost", "root", "");
mysql_select_db("artikel");
$judul=$_POST['judul'];
if(isset($_POST['simpan'])){
if(!isset($_FILES['image'])){
echo 'Pilih file gambar';
}
else
{
$image = addslashes(file_get_contents($_FILES['image']['tmp_name']));
$image_name = addslashes($_FILES['image']['name']);
$image_size = getimagesize($_FILES['image']['tmp_name']);
if($image_size == false){
echo 'File yang anda pilih Bukan gambar';
}
else
{
if(!$insert = mysql_query("INSERT INTO gambar VALUES(NULL, '$judul','$image_name', '$image')"))
{
echo 'Gagal upload gambar';
}
else
{
// Informasi berhasil dan kembali ke inputan
echo"<script>alert('Gambar Berhasil diupload !');history.go(-1);</script>";
}
}
}
}
?>Langkah selanjutnya, buatlah file yang diberinama imageview.php yang berfungsi untuk menampilkan image berdasarkan id_image itu sendiri seperti yang ditunjukkan script berikut :
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("artikel");
if(isset($_GET['image_id'])) {
$sql = "SELECT * FROM gambar WHERE id=" . $_GET['image_id'];
$result = mysql_query("$sql")
or die("<b>Error:</b> Problem on Retrieving Image BLOB<br/>" . mysql_error());
$row = mysql_fetch_array($result);
//header("Content-type: " . $row["imageType"]);
echo $row["image"];
}
mysql_close($conn);
?>Langkah terakhir adalah menampilkan image beserta data-data lain pada saat proses inputan. File tersebut diberinama berita.php yang mengandung snippet code sbb:
<?php
// Connect to Database
mysql_connect("localhost", "root", "");
mysql_select_db("artikel");
$kueri = mysql_query(" SELECT * FROM gambar");
while ($baris=mysql_fetch_array($kueri))
{
echo $baris['id']." ".$baris[1]."<br><br>";
echo"<img src= imageview.php?image_id=".$baris['id']." />";
echo"<br><br><hr>";
}
?>
Berikut ini, contoh ouput inputan dari aplikasi yang kita buat :
Sedangkan ouput dari setelah proses inputan ditunjukkan gambar dibawah ini :
Anda dapat mendownload keseluruhan file tersebut melalui :
