MODUL 4

UPLOAD DAN MENAMPILKAN BLOB IMAGE DENGAN PHP DAN

MYSQL

Jika dibagian tutorial tersebut anda belajar bagaimana cara membuat fitur
upload file dengan PHP dan MySQL tetapi yang disimpan di database hanyalah
nama filenya, jadi sebenarnya filenya tidak benar – benar diupload di database,
filenya hanya dipindahkan di webserver sedangkan yang disimpan di database
hanyalah nama dari filenya saja, karena itu pada kolom file/berkas hanya
menggunakan tipe data varchar, karena memang yang disimpan hanya nama
filenya.
Materi ini kita akan belajar bagaimana cara mengupload sebuah file kedalam
database, bukan sebatas nama filenya saja, tetapi filenya akan benar – benar
disimpan di dalam tabel database.
Istilah BLOB, BLOB adalah kependekan dari binary large object, jadi BLOB adalah
koleksi dari data biner yang disimpan dalam sebuah entitas pada database
management systems (DBMS).
Sederhananya BLOB adalah suatu cara yang digunakan untuk menyimpan file –
file media seperti jpg, mp3, flv, mp4, dll, ke dalam database.

1. Membuat database
Pada tutorial ini kita contohkan menggunakan xampp, sehingga untuk membuat
database kita akan menggunakan phpmyadmin sebagai toolsnya, baik langkah –
langkah pembuatan databasenya adalah sebagai berikut :
1. Pastikan untuk service MySQL sudah berjalan di xampp control panel
2. Lalu silahkan akses phpmyadmin melalui alamat
http://localhost/phpmyadmin, berikutnya buat databasenya, dalam contoh ini
nama databasenya db_upload_blob, lalu klik tombol Buat

3. Berikutnya silahkan buat tabel yang digunakan untuk menyimpan datanya,

dalam contoh ini tabelnya kita beri nama tb_gambar, untuk jumlah kolom isikan 6,
lalu klik tombol kirim
Berikutnya silahkan buat kolom di tabel tb_gambar.

Keterangan :
 id_gambar (integer) digunakan sebagai primary key dengan auto increment
 gambar (blob) kolom in digunakan untuk menyimpan file yang diupload ke database
 nama_gambar (varchar 255) kolom ini digunakan untuk menyimpan nama file yang
diupload
 tipe_gambar (varchar 255) digunakan untuk menyimpan tipe / format file
 ukuran_gambar (integer) digunakan untuk menyimpan ukuran dari file yang diupload
 keterangan (varchar 255) digunakan untuk menyimpan keterangan dari file yang
diupload
setelah dibuat kolomnya, silahkan klik tombol Simpan
maka tabel tb_gambar akan terbuat, jika anda tidak inget ribet di pembuatan
database serta tabel, bisa menggunakan perintah sql dibawah ini :

1 -- phpMyAdmin SQL Dump

