Storing and display Image in Database

Storing Images to Database tutorial will explain how to save images to the database and how to display images that have been stored in a database

There are two ways to save images to the database:

  1. Save images to the database with the BLOB data type,
  2. Save images into a folder and record the location and image information to the database.

Which will be discussed in this tutorial is the first step, Save the image to the database with a BLOB data type.

Storing Image Into Database With Blob Data Type

There are several things that need to be done before it can save the images into a database table field of type BLOB.

Preparing the Database and Table

Create a database with a name example “gallery”. Then create a table in it with the name of “pictures” with structures like the one below:

Name Type data Information
id integer primary key, auto increment
file_name varchar(100)
mime_type varchar(50)
file_data Longblog

Or use the following SQL query:

create database gallery;

use gallery;

CREATE TABLE `pictures` (

`id` int NOT NULL AUTO_INCREMENT,

`file_name` varchar(100) NOT NULL,

`mime_type` varchar(50) NOT NULL,

`file_data` mediumblob DEFAULT NULL,

PRIMARY KEY (`id`)

);

Create Upload Form
Create a html form to upload pictures, use the script below:
<!-- file form.html--> 
<form name="form1" id="form1" method="post" action="upload.php" enctype="multipart/form-data"> 
Gambar: <input type="file" name="gambar" id="gambar" /> 
<input type="submit" name="Submit" id="Submit" value="Upload" />  </form>

Save the file name form.html.

Storing Images to Database

The next step is to save images to the database, php script used below to save the image to the database.
<?php $connection = mysql_connect("dbhost", "dbuser", "dbpassword"); 
//customize to your database 
mysql_select_db("gallery");
if($_FILES['gambar']['size'] > 0 && $_FILES['gambar']['error'] == 0){
$fileName = $_FILES['gambar']['name']; 
$mimeType = $_FILES['gambar']['type'];
$tmpFile = fopen($_FILES['gambar']['tmp_name'], 'rb'); // (fileName, mode) 
$fileData = fread($tmpFile, filesize($_FILES['gambar']['tmp_name']));
$fileData = addslashes($fileData);
$query = "insert into pictures set file_name='$fileName',mime_type='$mimeType', file_data='$fileData'";
mysql_query($query) or die("Upload Gambar Gagal: ".mysql_error());
echo "Gambar telah disimpan"; } ?>

In line 8, the file was uploaded opened using the fopen function with mode ‘rb’ meaning to open the file with read mode and binary mode. In line 9 read files that have been opened in line 8 with fread function. Next in line 12 and 13 store the images to the database. Save the script above with the name upload.php.

Displaying Images From Database

The final step is to display images that have been stored in a database. To display the image takes 2 files. Gambar.php file to render the image and the file gallery.php gallery to display the entire image stored in the database. Use the following script:

File picture.php

<?php $connection = mysql_connect("dbhost", "dbuser", "dbpassword"); 
//customize to your database 
mysql_select_db("gallery"); 
$idFile = $_GET['id']; 
$dataGambar = mysql_fetch_array(mysql_query("select * from pictures where id='$idFile'")); 
$filename = $dataGambar['file_name']; 
$mime_type = $dataGambar['mime_type']; 
$filedata = $dataGambar['file_data']; 
header("content-disposition: inline; filename=$filename"); 
header("content-type: $mime_type"); 
header("content-length: ".strlen($filedata)); 
echo ($filedata); ?> 

File gallery.php

<?php $connection = mysql_connect("dbhost", "dbuser", "dbpassword"); 

//customize to your database

mysql_select_db(“gallery”);

$query = “select * from pictures”;

$result = mysql_query($query);

$i=1;

echo ‘<table>’;

echo ‘<tr>’;

while($gambar = mysql_fetch_array($result)){

echo ‘<td><img src=”gambar.php?id=’.$gambar[‘id’].'” width=”150″ /></td>’;

if($i % 4 == 0){

echo ‘</tr><tr>’;

}

$i++;

}

echo ‘</tr>’;

echo ‘</table>’;

?>

Download Tutorial

Pos Sebelumnya
Tinggalkan komentar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: