Membuat Simple Shopping Cart pada Aplikasi Rails

Kita Akan membuat satu fitur yang umum terdapat pada online shop yaitu shopping cart. user bisa menambahkan item yang dipilih ke keranjang pembelian

Berikut list gem file yang akan kita gunakan, Silahkan klik untuk mengunjungi halaman dokumentasi gem berikut

1. devise
2. twitter-bootstrap-rails
3. slim-rails
4. ancestry
5. paperclip
6. faker
7. shopping_cart

Disini saya memakai OS ubuntu 14.04 dengan rails versi 4.2.4. Jadi pastikan dulu kalian memakai rails 4

Langkah pertama kita buat project baru

$ rails _4.2.4_ new testapp2 -d postgresql

Buka dan edit MyStore/Gemfile dan tambahkan gem yang kita butuhkan

gem 'devise'
gem "twitter-bootstrap-rails"
gem "slim-rails"
gem 'ancestry'
gem 'paperclip'
gem 'faker'
gem 'acts_as_shopping_cart', '~> 0.4.0'

$ cd MyStore

$ bundle install

Langkah selanjutnya kita akan melakukan generate settings devise, model, table dan column yang kita butuhkan

$ rails generate devise:install

$ rails generate devise user

$ rails g model category name:string description:text ancestry:string

$ rails generate paperclip category image

$ rails g model product name:string code:string weight:decimal price:decimal category:references

$ rails generate paperclip product image

$ rails  g model order number:string user:references status:string total_price_items:decimal total_price_delivery:decimal total_all_price:decimal receiver_name:string receiver_phone_number:string receiver_mobile_number:string receiver_state:string receiver_city:string receiver_address:text receiver_postal_code:string destination_code:string service_delivery:string

$ rails g model shopping_cart user:references order:references delivery_method:string

$ rails g model shopping_cart_items owner_id:integer owner_type:string quantity:integer item_id:integer item_type:string price_currency:string price_cents:decimal

Jangan lupa setting database.yml kalian dengan username dan password ketika instalasi Rails

$ rake db:create

$ rake db:migrate

Selanjutnya kita generate controller dan view yang kita butuhkan

$ rails g controller shopping index

$ rails generate bootstrap:install static

$ rails g bootstrap:layout application

Langkah berikutnya kita akan melakukan edit dan create beberapa file tolong diperhatikan file dan baris code jika kalian ingin melakukan copy dan paste

Mengatur halaman view dan controller yang akan kita gunakan edit file MyStore/config/route.rb

Rails.application.routes.draw do
  devise_for :users
  get 'home/index'
  get 'shopping/index'
  get 'shopping/cart_items'
  post 'shopping/create_order'
  post 'shopping/add_to_cart'
  root :to => "shopping#index"
end

Edit File MyStore/app/controllers/application_controller.rb
keterangan untuk method shopping cart yaitu untuk mengetahui apakah user sudah mempunyai shoppingcart atau belum bila tidak ada ada akan dibuatkan

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_filter :shopping_cart

  def shopping_cart
     if current_user.present?
        shopping_cart = ShoppingCart.where('order_id is null').where(user_id: current_user.id).try(:last)
        shopping_cart = shopping_cart.present? ? shopping_cart : ShoppingCart.create(user_id: current_user.id)
        @shopping_cart = shopping_cart
     end
  end
end

Edit File MyStore/app/controllers/shopping_controller.rb

Keterangan fungsi sesuai dengan namanya add_to_cart untuk menambahkan barang yang kita pilih ke keranjang belanja dan create_order untuk membuat pesanan

