Laravel UI, Bootstrap & Templating

1. Membuat Project Laravel Baru

Ada beberapa cara yang dapat digunakan untuk membuat project baru Laravel, yaitu dengan cara install installer Laravel secara global atau install menggunakan composer.

Global Installer Laravel

Pertama buat folder / workspace terlebih dahulu di dalam folder mana, lalu eksplorasi dengan menggunakan Visual Studio Code / editor dan gunakan terminal / command prompt dan masuk ke direktori tersebut (contoh: C:\xampp\htdocs\laravel). Selanjutnya bisa lakukan workaround untuk membuat project baru. Untuk membuat project baru, cukup jalankan perintah berikut:

Untuk menjalankan project dapat menggunakan perintah seperti berikut ini:

Gambar 1. Tampilan Home Laravel

2. Konfigurasi Database

Buka file .env yang ada di root project, lalu konfigurasi database seperti berikut ini:

Gambar 2. Konfigurasi Database pada File .env

3. User Authentication

User authentication pada Laravel perlu studi kasus ini menggunakan fitur authentication bawaan Laravel.

Install Package Laravel/UI

Ketikkan terminal perintah-perintah berikut ini:

Jika berhasil maka akan tampil seperti gambar berikut ini:

Gambar 3. Instalasi Package Laravel/UI

Authentication Scaffolding

Ketikkan perintah berikut pada terminal / command prompt:

Jika berhasil maka akan tampil seperti gambar berikut ini:

Gambar 4. Authentication Scaffolding Berhasil

Install Compile

Ketikkan perintah berikut pada terminal / command prompt. Perintah ini akan men-generate asset seperti file-file yang dibutuhkan untuk authentication, seperti halaman login, register, dan forgot password, serta Logout di generate controller dan report, gambar seperti berikut:

Gambar 5. Proses npm install && npm run dev

Controllers yang Dihasilkan

Gambar 6. Folder Controllers yang Dihasilkan Scaffolding

Views yang Dihasilkan

Gambar 7. Folder Views Auth yang Dihasilkan Scaffolding

Migration

Ketikkan perintah php artisan migrate maka Laravel akan membuat migration table users sesuai schema yang dibutuhkan. Jika migration berhasil maka akan tampil seperti gambar berikut:

Gambar 8. Hasil php artisan migrate

Halaman Login

Akses http://127.0.0.1:8000/login pada browser, maka akan tampil halaman login seperti berikut:

Gambar 9. Halaman Login Authentication

Halaman Register

Akses http://127.0.0.1:8000/register pada browser, maka akan tampil halaman register seperti berikut:

Gambar 10. Halaman Register Authentication

Setelah berhasil melakukan registrasi dan lakukan login ke aplikasi, jika berhasil maka akan tampil seperti gambar berikut ini:

Gambar 11. Halaman Dashboard

Custom Table Users

Authentication Laravel secara otomatis akan mengatur title Users yang berisi beberapa informasi dasar users. Berikut struktur tabel users:

Gambar 12. Struktur Table Users

Dari tabel tersebut, ada beberapa field yang perlu ditambahkan ataupun diubah sesuai kebutuhan field data, maka perlu membuat migration baru atau custom migration. Jalankan perintah berikut:

Selanjutnya buka file yang dibuat tadi, buka file table_users.php seperti gambar berikut:

Gambar 13. Folder Migration

Gambar 14. Kode Migration Custom Table Users

Kemudian jalankan perintah php artisan migrate, jika berhasil maka struktur tabel users telah berubah sesuai dengan kolom yang ditambahkan:

Gambar 15. Contoh Data Table Users

Seeding User

Setelah berhasil melakukan custom tabel users, selanjutnya kita perlu menambahkan user menggunakan fitur seeding pada Laravel. Buat seeder dengan nama AdminSeeder dengan perintah berikut:

maka secara otomatis file AdminSeeder akan dibuat pada folder database/Seeder. Kemudian buka file tersebut dan isi seeder dengan kode AdminSeeder sesuai program berikut:

Gambar 16. Kode AdminSeeder

Setelah itu jalankan seeder AdminSeeder dengan perintah berikut:

Gambar 17. Seeding User Berhasil

Jika berhasil maka coba login menggunakan user data admin yang telah dibuat. Tampilan aplikasi menggunakan user data admin:

Gambar 18. Hasil Login Menggunakan User Data

Halaman Login Aplikasi

Buka file login.blade.php pada folder view/layouts kemudian ganti dengan kode program dibawah ini:

Gambar 19. Kode Halaman Login (Bagian 1)

Gambar 20. Kode Halaman Login (Bagian 2)

Sehingga tampilan halaman login akan berubah seperti gambar dibawah ini:

Gambar 21. Tampilan Halaman Login

Layout Global

