Seri Belajar Ruby on Rails Bagian 10 - Menambahkan Css dan Javascript

Hai lanjut lagi, setelah sebelumnya belajar tentang mengimplementasikan authentikasi menggunakan Devise, kali ini kita akan belajar tentang penggunaan assets untuk css dan javascript di Ruby on Rails.

Assets

Di dalam Ruby on Rails ada yang dinamakan 'Asset Pipeline', ini berguna untuk menggabungkan/mengkompres assets seperti Javascript & CSS maupun File Gambar (.jpg, .png dll). Di dalam assets ini juga kita bisa mengkombinasikan dengan fitur yang ada pada gem dengan cara memanggilnya di dalam file css atau js.

• Stylesheets untuk folder penyimpanan file css.
• Javascripts untuk folder penyimpanan file js.
• Images untuk folder penyimpanan file gambar (.jpg, .png dll)

Di dalam folder stylesheets biasanya ada file application.css yang digunakan untuk menginput/memanggil file css

Cara memanggil css dengan menambahkan *= require nama_file_css 

*= require_self digunakan bila file application.css akan digunakan untuk menuliskan code css juga.

*= require_tree . untuk memanggil semua file css yang ada di folder assets/stylesheets

Note: adapun stub yaitu kebalikan dari require untuk excluding/membuang css ketika kita menggunakan require_tree dan suatu css tidak diperlukan, maka gunakan metode stub (Contoh: *= stub nama_file_css)

Tidak jauh beda dengan css, penambahkan javascript biasanya diletakan di folder app/javascripts/packs dengan file induknya application.js

Sama seperti css hanya saja pemanggilan file js menggunakan import, lihat gamabar di atas

Layouts & View

Nah setelah kita setup dibagian assets, untuk memanggil nya di view kita hanya menambahkan code berikut

• Untuk css
  
  

  <%= stylesheet_link_tag    'application', media: 'all' %>
  

  
  
  
• Untuk javascript
  
  

  <%= javascript_include_tag    'application', media: 'all' %>

Sekian untuk pembelajaran kali ini mengenai penambahan Css dan Javascript di Ruby on Rails. Diharapkan tutorial ini menjadi salah satu pembelajaran yang mudah dimengerti bagi kita semua. Stay tune.

Dicky Trifadillah | C-aio Indonesia