class ShoppingController < ApplicationController
 before_filter :authenticate_user!, unless: :devise_controller?, except: [:index]
 def index
  category_id = params[:category]
  unless category_id.present?
    @products = Product.all
  else
    @products = Product.where(:category_id => category_id)
  end
 end
 
 def add_to_cart
   quantity = params[:quantity].to_i
   product_id = params[:product]
   @product = Product.find(product_id)
   @shopping_cart.add(@product, @product.price, quantity)
   redirect_to  request.referer || "/"
   flash[:notice] = "#{@product.name} has been added to the Cart."
 end

 def create_order
  total_price_delivery = 0
  total_price_items = @shopping_cart.total_items
  total_all_price = total_price_delivery + total_price_items

  @order = Order.new
  @order.number = "#{current_user.id}-#{Time.now.to_i}"
  @order.user_id = current_user.id
  @order.total_price_items = total_price_items
  @order.total_price_delivery = total_price_delivery
  @order.total_all_price = total_all_price
  @order.save
  @shopping_cart.update(:order_id => @order.id)
  redirect_to root_path
  flash[:notice] = "Your Order has been created"
 end

 def cart_items
  render :template => 'shopping/cart_items'
 end
end

Bila ada dua application file di folder layout hapus yang berakhiran .erb karena kita akan memakai slim biar code html terlihat sedikit dan rapih. Disini kita akan memasang navbar menu dengan bootraps
Edit File MyStore/app/view/layout/application.html.slim

doctype html
html lang="en"
  head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    title= content_for?(:title) ? yield(:title) : "MyStore"
    = csrf_meta_tags
    = stylesheet_link_tag "application", :media => "all"
    = favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
    = favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
    = favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
    = favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
    = favicon_link_tag 'favicon.ico', :rel => 'shortcut icon'
    = javascript_include_tag "application"
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"
  body
    .navbar.navbar-default.navbar-static-top
        .container
          button.navbar-toggle type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand href="/"MyStore
          .navbar-collapse.collapse.navbar-responsive-collapse
            ul.nav.navbar-nav.navbar-right
              - if current_user
                li= link_to "Cart Item (#{@shopping_cart.cart_items.count})", '/shopping/cart_items'
                li= link_to current_user.email, '/'
                li= link_to "Logout", destroy_user_session_path, data: { method: :delete }
              - else
                li= link_to 'Login', '/users/sign_in'
    .container
      .row
        .col-lg-9
          = bootstrap_flash
          = yield
        .col-lg-3
          .well.sidebar-nav
            h3 Categories
            ul.nav.nav-list
              li= link_to 'All', "/shopping/index"
              - Category.all.each do |category|
                li= link_to category.name, "/shopping/index?category=#{category.id}"
      footer
        p © Company 2016

Kita akan membuat function helper untuk menampilkan format uang 10000 menjadi Rp 10.000
Edit File Mystore/app/helpers/application_helper.rb

module ApplicationHelper
  def data_currency(data)
    number_to_currency(data, unit: 'Rp. ', :precision => 0)
  end
end

Edit File MyStore/app/view/shopping/index.html.slim

- @products.each do |product|
  .col-md-3.col-sm-6.hero-feature
    .thumbnail
      = image_tag product.image(:medium)
      .caption
        .title-voucher
          h4
            = "#{product.name.last(14).capitalize}.."
          = number_to_currency(product.price, unit: 'IDR ')
        .clearfix
      form.form-search action = "/shopping/add_to_cart" method="post"
        input name="authenticity_token" type="hidden" value=form_authenticity_token
        input name="product" type="hidden" value="#{product.id}"
        .input-group
          span.input-group-btn
            button.btn.btn-search type="submit"  Add to cart
          input.form-control name= "quantity" value="1" type="text"

Buat file File MyStore/app/view/shopping/cart_items.html.slim

- if @shopping_cart.cart_items.present?
  table.table
    thead
      tr
        th style="text-align:left" Product
        th style="width:100px" Kuantitas
        th Harga Satuan
        th Total Harga
    tbody
      - @shopping_cart.cart_items.each do |item|
        tr style="border-bottom:1px solid #ccc"
          td
            = item.product.name
          td
            input.form-control.quantity_change style="text-align: center;" name="kuantitas" placeholder="0" type="text" value = "#{item.quantity}" item = "#{item.id}"/
          td style="text-align:center"
            = data_currency(item.product.price)
          td
            div style="float:right"
              div id=("item_#{item.id}")
                = data_currency(item.subtotal)
- else
  center
    p No Item in Cart

