Laravel Framework & Penyusunan Asset Laravel

Laravel Assets Compiling

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

(https://webpack.js.org/).

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 inni

https://nodejs.org/en/.

13. Pastikan NodeJs dan NPM terinstall pada komputer masing-masing. Untuk versi nya

gunakan versi latest.

14. Saran

a. Perlu internet yang stabil

b. Saya sarankan menggunakan Mac atau Linux based OS, pengalaman saya di

Windows sering terjadi error yang tidak diinginkan.

c. Kalau terjadi error jangan panik, cukup copy paste error message nya di google,

biasanya diluaran sana sudah ada orang-orang yang pernah mengalami error

tersebut dan men-share bagaimana cara menyelesaikanya

15. Laravel Mix dan Assets

16. Selesai

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

a. Jika anda mengalami error seperti ini:

“Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to

allocate 4096 bytes)”

b. Kita perlu men-setting environment variable COMPOSER_MEMORY_LIMIT=-1,

sehingga command yang dijalankan menjadi seperti ini (Linux/Mac):

COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui 3.0.0

c. Selesai

6. Install Bootstrap menggunakan laravel/ui

php artisan ui bootstrap

7. Sebagai tambahan kita perlu meng-install ui controller

php artisan ui:controllers

8. Selesai

9. Selesai

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. Contoh:

npm run dev

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 pada video. Buka file

resources/views/layouts/app.blade.php, tambahkan code pada line 12 dan 13.

8. Pada browser buka halaman http://localhost:8000/posts, css bootstrap akan ke load,

sehingga tampilannya menjadi seperti ini

Sebelum

Sesudah

9. Selesai

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. Line 17 - 19.

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 asses() helper menjadi

mix() helper. Line 12 dan 13

8. Pada halaman http://localhost:8000/post, inspect element dan lihat pada bagian <head>.

Parameter id akan selalu berubah ketika kita menjalankan command npm run prod. Ini

memastikan browser untuk meload ulang asset yang baru di compile.

http://localhost:8000/css/app.css?id=6c1de578c1b881653f12

http://localhost:8000/js/app.js?id=28100491929b3b5260f8

9. Selesai

Styling Layout Menggunakan Bootstrap

1. Buka file resources/views/layouts/app.blade.php, pada bagian body ubah menjadi

seperti ini

2. Pada halaman http://localhost:8000/post

3. Selesai

Styling Form Menggunakan Bootstrap

1. Buka file resources/views/posts/partials/form.blade.php, ubah menjadi seperti ini

2. Pada halaman http://localhost:8000/posts/create

3. Selesai

Styling Post List Menggunakan Bootstrap

1. Buka file resources/views/posts//index.blade.php, ubah menjadi seperti ini

2. Buat file resources/views/posts/partials/post.blade.php, ubah menjadi seperti ini

3. Pada halaman http://localhost:8000/posts

4. Selesai

Styling Single Post Menggunakan Bootstrap

1. Buka file resources/views/posts//show.blade.php, ubah menjadi seperti ini

2. Pada halaman http://localhost:8000/post/1

3. Selesai

Styling Flash Message Menggunakan Bootstrap

1. Buka file resources/views/layouts/app.blade.php, perhatikan line 27 - 31

2. Coba membuat post baru sampai success pada halaman

http://localhost:8000/posts/create, maka tampilan flash message nya menjadi seperti ini

3. Selesai

Styling Error Message Menggunakan Bootstrap

1. Buka file resources/views/posts/partials/form.blade.php, perhatikan line 5 - 7 dan line 12

- 20.

2. Coba membuat post baru yang gagal validasi pada halaman

http://localhost:8000/posts/create, maka tampilan error message nya menjadi seperti ini

3. Selesai