Cara Mudah Memasang Template Bootstrap di Laravel

Share:
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:

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.:)

5 comments:

  1. Bang ini image nya kok ga kebaca ya ? mohon solusinya

    ReplyDelete
    Replies
    1. Pertama periksa dulu setiap image yg ada apkah sudah diarahkan dngan benar atau belum, pake ctrl + f untuk memudahkan pencarian. {{ asset('...') }} itu sama dengan kita mengakses folder public. Jadi masnya tarok folder css dan js di dalam folder public agar bisa diakses. Thanks mas kunjungannya :)

      Delete
  2. Selamat malam,
    1.untuk image tidak tampil
    2. fungsi tombol dasboard dll tdk respon

    mohon penjelasannya

    ReplyDelete
    Replies
    1. bisa diikuti lagi mas step yang ke-7. itu biasanya pathnya gk ketemu. di larevel untuk mengakses folder public di src= atau link= bisa menambahkan {{ asset('...') }}. Periksa kembali setiap path dengan cara ctrl + u.

      Delete
  3. This tutorial simplifies the process of installing Bootstrap templates in Laravel using the built-in templating features. By following the step-by-step guide, you can quickly integrate AdminLTE 3 into your Laravel project. The clear instructions and visual aids make it easy for beginners to follow along. If you're looking to enhance your Laravel project with a sleek and modern design, this tutorial is a great starting point.

    ReplyDelete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi