Muhammad Hafiz

Laravel AUTH, CRUD Multi Level User

1. Pertama buat Project Laravel dengan Nama Laravel-sisfo terlebih dahulu

C:\xampp\htdocs\laravel
                        

cd C:\xampp\htdocs\laravel
                        

composer global require "laravel/installer"
                        

 laravel new laravel-sisfo
                        

composer create-project laravel/laravel=^12.0 laravel-sisfo --prefer-dist
                        

2. Setelah itu akan ada pada folder Laravel-nya yaitu folder yang kita buat tadi dengan nama Laravel-sisfo

3. Lalu masuk ke folder Laravel-sisfo

4. Install package Laravel/ui dengan cara buka terminal cmder kemudian ketikkan perintah berikut ini.

composer require laravel/ui
                

5. Implementasi Authentication dengan Bootstrap

6. Kemudian jalankan kode berikut ini

npm install && npm run dev
                

Komponen yang Di-generate

Frontend Views

• resources/views/auth/login.blade.php
• resources/views/auth/register.blade.php
• resources/views/auth/passwords/email.blade.php
• resources/views/auth/passwords/reset.blade.php

Backend Controllers

• app/Http/Controllers/Auth/LoginController.php
• app/Http/Controllers/Auth/RegisterController.php
• app/Http/Controllers/Auth/ForgotPasswordController.php
• app/Http/Controllers/Auth/ResetPasswordController.php

7. Proses Migration Database untuk Authentication

Menjalankan Perintah Migration

php artisan migrate
                

Berikut adalah struktur database yang berhasil dibuat

Berikut adalah tampilan awal dari laravel dengan mengakses link yang tersedia http://127.0.0.1:8000

8. Akses url http://127.0.0.1:8000/login pada browser maka akan tampil halaman login seperi berikut.

9. Akses url http://127.0.0.1:8000/register pada browser maka akan tampil halaman register seperi berikut.

10. Selanjutnya silahkan coba registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut.

Kita dapat mengganti {{ Auth::user()->email }} untuk menampilkan Email pengguna (admin54321@gmail.com) di pojok kanan navbar

Berikut adalah tapilannya

11. Laravel menyediakan tabel users dengan struktur default:

Selanjutnya silahkan coba registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut.

Jalankan perintah berikut di terminal:

php artisan make:migration custom_table_user
                

Ketika tabel berhasil dibuat, akan muncul seperti gambar dibawah ini

File akan dibuat di database/migrations/ dengan format timestamp.

Tips Tambahan

• Gunakan php artisan migrate:fresh jika perlu mereset database
• Untuk environment production, buat backup database sebelum migrate
• Tambahkan index untuk field yang sering di-query

12. Kemudian jalankan perintah php artisan migrate, jika berhasil maka struktur table users telah berubah sesuai dengan kebutuhan aplikasi.

13. Setelah berhasil melakukan costum table users selanjutnya membuat user menggunakan fitur seeding pada Laravel, buat seeder dengan nama AdminSeeder dengan perintah :

13. Kemudian bukan file yang diakhiri costum_table_users.php dan isikan dengan kode program berikut.

php artisan make:seeder AdminSeeder
                

Maka secara otomatis file AdminSeeder.php akan dibuat pada folder database/seeders/.

14. Kemudian buka file tersebut dan buat akun admin seperti kode program berikut.

15. Lalu jalankan AdminSeeder.php di laravel

16. Jika sudah berhasil menambahkan user maka dapat login ke aplikasi menggunakan akun tersebut.

Berikut adalah tampilan setlah berhasi login

16. Langkah selannjutnya kita akan konfigurasi tampilan aplikasi menggunakan template SB Admin 2 dengan framework bootstrap

Langkah Mendownload Template

1. Kunjungi https://startbootstrap.com/theme/sb-admin-2
2. Klik tombol "Download" untuk mendapatkan versi terbaru

17. Ekstrak file zip yang didownload