2 -- version 4.8.4
3 -- https://www.phpmyadmin.net/
4 --
5 -- Host: 127.0.0.1
6 -- Waktu pembuatan: 17 Jun 2019 pada 18.16
7 -- Versi server: 10.1.37-MariaDB
8 -- Versi PHP: 7.3.0
9 
10 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 SET AUTOCOMMIT = 0;
12 START TRANSACTION;
13 SET time_zone = "+00:00";
14  
15  
16 /*!40101 SET
17 @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
18 /*!40101 SET
19 @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
20 /*!40101 SET
21 @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
22 /*!40101 SET NAMES utf8mb4 */;
23  
24 --
25 -- Database: `db_upload_blob`
26 --
27 CREATE DATABASE IF NOT EXISTS `db_upload_blob` DEFAULT CHARACTER
28 SET latin1 COLLATE latin1_swedish_ci;
29 USE `db_upload_blob`;
30  
31 -- --------------------------------------------------------
32  
33 --
34 -- Struktur dari tabel `tb_gambar`
35 --
36  
37 CREATE TABLE `tb_gambar` (
38   `id_gambar` int(11) NOT NULL,
39   `gambar` blob NOT NULL,
40   `nama_gambar` varchar(255) NOT NULL,
41   `tipe_gambar` varchar(255) NOT NULL,
42   `ukuran_gambar` int(11) NOT NULL,
43   `keterangan` varchar(255) NOT NULL
44 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
45  
46 --
47 -- Indexes for dumped tables
48 --
49  
50 --
51 -- Indeks untuk tabel `tb_gambar`
52 --
53 ALTER TABLE `tb_gambar`
54   ADD PRIMARY KEY (`id_gambar`);
55  
56 --
57 -- AUTO_INCREMENT untuk tabel yang dibuang
58 --
59  
60 --
61 -- AUTO_INCREMENT untuk tabel `tb_gambar`
62 --
63 ALTER TABLE `tb_gambar`
64   MODIFY `id_gambar` int(11) NOT NULL AUTO_INCREMENT;
65 COMMIT;
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS
*/;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION
*/;
Baik asumsinya anda sudah membuat databasenya,, kita lanjutkan ke step
selanjutnya…
 
 Membuat Project
Berikutnya kita akan membuat file di project ini, langkah – langkahnya adalah
sebagai berikut :
1.  Karena dalam contoh ini kita menggunakan xampp, maka kita harus
membuat folder projectnya di dalam direktori c:/xampp/htdocs, dalam contoh
ini nama foldernya adalah app_upload_blob, jadi kurang lebih posisi foldernya
seperti ini :

Berikutnya buat beberapa file php antara lain :

 koneksi.php
 index.php
 form_upload.php
 image_view.php
 delete_gambar.php
Kurang lebih tampilannya seperti ini :
baik kita asumsikan teman – teman sudah membuat beberapa file php tersebut,
kita akan isi skrip masing – masing file php tersebut dalam pembahasan
berikutnya.
 
a. Membuat koneksi ke database – koneksi.php
Langkah awal kita akan membuat koneksi ke database, silahkan buka
file koneksi.php dan isikan dengan skrip seperti berikut ini :

1<?php
2$host       = "localhost";
3$user       = "root";
4$password   = "";
5$database   = "db_upload_blob";
6$koneksi    = mysqli_connect($host, $user, $password, $database);
7?>
Keterangan :
 Perintah diatas digunakan untuk koneksi ke database db_upload_blob yang
sebelumnya telah kita buat.
 $host dengan nilai “localhost” yang merupakan alamat server databasenya
 $user dengan nilai “root” yang merupakan user dari databasenya
 $password dengan nilai “” yang merupakan password untuk mengakses database,
nilainya kosong karena default dari xampp untuk password user root adalah kosong
 $database dengan nilai “db_upload_blob” yang merupakan nama dari database yang
sebelumnya telah kita buat
 Baris 6 adalah perintah untuk melakukan koneksi ke database, dan hasilnya disimpan
di variabel $koneksi.
 
b. Membuat Halaman Form Upload – form_upload.php
Berikutnya silahkan buka file form_upload.php, dan isikan code seperti berikut
ini :

1 <?php
2 include('koneksi.php');
3 if(isset($_POST['tombol']))
4{
5     if(!isset($_FILES['gambar']['tmp_name'])){
6         echo '<span style="color:red"><b><u><i>Pilih file gambar</i></u></b></span>';
7     }
8     else
9     {
10         $file_name = $_FILES['gambar']['name'];
11         $file_size = $_FILES['gambar']['size'];
12         $file_type = $_FILES['gambar']['type'];
13         if ($file_size < 2048000 and ($file_type =='image/jpeg' or $file_type == 'image/png'))
14         {
15             $image   = addslashes(file_get_contents($_FILES['gambar']['tmp_name']));
16             $keterangan = $_POST['keterangan'];
17             mysqli_query($koneksi,"insert into tb_gambar
18 (gambar,nama_gambar,tipe_gambar,ukuran_gambar,keterangan) values
19 ('$image','$file_name','$file_type','$file_size','$keterangan')");
20             header("location:index.php");
21         }
22         else
23         {
24             echo '<span style="color:red"><b><u><i>Ukuruan File / Tipe File Tidak
25 Sesuai</i></u></b></span>';
26         }
27     }
28 }
29 ?>
30 <html>
31     <head>
32         <title></title>
33     </head>
34     <body>
35         <form method="post" action="" enctype="multipart/form-data">
36         <table>
37             <tr>
38                 <td>Gambar</td>
39                 <td><input type="file" name="gambar"/></td>
40             </tr>
41             <tr>
42                 <td>Keterangan</td>
43                 <td><textarea name="keterangan"></textarea></td>
44             </tr>
45             <tr>
46                 <td></td>
47                 <td><input type="submit" name="tombol"/></td>
48             </tr>
49         </table>
        </form>
    </body>
</html>
Untuk mengakses halaman form upload, anda bisa mengakses di
alamat : http://localhost/app_upload_blob/form_upload.php
Tampilannya kurang lebih seperti berikut ini :

Keterangan :
 Baris 32 (form_upload.php) kita membuat tag <form> dengan menggunakan method
post, dan kita tambahkan attribute enctype dengan value “multipart/form-data”, dan
dibagian attribute action kita benilai nilai kosong, karena pemrosesan form kita akan
lakukan di file form_upload.php ini sendiri
 Baris 36 (form_upload.php) kita membuat inputan dengan type file dengan attribute
name “gambar”
 Baris 40 (form_upload.php) kita membuat textarea dengan attribute name 
“keterangan”
 Baris 44 (form_upload.php) kita membuat tombol dengan attribute name “tombol”.
 
c. Mencoba upload file gambar
Berikutnya kita akan coba untuk mengupload sebuah gambar dengan
mengggunakan form yang telah kita buat, kurang lebih tampilannya seperti ini :
Gambar dan keterangan bisa disesuaikan dengan gambar yang dimiliki teman –
teman, lalu silahkan tombol Submit.
Setelah berhasil upload, langkah berikutnya kita akan cek databasenya, gunakan
phpmyadmin.
Silahkan phpmyadmin dengan menggunakan alamat localhost/phpmyadmin
dan pilih databasenya dalam hal ini adalah db_upload_blob, lalu silahkan klik
tabel tb_gambar, kurang lebih tampilannya seperti berikut ini :

Terlihat ada 1 record yang berisi data gambar yang berhasil kita upload.
 
d. Pemrosesan Form upload
Berikutnya kita akan bahas skrip untuk memproses form uploadnya,
penjelasannya sebagai berikut :

1include('koneksi.php');
Baris 2 (form_upload.php) kita include file koneksi.php yang sudah kita buat
sebelumnya, yang berisi koneksi  ke database.

1if(isset($_POST['tombol']))
Baris 3 (form_upload.php) digunakan untuk melakukan pengecekan apakah
tombol submit dengan name “tombol” di klik (baris 44 – form_upload.php), jika
baris 3 bernilai true maka akan menjalankan skrip pada baris 5 – 24

1if(!isset($_FILES['gambar']['tmp_name'])){
Baris 5 (form_upload.php) digunakan untuk melakukan pengecekan apakah file
di form upload sudah dipilih atau belum, jika belum dipilih maka akan
menjalankan skrip di baris 6 untuk menampilkan tulisan Pilih file gambar, jika file
telah dipilih maka akan menjalankan skrip dibaris 10 – 23

1$file_name = $_FILES['gambar']['name'];
Baris 10 (form_upload.php) digunakan untuk menangkap nama file yang
diupload dan disimpan di variabel $file_name

1$file_size = $_FILES['gambar']['size'];
Baris 11 (form_upload.php) digunakan untuk menangkap ukuran file yang
diupload dan disimpan di variabel $file_size

1$file_type = $_FILES['gambar']['type'];
Baris 12 (form_upload.php) digunakan untuk menangkap tipe file yang diupload
dan disimpan di variabel $file_type

1if ($file_size < 2048000 and ($file_type =='image/jpeg' or $file_type == 'image/png'))

Baris 13 (form_upload.php) digunakan untuk melakukan pengecekan, apakah
ukuran file (variabel $file_size) kurang dari 2 MB, dan tipe file adalah jpeg atau
png ?
Jika bernilai true maka akan menjalakan baris 15 – 18, jika bernilai false maka
akan menjalankan baris 22 yang akan menampilkan tulisan Ukuruan File / Tipe File
Tidak Sesuai

1$image   = addslashes(file_get_contents($_FILES['gambar']['tmp_name']));
Baris 15 digunakan untuk mengkonversi file yang kita upload menjadi data
binary dan disimpan di variabel $image, dan nantinya data ini akan dimasukkan
ke dalam kolom gambar di tabel tb_gambar dimana di kolom ini menggunakan
tipe blob

1$keterangan = $_POST['keterangan'];
Baris 16 digunakan untuk menangkap inputan form dengan name “keterangan”
dan disimpan ke dalam variabel $keterangan.

1mysqli_query($koneksi,"insert into tb_gambar

(gambar,nama_gambar,tipe_gambar,ukuran_gambar,keterangan) values
('$image','$file_name','$file_type','$file_size','$keterangan')");
Baris 17 (upload_gambar.php) kita menunliskan perintah untuk insert data ke
tabel tb_gambar, kita gunakan variabel yang telah menyimpan data hasil inputan
di bagian form, untuk bagian kolom gambar yang bertipekan blob, kita gunakan
value variabel $image yang berisi binary file yang diupload (baris 15 –
form_upload.php).
Baris 18 (upload_gambar.php) ketika sudah berhasil insert data ke tb_gambar,
berikutnya akan dilakukan redirect ke halaman index.php
Nah itu adalah fungsi dari perintah – perintah saat melakukan pemrosesan
upload file ke database, berikutnya kita akan belajar untuk membuat fitur untuk
menampilkan data gambar yang sudah kita upload ke database.
 
e. Membuat File image_view.php untuk menampilkan gambar dari
database
Sebelum kita menampilkan data gambar dari database, kita akan membuat dulu
file image_view.php dimana didalamnya akan berisi fungsi untuk menkonversi
nilai di kolom gambar dengan tipe blob, menjadi sebuah image yang bisa
ditampilkan di browser, silahkan buka file image_view.php dan isikan skrip
dibawah ini :

1 <?php
2 include('koneksi.php');
3 if(isset($_GET['id_gambar']))
4{
5     $query = mysqli_query($koneksi,"select * from tb_gambar where id_gambar='".
6 $_GET['id_gambar']."'");
7     $row = mysqli_fetch_array($query);
8     header("Content-type: " . $row["tipe_gambar"]);
9     echo $row["gambar"];
10 }
11 else
12 {
13     header('location:index.php');
14 }
?>
Keterangan :
Baris 2 (image_view.php)digunakan untuk menginclude file koneksi.php yang
berisi file koneksi ke database

1if(isset($_GET['id_gambar']))
Baris 3 (image_view.php) digunakan untuk melakukan pengecekan, apakah
ketika mengakses file image_view.php juga menyertakan variabel id_gambar
dengan method get ?
Jika ditemukan variabel id_gambar dengan method get, maka akan menjalankan
skrip di baris 5 – 8, tetapi jika tidak akan menjalankan baris 12 yang akan
meredirect ke halaman index.php

1$query = mysqli_query($koneksi,"select * from tb_gambar where id_gambar='".

$_GET['id_gambar']."'");
Baris 5 (image_view.php) kita mengambil data di tabel tb_gambar yang
id_gambarnya sesuai dengan variabel $id_gambar, hasil record data akan
disimpan di variabel $query.

1$row = mysqli_fetch_array($query);
Baris 6 (image_view.php) kita akan konversi datanya menjadi bentuk array
menggunakan perintah mysqli_fetch_array, hasil konversinya akan disimpan di
variabel $row

1header("Content-type: " . $row["tipe_gambar"]);

Baris 7 (image_view.php) kita membuat header file dengan tipe sesuai tipe file
yang disimpan di database, tipe file ini diambil di kolom tipe_gambar di tabel
tb_gambar, jadi semisal anda mengupload file jpeg, maka nanti file image_view
akan menghasilkan file .jpg begitu juga untuk format file lainnya.

1echo $row["gambar"];
Baris 8(image_view.php) kita menampilkan data binary yang disimpan di kolom
gambar di tabel tb_gambar.
Jadi kurang lebih perintah ini digunakan untuk membuat file, yang sebelumnya
diupload, dengan hasil export sesuai tipe file yang diupload, kalau kita
mengupload file gambar dengan tipe .jpeg, ya maka file image_view.php ini akan
mengexport file jpeg juga, begitu juga untuk file – file lainnya.
Baik kita sudah membuat file image_view.php yang digunakan untuk konversi
data binary di kolom gambar, menjadi sebuah file sesuai tipe file yang kita
upload, berikutnya kita akan membuat file index.php yang digunakan untuk
menampilkan data file yang telah diupload ke dalam bentuk list tabel.
 
f. Menampilkan data hasil upload – index.php
Untuk menampilkan daftar file kedalam bentuk daftar tabel, silahkan buka file
index.php lalu isikan skrip seperti berikut :

1 <?php
2 include('koneksi.php');
3 $query = mysqli_query($koneksi,"SELECT * FROM tb_gambar");
4 ?>
5 <html>
6     <head>
7         <title></title>
8     </head>
9     <body>
10         <a href="form_upload.php">Upload Gambar</a>
11         <table border="1">
12             <tr>
13                 <th>No</th>
14                 <th>Gambar</th>
15                 <th>Keterangan</th>
16                 <th>Tipe</th>
17                 <th>Ukuran</th>
18                 <th>Action</th>
19             </tr>
20             <?php
21             $no = 1;
22             while($row = mysqli_fetch_array($query))
23             {
24                 ?>
25                 <tr>
26                     <td><?php echo $no++; ?></td>
27                     <td><img src="image_view.php?id_gambar=<?php echo $row['id_gambar'];
28 ?>" width="100"/></td>
29                     <td><?php echo $row['keterangan']; ?></td>
30                     <td><?php echo $row['tipe_gambar']; ?></td>
31                     <td><?php echo $row['ukuran_gambar']; ?></td>
32                     <td><a href="delete_gambar.php?id_gambar=<?php echo $row['id_gambar'];
33 ?>">Delete</a></td>
34                 </tr>
35                 <?php
36             }
37             ?>
38         </table>
    </body>
</html>
 
Untuk menjalankan silahkan mengakses dengan menggunakan
alamat : http://localhost/app_upload_blob/index.php

Keterangan :

1include('koneksi.php');
Baris 2 (index.php) kita include file koneksi.php yang berisi koneksi ke database
db_upload_blob

1$query = mysqli_query($koneksi,"SELECT * FROM tb_gambar");

Baris 3 (index.php) kita menuliskan query untuk mengambil data di tabel
tb_gambar, dan hasil datanya disimpan di variabel $query

1<a href="form_upload.php">Upload Gambar</a>

Baris 10 (index.php) kita membuat tombol untuk mengakses form upload yaitu
file form_upload.php

1        <table border="1">
2            <tr>
3                <th>No</th>
4                <th>Gambar</th>
5                <th>Keterangan</th>
6                <th>Tipe</th>
7                <th>Ukuran</th>
8                <th>Action</th>
9            </tr>
Baris 11 – 19 (index.php) kita membuat tabel dan header pada tabel

1while($row = mysqli_fetch_array($query))
Baris 22 (index.php) kita melakukan extract data di variabel $query dengan
menggunakan perintah while, sehingga akan melakukan perulangan sejumlah
data hasil query, datanya juga akan dikonversi menjadi array dengan
menggunakan perintah mysqli_fetch_array, dan disetiap record kita simpan di
variabel $row.

1<td><?php echo $no++; ?></td>

Baris 26 (index.php) digunakan untuk menampilkan nomor dimasing – masing
record data

1<td><img src="image_view.php?id_gambar=<?php echo $row['id_gambar']; ?>"

width="100"/></td>
Baris 27 (index.php) digunakan untuk menampilkan file gambar yang ada
dimasing – masing record data, terlihat pada value attribute src kita mengakses
file image_view.php dan juga mengirimkan variabel id_gambar dengan method
get, variabel id_gambar berisi id_gambar yang ada pada masing – masing record
data, nah perintah ini akan menampilkan gambar sesuai yang telah diupload di
masing – masing record data.

1<td><?php echo $row['keterangan']; ?></td>

Baris 28 (index.php) digunakan untuk menampilkan keterangan di masing –
masing data record

1<td><?php echo $row['tipe_gambar']; ?></td>

Baris 29 (index.php) digunakan untuk menampilkan tipe gambar di masing –
masing data record

1<td><?php echo $row['ukuran_gambar']; ?></td>

Baris 30 (index.php) digunakan untuk menampilkan ukuran gambar di masing –
masing data record
1<td><a href="delete_gambar.php?id_gambar=<?php echo $row['id_gambar']; ?
>">Delete</a></td>
Baris 31 digunakan untuk menampilkan tombol delete yang akan mengakses file
delete_gambar.php dan mengirimkan variabel $id_gambar dengan method get,
dimana variabel id_gambar akan berisi id_gambar di masing – masing record
data.
 
g. Membuat fitur delete data – delete_gambar.php
Berikutnya untuk fitur menghapus data di tabel tb_gambar, kita akan
menggunakan file delete_gambar.php untuk memproses delete datanya,
silahkan buka file delete_gambar.php, lalu isikan skripnya seperti berikut ini :

1<?php
2if(isset($_GET['id_gambar']))
3{
4    include('koneksi.php');
5    $id_gambar = $_GET['id_gambar'];
6    $query = mysqli_query($koneksi,"delete from tb_gambar where
7id_gambar='$id_gambar'");
8}
9header('location:index.php');
?>
Keterangan :

1if(isset($_GET['id_gambar']))
Baris 2 (delete_gambar.php) digunakan untuk melakukan pengecekan apakah
saat mengakses file delete_gambar.php serta menyertakan variabel id_gambar
dengan method get, jika iya maka akan menjalankan perintah di baris 4 – 6.

1include('koneksi.php');
Baris 4 (delete_gambar.php) kita includekan file koneksi.php yang berisi koneksi
ke database

1$id_gambar = $_GET['id_gambar'];
Baris 5 (delete_gambar.php) digunakan untuk menangkap nilai dari variabel
id_gambar dengan method get, lalu disimpan di variabel $id_gambar

1$query = mysqli_query($koneksi,"delete from tb_gambar where id_gambar='$id_gambar'");

Baris 6 (delete_gambar.php) kita menuliskan query untuk menghapus data di
tabel tb_gambar dengan id_gambar yang sesuai dengan variabel $id_gambar

1header('location:index.php');
Baris 8 akan diredirect ke file index.php ketika telah menjalankan perintah di file
delete_gambar.php