Membangun Aplikasi CRUD Sederhana dengan PHP OOP

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

A
Persiapan
  1. Buat folder crud dalam htdocs
  2. Buat struktur folder:
    crud/
    ├── assets/
    │   ├── css/
    │   └── js/
    ├── config/
    ├── function/
    ├── model/
    ├── create.php
    ├── edit.php
    └── index.php
B
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
);
C
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;
    }
}
?>
D
File Config

File config/Config.php:

<?php
define('BASE_URL', 'http://localhost/crud/');
E
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>
        ';
    }
?>
F
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");
    }
}
G
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;
    }
}
H
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 Dashboard

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 Create

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 Dashboard

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:43

Doe

Anon
21 May 2025 14:32

laprak 1

Anon
21 May 2025 14:32

laprak 1

Anonym
21 May 2025 14:12

tes lagi

Amu
21 May 2025 06:14

Ya ya setuju

Anon
19 May 2025 07:46

tes lagi

Anon
19 May 2025 07:40

tes lagi

Anonym
19 May 2025 06:50

lagi

Anonym
19 May 2025 06:18

tes