Report 4 — Laravel UI Bootstrap dan Templating

Pemrograman Web Semester 4 Putri Balqis Afradinata

I. Tujuan Praktikum

  • Memahami proses pembuatan project baru menggunakan kerangka kerja Laravel 12.
  • Mampu melakukan konfigurasi environment file (.env) untuk menghubungkan aplikasi dengan database MySQL.
  • Mengimplementasikan fitur User Authentication secara instan melalui package laravel/ui berbasis Bootstrap.
  • Melakukan kustomisasi struktur database melalui skema rancangan file Laravel Migration.
  • Memahami pengisian record data awal otomatis ke dalam database menggunakan Database Seeder.
  • Menerapkan teknik pembagian komponen tampilan (Slicing View) pada template dashboard SB Admin 2 menggunakan Blade Template Engine.
  • Membuat modul manajemen data pengguna (CRUD Users) secara terintegrasi memanfaatkan Resource Controller.

II. Dasar Teori

Laravel 12 yaitu framework pengembangan web berbasis bahasa PHP modern yang menggunakan pola arsitektur MVC (Model-View-Controller). Pola ini memisahkan logika pemrosesan data (Model), manajemen tampilan antarmuka (View), dan pengendali alur aplikasi (Controller), sehingga mempermudah kolaborasi kode dalam skala besar.

Sistem autentikasi (*User Authentication*) sangat penting digunakan untuk membatasi hak akses halaman admin di sebuah sistem informasi. Melalui package laravel/ui, pengembang dapat memasang fondasi keamanan siap pakai berbasis framework CSS Bootstrap. Hal ini memangkas waktu pengerjaan form login, registrasi, enkripsi kata sandi, hingga penanganan otentikasi session user.

Blade merupakan mesin template (*Template Engine*) internal bawaan Laravel yang menawarkan fitur modularitas layout yang efisien. Dengan konsep *slicing layout*, baris kode HTML global yang besar dapat dipecah secara rapi menjadi sub-views statis (seperti sidebar dan topbar) menggunakan perintah direktif @include(), sedangkan area dinamis ditampung menggunakan tag direktif @yield() atau @extends(). Hal ini mendukung prinsip DRY (*Don't Repeat Yourself*).

Database Migration berperan layaknya pengontrol versi (*version control*) bagi skema database, memungkinkan pembuatan struktur tabel didefinisikan secara deklaratif lewat kode PHP tanpa perlu menyentuh SQL mentah. Sementara itu, Database Seeder melengkapinya dengan menyediakan mekanisme otomasi injeksi record data atau akun pengurus (Administrator) awal ke dalam tabel database.

III. Langkah-Langkah Praktikum

  1. Membuat Project Laravel (Laravel-sisfo)
    Masuk ke direktori workspace lokal Anda (misal di folder htdocs), jalankan baris perintah Composer berikut untuk mengunduh dan menciptakan struktur project baru. (Catatan: Di Laravel 12, penulisan sintaks dibuat ringkas tanpa perlu lagi mengunci versi seperti versi terdahulu): 
    composer create-project laravel/laravel laravel-sisfo

    Setelah proses selesai, masuklah ke folder project dengan mengetikkan perintah cd laravel-sisfo. Jalankan server lokal bawaan lewat terminal: 

    php artisan serve
  2. Konfigurasi Database
    Buat database baru bernama laravel_sisfo di phpMyAdmin. Selanjutnya, kita buka file konfigurasi lingkungan lingkungan .env yang berada di root direktori project, lalu sesuaikan konfigurasi koneksi pangkalan datanya: 
    DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_sisfo
DB_USERNAME=root
DB_PASSWORD=
  3. Instalasi Package Laravel UI dan Authentication
    Instal package otentikasi eksternal resmi laravel/ui menggunakan package manager Composer: 
    composer require laravel/ui

    Setelah terunduh, buatlah komponen scaffolding autentikasi bawaan yang terintegrasi penuh dengan kerangka frontend Bootstrap melalui perintah Artisan: 

    php artisan ui bootstrap --auth
  4. Kompilasi Frontend pada praktikum ini Menggunakan Vite (Penyesuaian Laravel 12)
    Berbeda dengan Laravel lama yang mengandalkan Laravel Mix, Laravel 12 ini secara default menggunakan bundler modern **Vite**. Jalankan perintah npm berikut untuk memasang dependensi frontend serta meluncurkan server kompilasi aset secara dinamis (*Hot Reload*): 
    npm install && npm run dev
  5. Kustomisasi Struktur File Migration Users
    Buka berkas file migrasi bawaan pembuatan tabel user yang berada pada direktori folder database/migrations/xxxx_xx_xx_create_users_table.php. Sesuai panduan modul, modifikasi method up() dengan menambahkan kolom baru: username, level, dan status. 
    Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('username')->unique(); // Tambahan kolom username
    $table->string('email')->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('password');
    $table->string('level'); // Tambahan kolom level
    $table->enum('status', ['ACTIVE', 'INACTIVE'])->default('ACTIVE'); // Tambahan kolom status
    $table->rememberToken();
    $table->timestamps();
});

    Setelah file disimpan, jalankan migrasi database ke dalam MySQL lewat terminal:

    php artisan migrate
  6. Membuat Data Seeder Administrator
    Gunakan perintah artisan untuk membuat file seeder pengisian record data pengguna default sistem otomatis: 
    php artisan make:seeder UserSeeder

    Buka berkas file file hasil generate di folder database/seeders/UserSeeder.php, kemudian tuliskan baris instansiasi objek model User di dalam method run(): 

    public function run(): void
{
    $admin = new \App\Models\User;
    $admin->username = "admin";
    $admin->name = "Administrator";
    $admin->email = "admin@sisfo.com";
    $admin->level = "ADMIN";
    $admin->password = \Hash::make("12345678");
    $admin->status = "ACTIVE";
    $admin->save();

    $this->command->info("User Admin berhasil ditambahkan!");
}

    Buka berkas file utama pengatur seeder database/seeders/DatabaseSeeder.php, daftarkan kelas seeder yang baru saja Anda buat: 

    public function run(): void
{
    $this->call([
        UserSeeder::class,
    ]);
}

    Jalankan perintah pengisian database lewat jendela terminal:

    php artisan db:seed
  7. Kustomisasi Autentikasi Menggunakan Username
    Secara *default*, scaffolding Laravel menggunakan alamat email untuk verifikasi login. Supaya sistem berganti menggunakan *username*, buka berkas file pengatur kontroler login pada lokasi app/Http/Controllers/Auth/LoginController.php, lalu tambahkan method berikut: 
    public function username()
{
    return 'username';
}

    Buka file tampilan form login resources/views/auth/login.blade.php, carilah baris input teks email dan ubah seluruh atribut komponen name, id, serta error-handling-nya menjadi variabel username.

  8. Slicing Layout Menggunakan Template Dashboard SB Admin 2
    Ekstrak file aset template SB Admin 2 dan salin seluruh folder pustaka pendukung (seperti folder css, js, vendor) ke dalam direktori publik project Anda: public/sbadmin/.

    Buat folder baru bernama layouts di dalam direktori resources/views/, lalu pecah struktur layout halaman global menjadi tiga bagian file:

    1. sidebar.blade.php (Menampung elemen menu navigasi vertikal)
    2. topbar.blade.php (Menampung elemen navigasi atas dan menu profil pengguna)
    3. main.blade.php (Bertindak sebagai kerangka induk utama yang menyatukan komponen layout)

    Berikut adalah kerangka utama dari file file master induk layout main.blade.php:

    


    
    Dashboard - Sistem Informasi Sekolah
    
    


    
    
        @include('layouts.sidebar')
        
    
            
    
                @include('layouts.topbar')
                
    
                    @yield('content')
  9. Membuat UserController Berbasis Resource
    Jalankan instruksi pembuatan berkas kontroler manajemen pengguna baru bertipe resource yang otomatis menyediakan method kerangka CRUD terstruktur: 
    php artisan make:controller UserController --resource

    Buka rute pemanggilan url pada file routes/web.php, daftarkan rute resource dan batasi hak aksesnya dengan menambahkan baris instruksi middleware keamanan login:

    use App\Http\Controllers\UserController;

Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Route::middleware(['auth'])->group(function () {
    Route::resource('users', UserController::class);
});
  10. Melengkapi Fungsi CRUD di UserController
    Buka file file kontroler app/Http/Controllers/UserController.php, isikan kode logika manipulasi database pada method CRUD internal sebagai berikut: 
    public function index()
{
    $users = \App\Models\User::all();
    return view('users.index', compact('users'));
}

public function create()
{
    return view('users.create');
}

public function store(Request $request)
{
    $request->validate([
        'username' => 'required|unique:users',
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8',
        'level' => 'required',
    ]);

    $user = new \App\Models\User;
    $user->username = $request->username;
    $user->name = $request->name;
    $user->email = $request->email;
    $user->level = $request->level;
    $user->password = \Hash::make($request->password);
    $user->status = "ACTIVE";
    $user->save();

    return redirect()->route('users.index')->with('status', 'User Berhasil Ditambahkan');
}

