Hai gengs, berjumpa lagi, pada artikel kali ini kita akan mempelajari bagaimana untuk Upload Gambar dengan PHP ke Database.
Atau lebih tepatnya kita hanya menyimpan tautan yang akan tertuju pada gambar yang ada pada folder yang akan kita buat.
Berikut adalah file - file dan folder yang akan kita buat:
Penjelasan:
- Folder gambar adalah lokasi untuk menyimpan gambar yang akan diupload
- koneksi.php berisi baris kode untuk menghubungkan ke database
- index.php adalah file pertama yang dipanggil yang berisi baris kode untuk upload gambar dan menampilkan gambar yang sudah diupload
- proses_upload.php berisi baris kode untuk memproses penyimpanan lokasi gambar ke database
Database
Buat database dengan nama upload_img dan tambahkan tabel dengan nama upload dengan field berikut:
- id - int(11) AUTO_INCREMENT
- gambar - varchar(100)
koneksi.php
<?php
$koneksi = mysqli_connect('localhost', 'root', '', 'upload_img');
if (!$koneksi) {
die(mysqli_connect_error());
}
upload_img adalah nama database yang sudah kita buat tadi.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Gambar</title>
<style type="text/css">
body {
font-family: 'sans-serif', 'arial';
}
#content{
width: 50%;
margin: 20px auto;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 15px;
}
form div input, textarea {
margin-top: 4px;
}
form div button {
width: auto;
padding: 10px;
background-color: #f0f0f0;
border: thin solid #999;
cursor: pointer;
font-weight: bold;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<div id="content">
<h1 align="center">Upload Gambar</h1>
<form method="post" action="proses_upload.php" enctype="multipart/form-data">
<div>
<label for="gambar">Pilih gambar yang akan diupload</label>
<input type="file" name="gambar" required=""><br>
</div>
<div>
<button type="submit" name="upload">Upload</button>
</div>
</form>
<hr><br>
<?php
require_once 'koneksi.php';
// ambil semua data dari database
$stmt = mysqli_query($koneksi, "SELECT * FROM upload");
// tampilkan data
while ($r = $stmt->fetch_assoc()) {
echo "<img src='gambar/" . $r['gambar'] . "'>";
}
?>
</div>
</body>
</html>
Pastikan kalian menambahkan property
enctype didalam tag form:
<form method="post" action="proses_upload.php" enctype="multipart/form-data">
proses_upload.php
<?php
require_once 'koneksi.php';
$gambar = $_FILES['gambar']['name'];
$keterangan = $_POST['keterangan'];
if(isset($_POST['upload'])) {
$eks_dibolehkan = ['png', 'jpg']; // ekstensi yang diperbolehkan
$x = explode('.', $gambar); // memisahkan nama file dengan ekstensi
$ekstensi = strtolower(end($x));
$file_tmp = $_FILES['gambar']['tmp_name'];
// cek ekstensi yang dibolehkan
if(in_array($ekstensi, $eks_dibolehkan) === true) {
move_uploaded_file($file_tmp, 'gambar/' . $gambar); // memindahkan file gambar
// jalankan query insert
$query = "INSERT INTO upload (gambar) VALUES ('$gambar')";
$hasil = mysqli_query($koneksi, $query);
if($hasil) {
echo "<script>alert('Data berhasil disimpan')</script>";
header('Location:index.php');
} else {
echo "<script>alert('Data gagal disimpan')</script>";
header('Location:index.php');
}
} else {
echo "<script>alert('Ekstensi harus PNG / JPG')</script>";
header('Location:index.php');
}
} else {
echo "<script>alert('Data belum lengkap')</script>";
header('Location:index.php');
}
Maka hasil akhirnya akan seperti berikut:
kalian hanya bisa upload file dengan ekstensi jpg dan png, kalian bisa tambahkan ekstensi lainnya pada kode:
$eks_dibolehkan = ['png', 'jpg']; // ekstensi yang diperbolehkan disini
Terimakasih :)
0 Komentar