Senin, 18 Januari 2016

Implementasi AdminLTE pada Ruby on Rails

Kali ini kita akan belajar tentang cara mengimplementasikan sebuah template dari Bootstrap pada project rails kamu.

Yang akan saya implementasikan sekarang ada template yang bernama AdminLTE, tentu tidak asing lagi bukan bagi kalian mendengar nama template tersebut. Ya, template yang memiliki tampilan yang responsive ini sangat banyak diminati oleh para developer website di dunia, tidak hanya tampilannya saja AdminLTE juga memiliki banyak fitur-fitur menarik lohh...

anda bisa melihat deskripsi nya di : https://almsaeedstudio.com/

https://almsaeedstudio.com/preview

- pertama-tama  buat rails seperti biasa :

$ rails new namaproject

- buka project tersebut dengan text editor dan buka Gemfile nya
- ubah gem 'jquery-rails' menjadi gem 'jquery-rails',         '4.0.3'
- dan tambahkan kode gem dibawah ini :

gem 'bootstrap-sass',       '3.2.0.0'
gem 'font-awesome-sass'

source 'https://rails-assets.org/' do
  gem 'rails-assets-adminlte'

end

- setelah di save ketik pada terminal :

$ bundle install

- buat file baru app/assets/stylesheet/custom.css.scss dan paste kode berikut :

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
 
- setelah itu buka application.js (app/assets/javascripts/application.js)

 tambahkan kode :

//=require adminlte
//=require jQuery-2.1.4.min

  *tulis kode di atas :

//= require_tree .

- download template AdminLTE :
  https://almsaeedstudio.com/download/AdminLTE-master
- buka folder template AdminLTE


- buka folder dist/css/skins copy skin-blue.css
- buka folder project rails anda, buka folder vendor/assets/stylesheets
- paste skin-blue.css pada folder tersebut
- buka folder plugins/jQuery/ (pada folder template AdminLTE)
- copy jQuery-2.1.4.min.js
- buka folder vendor/assets/javascripts/
- paste jQuery-2.1.4.min.js
- edit bagian code pada application.css (app/assets/stylesheets/application.css)

 tambahkan kode :

 *= require adminlte
 *= require skin-blue

  *tulis kode di atas :

*= require_tree .

- buka folder AdminLTE lagi dan buka starter.html pada text editor
- copy kodingnya dari <body> sampai </body>
- paste kode nya ke app/views/layouts/application.html.erb
    1. hapus kode :

<body>
<%= yield %>
</body>

     2. paste koding dari starter.html tadi dibawah kode </head>
     3. tambahkan <%= yield %> pada


- buat indexnya, ketik pada terminal :

$ rails generate controller home index

- buka routes.rb letaknya di config/routes.rb dan tambahkan koding ini :

root :to => "home#index"

- Untuk menjalankan server, ketik pada terminal :

$ rails s

- buka localhost:3000 pada browser anda .

contohnya seperti ini :


Catatan :
skin bisa diubah sesuai css yang di copy pada vendor/stylesheets dan require pada application.css harus sesuai dengan nama file yang ada di vendor/stylesheets

5 komentar:

  1. I had to use Google translation since I dont understand your language but this was pretty useful so thank you!!

    BalasHapus
    Balasan
    1. @alvaro thanks for visiting.. my pleasure this tutorial was useful for you.. :)

      Hapus
  2. hi Rendi, artikel ini sangat bermanfaat, terutama yg belajar RoR spt saya,
    namun ada yg ingin saya tanyakan, setelah membaca dan mengikuti instruksi di artikel ini, hasilnya kurang, karena CSS nya gakk load, kira2 apa yg terlewat dari saya? terimakasih

    BalasHapus
    Balasan
    1. yang pertama pastikan bundle install nya berjalan dengan baik tanpa error.

      jangan lupa step setelah download dari link diatas

      - download template AdminLTE

      ada folder yang harus dipastikan ter copy ke
      vendor/assets/stylesheets

      Hapus
  3. Pak sya dah ngikutin semua tahapan nya, cuman kenapa tampilan nya gak ke load?

    BalasHapus