public function edit($id)
{
    $user = \App\Models\User::findOrFail($id);
    return view('users.edit', compact('user'));
}

public function update(Request $request, $id)
{
    $user = \App\Models\User::findOrFail($id);
    $user->name = $request->name;
    $user->level = $request->level;
    $user->status = $request->status;
    if($request->password) {
        $user->password = \Hash::make($request->password);
    }
    $user->save();
    return redirect()->route('users.index')->with('status', 'User Berhasil Diupdate');
}

public function destroy($id)
{
    $user = \App\Models\User::findOrFail($id);
    $user->delete();
    return redirect()->route('users.index')->with('status', 'User Berhasil Dihapus');
}
  11. Membangun Berkas File View CRUD Users Management
    Buat folder direktori baru bernama users di dalam lokasi resources/views/. Ciptakan 3 berkas file utama tampilan sebagai berikut:

    1. Berkas Halaman Tabel List Data (index.blade.php) 
    @extends('layouts.main')

@section('content')

    
    
    
        
    Manajemen Data Pengguna (Users)
    
    
    
    
    
        @if(session('status'))
            
    {{ session('status') }}
    
        @endif
        Tambah Pengguna Baru
        
                @foreach($users as $user)
                
                @endforeach
            
    
            
                
    
                    Username
                    Nama Lengkap
                    Email
                    Akses Level
                    Aksi
                
    
                
            
    
                    {{ $user->username }}
                    {{ $user->name }}
                    {{ $user->email }}
                    {{ $user->level }}
                    
                        Edit
                        
    
                            @csrf @method('DELETE')
                            
                        
    
                        		
                
    
        
    
    
    

    
@endsection
    2. Berkas Halaman Input Form Tambah Data (create.blade.php) 
    @extends('layouts.main')

@section('content')

    
    
    
        
    Tambah User Baru
    
    
    
    
    
        
    
            @csrf
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
            Kembali
        
    
    
    

    
@endsection
    3. Berkas Halaman Input Form Edit Data (edit.blade.php) 
    @extends('layouts.main')

@section('content')

    
    
    
        
    Edit Profil User
    
    
    
    
    
        
    
            @csrf @method('PUT')
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
    
                
                
            
    
            
            Batal
        
    
    
    

    
@endsection

IV. Hasil dan Pembahasan

Berdasarkan seluruh alur pengerjaan praktikum di atas, pengerjaan sistem otentikasi login aplikasi berbasis **Laravel 12** berhasil dibangun dengan menggunakan pustaka eksternal laravel/ui Bootstrap. Sistem keamanan dasar seperti validasi isian input formulir, enkripsi kata sandi menggunakan pustaka bawaan `Hash::make()`, serta pembatasan proteksi rute admin via *middleware auth* telah berfungsi dengan baik tanpa ada kegagalan error.

Kustomisasi pada rancangan file *migration* berhasil menambahkan kolom `username`, `level`, dan `status` ke dalam skema tabel bawaan (users). Melalui pembuatan file kontroler bertipe resource (`UserController`) yang dihubungkan dengan *Resource Routing* pada file web, siklus manipulasi pangkalan data menggunakan fungsionalitas model *Eloquent ORM* (CRUD data user) telah berhasil dikerjakan dan diuji coba melalui antarmuka web browser.

Penerapan modularisasi komponen view template dashboard **SB Admin 2** menggunakan arsitektur Blade engine (Slicing View) berhasil diimplementasikan secara terstruktur. Dengan membagi elemen halaman menjadi berkas layout sub-view statis terpisah seperti `sidebar.blade.php` dan `topbar.blade.php`, waktu pengelolaan serta pemeliharaan baris kode visual aplikasi dapat dilakukan jauh lebih cepat tanpa menuliskan kode yang berulang.

V. Kesimpulan

Berdasarkan rangkaian pengerjaan modul Report 4 ini, dapat diambil kesimpulan bahwa framework Laravel 12 menyediakan ekosistem perkakas pengembangan web modern berskala besar yang sangat handal, efisien, dan juga aman.

Penggunaan package laravel/ui Bootstrap terbukti mempermudah percepatan pembuatan sistem proteksi otentikasi siap pakai secara teratur. Dipadukan bersama teknik pemotongan layout (*Slicing View*) berbasis keunggulan mesin template Blade, pengembang mampu mengorganisasikan file frontend aplikasi secara rapi, dinamis, serta sangat mudah untuk dikembangkan di kemudian hari.

🔗 Lihat Repository GitHub