- if @shopping_cart.cart_items.present?
  .footer_pembayaran
    h3 style="float:right;width: 176px;"
      div style="float:right"
        .total_items
          = data_currency(@shopping_cart.total_items)
    br clear="both"
  form.form-search action = "/shopping/create_order" method="post"
    input name="authenticity_token" type="hidden" value=form_authenticity_token
    button.btn-primary.pull-right type="submit"  Buy Now

Langkah selanjutnya  memasang relasi dan setting paperclip di model

Edit File MyStore/app/model/product.rb

class Product < ApplicationRecord
  belongs_to :category
  has_attached_file :image, styles: { medium: "300x300>", thumb: "66x66>" }, default_url: "/images/:style/missing.png"
  validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]
end

Edit File MyStore/app/model/category.rb

class Category < ActiveRecord::Base
  has_attached_file :image, styles: { medium: "300x300>", thumb: "66x66>" }, default_url: "/images/:style/missing.png"
  validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]
  has_ancestry
end

Edit File MyStore/app/model/shopping_cart.rb

class ShoppingCart < ActiveRecord::Base
  acts_as_shopping_cart
  belongs_to :user
  belongs_to :order

   def subtotals
    self.cart_items.map { |i| i.subtotal }
  end

  def total_items
   subtotals.sum
  end
end

Edit File MyStore/app/model/shopping_cart_item.rb

class ShoppingCartItem < ActiveRecord::Base
  acts_as_shopping_cart_item
  belongs_to :product,
             :class_name=>"Product",
             :foreign_key=>"item_id"
end

Langkah selanjutnya membuat dumy data biar data product dan category langsung ada tanpa harus kita create dulu. Maksud dari 10.times dan 12.times yaitu kita akan membuat product sebanyak 10 kali dan category sebanyak 12 kali

Edit file File MyStore/db/seed.rb. Kode dibawah untuk membuat dumy data 

# faker data table category
10.times do 
  category = Category.new
  category.name = Faker::Commerce.department
  category.description = Faker::Lorem.paragraph
  category.image = File.open(Dir.glob(File.join(Rails.root, 'sampleimages', '*')).sample)
  category.save
end

# faker data table category
12.times do 
  product = Product.new
  product.name = Faker::Commerce.product_name
  product.code = Faker::Number.hexadecimal(3)
  product.weight = Faker::Number.number(1)
  product.price = Faker::Number.decimal(6)
  product.image = File.open(Dir.glob(File.join(Rails.root, 'sampleimages', '*')).sample)
  product.category_id = Category.pluck(:id).sample
  product.save
end

Untuk membuat dummy image kita buat folder 'sampleimages' di dalam folder MyStore dan copy image yang kamu punya ke dalam folder tersebut

$ rake db:seed

$ rails s

Buka di browser localhost:3000 bila berjalan sempurna maka akan tampil seperti gambar berikut

Gambar halaman list product

Gambar Halaman login

Gambar Halaman cart item

Oke sampai sini selesai bila ada pertanyaan silahkan comment dibawah

Cara Membuat Kalender Dengan Jquery fullcalendar.js

Kali ini kita akan membuat events calendar menggunakan jquery fullcalendar dan ruby on rails

Pertama kita download dahulu jquery fullcalendarnya disini

Kemudian kita buat project baru

$ rails new fullcalendar -d postgresql

$ cd fullcalendar

$ rake db:create

Buat crud events

$ rails g scaffold event title:string start:datetime end:datetime color:string

$ rake db:migrate

Extract dan buka folder fullcalendar yang kita telah kita download tadi
Copy dan paste file 
- Fullcalendar.js ke fullcalendar/app/assets/javascripts
- Fullcalendar.css ke fullcalendar/app/assets/stylesheets
- Lib/moment.min.js ke fullcalendar/app/assets/javascripts

Edit file fullcalendar/app/assets/javascripts/application.js tambahkan require untuk file yang baru

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require moment.min
//= require fullcalendar
//= require_tree .

Edit file fullcalendar/app/views/events/index.html.erb Tambahkan tag html id fullcalendar

<div id = "fullcaendar"></div>

Edit file fullcalendar/app/views/events/_event.json.jbuilder Edit isinya seperti berikut 

date_format = event.all_day_event? ? '%Y-%m-%d' : '%Y-%m-%dT%H:%M:%S'

