Upload dan Menampilkan Blob Image dengan PHP dan MySQL

Melanjutkan pembahasan dari seri tutorial PHP, di part ke 50 kita akan belajar mengenai cara membuat fitur upload dan menampilkan blob image dengan menggunakan PHP dan MySQL

Pembahasan ini masih terkait dengan tutorial kita sebelumnya Membuat Fitur Upload File 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.

Nah pada tutorial 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.

Nah sebelum kita memulai pembahasannya, anda harus mengenai istilah BLOB, BLOB adalah kependekan dari binary large objectjadi 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.

Nah setelah anda mengetahui istilah BLOB, berikutnya kita langsung memulai pembahasannya.

 

 

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 :

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.

 

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 :

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.

 

Membuat Halaman Form Upload – form_upload.php

Berikutnya silahkan buka file form_upload.php, dan isikan code seperti berikut ini :

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”.

 

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.

 

Pemrosesan Form upload

Berikutnya kita akan bahas skrip untuk memproses form uploadnya, penjelasannya sebagai berikut :

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

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

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

Baris 10 (form_upload.php) digunakan untuk menangkap nama file yang diupload dan disimpan di variabel $file_name

Baris 11 (form_upload.php) digunakan untuk menangkap ukuran file yang diupload dan disimpan di variabel $file_size

Baris 12 (form_upload.php) digunakan untuk menangkap tipe file yang diupload dan disimpan di variabel $file_type

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

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

Baris 16 digunakan untuk menangkap inputan form dengan name “keterangan” dan disimpan ke dalam variabel $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.

 

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 :

Keterangan :

Baris 2 (image_view.php)digunakan untuk menginclude file koneksi.php yang berisi file koneksi ke database

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

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.

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

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.

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.

 

Menampilkan data hasil upload – index.php

Untuk menampilkan daftar file kedalam bentuk daftar tabel, silahkan buka file index.php lalu isikan skrip seperti berikut :

 

Untuk menjalankan silahkan mengakses dengan menggunakan alamat : http://localhost/app_upload_blob/index.php

Keterangan :

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

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

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

Baris 11 – 19 (index.php) kita membuat tabel dan header pada tabel

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.

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

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.

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

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

Baris 30 (index.php) digunakan untuk menampilkan ukuran gambar di masing – masing data record

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.

 

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 :

Keterangan :

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.

Baris 4 (delete_gambar.php) kita includekan file koneksi.php yang berisi koneksi ke database

Baris 5 (delete_gambar.php) digunakan untuk menangkap nilai dari variabel id_gambar dengan method get, lalu disimpan di variabel $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

Baris 8 akan diredirect ke file index.php ketika telah menjalankan perintah di file delete_gambar.php

 

Nah jadi kurang lebih seperti itu teman – teman pembahasan mengenai pembuatan fitur Upload dan Menampilkan Blob Image dengan PHP dan MySQL, cukup panjang penjelasannya silahkan di ikuti step – per step penjelasan perbaris skripnya, jika ada yang perlu didiskusikan silahkan di kolom komentar.

Untuk download source code, silahkan klik disini

Baik sekian dulu sampai jumpa di seri tutorial selanjutnya.

Leave a Comment

Your email address will not be published.