Tutorial Pemrograman

Cara Menambahkan Front End Framework di Laravel

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:

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

Nantinya, bagian <head> akan menjadi seperti berikut:

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

Nantinya, bagian <body> akan menjadi seperti berikut:

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:

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:

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.

Demikian tutorial cara menambahkan Front End Framework di Laravel. Semoga bermanfaat.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top