json.id event.id
json.title event.title
json.start event.start.strftime(date_format)
json.end event.end.strftime(date_format)

json.color event.color unless event.color.blank?
json.allDay event.all_day_event? ? true : false

json.update_url event_path(event, method: :patch)
json.edit_url edit_event_path(event)

Edit file fullcalendar/app/model/event.rb  Tambahkan method all_day_event?

class Event < ApplicationRecord
  def all_day_event?
    self.start == self.start.midnight && self.end == self.end.midnight ? true : false
  end
end

Edit file fullcalendar/app/assets/javascripts/events.coffee tambahkan baris code berikut 

date_range_picker = undefined
date_range_picker = ->
  $('#fullcaendar').fullCalendar
    firstDay: 1
    lang: 'es'
    header:
      left: 'title'
      center: ''
      right: 'prev,next'
    eventSources: '/events.json'
  return

$(document).on 'turbolinks:load', date_range_picker

Edit fullcalendar/config/routes.rb tambahkan root untuk events

Rails.application.routes.draw do
  resources :events
  root to: "events#index"
end

Tinggal turn on server

$ rails s

Buka di browser http://localhost:3000/events/new untuk menambahkan data event baru

http://localhost:3000 untuk akses halaman utama Hasilnya akhirnya seperti gambar berikut

Selesai, thanks

Membuat File Export dengan Format csv dan xls

Buat Project Baru

1. Membuat Project Baru dengan nama blog

$ rails new blog

$ cd blog

2. Membuat CRUD item menggunakan scaffold

$ rails generate scaffold item name:string price:decimal stock:integer

3. Membuat Database Baru untuk item

$ rake db:create

$ rake db:migrate

$ rake db:seed

$ rails s 

4. Silahkan cek localhost:3000/items, untuk memastikan kalau CRUD sukses dibuat

Membuat File Export Format csv

1. Masukkan Code di bawah ini pada config/application.rb

require 'csv'

2. Tambahkan Code di bawah ini pada index.html.erb

<p>
  Download:
  <%= link_to "CSV", items_path(format: "csv") %> |
  <%= link_to "Excel", items_path(format: "xls") %>
</p>

3. Tambahkan Code di bawah ini pada items_controller.rb

def index
    @items = Item.order(:name)
    respond_to do |format|
      format.html
      format.csv { send_data @items.to_csv }

    end
end

4. Tambahkan Code di bawah ini pada item.rb

def self.to_csv(options = {})
    CSV.generate(options) do |csv|
      csv << column_names
      all.each do |item|
        csv << item.attributes.values_at(*column_names)
      end
    end
end

5. Lalu Matikan Server dan Hidupkan Kembali

$ rails s 

6. Tampilan yang telah di buat seperti ini

7. Click link 'CSV' untuk download file format .csv
8. Tampilan file format .csv seperti di bawah ini

Membuat File Export Format xls

1. Masukkan Code di bawah ini pada config/initializers/mime_types.rb

Mime::Type.register "application/xls", :xls

2. Buat file dengan nama 'index.xls.erb' pada view/items/
3. Lalu Isikan Code di bawah ini pada views/items/index.xls.erb

4. <?xml version="1.0"?>
   <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
     xmlns:o="urn:schemas-microsoft-com:office:office"
     xmlns:x="urn:schemas-microsoft-com:office:excel"
     xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
     xmlns:html="http://www.w3.org/TR/REC-html40">
     <Worksheet ss:Name="Sheet1">
       <Table>
         <Row>
           <Cell><Data ss:Type="String">Name</Data></Cell>
           <Cell><Data ss:Type="String">Price</Data></Cell>
           <Cell><Data ss:Type="String">Stock</Data></Cell>
         </Row>
       <% @items.each do |item| %>
         <Row>
           <Cell><Data ss:Type="String"><%= item.name %></Data></Cell>
           <Cell><Data ss:Type="Decimal"><%= item.price %></Data></Cell>
           <Cell><Data ss:Type="Integer"><%= item.stock %></Data></Cell>
         </Row>
       <% end %>
       </Table>
     </Worksheet>
   </Workbook>
   

