Pada
prinsipnya saat mengganti file data gambar prosesnya kurang lebih sama saat
mengupdate data biasa dalam sebuah database. Saat proses update gambar
terkadang kita menginginkan bukan hanya gambar atau file gambarnya saja yang
terganti akan tetapi gambar lama yang sudah di upload sebelumnya ikut terganti
agar tidak terjadi penumpukan file gambar pada direktori folder.
Yang menjadi pertanyaan adalah bagaimana mengganti gambar lama dan menghapus gambar lama tersebut pada direktori folder dengan mengganti gambar yang baru di upload..??. Untuk itu pada tutorial Inspirasi Source Code, kali ini saya akan membahas mengenai pertanyaan tersebut. Tutorial kali ini saya beri judul “Mengganti File Gambar Pada Folder Direktori Dengan PHP”, atau dengan kata lain ketika gambar di edit dan mau mengganti gambar yang baru, gambar lama harus terhapus pada di direktori folder.
Langsung saja pada pembahasan inti tutorial ini dan silahkan simak langkah demi langkah yaitu sebagai berikut:
- Pertama: Buatlah terlebih sebuah database dan tabel database untuk penyimpanan file gambarnya, contoh (database: materi) (tabel database:file_materi). Buatlah seperti contoh gambar berikut:
- Selanjutnya: Buatlah sebuah file index.php yang berfungsi untuk menampilkan file yang telah di inputkan dalam database diatas dan copy script berikut:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>kodingbuton.com</title>
<link
href="css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<center>
<h3>
Mengganti File Gambar Pada Folder Dengan PHP</h3>
<h3>
Tutorial <a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<?php
$conn=($GLOBALS["___mysqli_ston"]
= mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"materi") or die ("Database Tidak Terdeteksi");
?>
<div
class="row">
<div
class="col-lg-4">
</div>
<div
class="col-lg-5">
<div
class="panel-body">
<table
class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><b>No.</b></th>
<th><b>Judul
</b></th>
<th><b>Gambar
</b></th>
<th><b>Ubah</b></th>
</tr>
</thead>
<?php
$sql =
mysqli_query($GLOBALS["___mysqli_ston"], "SELECT * FROM
file_materi");
$no=1;
while ($r=mysqli_fetch_array($sql)){
?>
<?php
echo
"<tr><td>$no</td>
<td>$r[judul]</td>";
?>
<td><img
src="gambar/<?php echo $r['gambar']; ?>" class="thumb-sm img-circle"
width="200" height="200" /></td>
<td><a
href="update.php?id_file=<?php echo
$r['id_file']; ?>"><button class="btn btn-primary
btn-sm" title="Ubah">Ubah</button></a>
</td>
<?php
$no++;
}
?>
</table></div></div></div>
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
- Kemudian: Buat lagi file updata.php yang berfungsi untuk proses update gambar dan copy dengan script berikut:
<?php
$conn=($GLOBALS["___mysqli_ston"]
= mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"materi") or die ("Database Tidak Terdeteksi");
$id_file=$_GET['id_file'];
$sql="select
* from file_materi where id_file='$id_file'";
$query=mysqli_query($GLOBALS["___mysqli_ston"],
$sql);
$r=mysqli_fetch_array($query);
if(isset($_POST['Edit'])){
$judul=$_POST['judul'];
$gambar=$_FILES['gambar']['name'];
unlink("gambar/$r[gambar]");
if(move_uploaded_file($_FILES["gambar"]["tmp_name"],"gambar/".$_FILES["gambar"]["name"])){
$a=mysqli_query($GLOBALS["___mysqli_ston"],
"UPDATE file_materi SET gambar='$gambar' WHERE id_file='$id_file'");
}
if($a){
echo '<div
class="alert alert-success alert-dismissable"><button
type="button" class="close" data-dismiss="alert"
aria-hidden="true">×</button>Data Berhasil Di
Simpan.</div>';
}else{
echo '<div
class="alert alert-danger alert-dismissable"><button
type="button" class="close" data-dismiss="alert"
aria-hidden="true">×</button>Data Gagal Di simpan
!</div>';
}
echo
"<meta http-equiv='refresh' content='3; url=index.php'>";
}
?>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>kodingbuton.com</title>
<link
href="css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<center>
<h3>
Mengganti File Gambar Pada Folder Dengan PHP</h3>
<h3>
Tutorial <a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<div
class="row">
<div
class="col-lg-4">
</div>
<div
class="col-lg-6">
<div
class="panel-body">
<form
action="" method="post"
enctype="multipart/form-data" class="form-horizontal">
<div
class="form-group row">
<label
class="col-sm-4 control-label">Judul</label>
<div
class="col-lg-4">
<input
name="judul" type="text" class='form-control'
value="<?php echo $r['judul']; ?>"/>
</div></div>
<div
class="form-group row">
<?php
$gambar=$r['gambar'];
if(empty($gambar)){
?>
<label
class="col-sm-4 control-label">Upload Gambar </label>
<div
class="col-sm-4">
<input
type="file" name="gambar" />
</div>
<?php
} else{
?>
<label
class="col-sm-4 control-label">Gambar Sebelumnya</label>
<div
class="col-sm-4">
<img
src="gambar/<?php echo $r['gambar']; ?>" class="thumb-sm img-circle"
width="200" height="200" />
</div>
</div>
<div
class="form-group row">
<label
class="col-sm-4 control-label">Ganti Foto</label>
<div
class="col-sm-4">
<input
type="file" name="gambar" id="input-file-max-fs"
/>
</div>
<?php }
?>
</div>
<div
class="form-group row">
<input
name="Edit" class="btn btn-primary btn-sm"
type="submit" id="edit" value="Simpan" />
<input
name="batal" class="btn btn-danger btn-sm"
type="reset" id="batal" value="Batal" />
</div>
</form>
Simpan file PHP yang sudah dibuat tersebut dalam sebuah folder dan letakan pada folder htdocs yang terletak pada folder xampp yang telah ter-instal pada komputer anda, (C:\xampp\htdocs\ update-file).
Tambahkan sebuah folder dengan nama "gambar" dalam folder update-file, folder "gambar" tersebut berfungsi sebagai direktori folder penampungan file gambar. Pada folder "gambar" tersebut letakan sebuah gambar dengan nama yang sesuai dengan hasil insert pada database seperti contoh pada gambar pertama diatas (sebelah kiri).
Jalankan browser dan ketikan url pada address bar (contoh: localhost/ update-file). Jika semua proses telah sesuai dan berjalan lancar maka akan tampil seperti contoh gambar pertama diatas (sebelah kanan).
Selanjutnya yaitu proses mengganti file gambar pada folder direktori dilakukan dengan cara mengklik tombol "ubah" agar tampil form update data seperti gambar berikut:
- Apabila form update data telah tampak seperti contoh gambar diatas maka, silahkan ganti file gambar sebelumnya dengan gambar yang baru sesuai yang Anda inginkan.
- Jika proses berhasil tersimpan maka, akan tampak seperti contoh gambar berikut:
- Silahkan cek file gambar pada folder direktori (contoh gambar sebelah kiri telah berhasil terganti dan sesuai dengan gambar yang ada pada contoh gambar sebelah kanan)
Demikian pembahasan tutorial kali ini semoga
apa yang saya bagikan ini dapat bermanfaat dan menjadi Inspirasi dan edukasi
untuk Mengganti File Gambar Pada Folder Direktori pada halaman website
anda.
Apabila ada source code yang tidak
berjalan, error atau tidak sesuai,, silahkan isi kolom komentar pada
bagian bawah tutorial ini...!.
Lihat juga: Cara Mudah Review sebelum Upload,Edit,Hapus Gambar Pada Php Dan Mysql
Post a Comment