Integrasi Framework Laravel dengan Bootstrap

0
38

Pada tutorial kali ini saya akan menunjukan kepada anda bagaimana cara mengintegrasikan laravel dengan bootstrap 4. Jadi nanti kita akan mengintegrasikan, kemudian membuat satu project laravel menggunakan examples cover pada bootstraps docs. Ok, langsung saja kita ke tutorialnya.

Langkah pertama yang harus di lakukan yakni men-download file bootstrap 4 pada halaman offcial bootstrap. Cukup dengan keyword “download bootstrap 4” pada search engine maka akan langsung muncul di paling atas. Kemudian buka web nya. Nah pada halaman seperti dibawah ini, klik pada tombol download. Lalu tunggu hingga download selesai.

Setelah itu buka file .rar-nya cari folder css dan js. Jika sudah ketemu, ekstrak kedua folder tersebut ke fole project anda > public.

Nah Jika sudah, kita akan membuat File baru untuk mengetahui apakah integrasi bootstrap kita berhasil. Pertama kita buka web bootstrapnya dulu, trus ke example nah disitu kalian cari cover atau example yang lain.

Kemudian buka examples tersebut lalu klik kanan -> view page source. Atau dengan CTRL + U.

Kemudian copy semua teksnya lalu buat file pada direktori public > views dengan nama cover.blade.php. Kemudian pastekan kodingannya ke file ini.

Langkah berikutnya yakni mengubah link stylenya dari

<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

menjadi

<link href="css/bootstrap.min.css" rel="stylesheet">

Begitu juga dengan script js-nya

<script src="../../dist/js/bootstrap.min.js"></script>

Menjadi

<script src="js/bootstrap.min.js"></script>

Kemudian pada custom style untuk cover, pergi ke page source tadi kemudian klik pada href-nya

<link href="cover.css" rel="stylesheet">

Kemudian salin link-nya lalu paste pada href. Sehingga terlihat seperti di bawah

<link href="https://getbootstrap.com/docs/4.0/examples/cover/cover.css" rel="stylesheet">

Dan yang terakhir yaitu proper.js caranya sama dengan cover.js

<script src="../../assets/js/vendor/popper.min.js"></script>

Menjadi

<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>

Nah setelah itu kita save, lalu buat router baru untuk cover. Caranya buka routes -> web.php kemudian ketikan kodingan seperti dibawah lalu save.

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

Nah jika semua langkah telah dilakukan, kemudian kita cek apakah berhasil atau tidak. Caranya dengan ketikkan pada address bar “localhost/[nama project]/public/cover

Maka akan muncul tampilan seperti dibawah ini.

Jika sudah muncul tampilan seperti diatas, maka itu artinya kalian sudah berhasil mengintegrasikan framework laravel dengan bootstrap.

Sekian tutorial kali ini, saya berharap bisa bermanfaat bagi kita semua. Terimakasih telah membaca .

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here