5. Tambahkan Code dibawah ini pada items_controller.rb

def index
    @items = Item.order(:name)
    respond_to do |format|
      format.html
      format.csv { send_data @items.to_csv }
      format.xls 
    end
end

6. Lalu Matikan Server dan Hidupkan Kembali

$ rails s 

7. Click link 'Excel' untuk download file format .xls



8. Tampilan file format .xls seperti di bawah ini

Untuk Source Code : Disini

Menambahkan Watermark Dengan gem 'carrierwave'

Watermark (tanda air) adalah sebuah tulisan atau logo yang disematkan pada karya digital maupun manual, misal gambar dan video. Watermark ditujukan untuk mengetahui identitas dari seseorang yang membuat karya tersebut. Watermark bisa berupa tulisan singkat ataupun logo yang berisi informasi lengkap tentang pemilik asli karya tersebut. Bisa juga digunakan sebagai media promosi.

Gems yang akan digunakan :

1. gem 'carrierwave'
2. gem 'mini_magick'

Buat Project Baru 

1. Membuat project baru

   $ rails new Watermark

   $ cd Watermark

2. Edit Gemfile dan tambahkan kode berikut

     gem 'carrierwave'
     gem 'mini_magick'  

   $ bundle install

Membuat CRUD untuk User

1. Buat CRUD untuk User dengan menggunakan fungsi Scaffold

   $ rails generate scaffold User nama:string alamat:string handphone:string

2. Buat database baru lalu migrate untuk generate table User
   

   $ rake db:create

   $ rake db:migrate

   $ rails s 

3. Silahkan cek localhost:3000/users, untuk memastikan kalau CRUD bisa dilakukan

Implementasi Carrierwave 

1. Ketik kode berikut untuk men-generete file uploader nya yang akan disimpan di, app/uploaders/ 
   

   $ rails generate uploader Image

2. Tambahkan field "image" untuk menyimpan gambar yang akan di upload kan ke database, ketik kode berikut
   

   $ rails generate migration AddImageToUsers image:string

3. Edit model User pada app/models/user.rb, tambahkan kode berikut
   

   class User < ApplicationRecord
     mount_uploader :image, ImageUploader
   end 

   $ rake db:migrate

4. Tambahkan permit params untuk field ":image" pada app/controllers/users_controller.rb
   

       # Never trust parameters from the scary internet, only allow the white list through.
       def user_params
         params.require(:user).permit(:nama, :alamat, :handphone, :image)
       end

5. Edit Form view nya pada app/views/users/_form.html.erb, lalu tambahkan kode berikut setelah div :handphone
   

     <div class="field">
       <%= f.label :image %>
       <%= f.file_field :image %>
     </div>

6. Edit Index view pada app/views/index.html.erb, dan tambahkan tag <th> dengan nama "Photo Profil" juga <td> untuk user.image
   

   <th>Photo Profile</th>

   <td><%= user.image %></td> 

7. Edit Show view pada app/views/users/show.html.erb, tambahkan kode berikut setelah tag <p> handphone
   

   <p>
     <strong>Photo Profile:</strong>
     <%= @user.image %>
     <br>
     <%= image_tag @user.image_url.to_s %>
   </p> 

8. Restart server, lalu edit data dan upload kan gambar nya

Resize Gambar

1. Setelah selesai dengan view nya sekarang kita tambahkan kode pada file uploader yang sudah di generate tadi pada app/uploaders/image_uploader.rb, untuk meresize gambar nya

   class ImageUploader < CarrierWave::Uploader::Base
     include CarrierWave::MiniMagick
   
     storage :file
   
     def store_dir
       "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
     end
   
     version :thumb_profile do
       process :resize_to_fill => [370, 229]
     end
   end

2. Untuk melihat perbedaan nya edit lagi Show view pada app/views/users/show.html.erb, dan rubah kode image_tag. Lalu edit lagi data nya dan reupload gambar nya
   

   <p>
     <strong>Photo Profile:</strong>
     <%= @user.image %>
     <br>
     <%= image_tag @user.image_url(:thumb_profile).to_s %>
   </p>

Menambahkan Watermark

1. Siapkan gambar untuk dijadikan watermark pada gambar yang sudah di upload sebelum nya (gambar watermark harus lebih kecil dari gambar yang sudah di upload), lalu simpan gambar nya di folder project Watermark/public 
2. Edit app/uploaders/image_uploader.rb, tambahkan kode berikut
   

   class ImageUploader < CarrierWave::Uploader::Base
     include CarrierWave::MiniMagick
   
     storage :file
   
     def store_dir
       "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
     end
   
     version :thumb_profile do
       process :resize_to_fill => [370, 229]
       process :watermark => "#{Rails.root}/public/chrome.png"
     end
   
     def watermark(path_to_file)
       manipulate! do |img|
         img = img.composite(MiniMagick::Image.open(path_to_file), "jpg") do |c|
           c.gravity "SouthEast"
         end
       end
     end
   end

3. Edit satu data yang sudah kalian buat dan re-upload ulang gambar nya

Untuk dokumentasi gem Carrierwave : Carrierwave
My project source code Watermark
 
Happy Coding! :)

Cara Rotating Rails Logs

Log adalah berkas (file) yang dibuat oleh server untuk merekam seluruh informasi dari order-order atau permintaan yang dikirimkan oleh klien kepada server dengan waktu yang tepat beserta hasil pemrosesannya. Log akan merekam terus semua kegiatan request ke server ke dalam sebuah file dan file itu ukuranya akan semakin membesar tujuan rotating production log adalah untuk mengatur size dan file log

 Langkah untuk melakukan log rotate

1. Masuk ke production server terlebih dahulu 
2. Periksa list log pada folder aplikasi untuk rails biasanya berada pada folder log
3. Buka file /etc/logrotate.conf mengunakan vim atau nano
4. Tambahkan path aplikasi kita dan value info untuk log 

/home/deploy/APPNAME/current/log/*.log {
  daily
  missingok
  rotate 7
  compress
  delaycompress
  notifempty
  copytruncate
}

5. Berikut penjelasan untuk nama value
   

    - daily – Rotate the log files each day. You can also use weekly or monthly here instead  
    - missingok – If the log file doesn’t exist, ignore it  
    - rotate 7 – Only keep 7 days of logs around  
    - compress – GZip the log file on rotation  
    - delaycompress – Rotate the file one day, then compress it the next day so we can be sure that it won’t interfere with the Rails server  
    - notifempty – Don’t rotate the file if the logs are empty  
    - copytruncate – Copy the log file and then empties it. This makes sure that the log file Rails is writing to always exists so you won’t get problems because the file does not actually change. If you don’t use this, you would need to restart your Rails application each time.  
   

6. Setelah selesai simpan perubahan 
7. Kemudian untuk melakukan check manual run code berikut
sudo /usr/sbin/logrotate -f /etc/logrotate.conf
8. Periksa file pada folder log aplikasi bila berhasil akan ada file seperti berikut 

9. Selanjutnya kita tinggal mengatur jadwal untuk melakukan deleted log . kita bisa menggunakan gem whenever documentasi disini

Membuat Barcode di Ruby on Rails Menggunakan Barby

1. Pertama buat projek baru

2. Tambahkan gem 'barby' pada Gemfile kalian

3. Lalu ketik kode dibawah ini pada terminal, untuk menginstall gem

4. Setelah itu kita langsung saja buat CRUD untuk barcode nya, ketik kode dibawah ini pada
    terminal

5. Tambahkan library pada config/application.rb kalian

6. Tambahkan kode berikut pada controller/barcodes_controller.rb di bagian fungsi "new"

7. Sebelum ditampilkan di view, terlebih dahulu kita tambahkan kode di
    app/assets/stylesheets/application.css kalian, Barby::HtmlOutputter akan merepresentasikan
    barcode sebagai tabel.

8. Terakhir pada app/views/barcodes/show.html kalian tambahkan kode berikut

9. Jalankan server, ketik pada terminal

10. Buka browse, lalu masuk link ini http://0.0.0.0:3000/barcodes
11. Tambahkan dulu satu data bebas, dan lihat hasil nya

12. Enjoy :)

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

dicky.trifadillah@c-aio.com | Developer at C-aio indonesia