Rabu, 20 Januari 2016

Membuat Chart di Ruby on Rails Menggunakan Chartkick

Pada post kali ini saya akan membahas dasar-dasar penggunaan chartkick untuk Ruby on Rails.

Chartkick adalah sebuah script untuk Ruby on Rails yang digunakan untuk memudahkan kita membuat sebuah grafik/diagram, ya bisa disebut perpustakaannya grafik, karena apa disebuah situs nya yaitu chartkick.com terdapat berbagai macam grafik seperti line chart, pie chart, column chart, bar chart, area chart, geo chart dan masih banyak lagi.

Yang unik pada chartkick yaitu koding nya, dimana kita hanya perlu membuat satu garis koding saja kita dapat membuat chart yang kita mau, penasaran seperti apa? yuk kita bahas di post kali ini!

Sebelum kita membuat chartkick saya akan memberi tahu anda 3 program pendukung chartkick yaitu groupdate, hightop dan active median, ya bisa dibilang mereka temennya si chartkick.

  1. Pertama-tama buat project baru menggunakan MySQL
    $ rails new namaproject -d mysql
    $ cd namaproject
  2. Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya

     gem 'chartkick', '~> 1.2.4' 
     gem 'groupdate', '~> 2.1.1' 
     gem 'active_median', '~> 0.1.0'
    
     
  3.  Lalu ketik kode di bawah ini pada terminal
    $ bundle install
  4. Setelah itu kita buat sebuah model yang akan kita gunakan untuk struktur chart kita. Untuk contoh nya kita buat model Kunjungan yang biasa digunakan untuk grafik pengunjung yang mengunjungi website kita
    $ rails generate model Kunjungan daerah:string berkunjung_pada:datetime load_time:decimal
    $ rake db:create 
    $ rake db:migrate 
  5. Sekarang kita butuh beberapa data, buka seeds.rb (db/seeds.rb)

    Kunjungan.delete_all
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 3.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 1.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 1.0
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 1.day, load_time: 4.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 3.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 3.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 3.days, load_time: 4.5
    Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 3.days, load_time: 3.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 1.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 2.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 1.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 3.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 2.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 3.0
    Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 3.days, load_time: 3.5
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 2.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 2.5
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 1.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 1.5
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 2.5
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 3.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 5.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 4.0
    Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 5.0

  6. Sekarang rake seed nya, ketik kode dibawah ini di terminal
    $ rake db:seed
  7. Buat controller untuk kita membuat tampilan chart nya
    $ rails generate controller home show
  8. Buat root untuk show-nya, buka routes.rb (config/routes.rb)

     root :to => "home#show"
    

  9. Lanjut buka controller home (app/controllers/home_controller.rb

     class HomeController < ApplicationController
      def show
        @kunjungans = Kunjungan.all
      end
     end

  10. Nah, sekarang kita masukan file Google API javascript pada layouts project kita (app/views/layouts/application.html.erb)

     <%= javascript_include_tag "http://www.google.com/jsapi", "chartkick" %> 

  11. Ok semua sudah siap, kita tinggal membuat chart nya pada file show yang telah kita buat tadi (app/views/home/show.html.erb)
 Ada berbagai macam Chart :

Line Chart - Single Series
 <%= line_chart @kunjungans.group_by_day(:berkunjung_pada, format: "%B %d, %Y").count, discrete: true %>;

Line Chart - Multiple Series
 <%= line_chart   Kunjungan.pluck("daerah").uniq.map { |c| { name: c, data: @kunjungans.where(daerah: c).group_by_day(:berkunjung_pada, format: "%B %d, %Y").count }  }, discrete: true %>

Pie Chart
 <%= pie_chart @kunjungans.group(:daerah).count %>

Area Chart
 <%= area_chart @kunjungans.group_by_day(:berkunjung_pada).maximum(:load_time) %>

Column Chart
 <%= column_chart @kunjungans.group(:daerah).count %>

Bar Chart
 <%= bar_chart @kunjungans.group(:daerah).count %>

Geo Chart
 <%= geo_chart @kunjungans.group(:daerah).count %>
NB: untuk geo_chart harus menggunakan nama country kalau ingin terlihat grafik nya, kita ambil contoh menggunakan data static misalnya :

 <%= geo_chart({"France" => 10, "Indonesia" => 99, "Russia" => 45}) %>

Nah sekarang anda bisa melihat chartnya dengan menjalankan server nya dan buka localhost:3000 pada browser anda
$ rails s
kurang lebih seperti ini :



Sekian post kali ini tentang menggunakan chart pada Ruby on Rails, nantikan postingan lain yang lebih menarik lagi, stay on belajarrubyonrails.com

Bye

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