Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)
Di bagian pertama dari seri ini, Anda belajar bagaimana menggunakan CarrierWave dalam aplikasi Rails Anda. Di bagian kedua ini, Anda akan belajar cara mengaktifkan pengunggahan gambar untuk pengguna Anda menggunakan Devise. Devise adalah solusi otentikasi untuk Rails. Anda juga akan belajar cara menggunakan fog, perpustakaan layanan cloud Ruby yang akan memungkinkan aplikasi Anda terhubung ke Amazon Web Services.
Cukup pembicaraannya—mari kita mulai berbisnis.
Pengaturan Aplikasi Rails
Menghasilkan aplikasi rails baru Anda:
rails new myapp
Buka Gemfile Anda dan tambahkan gems berikut:
***Gemfile*** gem carrierwave gem devise gem mini_magick gem fog
Jalankan bundle install untuk menginstal gems.
Dari terminal Anda, buat controller Pages:
rails g controller Pages index
Arahkan ke config/routes.rb dan tambahkan path root:
***config/routes.rb*** root to: 'pages#index'
Menghasilkan dan Mengkonfigurasi Devise
Fitur pengunggahan akan diintegrasikan ke dalam model User kami bagi pengguna untuk mengunggah avatar. Dari terminal Anda, instal devise:
rails generate devise:install
Generator akan memasang penginisialisasi yang menjelaskan semua opsi konfigurasi Devise. Buka app/views/layouts/application.html.erb di editor teks Anda dan tambahkan kode berikut di atas blok yield:
***app/views/layouts/application.html.erb*** <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>
Pada titik ini Anda dapat menghasilkan model User Anda:
rails generate devise User
Selanjutnya, migrasikan database Anda:
rake db:migrate
Anda perlu mengedit view devise, jadi penting Anda menghasilkan:
rails generate devise:views
Dan itu akan melakukan keajaibannya.
Menggunakan editor teks Anda, buka app/views/devise/registrations/new.html.erb dan edit agar terlihat seperti ini:
***app/views/devise/registrations/new.html.erb***
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => {multipart: :true}) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :avatar do %>
<%= f.file_field :avatar %>
<%= f.hidden_field :avatar_cache %>
<% end %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
Lakukan hal yang sama untuk app/views/devise/registrations/edit.html.erb:
***app/views/devise/registrations/edit.html.erb***
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, multipart: :true }) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class="field">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<% if current_user.avatar.url.present? %>
<%= image_tag(current_user.avatar.url) %>
<%= f.label :remove_avatar do %>
<%= f.check_box :remove_avatar %>
<% end %>
<% end %>
<%= f.file_field :avatar %>
<%= f.hidden_field :avatar_cache %>
<div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
<%= link_to "Back", :back %>
Dengan melakukannya, Anda perlu memasukkan daftar putih avatar untuk devise dan menambahkan kolom avatar ke tabel User. Dari terminal Anda, jalankan migrasi untuk menambahkan kolom avatar baru.
rails g migration add_avatar_to_users avatar:string rake db:migrate
Tambahkan avatar CarrierWave ke model User Anda—model Anda akan terlihat seperti ini:
***models/user.rb***
class User < ActiveRecord::Base
mount_uploader :avatar, AvatarUploader
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
# User Avatar Validation
validates_integrity_of :avatar
validates_processing_of :avatar
private
def avatar_size_validation
errors[:avatar] << "should be less than 500KB" if avatar.size > 0.5.megabytes
end
end
Dalam kode di atas, Anda menambahkan baris mount_uploader di bagian atas kelas User. Ada juga validasi untuk memeriksa integritas dan pemrosesan avatar, di samping metode untuk memastikan bahwa tidak ada gambar yang lebih besar dari 500KB yang diunggah.
Anda perlu menambahkan avatar, avatar_cache, dan remove_avatar ke daftar atribut yang dapat diakses. Melakukan hal ini mudah—cukup buka application_controller.rb Anda dan membuatnya terlihat seperti ini:
***app/controllers/application_controller.rb***
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password, :password_confirmation, :remember_me, :avatar, :avatar_cache) }
devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :password, :password_confirmation, :current_password, :avatar, :avatar_cache, :remove_avatar) }
end
end
Dengan itu, Anda siap untuk mengintegrasikan CarrierWave.
Menyiapkan CarrierWave
Gunakan editor teks Anda, arahkan ke config/initializers dan buat file bernama carrier_wave.rb. Tempel kode di bawah ini:
***config/initializers/carrier_wave.rb***
require 'carrierwave/orm/activerecord'
Ini adalah penginisialisasi yang diperlukan dalam memuat CarrierWave setelah ActiveRecord.
Dari terminal Anda, buat pengunggah:
rails generate uploader Avatar
Ini akan membuat direktori baru yang disebut uploaders di folder app dan file di dalamnya disebut avatar_uploader.rb. Saya telah mengedit isi file agar terlihat seperti yang saya miliki di bawah ini:
***app/uploaders/avatar_uploader.rb***
# encoding: utf-8
class AvatarUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
# Choose what kind of storage to use for this uploader:
storage :fog
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# Create different versions of your uploaded files:
version :thumb do
process :resize_to_fill => [100, 100]
end
version :medium do
process :resize_to_fill => [300, 300]
end
version :small do
process :resize_to_fill => [140, 140]
end
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
def extension_white_list
%w(jpg jpeg gif png)
end
end
Anda memerlukan baris MiniMagick untuk menghasilkan versi gambar yang berbeda. Saya menyertakan tiga versi gambar. MiniMagick membuat perubahan ukuran ke versi ini sebisa mungkin. Blok kode terakhir memastikan bahwa tidak ada ekstensi file selain yang tercantum di sini diunggah.
Pengaturan AWS
Untuk tutorial ini, kami akan mengunggah gambar kami ke Amazon Web Services. Jika Anda belum memiliki akun, lompat ke halaman pendaftaran dan buat akun gratis.
Setelah selesai, Anda perlu membuat bucket untuk menyimpan gambar Anda. Ketika disana, pilih Create Bucket untuk membuka kotak dialog. Masukkan nama untuk keranjang dan pilih wilayah. Setelah selesai, pilih Create.
Buka Gemfile Anda dan tambahkan gem ini, dan bundle install setelah selesai.
gem 'figaro'
Dari terminal Anda, jalankan bundle exec figaro install. Ini akan membuat file baru config/application.yml dan menambahkannya ke .gitignore aplikasi Anda. Anda memerlukan file ini untuk menjaga id akses AWS dan kunci rahasia Anda tetap aman.
Untuk menemukan id akses AWS dan kunci rahasia Anda, buka Amazon Web Services dan klik nama akun Anda, yang terletak di sudut kanan konsol.
Dari menu drop-down, pilih Security Credentials, dan klik tombol Continue to Security Credentials. Di halaman yang tampil, pilih Access Keys (ID Kunci Akses dan Kunci Akses Rahasia). Klik tombol Create New Access Key untuk membuat kunci baru, dan salin ke editor.
Di editor teks Anda, navigasikan ke config/application.yml dan tempelkan hal-hal berikut:
***config/application.yml*** aws_access_id: Enter access_id here aws_access_secret_key: Enter access_key here
Ganti baris seperti yang disebutkan di atas.
Arahkan ke config/initializers, buat file bernama storage.rb, dan tempelkan yang berikut:
***config/initializers/storage.rb***
CarrierWave.configure do |config|
config.storage = :fog
config.fog_credentials = {
provider: 'AWS',
aws_access_key_id: ENV["aws_access_id"],
aws_secret_access_key: ENV["aws_access_secret_key"],
region: 'us-west-2'
}
config.fog_directory = "tutsplus-avatar"
config.fog_public = false
end
Menurut konfigurasi di atas, wilayah untuk keranjang saya adalah us-west-2, dan nama keranjangnya adalah tutsplus-avatar. Gantilah dengan informasi tentang keranjang Anda.
Mulai rails server Anda dan arahkan browser Anda ke https://localhost:3000/users/sign_up.
Menetapkan Avatar Default
Dalam aplikasi Anda, Anda mungkin ingin menetapkan avatar default untuk pengguna yang memilih untuk tidak mengunggah avatar. Melakukan ini mudah.
Buat folder di app/assets/images yang disebut fallback dan jatuhkan gambar default Anda di dalamnya. Gunakan editor teks Anda, arahkan ke app/uploaders/avatar_uploader.rb dan tempelkan kode di bawah ini:
***app/uploaders/avatar_uploader.rb***
def default_url(*args)
ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default-avatar.gif"].compact.join('_'))
end
Pastikan untuk mengubah default-avatar.gif ke nama gambar Anda.
Kesimpulan
Sekarang Anda tahu cara mengaktifkan pengunggahan gambar untuk pengguna Anda. Ini menambahkan fitur penting ke aplikasi rails Anda. Saya harap Anda bersenang-senang. Di bagian selanjutnya, kita akan melihat PaperClip. Tanggapan Anda diterima.
