Assalamualaikum Wr.Wb...
dengan diberikan nikmat dan rezeki dari Allah SWT, saya Mr.Gagaltotal666 akan
berbagi kepada anda yaitu tentang Crud Sederhana Plus Upload Image
di Native PHP 7 dan MySQLi Webserver Apache..
Crud Sederhana kali ini hanya dengan kerangka pure Html dan css
serta tidak ada keamanan data, contoh seperti SQLi dan XSS
karena sederhana saya hanya mencontohkan kepada anda CRUD dengan gambar
oke seperti biasa yang harus di siapkan yaitu untuk di server
PHP, Mysql dan webserver apache atau nginx
untuk di windows anda bisa install xampp dan laragon
dan jangan lupa siapkan text editor favorit anda...
pertama buat koneksi untuk ke database, contoh sederhana koneksi
database PHP native 7 dengan Mysqli
<?php
$host = "127.0.0.1";
$user = "user database";
$pass = "password123";
$nama_db = "crud-foto"; //nama database
$koneksi = mysqli_connect($host,$user,$pass,$nama_db); //pastikan urutan nya seperti ini, jangan tertukar
if(!$koneksi){ //jika tidak terkoneksi maka akan tampil error
die ("Koneksi dengan database gagal: ".mysql_connect_error());
}
?>
untuk penjelasan coding sudah diberikan coment di setiap file
silakan anda pahami dan pelajari...
buat halaman depan yaitu index.php
<?php
include('koneksi.php'); //agar index terhubung dengan database, maka koneksi sebagai penghubung harus di include
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD dengan gambar</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;
color: blue;
}
table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 70%;
margin: 10px auto 10px auto;
}
table thead th {
background-color: #0754fa;
border: solid 1px #DDEEEE;
color: #fff;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
}
table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
a {
background-color: blue;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<h1 align="center">Tutorial CRUD PHP dengan Gambar </h1>
<center><a href="tambah_produk.php">+ Tambah data</a><center>
<br><br>
<table>
<thead>
<tr>
<th>No</th>
<th>Produk</th>
<th>Dekripsi</th>
<th>Harga Beli</th>
<th>Harga Jual</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
// jalankan query untuk menampilkan semua data diurutkan berdasarkan nim
$query = "SELECT * FROM produk ORDER BY id ASC";
$result = mysqli_query($koneksi, $query);
//mengecek apakah ada error ketika menjalankan query
if(!$result){
die ("Query Error: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
}
//buat perulangan untuk element tabel dari data mahasiswa
$no = 1; //variabel untuk membuat nomor urut
// hasil query akan disimpan dalam variabel $data dalam bentuk array
// kemudian dicetak dengan perulangan while
while($row = mysqli_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $row['nama_produk']; ?></td>
<td><?php echo substr($row['deskripsi'], 0, 20); ?></td>
<td>Rp <?php echo number_format($row['harga_beli'],0,',','.'); ?></td>
<td>Rp <?php echo $row['harga_jual']; ?></td>
<td style="text-align: center;"><img src="gambar/<?php echo $row['gambar_produk']; ?>" style="width: 120px;"></td>
<td>
<a href="edit_produk.php?id=<?php echo $row['id']; ?>">Edit</a> |
<a href="proses_hapus.php?id=<?php echo $row['id']; ?>" onclick="return confirm('Anda yakin akan menghapus data ini?')">Hapus</a>
</td>
</tr>
<?php
$no++; //untuk nomor urut terus bertambah 1
}
?>
</tbody>
</table>
</body>
</html>
selanjut nya buat file tambah data, contoh seperti ini tambah_data.php
<?php
include('koneksi.php'); //agar index terhubung dengan database, maka koneksi sebagai penghubung harus di include
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD dengan gambar</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;
color: blue;
}
button {
background-color: blue;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
border: 0px;
margin-top: 20px;
}
label {
margin-top: 10px;
float: left;
text-align: left;
width: 100%;
}
input {
padding: 6px;
width: 100%;
box-sizing: border-box;
background: #f8f8f8;
border: 2px solid #ccc;
outline-color: salmon;
}
div {
width: 100%;
height: auto;
}
.base {
width: 400px;
height: auto;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: #ededed;
}
a {
background-color: blue;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<center>
<h1>Tambah Data</h1>
<center>
<form method="POST" action="proses_tambah.php" enctype="multipart/form-data" >
<section class="base">
<div>
<label>Nama Produk</label>
<input type="text" name="nama_produk" autofocus="" required="" />
</div>
<div>
<label>Deskripsi</label>
<input type="text" name="deskripsi" />
</div>
<div>
<label>Harga Beli</label>
<input type="text" name="harga_beli" required="" />
</div>
<div>
<label>Harga Jual</label>
<input type="text" name="harga_jual" required="" />
</div>
<div>
<label>Gambar Produk</label>
<input type="file" name="gambar_produk" required="" />
</div>
<div>
<button type="submit">Simpan Data</button>
<a href="index.php">Kembali</a>
</div>
</section>
</form>
</body>
</html>
di form action saya menambahkan suatu file yaitu proses_tambah.php
buat proses_tambah.php sebagai berikut
<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';
// membuat variabel untuk menampung data dari form
$nama_produk = $_POST['nama_produk'];
$deskripsi = $_POST['deskripsi'];
$harga_beli = $_POST['harga_beli'];
$harga_jual = $_POST['harga_jual'];
$gambar_produk = $_FILES['gambar_produk']['name'];
//cek dulu jika ada gambar produk jalankan coding ini
if($gambar_produk != "") {
$ekstensi_diperbolehkan = array('png','jpg'); //ekstensi file gambar yang bisa diupload
$x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang diupload
$ekstensi = strtolower(end($x));
$file_tmp = $_FILES['gambar_produk']['tmp_name'];
$angka_acak = rand(1,999);
$nama_gambar_baru = $angka_acak.'-'.$gambar_produk; //menggabungkan angka acak dengan nama file sebenarnya
if(in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
move_uploaded_file($file_tmp, 'gambar/'.$nama_gambar_baru); //memindah file gambar ke folder gambar
// jalankan query INSERT untuk menambah data ke database pastikan sesuai urutan (id tidak perlu karena dibikin otomatis)
$query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli, harga_jual, gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli', '$harga_jual', '$nama_gambar_baru')";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil ditambah.');window.location='index.php';</script>";
}
} else {
//jika file ekstensi tidak jpg dan png maka alert ini yang tampil
echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau png.');window.location='tambah_produk.php';</script>";
}
} else {
$query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli, harga_jual, gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli', '$harga_jual', null)";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil ditambah.');window.location='index.php';</script>";
}
}
selanjut nya membuat edit data, contoh edit_data.php
<?php
// memanggil file koneksi.php untuk membuat koneksi
include 'koneksi.php';
// mengecek apakah di url ada nilai GET id
if (isset($_GET['id'])) {
// ambil nilai id dari url dan disimpan dalam variabel $id
$id = ($_GET["id"]);
// menampilkan data dari database yang mempunyai id=$id
$query = "SELECT * FROM produk WHERE id='$id'";
$result = mysqli_query($koneksi, $query);
// jika data gagal diambil maka akan tampil error berikut
if(!$result){
die ("Query Error: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
}
// mengambil data dari database
$data = mysqli_fetch_assoc($result);
// apabila data tidak ada pada database maka akan dijalankan perintah ini
if (!count($data)) {
echo "<script>alert('Data tidak ditemukan pada database');window.location='index.php';</script>";
}
} else {
// apabila tidak ada data GET id pada akan di redirect ke index.php
echo "<script>alert('Masukkan data id.');window.location='index.php';</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD dengan gambar</title>
<style type="text/css">
* {
font-family: "Trebuchet MS";
}
h1 {
text-transform: uppercase;
color: blue;
}
button {
background-color: blue;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
border: 0px;
margin-top: 20px;
}
label {
margin-top: 10px;
float: left;
text-align: left;
width: 100%;
}
input {
padding: 6px;
width: 100%;
box-sizing: border-box;
background: #f8f8f8;
border: 2px solid #ccc;
outline-color: salmon;
}
div {
width: 100%;
height: auto;
}
.base {
width: 400px;
height: auto;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: #ededed;
}
a {
background-color: blue;
color: #fff;
padding: 10px;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<center>
<h1>Edit Data <?php echo $data['nama_produk']; ?></h1>
<center>
<form method="POST" action="proses_edit.php" enctype="multipart/form-data" >
<section class="base">
<!-- menampung nilai id produk yang akan di edit -->
<input name="id" value="<?php echo $data['id']; ?>" hidden />
<div>
<label>Nama Produk</label>
<input type="text" name="nama_produk" value="<?php echo $data['nama_produk']; ?>" autofocus="" required="" />
</div>
<div>
<label>Deskripsi</label>
<input type="text" name="deskripsi" value="<?php echo $data['deskripsi']; ?>" />
</div>
<div>
<label>Harga Beli</label>
<input type="text" name="harga_beli" required=""value="<?php echo $data['harga_beli']; ?>" />
</div>
<div>
<label>Harga Jual</label>
<input type="text" name="harga_jual" required="" value="<?php echo $data['harga_jual']; ?>"/>
</div>
<div>
<label>Gambar Produk</label>
<img src="gambar/<?php echo $data['gambar_produk']; ?>" style="width: 120px;float: left;margin-bottom: 5px;">
<input type="file" name="gambar_produk" />
<i style="float: left;font-size: 11px;color: red">Abaikan jika tidak merubah gambar produk</i>
</div>
<div>
<button type="submit">Simpan Data</button>
<a href="index.php">Kembali</a>
</div>
</section>
</form>
</body>
</html>
di form action edit ada suatu file yaitu edit_proses.php
buat file proses_edit.php, contoh sebagai berikut
<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';
// membuat variabel untuk menampung data dari form
$id = $_POST['id'];
$nama_produk = $_POST['nama_produk'];
$deskripsi = $_POST['deskripsi'];
$harga_beli = $_POST['harga_beli'];
$harga_jual = $_POST['harga_jual'];
$gambar_produk = $_FILES['gambar_produk']['name'];
//cek dulu jika merubah gambar produk jalankan coding ini
if($gambar_produk != "") {
$ekstensi_diperbolehkan = array('png','jpg'); //ekstensi file gambar yang bisa diupload
$x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang diupload
$ekstensi = strtolower(end($x));
$file_tmp = $_FILES['gambar_produk']['tmp_name'];
$angka_acak = rand(1,999);
$nama_gambar_baru = $angka_acak.'-'.$gambar_produk; //menggabungkan angka acak dengan nama file sebenarnya
if(in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
move_uploaded_file($file_tmp, 'gambar/'.$nama_gambar_baru); //memindah file gambar ke folder gambar
// jalankan query UPDATE berdasarkan ID yang produknya kita edit
$query = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi = '$deskripsi', harga_beli = '$harga_beli', harga_jual = '$harga_jual', gambar_produk = '$nama_gambar_baru'";
$query .= "WHERE id = '$id'";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil diubah.');window.location='index.php';</script>";
}
} else {
//jika file ekstensi tidak jpg dan png maka alert ini yang tampil
echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau png.');window.location='tambah_produk.php';</script>";
}
} else {
// jalankan query UPDATE berdasarkan ID yang produknya kita edit
$query = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi = '$deskripsi', harga_beli = '$harga_beli', harga_jual = '$harga_jual'";
$query .= "WHERE id = '$id'";
$result = mysqli_query($koneksi, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
//tampil alert dan akan redirect ke halaman index.php
//silahkan ganti index.php sesuai halaman yang akan dituju
echo "<script>alert('Data berhasil diubah.');window.location='index.php';</script>";
}
}
mohon maaf ini masih ada keretanan SQL injection dan XSS, di parameter id
kalau anda ingin mempelajari nya silakan baca artikel saya [disini]
terakhir membuat aksi hapus, contoh file nya
proses_hapus.php
<?php
include 'koneksi.php';
$id = $_GET["id"];
//jalankan query DELETE untuk menghapus data
$query = "DELETE FROM produk WHERE id='$id' ";
$hasil_query = mysqli_query($koneksi, $query);
//periksa query, apakah ada kesalahan
if(!$hasil_query) {
die ("Gagal menghapus data: ".mysqli_errno($koneksi).
" - ".mysqli_error($koneksi));
} else {
echo "<script>alert('Data berhasil dihapus.');window.location='index.php';</script>";
}
download project Crud sederhana dengan upload gambar
Download disini
oke mungkin itu saja mengenai Crud sederhana dengan upload gambar
kalau ada kekurangan dan kesalahan berikan masukan nya ya
sekian dan semoga bermanfaat...
Wasalamualaikum Wr.Wb...
0 Comments