Kamis, 06 September 2018

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)

Contoh folder assets
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 assets/javascripts dengan file induknya application.js

    Sama seperti css hanya saja penulisan code setelah require diganti dengan //=




    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

    Tidak ada komentar:

    Posting Komentar