Kamis, 03 November 2016

Membuat File Export dengan Format csv dan xls

Buat Project Baru
  1. Membuat Project Baru dengan nama blog
  2. $ rails new blog
    $ cd blog
  3. Membuat CRUD item menggunakan scaffold
  4. $ rails generate scaffold item name:string price:decimal stock:integer
  5. Membuat Database Baru untuk item
  6. $ rake db:create
    $ rake db:migrate
    $ rake db:seed
    $ rails s 
  7. 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
  2. require 'csv'
  3. Tambahkan Code di bawah ini pada index.html.erb
  4. <p>
      Download:
      <%= link_to "CSV", items_path(format: "csv") %> |
      <%= link_to "Excel", items_path(format: "xls") %>
    </p>
  5. Tambahkan Code di bawah ini pada items_controller.rb
  6. def index
        @items = Item.order(:name)
        respond_to do |format|
          format.html
          format.csv { send_data @items.to_csv }
    
        end
    end
  7. Tambahkan Code di bawah ini pada item.rb
  8. 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
  9. Lalu Matikan Server dan Hidupkan Kembali
  10. $ rails s 
  11. Tampilan yang telah di buat seperti ini
  12. Click link 'CSV' untuk download file format .csv
  13. 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
  2. Mime::Type.register "application/xls", :xls
  3. Buat file dengan nama 'index.xls.erb' pada view/items/
  4. Lalu Isikan Code di bawah ini pada views/items/index.xls.erb
  5. <?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>
    
  6. Tambahkan Code dibawah ini pada items_controller.rb
  7. def index
        @items = Item.order(:name)
        respond_to do |format|
          format.html
          format.csv { send_data @items.to_csv }
          format.xls 
        end
    end
  8. Lalu Matikan Server dan Hidupkan Kembali
  9. $ rails s 
  10. Click link 'Excel' untuk download file format .xls

  11. Tampilan file format .xls seperti di bawah ini
Untuk Source Code : Disini

Selasa, 01 November 2016

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! :)