Belajar Membuat CRUD (Create,Read,Update,Delete) pada PHP 7 Native dan Mysqli Bootstrap


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">&times;</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
<?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
ke file delete.php buat file delete.php atau bebas terserah anda 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....
Previous
Next Post »