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.
{{ 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
Reviewed by M Hasan AM
on
February 23, 2018
Rating:
No comments: