MVC/MVVM Architecture Fundamentals with PHP

Why Separation of Concerns Matters

Every web application starts the same way: a single PHP file that reads from $_GET, queries the database, loops over rows, and echoes HTML. It works for a week. Then the lecturer asks for a new filter on the enrolment list, and suddenly you are scrolling through 800 lines of intertwined SQL, HTML, and business logic trying not to break anything.

Separation of concerns is the practice of dividing code into distinct layers, each with a single responsibility. When the presentation layer changes (e.g., a new CSS framework), the business rules stay untouched. When a business rule changes (e.g., “maximum enrolment capacity is now 40 instead of 30”), the HTML templates do not need to be touched.

Two separation patterns dominate web development today:

This tutorial walks through both patterns using the same concrete domain — a student-course enrolment module — so you can compare them side by side and decide which fits your next project.

Mengapa Separation of Concerns Itu Penting

Setiap aplikasi web dimulai dengan cara yang sama: satu file PHP yang membaca dari $_GET, menjalankan query database, melakukan loop pada baris, dan menampilkan HTML. Ini berfungsi selama satu minggu. Kemudian dosen meminta filter baru pada daftar pendaftaran, dan tiba-tiba Anda menggulir 800 baris SQL, HTML, dan logika bisnis yang saling terkait sambil berusaha tidak merusak apa pun.

Separation of concerns adalah praktik membagi kode menjadi lapisan-lapisan berbeda, masing-masing dengan satu tanggung jawab. Ketika lapisan presentasi berubah (misalnya, framework CSS baru), aturan bisnis tetap tidak tersentuh. Ketika aturan bisnis berubah (misalnya, “kapasitas maksimum pendaftaran sekarang 40, bukan 30”), template HTML tidak perlu disentuh.

Dua pola pemisahan mendominasi pengembangan web saat ini:

Tutorial ini membahas kedua pola menggunakan domain konkret yang sama, yaitu modul pendaftaran mata kuliah, sehingga Anda dapat membandingkannya secara berdampingan dan memutuskan mana yang cocok untuk proyek Anda berikutnya.

What Is MVC? Model, View, Controller

MVC divides an application into three interconnected components. The Model owns the data and the business rules. The View renders the output — HTML, JSON, or a PDF. The Controller receives the HTTP request, asks the Model for data, and chooses which View to render.

The golden rule: the Model never knows about the View or the Controller. It is a pure PHP object that can run from a command line, a queue worker, or a test suite with zero knowledge of HTTP.

A Spaghetti Enrolment Page (Before MVC)

Imagine enrol.php — a single file that does everything:

<?php
// enrol.php — a single-file nightmare

$db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');

$studentId = $_GET['student_id'] ?? null;
$courseId  = $_GET['course_id']  ?? null;

if (!$studentId || !$courseId) {
    echo '<p style="color:red;">Missing parameters.</p>';
    exit;
}

$stmt = $db->prepare('SELECT * FROM students WHERE id = ?');
$stmt->execute([$studentId]);
$student = $stmt->fetch();

$stmt = $db->prepare('SELECT * FROM courses WHERE id = ?');
$stmt->execute([$courseId]);
$course = $stmt->fetch();

if (!$student || !$course) {
    echo '<p style="color:red;">Student or course not found.</p>';
    exit;
}

$stmt = $db->prepare(
    'SELECT COUNT(*) FROM enrolments WHERE course_id = ? AND status = "confirmed"'
);
$stmt->execute([$courseId]);
$enrolmentCount = (int) $stmt->fetchColumn();

if ($enrolmentCount >= $course['max_capacity']) {
    echo '<p style="color:red;">Course is full.</p>';
    exit;
}

$stmt = $db->prepare(
    'SELECT COUNT(*) FROM enrolments WHERE student_id = ? AND course_id = ?'
);
$stmt->execute([$studentId, $courseId]);
if ($stmt->fetchColumn() > 0) {
    echo '<p style="color:red;">Already enrolled.</p>';
    exit;
}

$db->prepare(
    'INSERT INTO enrolments (student_id, course_id, status, created_at) VALUES (?, ?, "confirmed", NOW())'
)->execute([$studentId, $courseId]);

echo '<h1>Enrolment Confirmed</h1>';
echo '<p>' . htmlspecialchars($student['name']) . ' has been enrolled in '
    . htmlspecialchars($course['name']) . '.</p>';
echo '<a href="/courses.php">Back to courses</a>';

This file mixes SQL, business rules, HTML, and routing. Adding a REST API endpoint would mean copying the business logic into another file. Adding email notifications means injecting mail() calls between the INSERT and the echo. Changing the database from MySQL to PostgreSQL means touching every query.

Refactoring Into MVC

Let us extract three layers from the spaghetti.

Model — Pure Business Logic

The Model is the heart. It knows the rules: a student cannot enrol twice in the same course, and a course cannot exceed its capacity.

<?php

class Student
{
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly string $nim,
    ) {}
}

class Course
{
    /** @param Course[] $prerequisites */
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly int $maxCapacity,
        public readonly array $prerequisites = [],
    ) {}
}

class EnrolmentService
{
    public function __construct(
        private PDO $db
    ) {}

    public function enrol(Student $student, Course $course): EnrolmentResult
    {
        if ($this->alreadyEnrolled($student->id, $course->id)) {
            return new EnrolmentResult(false, 'Student is already enrolled in this course.');
        }

        if ($this->isFull($course)) {
            return new EnrolmentResult(false, 'Course has reached maximum capacity.');
        }

        $this->db->prepare(
            'INSERT INTO enrolments (student_id, course_id, status, created_at)
             VALUES (?, ?, "confirmed", NOW())'
        )->execute([$student->id, $course->id]);

        return new EnrolmentResult(true, 'Enrolment confirmed.');
    }

    private function alreadyEnrolled(int $studentId, int $courseId): bool
    {
        $stmt = $this->db->prepare(
            'SELECT COUNT(*) FROM enrolments WHERE student_id = ? AND course_id = ?'
        );
        $stmt->execute([$studentId, $courseId]);
        return $stmt->fetchColumn() > 0;
    }