Selanjutnya kita membuat layout global yang mana layout ini akan digunakan sebagai layout utama aplikasi dari view-view. Kita akan menggunakan resource views, bukan app.blade.php namun diganti untuk setiap halaman via @include partial ke dalam folder tersebut. Selanjutnya @include pada tiap halaman akan meload judul dan tiap konten dari view yang menggunakan layouts main.blade.php dengan perintah @yield('title') dan @yield('content').

Buka file main.blade.php pada folder view/layouts kemudian isi dengan kode program berikut:

Gambar 22. Kode main.blade.php (Bagian 1)

Gambar 23. Kode main.blade.php (Bagian 2)

Gambar 24. Kode main.blade.php (Bagian 3)

Sidebar

Buat file sidebar.blade.php pada folder layouts dengan nama sidebar.blade.php dan isi dengan kode program berikut:

Gambar 25. Kode sidebar.blade.php

Gambar 26. Kode Sidebar (Lanjutan)

Topbar

Buat file pada di folder layouts dengan nama topbar.blade.php dan isi dengan kode program berikut:

Gambar 27. Kode topbar.blade.php

Cara Penggunaan Layouts main.blade.php

Selanjutnya kita akan menggunakan layouts main.blade.php. Buka file tersebut dan lakukan pengaturan pada tiap section di view halaman yang akan dikonfigurasi. Penyelesaian: untuk menggunakan template main blade akan diisi setiap halaman yang telah dikonfigurasi pada @extends('layouts.main'), selanjutnya isi tiap konten pada section dengan @section('title') ... @endsection dan @section('content') ... @endsection.

Konfigurasi layout tersebut maka akan tampil seperti gambar berikut:

Gambar 28. Hasil Tampilan Layout Dashboard dengan SB Admin 2

Create Users

Buat form tambah view item format data tools, kemudian buka file UserController, ubah pada action create ubah kode seperti berikut:

Pertama buka folder resources/views kemudian buat folder user, selanjutnya buat file create.blade.php di sana. Selanjutnya buka tiap file tersebut dan javascript selector pada tiap halaman, kemudian buka tiap file dengan kode seperti berikut:

Gambar 32. Kode Form Create User (Bagian 1)

Gambar 33. Kode Form Create User (Bagian 2)

Sehingga tampilan form untuk user menjadi seperti gambar dibawah ini:

Gambar 34. Tampilan Form Tambah User

Selanjutnya buka action store pada UserController kemudian tuliskan kode program berikut:

Gambar 35. Kode Function store() pada UserController

Index / Users

Selanjutnya setelah fungsi create selesai, kita akan menampilkan data user. Untuk menampilkan file data user kita akan menggunakan route GET http://localhost/users yang mana route ini mengarahkan action index pada UserController. Buka action index kemudian akan edit seperti berikut:

Selanjutnya buat file dengan nama index.blade.php pada folder view/users di id dengan kode program berikut:

Gambar 36. Kode index.blade.php (Daftar Users)

Sehingga tampilan list user menjadi seperti gambar dibawah ini:

Gambar 37. Tampilan Daftar Users

Update Users

Selanjutnya untuk melakukan proses update data user, buka action yang telah dibuat pada method edit di UserController kemudian tambahkan tombol edit pada list user. Buka view index.blade.php dan tambahkan link berikut:

Gambar 38. Kode Form Edit User (Bagian 1)

Gambar 39. Kode Form Edit User (Bagian 2)

Sehingga tampilan form edit user menjadi seperti gambar berikut ini:

Gambar 40. Tampilan Form Edit User

Selanjutnya buka action update pada UserController kemudian tuliskan kode program berikut:

Gambar 41. Kode Function update() pada UserController

Setelah gambar status bila kami mengubah nama user, maka akan berhasil seperti gambar berikut:

Gambar 42. Tampilan Setelah Update User Berhasil

Delete Users

Tambahkan tombol delete pada list users, tambahkan buka view index.blade.php dan tambahkan kode program berikut ini:

Gambar 43. Kode Tombol Delete pada index.blade.php

Selanjutnya buka action destroy pada UserController kemudian tuliskan kode program berikut:

Gambar 44. Kode Function destroy() pada UserController

Sehingga tampilan daftar users pada sidebar menjadi seperti gambar berikut ini:

Gambar 45. Pop-up Dialog Konfirmasi Hapus Data User

Jika kita tekan OK maka data akan dihapus, jika data berhasil dihapus maka akan muncul pesan seperti gambar berikut:

Gambar 46. Tampilan Pesan "User Berhasil Dihapus"

Menambahkan Menu Users

Silakan buka view layouts/sidebar.blade.php kemudian tambahkan kode program berikut:

Gambar 47. Kode Penambahan Menu Users pada sidebar.blade.php

Sehingga pada aplikasi akan muncul menu users seperti gambar berikut ini:

Gambar 48. Tampilan Sidebar Aplikasi SISFO dengan Menu Users