Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. Ruby
Code

Pengunggahan Gambar Rails: Menggunakan CarrierWave dan Devise

Difficulty:IntermediateLength:MediumLanguages:

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:

Buka Gemfile Anda dan tambahkan gems berikut:

Jalankan bundle install untuk menginstal gems.

Dari terminal Anda, buat controller Pages:

Arahkan ke config/routes.rb dan tambahkan path root:

Menghasilkan dan Mengkonfigurasi Devise

Fitur pengunggahan akan diintegrasikan ke dalam model User kami bagi pengguna untuk mengunggah avatar. Dari terminal Anda, instal devise:

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:

Pada titik ini Anda dapat menghasilkan model User Anda:

Selanjutnya, migrasikan database Anda:

Anda perlu mengedit view devise, jadi penting Anda menghasilkan:

Dan itu akan melakukan keajaibannya.

Menggunakan editor teks Anda, buka app/views/devise/registrations/new.html.erb dan edit agar terlihat seperti ini:

Lakukan hal yang sama untuk app/views/devise/registrations/edit.html.erb:

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.

Tambahkan avatar CarrierWave ke model User Anda—model Anda akan terlihat seperti ini:

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:

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:

Ini adalah penginisialisasi yang diperlukan dalam memuat CarrierWave setelah ActiveRecord.

Dari terminal Anda, buat pengunggah:

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:

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.

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:

Ganti baris seperti yang disebutkan di atas.

Arahkan ke config/initializers, buat file bernama storage.rb, dan tempelkan yang berikut:

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:

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.