    private function isFull(Course $course): bool
    {
        $stmt = $this->db->prepare(
            'SELECT COUNT(*) FROM enrolments WHERE course_id = ? AND status = "confirmed"'
        );
        $stmt->execute([$course->id]);
        return (int) $stmt->fetchColumn() >= $course->maxCapacity;
    }

    /** @return array<int, array<string, mixed>> */
    public function getEnrolmentsByStudent(int $studentId): array
    {
        $stmt = $this->db->prepare(
            'SELECT e.*, c.name AS course_name
             FROM enrolments e
             JOIN courses c ON c.id = e.course_id
             WHERE e.student_id = ?
             ORDER BY e.created_at DESC'
        );
        $stmt->execute([$studentId]);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

class EnrolmentResult
{
    public function __construct(
        public readonly bool $success,
        public readonly string $message,
    ) {}
}

Notice: no HTML, no $_GET, no echo. The Model is a pure PHP class. You can unit-test EnrolmentService::enrol() without a browser — inject a SQLite in-memory PDO and assert that the second enrolment attempt returns false.

Controller — The Traffic Cop

The Controller translates HTTP concerns into domain calls and decides what View to return.

<?php

class EnrolmentController
{
    public function __construct(
        private EnrolmentService $enrolmentService,
    ) {}

    public function create(): void
    {
        $studentId = (int) ($_GET['student_id'] ?? 0);
        $courseId  = (int) ($_GET['course_id']  ?? 0);

        if ($studentId === 0 || $courseId === 0) {
            $this->render('error', ['message' => 'Missing required parameters.']);
            return;
        }

        $student = $this->findStudent($studentId);
        $course  = $this->findCourse($courseId);

        if (!$student || !$course) {
            $this->render('error', ['message' => 'Student or course not found.']);
            return;
        }

        $result = $this->enrolmentService->enrol($student, $course);

        if (!$result->success) {
            $this->render('error', ['message' => $result->message]);
            return;
        }

        $this->render('enrolment-confirmed', [
            'studentName' => $student->name,
            'courseName'  => $course->name,
        ]);
    }

    public function list(): void
    {
        $studentId = (int) ($_GET['student_id'] ?? 0);

        if ($studentId === 0) {
            $this->render('error', ['message' => 'Missing student ID.']);
            return;
        }

        $enrolments = $this->enrolmentService->getEnrolmentsByStudent($studentId);

        $this->render('enrolment-list', [
            'enrolments' => $enrolments,
        ]);
    }

    private function render(string $view, array $data): void
    {
        extract($data);
        require __DIR__ . "/../views/{$view}.php";
    }

    private function findStudent(int $id): ?Student
    {
        $db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');
        $stmt = $db->prepare('SELECT id, name, nim FROM students WHERE id = ?');
        $stmt->execute([$id]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        return $row ? new Student((int) $row['id'], $row['name'], $row['nim']) : null;
    }

    private function findCourse(int $id): ?Course
    {
        $db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');
        $stmt = $db->prepare('SELECT id, name, max_capacity FROM courses WHERE id = ?');
        $stmt->execute([$id]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        return $row ? new Course((int) $row['id'], $row['name'], (int) $row['max_capacity']) : null;
    }
}

The Controller’s responsibilities are narrow: validate input, call the Model, pass data to the View. If the team decides to add a REST API, you write a new ApiEnrolmentController that reuses the same EnrolmentService but returns JSON instead of rendering PHP templates.

View — Pure Presentation

<!-- views/enrolment-confirmed.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enrolment Confirmed</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <main>
        <h1>Enrolment Confirmed</h1>
        <p>
            <strong><?= htmlspecialchars($studentName) ?></strong>
            has been enrolled in
            <strong><?= htmlspecialchars($courseName) ?></strong>.
        </p>
        <a href="/courses.php">Back to courses</a>
    </main>
</body>
</html>

You can hand this file to a designer who knows zero PHP beyond <?= $var ?>. They can restyle the entire page without touching a line of business logic.

MVC in Laravel

Laravel bakes MVC into its structure. Here is the same enrolment module in idiomatic Laravel 11:

Model (Eloquent + business logic via a Service class):

<?php

// app/Models/Student.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Student extends Model
{
    protected $fillable = ['name', 'nim'];

    public function enrolments(): HasMany
    {
        return $this->hasMany(Enrolment::class);
    }
}

<?php

// app/Models/Course.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Course extends Model
{
    protected $fillable = ['name', 'code', 'max_capacity'];

    public function isFull(): bool
    {
        return $this->enrolments()->confirmed()->count() >= $this->max_capacity;
    }

    public function enrolments()
    {
        return $this->hasMany(Enrolment::class);
    }
}

<?php

// app/Models/Enrolment.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Builder;

class Enrolment extends Model
{
    protected $fillable = ['student_id', 'course_id', 'status'];

    public function scopeConfirmed(Builder $query): Builder
    {
        return $query->where('status', 'confirmed');
    }

    public function student()
    {
        return $this->belongsTo(Student::class);
    }

    public function course()
    {
        return $this->belongsTo(Course::class);
    }
}

<?php

// app/Services/EnrolmentService.php
namespace App\Services;

use App\Models\Student;
use App\Models\Course;
use App\Models\Enrolment;
use DomainException;

class EnrolmentService
{
    public function enrol(Student $student, Course $course): Enrolment
    {
        if ($student->enrolments()->where('course_id', $course->id)->exists()) {
            throw new DomainException('Student is already enrolled in this course.');
        }

        if ($course->isFull()) {
            throw new DomainException('Course has reached maximum capacity.');
        }

        return Enrolment::create([
            'student_id' => $student->id,
            'course_id'  => $course->id,
            'status'     => 'confirmed',
        ]);
    }
}

Controller (thin — delegates to the Service):

<?php

// app/Http/Controllers/EnrolmentController.php
namespace App\Http\Controllers;

use App\Models\Student;
use App\Models\Course;
use App\Services\EnrolmentService;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\View\View;

class EnrolmentController extends Controller
{
    public function __construct(
        private EnrolmentService $enrolmentService
    ) {}

    public function create(Request $request): RedirectResponse
    {
        $validated = $request->validate([
            'student_id' => 'required|exists:students,id',
            'course_id'  => 'required|exists:courses,id',
        ]);

        $student = Student::findOrFail($validated['student_id']);
        $course  = Course::findOrFail($validated['course_id']);

        try {
            $enrolment = $this->enrolmentService->enrol($student, $course);
        } catch (DomainException $e) {
            return back()->with('error', $e->getMessage());
        }

        return redirect()
            ->route('enrolments.index')
            ->with('success', "{$student->name} enrolled in {$course->name}.");
    }

    public function index(Request $request): View
    {
        $student = Student::with('enrolments.course')->findOrFail($request->student_id);

        return view('enrolments.list', [
            'student'    => $student,
            'enrolments' => $student->enrolments,
        ]);
    }
}

View (Blade template):

{{-- resources/views/enrolments/list.blade.php --}}
@extends('layouts.app')

@section('title', 'My Enrolments')

@section('content')
    <h1>Enrolments for {{ $student->name }}</h1>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($enrolments->isEmpty())
        <p>No enrolments yet.</p>
    @else
        <table>
            <thead>
                <tr>
                    <th>Course</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($enrolments as $enrolment)
                    <tr>
                        <td>{{ $enrolment->course->name }}</td>
                        <td>{{ $enrolment->status }}</td>
                        <td>{{ $enrolment->created_at->format('d M Y') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
@endsection

The Laravel router connects URL to Controller:

// routes/web.php
Route::get('/enrolments', [EnrolmentController::class, 'index'])->name('enrolments.index');
Route::post('/enrolments', [EnrolmentController::class, 'create'])->name('enrolments.create');

What MVC gives you:

• The designer edits enrolments/list.blade.php without fear of breaking enrolment rules.
• The back-end developer adds a cancel() method to EnrolmentService and a new Controller action — the View stays unchanged.
• You write a unit test for EnrolmentService that runs in milliseconds, no HTTP server needed.

Apa Itu MVC? Model, View, Controller

MVC membagi aplikasi menjadi tiga komponen yang saling terhubung. Model memiliki data dan aturan bisnis. View merender output: HTML, JSON, atau PDF. Controller menerima HTTP request, meminta data dari Model, dan memilih View mana yang akan dirender.

Aturan emas: Model tidak pernah tahu tentang View atau Controller. Ia adalah objek PHP murni yang dapat dijalankan dari command line, queue worker, atau test suite tanpa pengetahuan tentang HTTP.

Halaman Pendaftaran Spaghetti (Sebelum MVC)

Bayangkan enrol.php, satu file yang melakukan segalanya:

<?php
// enrol.php — nightmare satu file

$db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');

$studentId = $_GET['student_id'] ?? null;
$courseId  = $_GET['course_id']  ?? null;

if (!$studentId || !$courseId) {
    echo '<p style="color:red;">Parameter tidak lengkap.</p>';
    exit;
}

$stmt = $db->prepare('SELECT * FROM students WHERE id = ?');
$stmt->execute([$studentId]);
$student = $stmt->fetch();

$stmt = $db->prepare('SELECT * FROM courses WHERE id = ?');
$stmt->execute([$courseId]);
$course = $stmt->fetch();

if (!$student || !$course) {
    echo '<p style="color:red;">Mahasiswa atau mata kuliah tidak ditemukan.</p>';
    exit;
}

$stmt = $db->prepare(
    'SELECT COUNT(*) FROM enrolments WHERE course_id = ? AND status = "confirmed"'
);
$stmt->execute([$courseId]);
$enrolmentCount = (int) $stmt->fetchColumn();

if ($enrolmentCount >= $course['max_capacity']) {
    echo '<p style="color:red;">Mata kuliah penuh.</p>';
    exit;
}

$stmt = $db->prepare(
    'SELECT COUNT(*) FROM enrolments WHERE student_id = ? AND course_id = ?'
);
$stmt->execute([$studentId, $courseId]);
if ($stmt->fetchColumn() > 0) {
    echo '<p style="color:red;">Sudah terdaftar.</p>';
    exit;
}

$db->prepare(
    'INSERT INTO enrolments (student_id, course_id, status, created_at) VALUES (?, ?, "confirmed", NOW())'
)->execute([$studentId, $courseId]);

echo '<h1>Pendaftaran Dikonfirmasi</h1>';
echo '<p>' . htmlspecialchars($student['name']) . ' telah terdaftar di '
    . htmlspecialchars($course['name']) . '.</p>';
echo '<a href="/courses.php">Kembali ke daftar mata kuliah</a>';

File ini mencampur SQL, aturan bisnis, HTML, dan routing. Menambahkan endpoint REST API berarti menyalin logika bisnis ke file lain. Menambahkan notifikasi email berarti menyuntikkan panggilan mail() di antara INSERT dan echo. Mengganti database dari MySQL ke PostgreSQL berarti menyentuh setiap query.

Refactoring Menjadi MVC

Mari kita ekstrak tiga lapisan dari spaghetti.

Model: Logika Bisnis Murni

Model adalah jantungnya. Ia mengetahui aturan: mahasiswa tidak dapat mendaftar dua kali di mata kuliah yang sama, dan mata kuliah tidak dapat melebihi kapasitasnya.

<?php

class Student
{
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly string $nim,
    ) {}
}

class Course
{
    /** @param Course[] $prerequisites */
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly int $maxCapacity,
        public readonly array $prerequisites = [],
    ) {}
}

class EnrolmentService
{
    public function __construct(
        private PDO $db
    ) {}

    public function enrol(Student $student, Course $course): EnrolmentResult
    {
        if ($this->alreadyEnrolled($student->id, $course->id)) {
            return new EnrolmentResult(false, 'Mahasiswa sudah terdaftar di mata kuliah ini.');
        }

        if ($this->isFull($course)) {
            return new EnrolmentResult(false, 'Mata kuliah telah mencapai kapasitas maksimum.');
        }

        $this->db->prepare(
            'INSERT INTO enrolments (student_id, course_id, status, created_at)
             VALUES (?, ?, "confirmed", NOW())'
        )->execute([$student->id, $course->id]);

        return new EnrolmentResult(true, 'Pendaftaran dikonfirmasi.');
    }

    private function alreadyEnrolled(int $studentId, int $courseId): bool
    {
        $stmt = $this->db->prepare(
            'SELECT COUNT(*) FROM enrolments WHERE student_id = ? AND course_id = ?'
        );
        $stmt->execute([$studentId, $courseId]);
        return $stmt->fetchColumn() > 0;
    }

    private function isFull(Course $course): bool
    {
        $stmt = $this->db->prepare(
            'SELECT COUNT(*) FROM enrolments WHERE course_id = ? AND status = "confirmed"'
        );
        $stmt->execute([$course->id]);
        return (int) $stmt->fetchColumn() >= $course->maxCapacity;
    }

    /** @return array<int, array<string, mixed>> */
    public function getEnrolmentsByStudent(int $studentId): array
    {
        $stmt = $this->db->prepare(
            'SELECT e.*, c.name AS course_name
             FROM enrolments e
             JOIN courses c ON c.id = e.course_id
             WHERE e.student_id = ?
             ORDER BY e.created_at DESC'
        );
        $stmt->execute([$studentId]);
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

class EnrolmentResult
{
    public function __construct(
        public readonly bool $success,
        public readonly string $message,
    ) {}
}

Perhatikan: tidak ada HTML, tidak ada $_GET, tidak ada echo. Model adalah kelas PHP murni. Anda dapat melakukan unit test pada EnrolmentService::enrol() tanpa browser: suntikkan PDO SQLite in-memory, lalu pastikan percobaan pendaftaran kedua mengembalikan false.

Controller: Polisi Lalu Lintas

Controller menerjemahkan urusan HTTP menjadi panggilan domain dan memutuskan View apa yang akan dikembalikan.

<?php

class EnrolmentController
{
    public function __construct(
        private EnrolmentService $enrolmentService,
    ) {}

    public function create(): void
    {
        $studentId = (int) ($_GET['student_id'] ?? 0);
        $courseId  = (int) ($_GET['course_id']  ?? 0);

        if ($studentId === 0 || $courseId === 0) {
            $this->render('error', ['message' => 'Parameter yang diperlukan tidak lengkap.']);
            return;
        }

        $student = $this->findStudent($studentId);
        $course  = $this->findCourse($courseId);

        if (!$student || !$course) {
            $this->render('error', ['message' => 'Mahasiswa atau mata kuliah tidak ditemukan.']);
            return;
        }

        $result = $this->enrolmentService->enrol($student, $course);

        if (!$result->success) {
            $this->render('error', ['message' => $result->message]);
            return;
        }

        $this->render('enrolment-confirmed', [
            'studentName' => $student->name,
            'courseName'  => $course->name,
        ]);
    }

    public function list(): void
    {
        $studentId = (int) ($_GET['student_id'] ?? 0);

        if ($studentId === 0) {
            $this->render('error', ['message' => 'ID mahasiswa tidak ada.']);
            return;
        }

        $enrolments = $this->enrolmentService->getEnrolmentsByStudent($studentId);

        $this->render('enrolment-list', [
            'enrolments' => $enrolments,
        ]);
    }

    private function render(string $view, array $data): void
    {
        extract($data);
        require __DIR__ . "/../views/{$view}.php";
    }

    private function findStudent(int $id): ?Student
    {
        $db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');
        $stmt = $db->prepare('SELECT id, name, nim FROM students WHERE id = ?');
        $stmt->execute([$id]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        return $row ? new Student((int) $row['id'], $row['name'], $row['nim']) : null;
    }

    private function findCourse(int $id): ?Course
    {
        $db = new PDO('mysql:host=localhost;dbname=campus', 'root', '');
        $stmt = $db->prepare('SELECT id, name, max_capacity FROM courses WHERE id = ?');
        $stmt->execute([$id]);
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        return $row ? new Course((int) $row['id'], $row['name'], (int) $row['max_capacity']) : null;
    }
}

Tanggung jawab Controller sempit: validasi input, panggil Model, teruskan data ke View. Jika tim memutuskan untuk menambahkan REST API, Anda menulis ApiEnrolmentController baru yang menggunakan kembali EnrolmentService yang sama tetapi mengembalikan JSON alih-alih merender template PHP.

View: Presentasi Murni

<!-- views/enrolment-confirmed.php -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Pendaftaran Dikonfirmasi</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <main>
        <h1>Pendaftaran Dikonfirmasi</h1>
        <p>
            <strong><?= htmlspecialchars($studentName) ?></strong>
            telah terdaftar di
            <strong><?= htmlspecialchars($courseName) ?></strong>.
        </p>
        <a href="/courses.php">Kembali ke daftar mata kuliah</a>
    </main>
</body>
</html>

Anda dapat menyerahkan file ini kepada desainer yang hanya tahu PHP sebatas <?= $var ?>. Mereka dapat mengubah gaya seluruh halaman tanpa menyentuh satu baris logika bisnis pun.

MVC di Laravel

Laravel memanggang MVC ke dalam strukturnya. Berikut modul pendaftaran yang sama dalam Laravel 11 idiomatik:

Model (Eloquent + logika bisnis melalui kelas Service):

<?php

// app/Models/Student.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Student extends Model
{
    protected $fillable = ['name', 'nim'];

    public function enrolments(): HasMany
    {
        return $this->hasMany(Enrolment::class);
    }
}

<?php

// app/Models/Course.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Course extends Model
{
    protected $fillable = ['name', 'code', 'max_capacity'];

    public function isFull(): bool
    {
        return $this->enrolments()->confirmed()->count() >= $this->max_capacity;
    }

    public function enrolments()
    {
        return $this->hasMany(Enrolment::class);
    }
}

<?php

// app/Models/Enrolment.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Builder;

class Enrolment extends Model
{
    protected $fillable = ['student_id', 'course_id', 'status'];

    public function scopeConfirmed(Builder $query): Builder
    {
        return $query->where('status', 'confirmed');
    }

    public function student()
    {
        return $this->belongsTo(Student::class);
    }

    public function course()
    {
        return $this->belongsTo(Course::class);
    }
}

<?php

// app/Services/EnrolmentService.php
namespace App\Services;

use App\Models\Student;
use App\Models\Course;
use App\Models\Enrolment;
use DomainException;

class EnrolmentService
{
    public function enrol(Student $student, Course $course): Enrolment
    {
        if ($student->enrolments()->where('course_id', $course->id)->exists()) {
            throw new DomainException('Mahasiswa sudah terdaftar di mata kuliah ini.');
        }

        if ($course->isFull()) {
            throw new DomainException('Mata kuliah telah mencapai kapasitas maksimum.');
        }

        return Enrolment::create([
            'student_id' => $student->id,
            'course_id'  => $course->id,
            'status'     => 'confirmed',
        ]);
    }
}

Controller (tipis, mendelegasikan ke Service):

<?php

// app/Http/Controllers/EnrolmentController.php
namespace App\Http\Controllers;

use App\Models\Student;
use App\Models\Course;
use App\Services\EnrolmentService;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\View\View;

class EnrolmentController extends Controller
{
    public function __construct(
        private EnrolmentService $enrolmentService
    ) {}

    public function create(Request $request): RedirectResponse
    {
        $validated = $request->validate([
            'student_id' => 'required|exists:students,id',
            'course_id'  => 'required|exists:courses,id',
        ]);

        $student = Student::findOrFail($validated['student_id']);
        $course  = Course::findOrFail($validated['course_id']);

        try {
            $enrolment = $this->enrolmentService->enrol($student, $course);
        } catch (DomainException $e) {
            return back()->with('error', $e->getMessage());
        }

        return redirect()
            ->route('enrolments.index')
            ->with('success', "{$student->name} terdaftar di {$course->name}.");
    }

    public function index(Request $request): View
    {
        $student = Student::with('enrolments.course')->findOrFail($request->student_id);

        return view('enrolments.list', [
            'student'    => $student,
            'enrolments' => $student->enrolments,
        ]);
    }
}

View (Blade template):

{{-- resources/views/enrolments/list.blade.php --}}
@extends('layouts.app')

@section('title', 'Pendaftaran Saya')

@section('content')
    <h1>Pendaftaran untuk {{ $student->name }}</h1>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($enrolments->isEmpty())
        <p>Belum ada pendaftaran.</p>
    @else
        <table>
            <thead>
                <tr>
                    <th>Mata Kuliah</th>
                    <th>Status</th>
                    <th>Tanggal</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($enrolments as $enrolment)
                    <tr>
                        <td>{{ $enrolment->course->name }}</td>
                        <td>{{ $enrolment->status }}</td>
                        <td>{{ $enrolment->created_at->format('d M Y') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
@endsection

Router Laravel menghubungkan URL ke Controller:

// routes/web.php
Route::get('/enrolments', [EnrolmentController::class, 'index'])->name('enrolments.index');
Route::post('/enrolments', [EnrolmentController::class, 'create'])->name('enrolments.create');

Apa yang diberikan MVC kepada Anda:

• Desainer mengedit enrolments/list.blade.php tanpa takut merusak aturan pendaftaran.
• Back-end developer menambahkan metode cancel() ke EnrolmentService dan aksi Controller baru, sementara View tetap tidak berubah.
• Anda menulis unit test untuk EnrolmentService yang berjalan dalam milidetik, tanpa memerlukan server HTTP.

What Is MVVM? Model, View, ViewModel

MVVM was introduced by Microsoft for WPF/Silverlight and later adopted by client-side JavaScript frameworks. The key difference from MVC is the ViewModel — a layer that sits between the Model and the View, exposing data and commands in a way the View can bind to directly.

The ViewModel does not know about the DOM. It exposes plain JavaScript/PHP objects and methods. The framework’s data-binding system keeps the View in sync automatically.

MVVM with a PHP Backend and Vue.js Frontend

The PHP/Laravel backend serves a REST API (or uses Inertia.js for server-driven SPA). The Vue.js frontend consumes the API and manages UI state through a ViewModel.

Backend: Laravel API (Model stays the same)

<?php

// routes/api.php
use App\Http\Controllers\Api\EnrolmentApiController;

Route::get('/students/{student}/enrolments', [EnrolmentApiController::class, 'index']);
Route::post('/enrolments', [EnrolmentApiController::class, 'store']);
Route::delete('/enrolments/{enrolment}', [EnrolmentApiController::class, 'destroy']);

<?php

// app/Http/Controllers/Api/EnrolmentApiController.php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Resources\EnrolmentResource;
use App\Models\Student;
use App\Models\Course;
use App\Services\EnrolmentService;
use DomainException;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;

class EnrolmentApiController extends Controller
{
    public function __construct(
        private EnrolmentService $enrolmentService
    ) {}

    public function store(Request $request): JsonResponse
    {
        $validated = $request->validate([
            'student_id' => 'required|exists:students,id',
            'course_id'  => 'required|exists:courses,id',
        ]);

        try {
            $enrolment = $this->enrolmentService->enrol(
                Student::findOrFail($validated['student_id']),
                Course::findOrFail($validated['course_id'])
            );
        } catch (DomainException $e) {
            return response()->json(['message' => $e->getMessage()], 422);
        }

        return (new EnrolmentResource($enrolment))
            ->response()
            ->setStatusCode(201);
    }

    public function index(Student $student): JsonResponse
    {
        $enrolments = $student->enrolments()->with('course')->latest()->get();

        return EnrolmentResource::collection($enrolments)->response();
    }
}

<?php

// app/Http/Resources/EnrolmentResource.php
namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class EnrolmentResource extends JsonResource
{
    /** @return array<string, mixed> */
    public function toArray(Request $request): array
    {
        return [
            'id'         => $this->id,
            'status'     => $this->status,
            'created_at' => $this->created_at->toIso8601String(),
            'course'     => [
                'id'   => $this->course->id,
                'name' => $this->course->name,
                'code' => $this->course->code,
            ],
        ];
    }
}

The backend is exactly the same EnrolmentService from the MVC version. The only differences are a JSON API controller and API resource classes. The Model does not change.

Frontend: Vue 3 ViewModel (Composition API)

The Vue component acts as the ViewModel. It holds reactive state (ref, reactive), exposes computed properties, and defines methods that the template binds to.

<template>
  <div class="enrolment-manager">
    <h1>Enrolments for {{ student.name }}</h1>

    <!-- Success / error feedback -->
    <div v-if="feedback.message" :class="feedback.type">
      {{ feedback.message }}
    </div>

    <!-- Course selector -->
    <div class="enrolment-form">
      <select v-model="selectedCourseId">
        <option :value="null" disabled>Select a course...</option>
        <option
          v-for="course in availableCourses"
          :key="course.id"
          :value="course.id"
          :disabled="isAlreadyEnrolled(course.id) || isCourseFull(course)"
        >
          {{ course.name }} ({{ course.code }})
          <template v-if="isCourseFull(course)">— Full</template>
          <template v-else-if="isAlreadyEnrolled(course.id)">— Enrolled</template>
        </option>
      </select>

      <button
        @click="enrol"
        :disabled="!selectedCourseId || submitting"
      >
        {{ submitting ? 'Enrolling...' : 'Enrol' }}
      </button>
    </div>

    <!-- Enrolment list -->
    <table v-if="enrolments.length">
      <thead>
        <tr>
          <th>Course</th>
          <th>Status</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="e in enrolments" :key="e.id">
          <td>{{ e.course.name }}</td>
          <td>
            <span :class="'status-' + e.status">{{ e.status }}</span>
          </td>
          <td>{{ formatDate(e.created_at) }}</td>
          <td>
            <button @click="cancelEnrolment(e.id)" v-if="e.status === 'confirmed'">
              Cancel
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-else>No enrolments yet.</p>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// ─── Props (data passed from the parent/server) ───
const props = defineProps({
  student: { type: Object, required: true },
})

// ─── Reactive state (the ViewModel) ───
const enrolments = ref([])
const availableCourses = ref([])
const selectedCourseId = ref(null)
const submitting = ref(false)
const feedback = ref({ message: '', type: '' })

// ─── Computed properties ───
const isAlreadyEnrolled = (courseId) => {
  return enrolments.value.some(e => e.course.id === courseId)
}

const isCourseFull = (course) => {
  const confirmedCount = enrolments.value.filter(
    e => e.course.id === course.id && e.status === 'confirmed'
  ).length
  return confirmedCount >= course.max_capacity
}

// ─── Methods (actions the View can trigger) ───
const fetchEnrolments = async () => {
  const res = await fetch(`/api/students/${props.student.id}/enrolments`)
  const data = await res.json()
  enrolments.value = data.data
}

const fetchCourses = async () => {
  const res = await fetch('/api/courses')
  const data = await res.json()
  availableCourses.value = data.data
}

const enrol = async () => {
  submitting.value = true
  feedback.value = { message: '', type: '' }

  try {
    const res = await fetch('/api/enrolments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({
        student_id: props.student.id,
        course_id: selectedCourseId.value,
      }),
    })

    const data = await res.json()

    if (!res.ok) {
      feedback.value = { message: data.message, type: 'error' }
      return
    }

    enrolments.value.push(data.data)
    selectedCourseId.value = null
    feedback.value = { message: 'Enrolment confirmed.', type: 'success' }
  } finally {
    submitting.value = false
  }
}

const cancelEnrolment = async (enrolmentId) => {
  const res = await fetch(`/api/enrolments/${enrolmentId}`, { method: 'DELETE' })
  if (res.ok) {
    enrolments.value = enrolments.value.filter(e => e.id !== enrolmentId)
  }
}

const formatDate = (iso) => new Date(iso).toLocaleDateString('en-GB', {
  day: '2-digit', month: 'short', year: 'numeric'
})

// ─── Lifecycle: fetch data when component mounts ───
onMounted(() => {
  fetchEnrolments()
  fetchCourses()
})
</script>

How MVVM Binding Works Here

1. enrolments is a ref([]) — Vue tracks every change to this array.
2. The template uses v-for="e in enrolments". When enrolments.value.push(...) runs inside enrol(), Vue detects the mutation and re-renders the table row automatically.
3. selectedCourseId is bound to the <select> via v-model. When the user picks a course, Vue updates the variable and re-evaluates the :disabled bindings.
4. submitting disables the button while the API call is in flight — set to true, Vue adds the disabled attribute; set to false, Vue removes it.

The ViewModel never touches document.querySelector() or innerHTML. All DOM manipulation is declarative.

Alternative: Laravel Livewire (MVVM on the Server)

Laravel Livewire brings the MVVM reactivity model to the server side, eliminating the need for a separate JavaScript frontend:

<?php

// app/Livewire/EnrolmentManager.php
namespace App\Livewire;

use App\Models\Student;
use App\Models\Course;
use App\Models\Enrolment;
use App\Services\EnrolmentService;
use Livewire\Component;

class EnrolmentManager extends Component
{
    public Student $student;

    public ?int $selectedCourseId = null;

    public bool $submitting = false;

    public string $feedbackMessage = '';

    public string $feedbackType = '';

    public function enrol(EnrolmentService $service): void
    {
        $this->submitting = true;
        $this->feedbackMessage = '';

        if (!$this->selectedCourseId) {
            $this->feedbackMessage = 'Please select a course.';
            $this->feedbackType = 'error';
            $this->submitting = false;
            return;
        }

        try {
            $service->enrol(
                $this->student,
                Course::findOrFail($this->selectedCourseId)
            );
        } catch (\DomainException $e) {
            $this->feedbackMessage = $e->getMessage();
            $this->feedbackType = 'error';
            $this->submitting = false;
            return;
        }

        $this->selectedCourseId = null;
        $this->feedbackMessage = 'Enrolment confirmed.';
        $this->feedbackType = 'success';
        $this->submitting = false;
    }

    public function cancel(int $enrolmentId): void
    {
        Enrolment::findOrFail($enrolmentId)->delete();
    }

    public function render()
    {
        $enrolments = $this->student->enrolments()->with('course')->latest()->get();
        $courses = Course::withCount(['enrolments as confirmed_count' => fn ($q) =>
            $q->where('status', 'confirmed')
        ])->get();

        return view('livewire.enrolment-manager', [
            'enrolments' => $enrolments,
            'courses'    => $courses,
        ]);
    }
}

{{-- resources/views/livewire/enrolment-manager.blade.php --}}
<div>
    <h1>Enrolments for {{ $student->name }}</h1>

    @if ($feedbackMessage)
        <div class="{{ $feedbackType === 'error' ? 'alert-error' : 'alert-success' }}">
            {{ $feedbackMessage }}
        </div>
    @endif

    <div>
        <select wire:model="selectedCourseId">
            <option value="">Select a course...</option>
            @foreach ($courses as $course)
                <option value="{{ $course->id }}"
                    disabled="{{ $student->enrolments->contains('course_id', $course->id) || $course->confirmed_count >= $course->max_capacity }}">
                    {{ $course->name }} ({{ $course->code }})
                </option>
            @endforeach
        </select>

        <button wire:click="enrol" wire:loading.attr="disabled">
            <span wire:loading.remove>Enrol</span>
            <span wire:loading>Enrolling...</span>
        </button>
    </div>

    <table>
        <thead>
            <tr>
                <th>Course</th>
                <th>Status</th>
                <th>Date</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach ($enrolments as $enrolment)
                <tr>
                    <td>{{ $enrolment->course->name }}</td>
                    <td>{{ $enrolment->status }}</td>
                    <td>{{ $enrolment->created_at->format('d M Y') }}</td>
                    <td>
                        @if ($enrolment->status === 'confirmed')
                            <button wire:click="cancel({{ $enrolment->id }})">Cancel</button>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

Livewire tracks wire:model bindings and wire:click handlers, re-rendering the component on the server after each interaction and sending only the changed HTML to the browser. The mental model is MVVM — but the ViewModel lives on the server, not in the browser.

Apa Itu MVVM? Model, View, ViewModel

MVVM diperkenalkan oleh Microsoft untuk WPF/Silverlight dan kemudian diadopsi oleh framework JavaScript sisi klien. Perbedaan utama dari MVC adalah ViewModel: lapisan yang berada di antara Model dan View, mengekspos data dan perintah dengan cara yang dapat diikat langsung oleh View.

ViewModel tidak tahu tentang DOM. Ia mengekspos objek dan metode JavaScript/PHP biasa. Sistem data-binding pada framework menjaga View tetap sinkron secara otomatis.

MVVM dengan Backend PHP dan Frontend Vue.js

Backend PHP/Laravel menyajikan REST API (atau menggunakan Inertia.js untuk SPA berbasis server). Frontend Vue.js mengonsumsi API dan mengelola state UI melalui ViewModel.

Backend: Laravel API (Model tetap sama)

<?php

// routes/api.php
use App\Http\Controllers\Api\EnrolmentApiController;

Route::get('/students/{student}/enrolments', [EnrolmentApiController::class, 'index']);
Route::post('/enrolments', [EnrolmentApiController::class, 'store']);
Route::delete('/enrolments/{enrolment}', [EnrolmentApiController::class, 'destroy']);

<?php

// app/Http/Controllers/Api/EnrolmentApiController.php
namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Resources\EnrolmentResource;
use App\Models\Student;
use App\Models\Course;
use App\Services\EnrolmentService;
use DomainException;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;

class EnrolmentApiController extends Controller
{
    public function __construct(
        private EnrolmentService $enrolmentService
    ) {}

    public function store(Request $request): JsonResponse
    {
        $validated = $request->validate([
            'student_id' => 'required|exists:students,id',
            'course_id'  => 'required|exists:courses,id',
        ]);

        try {
            $enrolment = $this->enrolmentService->enrol(
                Student::findOrFail($validated['student_id']),
                Course::findOrFail($validated['course_id'])
            );
        } catch (DomainException $e) {
            return response()->json(['message' => $e->getMessage()], 422);
        }

        return (new EnrolmentResource($enrolment))
            ->response()
            ->setStatusCode(201);
    }

    public function index(Student $student): JsonResponse
    {
        $enrolments = $student->enrolments()->with('course')->latest()->get();

        return EnrolmentResource::collection($enrolments)->response();
    }
}

<?php

// app/Http/Resources/EnrolmentResource.php
namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class EnrolmentResource extends JsonResource
{
    /** @return array<string, mixed> */
    public function toArray(Request $request): array
    {
        return [
            'id'         => $this->id,
            'status'     => $this->status,
            'created_at' => $this->created_at->toIso8601String(),
            'course'     => [
                'id'   => $this->course->id,
                'name' => $this->course->name,
                'code' => $this->course->code,
            ],
        ];
    }
}

Backend menggunakan EnrolmentService yang persis sama dari versi MVC. Satu-satunya perbedaan adalah API controller JSON dan kelas API resource. Model tidak berubah.

Frontend: Vue 3 ViewModel (Composition API)

Komponen Vue bertindak sebagai ViewModel. Ia menyimpan state reaktif (ref, reactive), mengekspos computed property, dan mendefinisikan metode yang diikat oleh template.

<template>
  <div class="enrolment-manager">
    <h1>Pendaftaran untuk {{ student.name }}</h1>

    <!-- Feedback sukses / error -->
    <div v-if="feedback.message" :class="feedback.type">
      {{ feedback.message }}
    </div>

    <!-- Pemilih mata kuliah -->
    <div class="enrolment-form">
      <select v-model="selectedCourseId">
        <option :value="null" disabled>Pilih mata kuliah...</option>
        <option
          v-for="course in availableCourses"
          :key="course.id"
          :value="course.id"
          :disabled="isAlreadyEnrolled(course.id) || isCourseFull(course)"
        >
          {{ course.name }} ({{ course.code }})
          <template v-if="isCourseFull(course)">— Penuh</template>
          <template v-else-if="isAlreadyEnrolled(course.id)">— Terdaftar</template>
        </option>
      </select>

      <button
        @click="enrol"
        :disabled="!selectedCourseId || submitting"
      >
        {{ submitting ? 'Mendaftarkan...' : 'Daftar' }}
      </button>
    </div>

    <!-- Daftar pendaftaran -->
    <table v-if="enrolments.length">
      <thead>
        <tr>
          <th>Mata Kuliah</th>
          <th>Status</th>
          <th>Tanggal</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="e in enrolments" :key="e.id">
          <td>{{ e.course.name }}</td>
          <td>
            <span :class="'status-' + e.status">{{ e.status }}</span>
          </td>
          <td>{{ formatDate(e.created_at) }}</td>
          <td>
            <button @click="cancelEnrolment(e.id)" v-if="e.status === 'confirmed'">
              Batal
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-else>Belum ada pendaftaran.</p>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// ─── Props (data yang diteruskan dari parent/server) ───
const props = defineProps({
  student: { type: Object, required: true },
})

// ─── State reaktif (ViewModel) ───
const enrolments = ref([])
const availableCourses = ref([])
const selectedCourseId = ref(null)
const submitting = ref(false)
const feedback = ref({ message: '', type: '' })

// ─── Computed properties ───
const isAlreadyEnrolled = (courseId) => {
  return enrolments.value.some(e => e.course.id === courseId)
}

const isCourseFull = (course) => {
  const confirmedCount = enrolments.value.filter(
    e => e.course.id === course.id && e.status === 'confirmed'
  ).length
  return confirmedCount >= course.max_capacity
}

// ─── Metode (aksi yang dapat dipicu oleh View) ───
const fetchEnrolments = async () => {
  const res = await fetch(`/api/students/${props.student.id}/enrolments`)
  const data = await res.json()
  enrolments.value = data.data
}

const fetchCourses = async () => {
  const res = await fetch('/api/courses')
  const data = await res.json()
  availableCourses.value = data.data
}

const enrol = async () => {
  submitting.value = true
  feedback.value = { message: '', type: '' }

  try {
    const res = await fetch('/api/enrolments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({
        student_id: props.student.id,
        course_id: selectedCourseId.value,
      }),
    })

    const data = await res.json()

    if (!res.ok) {
      feedback.value = { message: data.message, type: 'error' }
      return
    }

    enrolments.value.push(data.data)
    selectedCourseId.value = null
    feedback.value = { message: 'Pendaftaran dikonfirmasi.', type: 'success' }
  } finally {
    submitting.value = false
  }
}

const cancelEnrolment = async (enrolmentId) => {
  const res = await fetch(`/api/enrolments/${enrolmentId}`, { method: 'DELETE' })
  if (res.ok) {
    enrolments.value = enrolments.value.filter(e => e.id !== enrolmentId)
  }
}

const formatDate = (iso) => new Date(iso).toLocaleDateString('id-ID', {
  day: '2-digit', month: 'short', year: 'numeric'
})

// ─── Lifecycle: ambil data saat komponen dimuat ───
onMounted(() => {
  fetchEnrolments()
  fetchCourses()
})
</script>

Bagaimana MVVM Binding Bekerja Di Sini

1. enrolments adalah ref([]): Vue melacak setiap perubahan pada array ini.
2. Template menggunakan v-for="e in enrolments". Ketika enrolments.value.push(...) berjalan di dalam enrol(), Vue mendeteksi mutasi dan me-render ulang baris tabel secara otomatis.
3. selectedCourseId diikat ke <select> melalui v-model. Ketika pengguna memilih mata kuliah, Vue memperbarui variabel dan mengevaluasi ulang binding :disabled.
4. submitting menonaktifkan tombol saat panggilan API sedang berlangsung: diatur ke true, Vue menambahkan atribut disabled; diatur ke false, Vue menghapusnya.

ViewModel tidak pernah menyentuh document.querySelector() atau innerHTML. Semua manipulasi DOM bersifat deklaratif.

Alternatif: Laravel Livewire (MVVM di Server)

Laravel Livewire membawa model reaktivitas MVVM ke sisi server, menghilangkan kebutuhan frontend JavaScript terpisah:

<?php

// app/Livewire/EnrolmentManager.php
namespace App\Livewire;

use App\Models\Student;
use App\Models\Course;
use App\Models\Enrolment;
use App\Services\EnrolmentService;
use Livewire\Component;

class EnrolmentManager extends Component
{
    public Student $student;

    public ?int $selectedCourseId = null;

    public bool $submitting = false;

    public string $feedbackMessage = '';

    public string $feedbackType = '';

    public function enrol(EnrolmentService $service): void
    {
        $this->submitting = true;
        $this->feedbackMessage = '';

        if (!$this->selectedCourseId) {
            $this->feedbackMessage = 'Silakan pilih mata kuliah.';
            $this->feedbackType = 'error';
            $this->submitting = false;
            return;
        }

        try {
            $service->enrol(
                $this->student,
                Course::findOrFail($this->selectedCourseId)
            );
        } catch (\DomainException $e) {
            $this->feedbackMessage = $e->getMessage();
            $this->feedbackType = 'error';
            $this->submitting = false;
            return;
        }

        $this->selectedCourseId = null;
        $this->feedbackMessage = 'Pendaftaran dikonfirmasi.';
        $this->feedbackType = 'success';
        $this->submitting = false;
    }

    public function cancel(int $enrolmentId): void
    {
        Enrolment::findOrFail($enrolmentId)->delete();
    }

    public function render()
    {
        $enrolments = $this->student->enrolments()->with('course')->latest()->get();
        $courses = Course::withCount(['enrolments as confirmed_count' => fn ($q) =>
            $q->where('status', 'confirmed')
        ])->get();

        return view('livewire.enrolment-manager', [
            'enrolments' => $enrolments,
            'courses'    => $courses,
        ]);
    }
}