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

Tidak ada komentar:

Posting Komentar