Cara Mudah Memasang Template Bootstrap di Laravel

Cara Mudah Memasang Template Bootstrap di Laravel. Assalamualaikum, halo semua, kembali lagi di sahretech. Laravel memiliki banyak sekali fitur yang mempermudah kita dalam membangun sebuah website, salah satu fitur yang akan kita bahas kali ini adalah fitur templating yang akan kita implementasikan untuk memasang template boostrap Penasaran?. Ayo ikuti tutorialnya berikut ini!.

Sekarang membangun website semakin mudah dan menyenangkan, banyak sekali template gratis yang dapat diunduh dan dimanfaatkan untuk membangun berbagai macam jenis website. Mungkin sebagian dari kita sudah pernah menggunakan template-template tersebut dan dikombinasikan dengan project php native, tapi pertanyaannya sekarang, bagaimana jika template-template tersebut diimplementasikan di framework laravel?. Apakah sulit?. Jawabannnya mudah sekali, kita akan menggunakan fitur templating yang telah disediakan oleh laravel dan untuk templatenya sendiri, kita akan menggunakan AdminLTE 3 kali ini.

Baca Juga:

• Cara Cepat Memasukkan Data Dummy di Laravel dengan Seeder
• Download Aplikasi CRUD Builder dengan Laravel Voyager dan Cara Instalasinya
• Cepat dan Mudah Membuat Register dan Login di Laravel

Sebelum masuk ke pembahasan, disarankan kalian telah mengenal laravel terlebih dahulu. Sedangkan untuk editor yang saya pakai adalah visual studio code. Kalian juga dapat membaca dokumentasi tentang templating laravel di situs resminya, karena memang artikel kali ini akan membahas fitur templating laravel.

Cara Pasang Template AdminLTE 3 di Laravel

1. Install laravel, untuk versi dan lokasi instalasinya bebas. Cara instalasinya bisa lihat artikel berikut ini: https://www.sahretech.com/2019/10/cara-install-laravel-di-localhost-server.html.

2. Download template AdminLTE 3 berikut ini download kemudian diekstrak.

3. Lalu Pindahkan folder AdminLTE 3 ke dalam folder public projek laravel, lalu ubah namanya menjadi admin.

Struktur Folder pada Laravel

4. Buka folder public/admin/pages/examples/blank.html lalu copy isinya.

5. Buat file baru dengan nama template.blade.php di dalam folder views, lalu paste script yang telah dicopy dari file blank.html sebelumnya.

6. Masih dalam file template.blade.php, tambahkan kode @yield('content) pada bagian yang ditandai dengan kotak merah, lalu cut bagian card pada bagian yang ditandai kotak merah pada gambar berikut ini. Sedikit penjelasan, @yield('content') adalah bagian yang akan diisi dengan konten dinamis di setiap halaman yang berbeda nantinya.

Membuat Admin Template

7. Kemudian kita perlu memperbaiki setiap path yang mengarah ke file lain. untuk itu kita perlu menambahkan {{ asset('...') }, bagaimana cara menggunakannya?. Lihat gambar berikut ini

Menambahkan Asset untuk Setiap Source File

8. Template bootstrap sudah berhasil dipasang di projek laravel kalian, langkah selanjutnya adalah menggunakan template tadi ke halaman atau file-file lainnya. Buka file welcome.blade.php lalu hapus isinya, kemudian tambahkan @extends('template') untuk menggunakan template yang telah kita buat sebelumnya, lalu tambahkan @section('content') dan jangan lupa juga untuk menambah @endsection. Langkah terakhir paste script yang telah kalian cut tadi di antara @section('content') dan @endsection.

Mencoba template ke halaman welcome

9. Jika langkah-langkah di atas sudah benar, selanjutnya jalankan php artisan dan lihat hasilnya di browser kalian masing-masing. Hasilnya akan tampak seperti gambar di bawah ini.

Hasil akhir menggunakan Template

Sekian tutorial cara memasang template bootstrap di laravel, semoga bermanfaat, dan bagi yang merasa kesulitan, ingin bertanya, atau punya kritik dan saran silahkan tinggalkan komentar di bawah ini. Sampai jumpa di tutorial pemrograman menarik lainnya.:)