adsense

Menggunakan CSS Bootstrap di Laravel

pertama kali saya menggunakan Laravel, saya sempat kesulitan untuk menambahkan class-class Css pada halaman web yang saya buat, karena format file yang digunakan pada laravel adalah .blade.php bukan .html, selain itu perintah yang digunakan juga sedikit berbeda, misalnya untuk membuat sebuah input text, perintah-nya adalah

{{ Form::text ('nama') }}

setelah saya coba menggunakan perintah HTML biasa, ternyata masih dapat berfungsi dengan baik, hal ini tentunya akan lebih memudahkan bagi kita yang sudah terbiasa dengan HTML biasa, karena lebih mudah untuk digunakan.
OK kembali ke pembahasan awal mengenai bagaimana menggunakan CSS Bootstrap di laravel, dalam percobaan ini, saya menggunakan Laravel Versi 4.2 dengan Sistem Operasi Linux Mint jadi mungkin akan sedikit berbeda dengan yang menggunakan versi Laravel terbaru, atau dengan yang menggunakan OS Windows. Langkah-langkah yang saya lakukan adalah sebagai berikut:
1. Download Terlebih dahulu file Bootstrap-nya.
Dalam Bootstrap versi terbaru (versi 4) yang saya gunakan tidak tersedia Glyphicons, jadi jika ingin menggunakan Glyphicons anda harus menggunakan Bootstrap versi 3.
2. jika sudah mendownload,  ekstrak file Bootsrap yang didownload (karena biasanya file yang di download tersebut berupa format .zip), kemudian cari folder css pada folder yang sudah di ekstrak tersebut.
3. Copy dan paste folder css tersebut di folder Laravel->public (/var/www/html/laravel/public).
4. Kemudian buka diterminal, dan ubah hak akses folder css tersebut dengan mengetikkan perintah
chmod -R 777 css



 

5. kemudian buatlah sebuah project sederhana, dengan langkah-langkah sebagai berikut:


1. buat sebuah route baru, pada folder Laravel/app/routes.php
Route::get('coba', function()
{
    return View::make('coba');
});
2. buat sebuah file baru dengan nama coba.blade.php pada folder Laravel/app/views/


kita akan melihat perbedaan antara file yang menggunakan bootstrap dengan file yang tidak menggunakan bootstrap, seperti Gambar berikut:


Gambar: Tampilan halaman Web Tanpa Bootstrap


 

Gambar: Tampilan halaman Web dengan menggunakan Bootstrap

Bila kita lihat dari Gambar diatas, sebuah halaman Web yang tidak menggunakan CSS Bootstrap  tampilannya tidak beraturan, bahkan tekesan acak-acakan, berbeda dengan yang menggunakan CSS Botstrap.
Menggunakan CSS Bootstrap di Laravel Menggunakan CSS Bootstrap di Laravel Reviewed by M Hasan AM on February 23, 2018 Rating: 5

No comments:

Powered by Blogger.