Konsep OOP dalam Implementasi CRUD
Class & Object
Class sebagai blueprint untuk membuat object Mahasiswa dan Database
Encapsulation
Menyembunyikan detail implementasi database dengan access modifier private
Inheritance
Class Mahasiswa mewarisi koneksi database dari class Database
Polymorphism
Method read() dapat menerima parameter berbeda untuk fungsi berbeda
Langkah Implementasi sesuai Modul
Persiapan
-
Buat folder
cruddalamhtdocs -
Buat struktur folder:
crud/ ├── assets/ │ ├── css/ │ └── js/ ├── config/ ├── function/ ├── model/ ├── create.php ├── edit.php └── index.php
Membuat Database dan Tabel
CREATE DATABASE pemrograman_web;
USE pemrograman_web;
CREATE TABLE mahasiswa (
id INT PRIMARY KEY AUTO_INCREMENT,
nim VARCHAR(16) NOT NULL,
nama VARCHAR(128) NOT NULL,
jurusan VARCHAR(128) NOT NULL
);
Koneksi Database
File config/Database.php:
<?php
class Database {
private $host = "localhost";
private $db_name = "pemrograman_web";
private $username = "root";
private $password = "";
public $conn;
public function getConnection(){
$this->conn = null;
try {
$this->conn = new mysqli($this->host, $this->username, $this->password, $this->db_name);
} catch (Exception $e) {
echo "Connection error: " . $e->getMessage();
}
return $this->conn;
}
}
?>
File Config
File config/Config.php:
<?php
define('BASE_URL', 'http://localhost/crud/');
Sistem Alert
File function/Alert.php:
<?php
function alert($msg, $sts) {
if ($sts == 1) {
$tipe = 'success';
} else {
$tipe = 'danger';
}
echo '
<div class="alert alert-'.$tipe.'" role="alert">
'.$msg.'
</div>
';
}
?>
Class Mahasiswa
File model/Mahasiswa.php:
<?php
session_start();
class Mahasiswa {
private $conn;
private $table_name = "mahasiswa";
public $id;
public $nim;
public $nama;
public $jurusan;
public function __construct($db) {
$this->conn = $db;
}
}
Implementasi CRUD dalam Class Mahasiswa
public function create() {
$query = "INSERT INTO ".$this->table_name."
SET nim=?, nama=?, jurusan=?";
$stmt = $this->conn->prepare($query);
$stmt->bind_param("sss",
$this->nim,
$this->nama,
$this->jurusan
);
if($stmt->execute()) {
$_SESSION['flash_message'] = "Data berhasil disimpan!";
header("Location: index.php?msg=1");
} else {
$_SESSION['flash_message'] = "Data gagal disimpan!";
header("Location: index.php?msg=0");
}
}
public function read($id = "") {
if($id == "") {
return $this->conn->query("SELECT * FROM ".$this->table_name);
} else {
$query = "SELECT * FROM ".$this->table_name." WHERE id=?";
$stmt = $this->conn->prepare($query);
$stmt->bind_param("i", $id);
$stmt->execute();
return $stmt->get_result();
}
}
public function update() {
$query = "UPDATE ".$this->table_name."
SET nim=?, nama=?, jurusan=?
WHERE id=?";
$stmt = $this->conn->prepare($query);
$stmt->bind_param("sssi",
$this->nim,
$this->nama,
$this->jurusan,
$this->id
);
if($stmt->execute()) {
$_SESSION['flash_message'] = "Data berhasil diupdate!";
header("Location: index.php?msg=1");
} else {
$_SESSION['flash_message'] = "Data gagal diupdate!";
header("Location: index.php?msg=0");
}
}
public function delete() {
$query = "DELETE FROM ".$this->table_name." WHERE id=?";
$stmt = $this->conn->prepare($query);
$stmt->bind_param("i", $this->id);
if($stmt->execute()) {
$_SESSION['flash_message'] = "Data berhasil dihapus!";
header("Location: index.php?msg=1");
} else {
$_SESSION['flash_message'] = "Data gagal dihapus!";
header("Location: index.php?msg=0");
}
}
Fungsi Mahasiswa
File function/Mahasiswa.php:
<?php
// function/Mahasiswa.php
include_once '../config/Database.php';
include '../config/Config.php';
include_once '../model/Mahasiswa.php';
$database = new Database();
$db = $database->getConnection();
$mahasiswa = new Mahasiswa($db);
if(isset($_GET['action'])) {
switch($_GET['action']) {
case 'create':
$mahasiswa->nim = $_POST['nim'];
$mahasiswa->nama = $_POST['nama'];
$mahasiswa->jurusan = $_POST['jurusan'];
$mahasiswa->create();
break;
case 'update':
$mahasiswa->id = $_POST['id'];
$mahasiswa->nim = $_POST['nim'];
$mahasiswa->nama = $_POST['nama'];
$mahasiswa->jurusan = $_POST['jurusan'];
$mahasiswa->update();
break;
case 'delete':
$mahasiswa->id = $_GET['id'];
$mahasiswa->delete();
break;
}
}
Tampilan View
File index.php (extract):
<?php
include 'function/Alert.php';
include_once './config/Database.php';
include_once './model/Mahasiswa.php';
$database = new Database();
$db = $database->getConnection();
$mahasiswa = new Mahasiswa($db);
$result = $mahasiswa->read();
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Management System</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--card-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
body {
background: #f8f9fa;
font-family: 'Poppins', sans-serif;
}
.main-card {
background: white;
border-radius: 20px;
box-shadow: var(--card-shadow);
margin-top: 2rem;
padding: 2rem;
transform: translateY(-50px);
opacity: 0;
animation: slideUp 0.8s forwards;
}
@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}
.table-hover-effect tbody tr {
transition: all 0.3s ease;
}
.table-hover-effect tbody tr:hover {
transform: translateX(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.gradient-btn {
background-image: var(--primary-gradient);
border: none;
color: white;
transition: all 0.3s ease;
}
.gradient-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(118,75,162,0.4);
}
.action-btn {
padding: 0.3rem 0.8rem;
border-radius: 10px;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid py-5">
<div class="col-lg-10 mx-auto">
<div class="main-card animate__animated animate__fadeInUp">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="text-primary fw-bold"><i class="fas fa-user-graduate me-2"></i>Student Management</h2>
<a href="create.php" class="gradient-btn btn btn-sm">
<i class="fas fa-plus-circle me-2"></i>Tambah Mahasiswa
</a>
</div>
<!-- Alert Section -->
<?php if(isset($_SESSION['flash_message'])): ?>
<div class="alert alert-dismissible fade show animate__animated animate__slideInDown
<?= ($_GET['msg'] == '1') ? 'alert-success' : 'alert-danger' ?>"
role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
<?= $_SESSION['flash_message'] ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php unset($_SESSION['flash_message']); endif; ?>
<div class="table-responsive">
<table class="table table-hover table-hover-effect align-middle">
<thead class="table-light">
<tr>
<th>#</th>
<th>NIM</th>
<th>Nama Lengkap</th>
<th>Jurusan</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php $no=1; while ($row = $result->fetch_assoc()): ?>
<tr class="animate__animated animate__fadeIn">
<td class="fw-bold"><?= $no++ ?></td>
<td><?= $row['nim'] ?></td>
<td><?= $row['nama'] ?></td>
<td>
<span class="badge bg-primary bg-gradient">
<?= $row['jurusan'] ?>
</span>
</td>
<td class="text-center">
<a href="edit.php?id=<?= $row['id'] ?>"
class="btn btn-success btn-sm action-btn me-1">
<i class="fas fa-edit me-1"></i>Edit
</a>
<a href="function/Mahasiswa.php?action=delete&id=<?= $row['id'] ?>"
class="btn btn-danger btn-sm action-btn"
onclick="return confirm('Hapus data <?= $row['nama'] ?>?')">
<i class="fas fa-trash-alt me-1"></i>Hapus
</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script>
// Auto-hide alert after 3 seconds
window.setTimeout(function() {
document.querySelector('.alert').classList.add('animate__fadeOutUp');
setTimeout(function() {
document.querySelector('.alert').remove();
}, 500);
}, 3000);
</script>
</body>
</html>
Gambar tampilan dashboard
File create.php (extract):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tambah Mahasiswa</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.form-card {
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
margin: 2rem auto;
padding: 2.5rem;
max-width: 600px;
transform: translateY(50px);
opacity: 0;
animation: formEntrance 0.6s forwards;
}
@keyframes formEntrance {
to {
transform: translateY(0);
opacity: 1;
}
}
.form-label {
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.form-control {
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 0.8rem;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
</style>
</head>
<body class="bg-light">
<div class="container">
<div class="row">
<div class="form-card animate__animated animate__fadeInUp">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="text-primary"><i class="fas fa-user-plus me-2"></i>Tambah Mahasiswa Baru</h3>
<a href="index.php" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-arrow-left me-1"></i>Kembali
</a>
</div>
<form action="function/Mahasiswa.php?action=create" method="post">
<div class="mb-4">
<label class="form-label">NIM</label>
<input type="text" class="form-control" name="nim" required
placeholder="Masukkan NIM mahasiswa">
</div>
<div class="mb-4">
<label class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" name="nama" required
placeholder="Masukkan nama lengkap">
</div>
<div class="mb-4">
<label class="form-label">Jurusan</label>
<input type="text" class="form-control" name="jurusan" required
placeholder="Masukkan nama jurusan">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary gradient-btn py-2">
<i class="fas fa-save me-2"></i>Simpan Data
</button>
</div>
</form>
</div>
</div>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Gambar tampilan create
File edit.php (extract):
<?php
include_once './config/Database.php';
include_once './model/Mahasiswa.php';
$database = new Database();
$db = $database->getConnection();
$mahasiswa = new Mahasiswa($db);
if(isset($_GET['id'])) {
$result = $mahasiswa->read($_GET['id'])->fetch_assoc();
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit Mahasiswa</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.form-card {
background: white;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
padding: 2rem;
margin-top: 3rem;
animation: formEntrance 0.5s ease;
}
@keyframes formEntrance {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.form-label {
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.form-control {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 0.75rem;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}
.data-preview {
background: #f8f9fa;
border-radius: 10px;
padding: 1rem;
margin-bottom: 1.5rem;
}
</style>
</head>
<body class="bg-light">
<div class="container">
<div class="row">
<div class="form-card animate__animated animate__fadeInUp">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="text-primary"><i class="fas fa-user-edit me-2"></i>Edit Data Mahasiswa</h3>
<a href="index.php" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-arrow-left me-1"></i>Kembali
</a>
</div>
<form action="function/Mahasiswa.php?action=update" method="post">
<input type="hidden" name="id" value="<?= htmlspecialchars($result['id']) ?>">
<div class="data-preview">
<small class="text-muted">ID Registrasi:</small>
<div class="fw-bold"><?= htmlspecialchars($result['id']) ?></div>
</div>
<div class="mb-4">
<label class="form-label">NIM</label>
<input type="text" class="form-control" name="nim" required
value="<?= htmlspecialchars($result['nim']) ?>">
</div>
<div class="mb-4">
<label class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" name="nama" required
value="<?= htmlspecialchars($result['nama']) ?>">
</div>
<div class="mb-4">
<label class="form-label">Jurusan</label>
<input type="text" class="form-control" name="jurusan" required
value="<?= htmlspecialchars($result['jurusan']) ?>">
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-success gradient-btn py-2">
<i class="fas fa-sync-alt me-2"></i>Perbarui Data
</button>
</div>
</form>
</div>
</div>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Gambar tampilan dashboard
Struktur Proyek
crud/
├── assets/
│ ├── css/
│ └── js/
├── config/
│ ├── Config.php
│ └── Database.php
├── function/
│ ├── Alert.php
│ └── Mahasiswa.php
├── model/
│ └── Mahasiswa.php
├── create.php
├── edit.php
└── index.php
Link Repository: https://github.com/Alone1011/2311532011_RifkiYuliandra_PWeb/tree/Laprak
Link Website: Website
Komentar (9)
Tinggalkan Komentar
John
23 May 2025 03:43Doe
Anon
21 May 2025 14:32laprak 1
Anon
21 May 2025 14:32laprak 1
Anonym
21 May 2025 14:12tes lagi
Amu
21 May 2025 06:14Ya ya setuju
Anon
19 May 2025 07:46tes lagi
Anon
19 May 2025 07:40tes lagi
Anonym
19 May 2025 06:50lagi
Anonym
19 May 2025 06:18tes