Assalamualaikum Wr.Wb..
dengan diberikan nikmat dan rezeki dari Allah SWT, saya Mr.Gagaltotal666 akan
berbagi kepada anda yaitu tentang belajar membuat CRUD
(Create, Read, Update, Delete) pada PHP dan Mysqli Bootstrap.
di tutorial kali ini saya akan mencoba operasi CRUD PHP 7 native
dengan menggunakan MySQLi, mulai dari melakukan koneksi
ke database, menambah (CREATE), menampilkan (READ),
melakukan rubah (UPDATE) dan menghapus (DELETE) data.
Caranya tidak terlalu sulit, mungkin bagi anda yang sudah terbiasa
dengan perintah query sql pada umumnya. Karena teknik ini,
merupakan teknik yang paling mendasar atau paling awal jika
kita ingin menjadi seorang programmer.
oke langsung saja ikuti langkah berikut
hal pertama yang di siapkan adalah membuat sebuah database
beserta table nya contoh disini saya membuat database
bernama latihan_crud dan dengan nama table nya mahasiswa
yang terdapat contoh column id, angkatan, nama, npm dan jurusan
$ create database latihan_crud;
CREATE TABLE `mahasiswa` (
`id` int(6) NOT NULL AUTO_INCREMENT,
`angkatan` varchar(4) NOT NULL,
`nama` varchar(100) NOT NULL,
`npm` varchar(50) NOT NULL,
`jurusan` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
contoh diatas membuat database dan table beserta isi column nya
oke setelah membuat database beserta table nya, langsung
buat config atau koneksi disini saya menamakan file koneksi.php
contoh sederhana membuat koneksi PHP 7 dan MySQLi seperti ini
<?php
// data server mysql
$db_host = '127.0.0.1'; // --> sever mysql
$db_user = 'root'; // --> username
$db_pass = ''; // --> password
$db_name = 'latihan_crud'; // --> nama database
// Fungsi untuk koneksi ke mysqli
$koneksi = new mysqli($db_host,$db_user,$db_pass,$db_name);
// cok koneksi
if ($koneksi->connect_error) {
// jika salah. Bisa juga menggunakan exit();
die('Koneksi Gagal loh ^_^ : '. $koneksi->connect_error).'';
}
?>
oke lanjut membuat front end atau tampilan
disini saya menggunakan bootstrap versi 3.3.7 download [disini]
disini saya menamakan file index.php untuk suatu tampilan depan
dan untuk sekaligus menampilkan data dari database,
contoh sederhana seperti ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="gagaltotal666" name="description" />
<meta content="gagaltotal666" name="author" />
<title>latihan crud</title>
<!-- TABLE STYLES-->
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="ghost/ghost.png" />
</head>
<body>
<div class="col-md-8 col-md-offset-2">
</br>
<a class="text-center" href="https://www.gagaltotal666.website/" target="_blank" ><h1>gagaltotal666.website</h1></a>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="alert alert-info">
<a href="tambah_data.php" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Tambah Data</a>
</div>
</div>
<div class="panel-body">
<div class="table">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Id</th>
<th>Angkatan</th>
<th>Nama</th>
<th>NPM</th>
<th>Jurusan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$result = mysqli_query($koneksi, "SELECT * FROM mahasiswa ORDER BY nama ASC");
while($row = mysqli_fetch_assoc($result)) {
$no++
?>
<tr class="">
<td><?php echo $row['id'];?></td>
<td><?php echo $row['angkatan'];?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['npm'];?></td>
<td><?php echo $row['jurusan'];?></td>
<td>
<a href="edit.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-check"></i> Edit</a>
<a href="javascript:;" data-id="<?php echo $row['id'] ?>" data-toggle="modal" data-target="#modal-konfirmasi" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> Hapus</a>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- modal konfirmasi-->
<div id="modal-konfirmasi" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Konfirmasi menghapus data</h4>
</div>
<div class="modal-body btn-warning">
Apakah Anda yakin ingin menghapus data ini ^_^ ?
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-danger" id="hapus-true-data">Hapus</a>
<button type="button" class="btn btn-info" data-dismiss="modal">Tidak</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/hapus.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
</body>
</html>
sedikit penjelasan dari barisan code penting
<?php
include 'koneksi.php';
$no=0;
$result = mysqli_query($koneksi, "SELECT * FROM mahasiswa ORDER BY nama ASC");
while($row = mysqli_fetch_assoc($result)) {
$no++
?>
<tr class="">
<td><?php echo $row['id'];?></td>
<td><?php echo $row['angkatan'];?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['npm'];?></td>
<td><?php echo $row['jurusan'];?></td>
<td>
<a href="edit.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-check"></i> Edit</a>
<a href="javascript:;" data-id="<?php echo $row['id'] ?>" data-toggle="modal" data-target="#modal-konfirmasi" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> Hapus</a>
include > mengambil atau memanggil suatu koneksi dari file koneksi.php
variabel $result ini sebenarnya boleh dinamakan beda variabel juga bisa
bebas terserah anda namun di dalam perintah ini ada suatu menampilkan
dari database sudah jelas ada perintah select * from (nama table)
variabel $row terdapat isi mysqli_fetch_assoc yang nanti nya akan
bisa menampilkan dari session database ke PHP untuk variabel nya
anda bebas menamakan bukan $row juga bisa
oke lanjut membuat tambah data, disini saya membuat
nama file nya tambah_data.php contoh seperti ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="gagaltotal666" name="description" />
<meta content="gagaltotal666" name="author" />
<title>tambah data crud</title>
<!-- TABLE STYLES-->
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="ghost/ghost.png" />
</head>
<body>
<div class="col-md-8 col-md-offset-2">
</br>
<a class="text-center" href="https://www.gagaltotal666.website/" target="_blank" ><h1>gagaltotal666.website</h1></a>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="alert alert-info">
<a href="index.php" class="btn btn-primary"><i class="glyphicon glyphicon-file"></i> Kembali Lihat Data</a>
</div>
</div>
<div class="panel-body">
<form method="post" action="tambah_data_proses.php" enctype="multipart/form-data">
<div class="form-group">
<label>Angkatan</label>
<input class="form-control" name='angkatan' placeholder="tahun angkatan" required>
</div>
<div class="form-group">
<label>Nama</label>
<input class="form-control" name='nama' placeholder="Nama mahasiswa" required>
</div>
<div class="form-group">
<label>NPM</label>
<input class="form-control" name='npm' placeholder="npm mahasiswa" required>
</div>
<div class="form-group">
<label>Jurusan</label>
<input class="form-control" name='jurusan' placeholder="jurusan mahasiswa" required>
</div>
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Simpan</button>
<a href="index.php" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Batal</a>
</form>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
</body>
</html>
pastikan kalau di bagian tambah data ini anda harus menambahkan
method post karena untuk session pemanggilan dari suatu
proses tambah_data_proses.php di dalam file tambah_data_proses.php
contoh seperti ini
method post karena untuk session pemanggilan dari suatu
proses tambah_data_proses.php di dalam file tambah_data_proses.php
contoh seperti ini
<?php
//meminta jembatan koneksi ke database
include "koneksi.php";
//menerima inputan
$angkatan = $_POST['angkatan'];
$nama = $_POST['nama'];
$npm = $_POST['npm'];
$jurusan = $_POST['jurusan'];
//pemerikasaan jika ada data inputan kosong
//sesuaikan dengan kebutuhan
if($angkatan=="" || $nama=="" || $npm=="" || $jurusan=="")
{
?>
<script language="javascript">
alert('Masih ada data yang kosong loh ^_^');
document.location.href="tambah_data.php";
</script>
<?php
}
//input ke tabel db
else
{ //query simpan ke db
$sql="INSERT INTO mahasiswa VALUES ('','$angkatan','$nama','$npm','$jurusan')";
$query = mysqli_query($koneksi, $sql) or die (mysqli_error());
?>
<script language="javascript">
alert('Data Berhasil Disimpan sayang ^_^');
document.location.href="index.php";
</script>
<?php
}?> <!--tutup php--->
disini saya menggabungkan PHP dan JS, contoh code berikut
if($angkatan=="" || $nama=="" || $npm=="" || $jurusan=="")
{
?>
<script language="javascript">
alert('Masih ada data yang kosong loh ^_^');
document.location.href="tambah_data.php";
</script>
perintah ini dimana logika jika menginput data
masih kosong akan kembali ke tambah_data.php
$sql="INSERT INTO mahasiswa VALUES ('','$angkatan','$nama','$npm','$jurusan')";
$query = mysqli_query($koneksi, $sql) or die (mysqli_error());
perintah diatas contoh code sql untuk tambah atau bisa disebut insert into
oke lanjut membuat edit atau mengubah data, disini saya menamakan
file nya edit.php dengan contoh code sebagai berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="gagaltotal666" name="description" />
<meta content="gagaltotal666" name="author" />
<title>Edit crud</title>
<!-- TABLE STYLES-->
<link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="ghost/ghost.png" />
</head>
<body>
<div class="col-md-8 col-md-offset-2">
</br>
<a class="text-center" href="https://www.gagaltotal666.website/" target="_blank" ><h1>gagaltotal666.website</h1></a>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="alert alert-info">
<a href="index.php" class="btn btn-primary"><i class="glyphicon glyphicon-file"></i> Kembali Lihat Data</a>
</div>
</div>
<?php
include 'koneksi.php';
$id = mysqli_real_escape_string($koneksi,$_GET['id']);
$sql = "SELECT * FROM mahasiswa WHERE id='$id'";
$query = mysqli_query($koneksi, $sql) or die (mysqli_error($koneksi));
if(mysqli_num_rows($query) > 0){
$data = mysqli_fetch_array($query);
}
?>
<div class="panel-body">
<form method="post" action="edit_proses.php" enctype="multipart/form-data">
<div class="form-group">
<label>Id</label>
<input class="form-control" name='id' value="<?php echo $data['id'];?>" readonly>
</div>
<div class="form-group">
<label>Angkatan</label>
<input class="form-control" name='angkatan' value="<?php echo $data['angkatan'];?>" required>
</div>
<div class="form-group">
<label>Nama</label>
<input class="form-control" name='nama' value="<?php echo $data['nama'];?>" required>
</div>
<div class="form-group">
<label>NPM</label>
<input class="form-control" name='npm' value="<?php echo $data['npm'];?>" required>
</div>
<div class="form-group">
<label>Jurusan</label>
<input class="form-control" name='jurusan' value="<?php echo $data['jurusan'];?>" required>
</div>
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Simpan</button>
<a href="index.php" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Batal</a>
</form>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
kemudian buat edit_proses.php, untuk suatu aksi atau perintah sql
contoh sebagai berikut...
<?php
//meminta jembatan koneksi ke database
include "koneksi.php";
//menerima inputan
$id = $_POST['id'];
$angkatan = $_POST['angkatan'];
$nama = $_POST['nama'];
$npm = $_POST['npm'];
$jurusan = $_POST['jurusan'];
//pemerikasaan jika ada data inputan kosong
//sesuaikan dengan kebutuhan
if($angkatan=="" || $nama=="" || $npm=="" || $jurusan=="")
{
?>
<script language="javascript">
alert('Masih ada data yang kosong loh ^_^');
document.location.href="edit.php?id=<?php echo $id; ?>";
</script>
<?php
}
//input ke tabel db
else
{ //query simpan ke db
$sql="UPDATE mahasiswa SET angkatan='$angkatan', nama='$nama', npm='$npm', jurusan='$jurusan' WHERE id='$id'";
$query = mysqli_query($koneksi, $sql) or die (mysqli_error($koneksi));
?>
<script language="javascript">
alert('Data Berhasil Disimpan sayang ^_^');
document.location.href="index.php";
</script>
<?php
}?> <!--tutup php--->
dibagian edit_proses ini saya juga menggabungkan PHP dan JS
oke terakhir membuat aksi hapus atau delete dibagian hapus
saya juga membuat aksi suatu JS yang nanti nya akan memproses
saya juga membuat aksi suatu JS yang nanti nya akan memproses
ke file delete.php buat file delete.php atau bebas terserah anda
mau dinamakan yang lain
mau dinamakan yang lain
delete.php, contoh
<?php
//HAPUS
include "koneksi.php";
$id = $_GET['id'];
$result = mysqli_query($koneksi, "DELETE FROM mahasiswa WHERE id = '$id'");
if ($result){ ?>
<script language="javascript">
alert('Data Berhasil Dihapus sayang ^_^');
document.location.href="index.php";
</script>
<?php
}else {
trigger_error('upss ada Perintah SQL yang Salah: ' . $sql . ' Error: ' . $koneksi->error, E_USER_ERROR);
}
?>
buat file JS, contoh disini saya nama file nya hapus.js
$(document).ready(function(){
$('#modal-konfirmasi').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
// Untuk mengambil nilai dari data-id="" yang telah kita tempatkan pada link hapus
var id = div.data('id')
var modal = $(this)
// Mengisi atribut href pada tombol ya yang kita berikan id hapus-true pada modal .
modal.find('#hapus-true-data').attr("href","delete.php?id="+id);
})
});
contoh saat di gunakan aplikasi crud sederhana
tambah data
edit data
hapus data
oke mungkin cukup mengenai belajar membuat CRUD dengan PHP 7 native
kalau ada kesalahan dan kekurangan nya mohon berikan masukan nya ya ^_^
download latihan crud
Latihan Crud
sekian dan semoga bermanfaat ^_^...
Wasalamualaikum Wr.Wb....
 pada PHP 7 Native dan Mysqli Bootstrap){kind=link}
2 Comments
kode css nya kok tidak ada min ?
ReplyDeleteuntuk CSS sudah ada di folder CSS nya, lengkap kok di file nya
ReplyDelete