Kali ini saya akan membahas bagaimana cara create, read, update dan delete image dengan memakai bahasa pemrograman PHP dan MYSQL. Masih hampir sama dengan beberapa waktu kemudian perihal postingan yang saya buat mengenai Cara Membuat Edit Menggunakan Modal Bootstrap. Kaprikornus kita harus online untuk pemanggilan bootstrap tersebut biar tampilan yang dibentuk tidak terlalu kaku.
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 sanggup diadaptasi 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 sanggup 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, pribadi 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 kau sudah menciptakan Create dan Read, selanjutnya kita akan menciptakan 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 kalau 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 tolong-menolong untuk editnya tapi saya yakin kau sanggup memahaminya. Oke buat file dan beri nama updatedata.php kemudian 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 daerah menyimpan fotonya $path = "foto/".$fotobaru; if(move_uploaded_file($nama_gambar, $path)){ // Cek apakah gambar berhasil diupload atau tidak // Query untuk menampilkan data user menurut 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 sanksi $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 kalau 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 ketika 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 kalau 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 ketika mencoba untuk menyimpan data ke database."; echo "<br><a href='index.php'>Kembali Ke Form</a>"; } } ?> 11. Terakhir ialah 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 jadwal diatas dengan url http://localhost/crud_imageOke hingga disini kau sudah berhasil menciptakan Create, Read, Update dan Delete Image memakai PHP dan MYSQL. Cara di atas saya memakai Xampp versi 5, jadi fungsi crud image diatas hanya berjalan pada xampp versi 5, jangan coba-coba menjalankannya di xampp versi 7 yah.
Buat kau yang gak ingin ribet sanggup mend0wnl0adnya dibawah ini, lengkap dengan file SQLnya.
Sumber http://www.warunginter.net/