Menyertakan Sumber Daya File CSS/Javascript di Laravel 5.4

Menyertakan Sumber Daya File CSS/Javascript di Laravel 5.4. CSS dan Javascript memang diperlukan untuk aplikasi sebuah web, Karena dengan begitu aplikasi akan terlihat menarik dan professional dengan tampilan yang baik, Namun bagi developer yang masih baru terjun ke dunia pengembangan Framework Laravel mungkin sedikit kebingungan karena belum terbiasa dengan prosedurnya, Nah mungkin bagi kalian yang udah terbiasa menggunakan Framework CI untuk menyertakan/mengambil sumber daya file CSS atau Javascript biasa dengan menggunakan fungsi base_url yang mendefinisikan lokasi aplikasi dilanjutkan nama folder dan file CSS/JS itu berada, Tidak ada bedanya di Laravel juga hampir sama mekanisme seperti Framework CI yang untuk menggunakan melalui sebuah fungsi lalu diikuti nama folder dan file, Kalo dilaravel kita akan menggunakan fungsi {{ asset('folder/file') }} yang mengarah pada folder public.

Saya perlihatkan dulu ini adalah contoh halaman sebelum disertakan CSS/Javascript.


Menyertakan Sumber Daya File CSS/Javascript di Laravel 5.4


Nah berikut diatas memperlihatkan bahwa terdapat link biasa tanpa desain sama sekali, Saya berencana untuk mengubah  tampilan linknya menjadi seperti tombol yang berwarna hijau yang diambil dari sumber daya Framework Bootstrap, Oke biar lebih paham kita langsung mencobanya dengan beberapa langkah tersebut :

1. Bikin atau Download Sumber Daya CSS/Javascript
Anda disini bikin dulu File css custom atau download Framework seperti Bootstrap, Jquery dll disitus resminya, Setelah selesai kita lanjut untuk menaruh file CSS/Javascript tersebut di folder public Laravel anda.

2. Buat Layout
Layout yang saya maksudkan yaitu file header.blade.php dan footer.blade.php yang berada pada folder Layout, Dimana file header akan menyertakan apa yang sedang kita bahas sekarang, yaitu menyertakan sumber daya CSS/ Javascript. Dan file header ini sangat bermanfaat apabila konten halaman yang berbeda ingin menggunakan sumber daya CSS/Javascript yang sama kita tinggal memanggil file header dan footer ke file yang akan dieksekusi, Lokasi untuk header dan footer di Folder Layout sedangkan konten.blade.php taruh di root folder views.

Tambahkan kode ini di header.blade.php 

<!DOCTYPE html>

<html>

<head>

<title>Coba Laravel</title>

<link rel="stylesheet" type="text/css" href="{!! asset('styles.css') !!}">

<link rel="stylesheet" type="text/css" href="{!! asset('bootstrap/css/bootstrap.min.css') !!}">

<link rel="stylesheet" type="text/css" href="{!! asset('jquery-3.2.0.min.js') !!}">

</head>

<body>
Untuk footer.blade.php tambahkan kodenya seperti ini : 

</body>

</html>

File footer untuk berfungsi menutup tag yang sudah dideklarasikan di header.blade.php dan file yang terakhir kita beri nama konten.blade.php yang dimana file ini akan memanggil 2 layout : header dan footer diatas, konten.blade.php ini sebuah file yang akan dijalankan lewat controller.

Tambahkan kode ini didalam konten.blade.php 

@include('layout.header')

<div align="center">

<a class="btn btn-success" href="#">Tutorial - Menyertakan Sumber Daya CSS/Javascript di Laravel 5.4</a>

</div>

@include('layout.footer')

3. Buat Controller 
Lalu buat sebuah controller dengan php artisan make:controller KontenController --resource Kita edit file KontenController, Tambahkan di bawah public function index(){  Dengan kode : 

return view('konten');

4. Menentukan route
Dan terakhir untuk bisa memunculkan halamannya kita atur route untuk mengarahkan kemana arah yang seharusnya untuk memunculkan halaman sesuai controller yang sudah kita buat, pergi ke folder routes, edit file web.php tambahkan 

route::get('/', KontenController@index);

Selesai sudah, Sekarang memulai pengujian dengan mengetikan di url dibrowser dengan alamat utama aplikasi, Jika anda belum tau url aplikasi anda silahkan ketikan localhost/nama_folder_aplikasi atau mengarah pada folder root aplikasi laravel anda lalu jalankan php artisan serve pada terminal , Jika berhasil akan muncul 

Laravel development server started: <http://127.0.0.1:8000>

Salin urlnya lalu copi ke browser http://127.0.0.1:8000 dan ini hasil tampilan halaman yang sudah menyertakan sumber daya file css/javascript.

Menyertakan Sumber Daya File CSS/Javascript di Laravel 5.4


Bisa anda lihat perbedaanya kan ? Seperti yang sudah saya rencakanan diawal , Sekarang link tersebut menampakan dirinya seolah seperti tombol yang berwarna hijau.

Sekian tutorial kali ini tentang Menyertakan Sumber Daya File CSS/Javascript di Laravel 5.4, Semoga bermanfaat untuk kalian, Sampai ketemu di Tutorial Selanjutnya...
Lokasi: Bandung, Bandung City, West Java, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Struktur Direktori Laravel 5.4

Gambar
Direktori Secara sederhananya Direktori yaitu sebuah folder yang berisi beberapa file, Manfaat direktori agar kita bisa mengkategorikan file yang berjumlah banyak, Bayangkan jika file dikomputer anda terdapat ratusan bahkan ribuan dengan masing masing mempunyai ektensi yang berbeda dan suatu waktu anda ingin membuka file yang diinginkan , Otomatis kan harus scroll dari atas sampai kebawah sampai ketemu, Kalo disimpan dalam direktori anda pasti lebih mudah menemukannya dan waktu pun semakin singkat. Nah pada Framework laravel juga terdapat beberapa direktori yang masing masing sudah dinamai darisananya, Pasti dengan setiap nama direktori yang ada dilaravel mempunyai tujuannya tersendiri, Untuk anda yang ingin membangun sebuah website dengan cepat dengan menggunakan Laravel, Sebaiknya anda mengetahui dulu apa kegunaan direktori yang ada di laravel, Yuk simak   Root Direktori Khusus untuk Direktori Root ini adalah istilah saja yang menjelaskan lokasi, Bukan folder yang b...
Baca selengkapnya

Pentingnya memahami Konsep pada Laravel 5.4

Gambar
Pentingnya memahami Konsep pada Laravel 5.4 . Ketika menggunakan setiap alat didalam dunia nyata tentu kita harus tau dulu bagaimana alat itu bekerja, Bahkan mie instan sekalipun dalam membuatnya memerlukan beberapa langkah agar menjadi mie, Hal ini tidak berbeda dengan membuat sebuah software, Software juga  harus memahami langkah demi langkah bagaimana setiap komponen saling berhubungan dan membuahkan fungsi, Intinya segala sesuatu yang kita ingin coba harus tau dulu konsep, Karena anda akan merasa nyaman bila sudah mengetahui konsepnya . Pada kesempatan kali ini saya akan menjelaskan konsep tentang Framework Laravel, Laravel merupakan Framework baru dan populer ditahun 2017 ini. Meski kita sudah berpengalaman dengan Framework PHP selain ini, Tentunya Setiap hal baru pasti mempunyai konsep yang berbeda, Sebelum berali ke laravel saya menggunakan Framework CI yang sistemnya berdasarkan MVC, Alasan sederhana saya bermigrasi ke laravel karena laravel mempunyai banyak fitur dibandi...
Baca selengkapnya