18. Buat folder pada folder public project Laravel dengan nama sbadmin

19. copy paste kan seluruh asset template sbadmin kedalam folder tersebut

20. Buka file app.blade.php pada folder view/layouts

kemudian ganti dengan kode program dibawah ini:

Sehingga tampilan login akan berubah seperti gambar dibawah ini.

21. Selanjutnya membuat layout global yang mana layout ini akan digunakan sebagai layout utama aplikasi dan view-view lain akan mengambil resource disini, karena app.blade.php sudah digunakan untuk view login, maka buat sebuah file baru dengan nama main.blade.php di dalam folder resources/views/layouts

Tujuan File main.blade.php:

File ini akan berisi struktur HTML dasar aplikasi seperti header, sidebar, dan footer, serta menyediakan tempat untuk menyisipkan konten dinamis dari view lainnya menggunakan directive @yield. Dengan demikian, semua view yang mewarisi layout ini tidak perlu menuliskan ulang struktur HTML yang sama.

Lalu isikan dengan kode program berikut ini.

• @yield('title'): Menyediakan tempat bagi halaman anak untuk menentukan judul halaman.
• @include('layouts.header'): Menyisipkan file header.blade.php dari folder layouts yang berisi bagian atas halaman (navbar, dll).
• @include('layouts.sidebar'): Menyisipkan file sidebar.
• @yield('content'): Area utama di mana isi dari setiap halaman akan ditampilkan.
• @include('layouts.footer'): Menyisipkan footer di bagian bawah halaman.

22. Kemudian kita akan membuat file khusus yang digunakan untuk menampilkan navigasi samping (sidebar) pada aplikasi. Sidebar berfungsi sebagai menu utama untuk berpindah antar halaman seperti Dashboard, Data Mahasiswa, dan Logout. Komponen ini akan di-include di dalam layout utama main.blade.php agar tampil secara konsisten di semua halaman.

Buat file baru dengan nama sidebar.blade.php di dalam folder resources/views/layouts. Struktur direktori menjadi seperti berikut:

Isi File sidebar.blade.php:

23. Pada langkah ini, kita akan membuat file yang digunakan untuk menampilkan bagian atas halaman atau yang biasa disebut dengan Topbar. Topbar berfungsi untuk menampilkan judul halaman, nama pengguna yang sedang login, serta bisa juga berisi notifikasi, tombol menu, dan sebagainya. File ini akan di-include di layout utama main.blade.php agar muncul di setiap halaman setelah login.

Buat file baru dengan nama topbar.blade.php di dalam folder resources/views/layouts. Struktur direktori menjadi seperti berikut:

Isi File topbar.blade.php:

Cara Penggunaan Layout main.blade.php:

Setelah kita membuat layout global main.blade.php, langkah selanjutnya adalah menggunakan layout tersebut pada halaman view tertentu, misalnya pada halaman home.blade.php. Dengan menggunakan layout ini, halaman home akan secara otomatis mewarisi struktur HTML dari main.blade.php dan hanya perlu menyisipkan bagian yang berbeda seperti judul dan konten.

Penjelasan Kode:

• @extends('layouts.main'): Directive ini menandakan bahwa file home.blade.php menggunakan layout dari layouts/main.blade.php. Semua struktur HTML yang ada di dalam main.blade.php akan digunakan sebagai kerangka halaman ini.
• @section('judul')...@endsection: Digunakan untuk mengisi bagian @yield('judul') yang ada di dalam main.blade.php. Umumnya digunakan untuk judul halaman.
• @section('konten')...@endsection: Digunakan untuk mengisi bagian @yield('konten') pada layout. Inilah konten utama dari halaman.

Jika konfigurasi layout berhasil maka akan tampil seperti gambar berikut.

Membuat CRUD (Create, Read, Update dan Delete) Sederhana OOP (Object Oriented Programming) Menggunakan PHP & MYSQL

Konvigurasi Laravel