Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Cara Install dan Menggunakan Bootstrap 4 di Laravel 7

1 min read

Tutorial Cara Install Bootstrap 4 di Laravel 7

Jika Anda ingin install dan menggunakan bootstrap 4 di Laravel 7, saya akan berikan contohnya.

Pada tutorial kali ini, Anda akan belajar tentang:

  1. Cara install bootstrap 4 di laravel 7
  2. Cara running bootstrap 4 di laravel 7
  3. Contoh program menggunakan bootstrap 4 di laravel 7

Buat Anda yang penasaran gimana caranya install dan menggunakan bootstrap 4 di Laravel 7, mari kita mulai.

Let’s go!

Pendahuluan

Framework Laravel sangat kaya dengan package dan library.

Dukungan-dukungan yang besar membuat framework ini sangat digandrungi oleh programmer.

Perusahaan IT maupun non IT, banyak yang beralih ke Laravel untuk membangun websitenya.

… dan salah satu kelebihannya adalah include bootstrap 4.

Bootstrap 4 ini bisa Anda gunakan untuk keperluan tampilan, maupun authentication.

Di versi 5.8, sistem authentication sudah menggunakan bootstrap. Namun sejak masuk ke Laravel 6, dan sekarang 7, Laravel lebih banyak pilihan lagi.

Anda bisa menggunakan ReactJs di Laravel 7.

… atau bisa menggunakan VueJs di Laravel 7.

Tapi tunggu dulu, bila Anda ingin menginstall Bootstrap 4 untuk keperluan tampilan dan auth saya akan berikan contohnya.

Let’s go!

Tools yang Perlu Disiapkan

Sebelum menginstall bootstrap 4 di Laravel 7, silahkan penuhi syarat tools yang diperlukan ini:

  1. Framework Laravel 7
  2. NodeJs

Pertama-tama, Anda perlu install framework Laravel 7 terlebih dahulu.

Kedua, install NodeJs.

… di tahap install NodeJs, Anda juga bisa mengecek versi, buat contoh program dan lain-lain.

Kok NodeJs, Mas?

Iya. Sebab di Laravel 7, untuk menginstall Bootstrap, ReactJs maupun VueJs, dibutuhkan NodeJs.

… Laravel 6 dan 7 sudah memisahkan UInya.

Bagian UI bisa diinstall secara terpisah.

Kalau masih belum paham dengan NodeJs, jangan khawatir … Anda bisa belajar NodeJs untuk pemula terlebih dahulu.

Cara Install Bootstrap 4 di Laravel 7

Jika semua tools yang diperlukan sudah siap, sekarang buka terminal Anda dan masuk ke direktori project.

Ketik command di bawah ini:

composer require laravel/ui

Laravel 6 dan 7 telah memisahkan antara tampilan dengan framework Laravel.

Makanya perlu diinstall lagi …

Kemudian ketik command berikut untuk menginstall bootstrap 4:

php artisan ui bootstrap 

… dan jika Anda ingin menginstall auth menggunakan bootstrap 4 saja, silahkan ketik:

 php artisan ui bootstrap --auth 

Udah, Mas?

Belum.

Kan masih ada NodeJs nya.

Makanya di awal perlu nginstall kalau belum.

Sekarang ketik lagi command berikut:

npm install

Apaan tuh, Mas?

Maksud npm itu merupakan Node Package Manajer.

Jika kita ketik command npm install, maka kita akan mendapatkan folder node_modulus yang berisi package-package pendukung NodeJs.

Sudah? Dikit lagi.

Terakhir silahkan run npm dengan command berikut:

npm run dev

Selesai.

Horay!

Cara Menggunakan Bootstrap 4 di Laravel 7

Step 1 – Buat Route

Route::get('hello', function(){
    return view('hello');
});

Step 2 – Buat View

Buat file baru bernama hello.blade.php kemudian simpan di direktori resources/views.

Ketik kode berikut:

<!doctype html>
<html>
<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
   
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <p>This is example from ilmucoding.com</p>
</body>
</html>

Simpan.

Step 3 – Testing

Jalankan aplikasi dengan mengetik perintah:

php artisan serve

Kemudian buka browser dan ketik URL:

localhost:8000/hello

Hasilnya:

Cara Install Bootstrap 4 di Laravel 7

Apa Selanjutnya

Alhamdulillah, sudah selesai tutorial kali ini.

… tapi jangan puas dulu.

Sebab masih ada yang perlu kita pelajari, di antaranya:

  1. Cara Install dan Menggunakan ReactJs di Laravel 7
  2. Cara Install dan Menggunakan VueJs di Laravel 7
  3. Contoh CRUD Menggunakan Laravel 7
  4. dan masih banyak lagi

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.