Cara memanggil css di laravel 8

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.

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.

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

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.

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.

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

Secara default, Laravel menggunakan Bootstrap sebagai komponen tampilan atau user interface (atau biasa di sebut sebagai Front-End Framework) pada website. Keberadaan front-end framework, dapat memberikan kenyamanan visual pengguna (maupun pendatang website) hingga mempercepat proses komponen pada layout website.

Kita juga dapat menggunakan front-end lainnya (seperti UIKit, Bulma, dan Semantic UI) selama komponennya telah terdaftar atau tersedia dalam Laravel kita. Pada artikel kali ini, kita akan menambahkan front-end framework pada direktori Laravel.

Catatan : Pada artikel ini, penulis akan menggunakan UIKit sebagai tambahan front-end framework pada Laravel. Penerapan yang sama berlaku pada jenis front-end framework lainnya.

Langkah:

1. Unduh paket front-end framework pada website penyedia yang di tuju (Pada kali ini, kita menggunakan paket UIKit). Nantinya kamu akan mendapatkan file zip atau rar yang berisikan komponen CSS dan JS.

2. Pada direktori Laravel, ekstrak file (CSS dan JS) yang telah di unduh ke dalam direktori public . Nantinya, kita akan memanggil komponen tersebut ke dalam halaman website yang akan kita buat.

3. Pada direktori resource – views , buatlah file yang bernama index.blade.php . Pada file yang telah di buat, masukkan kode berikut:

<html>
<head>
  <title>Inwepo</title>
<body>
</body>
</html>

4. Pada bagian <head>, masukkan kode berikut:

<link href="{{asset('css/uikit.css')}}" rel="stylesheet">
<link href="{{asset('css/uikit.min.css')}}" rel="stylesheet">

Nantinya, bagian <head> akan menjadi seperti berikut:

<head>
 <title>Inwepo</title>
 <link href="{{asset('css/uikit.css')}}" rel="stylesheet">
 <link href="{{asset('css/uikit.min.css')}}" rel="stylesheet">
</head>

5. Pada bagian <body>, masukkan kode berikut:

<div class="uk-container">
 <div class="uk-card uk-card-default uk-width-1-2@m uk-margin-medium-top">
  <div class="uk-card-body">
    <div class="uk-card-badge uk-label">Primary</div>
    <h3 class="uk-card-title">Ini Title Card Kamu</h3>
    <p>Ini Konten Card Kamu</p>
  </div>
  <div class="uk-card-footer">
   <p>Ini Card Footer Kamu</p>
  </div>
 </div>
</div>
<script src="{{asset('js/uikit.min.js')}}"></script>

Nantinya, bagian <body> akan menjadi seperti berikut:

<body>
 <div class="uk-container">
  <div class="uk-card uk-card-default uk-width-1-2@m uk-margin-medium-top">
   <div class="uk-card-body">
     <div class="uk-card-badge uk-label">Primary</div>
     <h3 class="uk-card-title">Ini Title Card Kamu</h3>
     <p>Ini Konten Card Kamu</p>
   </div>
   <div class="uk-card-footer">
    <p>Ini Card Footer Kamu</p>
   </div>
  </div>
 </div>
 <script src="{{asset('js/uikit.min.js')}}"></script>
</body>

6. Untuk memastikan bahwa komponen CSS dan JS berhasil digunakan, daftarkan file yang yang telah kamu buat kedalam route Laravel.

Pada direktori routes, buka file yang bernama web.php . Lalu, masukkan perintah berikut kedalam file terkait:

Route::get('/inwepo', function () {
    return view('index');
});

7. Jalankan localhost pada Laravel, dengan cara mengarahkan posisi Command Prompt (atau biasa disebut sebagai CMD) pada direktori Laravel, lalu masukkan perintah berikut kedalam CMD:

php artisan serve

8. Masukkan link yang telah diberikan kedalam browser kamu. Jangan lupa untuk menambahkan /inwepo pada akhiran link (nantinya bentuk link ialah sebagai berikut: http://127.0.0.1:8000/inwepo ).

Pada halaman website yang dituju, nantinya akan muncul kotak informasi (biasa disebut sebagai Card) yang berisikan teks yang telah kita tetapkan sebelumnya, beserta dengan tampilan yang menyesuaikan dengan tampilan front-end yang telah kita tambahkan sebelumnya.