Contoh Create Update Delete Search dan View Data
fitur-fitur contoh kali ini adalah :
1. Menggunakan bootstrap dan font-awesome sebagai desainnya
2. Dapat menginput data beserta gambar
3. Dapat mengedit data beserta gambar
4. Dapat menghapus data
5. Sudah menggunakan PDO ( php data object ) yang sudah familiar di pakai
6. search data menggunakan jquery data table
buat database db_crud
CREATE TABLE `anggota` (
`id_anggota` int(11) NOT NULL,
`nama` varchar(255) NOT NULL,
`alamat` text NOT NULL,
`telepon` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`jenkel` varchar(255) NOT NULL,
`gambar` varchar(255) NOT NULL,
`tgl_input` varchar(255) NOT NULL
) ;
lanjutt buat folder contoh crud lalu buat file:
config.php = untuk koneksi menghubungkan file ke database
index.php = buat menampilkan data
tambah.php = untuk tambah data
edit.php = untuk edit data
hapus.php = untuk hapus data
lalu buat folder assets untuk menyimpan
1. css
2. img
3. js
sesuai keperluan lalu download bootstrap, font awesome, jquery, dan datatables.js taruh di folder assets
oke kita koding mulai membuat koneksi dahulu :
config.php
<?php
$user = 'root';
$pass = '';
$koneksi = new PDO('mysql:host=localhost;dbname=db_crud;', $user, $pass);
if($koneksi){
//echo 'koneksi berhasil';
}else{
echo 'gagal koneksi' .$e -> getMessage();
}
?>
di atas di variabel $user, kita memakai username mysql default xampp dan $pass untuk password mysql di xampp di kosongkan saja, kita membuat $koneksi untuk memanggil dan konfigurasi database nya di situ ada if else, jika $koneksi bisa maka konfigurasi menyambungkan file php ke database berhasil, kalau tidak maka muncul error / gagalnya koneksi.
Jika koneksi berhasil maka comment saja seperti ini :
//echo 'koneksi berhasil';
setelah selesai masuk langkah ke 2 : index.php (untuk view data di database)
<!DOCTYPE HTML>
<html>
<head>
<title>
Contoh View
</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/datatables.css">
<script src="assets/js/jquery-3.1.1.min.js"></script>
<style>
body{width:95%;}
.thead{
background:#317CA3;
color:#fff;
}
</style>
</head>
<body>
<div class="row">
<div class="container">
<h1>Contoh Create Update Delete Search dan View Data</h1>
<div style="padding-top:3pc;"></div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4><i class="fa fa-users"></i> Data
<div class="pull-right">
<a href="tambah.php"><button class="btn btn-primary"><i class="fa fa-user-plus"></i></button></a>
</div>
</h4>
</div>
<div class="panel-body">
<table id="Mytable" class="table table-bordered" border="1">
<thead>
<tr class="thead">
<td>No.</td>
<td>Nama Anggota</td>
<td>Alamat</td>
<td>Telepon</td>
<td>Email</td>
<td>Jenis kelamin</td>
<td>Gambar</td>
<td>Tanggal Bergabung</td>
<td style="width:80px;">Aksi</td>
</tr>
</thead>
<tbody>
<?php
require 'config.php'; // panggil koneksi yang sudah di buat
$sql = 'select*from anggota order by id_anggota desc'; // query
$row = $koneksi -> prepare($sql); // mempersiapkan untuk masuk ke eksekusi data
$row -> execute();
$hasil = $row -> fetchAll(); // tampilkan semua data di database
$no =1; // membuat nomor
?>
<?php foreach($hasil as $isi){ ?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $isi['nama'];?></td>
<td><?php echo $isi['alamat'];?></td>
<td><?php echo $isi['telepon'];?></td>
<td><?php echo $isi['email'];?></td>
<td><?php echo $isi['jenkel'];?></td>
<td>
<a href="assets/img/<?php echo $isi['gambar'];?>">
<img src="assets/img/<?php echo $isi['gambar'];?>" style="width100px;height:100px;" class="img-responsive">
</a>
</td>
<td><?php echo $isi['tgl_input'];?></td>
<td>
<a href="edit.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-primary"><i class="fa fa-edit"></i></button></a>
<a href="hapus.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-danger" value="Deleteimage"><i class="fa fa-trash"></i></button></a>
</td>
</tr>
<?php $no++; }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script src="assets/js/datatables.js"></script>
<script>
$(document).ready(function(){
$('#Mytable').DataTable();
});
</script>
</html>
lalu buat file tambah.php untuk create data :
<?php date_default_timezone_set("Asia/Jakarta");?>
<!DOCTYPE HTML>
<html>
<head>
<title>
Contoh Create Data
</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<style>
body{width:95%;}
td{ padding-top:0.5pc;}
.form-control{border-radius:0px;}
</style>
</head>
<body>
<div class="row">
<div class="container">
<h1>Contoh Create Update Delete Search dan View Data</h1>
<div style="padding-top:3pc;"></div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4><i class="fa fa-user-plus"></i> Data
<div class="pull-right">
<a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
</div>
</h4>
</div>
<div class="panel-body">
<form method="post" enctype="multipart/form-data">
<table>
<table width="55%;">
<tr>
<td class="pad">Nama</td>
<td><input type="text" class="form-control" name="nama"></td>
</tr>
<tr>
<td class="pad">Alamat</td>
<td><input type="text" class="form-control" name="alamat"></td>
</tr>
<tr>
<td class="pad">Telepon</td>
<td><input type="text" class="form-control" name="telepon"></td>
</tr>
<tr>
<td class="pad">Email</td>
<td><input type="text" class="form-control" name="email"></td>
</tr>
<tr>
<td class="pad">Jenis Kelamin</td>
<td>
<select name="jenkel" class="form-control">
<option value="">Pilih Salah Satu</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td class="pad">Taruh Gambar</td>
<td><input type="file" name="gambar"></td>
</tr>
<tr>
<td class="pad">Tgl Input</td>
<td><input type="text" class="form-control" value="<?php echo date('d M Y, H:i:s');?>" name="tgl_input"></td>
</tr>
<tr>
<td></td>
<td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
</tr>
</table>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
require 'config.php';
if(!empty($_POST['proses'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$telepon = $_POST['telepon'];
$email = $_POST['email'];
$jenkel = $_POST['jenkel'];
$tgl_input = $_POST['tgl_input'];
$target = 'assets/img/';
$target = $target. basename ($_FILES['gambar']['name']);
if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
$data[] = $nama; //1
$data[] = $alamat; //2
$data[] = $telepon; //3
$data[] = $email; //4
$data[] = $jenkel; //5
$data[] = $_FILES['gambar']['name']; //6
$data[] = $tgl_input; //7
$sql ='insert into anggota (nama, alamat, telepon, email,jenkel,gambar,tgl_input)values(?,?,?,?,?,?,?)';
$row = $koneksi -> prepare($sql);
$row -> execute($data);
echo '<script>alert("Tambah Anggota Sukses");window.location="index.php"</script>';
}else{
echo '<script>alert("Gagal tambah Anggota")window.location="tambah.php";</script>';
}
}
?>
setelah itu test create data nya jika berhasil lalu masuk ke proses edit.php
<?php date_default_timezone_set("Asia/Jakarta");?>
<?php require'config.php';?>
<?php $id = $_GET['anggota'];?>
<?php
$sql ='select * from anggota where id_anggota=?';
$row = $koneksi -> prepare($sql);
$row -> execute(array($id));
$hasil = $row -> fetch();
?>
<!DOCTYPE HTML>
<html>
<head>
<title>
Contoh Edit Data
</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<style>
body{width:95%;}
td{ padding-top:0.5pc;}
.form-control{border-radius:0px;}
</style>
</head>
<body>
<div class="row">
<div class="container">
<h1>Contoh Create Update Delete Search dan View Data</h1>
<div style="padding-top:3pc;"></div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4><i class="fa fa-edit"></i> Data
<div class="pull-right">
<a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
</div>
</h4>
</div>
<div class="panel-body">
<form method="post" enctype="multipart/form-data">
<table>
<table width="55%;">
<tr>
<td class="pad">Nama</td>
<td><input type="text" class="form-control" value="<?php echo $hasil['nama'];?>" name="nama"></td>
</tr>
<tr>
<td class="pad">Alamat</td>
<td><input type="text" class="form-control" value="<?php echo $hasil['alamat'];?>" name="alamat"></td>
</tr>
<tr>
<td class="pad">Telepon</td>
<td><input type="text" class="form-control" value="<?php echo $hasil['telepon'];?>" name="telepon"></td>
</tr>
<tr>
<td class="pad">Email</td>
<td><input type="text" class="form-control" value="<?php echo $hasil['email'];?>" name="email"></td>
</tr>
<tr>
<td class="pad">Jenis Kelamin</td>
<td>
<select name="jenkel" class="form-control">
<option value="<?php echo $hasil['jenkel'];?>"><?php echo $hasil['jenkel'];?></option>
<option value="">Pilih Salah Satu</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td class="pad">Taruh Gambar</td>
<td><input type="file" name="gambar"></td>
</tr>
<tr>
<td><input type="hidden" class="form-control" value="<?php echo $hasil['id_anggota'];?>" name="id"></td>
<td>
<a href="assets/img/<?php echo $hasil['gambar'];?>">
<img src="assets/img/<?php echo $hasil['gambar'];?>" style="width100px;height:100px;" class="img-responsive">
</a>
</td>
</tr>
<tr>
<td></td>
<td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
</tr>
</table>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
if(!empty($_POST['proses'])){
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$telepon = $_POST['telepon'];
$email = $_POST['email'];
$jenkel = $_POST['jenkel'];
$id = $_POST['id'];
$target = 'assets/img/';
$target = $target. basename ($_FILES['gambar']['name']);
if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
$data[] = $nama; //1
$data[] = $alamat; //2
$data[] = $telepon; //3
$data[] = $email; //4
$data[] = $jenkel; //5
$data[] = $_FILES['gambar']['name']; //6
$data[] = $id; //7
$sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=?,gambar=? where id_anggota=?';
$row = $koneksi -> prepare($sql);
$row -> execute($data);
echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
}elseif($_POST['proses'] == 'Tambah'){
$data[] = $nama; //1
$data[] = $alamat; //2
$data[] = $telepon; //3
$data[] = $email; //4
$data[] = $jenkel; //5
$data[] = $id; //6
$sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=? where id_anggota=?';
$row = $koneksi -> prepare($sql);
$row -> execute($data);
echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
}else{
echo '<script>alert("Gagal Edit Anggota")window.location="tambah.php";</script>';
}
}
?>
lalu setelah edit data bisa membuat hapus.php untuk hapus data :
<?php
require 'config.php';
$id = $_GET['anggota'];
$sql = 'select *from anggota where id_anggota=?';
$row = $koneksi -> prepare($sql);
$row -> execute(array($id));
$hasil = $row -> fetch();
unlink('assets/img/'.$hasil['gambar'].''); //hapus img di folder
$sql_delete = 'delete from anggota where id_anggota=?';
$row_delete = $koneksi -> prepare($sql_delete);
$row_delete -> execute(array($id));
echo '<script>alert("Hapus Berhasil");window.location="index.php";</script>';
?>
setelah itu coba dan jalankan jika anda error silahkan di download sekian semoga berhasil
keren artikel nya walaupun gw pusing sama code nya wkwk
ReplyDeleteWaah :D Makasih bro Infonya bermanfaat sekali buat sayaa :D
ReplyDelete