Membuat Create Read Update Delete Image Pada PHP dan MYSQL
Kali ini saya akan membahas bagaimana cara create, read, update dan delete image dengan menggunakan bahasa pemrograman PHP dan MYSQL. Masih hampir sama dengan beberapa waktu lalu tentang postingan yang saya buat mengenai Cara Membuat Edit Menggunakan Modal Bootstrap. Jadi kita harus online untuk pemanggilan bootstrap tersebut agar tampilan yang dibuat tidak terlalu kaku.
2. Kemudian buat satu table dengan nama “user” dimana di table tersebut terdapat 3 field yakni id_user, username dan foto.
3. Untuk id_user typenya pilih integer dan beri Primary Key serta Auto Increment, sedangkan untuk username dan foto beri type varchar saja dan untuk Length/Values isi terserah atau sesuai dengan kebutuhan saja.
4. Buat Folder dengan nama "crud_image" atau bisa disesuaikan dengan kebutuhan kamu, kemudian didalam folder tadi buat folder lagi dengan nama "foto".
5. Kemudian kita buat koneksi ke databasenya terlebih dahulu, buat file dan beri nama koneksi.php dan masukan script dibawah ini.
6. Selanjutnya kita buat index.php untuk menampilkan data (Read) yang akan kita buat nanti, serta untuk menampilkan button tambah data (masukan script dibawah ini).
7. Sekarang buat file lagi dengan nama formdata.php, fungsinya yakni untuk menginput data yang akan kita tampilkan, langsung saja masukan script dibawah ini.
8. Sekarang kita buat file proses penginputan tadi dengan nama tambahdata.php dan masukkan script dibawah ini.
9. Sampai disini kamu sudah membuat Create dan Read, selanjutnya kita akan membuat editnya. Buat file lagi dan beri nama formedit.php kemudian masukkan script dibawah ini.
10. Sekarang kita buat proses update editnya, agak ribet sih sebenarnya untuk editnya tapi saya yakin kamu bisa memahaminya. Oke buat file dan beri nama updatedata.php lalu masukan script dibawah ini.
11. Terakhir adalah proses Delete data tersebut. Buat file dengan nama deletedata.php dan masukkan script dibawah ini.
Oke sampai disini kamu sudah berhasil membuat Create, Read, Update dan Delete Image menggunakan PHP dan MYSQL. Cara di atas saya menggunakan Xampp versi 5, jadi fungsi crud image diatas hanya berjalan pada xampp versi 5, jangan coba-coba menjalankannya di xampp versi 7 yah.
Buat kamu yang gak ingin ribet dapat mendownloadnya dibawah ini, lengkap dengan file SQLnya.
Membuat Create Read Update Delete Image Pada PHP dan MYSQL
1. Pertama-tama buat database dengan nama “belajar_image” (tanpa petik).2. Kemudian buat satu table dengan nama “user” dimana di table tersebut terdapat 3 field yakni id_user, username dan foto.
3. Untuk id_user typenya pilih integer dan beri Primary Key serta Auto Increment, sedangkan untuk username dan foto beri type varchar saja dan untuk Length/Values isi terserah atau sesuai dengan kebutuhan saja.
4. Buat Folder dengan nama "crud_image" atau bisa disesuaikan dengan kebutuhan kamu, kemudian didalam folder tadi buat folder lagi dengan nama "foto".
5. Kemudian kita buat koneksi ke databasenya terlebih dahulu, buat file dan beri nama koneksi.php dan masukan script dibawah ini.
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "belajar_image";
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
6. Selanjutnya kita buat index.php untuk menampilkan data (Read) yang akan kita buat nanti, serta untuk menampilkan button tambah data (masukan script dibawah ini).
<?php
include 'koneksi.php';
?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<a href="formdata.php" class="btn btn-primary btn-sm"><span class="fa fa-plus"></span> Tambah Data</a>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No</th>
<th>Username</th>
<th>Foto</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$sql = mysql_query("select * from user order by id_user desc");
while($data=mysql_fetch_array($sql)){
?>
<tr>
<td><?php echo $no ?></td>
<td><?php echo $data['username'] ?></td>
<td><img src="foto/<?php echo $data['foto'] ?>" width="150px" height="120px" /></td>
<td>
<a href="formedit.php?id_user=<?php echo $data['id_user']; ?>" class="btn btn-warning" Title="Edit"><span class="glyphicon glyphicon-edit"></a>
<a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='deletedata.php?id_user=<?php echo $data['id_user']; ?>' }" class="btn btn-danger" Title="Delete"><span class="glyphicon glyphicon-remove"></a>
</td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
7. Sekarang buat file lagi dengan nama formdata.php, fungsinya yakni untuk menginput data yang akan kita tampilkan, langsung saja masukan script dibawah ini.
<?php include 'koneksi.php'; ?> <!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"> <meta name="description" content=""> <meta name="author" content=""> <title>Form Data</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <span class="fa fa-user"> Tambah User</span> </div> <!-- /.panel-heading --> <div class="panel-body"> <form action="tambahdata.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Username</label> <input name="username" type="text" class="form-control" placeholder="Username .." required> </div> <div class="form-group"> <label>Foto</label> <input name="gambar" id="gambar" type="file" class="form-control" required> </div> <input type="submit" class="btn btn-primary" value="Simpan"> <a href="index.php" class="btn btn-warning"> Kembali</a> </form> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
8. Sekarang kita buat file proses penginputan tadi dengan nama tambahdata.php dan masukkan script dibawah ini.
<?php
include "koneksi.php";
$username = $_POST['username'];
$sumber = $_FILES['gambar']['tmp_name'];
$target = 'foto/';
$nama_gambar = $_FILES['gambar']['name'];
$pindah = move_uploaded_file($sumber, $target.$nama_gambar);
if($pindah){
$query = "insert into user values('','$username','$nama_gambar')";
$hasil = mysql_query($query);
}
if($hasil)
{
header("location:index.php");
}
else{
echo "Penyimpanan gagal";
}
?>
9. Sampai disini kamu sudah membuat Create dan Read, selanjutnya kita akan membuat editnya. Buat file lagi dan beri nama formedit.php kemudian masukkan script dibawah ini.
<?php
include 'koneksi.php';
?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Form Edit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$id_user=mysql_real_escape_string($_GET['id_user']);
$det=mysql_query("select * from user where id_user='$id_user'")or die(mysql_error());
while($d=mysql_fetch_array($det)){
?>
<div class="panel panel-primary">
<div class="panel-heading">
<span class="fa fa-user"> Edit User</span>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form action="updatedata.php" method="post" enctype="multipart/form-data">
<input name="id_user" type="hidden" class="form-control" value="<?php echo $d['id_user'] ?>" required>
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" value="<?php echo $d['username'] ?>" required>
</div>
<div class="form-group">
<label>Foto</label><br>
<img src="foto/<?php echo $d['foto'] ?>" width="150px" height="120px" /></br>
<input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto<br>
<input name="gambar" id="gambar" type="file" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Simpan">
<a href="index.php" class="btn btn-warning"> Kembali</a>
</form>
<?php
}
?>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
10. Sekarang kita buat proses update editnya, agak ribet sih sebenarnya untuk editnya tapi saya yakin kamu bisa memahaminya. Oke buat file dan beri nama updatedata.php lalu masukan script dibawah ini.
<?php
include "koneksi.php";
$id_user=$_POST['id_user'];
$username=$_POST['username'];
// Cek apakah user ingin mengubah fotonya atau tidak
if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada di form ubah, lakukan :
// Ambil data foto yang dipilih dari form
$sumber = $_FILES['gambar']['name'];
$nama_gambar = $_FILES['gambar']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$sumber;
// Set path folder tempat menyimpan fotonya
$path = "foto/".$fotobaru;
if(move_uploaded_file($nama_gambar, $path)){ // Cek apakah gambar berhasil diupload atau tidak
// Query untuk menampilkan data user berdasarkan id_user yang dikirim
$query = "SELECT * FROM user WHERE id_user='".$id_user."'";
$sql = mysql_query($query); // Eksekusi/Jalankan query dari variabel $query
$data = mysql_fetch_array($sql); // Ambil data dari hasil eksekusi $sql
// Cek apakah file gambar sebelumnya ada di folder foto
if(is_file("foto/".$data['foto'])) // Jika gambar ada
unlink("foto/".$data['foto']); // Hapus file gambar sebelumnya yang ada di folder images
// Proses ubah data ke Database
$query = "update user set username='$username', foto='$fotobaru' where id_user='$id_user' ";
$sql = mysql_query($query); // Eksekusi/ Jalankan query dari variabel $query
if($sql){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman index.php
}else{
// Jika Gagal, Lakukan :
echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
echo "<br><a href='index.php'>Kembali Ke Form</a>";
}
}else{
// Jika gambar gagal diupload, Lakukan :
echo "<script> alert('Maaf, Gambar gagal untuk diupload');
location = 'index.php';
</script>";
}
}else{ // Jika user tidak menceklis checkbox yang ada di form ubah, lakukan :
// Proses ubah data ke Database
$query = "update user set username='$username' where id_user='$id_user' ";
$sql = mysql_query($query); // Eksekusi/ Jalankan query dari variabel $query
if($sql){ // Cek jika proses simpan ke database sukses atau tidak
// Jika Sukses, Lakukan :
header("location: index.php"); // Redirect ke halaman index.php
}else{
// Jika Gagal, Lakukan :
echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
echo "<br><a href='index.php'>Kembali Ke Form</a>";
}
}
?>
11. Terakhir adalah proses Delete data tersebut. Buat file dengan nama deletedata.php dan masukkan script dibawah ini.
<?php
include "koneksi.php";
$id_user=$_GET['id_user'];
$query = "Delete From user Where id_user='$id_user'";
$hasil = mysql_query($query);
if($hasil){
header("location:index.php");
}
else{
echo "Hapus Data Gagal";
}
?>
12. Silahkan buka program diatas dengan url http://localhost/crud_imageOke sampai disini kamu sudah berhasil membuat Create, Read, Update dan Delete Image menggunakan PHP dan MYSQL. Cara di atas saya menggunakan Xampp versi 5, jadi fungsi crud image diatas hanya berjalan pada xampp versi 5, jangan coba-coba menjalankannya di xampp versi 7 yah.
Buat kamu yang gak ingin ribet dapat mendownloadnya dibawah ini, lengkap dengan file SQLnya.