Halo! Pada kesempatan kali ini kita akan membahas bagaimana caranya menggunakan template untuk mempercantik tampilan UI kita di bagian user. Template yang akan kita gunakan adalah Stisla. Silahkan download template tersebut atau jika kalian ingin menggunakan template lain, itu juga tidak masalah.

Setelah template didownload, silahkan buka template tersebut, masuk ke folder dist/assets, lalu copy semua folder yang ada di situ. Sekarang, buka folder projek Laravel kalian, pilih folder public, lalu buat folder baru bernama assets di sana. Setelah itu, buat folder baru bernama stisla di dalam folder assets dan paste-kan semua yang sudah dicopy tadi pada folder tersebut. 

Pertama, kita akan membuat base template. Apa itu? Base template adalah template utama yang nantinya akan digunakan. Jika kalian perhatikan, di dalam folder dist template Stisla, terdapat blank.html. Di sini kita akan menggunakannya karena tidak mengandung banyak menu.

Langsung saja, pada projek Laravel, buka folder resources/views/layouts, lalu buat sebuah file baru bernama user_template.blade.php. Blade adalah ektensi khusus yang diberikan oleh Laravel untuk mempermudah penggabungkan antara sintaks HTML dan Laravel (PHP).

Di sini, kita akan menggunakan template yang sudah kita simpan tadi. Silahkan sesuaikan menjadi seperti ini. Perhatikan, di situ ada yield, include, dan asset. Yield adalah pemanggilan. Yield dipakai untuk sesuatu yang dinamis atau sesuatu yang selalu berubah.

Contohnya adalah title, tentu judul untuk setiap halaman akan berganti, mulai dari Home, About, Contact Us dan sebagainya. Di sinilah peran dari yield. Sedangkan include adalah penggunaan. Di sini kita secara jelas menggunakan navbar, sidebar dan footer. Kontennya pun tidak dinamis, footer akan terlihat sama di semua halaman. Terakhir, asset. Asset berguna untuk memanggil template atau apapun yang kita butuhkan di dalam folder public.

Base template.

Selanjutnya, kita akan membuat module untuk navbar, sidebar dan footer. Pada folder views/layouts, buat folder baru bernama user_module, lalu buat file baru di situ dengan nama navbar.blade.php, sidebar.blade.php dan footer.blade.php.

Navbar.

Sidebar.

Footer.

Sekarang, buka file views/home.blade.php. Kita akan menggunakan file ini sebagai halaman dashboard user. Silahkan sesuaikan kode programnya seperti di bawah ini.

Silahkan jalankan program dengan menggunakan php artisan serve, lalu cobalah untuk login dengan menggunakan user yang sudah ada di database. Ketika login sukses, maka akan dialihkan menuju halaman home seperti ini.

Halaman dashboard user sudah menggunakan template.

  

Sampai di sini, template sudah berhasil diintegrasikan. Memang, image untuk user masih belum tampil. Maka dari itu, buka folder public/assets/stisla/img/avatar, lalu copy avatar-1.png, kemudian kembali lagi ke halaman public/assets, buat folder baru dengan nama images di dalam folder tersebut dan copy avatar-1.png tadi di sana.

Jangan lupa untuk mengubah sedikit kode program yang ada pada views/layouts/user_module/navbar.blade.php. Kita lakukan ini agar Laravel dapat membaca image yang kita simpan pada folder images tadi.

Jika kode program sudah diubah, maka akan menjadi seperti ini.

Selanjutnya, kita akan melakukan templating untuk halaman login user. Buka file views/auth/login.blade.php. Sesuaikan kode programnya menjadi seperti ini.

Setelah dilakukan templating, halaman user login akan menjadi seperti ini.

Terakhir, kita juga akan melakukan templating pada halaman user register. Silahkan sesuaikan kode programnya menjadi seperti ini.

Jika kita membuka halaman register pada browser, maka akan muncul error seperti ini. Error ini terjadi karena kita belum memberikan variable jobs yang dibutuhkan oleh halaman ini.

Untuk mengatasinya, silahkan buka file app/Http/Controllers/Auth/RegisterController.php. Pada RegisterController.php terdapat fungsi validator dan create. Hapus saja keduanya. Sesuaikan kode programnya menjadi seperti ini. 

Selanjutnya, buka file app/User.php. Perhatikan pada bagian fillable, sesuaikan kode programnya menjadi seperti ini.

Jika semua step sudah dilakukan, maka akan muncul tampilan seperti ini.