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 Show
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 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. Nah setelah anda mengetahui istilah BLOB, berikutnya kita langsung memulai pembahasannya.
Membuat databasePada 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 :
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 -- phpMyAdmin SQL Dump -- version 4.8.4 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Waktu pembuatan: 17 Jun 2019 pada 18.16 -- Versi server: 10.1.37-MariaDB -- Versi PHP: 7.3.0
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */;
-- -- Database: `db_upload_blob` -- CREATE DATABASE IF NOT EXISTS `db_upload_blob` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; USE `db_upload_blob`;
-- --------------------------------------------------------
-- -- Struktur dari tabel `tb_gambar` --
CREATE TABLE `tb_gambar` ( `id_gambar` int(11) NOT NULL, `gambar` blob NOT NULL, `nama_gambar` varchar(255) NOT NULL, `tipe_gambar` varchar(255) NOT NULL, `ukuran_gambar` int(11) NOT NULL, `keterangan` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- -- Indexes for dumped tables --
-- -- Indeks untuk tabel `tb_gambar` -- ALTER TABLE `tb_gambar` ADD PRIMARY KEY (`id_gambar`);
-- -- AUTO_INCREMENT untuk tabel yang dibuang --
-- -- AUTO_INCREMENT untuk tabel `tb_gambar` -- ALTER TABLE `tb_gambar` MODIFY `id_gambar` int(11) NOT NULL AUTO_INCREMENT; 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 ProjectBerikutnya 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 :
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.phpLangkah awal kita akan membuat koneksi ke database, silahkan buka file koneksi.php dan isikan dengan skrip seperti berikut ini : 1 2 3 4 5 6 7 <?php $host = "localhost"; $user = "root"; $password = ""; $database = "db_upload_blob"; $koneksi = mysqli_connect($host, $user, $password, $database); ?> Keterangan :
Membuat Halaman Form Upload – form_upload.phpBerikutnya silahkan buka file form_upload.php, dan isikan code seperti berikut ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <?php include('koneksi.php'); if(isset($_POST['tombol'])) { if(!isset($_FILES['gambar']['tmp_name'])){ echo '<span style="color:red"><b><u><i>Pilih file gambar</i></u></b></span>'; } else { $file_name = $_FILES['gambar']['name']; $file_size = $_FILES['gambar']['size']; $file_type = $_FILES['gambar']['type']; if ($file_size < 2048000 and ($file_type =='image/jpeg' or $file_type == 'image/png')) { $image = addslashes(file_get_contents($_FILES['gambar']['tmp_name'])); $keterangan = $_POST['keterangan']; mysqli_query($koneksi,"insert into tb_gambar (gambar,nama_gambar,tipe_gambar,ukuran_gambar,keterangan) values ('$image','$file_name','$file_type','$file_size','$keterangan')"); header("location:index.php"); } else { echo '<span style="color:red"><b><u><i>Ukuruan File / Tipe File Tidak Sesuai</i></u></b></span>'; } } } ?> <html> <head> <title></title> </head> <body> <form method="post" action="" enctype="multipart/form-data"> <table> <tr> <td>Gambar</td> <td><input type="file" name="gambar"/></td> </tr> <tr> <td>Keterangan</td> <td><textarea name="keterangan"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="tombol"/></td> </tr> </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 :
Mencoba upload file gambarBerikutnya 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 uploadBerikutnya kita akan bahas skrip untuk memproses form uploadnya, penjelasannya sebagai berikut : 1 include('koneksi.php'); Baris 2 (form_upload.php) kita include file koneksi.php yang sudah kita buat sebelumnya, yang berisi koneksi ke database. 1 if(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 1 if(!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 1 if ($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. 1 mysqli_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.
Membuat File image_view.php untuk menampilkan gambar dari databaseSebelum 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 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php include('koneksi.php'); if(isset($_GET['id_gambar'])) { $query = mysqli_query($koneksi,"select * from tb_gambar where id_gambar='".$_GET['id_gambar']."'"); $row = mysqli_fetch_array($query); header("Content-type: " . $row["tipe_gambar"]); echo $row["gambar"]; } else { header('location:index.php'); } ?> Keterangan : Baris 2 (image_view.php)digunakan untuk menginclude file koneksi.php yang berisi file koneksi ke database 1 if(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 1 header("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. 1 echo $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.
Menampilkan data hasil upload – index.phpUntuk menampilkan daftar file kedalam bentuk daftar tabel, silahkan buka file index.php lalu isikan skrip seperti berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <?php include('koneksi.php'); $query = mysqli_query($koneksi,"SELECT * FROM tb_gambar"); ?> <html> <head> <title></title> </head> <body> <a href="form_upload.php">Upload Gambar</a> <table border="1"> <tr> <th>No</th> <th>Gambar</th> <th>Keterangan</th> <th>Tipe</th> <th>Ukuran</th> <th>Action</th> </tr> <?php $no = 1; while($row = mysqli_fetch_array($query)) { ?> <tr> <td><?php echo $no++; ?></td> <td><img src="image_view.php?id_gambar=<?php echo $row['id_gambar']; ?>" width="100"/></td> <td><?php echo $row['keterangan']; ?></td> <td><?php echo $row['tipe_gambar']; ?></td> <td><?php echo $row['ukuran_gambar']; ?></td> <td><a href="delete_gambar.php?id_gambar=<?php echo $row['id_gambar']; ?>">Delete</a></td> </tr> <?php } ?> </table> </body> </html>
Untuk menjalankan silahkan mengakses dengan menggunakan alamat : http://localhost/app_upload_blob/index.php Keterangan : 1 include('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 2 3 4 5 6 7 8 9 <table border="1"> <tr> <th>No</th> <th>Gambar</th> <th>Keterangan</th> <th>Tipe</th> <th>Ukuran</th> <th>Action</th> </tr> Baris 11 – 19 (index.php) kita membuat tabel dan header pada tabel 1 while($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.
Membuat fitur delete data – delete_gambar.phpBerikutnya 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 2 3 4 5 6 7 8 9 <?php if(isset($_GET['id_gambar'])) { include('koneksi.php'); $id_gambar = $_GET['id_gambar']; $query = mysqli_query($koneksi,"delete from tb_gambar where id_gambar='$id_gambar'"); } header('location:index.php'); ?> Keterangan : 1 if(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. 1 include('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 1 header('location:index.php'); 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.
ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP. Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar pemrograman PHP, bahkan untuk orang awam sekalipun. Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Pemrograman PHP Langkah langkah untuk mengupload database melalui phpMyAdmin?Cara Import Database Mysql ke PhpMyAdmin. Cari menu Databases pada cPanel dan pilih phpmyadmin.. Klik link Import.. Kemudian akan muncul halaman untuk upload file. Klik Browse.. Cari dan pilih file yang berextensi .sql kemudian klik go.. Jika berhasil, database yang baru saja anda import akan muncul di list database anda.. Langkah Langkah phpMyAdmin?Langkah Pertama – Proses instalasi phpMyAdmin. Silakan unduh versi terbaru dari phpMyAdmin melalui tautan download phpMyAdmin.. Setelah itu, login ke cPanel dan pilih menu “File Manager”.. Buka direktori public_html kemudian klik menu “Upload”.. Klik tombol Select File dan pilih file phpMyAdmin yang sudah diunduh.. Bagaimana cara membuka phpMyAdmin pada browser?Mengakses Aplikasi PhpMyAdmin
Berdasarkan buku Aplikasi Program PHP & MySQL oleh Haviluddin, dkk., untuk membuka PhpMyAdmin, buka browser lalu ketikkan alamat http://localhost/phpmyadmin. Selanjutnya, akan muncul halaman PhpMyAdmin. Di aplikasi, seseorang bisa membuat (create) basis data baru dan mengelolanya.
Apa yang dimaksud dengan MySQL dan phpMyAdmin?PHPMyAdmin adalah salah satu fitur untuk menghubungkan antara PHP dengan MySQL. Fungsi dari MySQL yang paling penting adalah memudahkan pengguna dalam mengakses data dalam bentuk String dan dapat diakses secara personal maupun publik di website.
|