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
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";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
tambahkan kode :
//=require adminlte
//=require jQuery-2.1.4.min
//=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
*= 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>
<%= 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
dicky.trifadillah@c-aio.com | Developer at C-aio indonesia
I had to use Google translation since I dont understand your language but this was pretty useful so thank you!!
BalasHapus@alvaro thanks for visiting.. my pleasure this tutorial was useful for you.. :)
Hapushi Rendi, artikel ini sangat bermanfaat, terutama yg belajar RoR spt saya,
BalasHapusnamun 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
yang pertama pastikan bundle install nya berjalan dengan baik tanpa error.
Hapusjangan lupa step setelah download dari link diatas
- download template AdminLTE
ada folder yang harus dipastikan ter copy ke
vendor/assets/stylesheets
Pak sya dah ngikutin semua tahapan nya, cuman kenapa tampilan nya gak ke load?
BalasHapus