search
› › PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete)

PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete)

By Minggu, 02 Juni 2019 Comment Edit
PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete)

PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete).  Halo sobat BakuraID, pada kesempatan kali ini saya akan membuat sebuah tutorial bagaimana caranya membuat sebuah sistem sederhana yaitu PHP CRUD dengan MySQLi dan Bootstrap. Kalau sobat belum tahu apa itu CRUD, maka saya jelaskan sedikit. CRUD adalah singkatan dari Create Read Update Delete, yaitu istilah untuk perintah ke database yaitu Create=INSERT, Read=SELECT, Update=UPDATE dan Delete=DELETE. Jadi di tutorial ini akan di jelaskan bagaimana membuat sebuah sistem yang nantinya bisa digunakan untuk INSERT, SELECT, UPDATE dan DELETE ke database MySQL dengan menggunakan query MySQLi, dan tentunya dengan Framework Bootstrap agar tampilannya lebih bagus.

Oh ya, untuk bootstrap saya pakai online ya, jadi tidak saya download file bootstrapnya, kalau mau sobat bisa download sendiri dan memasukkan nya ke script.

Oke lanjut kita pada tahap tutorialnya. Yang pertama kita lihat dulu struktur file yang akan kita buat nanti apa saya, berikut ini file-file yang dibuat ada 5 file dan 1 database, yaitu index.php, tambah.php, edit.php, delete.php dan koneksi.php.

Yuk ke tahap pembuatannya.

Database
Pertama kita buat database nya dulu ya, dalam tutorial ini saya buat database dengan nama belajar. Kemudian dumping script SQL di bawah ini supaya mendapatkan tabel dan data yang diperlukan untuk samplenya, berikut ini scriptnya:


-- phpMyAdmin SQL Dump
-- version 4.4.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 14 Jun 2019 pada 14.51
-- Versi Server: 5.6.25
-- PHP Version: 5.5.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `belajar`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `mahasiswa`
--

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `id` int(11) NOT NULL,
  `nim` int(11) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `jenis_kelamin` varchar(20) NOT NULL,
  `jurusan` varchar(30) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `mahasiswa`
--

INSERT INTO `mahasiswa` (`id`, `nim`, `nama`, `jenis_kelamin`, `jurusan`) VALUES
(2, 11112, 'Arif', 'LAKI-LAKI', 'TEKNIK INFORMATIKA'),
(3, 11113, 'Maria', 'PEREMPUAN', 'SISTEM INFORMASI'),
(4, 11114, 'Efyan', 'PEREMPUAN', 'SISTEM INFORMASI'),
(5, 11115, 'Wahyu', 'PEREMPUAN', 'TEKNIK INFORMATIKA'),
(6, 11116, 'Aris', 'LAKI-LAKI', 'TEKNIK INFORMATIKA');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `mahasiswa`
--
ALTER TABLE `mahasiswa`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `mahasiswa`
--
ALTER TABLE `mahasiswa`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Jika sudah nanti kita akan mendapatkan 1 tabel dengan nama belajar dan beberapa data.
Masalah pembuatan database selesai.

koneksi.php
File koneksi.php ini kita buat untuk melakukan koneksi ke database ya, jadi file ini nantinya akan di include ke setiap file yang akan kita buat supaya bisa berhubungan dengan database.

Yuk sob silahkan buat file koneksi.php dan ketikkan script seperti di bawah ini :

koneksi.php

<!-- PHP -->
<?php  
$host ='localhost';
$user = 'root';
$pass = '';
$db = 'belajar';

$link = mysqli_connect($host, $user, $pass, $db) or die(mysqli_error());

?>

Jangan lupa dirubah detail koneksinya, jika sudah silahkan disimpan, dan selesai tahapan membuat file koneksi.php

index.php
Selanjutnya kita buat file index.php, file ini adalah file utama dimana setiap kita membuka web maka file index.php ini yang akan di tampilkan pertama kali.

Silahkan sobat buat file index.php dan ketikkan script di bawah ini

index.php

<!-- PHP -->
<?php
//memasukkan file koneksi.php
include('koneksi.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>CRUD PHP MySQLi | TUTORIALWEB.NET</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
   <a class="navbar-brand" href="#">CRDU PHP MySQLi</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item active">
      <a class="nav-link" href="index.php">Home</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="tambah.php">Tambah</a>
     </li>
    </ul>
   </div>
  </div>
 </nav>
 
 <div class="container" style="margin-top:20px">
  <h2>Daftar Mahasiswa</h2>
  
  <hr>
  
  <table class="table table-striped table-hover table-sm table-bordered">
   <thead class="thead-dark">
    <tr>
     <th>NO.</th>
     <th>NIM</th>
     <th>NAMA MAHASISWA</th>
     <th>JENIS KELAMIN</th>
     <th>JURUSAN</th>
     <th>AKSI</th>
    </tr>
   </thead>
   <tbody>
    <?php
    //query ke database SELECT tabel mahasiswa urut berdasarkan id yang paling besar
    $sql = mysqli_query($link, "SELECT * FROM mahasiswa ORDER BY id DESC") or die(mysqli_error($link));
    //jika query diatas menghasilkan nilai > 0 maka menjalankan script di bawah if...
    if(mysqli_num_rows($sql) > 0){
     //membuat variabel $no untuk menyimpan nomor urut
     $no = 1;
     //melakukan perulangan while dengan dari dari query $sql
     while($data = mysqli_fetch_assoc($sql)){
      //menampilkan data perulangan
      echo '
      <tr>
       <td>'.$no.'</td>
       <td>'.$data['nim'].'</td>
       <td>'.$data['nama'].'</td>
       <td>'.$data['jenis_kelamin'].'</td>
       <td>'.$data['jurusan'].'</td>
       <td>
        <a href="edit.php?id='.$data['id'].'" class="badge badge-warning">Edit</a>
        <a href="delete.php?id='.$data['id'].'" class="badge badge-danger" onclick="return confirm(\'Yakin ingin menghapus data ini?\')">Delete</a>
       </td>
      </tr>
      ';
      $no++;
     }
    //jika query menghasilkan nilai 0
    }else{
     echo '
     <tr>
      <td colspan="6">Tidak ada data.</td>
     </tr>
     ';
    }
    ?>
   <tbody>
  </table>
  
 </div>
 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
</body>
</html>

ada beberapa penjelasan yang saya masukkan comment di atas, jadi silahkan di baca ya, jika sudah silahkan di simpan.

File index.php telah selesai dibuat kemudian coba jalankan.

tambah.php
Tahapan selanjutnya kita buat file tambah.php, file ini berisi script untuk melakukan proses penambahan data. Ada form input an dan proses INSERT dengan script PHP, silahkan tulis file di bawah ini

tambah.php

<!-- PHP -->
<?php
//memasukkan file koneksi.php
include('koneksi.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>CRUD PHP MySQLi | TUTORIALWEB.NET</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
   <a class="navbar-brand" href="#">CRDU PHP MySQLi</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item">
      <a class="nav-link" href="index.php">Home</a>
     </li>
     <li class="nav-item active">
      <a class="nav-link" href="tambah.php">Tambah</a>
     </li>
    </ul>
   </div>
  </div>
 </nav>
 
 <div class="container" style="margin-top:20px">
  <h2>Tambah Mahasiswa</h2>
  
  <hr>
  
  <?php
  if(isset($_POST['submit'])){
   $nim   = $_POST['nim'];
   $nama   = $_POST['nama'];
   $jenis_kelamin = $_POST['jenis_kelamin'];
   $jurusan  = $_POST['jurusan'];
   
   $cek = mysqli_query($link, "SELECT * FROM mahasiswa WHERE nim='$nim'") or die(mysqli_error($link));
   
   if(mysqli_num_rows($cek) == 0){
    $sql = mysqli_query($link, "INSERT INTO mahasiswa(nim, nama, jenis_kelamin, jurusan) VALUES('$nim', '$nama', '$jenis_kelamin', '$jurusan')") or die(mysqli_error($link));
    
    if($sql){
     echo '<script>alert("Berhasil menambahkan data."); document.location="index.php";</script>';
    }else{
     echo '<div class="alert alert-warning">Gagal melakukan proses tambah data.</div>';
    }
   }else{
    echo '<div class="alert alert-warning">Gagal, NIM sudah terdaftar.</div>';
   }
  }
  ?>
  
  <form action="tambah.php" method="post">
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">NIM</label>
    <div class="col-sm-10">
     <input type="text" name="nim" class="form-control" size="4" required>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">NAMA MAHASISWA</label>
    <div class="col-sm-10">
     <input type="text" name="nama" class="form-control" required>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">JENIS KELAMIN</label>
    <div class="col-sm-10">
     <div class="form-check">
      <input type="radio" class="form-check-input" name="jenis_kelamin" value="LAKI-LAKI" required>
      <label class="form-check-label">LAKI-LAKI</label>
     </div>
     <div class="form-check">
      <input type="radio" class="form-check-input" name="jenis_kelamin" value="PEREMPUAN" required>
      <label class="form-check-label">PEREMPUAN</label>
     </div>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">JURUSAN</label>
    <div class="col-sm-10">
     <select name="jurusan" class="form-control" required>
      <option value="">PILIH JURUSAN</option>
      <option value="TEKNIK INFORMATIKA">TEKNIK INFORMATIKA</option>
      <option value="SISTEM INFORMASI">SISTEM INFORMASI</option>
     </select>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">&nbsp;</label>
    <div class="col-sm-10">
     <input type="submit" name="submit" class="btn btn-primary" value="SIMPAN">
    </div>
   </div>
  </form>
  
 </div>
 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
</body>
</html>

Kemudian simpan ya. file tambah.php selesai dibuat. kita lanjut ke file berikutnya.

edit.php
File edit.php digunakan untuk melakukan proses edit/update data, file ini akan menampilkan form yang sama dengan form tambah.php, bedanya di edit.php ini akan mengambil data ke database tabel mahasiswa dengan kondisi id = $_GET[‘id’] yang di dapatkan dari URL. Berikut ini scriptnya :

edit.php

<!-- PHP -->
<?php
//memasukkan file link.php
include('koneksi.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>CRUD PHP MySQLi | TUTORIALWEB.NET</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
   <a class="navbar-brand" href="#">CRDU PHP MySQLi</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
     <li class="nav-item">
      <a class="nav-link" href="index.php">Home</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="tambah.php">Tambah</a>
     </li>
    </ul>
   </div>
  </div>
 </nav>
 
 <div class="container" style="margin-top:20px">
  <h2>Edit Mahasiswa</h2>
  
  <hr>
  
  <?php
  //jika sudah mendapatkan parameter GET id dari URL
  if(isset($_GET['id'])){
   //membuat variabel $id untuk menyimpan id dari GET id di URL
   $id = $_GET['id'];
   
   //query ke database SELECT tabel mahasiswa berdasarkan id = $id
   $select = mysqli_query($link, "SELECT * FROM mahasiswa WHERE id='$id'") or die(mysqli_error($link));
   
   //jika hasil query = 0 maka muncul pesan error
   if(mysqli_num_rows($select) == 0){
    echo '<div class="alert alert-warning">ID tidak ada dalam database.</div>';
    exit();
   //jika hasil query > 0
   }else{
    //membuat variabel $data dan menyimpan data row dari query
    $data = mysqli_fetch_assoc($select);
   }
  }
  ?>
  
  <?php
  //jika tombol simpan di tekan/klik
  if(isset($_POST['submit'])){
   $nama   = $_POST['nama'];
   $jenis_kelamin = $_POST['jenis_kelamin'];
   $jurusan  = $_POST['jurusan'];
   
   $sql = mysqli_query($link, "UPDATE mahasiswa SET nama='$nama', jenis_kelamin='$jenis_kelamin', jurusan='$jurusan' WHERE id='$id'") or die(mysqli_error($link));
   
   if($sql){
    echo '<script>alert("Berhasil menyimpan data."); document.location="index.php?id='.$id.'";</script>';
   }else{
    echo '<div class="alert alert-warning">Gagal melakukan proses edit data.</div>';
   }
  }
  ?>
  
  <form action="edit.php?id=<?php echo $id; ?>" method="post">
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">NIM</label>
    <div class="col-sm-10">
     <input type="text" name="nim" class="form-control" size="4" value="<?php echo $data['nim']; ?>" readonly required>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">NAMA MAHASISWA</label>
    <div class="col-sm-10">
     <input type="text" name="nama" class="form-control" value="<?php echo $data['nama']; ?>" required>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">JENIS KELAMIN</label>
    <div class="col-sm-10">
     <div class="form-check">
      <input type="radio" class="form-check-input" name="jenis_kelamin" value="LAKI-LAKI" <?php if($data['jenis_kelamin'] == 'LAKI-LAKI'){ echo 'checked'; } ?> required>
      <label class="form-check-label">LAKI-LAKI</label>
     </div>
     <div class="form-check">
      <input type="radio" class="form-check-input" name="jenis_kelamin" value="PEREMPUAN" <?php if($data['jenis_kelamin'] == 'PEREMPUAN'){ echo 'checked'; } ?> required>
      <label class="form-check-label">PEREMPUAN</label>
     </div>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">JURUSAN</label>
    <div class="col-sm-10">
     <select name="jurusan" class="form-control" required>
      <option value="">PILIH JURUSAN</option>
      <option value="TEKNIK INFORMATIKA" <?php if($data['jurusan'] == 'TEKNIK INFORMATIKA'){ echo 'selected'; } ?>>TEKNIK INFORMATIKA</option>
      <option value="SISTEM INFORMASI" <?php if($data['jurusan'] == 'SISTEM INFORMASI'){ echo 'selected'; } ?>>SISTEM INFORMASI</option>
     </select>
    </div>
   </div>
   <div class="form-group row">
    <label class="col-sm-2 col-form-label">&nbsp;</label>
    <div class="col-sm-10">
     <input type="submit" name="submit" class="btn btn-primary" value="SIMPAN">
     <a href="index.php" class="btn btn-warning">KEMBALI</a>
    </div>
   </div>
  </form>
  
 </div>
 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
</body>
</html>

beberapa keterangan sudah di masukkan di file ya, jadi silahkan baca. Dan jangan lupa simpan.
file edit.php selesai dibuat. kita lanjut ke file terakhir.

delete.php
Yang terakhir yaitu membuat file delete.php, file ini berisi script untuk menghapus data, dengan query DELETE yang mengambil parameter id dari URL. Berikut ini script nya :

delete.php

<?php
//include file config.php
include('koneksi.php');

//jika benar mendapatkan GET id dari URL
if(isset($_GET['id'])){
 //membuat variabel $id yang menyimpan nilai dari $_GET['id']
 $id = $_GET['id'];
 
 //melakukan query ke database, dengan cara SELECT data yang memiliki id yang sama dengan variabel $id
 $cek = mysqli_query($link, "SELECT * FROM mahasiswa WHERE id='$id'") or die(mysqli_error($link));
 
 //jika query menghasilkan nilai > 0 maka eksekusi script di bawah
 if(mysqli_num_rows($cek) > 0){
  //query ke database DELETE untuk menghapus data dengan kondisi id=$id
  $del = mysqli_query($link, "DELETE FROM mahasiswa WHERE id='$id'") or die(mysqli_error($link));
  if($del){
   echo '<script>alert("Berhasil menghapus data."); document.location="index.php";</script>';
  }else{
   echo '<script>alert("Gagal menghapus data."); document.location="index.php";</script>';
  }
 }else{
  echo '<script>alert("ID tidak ditemukan di database."); document.location="index.php";</script>';
 }
}else{
 echo '<script>alert("ID tidak ditemukan di database."); document.location="index.php";</script>';
}

?>

sedikit keterangan sudah dimasukkan di file, silahkan baca dengan teliti. Setelah selesai silahkan simpan.

Selesai.

Silahkan di praktekkan sendiri ya sob, usahakan script nya di ketik saja, supaya lebih paham.

Sekian artikel kali ini tentang PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete) semoga bermanfaat dan mudah dipahami serta dapat membantu anda dalam belajar tentang PHP. Bakura mengucapkan terimakasih atas kunjunganya silahkan cari artikel lain diblog ini.

0 Response to "PHP CRUD Dengan MySQLi dan Bootstrap (Create, Read, Update, Delete)"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel