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

Comments

Post a Comment

Popular posts from this blog

Seri Belajar Ruby on Rails Bagian 9 - Membuat Autentikasi dengan Devise

Image
Setelah pada artikel sebelumya kita telah berhasil membuat validasi, relasi, dan menggunakan scope pada Rails, selanjutnya kita akan membuat fitur autentikasi  dengan menggunakan  Devise. Devise ? Untuk  apa  ? Devise  adalah salah satu gem pada  Rails yang berfungsi untuk menangani masalah autentika dengan mudah. Devise memiliki kelebihan sebagai  berikut. Rack based Lengkap dengan  Model, View, dan Cotroller Megizinkan suatu aplikasi untuk memiliki multiple model untuk melakukan  autentikasi Dibuat secara modularitas, sehingga memudahkan penggunaan gem ini dengan hanya menggunakan fitur/module yang dibutuhkan. Gem ?.  Apa itu gem ?. Pada Rails terdapat file konfigurasi yang digunakan untuk me-list gem mana saja yang diguakan. Gem ini seperti library atau perpustakaan yang biasanya dapat ditemukan di RubyGems.  Cara Menambahkan Gem Devise pada Rails Untuk menginstall devise ini dapat dilakukan dengan membuka Gemfile pada folde...
Read more

Seri Belajar Ruby on Rails Bagian 6 - Membuat Table & Dummy Data

Image
Setelah belajar membuat aplikasi tugas sederhana melalui scaffold, selanjutnya pada pembahasan kali ini adalah table dan dummy data. Untuk pembahasan kali ini gunakan project sebelumnya, karena kita akan melanjutkan aplikasi tersebut menjadi aplikasi yang lebih terpadu. A. Definisi Table di Database Kata database dan table sudah sering kita dengar. Database secara singkat dianalogikan seperti lemari arsip yang berfungsi untuk menyimpan data. Lalu table adalah arsip, dimana dalam arsip tersebut terdapat data-data tertentu.  B. Membuat Table di Rails Framework Rails menyediakan fitur untuk melakukan pembuatan table, penambahan kolom pada table, dsb dengan menggunakan migration. Migration di Rails disimpan dalam folder db/migrate . Untuk membuat file migrasi telah dijelaskan di Seri Belajar Ruby on Rails Bagian 5 - Membuat Aplikasi Rails Pertamamu dengan cara $ rails generate migration CreateCategories Yang akan dihasilkan oleh generator adalah file migration di folder db/migrate...
Read more

Seri Belajar Ruby on Rails Bagian 8 - Membuat Validasi, Relasi dan Scope

Image
Pada artikel sebelumnya , kita telah mempelajari mengenai Active Record dan penggunaan Active Record pada  Rails. Sebagai contoh pada tutorial sebelumnya, kita membuat aplikasi homework management yang berfungsi untuk melakukan manajemen tugas harian sekolah ataupun tugas kuliah. Pada aplikasi tersebut terdapat dua buah model, yaitu category dan homework. Selain itu, pada aplikasi juga terdapat dua buah tabel, yaitu tabel categories dan tabel homeworks. Aplikasi ini sudah bisa melakukan CRUD. Akan tetapi, aplikasi yang dibuat masih sederhana. Misalnya saja, jika user melakukan pengisian data homework baru dan pada salah satu kolom tidak diisi, data tersebut masih bisa masuk ke dalam database . Untuk itulah dibutuhkan validasi. Terakhir kali, tampilan aplikasi yang sudah kita buat adalah sebagai berikut. A. VALIDASI Apa itu Validasi ? Validasi digunakan untuk memastikan hanya data yang valid yang dapat masuk ke database. Contohnya, mungkin saja penting untuk memastikan bahwa us...
Read more