Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL
Rizaldi Maulidia Achmad
Catatan kali ini adalah pengembangan dari catatan sebelumnya mengenai Cara Membuat Upload Gambar dengan PHP dan MySQL. Pada catatan tersebut, saya hanya membahas proses upload dan proses simpan data ke database. Kebetulan ada salah satu pengunjung blog saya yang meminta untuk dibuatkan juga proses ubah dan hapusnya. Maka dari itu pada catatan ini, saya akan membahas mengenai cara membuat simpan, ubah, hapus, dan view data dari database atau yang lebih dikenal dengan istilah CRUD (Create, Read, Update, Delete) plus proses upload gambarnya.
DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – PERSIAPAN
- Buat sebuah folder dengan nama crud_upload, lalu simpan pada folder xampp/htdocs/
- Buat lagi sebuah folder dengan nama images, lalu simpan di folder xampp/htdocs/crud_upload/
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
- Buat sebuah database dengan nama mynotescode
- Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
CREATE TABLE `siswa` ( `id` int(11) NOT NULL, `nis` varchar(11) NOT NULL, `nama` varchar(50) NOT NULL, `jenis_kelamin` varchar(10) NOT NULL, `telp` varchar(15) NOT NULL, `alamat` text NOT NULL, `foto` varchar(200) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
STEP 3 – BUAT KONEKSI DATABASE
Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini kodenya :
<?php
$host = "localhost"; // Nama hostnya
$username = "root"; // Username
$password = ""; // Password (Isi jika menggunakan password)
$database = "mynotescode"; // Nama databasenya
// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>
STEP 4 – Buat View Data
Pada step ini, kita akan membuat sebuah file php yang berfungsi sebagai tampilan awal dan menampilkan semua data siswa dari database ke dalam sebuah tabel. Silahkan buat file index.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Aplikasi CRUD Plus Upload Gambar dengan PHP</title>
</head>
<body>
<h1>Data Siswa</h1>
<a href="form_simpan.php">Tambah Data</a><br><br>
<table border="1" width="100%">
<tr>
<th>Foto</th>
<th>NIS</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Telepon</th>
<th>Alamat</th>
<th colspan="2">Aksi</th>
</tr>
<?php
// Load file koneksi.php
include "koneksi.php";
// Buat query untuk menampilkan semua data siswa
$sql = $pdo->prepare("SELECT * FROM siswa");
$sql->execute(); // Eksekusi querynya
while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
echo "<tr>";
echo "<td><img src='images/".$data['foto']."' width='100' height='100'></td>";
echo "<td>".$data['nis']."</td>";
echo "<td>".$data['nama']."</td>";
echo "<td>".$data['jenis_kelamin']."</td>";
echo "<td>".$data['telp']."</td>";
echo "<td>".$data['alamat']."</td>";
echo "<td><a href='form_ubah.php?id=".$data['id']."'>Ubah</a></td>";
echo "<td><a href='proses_hapus.php?id=".$data['id']."'>Hapus</a></td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
Berikut penjelasan dari kode diatas :
include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.
$sql = $pdo->prepare(“SELECT * FROM siswa”);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada cotoh diatas, kita akan melakukan query untuk menampilkan semua data dari tabel siswa.
$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.
echo "<td><img src='images/".$data['foto']."' width='100' height='100'></td>"; echo "<td>".$data['nis']."</td>"; echo "<td>".$data['nama']."</td>"; echo "<td>".$data['jenis_kelamin']."</td>"; echo "<td>".$data['telp']."</td>"; echo "<td>".$data['alamat']."</td>"; echo "<td><a href='form_ubah.php?id=".$data['id']."'>Ubah</a></td>"; echo "<td><a href='proses_hapus.php?id=".$data['id']."'>Hapus</a></td>";
Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.
STEP 5 – Form Tambah Data
Langkah selanjutnya adalah membuat sebuah form yang digunakan untuk menambah data siswa. Silahkan buat sebuah file dengan nama form_simpan.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Aplikasi CRUD dengan PHP</title>
</head>
<body>
<h1>Tambah Data Siswa</h1>
<form method="post" action="proses_simpan.php" enctype="multipart/form-data">
<table cellpadding="8">
<tr>
<td>NIS</td>
<td><input type="text" name="nis"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
</td>
</tr>
<tr>
<td>Telepon</td>
<td><input type="text" name="telp"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat"></textarea></td>
</tr>
<tr>
<td>Foto</td>
<td><input type="file" name="foto"></td>
</tr>
</table>
<hr>
<input type="submit" value="Simpan">
<a href="index.php"><input type="button" value="Batal"></a>
</form>
</body>
</html>
STEP 6 – Proses Simpan Data
Selanjutnya kita akan membuat sebuah file yang berfungsi untuk melakukan proses upload dan simpan data ke database. Silahkan buat sebuah file dengan nama proses_simpan.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini kodenya :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
// Proses simpan ke Database
$sql = $pdo->prepare("INSERT INTO siswa(nis, nama, jenis_kelamin, telp, alamat, foto) VALUES(:nis,:nama,:jk,:telp,:alamat,:foto)");
$sql->bindParam(':nis', $nis);
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':foto', $fotobaru);
$sql->execute(); // Eksekusi query insert
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='form_simpan.php'>Kembali Ke Form</a>";
}
}else{
// Jika gambar gagal diupload, Lakukan :
echo "Maaf, Gambar gagal untuk diupload.";
echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
}
?>
Berikut penjelasan dari kode diatas :
$_FILES[‘foto‘][‘name’];
Untuk mengambil nama file yang diupload.
$_FILES[‘foto‘][‘tmp_name’];
Untuk mengambil url/path folder tempat penyimpanan sementara file yang diupload, sebelum dipindahkan ke folder images.
NOTE : Pada kode diatas, terdapat tulisan foto. tulisan tersebut harus sama dengan nama input type=”file” yang ada pada form (form_simpan.php).
move_uploaded_file($tmp_file, $path)
kode inilah yang berfungsi untuk memindahkan foto / file yang telah diupload dari folder tmp ke dalam folder di website kita (pada catatan ini kita upload gambarnya ke folder images). Struktur dasar penulisan kodenya adalah :
move_uploaded_file($tmp, $path); /* Keterangan: - $tmp : diisi dengan sumber file yang diupload - $path : diisi dengan url/path folder tempat menyimpan foto. contoh: images/foto.jpg */
STEP 7 – Form Ubah Data
Langkah selanjutnya adalah membuat sebuah form yang digunakan untuk mengubah data siswa. Silahkan buat sebuah file dengan nama form_ubah.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini tampilan dan kodenya :
<html>
<head>
<title>Aplikasi CRUD dengan PHP</title>
</head>
<body>
<h1>Ubah Data Siswa</h1>
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS yang dikirim oleh index.php melalui URL
$id = $_GET['id'];
// Query untuk menampilkan data siswa berdasarkan ID yang dikirim
$sql = $pdo->prepare("SELECT * FROM siswa WHERE id=:id");
$sql->bindParam(':id', $id);
$sql->execute(); // Eksekusi query insert
$data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql
?>
<form method="post" action="proses_ubah.php?id=<?php echo $id; ?>" enctype="multipart/form-data">
<table cellpadding="8">
<tr>
<td>NIS</td>
<td><input type="text" name="nis" value="<?php echo $data['nis']; ?>"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value="<?php echo $data['nama']; ?>"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<?php
if($data['jenis_kelamin'] == "Laki-laki"){
echo "<input type='radio' name='jenis_kelamin' value='laki-laki' checked='checked'> Laki-laki";
echo "<input type='radio' name='jenis_kelamin' value='perempuan'> Perempuan";
}else{
echo "<input type='radio' name='jenis_kelamin' value='laki-laki'> Laki-laki";
echo "<input type='radio' name='jenis_kelamin' value='perempuan' checked='checked'> Perempuan";
}
?>
</td>
</tr>
<tr>
<td>Telepon</td>
<td><input type="text" name="telp" value="<?php echo $data['telp']; ?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea name="alamat"><?php echo $data['alamat']; ?></textarea></td>
</tr>
<tr>
<td>Foto</td>
<td>
<input type="file" name="foto">
</td>
</tr>
</table>
<hr>
<input type="submit" value="Ubah">
<a href="index.php"><input type="button" value="Batal"></a>
</form>
</body>
</html>
Yang harus diperhatikan pada form ubah ini adalah saya telah menambahkan sebuah checkbox dengan atribut name ubah_foto. Checkbox ini berfungsi untuk mengecek apakah user ingin mengubah data siswa sekaligus dengan mengubah fotonya atau tidak. Jadi jika user menceklis checkbox tersebut, maka foto akan diubah dan diupload ulang sesuai yang user pilih pada form. Sebaliknya jika tidak diceklis, maka proses upload foto tidak akan dilakukan dan foto tetap foto yang sama atau tidak diubah.
Pada form ubah juga, kita melakukan query ke database untuk menampilkan data siswa sebelumnya sesuai yang diklik oleh user pada halaman index.php. Perhatikan pada skrip form ubah diatas, terdapat kode berikut :
$id = $_GET[‘id‘];
Kode diatas berfungsi untuk mengambil data id yang dikirim oleh file index.php melalui sebuah link edit. Perhatikan skrip yang diberi warna merah, skrip tersebut harus sama dengan skrip yang ada di file index.php. Lihat pada file index.php terdapat skrip berikut :
echo “<td><a href=’form_ubah.php?id=”.$data[‘id’].”‘>Ubah</a></td>”;
Skrip tersebut yang akan membawa user ke halaman form ubah sekaligus mengirim data id siswa yang diklik oleh user (Perhatikan skrip yang diberi warna hijau dan merah). Skrip yang diberi warna hijau harus sama dengan $_GET[‘id‘] yang ada di file form_ubah.php.
STEP 8 – Proses Ubah Data
Selanjutnya kita akan membuat sebuah file yang berfungsi untuk melakukan proses ubah data. Silahkan buat sebuah file dengan nama proses_ubah.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini kodenya :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data ID yang dikirim oleh form_ubah.php melalui URL
$id = $_GET['id'];
// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
// Ambil data foto yang dipilih dari form
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Cek apakah user ingin mengubah fotonya atau tidak
if(empty($foto)){ // Jika user tidak memilih file foto pada form
// Lakukan proses update tanpa mengubah fotonya
// Proses ubah data ke Database
$sql = $pdo->prepare("UPDATE siswa SET nis=:nis, nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat WHERE id=:id");
$sql->bindParam(':nis', $nis);
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':id', $id);
$execute = $sql->execute(); // Eksekusi / Jalankan 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='form_ubah.php'>Kembali Ke Form</a>";
}
}else{ // Jika user memilih foto / mengisi input file foto pada form
// Lakukan proses update termasuk mengganti foto sebelumnya
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
// Query untuk menampilkan data siswa berdasarkan ID yang dikirim
$sql = $pdo->prepare("SELECT foto FROM siswa WHERE id=:id");
$sql->bindParam(':id', $id);
$sql->execute(); // Eksekusi query insert
$data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql
// Cek apakah file foto sebelumnya ada di folder images
if(is_file("images/".$data['foto'])) // Jika foto ada
unlink("images/".$data['foto']); // Hapus file foto sebelumnya yang ada di folder images
// Proses ubah data ke Database
$sql = $pdo->prepare("UPDATE siswa SET nis=:nis, nama=:nama, jenis_kelamin=:jk, telp=:telp, alamat=:alamat, foto=:foto WHERE id=:id");
$sql->bindParam(':nis', $nis);
$sql->bindParam(':nama', $nama);
$sql->bindParam(':jk', $jenis_kelamin);
$sql->bindParam(':telp', $telp);
$sql->bindParam(':alamat', $alamat);
$sql->bindParam(':foto', $fotobaru);
$sql->bindParam(':id', $id);
$execute = $sql->execute(); // Eksekusi / Jalankan 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='form_ubah.php'>Kembali Ke Form</a>";
}
}else{
// Jika gambar gagal diupload, Lakukan :
echo "Maaf, Gambar gagal untuk diupload.";
echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
}
}
?>
Berikut penjelasan skrip diatas.
$id = $_GET[‘id‘];
Skrip yang saya beri warna merah harus sama dengan skrip yang ada di file form_ubah.php (yang saya beri warna hijau) dibawah ini :
<form method=”post” action=”proses_ubah.php?id=<?php echo $id; ?>” enctype=”multipart/form-data”>
Kemudian perhatikan skrip berikut :
unlink(“images/”.$data[‘foto‘]);
Skrip tersebut berfungsi untuk menghapus sebuah file pada folder yang telah kita tentukan. Pada kasus disini, kita akan menghapus sebuah file gambar pada folder images dimana nama file gambar yang akan dihapus diambil dari database. $data[‘foto’] berfungsi untuk mengambil nama file foto yang ada di tabel siswa.
STEP 9 – Proses Hapus Data
Selanjutnya kita akan membuat sebuah file yang berfungsi untuk melakukan proses hapus data. Silahkan buat sebuah file dengan nama proses_hapus.php, lalu simpan di folder xampp/htdocs/crud_upload/. Berikut ini kodenya :
<?php
// Load file koneksi.php
include "koneksi.php";
// Ambil data NIS yang dikirim oleh index.php melalui URL
$id = $_GET['id'];
// Query untuk menampilkan data siswa berdasarkan ID yang dikirim
$sql = $pdo->prepare("SELECT foto FROM siswa WHERE id=:id");
$sql->bindParam(':id', $id);
$sql->execute(); // Eksekusi query insert
$data = $sql->fetch(); // Ambil semua data dari hasil eksekusi $sql
// Cek apakah file fotonya ada di folder images
if(is_file("images/".$data['foto'])) // Jika foto ada
unlink("images/".$data['foto']); // Hapus foto yang telah diupload dari folder images
// Query untuk menghapus data siswa berdasarkan ID yang dikirim
$sql = $pdo->prepare("DELETE FROM siswa WHERE id=:id");
$sql->bindParam(':id', $id);
$execute = $sql->execute(); // Eksekusi / Jalankan query
if($execute){ // 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 "Data gagal dihapus. <a href='index.php'>Kembali</a>";
}
?>
Berikut penjelasan skrip diatas.
$id = $_GET[‘id‘];
Skrip yang saya beri warna merah harus sama dengan skrip yang ada di file index.php (yang saya beri warna hijau) dibawah ini :
echo “<td><a href=’proses_hapus.php?id=”.$data[‘id’].”‘>Hapus</a></td>”;
Kemudian perhatikan skrip berikut :
unlink(“images/”.$data[‘foto‘]);
Skrip tersebut berfungsi untuk menghapus sebuah file pada folder yang telah kita tentukan. Pada kasus disini, kita akan menghapus sebuah file gambar pada folder images dimana nama file gambar yang akan dihapus diambil dari database. $data[‘foto’] berfungsi untuk mengambil nama file foto yang ada di tabel siswa.
Sekian untuk tutorial kali ini. Jika ada hal yang ingin ditanyakan, langsung tanyakan saja lewat kolom komentar dibawah ini. Jangan lupa LIKE dan SHARE nya hehe, Terimakasih.
Happy Coding ^_^
SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
– Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini
Cara mudah membuat simpan, edit, delete, dan view dengan PHP dan MySQL. Tutorial membuat CRUD Plus Upload Gambar denga PHP dan MySQL. Tutorial membuat simpan, edit, delete, dan view dengan PHP dan MySQL. Cara mudah membuat insert, edit, delete, dan view dengan PHP dan MySQL. Tutorial membuat insert, edit, delete, dan view dengan PHP dan MySQL.
POST YOUR COMMENTS