Upload dan Menampilkan Blob Image dari Database

Pernahkah anda membayangkan, bagaimana sebuah web editor pada media-media online mengupload artikel terkini lengkap dengan gambarnya ?.

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=latin1

Kemudian 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']."&nbsp;".$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 :

• Link 1 (Via 4Shared)

Link dibawah ini hanya bagi yang mau membantu penulis untuk mengdownload melalui sharecash. Tentunya untuk download melalui sharecash, harus mengisi survey mereka dulu. Jika keberatan, gunakan downloan link1 (tidak ribet) dan source code sama dengan link2 dan link3.

• Link 2
• Link 3

Update INFO

Bagaimana memainkan aplikasi android sambil menambah uang saku anda. Baca informasi detil pada : Cara mendapatkan uang dari aplikasi Android

Tweet

Subscribe to receive free email updates: