📦 1. Struktur Folder
crud-sbadmin/
│
├── config/
│ └── database.php
│
├── assets/ ← file CSS / JS bawaan SB Admin 2
│
├── pages/
│ ├── list.php ← tampil data
│ ├── create.php ← tambah data
│ ├── edit.php ← edit data
│ └── delete.php ← hapus data
│
├── template/
│ ├── header.php
│ ├── sidebar.php
│ └── footer.php
│
└── index.php
🎨 2. Template SB Admin 2
Silakan download dari GitHub (gratis):
👉 https://github.com/StartBootstrap/startbootstrap-sb-admin-2
Struktur File SB Admin yang digunakan:
vendor/css/js/img/index.html
Nanti kita ubah
index.htmljadi layout dasar (header–sidebar–footer).
✨ Mulai Coding
💾 3. Database
Buat database:
CREATE DATABASE crud_db;
Tabel contoh (data pelanggan):
CREATE TABLE pelanggan (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(100),
alamat TEXT,
telp VARCHAR(20)
);
🔧 4. Koneksi Database — config/database.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "crud_db";
$conn = mysqli_connect($host,$user,$pass,$db);
if(!$conn){
die("Gagal koneksi database: ".mysqli_connect_error());
}
?>
🧱 5. Template Layout
✨ template/header.php
<?php include '../config/database.php'; ?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>CRUD SBAdmin</title>
<link href="../assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="../assets/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
📁 template/sidebar.php
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="../index.php">
<div class="sidebar-brand-icon"><i class="fas fa-database"></i></div>
<div class="sidebar-brand-text mx-3">CRUD</div>
</a>
<li class="nav-item">
<a class="nav-link" href="list.php">
<i class="fas fa-users"></i>
<span>Data Pelanggan</span></a>
</li>
</ul>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 shadow">
<h5 class="m-0">CRUD SBAdmin</h5>
</nav>
🧩 template/footer.php
</div>
</div>
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/sb-admin-2.min.js"></script>
</body>
</html>
📄 6. Halaman CRUD
📌 TAMPIL DATA — pages/list.php
<?php include '../template/header.php'; ?>
<?php include '../template/sidebar.php'; ?>
<div class="container-fluid">
<a href="create.php" class="btn btn-primary mb-3">Tambah Data</a>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Nama</th><th>Alamat</th><th>Telp</th><th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$data = mysqli_query($conn,"SELECT * FROM pelanggan");
while($d = mysqli_fetch_array($data)){
?>
<tr>
<td><?= $no++ ?></td>
<td><?= $d['nama'] ?></td>
<td><?= $d['alamat'] ?></td>
<td><?= $d['telp'] ?></td>
<td>
<a href="edit.php?id=<?= $d['id'] ?>" class="btn btn-warning btn-sm">Edit</a>
<a onclick="return confirm('Hapus data?')" href="delete.php?id=<?= $d['id'] ?>" class="btn btn-danger btn-sm">Hapus</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php include '../template/footer.php'; ?>
➕ TAMBAH — pages/create.php
<?php include '../template/header.php'; ?>
<?php include '../template/sidebar.php'; ?>
<div class="container-fluid">
<?php
if(isset($_POST['tambah'])){
mysqli_query($conn,"INSERT INTO pelanggan VALUES(null,'$_POST[nama]','$_POST[alamat]','$_POST[telp]')");
echo "<script>window.location='list.php'</script>";
}
?>
<form method="post">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" class="form-control" required>
</div>
<div class="form-group">
<label>Alamat</label>
<textarea name="alamat" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Telp</label>
<input type="text" name="telp" class="form-control">
</div>
<button class="btn btn-success" name="tambah">Simpan</button>
</form>
</div>
<?php include '../template/footer.php'; ?>
✏️ EDIT — pages/edit.php
<?php include '../template/header.php'; ?>
<?php include '../template/sidebar.php'; ?>
<?php
$id = $_GET['id'];
$d = mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM pelanggan WHERE id='$id'"));
if(isset($_POST['edit'])){
mysqli_query($conn,"UPDATE pelanggan SET
nama='$_POST[nama]',
alamat='$_POST[alamat]',
telp='$_POST[telp]'
WHERE id='$id'");
echo "<script>window.location='list.php'</script>";
}
?>
<div class="container-fluid">
<form method="post">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" class="form-control" value="<?= $d['nama'] ?>">
</div>
<div class="form-group">
<label>Alamat</label>
<textarea name="alamat" class="form-control"><?= $d['alamat'] ?></textarea>
</div>
<div class="form-group">
<label>Telp</label>
<input type="text" name="telp" class="form-control" value="<?= $d['telp'] ?>">
</div>
<button class="btn btn-primary" name="edit">Update</button>
</form>
</div>
<?php include '../template/footer.php'; ?>
❌ DELETE — pages/delete.php
<?php
include '../config/database.php';
$id = $_GET['id'];
mysqli_query($conn,"DELETE FROM pelanggan WHERE id='$id'");
header("location:list.php");
?>
🚀 7. Halaman Utama — index.php
<?php include 'template/header.php'; ?>
<?php include 'template/sidebar.php'; ?>
<div class="container-fluid text-center">
<h2 class="mt-5">Selamat datang di CRUD SBAdmin</h2>
<p>Gunakan menu Data Pelanggan</p>
</div>
<?php include 'template/footer.php'; ?>
