Laravel - Assets Compiling
Laravel Assets Compiling
Pendahuluan
1.
Front End (FE) side development mengalami
kemajuan dan perubahan yang sangat cepat.
2.
Saat ini FE menjadi bagian yang sangat penting,
karena berhubungan dan berinteraksi langsung dengan user. App akan terlihat
bagus dan profesional ketika FE nya bagus dan intuitive
3.
Banyak tools atau framework yang bisa digunakan
untuk mempermudah dan mempercepat FE development, contoh Bootstrap, React JS,
Vue Js, Angular dan lain sebagainnya.
4.
FE ini berjalan disisi browser, jadi browser
akan mendownload file JS dan CSS. Semakin komplek FE, maka file JS dan CSS akan
semakin besar ukuranya, dan ini akan mempengaruhi loading time ketika membuka
halaman web.
5.
Jadi kita selaku developer perlu melakukan
optimasi pada bagian FE
6.
Salah satu tools yang widely used around the
world adalah Webpack
7.
Webpack adalah salah satu bundler tools yang
luar biasa powerful, yang mampu mempersiapkan dan mengoptimasi aset FE (JS dan
CC) supaya bisa secara optimal dijalankan pada browser
8.
Salah satu kekurangannya adalah Webpack
membutuhkan learning curve yang tinggi untuk bisa menggunakannya dengan baik.
9.
Laravel Mix menyediakan Interface bagi laravel
developer untuk bisa mengintegrasikan Webpack pada laravel project dengan lebih
sederhana dan mudah.
10.
Untuk lebih detail mengenai laravel mix bisa
mengunjungi halaman https://laravel-mix.com/docs/main/what-is-mix atau https://laravel.com/docs/8.x/mix.
11.
Untuk bisa menggunakan dan memanfaatkan laravel
mix dengan baik, maka perlu meng-install NodeJS dan NPM.
12.
Untuk lebih dental mengenai NodeJs dan NPM bisa
mengunjungi halaman ini https://nodejs.org/en/.
13.
Pastikan NodeJs dan NPM terinstall pada komputer
masing-masing. Untuk versi nya gunakan versi latest
14.
Laravel Mix dan Assets
Bootstrap
1.
Kita akan menggunakan Bootstrap untuk membantu
kita dalam mendesain dan layouting halaman web. Jadi saya sarankan anda
mempelajari bootstrap.
2.
Bootstrap (https://getbootstrap.com/) adalah
salah satu CSS framework yang bisa membantu developer untuk mendesain dan meng
kostumisasi halaman web dengan mudah dan cepat
3.
Untuk melakukan integrasi Bootstrap pada Laravel
project kita akan menggunakan plugin laravel/ui (https://github.com/laravel/ui).
4.
Laravel ui adalah plugin yang dibangun di atas
Framework Boostrap
5.
Install plugin laravel/ui, Gunakan versi 3.0.0
composer require laravel/ui 3.0.0
6.
Install Bootstrap menggunakan laravel/ui
php artisan ui bootstrap
7.
Sebagai tambahan kita perlu meng-install ui controller
php artisan ui:controllers
Compiling Assets Menggunakan Mix/Webpack
1.
Untuk bisa menggunakan Mix, kita membutuhkan
file package.json pada root folder laravel project. File package.json ini sama
dengan file composer.json, tapi digunakan untuk frontend.
2.
Secara default Laravel sudah membuat file
package.json pada root project. Untuk instalasi plugin-plugin yang dibutuhkan
di package.json, jalankan command dibawah ini.
npm install
3.
Setelah berhasil melakukan instalasi, makan ada
ada folder node_modules dan package-lock.json pada root folder.
4.
Pada file package.json kita lihat bagian
scripts. Setiap key pada bagian key, bisa dijalankan sebagai command.
5.
Untuk melakukan compiling assets, jalankan
command dibawah ini
npm run dev
6.
Apabila berhasil compiling dengan benar, maka
pada public folder akan dibuatkan public/css/app.css dan public/js/app.js
7.
Sekarang kita tambahkan assets. Buka file
resources/views/layouts/app.blade.php, tambahkan code pada line 12 dan 13.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - @yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- JS -->
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div class="container">
@if(session('status'))
<div style="background: green; color:#fff;">
{{ session('status') }}
</div>
@endif
@yield('content')
</div>
</body>
</html>
8.
Pada browser buka halaman
http://localhost:8000/posts, css bootstrap akan ke load, sehingga tampilannya
menjadi seperti ini
|
Sebelum |
Sesudah |
 |
 |
Versioning Assets
1.
Secara default browser akan melakukan cache pada
file .css dan .js, jadi kalau kita ada perubahan pada file app.css dan app.js,
ada kemungkinan browser tidak melakukan load ulang karena sudah ada di cache.
2.
Oleh karena itu di production kita harus selalu
menambahkan url yang berbeda untuk file app.css dan app.js, biasanya dengan
menambahkan parameter id, contoh :
app.css?id=xyz
app.js?id=xyz
3.
Dengan menggunakan laravel mix kita tidak perlu
melakukannya dengan manual, mix sudah menyediakan helper dan configuration
untuk implementasi versioning assets.
4.
Versioning assets ini kita jalan pada production
mode.
5.
Buka file webpack.mix.js, tambahkan code di
bawah ini.
6.
Compiling ulang assets dengan menjalankan
command di bawah ini:
npm run prod
7.
Buka file resources/views/layouts/app.blade.php,
ubah code dari asset() helper menjadi mix() helper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - @yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- JS -->
<script src="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div class="container">
@if(session('status'))
<div style="background: green; color:#fff;">
{{ session('status') }}
</div>
@endif
@yield('content')
</div>
</body>
</html>
8.
Pada halaman http://localhost:8000/post, inspect
element dan lihat pada bagian . Parameter id akan selalu berubah ketika kita
menjalankan command npm run prod. Ini memastikan browser untuk meload ulang
asset yang baru di compile
Styling Layout Menggunakan Bootstrap
1.
Buka file resources/views/layouts/app.blade.php,
pada bagian body ubah menjadi seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - @yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- JS -->
<script src="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Blog - @yield('title')</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="{{ route('home.index') }}">Home</a>
<a class="p-2 text-dark" href="{{ route('home.contact') }}">Contact</a>
<a class="p-2 text-dark" href="{{ route('posts.index') }}">Blog Post</a>
<a class="p-2 text-dark" href="{{ route('posts.create') }}">Add Blog Post</a>
</nav>
</div>
<div class="container">
@if(session('status'))
<div style="background: green; color:#fff;">
{{ session('status') }}
</div>
@endif
@yield('content')
</div>
</body>
</html>
2.
Pada halaman posts index
Styling Form Menggunakan Bootstrap
1.
Buka file
resources/views/posts/partials/form.blade.php, ubah menjadi seperti ini
<div class="form-group">
<label for="title"> Title </label>
<input id="title" type="text" name="title" class="form-control" value="{{ old('title', optional($post ?? null)->title ) }}"></div>
@error('title')
<div class="alert alert-danger"> {{ $message }}</div>
@enderror
<div class="form-group">
<label for="content"> Content </label>
<textarea id="content" name="content" class="form-control" >{{ old('content', optional($post ?? null)->content ) }}</textarea>
</div>
@error('content')
<div class="alert alert-danger"> {{ $message }}</div>
@enderror
@if($errors->any())
<div class="mb-3">
<ul class="list-group">
@foreach ($errors->all() as $error )
<li class="list-group-item list-group-item-danger"> {{ $error }}</li>
@endforeach
</ul>
</div>
@endif
2.
Pada halaman Posts Create
Styling Post List Menggunakan Bootstrap
1.
Buka file resources/views/posts/index.blade.php,
ubah menjadi seperti ini
@extends('layouts.app')
@section('title', 'Blog Posts')
@section('content')
@forelse ($posts as $key => $post)
@include('posts.partials.post', [])
@empty
No Posts Found !
@endforelse
@endsection
2.
Buat file
resources/views/posts/partials/post.blade.php, ubah menjadi seperti ini
<p>
<h3><a href="{{ route('posts.show', ['post'=> $post->id])}}"> {{ $post['title'] }} </a></h3>
<div class="mb-3">
<form action="{{ route('posts.destroy', ['post'=> $post->id] ) }}" method="post">
@csrf
@method('DELETE')
<a href="{{ route('posts.edit', ['post'=> $post->id]) }}" class="btn btn-primary"> Edit </a>
<input type="submit" value="Delete!" class="btn btn-primary">
</form>
</div>
</p>
3.
Pada halaman posts index
Styling Single Post Menggunakan Bootstrap
1.
Buka file resources/views/layouts/app.blade.php,
<div class="container">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
@yield('content')
</div>
2.
Coba membuat post baru sampai success pada
halaman, maka tampilan flash message nya menjadi seperti ini
Styling Error Message Menggunakan Bootstrap
1.
Buka file
resources/views/posts/partials/form.blade.php,
<div class="form-group">
<label for="title"> Title </label>
<input id="title" type="text" name="title" class="form-control" value="{{ old('title', optional($post ?? null)->title ) }}">
</div>
@error('title')
<div class="alert alert-danger"> {{ $message }}</div>
@enderror
<div class="form-group">
<label for="content"> Content </label>
<textarea id="content" name="content" class="form-control" >{{ old('content', optional($post ?? null)->content ) }}</textarea>
</div>
@error('content')
<div class="alert alert-danger"> {{ $message }}</div>
@enderror
@if($errors->any())
<div class="mb-3">
<ul class="list-group">
@foreach ($errors->all() as $error )
<li class="list-group-item list-group-item-danger"> {{ $error }}</li>
@endforeach
</ul>
</div>
@endif
2.
Coba membuat post baru yang gagal validasi pada
halaman, maka tampilan error message nya menjadi seperti ini
Sekian Artikel mengenai Laravel, mohon maaf apabila banyak sekali kekurangan