Laravel Auth dan CRUD Multi Level User

Published: 30 Mei 2025 | Author: Ezza Addini

Praktikum ini bertujuan agar mahasiswa dapat memahami terkait auth dan menjalankan CRUD dalam Laravel.

Tools yang digunakan:

  • Computer / Laptop
  • XAMPP: Web server lokal untuk menjalankan Apache dan MySQL.
  • Visual Studio Code: Sebagai code editor.
  • Composer, Git, Node JS, NPM: Untuk manajemen paket dan dependensi.
Langkah-Langkah Praktikum
  1. Buat project baru: composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist
    Install Laravel
    Gambar 1: Menjalankan perintah untuk membuat project Laravel baru menggunakan Composer.
  2. Konfigurasi database:
    Konfigurasi database
    Gambar 2: Konfigurasi koneksi database di file .env agar Laravel bisa terhubung ke MySQL.
  3. Install Laravel UI: composer require laravel/ui
    Laravel UI
    Gambar 3: Instalasi package laravel/ui yang digunakan untuk membuat scaffolding auth.
  4. Generate Auth: php artisan ui bootstrap --auth
    Auth Bootstrap
    Gambar 4: Generate auth menggunakan Bootstrap UI, termasuk halaman login dan register.
  5. Compile Assets: npm install && npm run dev
    Compile assets
    Gambar 5: Proses menjalankan `npm install && npm run dev` untuk compile file asset auth.
  6. Struktur Auth:
    Struktur auth
    Gambar 6: Struktur folder controller dan view setelah auth berhasil di-generate.
  7. Halaman Login:
    Login
    Gambar 7: Tampilan halaman login default Laravel setelah proses php artisan ui bootstrap --auth.
  8. Halaman Register:
    Register
    Gambar 8: Tampilan halaman register Laravel.
  9. Migrasi Tambahan: Edit tabel Users dan lakukan migrasi database menggunakan command php artisan migrate.
    Tabel users
    Gambar 9: Struktur tabel `users` setelah ditambahkan kolom `username`, `level`, dan `status` melalui migration.
  10. Folder Migration: Gunakan command php artisan make:migration costum_table_users.
    Folder migration
    Gambar 10: Folder migration berisi file untuk menambahkan kolom pada tabel users.
  11. Seeder Admin: Gunakan command php artisan make:seeder AdminSeeder untuk secara otomatis file AdminSeeder.php akan dibuat pada folder database/Seeder.
    Seeding user
    Gambar 11: Proses seeding untuk menambahkan user admin melalui `AdminSeeder`.
    Seeding user
    Gambar 12: Seeding berhasil, user Admin berhasil ditambahkan.
  12. Login Admin:
    Login Admin
    Gambar 13: Tampilan login dengan akun admin hasil seeding.
  13. SB Admin 2: Atur tampilan UI web dengan menggunakan template Bootstrap dari SB Admin 2.
    SB Admin login
    Gambar 14: Tampilan login setelah menggunakan template Bootstrap.
  14. Layout Global: Kustomisasi tampilan konten utama dalam halaman views/main.blade.php
    Main layout
    Gambar 15: Kustomisasi kode `main.blade.php`.
  15. Layout Sidebar: Kustomisasi tampilan sidebar dalam halaman views/sidebar.blade.php
    Main layout
    Gambar 16: Kustomisasi kode `sidebar.blade.php`.
  16. Layout Topbar: Kustomisasi tampilan topbar dalam halaman views/topbar.blade.php
    Main layout
    Gambar 17: Kustomisasi kode `topbar.blade.php`.
  17. Penggunaan layouts main.blade.php: Tambahkan kode berikut dalam halaman views/home.blade.php
    Main layout
    Gambar 18: Kustomisasi kode `home.blade.php`.
  18. Tampilan akhir web:
    Alert sukses
    Gambar 19: Web berhasil dikustomisasi.
Penutup

Praktikum ini memberikan pemahaman tentang bagaimana menjalankan web dengan framework, melakukan migrasi data, serta kustomisasi tampilan web menggunakan template dari Bootstrap.

Kembali ke Daftar Laprak