Dalam pengolahan data, mungkin kita akan membutuhkan gambar dalam penyajian datanya. Kenapa!?
Tentunya supaya data tidak membosankan dengan tampilan hanya teks, kita bisa menyajikan gambar-gambar yang sesuai dengan data kita.
Dengan mysql kita bisa melakukan operasi gambar dengan dua opsi, yaitu :
- Unggah langsung ke dalam basis data
- Memindahkan / mongkopi file gambar ke dalam path ( penyimpanan gambar ) kemudian nama gambar tersebut kita unggah ke dalam basis data.
Nah dalam artikel kali ini kita akan belajar unggah dengan metode yang kedua, why? Karena dengan cara ini basis data kita akan lebih hemat memori dan query yang dijalankan tidak ada delay yang begitu lama sebab beban memori yang tersimpan besar.
Baiklah kita langsung saja ya...
🛈 Kita disini masih melanjutkan dari seri sebelumnya, terkait dengan cara menampilkan data mysql melalui php ( cek artikelnya disini ). Basis data yang kita gunakan masih sama yaitu db_latihan dengan tabelnya tb_latihan
Langkah awal yang perlu kita lakukan adalah ubah struktur tabel tb_latihan kita dengan menambahi kolom gambar seperti berikut :
Dilanjutkan dengan klik menu → Add Field yang posisinya berada di atas struktur tabel kita, isilah kolom dengan gambar.
Terakhir klik menu → Save
Kita menambahkan kolom baru gambar dengan tipe data varchar ( 100 )
Selesai sudah kita menambahi satu kolom tabel. Selanjutnya tinggal kita koding yak, Gasss 🚀
🛈 Pengubahan struktur tabel diatas menggunakan perangkat lunak Navicat ( sejenis dengan phpMyAdmin ). Penambahan kolom juga bisa dilakukan dengan phpMyAdmin.
Buka VS Code, kita buat sebuah folder dengan nama uploadGambar di server localhost kita. Lalu buat file baru dengan nama index.php
%203_4_2023%2011_21_57%20AM.png)
%203_4_2023%2011_22_01%20AM.png)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>PHP - MySQL</title></head><body><center>Belajar Unggah Gambar PHP MySQL</center><hr><form action="prosesUpload.php" method="get"><table align="center"><tr><td><input type="file" name="gambar[]"></td></tr><tr><td><input type="submit" value="Unggah" name="upload"></td></tr></table></form></body></html>Kita membuat sebuah form yang akan menuju file prosesUpload.php
Dalam form ini kita memberikan sebuah tempat untuk input file ( input type="file" ) dengan satu tombol Unggah.
Hasilnya :
Wew, simpel yah...
Kemudian kita buat lagi file baru dengan nama prosesUpload.php, karena setelah tombol Unggah di klik aksinya akan menuju ke prosesUpload.php
Oiya, karena kita akan melakukan unggah gambar maka kita perlu menambahkan properti enctype pada tag <form> menjadi :
<form action="prosesUpload.php" method="get" enctype="multipart/form-data"><table align="center"><tr><td>Tambah lagi kodenya dengan kolom untuk input nama, menjadi :
<form action="prosesUpload.php" method="get" enctype="multipart/form-data"><table align="center"><tr><td>Nama</td><td><input type="text" name="nama"></td></tr><tr><td>Gambar</td><td><input type="file" name="gambar[]"></td></tr><tr><td></td><td><input type="submit" value="Unggah" name="upload"></td></tr></table></form>Step selanjutnya kita pindah ke prosesUpload.php, mula-mula kita isi dengan baris kode :
<?phpecho "Sudah ke halaman prosesUpload.php :) ";?>Lalu kita coba klik tombol Unggah, jika muncul halaman :
Kita sudah tersambung antara file index.php dan prosesUpload.php :)Tahap selanjutnya kita buat folder baru dengan nama hasilUpload di folder uploadGambar sebagai tempat penyimpanan gambar kita setelah melalui prosesUpload.php
Kembali lagi ke file prosesUpload.php, kita tulis baris kode berikut :<?phpinclude("../db/koneksiSQL.php");$nama = $_POST['nama'];$folderGambar = "hasilUpload/"; // folder untuk menyimpan gambar$Gambar = str_replace(' ','-',strtolower($_FILES['gambar']['name'][0]));if (!file_exists($folderGambar)) {@mkdir($folderGambar, 0777);} else {move_uploaded_file($_FILES["gambar"]["tmp_name"][0],$folderGambar."/".$Gambar );$sql = "INSERT INTO `tb_latihan`(`nama`, `gambar`)VALUES ('$nama','$Gambar')";if (mysqli_query($server, $sql)) {echo "Unggah gambar berhasil! :)";header("location:../db/tampil.php");} else {echo "Error: " . $sql . "" . mysqli_error($cn);}}?>Yuk kita bahas per bagian kode di atas ✊<?phpinclude("../db/koneksiSQL.php");$nama = $_POST['nama'];Tentu kita memanggil fungsi koneksiSQL sebagai jembatan antara php dan basis data mysql. Kemudian dengan variabel $nama kita menampung data nama yang dikirim oleh form sebelumnya ( index.php )$folderGambar = "hasilUpload/"; // folder untuk menyimpan gambar$Gambar = str_replace(' ','-',strtolower($_FILES['gambar']['name'][0]));Lalu variabel $folderGambar menyimpan lokasi dari hasil unggah gambar nantinya. Pastikan nama isi dari variabel ini sama dengan nama folder yang kita buat untuk menyimpan gambar.Dengan variabel $Gambar kita melakukan operasi string untuk mengganti ( str_replace ) setiap gambar yang memiliki " " atau spasi di nama gambarnya akan diganti dengan tanda strip ( - ).Dilanjutkan dengan fungsi strtolower() kita menjadikan semua huruf nama gambar menjadi kecil semua.
Lebih jauh tentang penggunaan fungsi pengolahan string, baca artikel ini
Setelah nama gambar di cek adakah spasinya dan di kecilkan semua, maka nama gambar tersebut disimpan dalam variabel $Gambar yang nantinya akan kita simpan ke dalam basis data.if (!file_exists($folderGambar)) {@mkdir($folderGambar, 0777);Nah di bagian ini, kita cek apakah sudah ada sebuah folder dengan nama hasilUpload. Jika belum maka dengan menggunakan fungsi @mkdir kita membuat folder baru dengan nama yang sama seperti tulisan yang disimpan dalam variabel $folderGambar.} else {move_uploaded_file($_FILES["gambar"]["tmp_name"][0],$folderGambar."/".$Gambar );$sql = "INSERT INTO `tb_latihan`(`nama`, `gambar`)VALUES ('$nama','$Gambar')";if (mysqli_query($server, $sql)) {echo "Unggah gambar berhasil! :)";header("location:../db/tampil.php");} else {echo "Error: " . $sql . "" . mysqli_error($cn);}}Jika ternyata folder hasilUpload sudah ada, maka perintah langsung pindah ke baris ini.Fungsi digunakan untuk mengkopi file gambar yang dipilih ke dalam folder penyimpanan gambar kita ( hasilUpload )Lebih lengkap tentang fungsi move_uploaded_file(), bisa baca disini yah 😁Kemudian dilanjutkan dengan query SQL untuk menyimpan ke dalam basis data mysql. Setelah terunggah, dengan header() kita akan redirect langsung ke tampil data.
Mari kita testing gaes 😁
Pilih gambar, kita contohkan upload logo dari My Source Code yah 😂
Setelah terpilih nama dan gambar yang akan kita unggah, coba klik tombol Unggah 😌
Taraaaaa....
Muncul sebuah data yang kita buat deh 😎
🛈 Sudah kami infokan di atas, bahwa artikel ini merupakan lanjutan dari artikel sebelumnya yang berjudul PHP : Menampilkan Data dari Basis Data MySQL.
Pada kode tampil, kita perlu menambahkan kolom baru untuk penempatan gambarnya. Baris kode untuk judul kita tambahi :
<table border="1">
<tr>
<td>Nama</td>
<td>Alamat</td>
<td>Tanggal</td>
<td>Umur</td>
<td>Profil</td> <!-- tambah baris ini untuk judul gambar -->
<td>Ket</td> <!-- menambahkan kolom sbg judul untuk Keterangan -->
</tr>
Sedang untuk bagian data dari basis data, kita tambah :
<tr>
<td><?php echo $data["nama"]; ?></td>
<td><?php echo $data["alamat"]; ?></td>
<td><?php echo $data["tanggal_lahir"]; ?></td>
<td><?php echo $data["umur"]; ?></td>
<td> <!-- kolom baru untuk menampilkan gambar -->
<?php
if($data["gambar"] == null) {
echo "Belum ada profil";
} else {
?>
<img src="../uploadGambar/hasilUpload/
<?php
echo $data["gambar"];
?>" width="150">
<?php
}
?>
</td>
<td>
<a href="tampilEdit.php?umur='<?php echo $data["umur"]; ?>'">Edit</a>
</td> <!-- Menambahkan tautan Edit -->
</tr>
Yap selesai sudah yah. Mangatz gaes, trims 👏👌
See you in the next articles 😊
Tags:
PHP