File Uploading Dengan Framework Ruby on Rails
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
13 Oktober 2017

Ruby on Rails atau sering disebut dengan Rails merupakan sebuah framework yang diciptakan dengan bahasa pemrogramman Ruby. Rails sendiri pertama kali dikembangkan oleh David Heinemeier Hansson, yaitu seorang programmer dan pembalap.

Bahasa pemrogramman Ruby khususnya framework Ruby on Rails saat ini sangat banyak di perbincangkan para developer dan pengembang website diluar maupun dalam negeri.

Nah pada tutorial kali ini kita akan membahas bagaimana mengupload sebuah data / gambar ke aplikasi Ruby on Rails, disini kita akan belajar dari awal instalasinya.

sebelum memulai dengan rails, pastikan teman-teman sudah menginstall ruby, teman-teman bisa ikuti tutorial berikut ini:


Install Ruby : Install Ruby


Setelah install ruby selesai kita bisa langsung menginstall rails, berikut perintah menginstall rails:

gem install rails

setelah installasi rails selesai, selanjutnya kita akan buat sebuah project baru berikut perintahnya:

rails new  MyApp

Setelah installasi rails berhasil, masuk ke folder project dan buka file Gem, dan tambahkan kode berikut ini:

gem install carrierwave
gem install bootstrap-sass

Kemudian simpan dan jalankan perintah:

bundle install

Setelah itu buatlah sebuah model baru, berikut perintahnya:

rails g model Resume name:string attachment:string

Kemudian jalankan perintah ini:

rake db:migrate

Setelah proses migration selesai, mari kita membuat sebuah controller baru, berikut perintahnya:

rails g controller Resumes index new create destroy

Oke, setelah controller berhasil dibuat sekarang kita buat sebuah uplodernya, jalankan perintah berikut ini:

rails g uploader attachment

Sekarang buka model kita di app/models/resume.rb dan ubah kodenya menjadi seperti berikut:

class Resume < ActiveRecord::Base
   mount_uploader :attachment, AttachmentUploader # Tells rails to use this uploader for this model.
   validates :name, presence: true # Make sure the owner's name is present.
end

Oke, setelah itu kita buat sebuah routing di aplikasi kita buka file routes.rb di config/routes.rb dan ubah kodenya menjadi seperit berikut ini:

CarrierWaveExample::Application.routes.draw do
   resources :resumes, only: [:index, :new, :create, :destroy]
   root "resumes#index"
end

Kemudian editlah controller mejadi seperti berikut ini:

class ResumesController < ApplicationController
   def index
      @resumes = Resume.all
   end

   def new
      @resume = Resume.new
   end

   def create
      @resume = Resume.new(resume_params)

      if @resume.save
         redirect_to resumes_path, notice: "The resume #{@resume.name} has been uploaded."
      else
         render "new"
      end

   end

   def destroy
      @resume = Resume.find(params[:id])
      @resume.destroy
      redirect_to resumes_path, notice:  "The resume #{@resume.name} has been deleted."
   end

   private
      def resume_params
      params.require(:resume).permit(:name, :attachment)
   end

end

Sekarang tambahkan bootstrap di aplikasi kita agar tampilanya lebih enak dipandang, di app/assets/stylesheets/resumes.css.scss

@import "bootstrap";

Sekarang buka view kita di app/views/layouts/application.html.erb dan ubahlah kodenya menjadi seperti berikut ini:

<!DOCTYPE html>
<html>

   <head>
      <title>RubyPedia.com</title>
      <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
      <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
      <%= csrf_meta_tags %>
   </head>

   <body>
      <div class = "container" style = "padding-top:20px;">
         <%= yield %>
      </div>
   </body>

</html>

Selanjutnya ubuhlan index view dari resume menjadi seperti berikut ini:

<% if !flash[:notice].blank? %>
   <div class = "alert alert-info">
      <%= flash[:notice] %>
   </div>
<% end %>

<br />

<%= link_to "New Resume", new_resume_path, class: "btn btn-primary" %>
<br />
<br />

<table class = "table table-bordered table-striped">
   <thead>.
      <tr>
         <th>Name</th>
         <th>Download Link</th>
         <th> </th>
      </tr>
   </thead>

   <tbody>
      <% @resumes.each do |resume| %>

         <tr>
            <td><%= resume.name %></td>
            <td><%= link_to "Download Resume", resume.attachment_url %></td>
            <td><%= button_to "Delete",  resume, method: :delete, class: "btn btn-danger", confirm: "Are you sure that you wish to delete #{resume.name}?" %></td>
         </tr>

      <% end %>
   </tbody>

</table>

Selanjutnya ubah juga file new.html.erb menjadi berikut ini:

<% if [email protected]? %>
   <div class = "alert alert-error">

      <ul>
         <% @resume.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
         <% end %>
      </ul>

   </div>
<% end %>

<div class = "well">
   <%= form_for @resume, html: { multipart: true } do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <%= f.label :attachment %>
      <%= f.file_field :attachment %>
      <%= f.submit "Save", class: "btn btn-primary" %>
   <% end %>
</div>

Sekarang coba jalankan aplikasi kita, berikut perintahnya:

rails s

Sekarang buka di http://localhost:3000/resumes

Untuk membuat agar file apa saja yang boleh diupload, silahkan ubah kode di app/uploaders/attachmentuploader.rb menjadi seperti berikut ini:

class AttachmentUploader < CarrierWave::Uploader::Base
   storage :file

   def store_dir
      "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end

   def extension_white_list
      %w(pdf doc htm html docx)
   end
end

Sekarang cobalah mengupload file dengan extensi yang dilaranag, maka kurang lebih tampilanya akan seperti berikut ini:


Rererensi : https://www.tutorialspoint.com/ruby-on-rails/rails-file-uploading.htm


Blog ini telah dibaca sebanyak 447 kali
Rails Ruby Rails App File Uploading Uploader

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus