tag:blogger.com,1999:blog-8107125074860162592024-03-06T07:25:10.353+07:00Belajar Ruby on RailsBerbagi pengetahuan seputar web development dengan Ruby on Railsfeby artandihttp://www.blogger.com/profile/08925650279386123248noreply@blogger.comBlogger62125tag:blogger.com,1999:blog-810712507486016259.post-16097438335247680222022-05-13T14:58:00.006+07:002022-05-13T14:59:18.044+07:00Setup RSpec Ruby on Rails API Mode dengan Serializer & Factory Bot Bagian 2<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Di Rails, serializer memungkinkan Anda untuk menyesuaikan data alih-alih memiliki render default.</p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Pada artikel ini, kita akan melihat panduan langkah demi langkah untuk menggunakan serializer di aplikasi Anda. Berikut dengan implementasi Rspec pada Serializer.</p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /><b>1. Tambahkan gem serializer pada Gemfile</b></p><pre style="background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><span style="background-color: #f0f0f0; caret-color: rgb(51, 51, 51); color: #333333; font-size: 12px;">gem 'active_model_serializers'</span></pre><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">kembali ke terminal dan run <br /></p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> bundle install </code></pre><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><b>2. membuat sebuah file Serializer</b></p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> bundle exec rails g serializer Customer</code></pre><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireW9S29fyGm6FZUB9lsXg4Jvn7cCTBCF7tzi-r--pfMf6TxCM75-lFOS_4lc6qPmDvdy19RDuKQouaeFuilWL9gD1Z8rZxVf1h7IkbdBTNejsrfgRIVW8KQiPeGdDUUiwvScghoyvDD-aO0ejUJHKISNh0xrz9U-UuWuWXXjzliYN-S-ZZ6ZpSPeDgQ/s948/Screen%20Shot%202022-05-12%20at%2016.10.09.png" style="clear: left; float: left; font-family: -webkit-standard; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="34" data-original-width="948" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireW9S29fyGm6FZUB9lsXg4Jvn7cCTBCF7tzi-r--pfMf6TxCM75-lFOS_4lc6qPmDvdy19RDuKQouaeFuilWL9gD1Z8rZxVf1h7IkbdBTNejsrfgRIVW8KQiPeGdDUUiwvScghoyvDD-aO0ejUJHKISNh0xrz9U-UuWuWXXjzliYN-S-ZZ6ZpSPeDgQ/w593-h20/Screen%20Shot%202022-05-12%20at%2016.10.09.png" width="593" /></a></div><br /><br /><p></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">edit app/serializers/customer.rb tambahkan validasi<br /></p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> class Customer < ActiveModel::Serializer
attributes :name, :email
end </code></pre><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">pada contoh file diatas response pada json customer akan menampilkan attributes name & email.</p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><b>fungsi </b>file serializer sendiri dapat digunakan untuk mengkustom response sesuai kebutuhan response pada front end.</p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><b>3. Install Factory Bot</b><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">Tambahkan gem factory bot pada Gemfile pada group :development, :test</p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;">gem 'factory_bot_rails'</pre><p><b>4. Konfigurasi factory bot </b></p><p><span face="Arial, Tahoma, Helvetica, FreeSans, sans-serif" style="background-color: white; caret-color: rgb(51, 51, 51); color: #333333; font-size: 14.850000381469727px;">Berhubungan dengan tutorial sebelumnya pada tutorial ini Kita masih menggunakan model Customer.rb.</span></p><p><span style="background-color: white;">lalu buka terminal unutk membuat file factory pada folder rspec dengan menjalankan command</span></p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;">rails g factory_bot:model customer</pre><p>setelah menjalankan command diatas, otomatis akan terbuat file seperti ini</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJNDCLov0bhx3MiMaDYS807GBYxrXH_Puz1kRpnrW0bKWJcsJqjVJWEjnB4ZbSx4kLvMHlGwvY757KfRbtVlw-14wGk9nPxRPk9NVt2mDqwkIqYAyMd0LT_-iP5ew9upL1hhmpNSBaPHQV40KWaYmZ88qzKk8iBoplYAL1YDYoUwc8QhI_jEb4vEcvA/s590/Screen%20Shot%202022-05-13%20at%2012.43.23.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="30" data-original-width="590" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJNDCLov0bhx3MiMaDYS807GBYxrXH_Puz1kRpnrW0bKWJcsJqjVJWEjnB4ZbSx4kLvMHlGwvY757KfRbtVlw-14wGk9nPxRPk9NVt2mDqwkIqYAyMd0LT_-iP5ew9upL1hhmpNSBaPHQV40KWaYmZ88qzKk8iBoplYAL1YDYoUwc8QhI_jEb4vEcvA/w550-h28/Screen%20Shot%202022-05-13%20at%2012.43.23.png" width="550" /></a></div><br /><p><br /><span style="color: #333333;"><span style="background-color: white; caret-color: rgb(51, 51, 51); font-size: 14.850000381469727px;">setelah file spec/factories/customers.rb terbuat</span></span></p><p><span style="color: #333333;"><span style="background-color: white; caret-color: rgb(51, 51, 51); font-size: 14.850000381469727px;">konfigurasi file factory customers.rb seperti dibawah</span></span></p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">FactoryBot.define do
factory :customer do |f|
f.name {Faker::Name.name}
f.email {Faker::Internet.email}
end
end </code></pre><p><b>5. Konfigurasi RSpec dengan Serializer & Factory Bot</b></p><p>tambahkan folder dan file seperti ini spec/support/serializer_spec_helper.rb</p><p>lalu tambahkan baris kode seperti dibawah</p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">module SerializerSpecHelper
def serialize(obj, opts={})
serializer_class = opts.delete(:serializer_class) || "#{obj.class.name}Serializer".constantize
serializer = serializer_class.send(:new,obj)
adapter = ActiveModelSerializers::Adapter.create(serializer, opts)
adapter.to_json
end
end </code></pre><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">Setup konfigurasi RSpec dengan factory bot, tambahkan file spec/support/factory_bot.rb</div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">lalu tambahkan kode dibawah ini</div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">RSpec.configure do |config|
config.include FactoryBot::Syntax::Methods
end </code></pre></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;">Tambahkan kode dibawah pada file spec/rails_helper.rb, untuk RSpec bisa mendeteksi file pada folder support/ dan serializer_spec_helper.rb.</div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> Dir [Rails.root.join('spec', 'support', '**', '*.rb'].sort.each { |f| require f}
RSpec.configure do |config| #sisipkan kode dibawah
config.include SerializerSpecHelper, type: :serializer </code></pre></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><b>6. Setup Skenario Test RSpec Serializer & FactoryBot</b></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><br /></div><div style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px;"><div><br />Contoh kasus front end membutuhkan response data seperti berikut:<br /><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"><span style="background-color: #fffffe; color: black; font-family: Menlo, Monaco, "Courier New", monospace;">[</span><div style="background-color: #fffffe; color: black; font-family: Menlo, Monaco, "Courier New", monospace; line-height: 18px;"><div> {</div><div> <span style="color: #a31515;">"name"</span>: <span style="color: #0451a5;">"Persada Ersad"</span>,</div><div> <span style="color: #a31515;">"email"</span>: <span style="color: #0451a5;">"ersad@doterb.com"</span></div><div> }</div><div>]</div></div></code></pre><div><br /></div>Testing RSpec untuk CustomerSerializer menghasilkan, response data seperti contoh kasus diatas.</div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div>Tambahkan kode dibawah pada folder dan file spec/serializers/customer_serializer_spec.rb</div><div><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">require 'rails_helper'
RSpec.describe CustomerSerializer, :type => :serializer do
customer = FactoryBot.create(:customer)
serializer = CustomerSerializer.new(customer)
describe 'attributes' do
it { expect(serializer).to include(:name, :email) }
it 'returns data should be contain name and email' do
expect(serializer).to include(
name: customer.name,
email: customer.email
)
end
end
end </code></pre>
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Selanjutnya balik ke terminal dan ketikan command</p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">rspec<br /></code></pre><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8BijBei5TtGua7wB8_2HKjOTrNljuo9hvCZrUGEV01jhVA8vfELnH9E2191RVNLYszL0USo3FzOaMvEkOjScSYDYFJS6Qq882sau2BwMSJDB50GW7TqnKrONbJUrbij7yeYOvjp7lr-61c-_3g66dBfFDmNpevxy8t_YZ8VWJlSn53hQ7vTUKIXGQQ/s928/Screen%20Shot%202022-05-13%20at%2014.46.46.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="126" data-original-width="928" height="62" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8BijBei5TtGua7wB8_2HKjOTrNljuo9hvCZrUGEV01jhVA8vfELnH9E2191RVNLYszL0USo3FzOaMvEkOjScSYDYFJS6Qq882sau2BwMSJDB50GW7TqnKrONbJUrbij7yeYOvjp7lr-61c-_3g66dBfFDmNpevxy8t_YZ8VWJlSn53hQ7vTUKIXGQQ/w463-h62/Screen%20Shot%202022-05-13%20at%2014.46.46.png" width="463" /></a></div></div><br />
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p>
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p>
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Kita coba untuk mempraktekan jika ada kesalahan data pada response CustomerSerializer</p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">pada file app/serializers/customer_serializer.rb hapus kode ':email'</p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">class CustomerSerializer < ActiveModel::Serializer
attributes :name
end
</code></pre>
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Selanjutnya balik ke terminal dan ketikan command</p><pre style="background-color: #f0f0f0; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif"); border: 1px dashed rgb(204, 204, 204); caret-color: rgb(51, 51, 51); color: #333333; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">rspec</code></pre>
<p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">hasilnya akan ada failure test seperti dibawah ini:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZq1NworzhVebK0x6dg0X9eZHyJFUdbAeM1R5grTfotv1IuhtQ-q3vu4EZDRGNFRcPBmhNYCZs2vtVSr_c3qoKE839JIERUK_EI4MvuQEzTN7fazb441Zg9y50zIOwVmzS1DVJz86IvPforTs0Dk1nDFXq93RAxBzraFpPtM_Qr5p6mMSosoStii36og/s1234/Screen%20Shot%202022-05-13%20at%2014.54.13.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="838" data-original-width="1234" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZq1NworzhVebK0x6dg0X9eZHyJFUdbAeM1R5grTfotv1IuhtQ-q3vu4EZDRGNFRcPBmhNYCZs2vtVSr_c3qoKE839JIERUK_EI4MvuQEzTN7fazb441Zg9y50zIOwVmzS1DVJz86IvPforTs0Dk1nDFXq93RAxBzraFpPtM_Qr5p6mMSosoStii36og/w445-h302/Screen%20Shot%202022-05-13%20at%2014.54.13.png" width="445" /></a></div><br /><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;"><br /></p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Selamat mencoba & Cheers :D </p><p style="caret-color: rgb(51, 51, 51); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.850000381469727px; text-align: justify;">Tutorial Created By: Doterb | <a href="mailto:ersad@doterb.com">Persada Ersad</a></p>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-40613371153336756782022-05-12T13:35:00.004+07:002022-05-27T10:59:16.976+07:00setup Rspec Ruby On Rails API Mode bagian 1<p style="text-align: justify;">RSpec adalah kerangka kerja pengujian unit untuk bahasa pemrograman Ruby. RSpec berbeda dari kerangka xUnit tradisional seperti JUnit karena RSpec adalah alat pengembangan yang digerakkan oleh Perilaku. Artinya, tes yang ditulis dalam RSpec berfokus pada "perilaku" aplikasi yang sedang diuji.</p><p style="text-align: justify;">RSpec adalah DSL untuk membuat contoh yang dapat dieksekusi tentang bagaimana kode diharapkan berperilaku, terorganisir dalam kelompok. Itu menggunakan kata-kata "describe" dan "it" sehingga kita bisa mengungkapkan konsep seperti percakapan:</p><pre style="background: rgb(247, 247, 247); border: 1px dotted rgb(204, 204, 204); font-family: monospace, serif; font-size: 14px; overflow-x: auto; width: 450.828px;"><code class="undefined" style="background: none; display: inline-block; font-family: monospace, serif; font-size: 1em; margin: 14px; padding: 0px; width: auto;">"Describe an account when it is first opened."
"It has a balance of zero."</code></pre><p style="text-align: left;">1. setup dan install ror and rspec<br /></p><p style="text-align: left;">Buat aplikasi baru dengan command berikut <br /></p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">rails _7.0.1_ new sample_unit_test --api -d postgresql</code></pre><p style="text-align: left;">pindah ke directory yang kita buat<br /></p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> cd sample_unit_test </code></pre><p style="text-align: left;">buka file Gemfile tambahkan gem 'rspec-rails'<br /><br />kembali ke terminal dan run <br /></p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> bundle install </code></pre><p style="text-align: left;">create database dengan run </p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> bundle exec rake db:create </code></pre><p style="text-align: left;">setup rspec ke rails dengan command berikut<br /></p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">bundle exec rails generate rspec:install </code></pre><p style="text-align: left;">2. membuat sebuah model customer dan fitur crud yang akan kita test fiturnya</p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> bundle exec rails g scaffold customer name:string phone:bigint email:string address:text</code></pre><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">bundle exec rake db:migrate</code></pre><p style="text-align: left;">edit app/models/customer.rb tambahkan validasi<br /></p><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> class Customer < ApplicationRecord
validates :name, :email, presence: true
end </code></pre><p style="text-align: left;">3. update rspec file <br />pada saat kita melakukan run command scaffold ror akan otomatis membuatkan file testnya juga</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDH_IHS9gee4XLlaJOWWZsOQqQS81WKVyFt6XOeMmBDAEovlecT6NenJB6BzA5-xytlzFwpvM7J4SjgRzr7RimX3lmWMpg86AUQa5F7RgqMjmloShrJJdfnlWyUHHt-YwMvYSPXGB_cV9vooedy6wzKYoNANJ59_kJ-YZXfrCHADHoWfBNF7HRmJj0A/s559/rspec-g.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="234" data-original-width="559" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDH_IHS9gee4XLlaJOWWZsOQqQS81WKVyFt6XOeMmBDAEovlecT6NenJB6BzA5-xytlzFwpvM7J4SjgRzr7RimX3lmWMpg86AUQa5F7RgqMjmloShrJJdfnlWyUHHt-YwMvYSPXGB_cV9vooedy6wzKYoNANJ59_kJ-YZXfrCHADHoWfBNF7HRmJj0A/w400-h168/rspec-g.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Gambar Hasil generate scaffold</td></tr></tbody></table><p style="text-align: left;"><br /></p><div style="text-align: left;">untuk melakukan test pada controller customer edit file di spec/requests/customers_spec.rb</div><div style="text-align: left;">isi nya sebagian sudah ada di generate by system oleh ror tapi belum sempurna ada beberapa perbaikan pada params dan assertions kita harus pelajari code yang sudah ada di mulai dari index show create update dan delete dan juga harus paham dengan <a href="https://relishapp.com/rspec/rspec-expectations/docs/built-in-matchers">assertions</a> dan <a href="https://relishapp.com/rspec/rspec-expectations/docs/built-in-matchers">matchers</a></div><p></p><p style="text-align: left;"></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSvVplmOSn6KBpj01xuqvdzNCwKwkSth44BIZQqcjNqeIqI-uAH7Y80qv63w6e6cCPvy6LQnZBRVtr7n3KtmoXDNK9D3QmqJ_xEfnZVs4d-u70A69L_n7gFbvDVzweqm1P4VCOIv0UrNcQIs16ay1Kye9ZpiKBcm8JKS14OR_FDLC92ZoiDtzsRynZA/s982/valid_attr.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="475" data-original-width="982" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSvVplmOSn6KBpj01xuqvdzNCwKwkSth44BIZQqcjNqeIqI-uAH7Y80qv63w6e6cCPvy6LQnZBRVtr7n3KtmoXDNK9D3QmqJ_xEfnZVs4d-u70A69L_n7gFbvDVzweqm1P4VCOIv0UrNcQIs16ay1Kye9ZpiKBcm8JKS14OR_FDLC92ZoiDtzsRynZA/w400-h194/valid_attr.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">isi default dari file test request customers</td></tr></tbody></table><br /> Karena isinya masih kosong kita harus mengisikan attribute yang benar dan attribute yang salah gunakan gem "faker" untuk membantu membuat data sesuai<br /><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">let(:valid_attributes) do
{ name: Faker::Name.name,
phone: Faker::Number.number(digits: 12),
email: Faker::Internet.email,
address: Faker::Address.street_address }
end
let(:invalid_attributes) do
{ name: nil,
phone: nil,
email: Faker::Internet.email,
address: Faker::Address.street_address }
end
let(:valid_headers) do
{}
end </code></pre><br />valid headers dikosongkan karena di tutorial ini tidak memakai security token <br /><br />setelah menambahkan <span style="background-color: #f0f0f0; font-family: arial; font-size: 12px;">valid_attributes dan </span><span style="background-color: #f0f0f0; font-family: arial; font-size: 12px;">invalid_attributes coba test dengan comand berikut</span><div><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">bundle exec rspec spec/requests/customers_spec.rb </code></pre></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhWyggYlm8BxC7TDAHzOJmusO6rh5rscFz9B3mZdu5P-KDpExNLuk8LxdHnQ3PjOcF8gYnXnHiDCwR6RskvOOnKsg9GpEsZpwvdLIqB2MIchIGjMQYGsTGzfLR91j2zfhubacOqdDvCLcoZbwdX646jDJ-vQFSpp17yYm_EYa0dZXAZqaaovXeMB87g/s850/hasil.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="330" data-original-width="850" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhWyggYlm8BxC7TDAHzOJmusO6rh5rscFz9B3mZdu5P-KDpExNLuk8LxdHnQ3PjOcF8gYnXnHiDCwR6RskvOOnKsg9GpEsZpwvdLIqB2MIchIGjMQYGsTGzfLR91j2zfhubacOqdDvCLcoZbwdX646jDJ-vQFSpp17yYm_EYa0dZXAZqaaovXeMB87g/w400-h155/hasil.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Gambar setelah update valid dan invalid attribute<br /></td></tr></tbody></table><br /><br />pada keterangan errornya ada dua proses yang pending itu dikarenakan ada skip waktu bagian update<br />buka kembali file berikut<div><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">spec/requests/customers_spec.rb </code></pre><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZRKT1e4ZllLIXrBZ9w9vlJlc7ouBTWl-_DQFDC5ZD6DLPcVIogXzBOEnlKwS1jBBIRZD2srLEkAVuBniFVOuZMV42_81oYXkORnCWj6nyMpQjSpi2g22lh1Rrnzwap9cHTJKHPI2GZFzpB0PW9D8LXa9KGNm8HZt-qWnfHcFSHgLI9dECT_L3RT2CA/s1050/patch.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="534" data-original-width="1050" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZRKT1e4ZllLIXrBZ9w9vlJlc7ouBTWl-_DQFDC5ZD6DLPcVIogXzBOEnlKwS1jBBIRZD2srLEkAVuBniFVOuZMV42_81oYXkORnCWj6nyMpQjSpi2g22lh1Rrnzwap9cHTJKHPI2GZFzpB0PW9D8LXa9KGNm8HZt-qWnfHcFSHgLI9dECT_L3RT2CA/w400-h204/patch.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Gambar default code part update</td></tr></tbody></table><br /><div><br /></div><div>bagian skip harus diganti sesuai keterangannya untuk new atrribute maksudnya isi data <span style="background-color: #f0f0f0; font-family: arial; font-size: 12px;">new_attributes</span> untuk menggantikan data lama isinya seperti code dibawah</div><div><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> let(:new_name) { Faker::Name.name }
let(:new_attributes) do
{ name: new_name,
phone: Faker::Number.number(digits: 12),
email: Faker::Internet.email,
address: Faker::Address.street_address }
end </code></pre></div><div><br /></div><div>untuk bagian "assertions" kita isi dengan pengecekan data nama setelah update sama dengan nama pada <span style="background-color: #f0f0f0; font-family: arial; font-size: 12px;">new_attributes<br /></span><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> it 'updates the requested customer' do
customer = Customer.create! valid_attributes
patch customer_url(customer),
params: { customer: new_attributes }, headers: valid_headers, as: :json
customer.reload
expect(customer.name).to eq(new_name)
end </code></pre></div><div>check kembali file test dengan command berikut<br /><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;">bundle exec rspec spec/requests/customers_spec.rb </code></pre></div><div><br /></div><div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh_scRyjR2CyvlDuHrgZt48HXANy-ienTzOVQQXSnpDKyS0ZjsWqWZVYnU3LECdc2Uacc2-Wkx0sdNitdbkGfQ28qXWWui05XnJpX7hEnPi7FOyLPNXS8MY88F0dC9Xs_j75Sw6Lz5rnZi03aNyV7ITuYQX5V0MD7cLhY8QZY4jXVnq8Ou8WGOyqCyww/s782/clear.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="133" data-original-width="782" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh_scRyjR2CyvlDuHrgZt48HXANy-ienTzOVQQXSnpDKyS0ZjsWqWZVYnU3LECdc2Uacc2-Wkx0sdNitdbkGfQ28qXWWui05XnJpX7hEnPi7FOyLPNXS8MY88F0dC9Xs_j75Sw6Lz5rnZi03aNyV7ITuYQX5V0MD7cLhY8QZY4jXVnq8Ou8WGOyqCyww/w400-h68/clear.png" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Gambar hasil pengujian sukses tanpa gagal<br /></td></tr></tbody></table><div><br /><br /><br />Test model customer update spec/models/customer_spec.rb seperti berikut kemudian run testing<br /><pre style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78WlU-Y-X_nPal3ZDiW-fHXN6Lx3qkw75_4-e11F7XqiEySAMFWuqR8wpHRPES0f-M6tnVpl9X_gvcUWIBiKRXtivyFeY_XiV-Q060Cr3sc_2FraRt8gyrD-Dwy13n0g8Ipe65z1wXxQo/s320/codebg.gif") rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 450.828px;"><code style="overflow-wrap: normal;"> require 'rails_helper'
RSpec.describe Customer, type: :model do
it 'is not valid without a name' do
customer = Customer.new(name: nil)
expect(customer).to_not be_valid
end
it 'is not valid without a email' do
customer = Customer.new(email: nil)
expect(customer).to_not be_valid
end
end </code></pre>testing untuk model customer disini cuma validasi sebenarnya bisa banyak tergantung isi dari modelnya</div></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div>aspadhttp://www.blogger.com/profile/15628675830225302316noreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-56148874050346548172021-10-13T10:11:00.003+07:002021-10-13T10:11:53.748+07:00Seri Belajar Ruby on Rails Bagian 2 - Cara install Ruby on Rails di Ubuntu<b>Ubuntu</b> salah satu os yang mudah dipelajari karena memiliki banyak
dokumentasi dan banyak digunakan untuk dalam penulisan <i>code</i> yang
berhubungan dengan linux server <br />
Pada kali ini versi yang digunakan adalah versi <b>Ruby versi 3.0.2</b> <br />
<br />
Untuk langkah pertama sebelum melakukan instalasi <b>Ruby On Rails</b> kita
harus memastikan webpacker yang dibutuhkan untuk melakukan support pada
<b>Ruby on rails</b>. dengan memambahkan repositori <b>node js</b> dan
<b>yarn</b> kedalam sistem <br />
<div class="separator" style="clear: both;">
<a
href="https://1.bp.blogspot.com/-QtvyPHUj5Gg/YWZIfXHUfJI/AAAAAAAABGU/T6p3xjgqC-UQzITorxyO5ARkgrQmmK7dgCLcBGAsYHQ/s582/Screenshot%2Bfrom%2B2021-10-13%2B09-45-44.png"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
width="400"
data-original-height="256"
data-original-width="582"
src="https://1.bp.blogspot.com/-QtvyPHUj5Gg/YWZIfXHUfJI/AAAAAAAABGU/T6p3xjgqC-UQzITorxyO5ARkgrQmmK7dgCLcBGAsYHQ/s400/Screenshot%2Bfrom%2B2021-10-13%2B09-45-44.png"
/></a>
</div>
Ada bebepara method dalam melakukan instalasi <b>Ruby on Rails</b>
<ul>
<li>rbenv (Recommended)</li>
<li>rvm </li>
<li>From sourced</li>
</ul>
Untuk instalasi yang dilakukan pada kali ini mengunakan metode rbenv karena paling mudah untuk dipelajari <br>
Pertama install <b>'rbenv'</b> lalu install <b>'ruby-build'</b>
<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-h5f5O89Kr4M/YWZK-2OIE_I/AAAAAAAABGc/rUYabakPdXMMUcHl995pbfsd_Lks-hIiwCLcBGAsYHQ/s578/Screenshot%2Bfrom%2B2021-10-13%2B09-56-26.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="400" data-original-height="337" data-original-width="578" src="https://1.bp.blogspot.com/-h5f5O89Kr4M/YWZK-2OIE_I/AAAAAAAABGc/rUYabakPdXMMUcHl995pbfsd_Lks-hIiwCLcBGAsYHQ/s400/Screenshot%2Bfrom%2B2021-10-13%2B09-56-26.png"/></a></div>
Langkah berikutnya:
<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-TaX3JiTq4JI/YWZLsqW3o0I/AAAAAAAABGk/CsJRr4pP4Q0yr2b59dx_00zk3f5oNYehgCLcBGAsYHQ/s575/Screenshot%2Bfrom%2B2021-10-13%2B09-59-36.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="400" data-original-height="177" data-original-width="575" src="https://1.bp.blogspot.com/-TaX3JiTq4JI/YWZLsqW3o0I/AAAAAAAABGk/CsJRr4pP4Q0yr2b59dx_00zk3f5oNYehgCLcBGAsYHQ/s400/Screenshot%2Bfrom%2B2021-10-13%2B09-59-36.png"/></a></div>
Lalu install <b>'gem install bundler'</b> dan lakukan <b>'rbenv rehash'</b> pada terminal
<br>
Setelah selesai install Ruby berikutnya install rails <br>
<b>'gem install rails -v 6.1.4.1'</b> dan lakukan <b>'rbenv rehash'</b> kembali<br>
untuk melakukan cek apakah sudah terinstall bisa dengan perintah <b>'rails -v'</b><br>
<br>
Source <a href="https://gorails.com/setup/ubuntu/20.04#ruby-rbenv">https://gorails.com/setup/ubuntu/20.04#ruby-rbenvt</a>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-12052513436646336062021-03-16T13:30:00.000+07:002021-03-16T13:44:26.506+07:00Seri Belajar Ruby on Rails Bagian 11 - Membuat Aplikasi Manajemen Tugas (Homework Management)<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Hai, semangattt! ini bagian terakhir dari <a href="http://www.belajarrubyonrails.com/p/daftar-isi.html" target="_blank">Seri Belajar Ruby on Rails</a> loh, kali ini kita akan belajar membuat aplikasinya langsung. Aplikasi nya yang simple-simple aja ya kalian pasti bisa kok, apalagi kalo kalian udah baca bagian yang lain. So kita yang langsung aja ya.<br />
<br />
Kali ini kita akan membuat aplikasi yang namanya Homework Management dengan Rails versi 6 yaitu aplikasi yang bisa kalian gunakan untuk mengatur jadwal perkerjaan rumah guys. Berikut step-step cara pengerjaan nya :</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Buat Project Baru</span><br />
</h3>
<span face=""arial" , "helvetica" , sans-serif" style="font-weight: 400;"><br />
</span> <span face=""arial" , "helvetica" , sans-serif" style="font-weight: 400;">Buka terminal, dan jalankan code berikut:</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-size: 18.72px;">$ rails new homework_management
$ bundle install
$ rake db:create</span></pre>
<span face=""arial" , "helvetica" , sans-serif">Setting <a href="http://www.belajarrubyonrails.com/2018/04/seri-belajar-ruby-on-rails-bagian-9.html" target="_blank">devise</a> untuk authentikasi (jika diperlukan)</span><br />
<span face=""arial" , "helvetica" , sans-serif">Note: untuk setting device kalian bisa belajar disini</span><span face=""arial" , "helvetica" , sans-serif" style="font-size: x-small;"> </span><span face=""arial" , "helvetica" , sans-serif">[</span><a href="http://www.belajarrubyonrails.com/2018/04/seri-belajar-ruby-on-rails-bagian-9.html" style="font-family: arial, helvetica, sans-serif;" target="_blank">Link</a><span face=""arial" , "helvetica" , sans-serif">]</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-vBC2MDX9wl8/W5Hp_tSHpPI/AAAAAAAAA5c/m1LM3nCaoIMkWlIuDD3BU_xJGX0d8WerACLcBGAs/s1600/HomeworkManagement.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="344" data-original-width="860" height="128" src="https://1.bp.blogspot.com/-vBC2MDX9wl8/W5Hp_tSHpPI/AAAAAAAAA5c/m1LM3nCaoIMkWlIuDD3BU_xJGX0d8WerACLcBGAs/s320/HomeworkManagement.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh tampilan untuk devise</td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Membuat Table, Models, Views, dan Controllers</span></h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-vvaR51M_esE/W5HwHxGvdbI/AAAAAAAAA5o/A-PR2ILgcPgkrnCaxk0v_cpsEZyA5hgVgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-09-07%2B10-26-50.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="229" data-original-width="416" height="176" src="https://1.bp.blogspot.com/-vvaR51M_esE/W5HwHxGvdbI/AAAAAAAAA5o/A-PR2ILgcPgkrnCaxk0v_cpsEZyA5hgVgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-09-07%2B10-26-50.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh struktur table</td></tr>
</tbody></table>
<div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div>
<span face=""arial" , "helvetica" , sans-serif">Kita akan menggunakan 2 (dua) tabel untuk membuat aplikasi ini yaitu tabel <b>Category </b>dan <b>Homework</b>, kita akan menggunakan metode scaffold untuk mengenerate table, models, views serta controllers-nya. Berikut cara membuat schema nya :</span></div>
<div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-size: 18.72px;">$ rails g scaffold Category name:string</span>
</pre>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-size: 18.72px;">$ rails g scaffold Homework homework_name:text category:string deadline:date description:text category_id:integer</span>
</pre>
</div>
<div>
<span face=""arial" , "helvetica" , sans-serif">Setelah berhasil di generate jalankan migration :</span></div>
<div>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-size: 18.72px;">$ rake db:migrate</span></pre>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <br />
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Relasi dan Validasi</span></h3>
<span face=""arial" , "helvetica" , sans-serif"></span><span face=""arial" , "helvetica" , sans-serif">Di section ini kita akan membuat relasi dan validasi untuk tabel, relasi dan validasi ini biasa nya di simpan pada <b>models, </b>berikut contoh nya :<br />
<br />
</span><br />
<script src="https://gist.github.com/dickytri/b2b976a8c6d14e6f9f965f5c87423841.js"></script><br />
<script src="https://gist.github.com/dickytri/c7de17be39eddcb3aaf5a8bcbc8ccb0b.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif"></span><br />
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Custom Views</span></h3>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Karena kita telah membuat relasi otomatis kita perlu merubah tampilan CRUD yang telah tergenerate oleh scaffold tadi agar lebih optimal, seperti merubah field text menjadi select agar ada suggestion ketika membuat record yang telah terelasi.<br />
<br />
Ubah pada bagian <b>app/views/homeworks/_form.html.erb </b>menjadi :</span><br />
<script src="https://gist.github.com/dickytri/e006da3d17ee32b5d1e2356a27c63b17.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Setelah semua step sudah dikerjaan, buka terminal dan nyalakan rails server</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-size: 18.72px;">$ rails s</span></pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span face=""arial" , "helvetica" , sans-serif">Buka pada browser <a href="localhost:3000/categories" target="_blank">localhost:3000/categories</a> untuk mengakses CRUD tabel <b>Category</b> dan <a href="localhost:3000/homeworks" target="_blank">localhost:3000/homeworks</a> untuk mengakses CRUD tabel <b>Homework</b></span><span face=""arial" , "helvetica" , sans-serif"><br />
</span> <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://1.bp.blogspot.com/-7dCydpoQJ8Q/W5H50XzWlaI/AAAAAAAAA54/wIHaCrd6UWAC4lrg-DYQknE-ia6hL1CIQCEwYBhgL/s1600/HomeworkManagement%2B2.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="485" data-original-width="1365" height="227" src="https://1.bp.blogspot.com/-7dCydpoQJ8Q/W5H50XzWlaI/AAAAAAAAA54/wIHaCrd6UWAC4lrg-DYQknE-ia6hL1CIQCEwYBhgL/s640/HomeworkManagement%2B2.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Contoh tampilan Homeworks <span style="font-size: x-small;">(<a href="localhost:3000/homeworks" style="font-family: arial, helvetica, sans-serif; text-align: start;" target="_blank">localhost:3000/homeworks</a>)<br />
</span></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-IRGdiypyN_g/W5H50ULzAPI/AAAAAAAAA58/Pb7fnmT6tMELllQngMvP_bx210_1enjuwCEwYBhgL/s1600/HomeworkManagement%2B3.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="486" data-original-width="1364" height="226" src="https://4.bp.blogspot.com/-IRGdiypyN_g/W5H50ULzAPI/AAAAAAAAA58/Pb7fnmT6tMELllQngMvP_bx210_1enjuwCEwYBhgL/s640/HomeworkManagement%2B3.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contoh tampilan Categories<span style="font-size: 12.8px;"> </span><span style="font-size: x-small;">(<a href="localhost:3000/categories" target="_blank">localhost:3000/categories</a>)</span></td></tr>
</tbody></table>
<span face=""arial" , "helvetica" , sans-serif"><br />
<br />
</span> <span face=""arial" , "helvetica" , sans-serif"><br />
</span><span face=""arial" , "helvetica" , sans-serif">Nah akhirnya selesai juga seri belajar kali ini, semoga bermanfaat bagi kamu yang telah mengikuti pelajaran ini dari <a href="http://www.belajarrubyonrails.com/2018/03/belajar-ruby-bag-1-apa-itu-ruby-on-rails.html" target="_blank">bagian awal</a>, sampai jumpa di seri-seri belajar yang akan datang, coming soon yaaa last but not least. Keep Shining Like Ruby :)</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />Download contoh aplikasi disini <a href="https://drive.google.com/open?id=1Drkqn048xLfAvKrSIOek_ZR3DEnXOH-X" target="_blank">[Download]</a></span></div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-810712507486016259.post-21032703875913142822021-03-16T11:30:00.000+07:002021-03-16T11:52:31.353+07:00Seri Belajar Ruby on Rails Bagian 10 - Menambahkan Css dan Javascript<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Hai lanjut lagi, setelah sebelumnya belajar tentang mengimplementasikan authentikasi menggunakan <a href="http://www.belajarrubyonrails.com/2018/04/seri-belajar-ruby-on-rails-bagian-9.html">Devise</a>, kali ini kita akan belajar tentang penggunaan assets untuk css dan javascript di Ruby on Rails.</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Assets</span></h3>
<div style="text-align: justify;">
<br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Di dalam Ruby on Rails ada yang dinamakan 'Asset Pipeline', ini berguna untuk menggabungkan/mengkompres assets seperti Javascript & CSS maupun File Gambar (.jpg, .png dll). Di dalam assets ini juga kita bisa mengkombinasikan dengan fitur yang ada pada gem dengan cara memanggilnya di dalam file css atau js.</span></div>
<span face=""arial" , "helvetica" , sans-serif"></span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Stylesheets </b>untuk folder penyimpanan file css.</span></li>
<span face=""arial" , "helvetica" , sans-serif">
<li><b>Javascripts </b>untuk folder penyimpanan file js.</li>
<li><b>Images </b>untuk folder penyimpanan file gambar (.jpg, .png dll)</li>
</span></ul>
<div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iwLChoQUcimbWzRwh34sDEVxKmHJnxbbu8ml63m7jAUMuFyGHF2sn_2-i9_ir_gPrC47Kb05KL1Ylj-aKsR9C9prlCtOQtL9Q3GnsggVrXxIKvATd8RAH3nN0ezXqYaBDIR9zLzWzgwk/" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="242" data-original-width="298" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iwLChoQUcimbWzRwh34sDEVxKmHJnxbbu8ml63m7jAUMuFyGHF2sn_2-i9_ir_gPrC47Kb05KL1Ylj-aKsR9C9prlCtOQtL9Q3GnsggVrXxIKvATd8RAH3nN0ezXqYaBDIR9zLzWzgwk/" width="296" /></a></div></div><br /><br />
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Di dalam folder stylesheets biasanya ada file <b>application.css </b>yang digunakan untuk menginput/memanggil file css</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
<script src="https://gist.github.com/dickytri/282fc8c2fa66af864e67fd4564824bf0.js"></script></span><br />
<div style="text-align: left;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Cara memanggil css dengan menambahkan </span><b style="font-family: arial, helvetica, sans-serif;">*= require nama_file_css </b></span></div>
<span face=""arial" , "helvetica" , sans-serif"> <span face=""arial" , "helvetica" , sans-serif"></span></span><br />
<div style="text-align: left;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b style="font-weight: bold;">*= require_self </b><span face=""arial" , "helvetica" , sans-serif">digunakan bila file </span>application.css<span face=""arial" , "helvetica" , sans-serif"> akan digunakan untuk menuliskan code css juga.</span></span></span></div>
<div style="text-align: left;">
<span face=""arial" , "helvetica" , sans-serif"><b style="font-family: arial, helvetica, sans-serif;">*= require_tree . </b><span face=""arial" , "helvetica" , sans-serif">untuk memanggil semua file css yang ada di folder </span><b style="font-family: arial, helvetica, sans-serif;">assets/stylesheets</b></span></div>
<br />
<ul></ul>
<span face=""arial" , "helvetica" , sans-serif">Note: adapun <b>stub </b>yaitu kebalikan dari <b>require</b> untuk excluding/membuang css ketika kita menggunakan <b>require_tree</b> dan suatu css tidak diperlukan, maka gunakan metode <b>stub</b> (Contoh: <b>*= stub nama_file_css</b>)</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div><div style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Tidak jauh beda dengan css, penambahkan javascript biasanya diletakan di folder <b>app/javascripts/packs</b> dengan file induknya <b>application.js</b></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><b><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0jTeIPbUTCb4yJFG8nI__TD1YIEGM-TIL8y15JLqJPSeuc_w5AQ3eCx-pRxaD9KIL0igF_Urn46b5yVkO3hEc4CAUvqCcfacQMf4vRCpyKJlkOYGVuQGuNgGWDHEFomyi5Gz0N_Rceyi/" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="291" data-original-width="838" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0jTeIPbUTCb4yJFG8nI__TD1YIEGM-TIL8y15JLqJPSeuc_w5AQ3eCx-pRxaD9KIL0igF_Urn46b5yVkO3hEc4CAUvqCcfacQMf4vRCpyKJlkOYGVuQGuNgGWDHEFomyi5Gz0N_Rceyi/w565-h196/image.png" width="565" /></a></div><br />
</b>Sama seperti css hanya saja pemanggilan file js menggunakan import, lihat gamabar di atas</span><br /><span face=""arial" , "helvetica" , sans-serif"><b><br />
</b></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"> <span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></div>
<div style="text-align: justify;">
<h3>
<span face=""arial" , "helvetica" , sans-serif">Layouts & View</span></h3>
<span face=""arial" , "helvetica" , sans-serif">Nah setelah kita setup dibagian assets, untuk memanggil nya di view kita hanya menambahkan code berikut</span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif">Untuk css<br />
</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;"><%= stylesheet_link_tag 'application', media: 'all' %></span>
</pre>
<br />
<br />
</li>
<li><span face=""arial" , "helvetica" , sans-serif">Untuk javascript<br />
</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;"><%= javascript_include_tag 'application', media: 'all' %></span></pre>
</li>
</ul>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Sekian untuk pembelajaran kali ini mengenai penambahan Css dan Javascript di Ruby on Rails. Diharapkan tutorial ini menjadi salah satu pembelajaran yang mudah dimengerti bagi kita semua. Stay tune.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Dicky Trifadillah | C-aio Indonesia</span></span></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-61678161187901873702021-03-16T09:53:00.001+07:002021-11-15T14:32:37.660+07:00Seri Belajar Ruby on Rails Bagian 7 - Memahami ActiveRecord<div style="text-align: justify;">Setelah sebelumnya telah memahami penggunaan migration, seed, dan cara membuat dummy data, serta perbadaan data dummy dan data master. Pada kali ini kita akan memahami mengenai <b>Active Record.</b></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Active Record</b> adalah <b>library-library ORM</b> yang digunakan pada <b>model</b> di Rails Framework. <b>Model</b> ini yang merupakan <b>M</b> dari konsep <b>MVC</b> pada Rails. Ia bertugas sebagai model yang bertanggungjawab atas data bisnis dan logika. Contoh dari data bisnis ini seperti data orang, data tempat, atau data barang.</span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Active Record ini jika diimplementasikan merupakan sistem ORM (Object Relational Mapping) pada Rails.</span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">A. Definisi ORM </span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">ORM (Object Relational Mapping) adalah suatu metode/teknik pemrograman yang digunakan untuk mengkonversi data dari lingkungan bahasa pemrograman berorientasi objek (OOP) dengan lingkungan database relasional. </span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Secara singkat ORM dapat dikatakan sebagai jembatan yang berfungsi untuk menghubungkan antara OOP dan database relasional.</span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span> <span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"> </span><span face=""arial" , "helvetica" , sans-serif"><b>B. Apa yang Dapat Dilakukan Active Record ?</b></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Active record memiliki kemampuan untuk</span></span></span></div>
<ul style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Merepresentasikan model dan data dari model tersebut.</span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Merepresentasikan hubungan antar model.</span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Menunjukkan hirarki pewarisan dari model yang berelasi.</span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Melakukan validasi data sdebelum data tersebut dimasukkan ke dalam database.</span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span face=""arial" , "helvetica" , sans-serif">Menampilkan operasi database dalam bentuk OOP.</span></span></span></li>
</ul>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"> </span> </div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>C. Ketentuan Penamaan</b></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Secara default, Active Record memerlukan ketentuan penemaan untuk menentukan mapping dari model dan tabel. <span face=""arial" , "helvetica" , sans-serif">Contoh</span> penamaan antara model dan tabel di Rails adalah sebagai berikut. Contoh ini berdasarkan aplikasi yang kita buat dari modul <a href="http://www.belajarrubyonrails.com/2018/03/seri-belajar-ruby-on-rails-bagian-5.html">Bagian 5 - Membuat Aplikasi Rails Pertamamu</a>, yaitu aplikasi manajemen tugas sederhana.</span></span></div>
<div style="text-align: justify;">
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px 20px;
text-align: center;
}
tr:nth-child(even) {background-color: #f2f2f2;}
th {
background : #777; color:#f2f2f2
}
</style><br /></div>
<table class="responsive" style="margin-left: 0px; margin-right: 0px; text-align: left; width: 100%;"><thead>
<tr> <th><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Model/Class</span></span></th> <th><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Table/Schema</span></span></th></tr>
</thead> <tbody>
<tr> <td style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Category</span></span></td> <td style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">categories</span></span></span></td></tr>
<tr> <td style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Homework</span></span></td> <td style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">homeworks</span></span></td> </tr>
</tbody> </table>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Dari tabel dapt kita ketahui bahwa penamaan dari model dan tabel memiliki aturan sebagai berikut.</span></span></div>
<ul style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Database Table</b> - Ditulis secara plural, jika lebih dari dua kata dipisahkan dengan underscore.</span></span><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: serif;"><span face=""arial" , "helvetica" , sans-serif"><b><br />
Contoh</b>: homeworks, categories, homework_item<br />
</span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Model Class </b>- Ditulis secara singular dengan setiap huruf pertama dari setiap kata menggunakan uppercase</span></span> <span face=""arial" , "helvetica" , sans-serif"><b><br />
C</b><b>ontoh</b>: <span style="font-family: serif;">H</span>omeworks, Category, HomeworkItem</span></li>
</ul>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk membuat model dan tabel dengan ketentuan penamaan yang benar secara cepat dapat menggunakan generator dengan cara</span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate model Homework</span></span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b><span face=""arial" , "helvetica" , sans-serif">D. Ketentuan Penamaan</span><span style="font-family: serif;"><span face=""arial" , "helvetica" , sans-serif"> Schema</span></span></b></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Active Record juga menggunakan ketentuan penamaan untuk kolom pada tabel<span style="font-family: serif;"> yang digunakan sesuai dengan kegunaan dari kolom tersebut</span>. Ketentuan tersebut adalah sebagai berikut.</span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Foreign keys</b> - Field ini harus diberi nama sesuai dengan nama tabel yag digunakan. Contohnya item_id, order_id. Field ini akan otomatis dibuat oleh Active Record ketika menentukan hubungan atau relasi antar model.<br />
</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Primary keys</b> - <span style="font-family: serif;">Secara</span> default, Active Record akan menggunakan sebuah kolom integer yang diberi nama id sebagai primary key. Ketika menggunakan Active Record, kolom ini otomatis akan terbuat.</span></li>
</ul>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Untuk contoh pemakaian Active Record, kita akan melanjutkan mengerjakan aplikasi manajemen tugas sederhana. Jika sebelumnya kita membuat sistem CRUD menggunakan scaffold, kali ini kita akan membuat sistem CRUD untuk kategori tugas harian tanpa menggunakan scaffold.</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><b><br />
</b></span></h3>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><b>E. CRUD menggunakan Active Record tanpa Scaffold</b></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada tutorial sebelumnya telah ditunjukkan cara membuat tabel category yang hanya membutuhkan kolom category_namenya saja dengan menggunakan generator. Bagi yang belum tahu bagaimana caranya, lakukan perintah berikut pada terminal.</span></span></span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration </span></span></span></span></span></span></span></span><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">CreateCategories</span></span></pre>
</div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif">Karena pada tutorial sebelumnya penggunaan generator hanya untuk membuat migration, maka untuk membuat modelnya akan dilakukan secara manual dengan cara berikut.</span><ul>
<li><span face=""arial" , "helvetica" , sans-serif">Buat file baru pada folder app/models dengan nama category.rb, lalu isi script berikut.</span><script src="https://gist.github.com/FatharaAzka/6b306ef809eb2ca83840331b1a757720.js"></script><span face=""arial" , "helvetica" , sans-serif">Ini akan menunjukkan bahwa model Category akan merujuk kepada tabel categories.</span></li>
</ul>
</li>
<li><span face=""arial" , "helvetica" , sans-serif">Setelah itu, buatlah controller dengan nama <b>categories_controller.rb</b><span style="font-family: serif;"><b> </b></span>dan isi dengan script berikut.</span><script src="https://gist.github.com/FatharaAzka/a7ddc3c0e19c498ac8e267abf1d37a23.js"></script><span face=""arial" , "helvetica" , sans-serif"><b></b></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Lalu pada routes.rb tambahkan script berikut.</span><script src="https://gist.github.com/FatharaAzka/c6b81636910dd8428492203347998495.js"></script>Pada script di atas, kita mendaftarkan semua method dari<b> categories_controller.rb</b> menjadi sebuah <b>resource</b>.<b><br />
</b></span></span></li>
<span face=""arial" , "helvetica" , sans-serif"> <span face=""arial" , "helvetica" , sans-serif"><b> </b></span></span></ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Create pada Active Record</b></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Selanjutnya untuk membuat sistem create atau tambah data yang akan kita lakukan adalah</span></span></span></span></div>
<ol style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Buat folder pada <b>app/views</b> dengan nama <b>categories </b>dan buat file dengan nama <b>new.html.erb </b>dan <b>_form.html.erb </b>di dalam folder yang telah dibuat.<b> <br />
</b><br />
Catatan:<br />
File _form.html.erb kita jadikan <b>parsial</b>. Pada Rails untuk penamaan file parsial harus diawali dengan tanda <b>underscore</b>.<br />
<br />
</span></span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Coba jalankan server dengan menjalankan perintah</span></span></span></span><br />
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">dan buka url <a href="http://localhost:3000/categories/new">http://localhost:3000/categories/new</a></span>. <span face=""arial" , "helvetica" , sans-serif">Halaman tersebut masih berupa halaman kosong. </span></div>
</li>
<span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif">Pada file <b>categories_controller.rb</b> tambahkan script berikut.<!--<script src="https://gist.github.com/FatharaAzka/63a4c55d2fc238537f5073d9df85e804.js"></script>--><script src="https://gist.github.com/andrian-doterb/04b7e8a54ae39f39df6ff5931a003ed3.js"></script></span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Pada file <b>_form.html.erb </b>tambahkan script berikut. </span><script src="https://gist.github.com/FatharaAzka/662fa36eef9abc7a41f7de83f45242b1.js"></script><br />
</li>
<li><span face=""arial" , "helvetica" , sans-serif">Tambahkan script pada file <b>new.html.erb</b> seperti berikut.<script src="https://gist.github.com/FatharaAzka/1e6f571a13129e65e8652aaec4cc1d97.js"></script></span><br />
</li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Step-step di atas hanya menghasilkan halaman tambah kategori. Coba jalankan kembali</span> <span face=""arial" , "helvetica" , sans-serif">url <a href="http://localhost:3000/categories/new">http://localhost:3000/categories/new</a>. Jika step-step di atas dilakukan dengan benar, maka tampilan dari halaman tambah data kategori akan muncul seperti berikut.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-JqZeMfsJIhM/WqtBCA10ekI/AAAAAAAAA1I/_A_1nWQMVn0FFK5fi_-6g748upG8Cg_3gCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B10-58-37.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://4.bp.blogspot.com/-JqZeMfsJIhM/WqtBCA10ekI/AAAAAAAAA1I/_A_1nWQMVn0FFK5fi_-6g748upG8Cg_3gCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B10-58-37.png" width="320" /></a></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Setelah membuat proses untuk menampilkan halaman baru, yang akan kita lakukan selanjutnya adalah untuk membuat proses menyimpan data yang dimasukkan dari halam tersebut.</span></div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada method <b>create</b> di </span><b>categories_controller.rb</b> tambahkan script berikut.<script src="https://gist.github.com/FatharaAzka/33fdbbda3799571f2636e5f7a21f795f.js"></script><br />
Berikut ini merupakan penjelasan dari script tersebut:</span><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">@category = Category.new(params.require(:category).permit(:name))
</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Penjelasan:</span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif">Melakukan <b>instansiasi</b> terhadap <b>model Category</b>, dimana untuk melakukan instansiasi ini <b>memerlukan parameter category</b>. </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Parameter ini terdapat pada form di <b>new.html.erb</b>. Dan data yang <b>diperbolehkan</b> adalah data <b>name</b> saja.</span></li>
</ul>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">respond_to do |format|
if @category.save
format.html { redirect_to "/categories/new", notice: "Category was successfully created." }
else
format.html { redirect_to "/categories/new", notice: "Category wasm't successfully created." }
end
end
</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Penjelasan:<br />
</span><ul>
<li><span face=""arial" , "helvetica" , sans-serif"><b>respond_to do</b> berguna untuk <b>mengeksekusi perintah</b> menyimpan data menggunakan <b>web-service support</b>. Tag ini berguna untuk menampilkan hasil respon dalam format html. </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Jika data yang ditampung oleh variable <b>@category berhasil disimpan</b>, maka <b>menampilkan text</b> berupa nama kategori berhasil ditambahkan dan kembali ke halaman tambah data</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">JIka <b>tidak berhasil disimpan</b>, akan <b>menampilkan text</b> bahwa nama kategori tersebut tidak berhasil ditambahkan dan kembali ke halaman tambah data.</span></li>
</ul>
<span face=""arial" , "helvetica" , sans-serif">Kita lakukan testing, kita coba masukkan data <b>fisika</b> pada text field, seperti berikut.</span><br />
<br />
<div style="text-align: center;">
<a href="https://4.bp.blogspot.com/-uePS_BlufiU/WqtpRleVPPI/AAAAAAAAA1k/55eBH0BPR4UsWJX7smnKlBWHfk1mn5qRwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B13-49-35.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://4.bp.blogspot.com/-uePS_BlufiU/WqtpRleVPPI/AAAAAAAAA1k/55eBH0BPR4UsWJX7smnKlBWHfk1mn5qRwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B13-49-35.png" width="320" /></a></div>
<span face=""arial" , "helvetica" , sans-serif">Coba klik pada button create category. Jika data berhasil disimpan, maka pada tampilan akan muncul seperti berikut.</span><br />
<br />
<div style="text-align: center;">
<a href="https://2.bp.blogspot.com/-CRQXDIRyjBs/Wqtp8xLMhCI/AAAAAAAAA1s/wh_TBwcpsXQ8kWjMWUBbszd6Z7Dq-OIaACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B13-49-52.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://2.bp.blogspot.com/-CRQXDIRyjBs/Wqtp8xLMhCI/AAAAAAAAA1s/wh_TBwcpsXQ8kWjMWUBbszd6Z7Dq-OIaACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B13-49-52.png" width="320" /></a></div>
</li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Read pada Active Record</b></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Selanjutnya untuk membuat sistem menampilkan semua data kategori yang telah dimasukkan, yang akan kita lakukan adalah</span></span></span></span></div>
<ol style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Buat file dengan nama <b>index.html.erb </b>di dalam folder <b>app/views/categories</b>.<b> </b><br />
</span></span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Coba jalankan server dengan menjalankan perintah</span></span></span></span><br />
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">dan buka url <a href="http://localhost:3000/categories">http://localhost:3000/categories</a></span>. <span face=""arial" , "helvetica" , sans-serif">Halaman tersebut masih berupa halaman kosong. </span></div>
</li>
<span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif">Pada file <b>index.html.erb </b>tambahkan script berikut. </span><script src="https://gist.github.com/FatharaAzka/1de00c0da2a89bee4dc53c85003efafe.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif">Lalu jalankan kembali url </span><span face=""arial" , "helvetica" , sans-serif"><a href="http://localhost:3000/categories">http://localhost:3000/categories</a> di browser. Maka pada halaman tersebut tampilan yang akan muncul adalah sebagai berikut.<br />
</span><br />
<div style="text-align: center;">
<span face=""arial" , "helvetica" , sans-serif"><a href="https://4.bp.blogspot.com/-QpGyfzt6Cdg/Wqtqxulkc5I/AAAAAAAAA14/n22f04TFbi8ljexFhsZUmWERss0R7NvswCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B13-56-46.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://4.bp.blogspot.com/-QpGyfzt6Cdg/Wqtqxulkc5I/AAAAAAAAA14/n22f04TFbi8ljexFhsZUmWERss0R7NvswCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B13-56-46.png" width="320" /></a> </span></div>
<div style="text-align: center;">
</div>
<span face=""arial" , "helvetica" , sans-serif">Masih ingat pada modul sebelumnya, yaitu <a href="http://www.belajarrubyonrails.com/2018/03/seri-belajar-ruby-on-rails-bagian-6.html">Bagian 6 - Membuat Table & Dummy Data</a> kita melakukan penambahan data pada tabel kategori melalui <i><b>seeding</b></i> di Rails. Data tersebut<i> </i>terdiri dari <b>Matematika, Sejarah, Bahasa Indonesia, Bahasa Inggris, Bahasa Jepang, Agama, Kimia, dan Biologi</b>. <br />
<br />
Sedangkan <b>Fisika</b> adalah data yang ditambahkan melalui form.<br />
<br />
</span></li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Yang kita lakukan barulah menampilkan semua data kategori, lalu bagaimana jika kita ingin menampilkan data kategori yang spesifik. Langkah yang dilakukan, yaitu:</span></div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Buat file dengan nama <b>show.html.erb </b>di dalam folder <b>app/views/categories</b>.<b> </b>Tambahkan script berikut.</span></span></span></span><script src="https://gist.github.com/FatharaAzka/e0d9547de5e23c8e1d649ce497fc5f04.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada <b>categories_controller.rb</b> method <b>show</b>, tambahkan script berikut.<br />
</span></span></span></span><script src="https://gist.github.com/FatharaAzka/26bca12de81dcfdfc307ac78d7aafecb.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Coba jalankan server dengan menjalankan perintah</span></span></span></span><br />
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">dan buka url <a href="http://localhost:3000/categories">http://localhost:3000/categories</a></span> <span face=""arial" , "helvetica" , sans-serif">dan klik link show pada salah satu data. Maka pada halaman tersebut tampilan yang akan muncul adalah sebagai berikut</span></div>
<span face=""arial" , "helvetica" , sans-serif"> </span><br />
<div style="text-align: center;">
<div class="separator" style="clear: both;">
<a href="https://4.bp.blogspot.com/-AzNQYf9bmJM/WquXj8YGTyI/AAAAAAAAA2o/00BztgRYKpcMNKah_vKESeXxYJdCxrFYgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B17-08-01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://4.bp.blogspot.com/-AzNQYf9bmJM/WquXj8YGTyI/AAAAAAAAA2o/00BztgRYKpcMNKah_vKESeXxYJdCxrFYgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B17-08-01.png" width="320" /></a></div>
</div>
</li>
</ol>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Update pada Active Record</b></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Selanjutnya untuk membuat sistem ubah data kategori yang akan kita lakukan adalah</span></span></span></span></div>
<ol style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Buat file dengan nama <b>edit.html.erb </b>di dalam folder <b>app/views/categories</b>.<b> </b>Tambahkan script berikut.</span></span></span></span><script src="https://gist.github.com/FatharaAzka/08b8fe0f5f06cfcf7ee286c9df1552d3.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada <b>categories_controller.rb</b> method <b>edit</b>, tambahkan script berikut.<br />
<b></b></span></span></span></span><script src="https://gist.github.com/FatharaAzka/48e27bfdbe0c67b4736cc74cca575c86.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Coba jalankan server dengan menjalankan perintah</span></span></span></span><br />
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">dan buka url <a href="http://localhost:3000/categories">http://localhost:3000/categories</a></span> <span face=""arial" , "helvetica" , sans-serif">dan klik link edit pada salah satu data. Maka pada halaman tersebut tampilan yang akan muncul adalah sebagai berikut</span></div>
<span face=""arial" , "helvetica" , sans-serif"> </span><br />
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-12srlQa06jw/WquNC5zLIsI/AAAAAAAAA2I/nQLuGppO2z8GwFlQfKSazodovkzRNIfFQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B16-22-44.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://1.bp.blogspot.com/-12srlQa06jw/WquNC5zLIsI/AAAAAAAAA2I/nQLuGppO2z8GwFlQfKSazodovkzRNIfFQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B16-22-44.png" width="320" /></a></div>
<div style="text-align: left;">
<span face=""arial" , "helvetica" , sans-serif">Kita baru sampai pada step menampilkan tampilan ubah data. Selanjutnya kita tambahkan script untuk melakukan proses pengubahan data. <br />
<br />
Pada <b>categories_controller.rb</b> method <b>update</b>, tambahkan script berikut.<br />
</span><script src="https://gist.github.com/FatharaAzka/c52fe823ea5ecc05e4bfd9140cbe1e4b.js"></script></div>
</div>
<span face=""arial" , "helvetica" , sans-serif">Sekarang coba lakukan pengubahan data pada halaman ubah data. Jika melakukan step dengan benar, pasti data akan berhasil diubah.</span></li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Selanjutnya, kita akan membuat proses untuk melakukan penghapusan data. Yang harus dilakukan adalah sebagai berikut.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Delete pada Active Record</b></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Selanjutnya untuk membuat sistem ubah data kategori yang akan kita lakukan adalah</span></span></span></span></div>
<ol style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada <b>categories_controller.rb</b> method destroy, tambahkan script berikut.<br />
</span></span></span></span><script src="https://gist.github.com/FatharaAzka/077560fc42f2c327a73d080b354b31ba.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Coba jalankan server dengan menjalankan perintah</span></span></span></span><br />
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">dan buka url <a href="http://localhost:3000/categories">http://localhost:3000/categories</a></span> <span face=""arial" , "helvetica" , sans-serif">dan klik link destroy pada salah satu data. Maka pada halaman tersebut tampilan yang akan muncul pop-up berupa konfirmasi penghapusan data sebagai berikut</span></div>
<span face=""arial" , "helvetica" , sans-serif"> </span><br />
<div style="text-align: center;">
<div class="separator" style="clear: both;">
<a href="https://4.bp.blogspot.com/-ms6zxP1ZuO4/WquR8IaCnJI/AAAAAAAAA2Y/o8vkgVOU_-cCk0hLo61mGbETY-306eAVQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-16%2B16-43-58.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="744" data-original-width="1319" height="180" src="https://4.bp.blogspot.com/-ms6zxP1ZuO4/WquR8IaCnJI/AAAAAAAAA2Y/o8vkgVOU_-cCk0hLo61mGbETY-306eAVQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-16%2B16-43-58.png" width="320" /></a></div>
</div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span><span face=""arial" , "helvetica" , sans-serif">Jika kita menekan button OK, maka data akan terhapus dan kembali ke halaman sebelumnya.</span><br />
</li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></span></div>
Anonymousnoreply@blogger.com3tag:blogger.com,1999:blog-810712507486016259.post-58921947504660643382021-03-16T09:24:00.004+07:002021-11-15T10:13:29.783+07:00Seri Belajar Ruby on Rails Bagian 8 - Membuat Validasi, Relasi dan Scope<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Pada <a href="http://www.belajarrubyonrails.com/2018/03/seri-belajar-ruby-on-rails-bagian-7.html">artikel sebelumnya</a>, kita telah mempelajari mengenai Active Record dan penggunaan Active Record pada Rails. Sebagai contoh pada tutorial sebelumnya, kita membuat aplikasi homework management yang berfungsi untuk melakukan manajemen tugas harian sekolah ataupun tugas kuliah.</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Pada aplikasi tersebut terdapat dua buah model, yaitu <b>category</b> dan <b>homework. </b>Selain itu, pada aplikasi juga terdapat dua buah tabel, yaitu tabel <b>categories </b>dan tabel <b>homeworks.</b></span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Aplikasi ini sudah bisa melakukan CRUD. Akan tetapi, aplikasi yang dibuat masih sederhana. Misalnya saja, jika user melakukan pengisian data <i>homework</i> baru dan pada salah satu kolom tidak diisi, data tersebut masih bisa masuk ke dalam <i>database</i>. Untuk itulah dibutuhkan validasi. Terakhir kali, tampilan aplikasi yang sudah kita buat adalah sebagai berikut.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-D6GKqJBolZI/Wtb6oX5Md8I/AAAAAAAAA28/Bhp_KtUoRrUG-MRws090cXkcwAuB0MpJwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-18%2B14-57-36.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="654" data-original-width="1312" height="159" src="https://3.bp.blogspot.com/-D6GKqJBolZI/Wtb6oX5Md8I/AAAAAAAAA28/Bhp_KtUoRrUG-MRws090cXkcwAuB0MpJwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-18%2B14-57-36.png" width="320" /></a></div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">A. VALIDASI</span></h3>
<h3 style="text-align: justify;">
<b><span face=""arial" , "helvetica" , sans-serif">Apa itu Validasi ?</span></b></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Validasi digunakan untuk memastikan hanya data yang valid yang dapat masuk ke <i>database. </i>Contohnya, mungkin saja penting untuk memastikan bahwa user melakukan pengisian nama kategori yang valid pada aplikasi yang dibuat.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Pada rails, validasi dapat dilakukan dengan beberapa cara, yaitu:</span></div>
<div>
<ul>
<li><div style="text-align: justify;">
<b style="font-family: Arial, Helvetica, sans-serif;">Database constraint</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Database constraint disini maksudnya adalah pembatasan yang dilakukan pada sisi database. Contoh constraint adalah bahwa <b>email</b> pada tabel user haruslah bersifat <i><b>unique</b>. </i> Pada rails, validasi menggunakan database constraint dapat dilakukan di <b>model</b>.</div>
</span></li>
<li><div style="text-align: justify;">
<b style="font-family: Arial, Helvetica, sans-serif;">Client-side validation</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Client-side validation adalah <b>validasi </b>yang dilakukan pada <b>sisi klien</b>. Contohnya adalah <b>penggunaan javascript/jquery</b> untuk memvalidasi bahwa pada kolom <i><b>email</b></i> harus mengandung <b>"@"</b> dan <b>"."</b></div>
</span></li>
<li><div style="text-align: justify;">
<b style="font-family: Arial, Helvetica, sans-serif;">Controller validation</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Controller validation, ini dilakukan pada controller, biasanya ini dilakukan sebelum pemrosesan data ke database.</div>
</span></li>
</ul>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
Kapan terjadinya validasi ?</span></h3>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Validasi akan terjadi sebelum proses penyimpanan data ke database. Penyimpanan pada database, terbagi menjadi dua, yaitu:</span></div>
<div>
<ul>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif">Penyimpanan object baru </span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif">Penyimpanan terhadap object yang sudah ada (update)</span></li>
</ul>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Jika proses <b>validasi</b> menghasilkan <b>error</b>, maka <b>Rails</b> <b>tidak akan melanjutkan</b> proses <b>penyimpanan data</b>. Error ini akan menghasilkan message yang dapat ditampilkan pada view dengan menggunakan method </span><span style="background-color: white; color: #222222; font-size: 14px; white-space: pre-wrap;"><b><span style="font-family: "courier new" , "courier" , monospace;">errors.messages</span></b></span></span></div>
</div>
<div>
<div style="background: rgb(255, 255, 255); border: 0px; color: #333333; font-size: 14px; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Validation Helper</span></h3>
</div>
<div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Active Record menyediakan banyak <i>pre-defined validation helper</i> yang dapat digunakan langsung pada model. Setiap validasi menghasilkan </span><span style="font-family: "courier new" , "courier" , monospace;"><b>false</b>,</span><span face=""arial" , "helvetica" , sans-serif">error message yang dihasilkan akan dimasukkan ke dalam </span><b><span style="font-family: "courier new" , "courier" , monospace;">errors</span></b><span face=""arial" , "helvetica" , sans-serif"> collection.</span></div>
</div>
<div>
<div style="background: rgb(255, 255, 255); border: 0px; margin-bottom: 1.5em; outline: 0px; padding: 0px;">
</div>
<ul style="text-align: left;">
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">acceptance</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Method ini memvalidasi bahwa suatu checkbox dalam suatu form telah di<i>check</i></div>
</span>
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; overflow-x: auto; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Person</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> validates <span style="color: #ae81ff;">:terms_of_service</span>, <span style="color: #ae81ff;">acceptance:</span> <span style="color: #ae81ff;">true</span> <span style="color: #88846f;">#user harus mencentang checkbox terms_of_service</span></div><div><span style="color: #f92672;">end</span></div></div></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>validates_associated</b></span><span face=""arial" , "helvetica" , sans-serif"><br />
Helper ini dapat digunakan ketika suatu model mempunyai hubungan dengan model lainnya. Jadi helper ini akan memvalidasi model itu sendiri dan model yang berkaitan.</span><br />
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Homework</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> has_many <span style="color: #ae81ff;">:categories</span></div><div> validates_associated <span style="color: #ae81ff;">:categories</span></div><div><span style="color: #f92672;">end</span></div></div>
</li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">confirmation</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Helper ini dapat digunakan ketika terdapat dua text field yang harus menerima isi yang sama. Contohnya, jika pada aplikasi dibutuhkan konfirmasi sebuah <i><b>email</b></i> atau <i>password. </i></div>
<div style="text-align: justify;">
Validasi<i> </i>ini akan membuat <b>virtual attribute</b> dengan nama dari field yang harus dikonfirmasi dengan kata <b>"_confirmation"</b> pada <b>akhir attribut</b> tersebut.</div>
</span>
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Person</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> validates <span style="color: #ae81ff;">:email</span>, <span style="color: #ae81ff;">confirmation:</span> <span style="color: #ae81ff;">true</span></div><div><span style="color: #f92672;">end</span></div></div>
</li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">length</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Digunakan untuk memvalidasi panjang dari suatu nilai pada attribut.</div></span>
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; overflow-x: auto; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Category</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> validates <span style="color: #ae81ff;">:name</span>, <span style="color: #ae81ff;">length:</span> { <span style="color: #ae81ff;">minimum:</span> <span style="color: #ae81ff;">2</span> } <span style="color: #88846f;">#field name ini tidak boleh memiliki panjang kurang dari 2 karakter</span></div><div><span style="color: #f92672;">end</span></div></div></li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">numericality</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Digunakan untuk melakukan validasi bahwa nilai pada suatu attribut hanya memiliki <i>numeric values</i></div>
</span></li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">presence</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Helper ini digunakan untuk melakukan validasi bahwa suatu attribut harus diisi.</div>
</span>
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Category</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> validates <span style="color: #ae81ff;">:name</span>, <span style="color: #ae81ff;">presence:</span> <span style="color: #ae81ff;">true</span> <span style="color: #88846f;">#field name ini harus diisi</span></div><div><span style="color: #f92672;">end</span></div></div>
</li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">absence</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Helper ini digunakan untuk melakukan validasi bahwa suatu attribut tidak boleh diisi.</div>
</span></li>
<li><div style="text-align: justify;">
<b style="font-family: arial, helvetica, sans-serif;">uniqueness</b></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Digunakan untuk memvalidasi bahwa suatu nilai harus bersifat unique atau tidak boleh sama</div>
</span>
<div style="overflow-x: auto; background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">Category</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ApplicationRecord</span></div><div> validates <span style="color: #ae81ff;">:name</span>, <span style="color: #ae81ff;">uniqueness:</span> <span style="color: #ae81ff;">true</span></div><div><span style="color: #f92672;">end</span></div></div>
</li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>exclusion</b></span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>format</b></span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>validates_with</b></span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>validates_each</b></span></li>
</ul>
<div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Validasi di Rails juga memiliki beberapa opsi/pilihan, yaitu </span></div>
</div>
<div>
<ul>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>:allow_nil</b><br />
Opsi ini mengizinkan suatu attribut bernilai nil</span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>:allow_blank</b><br />
Opsi ini hampir sama dengan <b>:allow nil</b>, perbedaannya yaitu opsi ini memperbolehkan suatu attribut bernilai kosong. </span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>:message</b><br />
<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-UIQNGJuKrHc/YW5hW--pV2I/AAAAAAAABIY/ReBNMYq-COox9B2h-60XodN9201LxPESQCLcBGAsYHQ/s493/Screenshot%2Bfrom%2B2021-10-19%2B13-09-37.png" style="display: block; padding: 1em 0; text-align: center; clear: left; float: left;"><img alt="" border="0" width="600" data-original-height="18" data-original-width="493" src="https://1.bp.blogspot.com/-UIQNGJuKrHc/YW5hW--pV2I/AAAAAAAABIY/ReBNMYq-COox9B2h-60XodN9201LxPESQCLcBGAsYHQ/s600/Screenshot%2Bfrom%2B2021-10-19%2B13-09-37.png"/></a></div>
Digunakan untuk melakukan custom message jika suatu validasi bernilai<b> false</b></span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><b>:on</b><br />
Opsi ini mengizinkan kita untuk menentukan kapan validasi harus dilakukan. Secara default, semua validasi dilakukan pada saat proses menyimpan, baik saat proses create atau update.</span></li>
</ul>
</div>
<h3 style="text-align: justify;">
<b><span face=""arial" , "helvetica" , sans-serif"><br />
Conditional Validation</span></b></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Terkadang kita menginginkan suatu validasi hanya dijalankan pada saat kondisi-kondisi tertentu. Pada Rails, hal ini dapat dilakukan dengan menggunakan <b>:if</b> atau <b>:unless</b></span><br />
<script src="https://gist.github.com/FatharaAzka/65313f938c58244d0275e473440f5911.js"></script><br />
<h3>
<b style="font-family: arial, helvetica, sans-serif;">Custom Validation </b></h3>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Rails memang menyediakan helper yang dapat digunakan untuk melakukan validasi. Namun ada kalanya, validasi yang diperlukan lebih complex. Untuk megatasi masalah tersebut dapat dilakukan dengan cara membuat validasi sendiri (<i>custom</i>). Contohnya, jika pada suatu aplikasi, user harus memasukkan email yang valid.</span><script src="https://gist.github.com/FatharaAzka/5abddd864b9c89d7278d8a5139b5994c.js"></script><br />
<h3>
Scope validation
<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-nRCeur7ctLQ/YW5h-zYEkPI/AAAAAAAABIg/RfjWWj-RMagg4arHOshzRzkzoWmeIe94QCLcBGAsYHQ/s286/Screenshot%2Bfrom%2B2021-10-19%2B13-11-51.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="48" data-original-width="286" src="https://1.bp.blogspot.com/-nRCeur7ctLQ/YW5h-zYEkPI/AAAAAAAABIg/RfjWWj-RMagg4arHOshzRzkzoWmeIe94QCLcBGAsYHQ/s600/Screenshot%2Bfrom%2B2021-10-19%2B13-11-51.png"/></a></div>
<small>digunakan untuk validasi terhadap coloum tertentu</small><br><br>
<span face=""arial" , "helvetica" , sans-serif">Implementasi Validasi pada Aplikasi</span></h3>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Setelah mengetahui mengenai validasi pada Rails, kita coba implemetasikan pada aplikasi yang telah dibuat sebelumnya, yaitu aplikasi homework management.</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Pada aplikasi terdapat dua buah table, yaitu table <b>homework</b> dan <b>category </b>(berisi nama jadwal pelajaran). </span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span><span face=""arial" , "helvetica" , sans-serif"> Buka model category dan homework pada folder <b>app/models</b>. <br />
<script src="https://gist.github.com/FatharaAzka/e496d773bf0e68be587fcd9092031eb4.js"></script><br />
Pada model category, kita tambahkan validasi sebagai berikut. </span><script src="https://gist.github.com/FatharaAzka/e86cfbbff7b88e577777f3d71322b147.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Sedangkan pada model homework, tambahkan validasi sebagai berikut.</span><script src="https://gist.github.com/FatharaAzka/15470d323c2b8f7833b6b969c922077b.js"></script><br />
<h3>
<span face=""arial" , "helvetica" , sans-serif">Cara Menampilkan Pesan Error ketika Meggunakan Validasi </span></h3>
<span face=""arial" , "helvetica" , sans-serif">Di atas validasi telah dibuat, namun bagaimana caraya agar user mengetahui letak kesalahan dalam pegisian sebuah data ?. Caranya adalah tentu dengan menampilkan message error tersebut ke dalam tampilan user. Pada Rails, untuk menampilkan message error pada view (tampilan), dapat dilakukan dengan cara berikut.</span><br />
<br />
<span face=""arial" , "helvetica" , sans-serif">Contohnya, kita akan menampilkan mesage error yang dihasilkan ketika melakukan penambahan data homework. Artinya, kita akan menampilkan message error ketika proses create data. Maka, yang harus dilakukan adalah buka file homework_controller pada folder <b>app/controller. </b>Tambahkan script berikut.</span><script src="https://gist.github.com/FatharaAzka/ea1ff6d20a60e32ceb22dccc61b70746.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Pada bagian yg di dalamya terdapat form untuk menambahkan data baru, tambahkan script seperti berikut.</span><script src="https://gist.github.com/FatharaAzka/36e7d3c97daeff1d28f50b4959e9dab4.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Kita coba jalankan aplikasi dengan menjalankan perintah </span><b style="font-family: arial, helvetica, sans-serif;"><span style="font-family: "courier new" , "courier" , monospace;">rails s</span></b><span face=""arial" , "helvetica" , sans-serif"> di terminal. Kita akan mencoba validasi yang telah dibuat, apakah berhasil atau tidak ?. Berikut contoh form tambah data homework.</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-zavcxYoGALg/WtgOLwav_DI/AAAAAAAAA3Y/s0MioiqILvIi5TSrCEvajXTrBWQfiE4owCPcBGAYYCw/s1600/Screenshot%2Bfrom%2B2018-04-19%2B10-33-46.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="744" data-original-width="1313" height="181" src="https://3.bp.blogspot.com/-zavcxYoGALg/WtgOLwav_DI/AAAAAAAAA3Y/s0MioiqILvIi5TSrCEvajXTrBWQfiE4owCPcBGAYYCw/s320/Screenshot%2Bfrom%2B2018-04-19%2B10-33-46.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Form Menambahkan Data Homework</td></tr>
</tbody></table>
<span face=""arial" , "helvetica" , sans-serif">Lalu coba tekan tombol <b>create homework </b>tanpa mengisi apapun. Jika validasi berhasil dibuat, maka pada view akan muncul <b><i>message</i></b> seperti berikut.</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-8FplgW6vg80/WtmMKTnLEoI/AAAAAAAAA3s/e9Nl6-wWkRMAjN7qbuIF7OE59lFJtE_qwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-20%2B13-38-28.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="744" data-original-width="1313" height="181" src="https://1.bp.blogspot.com/-8FplgW6vg80/WtmMKTnLEoI/AAAAAAAAA3s/e9Nl6-wWkRMAjN7qbuIF7OE59lFJtE_qwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-20%2B13-38-28.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Message Error pada Halaman Tambah Data Homework</td></tr>
</tbody></table>
<br />
<h3>
<span face=""arial" , "helvetica" , sans-serif">B. Relasi</span></h3>
<h3>
<span face=""arial" , "helvetica" , sans-serif"><b>Apa itu Relasi ?</b></span></h3>
<span face=""arial" , "helvetica" , sans-serif"><span style="font-size: normal; font-weight: 400;"><br />
</span></span> <span face=""arial" , "helvetica" , sans-serif"><span style="font-size: normal; font-weight: 400;">Pada aplikasi homework management yg telah dibuat telah dijelaskan di atas bahwa aplikasi ini memiliki dua buah tabel dan model, yaitu:</span><br />
</span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-weight: normal;">Tabel categories dan model category untuk menyimpan nama jadwal pelajaran</span></span></li>
<span face=""arial" , "helvetica" , sans-serif">
<li><span face=""arial" , "helvetica" , sans-serif" style="font-weight: normal;">Tabel homeworks dan model homework untuk menyimpan data tugas</span></li>
</span></ul>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"></span></span><br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: 400;">Pada aplikasi tersebut, sistem </span><b>CRUD</b><span style="font-weight: 400;"> pada data </span><b>homework</b><span style="font-weight: 400;"> dan data </span><b>category</b><span style="font-weight: 400;"> sudah dapat dilakukan. Berikut tampilan form untuk melakukan penambahan data homework dan data category.</span></span></span></span></span></div>
<div style="font-weight: 400; text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span style="font-weight: 400;"><br />
</span></span></span></span></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-zavcxYoGALg/WtgOLwav_DI/AAAAAAAAA3U/uO3J0nb7wkEg9wJ01_M2uGHJJVJUyqLfwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-19%2B10-33-46.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="744" data-original-width="1313" height="181" src="https://3.bp.blogspot.com/-zavcxYoGALg/WtgOLwav_DI/AAAAAAAAA3U/uO3J0nb7wkEg9wJ01_M2uGHJJVJUyqLfwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-19%2B10-33-46.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Form Menambahkan Data Homework</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-xqmWqBiiFeE/WtgPFLHKU8I/AAAAAAAAA3c/RunQu4duXLU6ohsZ6PhH-ZZRGk8oYuvEQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-19%2B10-37-37.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="744" data-original-width="1313" height="181" src="https://4.bp.blogspot.com/-xqmWqBiiFeE/WtgPFLHKU8I/AAAAAAAAA3c/RunQu4duXLU6ohsZ6PhH-ZZRGk8oYuvEQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-19%2B10-37-37.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Form Menambahkan Data Category</td></tr>
</tbody></table>
<div style="font-weight: 400; text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span style="font-weight: 400;"><br />
</span></span></span></span></span></div>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;">Pada <b>tampilan</b> <b>tambah data homework </b>terdapat field <b>category</b>, dimana user harus mengisi sendiri nama category. Sedangkan kita sudah membuat tabel category beserta view dan sistem CRUD-nya. Lalu untuk apa ada tabel category jika kita bisa memasukkan sendiri nama categorynya ?. Untuk itulah dibutuhkan relasi agar saat memasukkan data homework, category yang dimasukkan berdasarkan data category yang sudah ada.</span><br />
<br />
<span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span style="font-weight: 400;">Jadi kesimpulannya, relasi adalah hubungan antara dua atau lebih tabel yang sehingga memiliki keterkaitan.</span></span></span></div>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span style="font-weight: 400;"><br />
</span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif" style="font-size: normal;"><span style="font-weight: 400;">Jika kita pikirkan dari kedua tabel tersebut, maka terdapat kesimpulan jika:</span></span></span></div>
<div style="text-align: justify;">
<ul>
<li><span face=""arial" , "helvetica" , sans-serif">Data <b>homework</b> <b>hanya</b> <b>diwakili </b>oleh <b>satu category</b></span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Data <b>category</b> mewakili <b>banyak data </b>pada<b> homework</b></span></li>
</ul>
<div>
<span face=""arial" , "helvetica" , sans-serif">Lalu bagaimana cara membuat relasi ini pada Rails ?.</span></div>
<div>
<h3>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></h3>
<h3>
<span face=""arial" , "helvetica" , sans-serif">Cara Mendifinisikan Relationship di Rails</span></h3>
</div>
<div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Untuk <b>mendefinisikan</b> <b>relationship</b> di Rails, kita dapat melakukannya di <b>model. </b>Relasi pada Rails, terdapat beberapa macam, yaitu:</span></div>
<div>
<ul>
<li><span face=""arial" , "helvetica" , sans-serif">belongs_to<br />
Ini seperti <b>one-to-one</b>. Contohnya terdapat tabel <b>buku</b> dan <b>pengarang</b>, dimana <b>satu buku diwakili hanya</b> oleh <b>satu pengarang</b>.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">has_one<br />
Contohnya jika terdapat tabel <b>supplier </b>dimana <b>satu</b> <b>supplier hanya memiliki satu account</b></span></li>
<li><span face=""arial" , "helvetica" , sans-serif">has_many<br />
Contohnya jika terdapat tabel <b>buku</b> dan <b>pengarang</b>, dimana <b>pengarang</b> <b>telah mengarang banyak buku</b>, yang artinya <b>pengarang</b> bisa <b>mewakili</b> <b>banyak buku</b> yang berbeda.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">has_many :through</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">has_one :through</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">has_and_belongs_to_many</span></li>
</ul>
<div>
<span face=""arial" , "helvetica" , sans-serif">Pada aplikasi homework management sesuai dengan kesimpulan berikut</span></div>
</div>
<div>
<ul>
<li><span face=""arial" , "helvetica" , sans-serif">Data <b>homework</b> <b>hanya</b> <b>diwakili </b>oleh <b>satu category</b></span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Data <b>category</b> mewakili <b>banyak data </b>pada<b> homework</b></span></li>
</ul>
<div>
<span face=""arial" , "helvetica" , sans-serif">Maka<b> </b>kita dapat menggunakan <b>belongs_to</b> pada model <b>homework</b>, dan <b>has_many</b> pada model <b>category. </b>Kita implementasikan pada model category seperti berikut.</span><script src="https://gist.github.com/FatharaAzka/74227de7fd22c7b402d162f6de60ba8a.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Sedangkan pada model <b>homework</b>, kita dapat mendefinisikan relationshipnya seperti berikut.</span><br />
<script src="https://gist.github.com/FatharaAzka/f2dd48d825c82f67b61d9591238c9335.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Lalu kita ubah sistem input data homework pada bagian field category, sehingga category yang dimasukkan berdasarkan data category yang sudah ada. Pertama, kita <b>ubah</b> struktur <b>migration</b> <b>homework</b> untuk menambahkan kolom <b>category_id</b> dengan cara seperti berikut pada terminal.</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">rails g migration AddCategoryIdToHomework</span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Setelah itu buka file migrationnya pada folder <b>db/migrate</b>, dan tambahkan script berikut.</span><br />
<script src="https://gist.github.com/FatharaAzka/081f78b92a47c782c95d5c1bd5e4274e.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Migrate migrasi dengan cara mengetikkan perintah berikut pada terminal</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">rake db:migrate</span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Lalu kita ubah tampilan form untuk menambahkan data atau update data homework. Sebelumnya pada field category berupa <b>textbox</b>, seperti berikut.</span><script src="https://gist.github.com/FatharaAzka/e8e4cfd49da6126e3cbe96ad3ad5ff85.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Kita ubah pada bagian field category</span><script src="https://gist.github.com/FatharaAzka/c3e7430bc8d4b08e48d44d813c51c8b0.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">menjadi seperti berikut.</span><script src="https://gist.github.com/FatharaAzka/cb1ddd0f18916e4a0a8e469d979ab14f.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Setelah itu, tambahkan script berikut pada homework_controller.</span><script src="https://gist.github.com/FatharaAzka/00523c04e48eab721b961e1956592db5.js"></script><br />
<span face=""arial" , "helvetica" , sans-serif">Jangan lupa untuk <b>memperhatikan param</b> yg akan diproses untuk melakukan penambahan atau pengubahan data. Pada contoh kali ini, saya memasukkan <b>param[:category]</b> ketika belum adanya relasi antara model homework dan category. Lalu tadi kita telah menambahkan kolom baru, yaitu <b>category_id</b>. Jadi, kita juga harus menambahkan <b>param[:category_id]</b></span><br />
<br />
<p> Apabila masih terdapat error validasi saat kita menambahkan data, jangan lupa kita ubah parameter <b>category</b> menjadi <b>category_id</b> pada method <b>homework_params</b> pada bagian <b>private</b> di <b>controller</b>.</p>
<script src="https://gist.github.com/andrian-doterb/e0247e541777a4eb36f4957a253f8d8a.js"></script>
<span face=""arial" , "helvetica" , sans-serif"><b><br />
</b></span> <br />
<h3>
<span face=""arial" , "helvetica" , sans-serif"><b>Bagaimana untuk Menampilkan Data yang Berelasi ?</b></span></h3>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Untuk menampilkan data yang berelasi sesuai dengan yang sudah kita buat antara model category dan homework, bisa dilakukan dengan cara-cara berikut.</span><script src="https://gist.github.com/FatharaAzka/074099e836f849968cf157750e10cd69.js"></script><br />
<h3>
<span face=""arial" , "helvetica" , sans-serif"><b>C. Scope</b></span></h3>
</div>
</div>
<div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Rails menyediakan fungsi scope agar developer bisa menggunakan code secara DRY (Don't Repeat Yourself). Scope digunakan untuk memberikan nama dan condition suatu </span><span face=""arial" , "helvetica" , sans-serif">pemanggilan data. </span><span face=""arial" , "helvetica" , sans-serif"></span><br />
<div>
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Contohnya, jika pada aplikasi setiap menampilkan data category atau data homework, kita mengiginkan data tersebut untuk selalu tampil dari data terbaru.</span><br />
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Penggunaan scope dapat dilakukan dengan berbagai cara</span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Default Scope</b><br />
Scope ini digunakan jika ketika melakukan pemanggilan data dalam suatu model harus selalu berdasarkan kondisi tertentu. Misalnya saja, jika data harus selalu ditampilkan menurut nama homework.</span><script src="https://gist.github.com/FatharaAzka/57beb255bb03ab53a969e36eaaff18ac.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Menerima Argumen</b><br />
Scope juga bisa menerima argumen jika memang dibutuhkan, biasanya ini digunakan pada controller. Contohnhya saja, jika kita ingin mencari data homework yang dibuat berdasarkan waktu tertentu.</span><script src="https://gist.github.com/FatharaAzka/0cfffa0caaac9ee681054e49d802f5e1.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Menggunakan Kondisi<br />
</b></span><script src="https://gist.github.com/FatharaAzka/f0fc6f8310ab637b9b5f2b6a6b414e3e.js"></script></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Merging Scope<br />
</b></span><script src="https://gist.github.com/FatharaAzka/f497e9188a882e1dad6b095b1ddde8d6.js"></script></li>
</ul>
<div>
<span face=""arial" , "helvetica" , sans-serif">Pembahasan materi mengenai pembelajaran validasi, relationship, serta scope di Ruby on Rails diharapkan dapat dimengerti dan dapat menjadi salah satu sumber pembelajaran Rails. </span></div>
</div>
<div>
<span face=""arial" , "helvetica" , sans-serif"><b><br />
</b></span></div>
<div style="text-align: center;">
<span face=""arial" , "helvetica" , sans-serif"><i>"Happy Coding!"</i></span><br />
<span face=""arial" , "helvetica" , sans-serif"><i><br /></i></span></div>
<span face=""arial" , "helvetica" , sans-serif"> </span></div>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></span></div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-810712507486016259.post-1513751968437655412021-03-15T13:30:00.000+07:002021-03-15T15:18:09.286+07:00Seri Belajar Ruby on Rails Bagian 4 - Pengenalan Rails Framework<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pengenalan Rails Framework</span></span></span></span></span></span></h3>
<h3 style="text-align: justify;">
<style>@font-face {
font-family: "Times New Roman";
}@font-face {
font-family: "宋体";
}@font-face {
font-family: "SimSun";
}@font-face {
font-family: "Calibri";
}p.MsoNormal { margin: 0pt 0pt 0.0001pt; text-align: justify; font-family: Calibri; }span.msoIns { text-decoration: underline; color: blue; }span.msoDel { text-decoration: line-through; color: red; }div.Section0 { }</style></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Rails adalah aplikasi framework berbasis web yang dibuat menggunakan bahasa pemrograman Ruby. Rails dibut untuk membuat proses pembuatan aplikasi web menjadi lebih mudah dan dibuat berdasarkan apa yang setipa pengembang butuhkan. Rails membuat para pengembang untuk menulis dengan kode program yang singkat daripada bahasa atau framework lain. Menurut para pengembang yang sudah mencoba Rails mengatakan bahwa Rails membuat deveopment aplikasi web menjadi lebih menyenangkan.</span></span></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span></span> <span face=""arial" , "helvetica" , sans-serif"></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Ruby_On_Rails_Logo.svg/1200px-Ruby_On_Rails_Logo.svg.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="302" data-original-width="800" height="120" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Ruby_On_Rails_Logo.svg/1200px-Ruby_On_Rails_Logo.svg.png" width="320" /></a></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span></span> <span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span></span> <span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Rails memiliki dua filosofi yang menjadi pedoman dalam pembuatannya</span></span></span></span></span></div>
<ol style="text-align: justify;">
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Dirancang untuk memudahkan programmer melakukan konfigurasi karena Ruby on Rails menggunakan prinsip "Convention Over Configuration". Dengan prinsip ini programmer tidak usah terlalu repot untuk melakukan seting aplikasi seperti koneksi ke database, karena sudah ada mekanisme yang disediakan dan cukup mudah karena tinggal mengisi nama tipe server database yang digunakan ( mysql / oracle / sql server / postgresql / etc ), mengatur nama database, username, password dan hos.<br />
<br />
</span></span></span></span></span></li>
<li style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Menggunakan prinsip "DRY ( Do not Repet Yourself )", yang intinya adalah efisiensi dalam manajemen codes. </span></span></span></span></span></li>
<span face=""arial" , "helvetica" , sans-serif"> <span face=""arial" , "helvetica" , sans-serif"> <span face=""arial" , "helvetica" , sans-serif"> </span></span></span></ol>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Arsitektur Rails Framework</span></span></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Rails memiliki konsep MVC(Model View Controller). Apa itu model ? Apa itu View ? dan apa itu Controller ?. Mari kita jawab satu-persatu.</span></span></span></span></div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Model </b><br />
Model adalah <b>inti dari aplikasi ruby on rails</b> yang fungsinya untuk me-maintain sebuah aplikasi. <b>Semua logic</b> dan <b>business rules</b> di dalam aplikasi sebaiknya ditulis dalam model. Misalnya untuk memvalidasi sebuah username agar tidak lebih dari 30 karakter. Nantinya data yang akan masuk ke dalam database otomatis tervalidasi dan tidak mungkin terlewat.</span></span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>View </b><br />
View merupakan bagian yang fungsinya untuk membuat<b> user interface</b>. Misalnya HTML, XML, Ajax, dll. View berfungsi sebagai <b>front-end dari suatu aplikasi</b>. </span></span></span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Controller </b><br />
Controller merupakan bagian yang fungsinya <b>menerima "event" dari luar (user input)</b> dan bertugas untuk<b> menghubungkan model dengan view</b>. Misalnya, untuk mengambil data sebuah user "A". Ambil datanya dari model, siapkan di controller, lalu view bertugas menampilkannya di halaman web.</span></span></span></span></li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">MVC Flow pada Rails, terjadi seperti ini</span></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span> </div>
<div class="separator" style="clear: both; text-align: center;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="https://1.bp.blogspot.com/-g6vkMXymR4k/WqZA8e5V3YI/AAAAAAAAAvo/4up8mtX7EJsQ_GvFGMhpf1Q0xMmKGvLJgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-12%2B14-53-36.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="549" data-original-width="697" height="252" src="https://1.bp.blogspot.com/-g6vkMXymR4k/WqZA8e5V3YI/AAAAAAAAAvo/4up8mtX7EJsQ_GvFGMhpf1Q0xMmKGvLJgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-12%2B14-53-36.png" width="320" /></a></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span> </div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pada gambar terdapat bagan Rails Router. Rails router ini berfungsi untuk mengenali dan menerima permintaan dari URL. Lalu melemparkannya ke controller, atau langsung ke aplikasi itu sendiri. Untuk mengatur rails router ini terdapat pada folder <b>config/routes.rb</b></span></span></span></span><br />
<br />
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Rails memiliki komponen-komponen penting yang saling berkesinambungan. Komponen-komponen tersebut terdiri dari</span></span></span></span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Action Mailer</b><br />
Action Mailer ini memungkin untuk melakukan pengiriman email dari aplikasi web yang dibuat.<br />
</span></span></span></span></span></li>
<span face=""arial" , "helvetica" , sans-serif"> </span>
<li><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action Pack</span></span></span></span></span></b><br />
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action Pack merupakan kombinasi dari action-action di bawah ini.</span></span></span></span></span><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"></span></span></span></span></span></b><ul>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Action Controller</b><br />
Action Controller ini merupakan C dari konsep MVC pada Rails. Controller ini pada umumnya berfungsi menjadi penengah antara model dan view. Ia juga bertugas untuk menerima request dari URL, lalu mem-<i>fetching</i> data atau menyimpan data, dan kemudian menggunakan view untuk menampilkan output berupa HTML.</span></span></span></span></span></li>
<li><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action Dispatcher</span></span></span></span></span></b><br />
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action Dispatcher ini berfungsi sebagai pengatur jalur antara <i>request</i> ke <i>controller</i></span></span></span></span></span><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span></span></b></li>
<li><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action View </span></span></span></span></span></b><br />
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Action ini digunakan oleh Action Controller untuk mengkonversi respon yang dihasilkan controller</span></span></span></span></span><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span></span></span></span></b></li>
</ul>
</li>
<span face=""arial" , "helvetica" , sans-serif"> </span>
<li><b><span face=""arial" , "helvetica" , sans-serif">Active Model<br />
</span></b><span face=""arial" , "helvetica" , sans-serif">Active model berfungsi untuk mengizinkan Action Pack helper untuk berinteraksi dengan <i>plain</i> Ruby object. Action ini juga membantu dalam pembuatan custom ORM (Object Relational Mapping). Action ini berupa library-library yang berisi class-class yang digunakan oleh Active Record.</span></li>
<li><b><span face=""arial" , "helvetica" , sans-serif">Active Record<br />
</span></b><span face=""arial" , "helvetica" , sans-serif">Active Record merupakan M dari konsep MVC pada Rails. Ia bertugas sebagai model dimana ia merupakan bagian dari sistem yang bertanggung jawab atas data bisnis dan logika. Data bisnis ini misalnya data orang, tempat, dsb.</span></li>
<b> </b>
<li><b><span face=""arial" , "helvetica" , sans-serif">Active Resource<br />
</span></b><span face=""arial" , "helvetica" , sans-serif">Active Resource adalah <i>library</i> yang bertujuan untuk menyediakan antarmuka antara Active Record untuk mengontrol <i>resource </i>atau<i> object.</i></span><b><span face=""arial" , "helvetica" , sans-serif"><br />
</span></b></li>
<b> </b>
<li><b><span face=""arial" , "helvetica" , sans-serif">Active Support<br />
</span></b><span face=""arial" , "helvetica" , sans-serif">Active Support adalah salah satu komponen pada Rails yang bertanggungjawab untuk menyediakan Ruby extensions, utilities, dsb. </span></li>
<b> </b>
<li><b><span face=""arial" , "helvetica" , sans-serif">Railties</span></b></li>
</ul>
</div>
<br />
<br />
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Membuat Rails Project Baru</span></span></span></span></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span style="font-size: 10 5000pt; font-weight: normal;">Rails meyediakan generator pemanggil script yang ditujukan untuk embuat proses pengembangan menjadi lebih mudah. Pada tutorial ini penulis menggunakan </span><span style="font-size: 10 5000pt;"><b>ruby versi 3.0.0</b></span><span style="font-size: 10 5000pt; font-weight: normal;"> dan </span><span style="font-size: 10 5000pt;"><b>Rails versi 6.1.3</b></span><span style="font-size: 10 5000pt; font-weight: normal;">. Untuk menggunakan generator untuk membuat Rails project baru, lakukan perintah berikut</span></span></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span> </div>
<div style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;">
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails new blog</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span> <span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Pindah ke folder blog, dengan cara </span></span></div>
<div style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;">
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ cd blog</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br />
</span></span> <span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Struktur dari Rails project</span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span> </div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzA8Ymcmt-C84vnC1o8QK9L3YoLZXQFwInazUaC4AuJ4YsGzyiXZ77rUdyvJBkiNAIYzW8l4_nE3rW-_5rMUkbXiLDnKpBlTegpqhYOebp9HLx_NF1SOYGTpeNiKqhSaTK96ZNdBR5Z5A/" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="529" data-original-width="294" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzA8Ymcmt-C84vnC1o8QK9L3YoLZXQFwInazUaC4AuJ4YsGzyiXZ77rUdyvJBkiNAIYzW8l4_nE3rW-_5rMUkbXiLDnKpBlTegpqhYOebp9HLx_NF1SOYGTpeNiKqhSaTK96ZNdBR5Z5A/w214-h386/image.png" width="214" /></a></div><div style="text-align: justify;"><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Folder yang sering kita buka dan kita ubah isinya saat membuat aplikasi di Rails Framework, sebagai berikut.</span></span></span></span><br />
<ol>
<li><span face=""arial" , "helvetica" , sans-serif"><b>app/</b><br />
Tempat menyimpan controller, model, view, helper, mailers, channels, jobs dan assets.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>config/</b><br />
Tempat menyimpan route, database, dll.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>db/</b><br />
Tempat menyimpan schema database dan migration </span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Gemfile & Gemfile.lock</b><br />
File ini mengizinkan pengguna untuk mensfesifikasin apa yang dibutuhkan gem apa yang dibutuhkan untuk aplikasi. </span></li>
</ol>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Untuk melihat detail fungsi dari masing-masing folder lebih jelasnya terdapat <a href="http://guides.rubyonrails.org/getting_started.html" target="_blank">disini.</a></span></span></span></span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Menjalankan Rails Project</span></span></span></span></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Setelah membuat project baru, coba jalankan project tersebut dengan cara jalankan perintah berikut.</span></span></span></span></span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;">
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">lalu coba jalankan dengan cara mengetikkan url <a href="http://localhost:3000/">http://localhost:3000</a> pada web browse. Jika project berhasil dijalankan, maka akan muncul halaman seperti berikut.</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5oJ8u2p9gcQRtaAfilg2801LvLW8u85pn5K0EN5N3asfKISw-9SuL9q0SlP3vORUFEnjmfKbSBAPkhCYShWaoQW2rDiC-PEwuzWDBwI0B9qmJ-WL2uDQPrXEj3AMbvo3hRNKX7bTHAB3/" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="522" data-original-width="758" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5oJ8u2p9gcQRtaAfilg2801LvLW8u85pn5K0EN5N3asfKISw-9SuL9q0SlP3vORUFEnjmfKbSBAPkhCYShWaoQW2rDiC-PEwuzWDBwI0B9qmJ-WL2uDQPrXEj3AMbvo3hRNKX7bTHAB3/w476-h327/image.png" width="476" /></a></div><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk menghentikan web server, lakukan CTRL + C pada terminal atau command prompt. </span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="color: #0000ee;"><span style="color: #444444;">Membuat Controller dan View</span><u><br />
</u></span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk membuat sebuah project Rails, minimalnya harus memiliki sebuah controller dan sebuah view. Untuk membuat controller dan view kita bisa memanfaatkan generator yang telah disediakan oleh Rails.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Pada command prompt atau terminal, jalankan perintah berikut ini.</span></div>
<div style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;">
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate controller Welcome index</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Ini artinya yang dilakukan adalah generator Rails membuat sebuah controller dengan nama <b>welcome_controller.rb</b> dan di dalamnya terdapat<b> method index. S</b>edangkan pada view generator otomatis<b> membuat folder baru </b>pada bagian views dengan<b> nama home</b> dan didalamnya terdapat file <b>index.html.erb</b>.</span></div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-svlwR5X3esw/Wqc4Xqto0YI/AAAAAAAAAww/qCFKsgMH-OQUcBAmkGriZiTNcVVU_IEfwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B09-32-42.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="172" data-original-width="546" height="100" src="https://3.bp.blogspot.com/-svlwR5X3esw/Wqc4Xqto0YI/AAAAAAAAAww/qCFKsgMH-OQUcBAmkGriZiTNcVVU_IEfwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B09-32-42.png" width="320" /><span face=""arial" , "helvetica" , sans-serif"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif">Isi welcome_controller.rb</span></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-580uYFu2tPs/Wqc42VcGM7I/AAAAAAAAAw4/EOtKiNtmB9okUIqzxlEN5EslDEBfbyhcgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B09-34-33.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="177" data-original-width="550" height="102" src="https://3.bp.blogspot.com/-580uYFu2tPs/Wqc42VcGM7I/AAAAAAAAAw4/EOtKiNtmB9okUIqzxlEN5EslDEBfbyhcgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B09-34-33.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span face=""arial" , "helvetica" , sans-serif">Isi file index.html.erb di folder app/views/welcome</span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Jika ingin membuat controller dan view secara manual dapat dilakukan dengan cara:</span></div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif">Buat sebuah controller, ia harus berekstensi <b>.rb</b></span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Di dalam controller tersebut setidaknya harus membuat satu buah method </span><span face=""arial" , "helvetica" , sans-serif"><br />
</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Untuk membuat view, <b>buat folder terlebih dahulu</b>, dan namanya disesuaikan dengan nama controller. </span><span face=""arial" , "helvetica" , sans-serif"> </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">Baru di dalam folder tersebut buat halaman viewnya dengan nama disesuaikan dengan method pada controller dan ekstensinya harus <b>.html.erb</b> </span></li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Y7HJxme5xuE/Wqc0_-XcFmI/AAAAAAAAAwc/C_qU6O_SKsAJUhYCT8DLxDd3hK4tQ3bjACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B09-18-21.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="415" data-original-width="240" height="320" src="https://2.bp.blogspot.com/-Y7HJxme5xuE/Wqc0_-XcFmI/AAAAAAAAAwc/C_qU6O_SKsAJUhYCT8DLxDd3hK4tQ3bjACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B09-18-21.png" width="185" /></a></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Say "Hello !" to Rails</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Setelah membuat controller dan view, maka yang dilakukan adalah ubah isi pada file index.html.erb seperti berikut.</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-0RAWgeYMZ3Q/Wqc313pKikI/AAAAAAAAAwo/8LOU6zuxvaMNfh5CzfbggnCOVqiZGtYRACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B09-30-33.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="211" data-original-width="530" height="127" src="https://4.bp.blogspot.com/-0RAWgeYMZ3Q/Wqc313pKikI/AAAAAAAAAwo/8LOU6zuxvaMNfh5CzfbggnCOVqiZGtYRACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B09-30-33.png" width="320" /></a></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"> </span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Daftarkan method di route yang terletak di <b>config/routes.rb</b>, seperti berikut.</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-f4aCukhTumg/Wqc8l_2hR0I/AAAAAAAAAxE/6nYkOKZjvFUzkmVhHbT4eGE9jrRJ5dU0wCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B09-50-46.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="102" data-original-width="468" height="69" src="https://1.bp.blogspot.com/-f4aCukhTumg/Wqc8l_2hR0I/AAAAAAAAAxE/6nYkOKZjvFUzkmVhHbT4eGE9jrRJ5dU0wCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B09-50-46.png" width="320" /></a></div>
<br />
<div style="text-align: justify;">
</div>
<div style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;">
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">get 'welcome/index'</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Script ini berarti kita mendefinisikan url <b>/welcome/index</b> yang jika diakses route akan melempar ke <b>method index</b> pada <b>welcome_controller.rb. </b> </span></span><br />
<br />
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Penting:</span></span><br />
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Jika kita membuat controller dan view melalui generator maka method akan otomotis didaftarkan pada route.<b></b></span></span><br />
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><b><br />
</b></span></span> <span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Jalankan kembali Rails project dengan menjalankan perintah <span style="font-family: "courier new" , "courier" , monospace;"><b>rails s<span style="font-family: "courier new" , "courier" , monospace;">.</span></b><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"> Pada browser </span></span></span></span></span><span face=""arial" , "helvetica" , sans-serif"><br />
<span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif">masukkan url <a href="http://localhost:3000/welcome/index" target="_blank">http://localhost:3000/welcome/index</a> pada web browser.</span></span></span></span><br />
<span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;"><span style="font-family: "courier new" , "courier" , monospace;"><b> </b></span> </span></span></div>
<br />
<span face=""arial" , "helvetica" , sans-serif"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span> Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-28263008327117002082021-03-15T11:57:00.002+07:002021-10-18T13:49:20.489+07:00Seri Belajar Ruby on Rails Bagian 5 - Membuat Aplikasi Rails Pertamamu<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Setelah sebelumnya memulai pembahasan mengenai apa itu Ruby, cara
menginstall Ruby on Rails, pengenalan bahasa Ruby, dan pengenalan Rails
framework, sekarang saatnya untuk memulai menggunakan Rails framework dengan
membuat aplikasi sederhana.</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Aplikasi Manajemen Tugas Sederhana
</span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;"
>Kali ini kita akan mencoba membuat aplikasi manajemen tugas sederhana.
Aplikasi ini berfungsi untuk mencatat tugas-tugas harian, baik tugas
sekolah ataupun tugas kuliah. </span
></span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;"
>Sebelum itu, mari kita pikirkan data apa yang dibutuhkan untuk membuat
aplikasi ini. Karena aplikasi ini berkaitan dengan mencatat tugas harian,
maka data yang dibutuhkan, yaitu:</span
></span
>
</div>
<ol style="text-align: justify;">
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;">Nama Tugas</span></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;">Deskripsi tugas</span></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;"
>Kategori tugas<br />
Kategori ini dimaksudkan untuk menyimpan nama mata kuliah atau nama mata
pelajaran di sekolah.</span
></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span style="font-weight: normal;"
>Deadline (Tanggal dikumpulkan)</span
></span
>
</li>
</ol>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Setelah mengetahui data apa saja yang dibutuhkan, dapat disimpulkan bahwa
setidaknya aplikasi ini terdiri dari satu model, satu controller, dan
beberapa view. Lalu kita buat projectnya, dengan menjalankan perintah
berikut pada terminal atau command prompt.</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
versi mysqlite
<div
style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;"
>
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails new homework_management</span></span></span></span></pre>
</div>
<br />
versi postgresql
<div
style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;"
>
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails new homework_management -d postgresql</span></span></span></span></pre>
</div>
<br> cd homework_management
<div
style="background: none 0% 0% repeat scroll rgb(254, 254, 254); border-radius: 3px; border: 1px solid rgb(211, 211, 211); text-align: justify; width: 100%;"
>
<pre><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails db:create</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Setelah membuat Rails project baru, yang harus dilakukan adalah membuat
controller, model, dan view-view yang dibutuhkan. Untuk membuat beberapa hal
tersebut, Rails menyediakan fitur yang sangat berguna untuk membuatnya
secara otomatis dan simpel.</span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
</div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Scaffold, Fitur Ajaib di Rails</span
>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Scaffold ?. Apa itu scaffold ?. Scaffold merupakan <i>quick-way</i> yang
disediakan oleh Rails untuk membuat controller, model, beserta view-view
yang berkaitan. Dengan scaffold controller, model, dan view-view tersebut
dapat dibuat dengan satu kali operasi.
</span>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate scaffold Homework homework_name:text category:string deadline:date description:text</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Perintah di atas, berarti membuat resource homework dan pada tabelnya
memiliki kolom:</span
>
</div>
<ol style="text-align: justify;">
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>homework_name</b> berupa <b>text</b></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>category</b> berupa <b>string </b>(menyimpan mata kuliah atau mata
pelajaran)<b><br /> </b
></span>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>deadline</b> berupa <b>date</b>, dan</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>description</b> berupa <b>text</b></span
>
</li>
</ol>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Apa yang dihasilkan dari perintah tersebut ?</span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span face='"arial" , "helvetica" , sans-serif'></span>
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://2.bp.blogspot.com/-LCXxUCWQcxQ/WqiC6ytdN7I/AAAAAAAAAy8/8eOoRkynmTUJyMPW_TJe7Q7XSHWVeeufQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B09-03-01.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="733"
data-original-width="921"
height="254"
src="https://2.bp.blogspot.com/-LCXxUCWQcxQ/WqiC6ytdN7I/AAAAAAAAAy8/8eOoRkynmTUJyMPW_TJe7Q7XSHWVeeufQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B09-03-01.png"
width="320"
/></a>
</div>
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Kesimpulannya yang dihasilkan dari scaffold adalah:</span
></span
>
</div>
<ol style="text-align: justify;">
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>File migration
</span></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'>Model</span></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Route<br />
Scaffold akan otomatis mendaftarkan URL yang sudah dibuat menjadi route
resources</span
></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'>Controller</span></span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Dan pada view, yaitu folder <b>homeworks</b> di app/views,
<b>index.html.erb</b>, <b>edit.html.erb</b>, <b>show.html.erb</b>,
<b>new.html.erb</b>, dan <b>_form.html.erb</b> di folder
<b>app/views/homeworks</b></span
></span
>
</li>
</ol>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Setelah itu coba jalankan server, dengan cara mengetikkan perintah
berikut pada terminal atau command prompt.</span
></span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s </span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Coba masukkan URL
<a href="http://localhost:3000/" target="_blank"
>http://localhost:3000/</a
>
dan yang akan muncul adalah tampilan seperti berikut.</span
></span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'><br /> </span
></span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
><a
href="https://1.bp.blogspot.com/-sL0C_0dfrCI/WqeAxStLPvI/AAAAAAAAAxg/s5aKtmqTY7Yxl4PCsDNu8ucy95b_YqHiACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-13%2B14-37-04.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="744"
data-original-width="1319"
height="180"
src="https://1.bp.blogspot.com/-sL0C_0dfrCI/WqeAxStLPvI/AAAAAAAAAxg/s5aKtmqTY7Yxl4PCsDNu8ucy95b_YqHiACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-13%2B14-37-04.png"
width="320" /></a></span
></span>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'><br /> </span
></span>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Tampilan tersebut merupakan tampilan error pada Rails framework. Apa yang
terjadi ?. Yang terjadi adalah kita lupa untuk menjalankan file migrasi
yang dibuat oleh scaffold.</span
></span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'><br /> </span
></span>
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Perlu diingat meskipun kita menggunakan scaffold, tetapi untuk melakukan
migrasi file database, harus dilakukan sendiri dengan cara menjalankan
perintah berikut.</span
></span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rake db:migrate</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">atau</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 662.297px;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;">$ rails db:migrate</span></span></span></span></pre>
</div>
<div style="text-align: justify;"><br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://1.bp.blogspot.com/-2KJMqKH-KHU/WqiDW1u6nRI/AAAAAAAAAzA/XONYY3k2VfYOJ2csMxk0lMxK5rrYygg5wCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B09-04-59.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="174"
data-original-width="921"
height="60"
src="https://1.bp.blogspot.com/-2KJMqKH-KHU/WqiDW1u6nRI/AAAAAAAAAzA/XONYY3k2VfYOJ2csMxk0lMxK5rrYygg5wCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B09-04-59.png"
width="320"
/></a>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br />
</div>
<div style="text-align: justify;"></div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
>Jalankan server kembali dan refresh halaman </span
><span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
><a href="http://localhost:3000/" target="_blank"
>http://localhost:3000/</a
></span
>. </span
></span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLdZeCw7vODHPw_x_9N3Nba6VlOt1bbbwyLGcQngu7AZ-GWNw7y0yNhh5xLkfKSaNC8xzViSyujNGoZMUgrXg5LCKS16SvAdyf4zj62OLxt1aFFqUtMskVXIfwJ8VvG9qrHKeQ7D6jvGC/"
style="margin-left: 1em; margin-right: 1em;"
><img
alt=""
data-original-height="509"
data-original-width="676"
height="240"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLdZeCw7vODHPw_x_9N3Nba6VlOt1bbbwyLGcQngu7AZ-GWNw7y0yNhh5xLkfKSaNC8xzViSyujNGoZMUgrXg5LCKS16SvAdyf4zj62OLxt1aFFqUtMskVXIfwJ8VvG9qrHKeQ7D6jvGC/"
width="319"
/></a>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
<span face='"arial" , "helvetica" , sans-serif'
>Aplikasi sudah berjalan, namun bagaimana untuk melihat hasil dari scaffold
yang dibuat ?. Karena kita tadi membuat scaffold Homework, maka coba buka
url
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
><a href="http://localhost:3000/homeworks" target="_blank"
>http://localhost:3000/homeworks/</a
></span
>, maka yang akan muncul pada browser adalah sebagai berikut.</span
></span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'> </span></span
>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://4.bp.blogspot.com/-adQapV2WNBE/WqiD1R8A8xI/AAAAAAAAAzE/AAb6Vls3dD4dwgyp9iHOJVEg0AFqaEdLACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B09-07-02.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="457"
data-original-width="538"
height="271"
src="https://4.bp.blogspot.com/-adQapV2WNBE/WqiD1R8A8xI/AAAAAAAAAzE/AAb6Vls3dD4dwgyp9iHOJVEg0AFqaEdLACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B09-07-02.png"
width="320"
/></a>
</div>
<div class="separator" style="clear: both; text-align: center;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'> </span>
<span face='"arial" , "helvetica" , sans-serif'
>Jika tampilan di atas muncul, itu artinya aplikasi manajemen tugas
sederhana sudah dibuat.</span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Hanya dengan menggunakan scaffold bagian-bagian terpenting yang saling
berhubungan dapat dibuat. Tetapi bagaimana penjelasannya ?. Bagaimana jika
membuatnya secara manual ?. Berikut penjelasannya.</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><b>Model</b></span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Saat men-<i>generate</i> scaffold Homework, otomatis akan membuat model
pada <b>app/models/homework.rb. </b>Pada model ini nantinya dapat digunakan
untuk melakukan validasi data yang akan masuk, dsb.</span
>
<span face='"arial" , "helvetica" , sans-serif'
>Untuk membuat model secara manual dapat dilakukan dengan cara</span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate model Homework</span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Perintah tersebut otomatis membuat model dengan nama <b>homework.rb</b> di
<b>app/models </b>beserta file migrasi tablenya.</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><b>Controller</b></span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Saat men-<i>generate</i> scaffold Homework, otomatis akan membuat
controller pada <b>app/controllers/homeworks_controller.rb. </b>Selain itu,
saat menjalankan scaffold maka pada cotroller otomatis akan membuat
method-method berikut:</span
>
</div>
<ol style="text-align: justify;">
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>index</b>: menampilkan seluruh data pada tabel</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>show</b>: menampilkan data sesuai dengan parameter</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>new</b>: menampilkan halaman tambah data</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>edit</b>: menampilkan halaman edit data</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>create</b>: proses menyimpan data</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>update</b>: proses mengubah data</span
>
</li>
<li>
<span face='"arial" , "helvetica" , sans-serif'
><b>destroy</b>: proses menghapus data</span
>
</li>
</ol>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><b> </b></span>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Untuk membuat controller secara manual dapat dilakukan dengan cara</span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate controller Homework</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Perintah tersebut otomatis membuat controller dengan nama
<b>homework_controller.rb</b> di <b>app/controller. </b>Jika ingin membuat
controller dan membuat view, dapat dilakukan dengan cara
</span>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate controller Homework <b>index</b></span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>kata "<b>index</b>" pada perintah tersebut berarti membuat view pada
app/views/homework/index.html.erb</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><b>Migration</b></span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Dari awal pembahasan kita sudah sering menyebutkan file migrasi tabel. Apa
itu migrasi atau migration table di Ruby ?. Migration adalah fitur di Ruby
yang dibuat untuk membuat atau mengubah tabel di database secara mudah.
Migration ini merupakan salah satu yang akan dihasilkan ketika melakukan
scaffolding.</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Untuk dapat membuat file migrasi, lakukan perintah berikut.</span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration CreateHomeworks</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>File migrasi yang sudah dibuat akan disimpan pada folder db/migrate</span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Untuk dapat melakukan migrasi, lakukan perintah berikut.</span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rake db:migrate</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">atau</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 662.297px;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;">$ rails db:migrate</span></span></span></span></pre>
</div>
<div style="text-align: justify;"><br /></div>
<h3 style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><b>Route</b></span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Route pada Rails diibaratkan seperti jembatan yang berfungsi untuk menerima
request dari browser dan meneruskannya ke controller atau men-<i
>generate </i
>URL beserta action jika URL tersebut diakses.</span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
<span face='"arial" , "helvetica" , sans-serif'
>Route di Rails application terdapat pada config/routes.rb. Ketika
menggunakan scaffold, maka scaffold akan otomatis mendaftarkan resource yang
dibuat di routes.rb. </span
>
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'><br /> </span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://4.bp.blogspot.com/-EvDOxnSvB1Q/WqiE08Ko3uI/AAAAAAAAAzU/qLFipPejiYg5b4IFaSlMAnKZFUAPxC5gwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B09-11-17.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="122"
data-original-width="465"
height="83"
src="https://4.bp.blogspot.com/-EvDOxnSvB1Q/WqiE08Ko3uI/AAAAAAAAAzU/qLFipPejiYg5b4IFaSlMAnKZFUAPxC5gwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B09-11-17.png"
width="320"
/></a>
</div>
<br />
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
><b>resource :homeworks </b>artinya mengikat semua method yang ada pada
controller homework menjadi satu bagian, dan URL yang terbentuk dari
resource ini akan sesuai dengan nama methodnya. </span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Contoh pada <b>resources :homeworks </b>terdapat method <b>new</b>, maka
URL yang dihasilkan menjadi <b>/homeworks/new</b></span
>
</div>
<div style="text-align: justify;">
<br />
</div>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Lalu dari hasil melakukan scaffolding URL apa yang dihasilkan ?. Untuk
mengetahui route apa saja yang terdaftar, dapat dilakukan dengan cara</span
>
</div>
<div style="text-align: justify;">
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails routes</span></span></span></span></span></pre>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://4.bp.blogspot.com/-IbWUaNLmL2Y/WqiG_BiyBsI/AAAAAAAAAzg/zLYhlcVJSysytG27jsq7NeqeNpAnvF92ACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B09-20-30.png"
style="margin-left: 1em; margin-right: 1em;"
><img
border="0"
data-original-height="228"
data-original-width="678"
height="107"
src="https://4.bp.blogspot.com/-IbWUaNLmL2Y/WqiG_BiyBsI/AAAAAAAAAzg/zLYhlcVJSysytG27jsq7NeqeNpAnvF92ACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B09-20-30.png"
width="320"
/></a>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;"></div>
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
tr:nth-child(even) {background-color: #f2f2f2;}
th {
background : #777; color:#f2f2f2
}</style
><br />
<table class="responsive">
<thead>
<tr>
<th><span face='"arial" , "helvetica" , sans-serif'>HTTP Verb</span></th>
<th><span face='"arial" , "helvetica" , sans-serif'>Path</span></th>
<th>
<span face='"arial" , "helvetica" , sans-serif'>Controller#Action</span>
</th>
<th><span face='"arial" , "helvetica" , sans-serif'>Fungsi</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>GET</span></td>
<td><span face='"arial" , "helvetica" , sans-serif'>/homeworks</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#index</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>menampilkan seluruh tugas</span
>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>GET</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>/homeworks/new</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#new</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>menampilkan halaman untuk menambahkan data tugas harian</span
>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>POST</span></td>
<td><span face='"arial" , "helvetica" , sans-serif'>/homeworks</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#create</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>berisi proses penambahan data
</span>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>GET</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>/homeworks/:id</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#show</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>menampilkan data tugas yang lebih spesifik</span
>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>GET</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>/homeworks/:id/edit</span
>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#edit</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>menampilkan halaman yang berisi form untuk merubah data tugas</span
>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>PATCH/PUT</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>/homeworks/:id</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#update</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>berisi proses merubah data tugas</span
>
</td>
</tr>
<tr>
<td><span face='"arial" , "helvetica" , sans-serif'>DELETE</span></td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>/homeworks/:id</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'>homework#destroy</span>
</td>
<td>
<span face='"arial" , "helvetica" , sans-serif'
>berisi proses untuk menghapus data</span
>
</td>
</tr>
</tbody>
</table>
<br />
<h3></h3>
<h3>
<span face='"arial" , "helvetica" , sans-serif'>Merubah Root Action </span>
</h3>
<div style="text-align: justify;">
<span face='"arial" , "helvetica" , sans-serif'
>Untuk merubah root action ke sebuah method tertentu, misalnya root action
akan diubah ke method <b>index</b> pada controller
<b>homework_controller.rb, </b>dapat dilakukan dengan cara menambahkan
script berikut pada <b>routes.rb</b></span
>
</div>
<pre
style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"
><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">root "homeworks#index"</span></span></pre>
<br />
<div style="text-align: center;">
<i><span face='"arial" , "helvetica" , sans-serif'>Happy Coding !!</span></i>
</div>
<div style="text-align: center;">
<i
><span face='"arial" , "helvetica" , sans-serif'
>Penting untuk diingat Rails memang menyediakan fitur scaffold untuk
memudahkan para pengembang, namun jangan sampai penggunaan scaffold tanpa
diimbangi pemahaman untuk membuat controller, model, migrasi, route, dan
view secara manual.</span
></i
><br />
<br />
<div style="text-align: left;">
<span face='"arial" , "helvetica" , sans-serif'
><span face='"arial" , "helvetica" , sans-serif'
><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> |
C-aio Indonesia</span
></span
><i><span face='"arial" , "helvetica" , sans-serif'> </span></i>
</div>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-24670211060713108752021-03-15T06:49:00.000+07:002021-03-15T16:24:58.613+07:00Seri Belajar Ruby on Rails Bagian 6 - Membuat Table & Dummy Data<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Setelah belajar membuat aplikasi tugas sederhana melalui scaffold, selanjutnya pada pembahasan kali ini adalah table dan dummy data. Untuk pembahasan kali ini gunakan project sebelumnya, karena kita akan melanjutkan aplikasi tersebut menjadi aplikasi yang lebih terpadu.</span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"></span></span><br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">A. Definisi Table di Database</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Kata <b>database</b> dan <b>table</b> sudah sering kita dengar. Database secara singkat dianalogikan seperti lemari arsip yang berfungsi untuk menyimpan data. Lalu table adalah arsip, dimana dalam arsip tersebut terdapat data-data tertentu. </span></span><br />
<br />
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"> </span></span> </div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">B. Membuat Table di Rails Framework</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Rails menyediakan fitur untuk melakukan pembuatan table, penambahan kolom pada table, dsb dengan menggunakan <b>migration. </b>Migration di Rails disimpan dalam folder <b>db/migrate</b>. Untuk membuat file migrasi telah dijelaskan di <a href="http://www.belajarrubyonrails.com/2018/03/seri-belajar-ruby-on-rails-bagian-5.html" target="_blank">Seri Belajar Ruby on Rails Bagian 5 - Membuat Aplikasi Rails Pertamamu</a> dengan cara</span></span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration CreateCategories</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Yang akan dihasilkan oleh generator adalah file migration di folder <b>db/migrate</b> dengan nama <b>create_categories.rb</b>. Isi dari file tersebut adalah seperti berikut.</span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">CreateHomeworks</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ActiveRecord::Migration</span>[<span style="color: #ae81ff;">5.1</span>]</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> create_table <span style="color: #ae81ff;">:homeworks</span> <span style="color: #f92672;">do</span> |t|</div><div> t.<span style="color: #a6e22e;">text</span> <span style="color: #ae81ff;">:homework_name</span></div><div> t.<span style="color: #a6e22e;">string</span> <span style="color: #ae81ff;">:category</span></div><div> t.<span style="color: #a6e22e;">date</span> <span style="color: #ae81ff;">:deadline</span></div><div> t.<span style="color: #a6e22e;">text</span> <span style="color: #ae81ff;">:description</span></div><br /><div> t.<span style="color: #a6e22e;">timestamps</span></div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Penjelasan:</span></div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif">Ketika membuat migration dengan nama <b>CreateCategories</b>, pada file migrasi akan dibuat menjadi class dengan nama CreateCategories.</span></li>
<span face=""arial" , "helvetica" , sans-serif"> </span>
<li><span face=""arial" , "helvetica" , sans-serif">Pada bagian ActiveRecord, ini dimaksudkan bahwa migration termasuk dalam bagian ActiveRecord Rails.</span></li>
<li><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">def change
end</span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Method ini harus ada sebelum menulis script untuk membuat table. <br />
</span><span face=""arial" , "helvetica" , sans-serif">Selain method change terdapat method lain, yaitu method <b>up</b> dan <b>down</b>. Sehingga struktur file migrasi menjadi seperti berikut. Method <b>up</b> dan <b>down</b> digunakan ketika akan <b>melakukan perubahan pada tabel</b>.<br />
</span><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">CreateCategories</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ActiveRecord::Migration</span>[<span style="color: #ae81ff;">5.1</span>]</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">up</span></div><div> change_table <span style="color: #ae81ff;">:categories</span> <span style="color: #f92672;">do</span> |t|</div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">down</span></div><div> change_table <span style="color: #ae81ff;">:categories</span> <span style="color: #f92672;">do</span> |t|</div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div>
<br />
</li>
<li><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">create_table :categories do |t|</span></span></span></span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">Bagian ini artinya yang akan dilakukan adalah membuat table dengan nama <b>categories </b>sesuai dengan apa yang ditulis, yaitu <b>:categories </b>pada file migrasi. Jangan lupa akhiri dengan end.</span><br />
</li>
</ol>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">File migrasi kategori untuk aplikasi manajemen tugas sederhana telah selesai dibuat. Selanjutnya kita tambahkan script untuk menulis kolom-kolom yang dibutuhkan pada tabel categories beserta tipe datanya.</span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">CreateCategories</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ActiveRecord::Migration</span>[<span style="color: #ae81ff;">5.1</span>]</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> create_table <span style="color: #ae81ff;">:categories</span> <span style="color: #f92672;">do</span> |t|</div><div> t.<span style="color: #a6e22e;">string</span> <span style="color: #ae81ff;">:name</span> <span style="color: #88846f;">#membuat kolom name dengan tipe string</span></div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br />
<span face=""arial" , "helvetica" , sans-serif">Selain dengan cara tersebut, untuk menambahkan kolom pada tabel categories juga dapat dilakukan dengan cara menuliskan script berikut ketika proses membuat file migrasi. Contohnya seperti berikut.</span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration CreateCategories name:string</span></span></pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-H_p2_ceZvuc/Wqiode-QSfI/AAAAAAAAAzw/M7eDJiT0lbMZNBH8_Z_o9zqPsvz05BFFgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B11-43-19.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="476" height="118" src="https://1.bp.blogspot.com/-H_p2_ceZvuc/Wqiode-QSfI/AAAAAAAAAzw/M7eDJiT0lbMZNBH8_Z_o9zqPsvz05BFFgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B11-43-19.png" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><i><span face=""arial" , "helvetica" , sans-serif">Tips:</span></i></b><br />
<i><span face=""arial" , "helvetica" , sans-serif">Ketika melakukan pembuatan tabel, usahakan tambahkan juga kolom yang nantinya akan menjadi index pada tabel. Index ini nantinya berfungsi jika melakukan pencarian data pada tabel tersebut dapat dilakukan menjadi lebih cepat dan efisien.</span></i><br />
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">C. Migrasi di Rails yang Perlu Diketahui</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Migrasi di Rails tidak hanya untuk membuat table saja, namun juga dapat mengubah, menambahkan, atau bahkan menghapus kolom. </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Jika pembuatan migrasi dilakukan dengan menggunakan generator, <b>penamaan file migrasi</b> juga <b>dapat menjadi jalan cepat</b> untuk mendefinisikan apa yang akan dilakukan oleh file migrasi tersebut. </span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Contohnya seperti berikut.</span></div>
<ol style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><b>Membuat table</b><br />
Kata kunci untuk nama file<b> </b>adalah<b> Create</b>XXX.<b><br />
</b></span><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration CreateCategories</span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">maka akan menghasilkan</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-d7ukHBPNWvc/Wqi7CHPA81I/AAAAAAAAA0A/fa8ljw85swkmfygiJLfNJ1eVPua6LpWnwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B13-02-35.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="152" data-original-width="478" height="101" src="https://3.bp.blogspot.com/-d7ukHBPNWvc/Wqi7CHPA81I/AAAAAAAAA0A/fa8ljw85swkmfygiJLfNJ1eVPua6LpWnwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B13-02-35.png" width="320" /></a></div>
<br />
</li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Menambahkan kolom ke tabel</b></span><br />
<span face=""arial" , "helvetica" , sans-serif">Kata kunci untuk nama file<b> </b>adalah<b> Add</b>XXX<b>To</b>XXX.</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration AddDescriptionToCategories</span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">maka akan menghasilkan</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-3yl30fycuVk/Wqi7xaAwD1I/AAAAAAAAA0I/sf2yPcOAGGU3pmD8QXOTjo0mfwS4kaMNACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B13-05-44.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="134" data-original-width="576" height="74" src="https://1.bp.blogspot.com/-3yl30fycuVk/Wqi7xaAwD1I/AAAAAAAAA0I/sf2yPcOAGGU3pmD8QXOTjo0mfwS4kaMNACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B13-05-44.png" width="320" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration AddDescriptionToCategories description:text</span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">maka akan menghasilkan</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-gHYropeekFY/Wqi8S-hrIhI/AAAAAAAAA0U/MobpaVa4vDw0BPC4eDVXXKXwqD_xvwlFwCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B13-07-53.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="153" data-original-width="573" height="85" src="https://4.bp.blogspot.com/-gHYropeekFY/Wqi8S-hrIhI/AAAAAAAAA0U/MobpaVa4vDw0BPC4eDVXXKXwqD_xvwlFwCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B13-07-53.png" width="320" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
</li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Menghapus kolom pada tabel </b></span><br />
<span face=""arial" , "helvetica" , sans-serif">Kata kunci untuk nama file<b> </b>adalah<b> Remove</b>XXX<b>From</b>XXX.</span><br />
<span face=""arial" , "helvetica" , sans-serif"> </span><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration RemoveDescriptionFromCategories</span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">maka akan menghasilkan</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-Nos-P0k5W84/Wqi-25hB_tI/AAAAAAAAA0k/H-_mGVmXaWkXiRcGwl7e70b4h_ADtc6EgCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B13-18-47.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="133" data-original-width="614" height="69" src="https://3.bp.blogspot.com/-Nos-P0k5W84/Wqi-25hB_tI/AAAAAAAAA0k/H-_mGVmXaWkXiRcGwl7e70b4h_ADtc6EgCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B13-18-47.png" width="320" /></a></div>
<br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails generate migration RemoveDescriptionFromCategories description:text</span></span></pre>
<span face=""arial" , "helvetica" , sans-serif">maka akan menghasilkan</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-qDC7FibuguE/Wqi-fnEYb-I/AAAAAAAAA0g/KgP1UopZlcAcpOBkNpee-nVm0KamKC5qQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B13-17-07.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="130" data-original-width="614" height="67" src="https://3.bp.blogspot.com/-qDC7FibuguE/Wqi-fnEYb-I/AAAAAAAAA0g/KgP1UopZlcAcpOBkNpee-nVm0KamKC5qQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B13-17-07.png" width="320" /></a></div>
<h3 class="separator" style="clear: both;">
<br />
</h3>
</li>
</ol>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">D. Tipe Data di Rails Migration</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><span style="font-weight: normal;">Saat membuat file migrasi di Rails, yang harus diperhatikan adalah tipe data yang digunakan. <b>Apakah itu string, text, atau integer, dsb</b>. Berikut ini adalah tipe data yang diperbolehkan pada migrasi Rails.</span></span></span></div>
<ul style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:string, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:text,</span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:integer, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:float, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:decimal, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:datetime, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:timestamp, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:time, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:date,</span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:binary, </span></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">:boolean.</span></span></li>
</ul>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Contohnya seperti gambar berikut ini yang ditunjukkan dari file migrasi homework di <span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="http://www.belajarrubyonrails.com/2018/03/seri-belajar-ruby-on-rails-bagian-5.html" target="_blank">Seri Belajar Ruby on Rails Bagian 5 - Membuat Aplikasi Rails Pertamamu</a></span></span></span>.</div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">CreateHomeworks</span><span style="color: #a6e22e; font-style: italic; text-decoration-line: underline;"> < ActiveRecord::Migration</span>[<span style="color: #ae81ff;">5.1</span>]</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> create_table <span style="color: #ae81ff;">:homeworks</span> <span style="color: #f92672;">do</span> |t|</div><div> t.<span style="color: #a6e22e;">text</span> <span style="color: #ae81ff;">:homework_name</span></div><div> t.<span style="color: #a6e22e;">string</span> <span style="color: #ae81ff;">:category</span></div><div> t.<span style="color: #a6e22e;">date</span> <span style="color: #ae81ff;">:deadline</span></div><div> t.<span style="color: #a6e22e;">text</span> <span style="color: #ae81ff;">:description</span></div><br /><div> t.<span style="color: #a6e22e;">timestamps</span></div><div> <span style="color: #f92672;">end</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">E. Change Method</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Change method merupakan cara utama untuk menulis migrasi di Rails. Namun change method ini hanya bisa dilakukan pada definisi migrasi berikut.</span></div>
<ul style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif">add_column</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">add_foreign_key</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">add_index</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">add_reference</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">add_timestamps</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">change_column_default </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">change_column_null</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">create_join_table</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">create_table</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">disable_extension</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">drop_join_table</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">drop_table </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">enable_extension</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">remove_column </span></li>
<li><span face=""arial" , "helvetica" , sans-serif">remove_foreign_key</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">remove_index</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">remove_reference</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">remove_timestamps</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">rename_column</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">rename_index</span></li>
<li><span face=""arial" , "helvetica" , sans-serif">rename_table</span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Berikut merupakan beberapa contoh definisi migrasi di atas.</span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #88846f;">#add_column</span></div><div><span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> add_column <span style="color: #ae81ff;">:categories</span>, <span style="color: #ae81ff;">:description</span>, <span style="color: #ae81ff;">:text</span> </div><div> <span style="color: #88846f;"># menambahkan kolom description pada tabel categories</span></div><div><span style="color: #f92672;">end</span></div></div>
<br /></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #88846f;">#add_index</span></div><div><span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> add_index <span style="color: #ae81ff;">:categories</span>, <span style="color: #ae81ff;">:name</span></div><div> <span style="color: #88846f;">#menambahkan index pada tabel categories, yaitu pada kolom name</span></div><div><span style="color: #f92672;">end</span></div></div>
<br /></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #88846f;">#remove_column</span></div><div><span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> remove_column <span style="color: #ae81ff;">:categories</span>, <span style="color: #ae81ff;">:description</span>, <span style="color: #ae81ff;">:text</span> </div><div> <span style="color: #88846f;"># menghapus kolom description pada tabel categories</span></div><div><span style="color: #f92672;">end</span></div></div>
<br /></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #88846f;">#rename_column</span></div><div><span style="color: #f92672;">def</span> <span style="color: #a6e22e;">change</span></div><div> rename_column <span style="color: #ae81ff;">:categories</span>, <span style="color: #ae81ff;">:description</span>, <span style="color: #ae81ff;">:desc</span></div><div> <span style="color: #88846f;">#mengganti nama kolom description pada tabel categories menjadi desc</span></div><div><span style="color: #f92672;">end</span></div></div>
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">F. Modifiers di Rails Migration</span><span face=""arial" , "helvetica" , sans-serif"> </span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Ketika melakukan perubahan kolom atau penambahan kolom, terkadang kolom tersebut membutuhkan modifier. Modifier ini berguna untuk mengatur apakah kolom tersebut boleh kosong atau tidak, apakah kolom tersebut sebagai index, apakah kolom tersebut dibatasi maksimum karakternya, dsb. Pada intinya <b>modifier</b> diibaratkan sebagai <b>ketentuan yang bersifat opsional pada sebuah kolom</b></span><b>.</b></div>
<ul style="text-align: justify;">
<li><span face=""arial" , "helvetica" , sans-serif"><b>limit</b>: Menentukan maksimum size dari kolom string/text/binary/integer.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>precision</b>: Mendefinisikan presisi dari kolom desimal</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>scale</b>: </span><span face=""arial" , "helvetica" , sans-serif">menunjukkan berapa digit yang muncul setelah tanda (,)</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>polymorphic</b>: Menambahkan sebuah kolom untuk hubungan <b>belongs_to</b> (ada kaitannya dengan join)</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>null</b>: Mengizinkan atau tidak mengizinkan suatu kolom bernilai NULL</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>default</b>:Mengizinkan untuk memberikan nilai default pada sebuah kolom ketika kolom tersebut tidak diisi.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>index</b>:Menambahkan index pada suatu kolom.</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>comment</b>: Menambahkan komentar untuk sebuah kolom.</span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Setelah mengetahui beberapa hal tentang migrasi, selanjutnya yang akan dibahas adalah mengenai dummy data di Rails.</span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">G. Apa itu Dummy Data ?</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Dummy data diibaratkan seperti data <i>fake </i>atau data palsu yang dibuat untuk tujuan melakukan testing data. Lalu, bagaimana melakukannya di Rails project ?. </span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Tujuan utama adanya Rails migration, selain untuk alter kolom dan table, migration di Rails juga berfungsi untuk menambah atau mengubah data. Untuk menambahkan data pada Rails, Rails menyediakan '<b><i>seeds</i></b>' built-in yang membuat proses penambahan atau pengubahan data <i>fake</i> menjadi lebih cepat.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Untuk melakukan seeding di Rails, dapat dilakukan di <b>seeds.rb</b> yang berada di folder <b>db/seeds.rb. </b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Setelah itu untuk memproses seed yang sudah ditulis, lakukan dengan cara</span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rake db:seed</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
Untuk melihat apakah proses seeding berhasil, dapat dilakukan dengan mengunakan <b>rails console.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Rails console</b> ini adalah tools seperti <b>irb </b>(interactive ruby), namun bedanya ini tidak mengeksekusi script ruby saja, bahkan script Rails pun dapat dieksekusi. Caranya dengan menjalankan perintah berikut pada terminal. </div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails c</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span> <span face=""arial" , "helvetica" , sans-serif">Lalu jalankan </span></div>
<div style="text-align: justify;">
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span face=""arial" , "helvetica" , sans-serif" style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">$ category = Category.all</span></span></span></span></span></pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-jhhm-73vztI/WqjwJx7nWgI/AAAAAAAAA04/uYIK0MbbKRIwBQvs-xsoAddBuiQh0iNaQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-14%2B16-44-02.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="228" data-original-width="876" height="83" src="https://4.bp.blogspot.com/-jhhm-73vztI/WqjwJx7nWgI/AAAAAAAAA04/uYIK0MbbKRIwBQvs-xsoAddBuiQh0iNaQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-14%2B16-44-02.png" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">H. <i>Seed</i> dan Data Master </span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Selain terdapat data dummy, dalam suatu database pasti terdapat data master. Apa itu data master ?. Data master diibaratkan seperti data induk dari data pada table lain. </span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Contohnya, pada jika terdapat tabel <b>city(kota)</b>, tabel tersebut bisa menjadi data master, karena penambahan datanya hanya dilakukan sekali. Jika dilakukan proses penambahan lagi pun bisa dilakukan manual. </span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Mengapa seperti itu ?. Karena jika dipikirkan kota di Indonesia misalnya, pasti <b>tidak akan bertambah tiap tahun</b> bukan ?. Inilah sebabanya mengapa tabel city bisa menjadi data master.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk melakukan penambahan data master ini, banyak pengembang yang menggunakan fitur <i><b>seed</b> </i>dari Rails, karena berpikir <b><i>seed</i></b> memang bertujuan untuk menambah atau mengubah data. </span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br />
</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Namun, ini merupakan hal yang <b>tidak boleh</b> dilakukan, karena pada dasarnya <b><i>seed</i> itu fitur pada Rails yang berguna untuk membuat data <i>fake</i></b>. <b>Data master bukanlah data <i>fake</i></b>, jadi hindari membuat data master dengan <i>seeding.</i></span></div>
<div style="text-align: justify;">
<br />
<span face=""arial" , "helvetica" , sans-serif">Kesimpulannya, Rails sangat memudahkan para penggunanya dalam banyak hal, seperti pada cara pembuatan tabel, alter table, ataupun penambahan dan pengubahan data untuk melakukan testing pada table. Namun untuk penggunaan <b>seed,</b> tetap perlu mengingat konsep dari <b><i>seed </i></b>itu sendiri.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></span></div>
</div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-25122048741514680952021-03-11T14:38:00.000+07:002021-03-15T15:20:08.349+07:00Seri Belajar Ruby on Rails Bagian 1 - Apa itu Ruby on Rails<div style="text-align: justify;">
<span style="background-color: white;">Anda mungkin sudah mendengar tentang </span><a href="http://rubyonrails.org/" target="_blank">Ruby on Rails</a> <span style="background-color: white;">yang saat ini banyak diperbincangkan</span></div>
<div style="text-align: justify;">
developer di luar dan di dalam Negeri karena memiliki beberapa fitur yang menarik untuk membuat website. Banyak startup dan perusahaan besar yang menggunakan Ruby on Rails ( RoR ) untuk membuat website internal maupun membangun product services mereka.<br />
<br /></div>
<div style="text-align: justify;">
Berikut ini kami rangkum beberapa hal menarik mengenai Ruby on Rails yang mungkin bisa membantu kamu mengenal RoR:<br />
<br />
<h2 style="text-align: start;">
Ruby adalah bahasa pemrograman </h2>
<div style="text-align: justify;">
<a href="http://www.ruby-lang.org/id/" target="_blank">Ruby</a> adalah bahasa pemrograman berorientasi object yang dibuat oleh Yukihiro Matsumoto (Matz) pada tahun 2000. Ruby dapat digunakan di berbagai sistem operasi Linux, MacOs, dan Windows, dikembangkan secara open source. Setiap orang boleh menggunakan Ruby secara <b>gratis</b>, dan juga bebas untuk menduplikat, mendistribusikan bahkan melakukan perubahan.</div>
<div style="text-align: start;">
<br /></div><h2 style="text-align: left;"><b>Kenapa memilih bahasa pemrograman ruby?</b></h2><div style="text-align: start;"><br /></div><div style="text-align: start;">banyak developer yang memilih ruby dengan alasan syntaxnya yang cantik dan simple. Karena ketika kita sudah membangun sebuah system dengan ribuan baris coding tentu saat itu kita akan lebih banyak membaca ketimbang ngetik dan tentu rapi + cantiknya syntax akan sangat berguna pada saat itu.</div><div style="text-align: start;"><br /></div>
<div style="text-align: start;">
Ruby memiliki karakteristik unik s<span style="background-color: white;">ecara teknis, berikut ini kutipan dari Matz:</span></div>
<div style="text-align: start;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: start;">
<span style="background-color: white;">"Everything you manipulate is an object, and the results of those manipulations are themselves objects"</span></div>
<div style="text-align: start;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
Jadi, ketika Kamu mendefinisikan sebuah variabel, maka variabel tersebut akan menjadi object <span style="background-color: white;">dengan tipe sesuai nilai yang kamu berikan, misalnya:</span></div>
<div style="text-align: start;">
<br /></div><div style="text-align: start;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div> </div><div> variable_1 <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">1</span></div><div> variable_2 <span style="color: #f92672;">=</span> <span style="color: #e6db74;">"ini string"</span></div><div><span style="color: #e6db74;"><br /></span></div></div></div>
<div style="text-align: start;">
<br /></div>
<div style="text-align: start;">
Maka:</div>
<div style="text-align: start;">
<br /></div>
<div style="text-align: start;">
<b>variable_1</b> akan menjadi object dari class <b>Fixnum</b></div>
<div style="text-align: start;">
<b>variable_2</b> akan menjadi object dari class <b>String</b><br />
<br />
Berikut ini adalah beberapa contoh dari code Ruby:</div>
<br />
<div style="text-align: start;">
<b>Membuat object dari class Car</b></div><div class="code-box" style="text-align: start;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div> my_car <span style="color: #f92672;">=</span> <span style="color: #66d9ef; font-style: italic;">Car</span>.<span style="color: #f92672;">new</span></div></div></div>
<div style="text-align: start;">
<b><br /></b><b>Menampilkan 5x "Hello Indonesia"</b></div><div style="text-align: start;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"> <span style="color: #ae81ff;">5</span>.<span style="color: #a6e22e;">times</span> <span style="color: #f92672;">do</span> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Hello Indonesia"</span> <span style="color: #f92672;">end</span></div></div>
<div class="code-box" style="text-align: start;"><br /></div>
<div style="text-align: start;">
Anda bisa mencari lebih dalam tentang Ruby disini:</div>
<div style="text-align: start;">
<a href="http://www.ruby-lang.org/id" target="_blank">http://www.ruby-lang.org/id</a></div>
<div style="text-align: start;">
<br /></div>
<h2 style="text-align: start;">
Rails adalah Web Framework</h2>
<div style="text-align: justify;">
Rails merupakan web framework yang dibuat dengan bahasa pemrograman Ruby, dikembangkan pertama kali oleh <span style="background-color: white;">David Heinemeier Hansson pada tahun 2003. Rails juga open source tapi dengan lisensi <b>MIT.</b></span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="background-color: white;">Rails menggunakan konsep MVC, singkatan dari Model View Controller, sehingga memudahkan programmer dalam melakukan manajemen codes. Silakan baca mengenai MVC arsitektur di</span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank">Penjelasan MVC menurut Wikipedia</a>.</span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="text-align: justify;">
<b>Kemudian, kenapa sih banyak programmer yang menggunakan Ruby on rails sekarang ini ?</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Berikut ini adalah alasan - alasan utamanya menurut kami:</div>
<div style="text-align: justify;">
</div>
<ol style="text-align: start;">
<li style="text-align: justify;">Dirancang untuk memudahkan programmer melakukan konfigurasi karena Ruby on Rails menggunakan prinsip "Convention Over Configuration". Dengan prinsip ini programmer tidak usah terlalu repot untuk melakukan seting aplikasi seperti koneksi ke database, karena sudah ada mekanisme yang disediakan dan cukup mudah karena tinggal mengisi nama tipe server database yang digunakan ( mysql / oracle / sql server / postgresql / etc ), mengatur nama database, username, password dan host .</li>
<li style="text-align: justify;">Menggunakan prinsip "DRY ( Do not Repet Yourself )", yang intinya adalah efisiensi dalam manajemen codes.</li>
<li style="text-align: justify;">Mempunyai komunitas yang besar, dengan 4855++ kontributor resmi dan ratusan ribu gems / plugin yang dibuat. Gem / Plugin bisa dikatakan sebagai "external library" yang bisa dimasukan ke aplikasi. Dengan besarnya komunitas ini, maka programmer memiliki banyak pilihan solusi ketika menghadapai permasalah. Kemudian, dengan banyaknya gems / plugins tersebut, programmer dapat lebih menghemat waktu development lagi karena tidak usah selalu membuat aplikasi dari awal, tapi bisa memanfaatkan gems / plugins tersebut sesuai keperluan.</li>
<li style="text-align: justify;">Sudah terintegrasi dengan ORM library yang beranama ActiveRecord, sehingga untuk melakukan query ke database lebih mudah. Misalnya kita punya table <b>users </b>dan model User<b>, </b>maka untuk menampilkan semua data dari table users cukup dengan <b><span style="background-color: white;">User.all</span></b></li>
<li style="text-align: justify;">Memiliki Sintax yang simple tapi elegan, misalnya:<br /><b>Menampilkan waktu satu tahun lalu:</b><div class="code-box">
1.year.ago</div>
<b>Menampilkan waktu 2 hari dari sekarang:</b><div class="code-box">
2.days.from_now</div>
</li>
</ol>
<div style="text-align: start;">
Sekian untuk pengenalan Seri belajar Ruby on Rails bagian 1, next kita akan bahas mengenai</div>
<div style="text-align: start;">
<a href="http://www.belajarrubyonrails.com/2018/03/belajar-ruby-bag-2-cara-install-ruby-di-windows.html">Seri belajar Ruby on Rails bagian 2 tentang installasi Ruby on Rails</a>.</div>
<div style="text-align: start;">
<br /></div>
<div style="text-align: start;">
Happy Codding !</div>
<br />
<div>
<br /></div>
</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-70443077654291568482021-03-11T06:10:00.000+07:002021-03-15T15:19:19.299+07:00Seri Belajar Ruby on Rails Bagian 3 - Pengenalan Bahasa Ruby<div style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=810712507486016259" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span face=""arial" , "helvetica" , sans-serif"></span><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Pada tutorial kali ini, materi yang akan dibahas adalah mengenai pengenalan bahasa ruby. Sebelum melanjutkan ke materi, mari kita ingat kembali mengenai apa itu ruby ?.</span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">A. Sekilas Ruby</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Ruby adalah bahasa pemrograman berorientasi object murni yang
dikembangkan oleh Yukihiro Matsumoto (Matz) pada tahun 1993. Ruby
merupakan bahasa interpreted, yang berarti untuk menjalankan ruby tidak
perlu dicompile, tetapi cukup dijalankan dalam interpreternya. Ruby juga
merupakan bahasa dinamis. Kita tidak perlu melakukan deklarasi
variable, tetapi cukup melakukan assignment secara langsung.</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Di Ruby semuanya merupakan objek, yang artinya </span><span face=""arial" , "helvetica" , sans-serif">setiap informasi dan kode bisa diberi
property dan action. Jadi pada</span><span face=""arial" , "helvetica" , sans-serif"> ruby, tidak ada tipe primitif. <b>Semua adalah object</b>, termasuk integer, string, array, class dan sebagainya. </span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">
</span>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><br /></span></span>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Lebih jelasnya dijelaskan dalam <a href="http://www.belajarrubyonrails.com/2018/03/belajar-ruby-bag-1-apa-itu-ruby-on-rails.html" target="_blank">Seri Belajar Ruby Bagian 1 </a></span></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><br /></span>
</div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">B. Penggunaan Ruby</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Setelah melakukan instalasi, bagaimana cara menjalankan ruby ?. Percuma saja bukan jika menginstall tapi tidak digunakan ?. Cara mudah untuk menjalankan ruby dapat dilakukan melalui <b>irb </b>(interactive ruby)</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><b>Irb</b> adalah <i>tool</i> yang berfungsi untuk menjalankan perintah ruby. Untuk menggunakan <i>tool </i>ini dapat dilakukan dengan cara menjalankan perintah pada terminal atau Command Prompt, seperti berikut.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">
</span>
</div>
<div style="text-align: justify;">
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow-wrap: normal; overflow: auto; padding: 6px 10px;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: #f8f8f8;">$ irb </span></span></span></pre><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow-wrap: normal; overflow: auto; padding: 6px 10px;"><span face=""arial" , "helvetica" , sans-serif"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: #f8f8f8;">$ puts "Hello Guys!"</span></span></span></pre>
</div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><a name='more'></a></span></span></h3>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">C. Class di Ruby</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif"><b>Class</b> adalah ‘cetak biru’ atau ‘blueprint’ dari object.
Class digunakan hanya untuk membuat kerangka dasar. Yang akan kita
pakai nantinya adalah hasil cetakan dari class, yakni <b>object</b>.</span></span></div>
<div style="text-align: justify;">
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow-wrap: normal; overflow: auto; padding: 6px 10px;"><span face=""arial" , "helvetica" , sans-serif"><span style="color: white;"><span class="ruby-keyword">class</span> <span class="ruby-constant">Name</span>
<span class="ruby-comment"># beberapa kode yang mendefinisikan <i>behaviour</i></span>
<span class="ruby-keyword">end</span></span>
</span></pre>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk membuat <b>class</b>, kita menggunakan kata kunci <code>class</code>
diikuti dengan <b>nama class</b>. Nama class dalam ruby harus dimulai dengan
huruf kapital. Biasanya penulisan class pada Ruby, ditulis secara <b>camelize.</b> Contohnya seperti ini</span><br />
<br /></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> Person</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">index</span></div><div> <span style="color: #f92672;">end</span></div><div> </div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">show_name</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<br />
<div style="text-align: justify;">
</div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">D. Method di Ruby</span></span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Di Ruby semuanya adalah object. Jadi, baik itu berupa string atau number merupakan object. Suatu object biasanya akan mempunyai beberapa method yang dapat dipanggil dan digunakan </span></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk memanggil method, kita menggunakan syntax titik (.) yang diikuti
oleh nama methodnya. Contohnya, jika kita ingin mengetahui jumlah <i>byte </i>dari sebuah string, kita dapat menggunakan method <i>bytesize. </i></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">
</span>
</div>
<div style="text-align: justify;">
<br />
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #e6db74;">"welcome"</span>.<span style="color: #a6e22e;">bytesize</span></div><br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Penting untuk diingat bahwa untuk penulisan method pada Ruby harus menggunakan kata kunci <b>def</b>, lalu <b>nama method</b>, kemudian diakhiri dengan <b>end.</b> Contohnya seperti berikut</span></span></div>
<div style="text-align: justify;">
<br /></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">class</span> Cat</div><div> <span style="color: #f92672;">def</span> <span style="color: #a6e22e;">eat</span></div><div> <span style="color: #f92672;">end</span></div><div><span style="color: #f92672;">end</span></div></div></div><div style="text-align: justify;"><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Selanjutnya, pada tutorial akan dibahas mengenai beberapa operasi string dan number.</span></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">E. Tipe String dan Contoh Penggunaannya </span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">String adalah object ruby yang berfungsi memanipulasi rangkaian byte,
yang pada umumnya mereprensentasikan huruf - huruf dalam suatu kalimat.
Ruby memiliki kelas built-in yang bernama </span><code>String</code><span face=""arial" , "helvetica" , sans-serif"> yang memiliki beberapa method yang sering kita gunakan dalam memprogram ruby.</span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">
</span>
</div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Secara umum untuk membuat atau mendeklarasikan string dilakukan dengan cara mengapit string tersebut dengan tanda </span><b style="font-family: arial, helvetica, sans-serif;">double</b><span face=""arial" , "helvetica" , sans-serif"> </span><b style="font-family: arial, helvetica, sans-serif;">qoute </b><span face=""arial" , "helvetica" , sans-serif">(") atau </span><b style="font-family: arial, helvetica, sans-serif;">single quote </b><span face=""arial" , "helvetica" , sans-serif">('). </span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"></span><br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk menampilkan string bisanya dapat menggunakan syntax <b>puts</b>. Contohnya, seperti berikut.</span></div>
<div style="text-align: justify;"><br /></div><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Mari belajar ruby"</span> </div>
<br />
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Cara memasukan sebuah variable ke dalam string caranya adalah dengan menggunakan <b>#{}</b></span></div>
<div style="text-align: justify;"><br /></div><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>name <span style="color: #f92672;">=</span> <span style="color: #e6db74;">"Belajar Ruby on Rails"</span></div><div><span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Kita Sedang </span><span style="color: #e6db74;">#{</span>name<span style="color: #e6db74;">}</span><span style="color: #e6db74;">"</span></div></div>
<h4 style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></h4><h4 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">String Method</span></h4>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Berikut ini adalah beberapa string method yang biasa digunakan</span></span></div>
<div style="text-align: justify;">
<br /></div>
<div class="method-heading" style="text-align: justify;">
<ul>
<li>
<b><span face=""arial" , "helvetica" , sans-serif"><span class="method-callseq">try_convert(obj)</span></span></b><span face=""arial" , "helvetica" , sans-serif"><br />Untuk mengkonversi <i>object</i> ke sebuah string. Akan mengembalikan string hasil konversi atau <i>nil </i>jika <i>object </i>tidak bisa dikonversi.</span><span style="font-family: "courier new" , "courier" , monospace;"><br /></span><pre class="brush: javascript"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px;"><span style="color: #66d9ef; font-style: italic;"> String</span>.<span style="color: #a6e22e;">try_convert</span>(<span style="color: #e6db74;">"str"</span>) <span style="color: #75715e;">#=> "str"</span></div></pre>
<span face=""arial" , "helvetica" , sans-serif"></span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><span class="method-callseq"><b>str * integer</b></span></span><span face=""arial" , "helvetica" , sans-serif"><br />Mengembalikan sebuah string baru sebanyak integer</span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-string"><br /></span></span><pre class="brush: javascript"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px;"><span style="color: #e6db74;"> "Ho"</span> <span style="color: #f92672;">*</span> <span style="color: #ae81ff;">3</span> <span style="color: #75715e;">#=> "Ho" "Ho" "Ho"</span></div></pre>
</li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><b><span face=""arial" , "helvetica" , sans-serif"><span class="ruby-string"><span class="method-callseq">str << obj </span></span></span></b></span><span face=""arial" , "helvetica" , sans-serif"><br />Menggabungkan <i>obj</i> terhadap <i>str</i></span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-constant"> <span face=""arial" , "helvetica" , sans-serif">tanpa</span> <span face=""arial" , "helvetica" , sans-serif">menghasilkan <i>object</i> baru</span></span></span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-string"><br /></span></span><pre class="brush: javascript"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px;"><span style="color: #e6db74;">"Hello from"</span> <span style="color: #f92672;"><<</span> <span style="color: #e6db74;">"Indonesia"</span> <span style="color: #75715e;">#=> "Hello from Indonesia"</span></div></pre>
</li>
<li><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-constant"><span style="font-family: "courier new" , "courier" , monospace;"><b><span face=""arial" , "helvetica" , sans-serif"><span class="ruby-string"><span class="method-callseq">str + obj </span></span></span></b></span><span face=""arial" , "helvetica" , sans-serif"></span></span></span><span face=""arial" , "helvetica" , sans-serif"><br />Menggabungkan <i>obj</i> terhadap <i>str</i></span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-constant"> <span face=""arial" , "helvetica" , sans-serif">dan</span> <span face=""arial" , "helvetica" , sans-serif">menghasilkan <i>object</i> baru</span></span></span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-constant"></span></span><span style="font-family: "courier new" , "courier" , monospace;"><span class="ruby-string"><br /></span></span><pre class="brush: javascript"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px;"><span style="color: #e6db74;">"Hello from"</span> <span style="color: #f92672;">+</span> <span style="color: #e6db74;">"Indonesia"</span> <span style="color: #75715e;">#=> "Hello from Indonesia"</span></div></pre>
</li>
<li><b><span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">str.capitalize</span></span></b><br /><span face=""arial" , "helvetica" , sans-serif">mengubah huruf pertama menjadi huruf kapital, menghasilkan object baru.</span><br /><code></code></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>str.capitalize!</b><br />mengubah huruf pertama menjadi huruf kapital dengan mengubah object yang ada.</span><code><br /></code></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>str.upcase </b><br />mengubah semua huruf menjadi huruf kapital, menghasilkan object baru.</span><code><br /></code></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>str.upcase! </b><br />mengubah semua huruf menjadi huruf kapital dengan mengubah object yang ada.</span><code><br /></code></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>str.length</b><br />menghasilkan panjang string.</span>
<span face=""arial" , "helvetica" , sans-serif"> </span><span class="ruby-comment">
</span>
<br /><span style="font-family: "courier new" , "courier" , monospace;"><b><span face=""arial" , "helvetica" , sans-serif"></span></b> </span><span style="font-family: "courier new" , "courier" , monospace;">
</span>
</li>
</ul>
<h3>
<span face=""arial" , "helvetica" , sans-serif"> </span></h3>
<h3>
<span face=""arial" , "helvetica" , sans-serif">F. Numeric</span></h3>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Numeric adalah basis class untuk angka di Ruby. Karena pada Ruby semua adalah objek, jika mendefinisikan 1, maka 1 tersebut adalah objek dari <b>fixnum.</b></span></span></div>
<div class="method-heading" style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Contoh:</span><br />
<pre><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px;"><div><span style="color: #66d9ef;">puts</span> <span style="color: #ae81ff;">100</span>.<span style="color: #a6e22e;">class</span> <span style="color: #75715e;"># Fixnum</span></div><div><span style="color: #66d9ef;">puts</span> (<span style="color: #ae81ff;">100.2</span>).<span style="color: #a6e22e;">class</span> <span style="color: #75715e;"># Float</span></div></div></pre>
<span face=""arial" , "helvetica" , sans-serif">Dari contoh terdapat kata <b>fixnum</b>, <b>float</b><b>. </b></span><br />
<ul>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Fixnum</b> digunakan untuk integer</span></li>
<li><span face=""arial" , "helvetica" , sans-serif"><b>Float</b> digunakan untuk decimal</span></li>
</ul><div><br /></div>
<h3>
<span face=""arial" , "helvetica" , sans-serif">G. Boolean</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Ruby memiliki nilai boolean <code>true</code> dan <code>false</code>, yang merupakan object dari kelas <code>TrueClass</code> dan <code>FalseClass</code>. Dalam ruby, semua nilai selain <code>false</code> dan <code>nil</code> dianggap bernilai true dan dapat digunakan dalam operasi boolean, seperti conditional, <code>and</code>, <code>or</code> dan sebagainya.</span></div>
</div>
<div style="text-align: justify;">
<br /></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div> bool <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">true</span></div><div><span style="color: #66d9ef;"> puts</span> <span style="color: #e6db74;">"nilai bool saat ini </span><span style="color: #e6db74;">#{</span>bool<span style="color: #e6db74;">}</span><span style="color: #e6db74;">"</span></div></div></div>
<div style="text-align: justify;">
<h3 style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></h3><h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">H. Conditional Statement</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Dalam bahasa pemrograman tentunya terdapat bagian yang penting yaitu conditional statement. Conditional statement ini adalah perintah yang dilakukan untuk melakukan suatu pengecekan apakah ekspresi yang dijalankan sudah benar atau belum.</span></span></div>
<ul style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=810712507486016259" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a>
<li><h3>
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">If Statement</span></span></h3><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>a <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">1</span></div><div>b <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">2</span></div><div><span style="color: #f92672;">if</span> a <span style="color: #f92672;"><</span> b</div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"nilai a lebih kecil dari nilai b"</span></div><div><span style="color: #f92672;">end</span></div></div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Selain itu cara penulisan dapat juga ditulis dengan cara if berada di belakang ekspresi yang akan dicek, yaitu seperti berikut.</div>
</span><div style="text-align: justify;">
<br /></div>
</li>
<li><h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">If... Elsif... Else... Statement </span></span></h3>
<div style="text-align: justify;">
</div>
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div style="font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; line-height: 19px;"><div>a <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">1</span></div><div>b <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">2</span></div><div><span style="color: #f92672;">if</span> a <span style="color: #f92672;"><</span> b </div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Nilai a lebih kecil dari nilai b"</span></div><div><span style="color: #f92672;">elsif</span> a <span style="color: #f92672;">></span> b</div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Nilai a lebih besar dari nilai b"</span></div><div><span style="color: #f92672;">else</span> </div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"Nilai a dan b adalah sama"</span></div><div><span style="color: #f92672;">end</span></div></div></div></li><br><h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">(!) atau Unless </span></span></h3>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Di Ruby untuk mengecek negasi atau kebalikan dari sebuah nilai atau suatu ekspresi dapat menggunakan operator (!) atau unless. Namun yang lebih baik digunakan di Ruby adalah unlesss</div></span></li></ul><ul style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">unless</span> greeting <span style="color: #f92672;">==</span> <span style="color: #e6db74;">"hi"</span></div><div> <span style="color: #66d9ef;">puts</span> greeting</div><div><span style="color: #f92672;">end</span></div></div>
<ul style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></ul><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>greeting <span style="color: #f92672;">=</span> <span style="color: #e6db74;">"hello"</span></div><div><span style="color: #f92672;">if</span> <span style="color: #f92672;">!</span>(greeting <span style="color: #f92672;">==</span> <span style="color: #e6db74;">"hi"</span>)</div><div> <span style="color: #66d9ef;">puts</span> greeting</div><div><span style="color: #f92672;">end</span></div></div>
<br />
</span><div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<span face=""arial" , "helvetica" , sans-serif"><div style="text-align: justify;">
Dalam penggunaannya, unless juga dapat ditulis dibelakang ekspresi yang akan dicek sama halnya dengan if.</div>
</span>
</ul>
<div style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=810712507486016259" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a></div>
<br />
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">I. Case Statement</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Case statement pada Ruby memiliki kata kunci <b>case</b> dan <b>when</b>. Case statement ini tidak jauh berbeda dengan <b>switch</b> dan <b>case</b> pada bahasa pemrograman lain. Perbedaan yang terdapat pada case dan when adalah case dapat mengecek semua tipe object yang dapat dibandingkan kesamaannya atau ekuivalensinya.</span></div>
<div style="text-align: justify;">
<br /></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">case</span> shoes</div><div> <span style="color: #f92672;">when</span> <span style="color: #e6db74;">"flat shoes"</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"using flat shoes"</span></div><div> <span style="color: #f92672;">when</span> <span style="color: #e6db74;">"sneakers"</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"using sneakers"</span></div><div> <span style="color: #f92672;">when</span> <span style="color: #e6db74;">"wedges"</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"using wedges"</span></div><div> <span style="color: #f92672;">when</span> <span style="color: #e6db74;">"heels"</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"using heels"</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br />
<span face=""arial" , "helvetica" , sans-serif">Case juga dapat digunakan dalam perbandingan, contohnya seperti berikut</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">case</span> age</div><div> <span style="color: #f92672;">when</span> age <span style="color: #f92672;"><</span> <span style="color: #ae81ff;">11</span> </div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"anak anak"</span></div><div> <span style="color: #f92672;">when</span> <span style="color: #ae81ff;">11</span>..<span style="color: #ae81ff;">17</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"remaja"</span></div><div> <span style="color: #f92672;">when</span> <span style="color: #ae81ff;">18</span>..<span style="color: #ae81ff;">25</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"dewasa"</span></div><div> <span style="color: #f92672;">else</span> </div><div> <span style="color: #e6db74;">"tidak sesuai jangkauan"</span></div><div><span style="color: #f92672;">end</span></div></div>
</div>
<h3 style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></h3><h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">J. Operator Ternary</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif"><span face=""arial" , "helvetica" , sans-serif">Operator ini merupakan bentuk pendek dari if else. Contohnya seperti berikut. </span></span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>score <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">85</span></div><div>predicate <span style="color: #f92672;">=</span> score <span style="color: #f92672;">></span> <span style="color: #ae81ff;">75</span> <span style="color: #f92672;">?</span> <span style="color: #e6db74;">"Good"</span> : <span style="color: #e6db74;">"Bad"</span></div></div></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">K. Loops</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Looping atau pengulangan merupakan hal pemting yang banyak dipakai dalam membuat aplikasi baik pada bahasa pemrograman apapun. Pada Ruby looping ditulis dengan struktur seperti berikut.</span>
</div>
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">while</span> condition</div><div> <span style="color: #88846f;">#...</span></div><div><span style="color: #f92672;">end</span></div></div>
<div style="text-align: justify;"><span face=""arial" , "helvetica" , sans-serif"><br /></span></div><div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Contohnya seperti berikut. </span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">until</span> i <span style="color: #f92672;">>=</span> <span style="color: #ae81ff;">5</span></div><div> <span style="color: #66d9ef;">puts</span> <span style="color: #e6db74;">"This is loop in ruby"</span></div><div> i <span style="color: #f92672;">+=</span> <span style="color: #ae81ff;">1</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br />
</div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">L. Iteration dan Block</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Iteration sama saja dengan perulangan seperti until dan while namun dalam proses pembuatan aplikasi sebenarnya, yang banyak dilakukan oleh para developer adalah blok yang digabungkan dengan iterator. </span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>(<span style="color: #ae81ff;">1</span>..<span style="color: #ae81ff;">5</span>).<span style="color: #a6e22e;">each</span> <span style="color: #f92672;">do</span> |num|</div><div> <span style="color: #66d9ef;">puts</span> num</div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br />
<span face=""arial" , "helvetica" , sans-serif">Akan menghasilkan seperti berikut. </span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-VhKsm4oLY9A/WqWzd3iHiiI/AAAAAAAAAvU/3MRLUSnCuN4uAOBuXTfum-ivo_cDVmk1ACLcBGAs/s1600/Screenshot%2Bfrom%2B2018-03-12%2B05-53-00.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="305" data-original-width="740" height="131" src="https://3.bp.blogspot.com/-VhKsm4oLY9A/WqWzd3iHiiI/AAAAAAAAAvU/3MRLUSnCuN4uAOBuXTfum-ivo_cDVmk1ACLcBGAs/s320/Screenshot%2Bfrom%2B2018-03-12%2B05-53-00.png" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Untuk iteration sendiri, contohnya seperti berikut.
</span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ae81ff;">3</span>.<span style="color: #a6e22e;">times</span> <span style="color: #f92672;">do</span></div><div> <span style="color: #66d9ef;">print</span> <span style="color: #e6db74;">"Ho! "</span></div><div><span style="color: #f92672;">end</span></div></div></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">M. Array vs Hash</span></h3>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Array adalah salah satu kelas bawaan ruby. Array adalah suatu koleksi object yang berurutan dan dapat diakses berdasarkan indexnya. Dalam ruby, array dapat menyimpan semua object seperti String, Fixnum, Hash bahkan array yang lain. Setiap elemen di dalam array diasosiasikan dan diakses dengan index tertentu. Elemen - elemen array secara otomatis <b>diindex dengan angka dimulai dari 0</b>. </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span face=""arial" , "helvetica" , sans-serif">Sedangkan Hash adalah koleksi pasangan<b> key-value.</b> Hash mirip seperti array, tetapi jika array diindex dengan integer yang dimulai dari 0, hash diindex dengan object ruby. Semua object dalam ruby dapat dijadikan key ataupun value dalam hash. Tetapi pada umumnya kita lebih sering menggunakan symbol atau string sebagai key dari sebuah hash.
</span></div>
<div style="text-align: justify;">
<div style="background-color: #272822; color: #f8f8f2; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre;"><div>array <span style="color: #f92672;">=</span> []</div><div>hash <span style="color: #f92672;">=</span> {}</div><br /><div>array <span style="color: #f92672;">=</span> [<span style="color: #e6db74;">'a'</span>,<span style="color: #e6db74;">'b'</span>,<span style="color: #e6db74;">'c'</span>,<span style="color: #e6db74;">'d'</span>]</div><div><span style="color: #66d9ef;">puts</span> array[<span style="color: #ae81ff;">0</span>]</div><div><span style="color: #66d9ef;">puts</span> array[<span style="color: #ae81ff;">1</span>]</div><div>hash <span style="color: #f92672;">=</span> {<span style="color: #ae81ff;">:one</span> => <span style="color: #e6db74;">'a'</span>, <span style="color: #e6db74;">"two"</span> => <span style="color: #e6db74;">'b'</span>}</div><div><span style="color: #66d9ef;">puts</span> hash[<span style="color: #ae81ff;">:one</span>]</div><div><span style="color: #66d9ef;">puts</span> hash[<span style="color: #e6db74;">"two"</span>]</div></div></div>
<div style="text-align: justify;">
<br /></div>
</div>
<span face=""arial" , "helvetica" , sans-serif"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-78063141284537558922019-03-06T14:56:00.002+07:002021-10-19T13:26:13.212+07:00Seri Belajar Ruby on Rails Bagian 12 - Menambahkan Sub Category pada category<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">
<div style="text-align: justify;"><span style="color: #333333; font-family: "arial" , "helvetica" , sans-serif;">Di dalam seri ini kita masih akan melanjutkan project yang telah kita buat di <a href="http://www.belajarrubyonrails.com/2018/09/seri-belajar-ruby-on-rails-bagian-11.html" target="_blank">Seri Belajar Ruby on Rails Bagian 11</a>. Jadi, untuk kalian yang sudah tidak menyimpan project <b>Homework Management</b> silahkan download contoh aplikasi di link berikut </span><a href="https://drive.google.com/open?id=1Drkqn048xLfAvKrSIOek_ZR3DEnXOH-X" style="font-family: Arial, Helvetica, sans-serif;" target="_blank">[Download]</a></div><br />
<div style="text-align: justify;"><span style="color: #333333; font-family: "arial" , "helvetica" , sans-serif;">Sebelum memulai, pastikan kembali project Homework Management yang telah dibuat berjalan dengan baik. Jika sudah pasti, let’s begin !</span></div><br />
<div style="text-align: justify;"><h3><b style="font-family: arial, helvetica, sans-serif;">Membuat CRUD sub_category</b></h3><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Seperti biasa, kita buka terminal dan kita jalankan code berikut:</span></div><div style="font-variant-east-asian: normal; font-variant-numeric: normal; text-align: justify;"><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: start;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails g scaffold sub_category name:string category_id:integer</span></pre><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: start;"><span style="font-family: "courier new" , "courier" , monospace;">$ rake db:migrate</span></pre></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dengan menjalankan code tersebut, kita telah membuat CRUD untuk sub_category, dan melakukan migrasi ke database.</span></div><br />
<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Langkah berikutnya kita tambahkan validasi dan relasi di model <b>sub_category</b> :</span><script src="https://gist.github.com/dherisPermadi/5df67a54ebf5d3dfdd2972ff54b09265.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Sesudah menambahkan validasi dan relasi di model <b>sub_category</b>, kita perlu menambahkan relasi juga di model <b>category</b> :</span><script src="https://gist.github.com/dherisPermadi/75630a8507b3dfd6fa252660fa760f2f.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah menambahkan relasi di model <b>category</b>, kita tambahkan script berikut pada controller <b>sub_categories_controller </b>:</span><br />
<ol><li><span style="font-family: "arial" , "helvetica" , sans-serif;">Tambahkan method ini pada bagian atas sub_categories_controller :</span><script src="https://gist.github.com/dherisPermadi/f43d54638e872dd82f863b7a83761e6a.js"></script></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Tambahkan method berikut pada bagian private sub_categories_controller :</span><script src="https://gist.github.com/dherisPermadi/2a983f23cec0c4006f84e8b22f8f4abb.js"></script></li>
</ol></div><br />
<div style="text-align: justify;"><h3><b style="font-family: arial, helvetica, sans-serif;">Modifikasi Views sub_category</b></h3><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Kita ubah terlebih dahulu file <b>app/views/sub_categories/_form.html.erb</b> menjadi :</span><script src="https://gist.github.com/dherisPermadi/45b80e20c19228674f703a28b205e7c5.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Kita ubah juga file<b> app/views/sub_categories/show.html.erb</b> menjadi :</span><script src="https://gist.github.com/dherisPermadi/1b5125ed2d2792a733dfaa5840667a0c.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dan yang paling penting, kita ubah file <b>app/views/sub_categories/index.html.erb </b>menjadi :</span><script src="https://gist.github.com/dherisPermadi/d1fc29fba88dffc6090bccec285cdc9b.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dengan mengubah ketiga file tersebut, kita lanjutkan dengan mencoba mengisi data sub_category. Jalankan code berikut:</span></div><div style="text-align: justify;"><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: justify;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails s</span></pre></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Buka url <a href="http://localhost:3000/sub_categories/new">http://localhost:3000/sub_categories/new</a> di browser, lalu kita coba membuat satu data baru di sub_category. Kita isikan "<b>Beginner 1</b>" pada kolom name dan pilih "<b>Bahasa Inggris</b>" sebagai category nya. Klik <b>create sub category</b> untuk menyimpan.</span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-P1U1B_VbHPc/XH5AzyEcejI/AAAAAAAAA7A/Mb60UztZGQAwxICkefCI3rh2zJokrrGsQCLcBGAs/s1600/Screenshot%2Bfrom%2B2019-03-04%2B11-52-13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="657" data-original-width="1366" height="153" src="https://2.bp.blogspot.com/-P1U1B_VbHPc/XH5AzyEcejI/AAAAAAAAA7A/Mb60UztZGQAwxICkefCI3rh2zJokrrGsQCLcBGAs/s320/Screenshot%2Bfrom%2B2019-03-04%2B11-52-13.png" width="320" /></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption" style="font-size: 12px;">Halaman Show Sub_Category</td></tr>
</tbody></table><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Jika berhasil menyimpan data, maka browser anda akan menampilkan :</span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-c3VF3qpbeL8/XH5GhxxPg6I/AAAAAAAAA7U/eiwvsC4TSsgoMgVg65pYp79KgaJVa3mXgCLcBGAs/s1600/Screenshot%2Bfrom%2B2019-03-04%2B11-52-51.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="666" data-original-width="1365" height="156" src="https://4.bp.blogspot.com/-c3VF3qpbeL8/XH5GhxxPg6I/AAAAAAAAA7U/eiwvsC4TSsgoMgVg65pYp79KgaJVa3mXgCLcBGAs/s320/Screenshot%2Bfrom%2B2019-03-04%2B11-52-51.png" width="320" /></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption" style="font-size: 12px;">Halaman Show Sub_Category</td></tr>
</tbody></table><br />
<div style="text-align: justify;"><h3><b style="font-family: arial, helvetica, sans-serif;">Menambahkan data sub_category</b></h3><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Agar pengimplementasian pembuatan dropdown list ini lebih dapat dipahami, kita perlu menambahkan banyak data di <b>sub_category</b>. Tambahkan data sub_category berikut berdasarkan category masing-masing :</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-jbo39ASIrvA/XH9X1h1C-2I/AAAAAAAAA7w/uDK-wKwbT2UhFowaFK9NEfB2GkPKmDCHgCLcBGAs/s1600/Screenshot%2Bfrom%2B2019-03-06%2B12-11-40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="355" data-original-width="743" height="152" src="https://4.bp.blogspot.com/-jbo39ASIrvA/XH9X1h1C-2I/AAAAAAAAA7w/uDK-wKwbT2UhFowaFK9NEfB2GkPKmDCHgCLcBGAs/s320/Screenshot%2Bfrom%2B2019-03-06%2B12-11-40.png" width="320" /></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption" style="font-size: 12px;">Data Sub_Category</td></tr>
</tbody></table><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
Setelah selesai menambahkan data-data yang ada pada gambar, kita pun dapat menambahkan data sub_category lebih banyak lagi, sesuai dengan keinginan kita.</span></div><br />
<div style="text-align: justify;"><h3><b style="font-family: arial, helvetica, sans-serif;">Modifikasi CRUD Homework</b></h3><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Sebelum mengubah script yang ada pada CRUD homework, kita terlebih dahulu menambahkan atribut <b>sub_category_id</b> kedalam struktur homework dengan cara menjalankan code berikut di terminal.</span></div><div style="text-align: justify;"><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: justify;"><span style="font-family: "courier new" , "courier" , monospace;">$ rails g migration AddSubCategoryIdToHomework</span></pre></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Buka file migration tersebut yang ada pada folder <b>db/migrate</b>,dan tambahkan script berikut :</span><script src="https://gist.github.com/dherisPermadi/e7db9675eb0d7b1ce6d8250bb8941fe3.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Lakukan migrasi dengan menjalankan code berikut di terminal :</span></div><div style="text-align: justify;"><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: justify;"><span style="font-family: "courier new" , "courier" , monospace;">$ rake db:migrate</span></pre></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Kita buat relasi baru di model <b>homework</b>, dengan menambahkan script berikut :</span><script src="https://gist.github.com/dherisPermadi/c29c731325b422d8f2ab03216ec68546.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Selanjutnya kita ubah controller <b>homeworks_controller</b> menjadi seperti berikut :</span><script src="https://gist.github.com/dherisPermadi/8c703d7b1151127b2e5bdde30c23f271.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Lalu kita lanjutkan dengan mengubah script<b> app/views/homeworks/index.html.erb</b> menjadi :</span><script src="https://gist.github.com/dherisPermadi/5667a2c9c994c102990b0e2c54117af1.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dan kita ubah juga script yang ada pada <b> app/views/homeworks/show.html.erb</b> menjadi :</span><script src="https://gist.github.com/dherisPermadi/c81ab5fc16753bafc5bca6e41bb8220d.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah mengubah index dan show pada homework. Maka kita teruskan dengan mengubah script yang ada pada <b> app/views/homeworks/_form.html.erb</b> menjadi :</span><script src="https://gist.github.com/dherisPermadi/fee7ffbf954d00b73327bb962af78ebc.js"></script></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dengan menjalankan <a href="http://localhost:3000/homeworks/new">http://localhost:3000/homeworks/new</a> di browser, dapat terlihat di dalam form terdapat dua buah dropdown list. Namun dropdown list tersebut tidak saling terikat. Data pada dropdown list sub_category tidak dipengaruhi nilai dari dropdown list category.</span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-QiaF7hLIMFY/XH9IPaEZWRI/AAAAAAAAA7g/ZMS2OOjJL7sScrFUkHm5ml0LGZYFSzD6QCLcBGAs/s1600/Screenshot%2Bfrom%2B2019-03-04%2B13-05-41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="668" data-original-width="1366" height="156" src="https://1.bp.blogspot.com/-QiaF7hLIMFY/XH9IPaEZWRI/AAAAAAAAA7g/ZMS2OOjJL7sScrFUkHm5ml0LGZYFSzD6QCLcBGAs/s320/Screenshot%2Bfrom%2B2019-03-04%2B13-05-41.png" width="320" /></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr></tr>
</tbody></table><br />
<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><i>so, congratulations !! </i>anda telah berhasil membuat dropdown sub-category</span></div><br />
<style type="text/css">
@page { margin: 0.79in }
p { margin-bottom: 0.1in; line-height: 100% }
a:link { so-language: zxx }
</style>Anonymousnoreply@blogger.com34tag:blogger.com,1999:blog-810712507486016259.post-67014018567076902102018-11-14T12:47:00.001+07:002018-11-14T12:47:31.783+07:00Import CSV atau Excel pada Ruby on Rails <div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pada umumnya website memiliki fungsi CRUD (Create, Read, Update, Delete). Create dan Read dapat dilakukan dengan menambahkan / mengupdate data melalui form pada aplikasi website yang dibuat. Bagaimana jika data yang akan diinput sangat banyak seperti 1000 data? Bagaimana jika data harus dimasukkan satu per satu</span><span style="font-family: "arial" , "helvetica" , sans-serif;">, pusing bukan</span><span style="font-family: "arial" , "helvetica" , sans-serif;">?</span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Sebagai solusi, di Ruby on Rails kita dapat memasukkan banyak data dalam satu langkah mudah dengan menambahkan fitur import pada aplikasi yang dibuat. Untuk menambahkan fitur ini, dibutuhkan <b>gem</b> bantuan yaitu </span><b><span style="font-family: "arial" , "helvetica" , sans-serif;">gem </span><span style="font-family: "arial" , "helvetica" , sans-serif;">ROO.</span></b></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Sebelum ke langkah selanjutnya, sebagai catatan tutorial ini adalah lanjutan dari tutorial <a href="http://www.belajarrubyonrails.com/2016/11/membuat-file-export-dengan-format-csv.html" target="_blank">Membuat File Export dengan Format CSV & XLS</a></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Bagaimana cara menggunakan <b>gem ROO</b>? Berikut langkah - langkanya :</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">1. Pada <b>Gemfile</b>, tambahkan baris berikut </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"> </span><span style="background-color: #eeeeee;"><span style="color: blue; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">gem</span><span style="color: #ce9178; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #a31515; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">'roo'</span><span style="color: #ce9178; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="color: #a31515; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">'1.13.2'</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">2. Pada <b><i>console/terminal</i></b>, ketikkan baris berikut </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"> </span><span style="background-color: #eeeeee; font-family: "courier new"; font-size: 9pt; white-space: pre-wrap;">bundle install</span><br />
<span style="color: red; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;"><span style="color: black; font-family: "arial" , "helvetica" , sans-serif; font-size: small; white-space: normal;"><br />
</span></span> <span style="font-family: "arial" , "helvetica" , sans-serif;">3. Jika </span><b style="font-family: arial, helvetica, sans-serif;">Gem ROO</b><span style="font-family: "arial" , "helvetica" , sans-serif;"> sudah terinstall, lalu tambahkan link untuk melakukan import data. Link import akan disimpan pada halaman index. Tambahkan kode berikut pada halaman index.</span><br />
<span style="background-color: #eeeeee; font-family: "courier new"; font-size: 9pt; white-space: pre-wrap;">=< link_to 'Import Item', import_items_items_path </span><br />
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Ketika merefresh halaman index item, akan muncul error sebagai berikut.</span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div>
<div>
<span id="docs-internal-guid-ec5f2e08-7fff-ad33-f17c-a5f16b7856b8"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;"><img height="281" src="https://lh5.googleusercontent.com/fDRIjPEjn6JWz-PywDACgq4FmkfZHXZymEbXe4qW40oipEeoymmBdPTkK5KfkOjiucjFipCdTTYhFA-Pq12waGXZUoVsn3nYY2OTLPcARbtbFYZ4YVW3NYxg9bj4vsqcSGlwBD0x" style="border: none; transform: rotate(0rad);" width="547" /><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span></span></div>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Hal ini terjadi karena kita belum menambahkan link path tersebut pada route. Pada </span><span style="font-family: "arial"; font-size: 10.5pt; font-weight: 700; white-space: pre-wrap;">stores/app/config/routes.rb </span><span style="font-family: "arial" , "helvetica" , sans-serif;">, tambahkan baris berikut.</span></div>
<script src="https://gist.github.com/wahyupuri14/3885ce5cf24ef3bfa42830517e0866f1.js"></script><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">4. Buka items_controller.rb, tambahkan method<b> import_form</b> serta <b>import.</b></span><br />
<script src="https://gist.github.com/wahyupuri14/1630bd151f025051ab562bff976b6700.js"></script><br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">5. Biarkan kedua method tersebut, selanjutnya kita membuat tampilan untuk form import data. Pada </span><span style="font-family: "arial"; font-size: 10.5pt; font-weight: 700; white-space: pre-wrap;">app/views/items </span><span style="font-family: "arial" , "helvetica" , sans-serif;">tambahkan file dengan nama</span><span style="font-family: "arial"; font-size: 10.5pt; font-weight: 700; white-space: pre-wrap;"> </span><span style="font-family: "arial"; font-size: 10.5pt; font-weight: 700; white-space: pre-wrap;">import_items.html.slim, </span><span style="font-family: "arial" , "helvetica" , sans-serif;">serta tambahkan kode berikut. </span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span><script src="https://gist.github.com/wahyupuri14/1bb63f99b6c4bb7b952fd91b195111d2.js"></script> <br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">6. Kembali ke</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">items_controller.rb, pada method import tambahkan kode berikut.</span><br />
<script src="https://gist.github.com/wahyupuri14/28afe87b5b76ffb1179930b11922fbfb.js"></script><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pada file config/application.rb, tambahkan baris kode berikut </span><br />
<span id="docs-internal-guid-58fb98d8-7fff-dda2-fcd4-cd323d4472c0" style="background-color: #eeeeee;"><span style="color: blue; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">require</span><span style="font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #a31515; font-family: "courier new"; font-size: 9pt; vertical-align: baseline; white-space: pre-wrap;">'roo'</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">7. Pada model item </span><span id="docs-internal-guid-fb24a27e-7fff-7d2c-9d38-f2b0520b6d51"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;">(</span><span style="font-family: "arial"; font-size: 10.5pt; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;">app/models/item.rb</span><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;">)</span></span><span style="font-family: "arial" , "helvetica" , sans-serif;">, tambahkan kode berikut</span><script src="https://gist.github.com/wahyupuri14/1e85c89bd6ed938dbae32a580bd66ca9.js">
<span style="font-family: arial, helvetica, sans-serif;">Script diatas panjang bukan? Jika diperjelas akan seperti ini </span>
</span><span style="font-family: "arial" , "helvetica" , sans-serif;">
</span><script src="https://gist.github.com/wahyupuri14/522f5e225458584ef478b9e0c2753834.js"></script><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pada console akan terlihat proses data saat import data </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Kemudian lakukan testing. Kita akan mencoba untuk memasukkan data dari file .xlsx, seperti berikut</span><br />
<span id="docs-internal-guid-e3711bf8-7fff-3224-a826-ae574a3d48c5"><br /></span>
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none;"><colgroup><col width="98"></col><col width="98"></col><col width="98"></col></colgroup><tbody>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">name</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">unit</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">price</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 1</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Renceng</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">1000</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 2</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Botol</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">2500</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 3</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Pak</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">10300</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 4</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Renceng</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">1000</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 5</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Botol</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">2500</span></div>
</td></tr>
<tr style="height: 22pt;"><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Product 6</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Pak</span></div>
</td><td style="border-bottom: solid #000000 0.75pt; border-left: solid #000000 0.75pt; border-right: solid #000000 0.75pt; border-top: solid #000000 0.75pt; padding: 5pt 5pt 5pt 5pt; vertical-align: top;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">10300</span></div>
</td></tr>
</tbody></table>
</div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">
</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Dalam console dapat terlihat proses import data seperti berikut </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span id="docs-internal-guid-f5565635-7fff-43bf-927b-a319fa520c41"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;"><img height="219" src="https://lh6.googleusercontent.com/haxoO_hk82fU2G7b1ZQ6MpEDwdIM4VP4rD5bYTEUqBtVUHGV-_orESMA3eYfbxL77Rn_Cfkh8AFtVodQlPHBXrGd-KPHcCLEzb47GaGSfs-HP64f5OvMR7xqqY1M4aiz4bRUa5rb" style="border: none; transform: rotate(0rad);" width="602" /></span></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;">Data berhasil diimport, halaman index item pada website akan muncul seperti ini</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span id="docs-internal-guid-6544b8cb-7fff-366a-4f71-0e661de0bf04"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="308" src="https://lh6.googleusercontent.com/rZXCtmxXFYlG7Nj34NeqLBFh83KyUx_IMOkw3Z7_R0H9czB0qWSzREOXQjDe3OEj3IGninA92r4cofA_5O_zQ5WneOGuWnSen1tA0n3Pvt7ayiWBK23plBIn2FzSwPc_G7A_if9h" style="border: none; transform: rotate(0rad);" width="602" /></span></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;">Kalian akan kembali ke halaman import data dengan message bahwa import gagal dilakukan, </span></span><span style="font-family: "arial"; font-size: 14px; white-space: pre-wrap;">jika menekan tombol "import" tanpa memasukkan file data/gambar terlebih dahulu.</span><br />
<span id="docs-internal-guid-28de5657-7fff-4045-08ba-f178745b6f5f"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="308" src="https://lh6.googleusercontent.com/m5-bN5jEmLi-izrShnpNySmmuazYvBLA_s08HKOkod4xE6ZUoWhRIsVhhqd4_-WmuLyJRhPXNjdnEO9C1wo_DM-z1B39w2OsLjwI4wD5GZDJfvKHzl_DuvxS1UKA1p1OqfUK2a6N" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="602" /></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial"; font-size: 10.5pt; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span>Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-810712507486016259.post-32672999527625818712018-11-06T09:32:00.003+07:002018-11-06T09:32:47.161+07:00Notification Menggunakan iziToast di Ruby on Rails <b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"></b><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Toast adalah sebuah pesan notifikasi yang biasanya ditampilkan sudut bawah layar, dengan umpan balik sederhana agar website terlihat interaktif.</span></b></span></span></div>
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Kali ini kita akan menggunakan </span><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><a href="http://izitoast.marcelodolce.com/" target="_blank">iziToast</a> untuk membuat notifikasi tersebut, berikut langkah - langkah pengimplementasiannya : </span></b></span></span><br />
<br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Cara Install</span></b></span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1. </span></b></span></span></span></b> Tambahkan kode berikut pada Gemfile </span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-family: "courier new" , "courier" , monospace;"> </span></span></b></span></span><span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="background-color: #eeeeee; font-weight: normal;"><span style="color: #24292e; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">gem </span><span style="color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">'izitoast'</span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2. </span></b></span></span></span></b> Lalu jalankan di terminal</span></b></span></span></span></span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-9ae89b5b-7fff-b859-5026-b43504968c9c" style="font-weight: normal;"><span style="color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"> </span><span style="background-color: #f3f3f3;"> </span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;">$ bundle install</span></span></b><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"> </span></span></b></span></span></span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b></span></span></span></span></b></span><span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3. </span></b></span></span></span></b> Tambahkan kode ini pada application.js</span></b></span></span></span></b></span></span></span></span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-7737fd04-7fff-bdf8-d25f-c064dbdffee8" style="font-weight: normal;"><span style="color: #6a737d; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"> </span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;">//= require iziToast</span></span></b><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"> </span></span></b></span></span></span></b></span></span></span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4. </span></b></span></span></span></b> Tambahkan kode ini juga pada application.css</span></b></span></span></span></b></span></span></span></span></b></span> (css)</span></b></span></span></span></b></span></span></span></span></b></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: white;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span></span></b></span></span></span></span></b><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-44147ec2-7fff-37f1-db63-18086048e00e" style="background-color: #eeeeee; font-weight: normal;"><span style="color: #d73a49; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">@import</span><span style="color: #24292e; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> "</span><span style="color: #e36209; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">iziToast</span><span style="color: #24292e; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">";</span></b></span></b></span></span></b></span></span></b></span><br />
<br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: white;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="color: #032f62; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-44147ec2-7fff-37f1-db63-18086048e00e" style="font-weight: normal;"><span style="color: #24292e; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2d384bd2-7fff-5603-7593-e08dd7ff2027" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 16pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;">Cara Implementasi</span></b></span></b></span></span> </span></b></span></b></span></span></b></span></span></b></span></span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: white;"><b id="docs-internal-guid-081975fc-7fff-3d08-10d0-1322ba3229b6" style="font-weight: normal;"><span style="color: #032f62; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-7f71e6bb-7fff-70a7-85f2-1cb70a1006b7" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-44147ec2-7fff-37f1-db63-18086048e00e" style="font-weight: normal;"><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-2934d7a1-7fff-e254-b588-2d9f2defb135" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Untuk mengetes bahwa <a href="http://izitoast.marcelodolce.com/" target="_blank">iziToast</a></span><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> telah terinstall, tambahkan kode javascript berikut dan coba jalankan pada browser anda.</span></b></span></b></span></b></span></b></span></b></span></span></span><br />
<br />
<script src="https://gist.github.com/wahyupuri14/d27b73d88fd3f77ae9e153acfa630ac7.js"></script><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-bb4e97f2-7fff-f2ad-df25-9e250358c98f" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Setelah jalan di browser, seharusnya kamu akan melihat notifikasi tersebut pada bagian bawah kanan browser.</span></b></span></span><br />
<br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-bb4e97f2-7fff-f2ad-df25-9e250358c98f" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-5d48d949-7fff-f999-de01-1e40911edf73" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><img height="58" src="https://lh5.googleusercontent.com/dLsLyECvhMCJDtcXk5JatHEiJcIcTEYdR0AktndQH8jlJzFBbzGuXrhpOgCbwl-zUGj1niN1_ue3TCP7aKQlTBOdJZLYRs0ePvANYubZ7s0UejkABsI1CNgCqR7oMxLmyDJzGU2z" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="303" /></span></b> </span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-ebeaab74-7fff-3fdf-784e-2df87de59d2e" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nah kurang lebih seperti ini cara pengimplementasiannya. Selain untuk success notifikasi, kamu juga bisa merubahnya dengan info, error, warning atau bahkan question dengan merubah format pada syntax javascriptnya. Kalian bisa explore lebih jauh di <a href="http://izitoast.marcelodolce.com/" target="_blank">iZiToast Website</a></span></b></span></span><br />
<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-46500747676701868722018-11-06T09:27:00.000+07:002018-11-06T09:27:05.938+07:00Setup Notifikasi SMS & Panggilan Telepon Menggunakan Twilio di Ruby on Rails<div style="text-align: left;">
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Twilio adalah platform layanan komunikasi yang berbasis di San Francisco, California. Twilio memungkinkan pengembang perangkat lunak untuk secara terprogram membuat dan menerima panggilan telepon, mengirim dan menerima pesan teks, dan melakukan fungsi komunikasi lainnya menggunakan API layanan webnya.</span><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b></span></span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></b></span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></b></span></span> <br />
<div style="text-align: justify;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="color: black; vertical-align: baseline;">Berikut langkah - langkah untuk mensetup notifikasi SMS & panggilan telepon menggunakan Twilio di Ruby on Rails : </span></span></span></b></span></span></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cara Install </span></span></span></b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Untuk install menggunakan <a href="http://bundler.io/" target="_blank">Bundler</a></span></b></span></span></div>
<div style="text-align: left;">
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-6a39c0e6-7fff-d6b1-edca-3826e4a93de9" style="font-weight: normal;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #eeeeee; color: black; font-style: normal; font-variant: normal; font-weight: 400; vertical-align: baseline; white-space: pre-wrap;">gem ‘twilio-ruby’, ‘~> 5.14.0’</span></span><span style="font-size: 12pt; text-decoration-color: initial; text-decoration-style: initial;"><span style="background-color: transparent; color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></span></span></b></span></b></span></span></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-6a39c0e6-7fff-d6b1-edca-3826e4a93de9" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></span></b></span></b></span></span></div>
<div style="text-align: left;">
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Untuk install secara manual via <a href="http://rubygems.org/" target="_blank">Rubygems</a></span></b></span></span></div>
<div style="text-align: left;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: #eeeeee; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "courier new" , "courier" , monospace;"><b id="docs-internal-guid-ab27f57b-7fff-223a-03f1-875938b3f723" style="font-weight: normal;"><span style="color: black; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">gem install twilio-ruby -v 5.14.0</span></b></span> </span></b></span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></span></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Setup Token dan SID</span></span></span></b></div>
<div style="text-align: left;">
<br />
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Buat akun di <a href="http://www.twilio.com/" target="_blank">www.twilio.com</a> dan setelah selesai masuk bagian Dashboard, lalu copy ACCOUNT SID dan AUTH TOKEN.</span></b></span></span></span></span></span></b></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span></span></span></span></b></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Masukkan Token & SID yang tadi ke dalam method / baris kode ruby anda.</span></b></span></span></span></span></span></b></div>
<div style="text-align: left;">
<br /></div>
<div dir="ltr" style="line-height: 1.74; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<div dir="ltr" style="line-height: 1.74; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #eeeeee;"><span style="color: #d73a49; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">require</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #032f62; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">'twilio-ruby'</span></span><span style="background-color: #f6f8fa; color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span></div>
<span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #f6f8fa; color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span><span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #eeeeee; color: #6a737d; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># simpan TOKEN/SID kamu disini</span></span><span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #eeeeee;"><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">account_sid </span><span style="color: #d73a49; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></span><span style="color: #032f62; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: #eeeeee;">'Copy ACCOUNT SID anda disini'</span></span></span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">auth_token </span><span style="color: #d73a49; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #032f62; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">'Copy AUTH TOKEN anda disini'</span></span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span></span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"><span style="color: #6a737d; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span><br />
<span style="background-color: #eeeeee;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: #6a737d; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"># untuk setup Twilio REST API</span></span><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">@client </span><span style="color: #d73a49; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="color: #005cc5; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Twilio</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">::</span><span style="color: #005cc5; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">REST</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">::</span><span style="color: #005cc5; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Client</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span><span style="color: #d73a49; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">new</span><span style="color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(account_sid, auth_token)</span></span></span></div>
<div dir="ltr" style="line-height: 1.74; margin-bottom: 0pt; margin-top: 0pt; text-align: left;">
<span style="font-family: "courier new" , "courier" , monospace;"><b><span style="font-size: small;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><b id="docs-internal-guid-25d7116e-7fff-0801-a9d1-b73b1256edf8" style="font-weight: normal;"><span style="background-color: #f6f8fa; color: #24292e; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">
</span></b></b></span></span></b></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="white-space: pre-wrap;"><b style="background-color: transparent;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="color: black; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="color: black; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline;">Note : Untuk penyimpanan <i>credentials </i>(ACCOUNT SID / AUTH TOKEN) sebaiknya gunakan figaro. Kalian dapat melihat contohnya disini <a href="http://www.belajarrubyonrails.com/2017/08/setup-smtp-dengan-gem-figaro.html" target="_blank">Setup SMTP dengan Gem Figaro</a> </span></span></span></span></span></span></span></b></span></span></span></span></span></span></span></b></span></span></span><span style="font-family: "arial" , "helvetica" , sans-serif; white-space: pre-wrap;"></span><br />
<span style="background-color: white; font-family: "arial" , "helvetica" , sans-serif; white-space: pre-wrap;"><br /></span>
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: white; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Setelah Anda setup ACCOUNT SID dan AUTH TOKEN, Anda harus memiliki nomor telepon yang digunakan untuk melakukan API call / sms. Cara mendapatkan nomor telepon tersebut, anda dapat kembali ke halaman Twilio dan akses <a href="https://www.twilio.com/console/phone-numbers/getting-started" target="_blank">Phone Numbers</a> dan klik button 'Get your first twilio number'</span></b></span></span></span></span></span></b></span></b></span></span></span></span></span></b></div>
</div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-aa12b7a4-7fff-1c8e-0c1e-7aa209711640" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></span><span style="background-color: transparent; color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></span></b></span></b></span></span></span></span></span></b></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></span></span></b><br />
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-6e314203-7fff-3a39-b16a-4fc3ca7b1580" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "lato"; font-size: 12pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><img height="195" src="https://lh4.googleusercontent.com/ZYVwthSg1PYQSghVj1tf2bNj3Ub2dmxjYI0SoDi20ySUruwJjMi-Hqnoe-4p8lVEIO-UYfDDJpDcg-_mc34smF5S6dFlxn6riaOUdNqcVx5RHCDiI4r_iaXdMCWsETRKbvb4iSHu" style="border: medium none; transform: rotate(0rad);" width="400" /></span></b><br />
</span></span></span></b></div>
<div style="text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Penggunaan API Untuk Telepon<br />
</span></span></span></b></div>
<script src="https://gist.github.com/wahyupuri14/8f910b3b6711cc84c602e96a0d325890.js"></script><br />
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Penggunaan API Untuk SMS / Pesan Text<br />
</span></span></span></b><script src="https://gist.github.com/wahyupuri14/29d8dbbc49e5e177b17d491fad615ec9.js"></script><br />
<div style="text-align: justify;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><b id="docs-internal-guid-1a877e4d-7fff-f545-7f93-7a8f40707203" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sekian tutorial singkat cara mensetup notifikasi SMS & panggilan telepon menggunakan Twilio di Ruby on Rails. Bila ada pertanyaan silahkan komentar dibawah. </span></b></span></span></span></span></span></b></span></b></span></span></span></span></span></b><b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;"><span style="color: black; vertical-align: baseline;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="color: black; vertical-align: baseline;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;"><span style="color: black; vertical-align: baseline;">Untuk full dokumentasi, Kalian bisa akses di <a href="https://www.twilio.com/docs/libraries/reference/twilio-ruby/index.html" target="_blank">The Twilio Ruby Helper Library </a></span></span></span></span></span></span></span></b></span></span></span></span></span></span></span></b></div>
<br />
<br />
<br />
<br />
<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-82111296883100207162018-09-28T16:57:00.001+07:002018-09-28T16:57:10.762+07:00CKeditor Pada Aplikasi Ruby on Rails Lanjutan - Plugins Youtube<span id="docs-internal-guid-977d530d-7fff-2ec8-a429-aaa550a141f6" style="font-weight: normal;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;">
</span></span><h3 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-977d530d-7fff-2ec8-a429-aaa550a141f6" style="font-weight: normal;"><div dir="ltr" style="background-color: white; line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "arial" , sans-serif;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">Sebelum menambahkan plugins youtube pada ckeditor, kalian bisa mengikuti tutorial pada halaman <a href="http://www.belajarrubyonrails.com/2014/02/installasi-ckeditor-pada-aplikasi-ruby.html" target="_blank">http://www.belajarrubyonrails.com/2014/02/installasi-ckeditor-pada-aplikasi-ruby.html</a></span></span></b></span></span></span></span></span></span><span id="docs-internal-guid-977d530d-7fff-2ec8-a429-aaa550a141f6" style="font-weight: normal;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial" , "arial" , sans-serif;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"> terlebih dahulu untuk menginstal ckeditor.</span></span></b></span></span></span></span></span></span></span></div>
</span></h3>
<br />
<span style="font-family: "arial" , "arial" , sans-serif;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">Langkah - langkah untuk menambahkan plugins youtube adalah sebagai berikut :</span></span></b></span></span></span><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1. </span></b></span><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-94281a2a-7fff-d162-df0b-1df5cfb1cd0a" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tambahkan require di bawah ini pada file </span><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">app/assets/javascripts/application.js</span></b></span></b></span></span></div>
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">//= require ckeditor/init</span></span></div>
<br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2. <span style="font-family: "arial";">Buatlah file dan tambahkan config dibawah ini pada :</span></span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><b id="docs-internal-guid-9d6d59e1-7fff-9a9d-14d4-59a3ec3c0745" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">app/assets/javascripts/ckeditor/config.js</span></b> </span></span></b></span></span><br />
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">CKEDITOR.editorConfig = Function (config) {</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> config.extraPlugins = ‘youtube’;</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">}</span></span></div>
<br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3. <span style="font-family: "arial";">Buatlah file dan tambahkan icon dibawah ini pada :</span></span></b></span></span><br />
<span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">app/assets/javascripts/ckeditor/plugins/youtube/images/icon.png</span></b></span><br />
<br />
<span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-d56c9bcb-7fff-bed9-32ed-a0ca232d6675" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><img src="https://lh6.googleusercontent.com/KwgWa4VOLq_i46NvGxBED9RyB6oa_hILPjksJ_B0ntsuYbb2Ehcz6zH_enf764K5Js6tfecWTRdDMburFO6I8eO9EdRMgWZpNbnu60QWhruT6PaFIx748Ha7M8q539m-jNffOSwG" style="border: medium none; transform: rotate(0rad);" /></span></b> </span></b></span><br />
<br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4. <span style="font-family: "arial";">Buatlah file dan tambahkan lang dibawah ini untuk bahasa :</span></span></b></span></span><br />
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">Untuk bahasa inggris tambahkan file :</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">app/assets/javascripts/ckeditor/plugins/youtube/lang/en.js</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">Code :</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">CKEDITOR.plugins.setLang('youtube', 'en', {</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> button : 'Embed Youtube Video',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> title : 'Embed Youtube Video',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtEmbed : 'Paste Embed Code Here',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtUrl : 'Paste Youtube Video URL',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtWidth : 'Width',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtHeight : 'Height',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkRelated : 'Show suggested videos at the video\'s end',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtStartAt : 'Start at (ss or mm:ss or hh:mm:ss)',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkPrivacy : 'Enable privacy-enhanced mode',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkOlderCode : 'Use old embed code',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noCode : 'You must input an embed code or URL',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidEmbed : 'The embed code you\'ve entered doesn\'t appear to be valid',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidUrl : 'The URL you\'ve entered doesn\'t appear to be valid',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> or : 'or',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noWidth : 'You must inform the width',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidWidth : 'Inform a valid width',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noHeight : 'You must inform the height',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidTime : 'Inform a valid start time'</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">});</span></span></div>
<br />
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;">Untuk bahasa jepang tambahkan file :</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><br />
</span></span> <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;">app/assets/javascripts/ckeditor/plugins/youtube/lang/ja.js</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><br />
</span></span> <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;">Code :</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><br />
</span></span> <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;">CKEDITOR.plugins.setLang('youtube', 'ja', {</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> button : 'Youtube動画埋め込み',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> title : 'Youtube動画埋め込み',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> txtEmbed : '埋め込みコードを貼り付けてください',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> txtUrl : 'URLを貼り付けてください',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> txtWidth : '幅',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> txtHeight : '高さ',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> chkRelated : '動画が終わったら関連動画を表示する',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> txtStartAt : 'Start at',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> chkPrivacy : 'プライバシー強化モードを有効にする',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> chkOlderCode : '以前の埋め込みコードを使用する',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> noCode : '埋め込みコードまたはURLを入力してください',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> invalidEmbed : '不適切な埋め込みコードが入力されました',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> invalidUrl : '不適切なURLが入力されました',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> or : 'または',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> noWidth : '幅を指定してください',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> invalidWidth : '幅指定に誤りがあります',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> noHeight : '高さを指定してください',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> invalidHeight : '高さ指定に誤りがあります',</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"> invalidTime : 'Inform a valid start time'</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;">});</span></span></div>
<br />
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">Untuk bahasa portugis tambahkan file :</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">app/assets/javascripts/ckeditor/plugins/youtube/lang/pt.js</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">Code :</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span> <span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">CKEDITOR.plugins.setLang('youtube', 'pt', {</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> button : 'Inserir Vídeo do Youtube',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> title : 'Inserir Vídeo do Youtube',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtEmbed : 'Cole aqui o código embed de um vídeo do Youtube',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtUrl : 'Cole aqui uma URL de um vídeo do Youtube',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtWidth : 'Largura',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtHeight : 'Altura',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkRelated : 'Mostrar vídeos sugeridos ao final do vídeo',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> txtStartAt : 'Iniciar em (ss ou mm:ss ou hh:mm:ss)',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkPrivacy : 'Ativar o modo de privacidade aprimorada',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> chkOlderCode : 'Usar código de incorporação antigo',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noCode : 'Você precisa informar um código embed ou uma URL',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidEmbed : 'O código informado não parece ser válido',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidUrl : 'A URL informada não parece ser válida',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> or : 'ou',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noWidth : 'Você deve informar a largura do vídeo',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidWidth : 'Informe uma largura válida',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> noHeight : 'Você deve informar a altura do vídeo',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidHeight : 'Informe uma altura válida',</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"> invalidTime : 'O tempo informado é inválido'</span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;">});</span></span></div>
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"></span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">5. Buatlah file dan tambahkan plugins dibawah ini pada :<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span></span></b></span></span></span></span></span></b></span></span></span></span><br />
<span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">app/assets/javascripts/ckeditor/plugins/youtube/plugins.js</span></b></span></span></span></b></span></span></span></span></span></b><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span></b></span></span></span></b></span></span></span></span></span></b></span></span></span></span><br />
<br />
<script src="https://gist.github.com/wahyupuri/1f9fda6ab4e0f4b0090a87f828a492d7.js"></script><br />
6. <span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">T</span><span style="font-family: "arial";">ambahkan ckeditor pada file assets </span></span></b></span></span><b id="docs-internal-guid-8554ddb7-7fff-5e63-ba0f-28152c0e9472" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "roboto"; font-size: 10.5pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><span style="font-size: small;"><b id="docs-internal-guid-9ec07395-7fff-688a-0161-5573800b79bf" style="font-weight: normal;"><span style="background-color: transparent; color: #505f79; font-family: "roboto"; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">config/initializers/assets.rb </span></b></span></span></span></b></span></span></span></span></span></b><br />
<div style="background-color: #; border: 1px solid #17202A; height: auto; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: #505f79;"><span style="font-size: small;"><span style="font-family: "roboto";">Rails.application.config.assets.precompile +=%w(ckeditor/* ) </span></span></span></span></b></span></span></div>
<br />
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">7. <span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">T</span><span style="font-family: "arial";">ampilan pada ckeditor </span></span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";"><b id="docs-internal-guid-3d99b575-7fff-c2cd-230e-4b4bbfbf083b" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><img height="171" src="https://lh4.googleusercontent.com/yCGMaglW938ZXi3-dDz_oxQMrQ-NoUpP8w5ByjG2lYR2aAUxzbGN7zSyzH0I2pUwOBmnnNJJImKpHeywSjQY4UBq-EPIQ7POpKNrsC5qiM84ij-CQyalCPW_uA_9mrHh8-ut4fYp" style="border: medium none; transform: rotate(0rad);" width="602" /></span></b> </span></span></b></span></span><br />
8. <span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">Pada saat icon 'youtube' </span><span style="font-family: "arial";">di click akan tampil seperti dibawah ini.</span></span></b></span></span><b id="docs-internal-guid-d5072960-7fff-0357-90e7-73db2a538dc5" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"> </span></b><br />
<b id="docs-internal-guid-d5072960-7fff-0357-90e7-73db2a538dc5" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><b id="docs-internal-guid-33d4c0e4-7fff-a672-7801-9518f1ab545d" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"><img height="329" src="https://lh5.googleusercontent.com/1NUCDFjWIY4y46YGjwWWm0b6a-nGbRbMpEo_zEp67xqsB7htcZsO9t6BIilpvdV_uF6mWEIXs3s6v7y3DdHnQSbCcMIsWJDvn_fZuSlEI1-MbXIso9ts6Bo1VqsUwJ4Y2r4Sfalr" style="border: medium none; transform: rotate(0rad);" width="514" /></span></b> </span></b><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">Untuk menampilkan video pada website kita, diperlukan URL video youtube dan paste pada column </span></span></b></span></span><span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">'Paste Youtube Video URL'. </span></span></b></span></span><br />
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b id="docs-internal-guid-19d884cc-7fff-fbd3-a361-cca2147dac71" style="font-weight: normal;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "arial";">Cari tahu lebih banyak tentang tutorial Ruby on Rails di <b><a href="http://www.belajarrubyonrails.com/" target="_blank">Belajar Ruby on Rails</a></b></span></span></b></span></span><br />
</span></b></span></span>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-10812969696674625992018-09-21T09:22:00.002+07:002018-09-21T09:22:45.912+07:00Membuat Datepicker Bootstrap dan Jquery <div style="margin-bottom: .0001pt; margin: 0in;">
<b>Membuat Datepicker</b><span style="font-size: 13.5pt;"><o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 11pt;">Datepicker adalah alat input yang digunakan untuk tanggal dengan bentuk box </span><span style="font-size: 13.5pt;"><o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 11pt;">dengan desain dalam bentuk kalender.</span><span style="font-size: 13.5pt;"><o:p></o:p></span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 11pt;">Membuat Datepicker ada beberapa cara :</span><br />
<span style="font-family: "arial" , sans-serif; font-size: 11pt; text-indent: -0.25in;">1.<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Datepicker menggunakan Jquery</span><br />
<span style="font-family: "arial" , sans-serif; font-size: 11pt; text-indent: -0.25in;">2.<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Datepicker Bootstrap</span></div>
<div style="margin: 0in 0in 0.0001pt;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<b>Cara Membuat Datepicker Menggunakan Jquery</b><br />
<b><span style="font-size: 11pt;"><br />
</span></b> <span style="font-size: 11pt; text-indent: -0.25in;">1.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Masukkan code dibawah ini didalam <head> sintak HTML.</span><br />
<div style="text-indent: -24px;">
<span style="font-size: 11pt;"> Code dibawah berfungsi untuk tampilan.</span><br />
<span style="font-size: 11pt;"><br />
</span></div>
</div>
<script src="https://gist.github.com/wahyupuri/dc32c64f64c72e1bae11ee2ebfb86631.js"></script>2. <span style="font-size: 14.6667px; text-indent: -24px;">Masukkan code dibawah ini didalam <head> sintak HTML.</span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"> Code dibawah berfungsi untuk perintah.</span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"> </span><br />
<script src="https://gist.github.com/wahyupuri/a9fa11ecdc16176d659fff12c7e350eb.js"></script><br />
Untuk poin 1 dan 2 hanya memanggil secara otomatis.<br />
Apabila koneksi internet tidak ada, Code tersebut tidak akan berfungsi.<br />
<br />
3. <span style="font-size: 14.6667px; text-indent: -24px;">Masukkan code dibawah ini didalam <head> sintak HTML.</span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"> </span><br />
<script src="https://gist.github.com/wahyupuri/850bb7915d188ec266e2cb15df89e06c.js"></script>4. Copy c<span style="font-size: 14.6667px; text-indent: -24px;">ode dibawah ini didalam <body> sintak HTML.</span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> <span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;"><p></span><span style="background-color: #eeeeee; color: #333333; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">Date: </span><span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;"><input </span><span style="background-color: #eeeeee; color: teal; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">type</span><span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #eeeeee; color: #dd1144; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">"text"</span><span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #eeeeee; color: teal; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">id</span><span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">=</span><span style="background-color: #eeeeee; color: #dd1144; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">"datepicker"</span><span style="background-color: #eeeeee; color: navy; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;">></p></span></span><br />
<span style="background-color: #eeeeee; color: navy; font-family: "arial"; font-size: 11.5pt; vertical-align: baseline; white-space: pre-wrap;"><br />
</span> Pada poin 3 did<span style="font-size: 14.6667px; text-indent: -24px;">alam script sudah dibuat ID dengan nama "datepicker", </span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"> maka pada tampilan di poin 4, ID tersebut kita panggil.</span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"><br />
</span> <span style="font-size: 14.6667px; text-indent: -24px;">5. Tampilannya akan terlihat seperti berikut.</span><br />
<span style="font-size: 14.6667px; text-indent: -24px;"> </span><img height="275" src="https://lh6.googleusercontent.com/LWZRSDACoNm5pzYnSN181T4CI8tJS5zR00wAdv4fDtEQAAjS0RV764nNSttTWYSzAdsQyhpDsIV3PAsHiTiOy5CziGOh1E4MjZv-har64xTfqQypQSWzbFPC9lB96fxYgT90YrGZ" style="border: none; font-family: Arial; font-size: 11pt; transform: rotate(0rad); white-space: pre-wrap;" width="343" /><br />
<br />
<b>Cara Membuat Datepicker Bootstrap</b><br />
<b><span style="font-size: 11pt;"><br />
</span></b> <span style="font-size: 11pt; text-indent: -0.25in;">1.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Masukkan code berikut pada gemfile.</span><br />
<span id="docs-internal-guid-eadfc119-7fff-deff-9efe-df5f1294bb65"><span style="background-color: white; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="font-size: 10pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;">gem 'bootstrap-datepicker-rails'</span></span></span><br />
<span style="background-color: white;"><span style="font-size: 10pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "courier new" , "courier" , monospace;"><br />
</span></span></span> <span style="background-color: white;">2. Lalu install gem tersebut pada dengan memasukkan code dibawah pada terminal. </span><br />
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"> </span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;">bundle install</span><br />
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><br />
</span> <span style="background-color: white;"><span style="font-size: 11pt; text-indent: -0.25in;">3.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Masukkan code dibawah pada file </span><span style="font-family: "arial"; font-size: 10pt; white-space: pre-wrap;">app/assets/stylesheets/application.css</span><span style="font-family: "courier new" , "courier" , monospace;"> </span></span><br />
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"> </span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">= require </span><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">bootstrap-datepicker</span></span><br />
<span style="background-color: white; font-size: 10pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="color: #22863a; font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "arial" , "helvetica" , sans-serif;"># kalau memakai bootstrap v3 pakai yang ini : </span></span><br />
<span style="background-color: white; color: #22863a; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: #eeeeee; font-family: "courier new" , "courier" , monospace;"><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">*</span><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">= require </span><span style="font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">bootstrap-datepicker3</span></span><br />
<span style="background-color: white;"><span style="color: #22863a; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;"><br />
</span></span> <span style="font-size: 11pt; text-indent: -0.25in;">4.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Masukkan code dibawah pada file </span><span id="docs-internal-guid-eed67db3-7fff-9b4d-26c1-99bccabecd83"><span style="background-color: white; color: #24292e; font-family: "arial"; font-size: 10pt; vertical-align: baseline; white-space: pre-wrap;">app/assets/javascripts/application.js</span></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><span style="background-color: #eeeeee; font-size: 10pt; white-space: pre-wrap;">//= require bootstrap-datepicker</span><span style="background-color: white;"> </span></span><br />
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><br />
</span> <span style="font-size: 11pt; text-indent: -0.25in;">5.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Masukkan code dibawah pada folder view didalam file yang akan memakai </span><br />
<span style="font-size: 11pt; text-indent: -0.25in;"> datepicker.</span><br />
<span style="font-size: 11pt; text-indent: -0.25in;"> </span><script src="https://gist.github.com/wahyupuri/ad96dc70bc49d3d635e4293368d20ef7.js"></script><br />
<span style="font-size: 11pt; text-indent: -0.25in;">6.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span style="font-size: 11pt; text-indent: -0.25in;">Tampilannya akan terlihat seperti berikut. </span><br />
<span style="font-size: 11pt; text-indent: -0.25in;"> </span><img height="293" src="https://lh4.googleusercontent.com/qD2akbqKWS2E0G7tjgThf60QIuGFKL9nLhWvSuLpta47fuyvlClj_l7evX-9h9ouOq3420WksHhSfwQjcMrnTEH-DoqjrxS33JlHmrQfISbWCa3_PkeFBSfqilS8omB_lDMY-z3p" style="border: none; color: #24292e; font-family: Arial; font-size: 10pt; transform: rotate(0rad); white-space: pre-wrap;" width="260" /><br />
<br />
<br />
<span style="font-size: 11pt; text-indent: -0.25in;"><br />
</span> <span style="font-size: 11pt; text-indent: -0.25in;"><br />
</span>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-60522225750871168032018-03-16T10:00:00.003+07:002021-11-15T10:17:29.038+07:00Seri Belajar Ruby on Rails Bagian 9 - Membuat Autentikasi dengan Devise<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah pada artikel sebelumya kita telah berhasil membuat validasi, relasi, dan menggunakan scope pada Rails, selanjutnya kita akan membuat fitur autentikasi dengan menggunakan Devise.</span></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><h3 style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Devise ? Untuk apa ?</span></h3><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Devise adalah salah satu gem pada Rails yang berfungsi untuk menangani masalah autentika dengan mudah. Devise memiliki kelebihan sebagai berikut.</span></div><div><ul><li style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Rack based</span></li>
<li style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Lengkap dengan Model, View, dan Cotroller</span></li>
<li style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Megizinkan suatu aplikasi untuk memiliki multiple model untuk melakukan autentikasi</span></li>
<li style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dibuat secara modularitas, sehingga memudahkan penggunaan gem ini dengan hanya menggunakan fitur/module yang dibutuhkan.</span></li>
</ul><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Gem ?. Apa itu gem ?. Pada Rails terdapat file konfigurasi yang digunakan untuk me-list gem mana saja yang diguakan. Gem ini seperti library atau perpustakaan yang biasanya dapat ditemukan di RubyGems. </span></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><h3 style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Cara Menambahkan Gem Devise pada Rails</span></h3></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Untuk menginstall devise ini dapat dilakukan dengan membuka <b>Gemfile </b>pada folder aplikasi. Misalnya, saya akan meggunakan devise untuk aplikasi <b>homework_management</b>. </span></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-KLxsNye_sUY/WtmhklI2BEI/AAAAAAAAA38/CIeOK85SGv0c_OYqNSPk98xjvlAkSXkngCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-20%2B15-14-30.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="467" data-original-width="402" height="320" src="https://3.bp.blogspot.com/-KLxsNye_sUY/WtmhklI2BEI/AAAAAAAAA38/CIeOK85SGv0c_OYqNSPk98xjvlAkSXkngCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-20%2B15-14-30.png" width="275" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Letak Gemfile pada Project</td></tr>
</tbody></table><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Tambahkan script berikut pada Gemfile.</span></div><div style="text-align: justify;"><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">gem 'devise'</span></pre><span style="font-family: "arial" , "helvetica" , sans-serif;">dan pada terminal pindah ke folder project yang digunakan, dan jalankan perintah berikut.</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">bundle install</span></pre><br />
<h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Mengatur Gem Devise pada Project</span></h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Jalankan perintah berikut pada terminal</span></div><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">rails generate devise:install</span>
</pre><div><span style="font-family: "arial" , "helvetica" , sans-serif;">Perintah tersebut akan menghasilkan file konfigurasi pada folder </span><b style="font-family: arial, helvetica, sans-serif;">config/initializers/devise.rb.</b></div><div><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span></div><div><div style="text-align: justify;"><h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Konfigurasi Devise</span></h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Pastikan bahwa konfigurasi default url options pada environtments files telah dibuat. Untuk mengatur default url options, buka file environtment pada folder <b>config/environtments/development.rb. </b></span></div><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end</span>
</pre><div><span style="font-family: "arial" , "helvetica" , sans-serif;">sebelum keyword </span><b><span style="font-family: "courier new" , "courier" , monospace;">end. </span></b></div></div><div><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Lalu buka file <b>application.html.erb </b>yang terletak pada folder <b>app/views/layouts/ </b>dan tambahkan baris berikut.</span><br />
<script src="https://gist.github.com/FatharaAzka/d7595fd0eaef200c331f3f5a7cd0ea0d.js"></script><span style="font-family: "arial" , "helvetica" , sans-serif;">tepat di atas </span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: justify; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;"><%= yield %></span></pre></div><script src="https://gist.github.com/FatharaAzka/69cccdf2829818a40b722f314947fdf7.js"></script><br />
<div><h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Konfigurasi User Model</span></h3></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Selajutnya kita akan membuat user model, dimana model ini berfungsi untuk menyimpan data-data user. Untuk pembuatan user model ini akan diintegrasikan dengan devise. Caranya adalah pada terminal jalankan perintah berikut.</span></div><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: justify; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">rails g devise user</span>
</pre><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Dengan menjalankan perintah tersebut, maka akan menghasilkan file <b>migrasi user</b> dan <b>model user</b>.</span></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-qx-nA4gk3H4/Wtm1oDkGcNI/AAAAAAAAA4M/3wLOzDmOz2EoPvIX95q03kNKDToO31legCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-20%2B16-40-36.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="187" data-original-width="645" height="92" src="https://2.bp.blogspot.com/-qx-nA4gk3H4/Wtm1oDkGcNI/AAAAAAAAA4M/3wLOzDmOz2EoPvIX95q03kNKDToO31legCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-20%2B16-40-36.png" width="320" /></a></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span><script src="https://gist.github.com/FatharaAzka/904af94d944a063794eca58cedae7228.js"></script><script src="https://gist.github.com/FatharaAzka/347c21a53e181bc11a4bb0282185e877.js"></script><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah itu jangan lupa untuk menjalankan perintah </span><br />
<pre style="-webkit-text-stroke-width: 0px; background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); color: black; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 20px; margin: 0px; orphans: 2; overflow: auto; padding: 0px; text-align: justify; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; widows: 2; width: 100%; word-spacing: 0px;"><span style="font-family: "courier new" , "courier" , monospace;">rake db:migrate</span>
</pre><span style="font-family: "arial" , "helvetica" , sans-serif;">untuk memproses file migrasi yang telah dibuat.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span><span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah melakukan generate devise maka pada file <b>config/routes.rb</b> akan mengalami perubahan. Perubahan tersebut adalah sebagai berikut.</span><script src="https://gist.github.com/FatharaAzka/af1f255584c9469d2bf06a21d5cca771.js"></script><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Coba jalankan perintah berikut pada terminal dan lihat url apa saja yang dihasilkan dari men-<i>generate </i>devise</span><br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 100%;"><span style="font-family: "courier new" , "courier" , monospace;">rails routes</span></pre><h3 style="text-align: start;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><div style="font-size: medium; font-weight: 400;"><div style="font-family: "times new roman";"><br />
</div><h3><span style="font-family: "arial" , "helvetica" , sans-serif;">Membuat User untuk Pertama Kali</span></h3></div></span></h3><h3 style="text-align: start;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;"></div><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;"><span style="font-family: "arial" , "helvetica" , sans-serif;"></span><span style="font-family: "arial" , "helvetica" , sans-serif;">Langkah selanjutnya, kita akan melakukan modifikasi pada view untuk menampilkan link login dan register ketika pertama kali membuka halaman </span><a href="http://localhost:3000/" style="font-family: arial, helvetica, sans-serif;">http://localhost:3000/</a>. </div><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Untuk membuat user, jika perintah tadi telah dilakukan dengan benar maka untuk mendaftarkan user tinggal buka url </span><a href="http://localhost:3000/users/sign_up" style="font-family: arial, helvetica, sans-serif;">http://localhost:3000/users/sign_up</a><span style="font-family: "arial" , "helvetica" , sans-serif;">. Halaman tersebut adalah halaman untuk membuat/registrasi user.</span></div><div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="font-family: "Times New Roman"; margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://1.bp.blogspot.com/-qOd3p-vd4oQ/Wt7lqw3ZCwI/AAAAAAAAA4c/1gos3MNgh2Q_I2xDBzqpDOtx1WfdHBRxQCLcBGAs/s1600/Screenshot%2Bfrom%2B2018-04-24%2B15-06-39.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="744" data-original-width="1313" height="181" src="https://1.bp.blogspot.com/-qOd3p-vd4oQ/Wt7lqw3ZCwI/AAAAAAAAA4c/1gos3MNgh2Q_I2xDBzqpDOtx1WfdHBRxQCLcBGAs/s320/Screenshot%2Bfrom%2B2018-04-24%2B15-06-39.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Halaman Registrasi User</td></tr>
</tbody></table></span></h3><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <br />
<h3 style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Modifikasi View</span></h3></div><br />
<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: medium; font-weight: 400;">Langkah selanjutnya, kita akan melakukan modifikasi pada view untuk menampilkan form login ketika pertama kali membuka halaman </span><a href="http://localhost:3000/" style="font-family: arial, helvetica, sans-serif; font-size: medium; font-weight: 400;">http://localhost:3000/</a><span style="font-family: "times new roman";">. </span><span style="font-family: "arial" , "helvetica" , sans-serif;"></span></div><h3 style="text-align: start;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><div style="font-family: "times new roman"; font-size: medium;"><div style="font-weight: 400;"><br />
</div><span style="font-family: "arial" , "helvetica" , sans-serif; font-weight: 400; text-align: justify;">Yang pertama akan kita lakukan adalah membuat navigasi yang akan muncul di setiap halaman. Navigasi ini untuk mengetahui informasi mengenai user </span><i style="font-family: arial, helvetica, sans-serif; font-weight: 400; text-align: justify;">login</i><span style="font-family: "arial" , "helvetica" , sans-serif; font-weight: 400; text-align: justify;"> dan link untuk </span><i style="font-family: arial, helvetica, sans-serif; font-weight: 400; text-align: justify;">logout. </i><span style="font-family: "arial" , "helvetica" , sans-serif; text-align: justify;"><span style="font-weight: 400;">Navigasi ini akan dibuat secara parsial. Perlu diingat, penamaan untuk file parsial harus diawali dengan tanda "</span>_<span style="font-weight: 400;">" (underscore).</span></span><br />
<div style="font-weight: 400;"><script src="https://gist.github.com/FatharaAzka/4daeab3b17417d1d7affeb03269ba976.js"></script></div></div><div style="font-size: medium;"><div style="text-align: justify;"><span style="font-weight: 400;">Lalu, pada bagian atas pada tipa view yang membutuhkan login kita tambahkan script berikut. Contohnya pada halaman tambah data homework.</span><script src="https://gist.github.com/FatharaAzka/ed133a40e9b832fb604e2673695b3042.js"></script><br />
<span style="font-weight: 400;"><br />
</span> <span style="font-weight: 400;"></span></div></div></span></h3><h3 style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Modifikasi Controller</span></h3><br />
<div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Selanjutnya, kita perlu melakukan modifikasi pada controller. Yang harus dilakukan adalah tambahkan script berikut pada <b>application_controller.rb</b> yang terletak pada folder <b>app/controllers.</b></span></div><script src="https://gist.github.com/FatharaAzka/fccfa5a8db27f7203dadc66d16e7e4b8.js"></script><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sekarang coba jalankan kembali project dengan cara menjalankan perintah berikut pada terminal. lalu lakukan <b>restart terhadap server terminal</b></span><br />
<div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Langkah-langkah di atas adalah salah satu cara untuk penggunaan gem devise pada project Rails. Gem "DEVISE" ini sangat berguna untuk menangani autentikasi di Rails dengan segala kemudahan yang diberikannya.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Sekian untuk pembelajaran kali ini mengenai penggunaan "DEVISE". Diharapkan tutorial ini menjadi salah satu pembelajaran yang mudah dimengerti bagi kita semua.</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></span></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-36968866037411054612018-03-05T17:30:00.001+07:002018-04-01T06:46:30.794+07:00Seri Belajar Ruby on Rails Bagian 2 - Cara install Ruby on Rails di Windows<br />
<h3 class="post-title entry-title" itemprop="name">
<span style="font-size: large;">Install Ruby on Rails di Windows dengan Rails Installer </span></h3>
<div class="post-title entry-title" itemprop="name">
<br />
<span style="font-weight: normal;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Untuk menggunakan framework Ruby on Rails versi 3 ke atas, seminimalnya inilah yang harus anda install:</span></span></div>
<ol>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Ruby </span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">RubyGems</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Rails Gem</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Bundler Gem</span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Devkit </span></li>
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Database ( Mysql / Sqlite / Sql Server / Postgree / dll )</span></li>
</ol>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Anda bisa install semua software tersebut secara terpisah dengan <i>download </i>installer nya satu persatu. Jika anda pertama kali install Ruby on Rails, Kami sarankan untuk menggunakan <i>package </i>dari
RailsInstaller karena sangat mudah dan praktis dan tentu saja gratis
:-) . Selain untuk windows, Rails Installer ini juga tersedia untuk OS
X.</span></span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Langkah - langkah installasinya sebagai berikut:</span></span></span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;">1. Download Source Rails Installer </span></b><br />
<br /><span style="font-family: "arial" , "helvetica" , sans-serif;">Download railsinstaller dari: <a href="http://railsinstaller.org/en" target="_blank">http://railsinstaller.org/en</a></span> </span> </span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-IzgpmGF_83g/Wp0SDgldyPI/AAAAAAAAArA/CIcHOqRC3_AjLs1OU5UNUwSt6ovza_lzgCLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1440" height="200" src="https://1.bp.blogspot.com/-IzgpmGF_83g/Wp0SDgldyPI/AAAAAAAAArA/CIcHOqRC3_AjLs1OU5UNUwSt6ovza_lzgCLcBGAs/s320/1.PNG" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: "arial" , "helvetica" , sans-serif;">2<i>. </i>Jalankan<i> </i>Rails Installer</span></b></div>
<b><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></b><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br /> </b>Klik 2x pada source Rails Installer yang sudah Anda download. </span><br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-xL3VToWqdz0/Wp0SaUPsM2I/AAAAAAAAArE/S3FMJx7hzD8jH9-Y1sLg7ZJwkszl2v2qQCLcBGAs/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="499" height="248" src="https://3.bp.blogspot.com/-xL3VToWqdz0/Wp0SaUPsM2I/AAAAAAAAArE/S3FMJx7hzD8jH9-Y1sLg7ZJwkszl2v2qQCLcBGAs/s320/2.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Baca Aggrement dengan seksama, kemudian jika Anda setuju, klik pilihan </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>I accept all of the lincenses</b> dan klik tombol <b>Next ></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><b><span style="font-family: "arial" , "helvetica" , sans-serif;">3. Atur <i>Path </i>untuk Rails Installer</span></b></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Rails Installer akan menanyakan lokasi penyimpanan</span><span style="font-family: "arial" , "helvetica" , sans-serif;">hasil installasi Rails Installer.</span></span><b><b><span style="font-family: "arial" , "helvetica" , sans-serif;"></span></b></b></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jika Anda sudah setuju untuk menyimpan hasil installasi sesuai</span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">dengan <i>default </i>pada windows diatas, maka klik tombil <b>Install, </b></span>
<br />
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">jika ingin merubah lokasinya silakan ubah</span><span style="font-family: "arial" , "helvetica" , sans-serif;"> pada text box yang disediakan.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-zKyagQP6t9I/Wp0U14MS4yI/AAAAAAAAArU/FP3S2dPfgaUDH7MWgvtzSGSIVG_b00JdwCLcBGAs/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="499" height="248" src="https://1.bp.blogspot.com/-zKyagQP6t9I/Wp0U14MS4yI/AAAAAAAAArU/FP3S2dPfgaUDH7MWgvtzSGSIVG_b00JdwCLcBGAs/s320/3.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><b><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></b> </b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-TafaX0pYR2Y/Wp0VcZYy2NI/AAAAAAAAArc/3cTXG88KbUE9TyheB7My1L7BsGuVrjy9gCLcBGAs/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="499" height="248" src="https://1.bp.blogspot.com/-TafaX0pYR2Y/Wp0VcZYy2NI/AAAAAAAAArc/3cTXG88KbUE9TyheB7My1L7BsGuVrjy9gCLcBGAs/s320/4.PNG" width="320" /></a></div>
<br />
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> Tunggu proses instalasi hingga selesai.</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><span style="font-family: "arial" , "helvetica" , sans-serif;">4. Testing Installasi</span></b><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah intallasi selesai, maka pastikan untuk cek hasil installasi anda benar dengan membuka <i>Command Prompt </i>dan menjalankan perintah: </span></span></span><br />
<br />
<div style="background: rgb(47, 47, 47) none repeat scroll 0% 0%; padding: 5px; width: 100%;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: white;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">ruby -v</span></span></span></span></span></span></span></span></div>
<br />
<div style="background: rgb(47, 47, 47) none repeat scroll 0% 0%; padding: 5px; width: 100%;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: white;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">rails -v</span></span></span></span></span></span></span></span></div>
<br />
<div style="background: rgb(47, 47, 47) none repeat scroll 0% 0%; padding: 5px; width: 100%;">
<span style="font-family: "courier new" , "courier" , monospace;"><span style="font-size: small;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"><span style="color: white;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">gem -v</span></span></span></span></span></span></span></span></div>
<br />
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="https://1.bp.blogspot.com/-ixmBvY5DzbE/Wp0aEKO7g8I/AAAAAAAAAr0/HtcsUTTITn4wjdPfeEpLf-GlKLkXCpFhwCEwYBhgL/s1600/6.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="979" height="167" src="https://1.bp.blogspot.com/-ixmBvY5DzbE/Wp0aEKO7g8I/AAAAAAAAAr0/HtcsUTTITn4wjdPfeEpLf-GlKLkXCpFhwCEwYBhgL/s320/6.PNG" width="320" /></a> </span></span></span></div>
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-bCYy-Yr7i0U/Wp0aD7_JnKI/AAAAAAAAAr8/BL02-56twywdpFB3ZMukvBtQAEKv_my8QCEwYBhgL/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="979" height="167" src="https://1.bp.blogspot.com/-bCYy-Yr7i0U/Wp0aD7_JnKI/AAAAAAAAAr8/BL02-56twywdpFB3ZMukvBtQAEKv_my8QCEwYBhgL/s320/7.PNG" width="320" /></a></div>
</div>
<div style="text-align: left;">
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-dMN6YUZoyVI/Wp0aD8tbwzI/AAAAAAAAAr8/UQEbr69lsTIvXCBK1KQEzy7PoSRVaxUgACEwYBhgL/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="979" height="167" src="https://3.bp.blogspot.com/-dMN6YUZoyVI/Wp0aD8tbwzI/AAAAAAAAAr8/UQEbr69lsTIvXCBK1KQEzy7PoSRVaxUgACEwYBhgL/s320/8.PNG" width="320" /></a></div>
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div style="text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;"> </span></span></span><i><span style="font-family: "arial" , "helvetica" , sans-serif;">Notes: </span></i></div>
<div style="text-align: center;">
<i><span style="font-family: "arial" , "helvetica" , sans-serif;">Versi Rails Installer yang kami gunakan mungkin berbeda dengan Anda, karena itu</span></i>
</div>
<div class="separator" style="clear: both; text-align: center;">
<i><span style="font-family: "arial" , "helvetica" , sans-serif;"> versi yang akan muncul di command prompt Anda mungkin berbeda.</span></i></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Jika hasil di cek installasi tidak ada error, maka sekarang Anda sudah bisa <a href="http://c-aio.com/" rel="nofollow" target="_blank">belajar ruby on rails</a> lebih mendalam dan dapat mencobanya langsung.</span></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Jika kamu mendapat error "<b>the system cannot find the path specified</b>" ikuti langkah - langkah berikut :</span></span><br />
<ol><a href="https://3.bp.blogspot.com/-5Df2hR92j4E/Wp4KQueouoI/AAAAAAAAAsk/hAfFvon2-IQB3MfmJd3jfek5oVZFnjEUQCLcBGAs/s1600/11.PNG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> </a>
<li><span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Cobalah buka pada folder/path dimana Rails telah terinstal. Pada tutorial proses instalasi dilakukan di <b>C:/RailsInstaller/Ruby</b></span><b>2.3.3</b>, buka folder tersebut. <br /><br /> Cari batch file bernama <b>rails</b> dan <b>bundle </b></span></span><br /><span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br /></b></span></span><div style="text-align: center;">
<span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="https://1.bp.blogspot.com/-vVFl4t_Lb68/Wp4IOlc3msI/AAAAAAAAAsM/Hh5O2T59CI46-ILrrxWuV-AfsiAMlsHlgCLcBGAs/s1600/9.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1440" height="200" src="https://1.bp.blogspot.com/-vVFl4t_Lb68/Wp4IOlc3msI/AAAAAAAAAsM/Hh5O2T59CI46-ILrrxWuV-AfsiAMlsHlgCLcBGAs/s320/9.PNG" width="320" /> </a></span></span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<i><span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">penunjukan file rails.bat </span></span></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-6WFeJr9BEPg/Wp4I8SXpDcI/AAAAAAAAAsU/pmSzlole_bQF9oSUmVXmnlQj31BfUCiQQCLcBGAs/s1600/10.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1440" height="200" src="https://2.bp.blogspot.com/-6WFeJr9BEPg/Wp4I8SXpDcI/AAAAAAAAAsU/pmSzlole_bQF9oSUmVXmnlQj31BfUCiQQCLcBGAs/s320/10.PNG" width="320" /></a></div>
<div style="text-align: center;">
<span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b> </b></span></span><i><span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;">penunjukan file bundle.bat </span></span></i></div>
</div>
<div style="text-align: left;">
<br /></div>
</li>
<li><span style="background-color: #fefdfa; text-align: justify;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Lalu rubah baris code <span style="color: #990000;">@"C:\Users\emachnic\GitRepos\railsinstaller-windows\stage\Ruby2.3.3\bin\ruby.exe"</span> menjadi <span style="color: #990000;">@"%~dp0ruby.exe"</span> seperti di bawah ini</span><span style="font-family: "arial" , "helvetica" , sans-serif;">.</span></span></span><br /><span style="font-family: "arial" , "helvetica" , sans-serif;">Pada file rails.bat</span><br /><pre style="border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="font-family: "arial";"><span style="color: #cc0000;">@ECHO</span> OFF
<span style="color: #cc0000;">IF NOT</span> "<span style="color: #073763;">%~f0</span>" <span style="color: red;">==</span> <span style="color: #7f6000;"><span style="color: black;">"</span><span style="color: #073763;">~f0</span><span style="color: black;">"</span></span> <span style="color: #cc0000;">GOTO <span style="color: black;">:WinNT</span></span>
<span style="color: #cc0000;">@</span>"<span style="color: #073763;">%~dp0</span><span style="color: #bf9000;"><span style="color: #073763;">ruby.exe</span>"
<span style="color: black;">"</span><span style="color: #3d85c6;">C:/Users/emachnic/GitRepos/railsinstaller-windows/stage/Ruby2.3.3/bin/rails</span><span style="color: black;">"</span> </span>
<span style="color: #073763;">%1 %2 %3 %4 %5 %6 %7 %8 %9</span>
<span style="color: #cc0000;">GOTO</span> :EOF
:WinNT
<span style="color: #cc0000;">@</span>"<span style="color: #073763;">%~dp0</span><span style="color: #bf9000;"><span style="color: #073763;">ruby.exe</span><span style="color: black;">" "</span></span><span style="color: #073763;">%~dpn0</span>" <span style="color: #134f5c;"><span style="color: #073763;">%* </span></span></span></pre>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Pada file bundle.bat</span></div>
<pre style="border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="font-family: "arial";"><span style="color: #cc0000;">@ECHO</span> OFF
<span style="color: #cc0000;">IF NOT</span> "<span style="color: #073763;">%~f0</span>" <span style="color: red;">==</span> <span style="color: #7f6000;"><span style="color: black;">"</span><span style="color: #073763;">~f0</span><span style="color: black;">"</span></span> <span style="color: #cc0000;">GOTO <span style="color: black;">:WinNT</span></span>
<span style="color: #cc0000;">@</span>"<span style="color: #073763;">%~dp0</span><span style="color: #bf9000;"><span style="color: #073763;">ruby.exe</span>"
<span style="color: black;">"</span><span style="color: #3d85c6;">C:/Users/emachnic/GitRepos/railsinstaller-windows/stage/Ruby2.3.3/bin/bundle</span><span style="color: black;">"</span> </span>
<span style="color: #073763;">%1 %2 %3 %4 %5 %6 %7 %8 %9</span>
<span style="color: #cc0000;">GOTO</span> :EOF
:WinNT
<span style="color: #cc0000;">@</span>"<span style="color: #073763;">%~dp0</span><span style="color: #bf9000;"><span style="color: #073763;">ruby.exe</span><span style="color: black;">" "</span></span><span style="color: #073763;">%~dpn0</span>" <span style="color: #134f5c;"><span style="color: #073763;">%* </span></span></span></pre>
</div>
</li>
</ol>
<div style="text-align: left;">
<ol start="3">
<li><span style="font-family: "arial" , "helvetica" , sans-serif;">Setelah langkah di atas dilakukan, lakukan pengecekan ulang dengan menjalankan perintah <b>ruby -v</b>, <b>rails -v,</b> dan <b>gem -v</b> pada <i>Command Prompt.</i></span></li>
</ol>
</div>
<span style="font-family: "arial" , "helvetica" , sans-serif; text-align: left;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><a href="mailto:fathara.annisa@c-aio.com">Fathara Annisa Azka</a> | C-aio Indonesia</span></div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-810712507486016259.post-84972365185297596182017-08-31T16:36:00.002+07:002018-03-03T21:33:55.049+07:00Cara Membuat Login Dengan Gem Devise<b>Apa itu devise?</b><br />
<b><br /></b>
<br />
Devise adalah gem service yang dibuat untuk membuat login logout suatu aplikasi menjadi lebih mudah.<br />
<br />
<br />
<b>Langkah - langkah implementasi</b><br />
<br />
1.Buat rails project baru dan generate database:<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails new devise</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rake db:create</span></pre>
<br />
2. Tambahkan gem devise pada gemfile<br />
<br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> </span></code><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;">gem 'devise'</span><span style="background-color: transparent;">
</span></span></pre>
<br />
<br />
3. Install devise<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ bundle install</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails generate devise:install</span></pre>
<br />
4. Buat devise model "user"<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails generate devise User</span></pre>
<br />
5. Run migration<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rake db:migrate</span></pre>
<br />
6. Generate view untuk login dan registrasi<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails generate devise:views users</span></pre>
<br />
7. Generate controller devise users<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails generate devise:controllers users</span></pre>
8. Konfigurasi routes untuk login dan registrasi<br />
<br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> #config/routes.rb
devise_for :users, controllers: { sessions: 'users/sessions' }
devise_scope :user do
get 'sign_in', to: 'devise/sessions#new'
get '/users/sign_out' => 'devise/sessions#destroy'
end
resources :homes
root to: 'homes#index'</span></code></pre>
<div style="text-align: justify;">
<br />
9. Generate controller home dan tambahkan code dibawah</div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails g controller homes</span></pre>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> #controllers/homes_controller.rb
class HomesController < ActionController::Base
before_action :authenticate_user!
def index
end
end</span></code></pre>
<br />
buat file homes pada folder views lalu tambahkan file <i>index.html.erb</i><br />
<i><br /></i>
<br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> #views/homes/index.html.erb
<h3>Hello World</h3>
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %></span></code></pre>
<br />
10.Jalankan server<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails s</span></pre>
11. Buka url<br />
http://localhost:3000/users/sign_up<br />
http://localhost:3000/users/sign_in<br />
<br />
kurang lebih hasilnya akan seperti ini:<br />
<br />
<div style="text-align: center;">
form sign up:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Fc6Y609bqv0/WafXx7YRY-I/AAAAAAAAApw/jCeJTBLia2IwxjgMcYUHsbxHiaA1IWsGACLcBGAs/s1600/sign_up%2Bdevise.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="275" data-original-width="373" height="235" src="https://2.bp.blogspot.com/-Fc6Y609bqv0/WafXx7YRY-I/AAAAAAAAApw/jCeJTBLia2IwxjgMcYUHsbxHiaA1IWsGACLcBGAs/s320/sign_up%2Bdevise.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
form login:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-BY3adkrTA1U/WafYI53eCII/AAAAAAAAAp0/qeeLtpr1sswP36p52SHYYHmKcBW3TTrPQCLcBGAs/s1600/login_devise.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="326" data-original-width="397" height="262" src="https://2.bp.blogspot.com/-BY3adkrTA1U/WafYI53eCII/AAAAAAAAAp0/qeeLtpr1sswP36p52SHYYHmKcBW3TTrPQCLcBGAs/s320/login_devise.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
untuk selebihnya mengenai gem devise bisa klik link dibawah ini:
<br />
<ul>
<li><a href="https://github.com/plataformatec/devise">dokumentasi devise</a></li>
</ul>
<div>
<br />
<br />
selamat mencoba & happy coding :)</div>
<div>
<a class="Xx" data-display="ersad@c-aio.com" data-sanitized="mailto:ersad@c-aio.com" dir="ltr" href="mailto:ersad@c-aio.com" rel="nofollow noreferrer" tabindex="-1" target="_blank">ersad@doterb.com</a> | Web Developer at <a href="http://doterb.com/">doterb solution</a><br />
<i>FA edited</i></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-32532782111269590812017-08-30T09:29:00.000+07:002018-03-03T21:33:28.697+07:00Setup SMTP Dengan Gem Figaro<b><br /></b>
<br />
<h2>
<b>Setup SMTP Dengan Gem Figaro</b></h2>
<b>Apa itu figaro?</b><br />
Figaro adalah gem pada ruby on rails yang digunakan untuk menyembunyikan nilai di environment dan membuat aplikasi lebih aman.<br />
<br />
<b>Seberapa penting figaro?</b><br />
Tentu sangat penting, dikarenakan banyak kasus mengupload password ke repository github secara public, contoh kasus:<a href="https://github.com/search?utf8=%E2%9C%93&q=remove+password+&type=Commits">commit remove password</a>.<br />
Agar aplikasi kita lebih aman dan tidak seperti kasus diatas alangkah baiknya untuk menggunakan gem figaro ini, agar file application.yml otomatis tidak akan terupload ke repository.<br />
<br />
<b><span style="font-size: large;">Install Figaro</span></b><br />
<b><br /></b>
<br />
<div>
1.Buat rails project baru</div>
<div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails new figaro</span></pre>
</div>
<div>
<br />
2.Lalu tambahkan gem figaro pada gemfile<br />
<br /></div>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> </span></code><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;">gem 'figaro'</span><span style="background-color: transparent;">
</span></span></pre>
<br />
<br />
3.Jalankan commend dibawah ini untuk install figaro<br />
<div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ bundle exec figaro install</span></pre>
</div>
<br />
4.Buka folder aplikasi & masukan kode dibawah ini pada file figaro/config/<b>application.yml</b><br />
<br />
Di file ini kita bisa setting smtp dll.<br />
Saya akan contohkan untuk setting smtp menggunakan figaro.<br />
<br />
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;">smtp_domain: gmail.com
smtp_authentication: plain
smtp_username: email anda
smtp_password: password email anda</span><span style="background-color: transparent;">
</span></span></pre>
<br />
5.Ketikan kode dibawah ini pada file figaro/environments/<b>development.rb</b><br />
<b><br /></b>
<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> </span></code><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;">config.action_mailer.smtp_settings = {
:address => ENV["smtp_address"],
:port => 587,
:domain => ENV["smtp_domain"],
:authentication => ENV["smtp_authentication"],
:enable_starttls_auto => true,
:user_name => ENV["smtp_username"],
:password => ENV["smtp_password"]'</span><span style="background-color: transparent;">
}</span></span></pre>
<br />
<br />
untuk selebihnya mengenai gem figaro bisa klik link dibawah ini:
<br />
<ul>
<li><a href="https://github.com/laserlemon/figaro">dokumentasi figaro</a></li>
</ul>
<div>
Selamat mencoba & happy coding :)</div>
<div>
<a class="Xx" data-display="ersad@c-aio.com" data-sanitized="mailto:ersad@c-aio.com" dir="ltr" href="mailto:ersad@c-aio.com" rel="nofollow noreferrer" tabindex="-1" target="_blank">ersad@doterb.com</a> | Web Developer at <a href="http://doterb.com/">doterb solution</a><br />
<div style="text-align: left;">
<i>FA edited</i></div>
</div>
Anonymousnoreply@blogger.com11tag:blogger.com,1999:blog-810712507486016259.post-69133617139316209762017-05-31T14:00:00.001+07:002018-03-03T21:47:42.526+07:00Menambahkan Chart ke Projek Rails dengan Canvasjs<div style="text-align: justify;">
Chart (grafik) adalah suatu objek graifk 2D atau 3D yang mempresentasikan suatu nilai atau hasil perhitungan ke dalam bentuk batang, kolom, garis, dan sebagainya. Chart biasanya digunakan untuk data dukungan ketika proses presentasi dan memberikan gambaran atau perkembangan dari suatu hasil perhitungan yang sudah ditetapkan sebelumnya, mencakup ke perkembangan dari masa lalu atau masa yang akan datang.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Buat Project Baru </h4>
<ol style="text-align: justify;">
<li>Membuat project baru<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails new Chart</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ cd Chart</span></pre>
</li>
<li><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ bundle install</span></pre>
</li>
</ol>
<h4 style="text-align: justify;">
Membuat CRUD untuk User</h4>
<ol style="text-align: justify;">
<li>Buat CRUD untuk User dengan menggunakan fungsi Scaffold<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails generate scaffold Siswa nama:string kelas:string skor_uts:integer skor_uas:integer rata_rata:float</span></pre>
</li>
<li>Buat database baru lalu migrate untuk generate table Siswa<br /><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rake db:create</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rake db:migrate</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails s </span></pre>
</li>
<li>Silahkan cek <a href="localhost:3000/siswas" rel="nofollow" target="_blank">localhost:3000/siswas</a>, untuk memastikan kalau aplikasi kita bisa dibuka</li>
<li>Sebelum membuat beberapa data silahkan tambahkan kode berikut di, views/siswas/_form.html.erb agar field rata-rata bisa terisi otomatis setelah skor UAS diinputkan</li>
<li><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: auto;"><code style="word-wrap: normal;"><script>
$(document).ready(function(){
$("#siswa_skor_uas").change(function(){
var_skor_uts = parseInt($("#siswa_skor_uts").val());
var_skor_uas = parseInt($("#siswa_skor_uas").val());
$("#siswa_rata_rata").val((var_skor_uts * 0.3) +( var_skor_uas * 0.7));
});
});
</script></code></pre>
</li>
<li>Buat beberapa data untuk nanti di implementasikan ke dalam Chart</li>
</ol>
<div style="text-align: justify;">
<h4 style="text-align: justify;">
Implementasi Chart Dengan Canvasjs</h4>
<ol style="text-align: justify;">
<li>Kita akan membuat chart pada halaman, views/siswas/show.html.erb</li>
<li>Pertama - tama buat file dengan nama "canvasjs.min.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini <a href="https://bitbucket.org/MRomadhan999/chart/src/9be820bf794113245a24cb9effeaffc2ce1d3db7/app/assets/javascripts/canvasjs.min.js?at=master&fileviewer=file-view-default" rel="nofollow" target="_blank">canvasjs.min.js</a></li>
<li>Lalu edit assets/javascripts/application.js, tambahkan kode berikut sebelum "//= require_tree ."<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: auto;"><code style="word-wrap: normal;">//= require canvasjs.min
//= require Chart
//= require_tree .</code></pre>
</li>
<li>Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut di baris paling bawah<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: auto;"><span style="font-size: 12px;"><div id="grafik_siswa" style="height:400px;width:50%;"></div>
<script>
$(function () {
var graph = {
title: {
text: "Grafik Nilai <%= @siswa.nama %>"
},
animationEnabled: true,
data: [
{
type: "splineArea",
dataPoints: [
{ y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
{ y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
{ y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
]
}
]
};
$("#grafik_siswa").CanvasJSChart(graph);
});
</script></span></pre>
</li>
<li>Berikut tampilan dari grafik yang muncul pada halaman show <div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/--dMWR9AstPY/WS5PngTz1xI/AAAAAAAAApI/InBHGEZN458KOWINdBZZvxZX61Kjl3PiwCEw/s1600/graphic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="223" src="https://2.bp.blogspot.com/--dMWR9AstPY/WS5PngTz1xI/AAAAAAAAApI/InBHGEZN458KOWINdBZZvxZX61Kjl3PiwCEw/s400/graphic.png" width="400" /></a></div>
</li>
</ol>
<div style="text-align: center;">
<h4 style="text-align: justify;">
Implementasi Chart Dengan Chartjs</h4>
<ol style="text-align: justify;">
<li>Kita akan membuat chart pada halaman, views/siswas/show.html.erb dengan menggunakan chartjs</li>
<li>Pertama - tama buat file dengan nama "Chart.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini <a href="https://bitbucket.org/MRomadhan999/chart/src/9be820bf794113245a24cb9effeaffc2ce1d3db7/app/assets/javascripts/Chart.js?at=master&fileviewer=file-view-default" rel="nofollow" target="_blank">Chart.js</a></li>
<li>Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut<pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; line-height: 20px; overflow: auto; padding: 0px; width: auto;"><span style="font-size: 12px;"><div id="grafik_siswa" style="height:400px;width:50%;"></div>
<br><br>
<div><canvas id="grafik_siswa2" style="height:500px;width:100%;"></canvas></div>
<script>
$(function () {
var graph = {
title: {
text: "Grafik Nilai <%= @siswa.nama %>"
},
animationEnabled: true,
data: [
{
type: "splineArea",
dataPoints: [
{ y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
{ y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
{ y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
]
}
]
};
$("#grafik_siswa").CanvasJSChart(graph);
});
$(function() {
var ctx = document.getElementById("grafik_siswa2");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["UAS", "UTS", "Rata-rata"],
datasets: [{
label: '# Nilai ',
data: [parseInt("<%= @siswa.skor_uts %>"), parseInt("<%= @siswa.skor_uas %>"), parseInt("<%= @siswa.rata_rata %>")],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
title: {
display: true,
text: 'Grafik Nilai <%= @siswa.nama %>',
fontSize: 24
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var ylabel = tooltipItems.yLabel;
return " # Nilai : " + ylabel;
}
}
}
}
});
});
</script></span></pre>
</li>
<li>Berikut tampilan dari grafik yang muncul pada halaman show <div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-uiYGUPj-ejc/WS5pLXpZWxI/AAAAAAAAApY/EJcU7eM3xYggrCnClRBJnL5MEsvCKsb-wCLcB/s1600/graphic2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="223" src="https://3.bp.blogspot.com/-uiYGUPj-ejc/WS5pLXpZWxI/AAAAAAAAApY/EJcU7eM3xYggrCnClRBJnL5MEsvCKsb-wCLcB/s400/graphic2.png" width="400" /></a></div>
</li>
</ol>
<div>
<br /></div>
<div style="text-align: left;">
Untuk dokumentasi Chartjs : <a href="http://www.chartjs.org/docs/latest/" target="_blank">Chartjs</a><br />
My project source code <a href="https://bitbucket.org/MRomadhan999/chart" target="_blank">Chart</a><br />
<br />
Happy Coding! :)<br />
<br />
<a class="Xx" data-display="dicky.trifadillah@c-aio.com" data-sanitized="mailto:dicky.trifadillah@c-aio.com" dir="ltr" href="mailto:dicky.trifadillah@c-aio.com" rel="nofollow noreferrer" tabindex="-1" target="_blank">muhammad.romadhan@doterb.com</a> | Developer at <a href="http://doterb.com/">Doterb Solution</a></div>
</div>
</div>
Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-810712507486016259.post-50765502301817383362017-05-30T15:03:00.000+07:002018-03-03T21:45:15.849+07:00Cara Penggunaan Memcached pada Aplikasi Rails<h2>
<span style="background-color: white; color: #333333; font-size: 16px;"><span style="font-family: inherit;">Apa itu Memcached ? </span></span></h2>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; font-size: 16px;"><span style="font-family: inherit;">Memcached adalah sebuah technologi yang digunakan sebagai suatu sistem penyimpanan dan pendistribusian data didalam memory server (RAM). Contoh website yang memakai memcached adalah detik.com. Search enginenya yg sangat cepat itu di code dengan memcached. Cara kerja memcached sangatlah simple karena fungsinya hanya cache server dan mengurangi load ke database server dan data yang di simpan oleh memcached disimpan di memory sehingga akses kedata tersebut akan jauh lebih cepat daripada akses ke database server.</span></span></div>
<h2>
<span style="font-family: inherit;">Install Memcached di Ubuntu</span></h2>
<div>
<span style="font-family: inherit;">Update Package</span></div>
<div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ sudo apt-get update</span></pre>
</div>
<span style="background-color: white; color: #212121; font-family: inherit; font-size: 16px; white-space: pre-wrap;">Kemudian menginstal Memcached dan paket terkait</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ sudo apt-get install memcached</span></pre>
<h2>
<span style="font-family: inherit;">Configuration of the Memcached Installation</span></h2>
<div>
<span style="font-family: inherit;">Gunakan perintah berikut untuk melihat informasi mengenai perintah memcached:</span></div>
<div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ memcached -h</span></pre>
</div>
<span style="font-family: inherit;">File konfigurasi default dapat ditemukan di:</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ vi /etc/memcached.conf</span></pre>
<span style="font-family: inherit;">Saat start, Memcached akan start pada port <b>11211</b> secara default sesuai dengan file konfigurasi default. Untuk mengganti port, cukup ubah nomor di file konfigurasi. Jika singin menjalankan Memcached pada port <b>1337</b>, dengan memori <b>4GB</b>, dan memungkinkan maksimal <b>2.000</b> koneksi, Ubahlah sesuai code berikut:</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">-p 1337
-m 4096
-c 2000 </span></pre>
<span style="font-family: inherit;">Keluar dan simpan file konfigurasi, lalu restart Memcached</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ sudo service memcached restart</span></pre>
<h2>
<span style="font-family: inherit;">
Implementasi Pada ROR</span></h2>
<div>
<span style="font-family: inherit;">Mulai dari awal buat project baru</span></div>
<div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails new memcached_coba -d postgresql</span></pre>
</div>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ cd memcached_coba</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rails g scaffold post title:string description:text</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rake db:create</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">$ rake db:migrate</span></pre>
<span style="font-family: inherit;">Mulai setup memcache</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Tambahkan gem 'dalli' pada file Gemfile lalu bundle install</span><br />
<span style="font-family: inherit;"><br /></span>
Edit File <b><i>config/environments/development.rb</i></b> tambahkan atau rubah:<br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> config.cache_store = :dalli_store</span></pre>
<span style="font-family: inherit;">Buat file '<b><i>memcached.rb</i>'</b> pada folder <i><b>config/initializers/memcached.rb</b></i> isi file seperti berikut:</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;">CACHE = Dalli::Client.new('127.0.0.1', { :namespace => 'memcached_coba', :expires_in => 3600, :socket_timeout => 3, :compress => true })</span></pre>
<span style="font-family: inherit;">Dasar Penggunaan memcached</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"># Menyimpan memcached</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> CACHE.set(key, value)</span></pre>
<span style="font-family: inherit;"># Mengatur waktu expire</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> CACHE.set(key, value, time_expire)</span></pre>
<span style="font-family: inherit;"># Menggunakan memcached</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> CACHE.get(key, value)</span></pre>
<span style="font-family: inherit;"> # Menghapus memcached</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> CACHE.delete(key)</span></pre>
<span style="font-family: inherit;"># Menghapus semua memcached</span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> CACHE.flush_all</span></pre>
<span style="font-family: inherit;">Berikut adalah sreenshoot hasil percobaan saya di rails console:</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-qTKKZrvW-Qc/WS0c_DvdKaI/AAAAAAAAAoc/oWFa4rNdb4E9zi5bWZgmAo36Uss7rQRYQCLcB/s1600/cache.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="768" data-original-width="1366" height="221" src="https://2.bp.blogspot.com/-qTKKZrvW-Qc/WS0c_DvdKaI/AAAAAAAAAoc/oWFa4rNdb4E9zi5bWZgmAo36Uss7rQRYQCLcB/s400/cache.png" width="400" /></span></a></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Selanjutnya kita akan mencoba menyimpan data post menggunakan memcached</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Sebelum menggunakan memcached buatlah data post terlebih dahulu <b>http://localhost:3000/posts/</b></span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Mari kita lihat log server <b><i>sebelum</i></b> penggunaan memcached berikut screenshootnya</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-CvBz2pfBiSE/WS0ikI8n_eI/AAAAAAAAAos/Ulgw5sUpWEgIE5wliYI1lSZh363Vc1RLwCLcB/s1600/no_cache.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="768" data-original-width="1366" height="222" src="https://3.bp.blogspot.com/-CvBz2pfBiSE/WS0ikI8n_eI/AAAAAAAAAos/Ulgw5sUpWEgIE5wliYI1lSZh363Vc1RLwCLcB/s400/no_cache.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;">Gambar Sebelum menggunakan memcached</span></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Sekarang kita pasang memcached pada detil posts</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Ubah code method set_post pada file <b>app/controllers/posts_controller.rb</b></span><br />
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8; font-family: inherit;"> def set_post
@post = CACHE.get("post-#{params[:id]}")
if @post.nil?
@post = Post.find(params[:id])
CACHE.set("post-#{params[:id]}", @post)
end
end</span></pre>
<span style="font-family: inherit;">Mari kita lihat log server s<b><i>etelah</i></b> penggunaan memcached berikut screenshootnya</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-T4u7moXrgu4/WS0lGE2c7PI/AAAAAAAAAo4/GtwWzu-HvmEWKwIfOjhe2KmMt0uVd4atACLcB/s1600/after_cahce.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="768" data-original-width="1366" height="223" src="https://4.bp.blogspot.com/-T4u7moXrgu4/WS0lGE2c7PI/AAAAAAAAAo4/GtwWzu-HvmEWKwIfOjhe2KmMt0uVd4atACLcB/s400/after_cahce.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit;">Gambar setelah menggunakan memcached</span></div>
<span style="font-family: inherit;"><br /></span>
<br />
<div style="text-align: left;">
<span style="font-family: inherit;">Dari kedua gambar diatas kita bisa lihat perbedaanya bila menggunakan <span style="text-align: center;">memcached saat pergi ke halaman detil post untuk kedua kalinya server tidak meload ke database terbukti dengan tidak adanya baris info load '</span><i>Post Load (2.4ms) SELECT "posts".* FROM "posts" </i><span style="text-align: center;">'</span></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; text-align: center;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><span style="text-align: center;">Dengan memanfaatkan </span>memcached kita bisa membuat web kita menjadi lebih cepat . Sekian dulu postingan kali ini bila ada yang bertanya atau menambahkan yang kurang silahkan comment dibawah.</span></div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-810712507486016259.post-21388382941609159272017-03-22T15:28:00.000+07:002018-03-03T21:45:41.414+07:00Cara Export PDF di Aplikasi Rails<div style="text-align: justify;">
Pada post kali ini saya akan membahas dasar-dasar penggunaan gem prawn untuk Ruby on Rails.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Prawn adalah sebuah gem untuk Ruby on Rails yang digunakan untuk memudahkan kita membuat / generate file PDF.<br />
<br /></div>
<ol>
<li style="text-align: justify;">Pertama-tama buat project baru menggunakan PostgreSQL <br /><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails new namaproject -d postgresql</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ cd namaproject</span></pre>
</li>
<li style="text-align: justify;">Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya<br /><br /><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> </span></code><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;">gem 'prawn', :git => 'git://github.com/prawnpdf/prawn.git'
gem 'prawn_rails'
gem 'prawn-table'</span><span style="background-color: transparent;">
</span></span></pre>
</li>
<br />
<li style="text-align: justify;"> <code style="color: black; word-wrap: normal;"></code>Lalu ketik kode di bawah ini pada terminal<br /><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ bundle install</span></pre>
</li>
<li style="text-align: justify;">Setelah itu kita buat CRUD sebagai contoh table yang akan di export menjadi file PDF<br /><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails generate model Product name:string category:string quantity:integer</span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rake db:create </span></pre>
<pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: "arial"; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><span style="color: #f8f8f8;">$ rake db:migrate </span></pre>
</li>
<li>Buat root untuk show-nya, buka routes.rb (config/routes.rb)
</li>
<li><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: 12px; line-height: 20px;">Rails.application.routes.draw do
resources :products do
member do
get 'print'
get 'print_all'
end
end
root :to => "products#index"
end</span></pre>
</li>
<li>Lanjut buka controller products (app/controllers/products_controller.rb) tambahkan:<br /><br /><pre style="background: rgb(240, 240, 240) none repeat scroll 0% 0%; border: 1px dashed rgb(204, 204, 204); color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; word-wrap: normal;"><span class="pln"> class ProductsController < ApplicationController
def print_all
@products = Product.all
render 'print'
end
end</span></code></pre>
</li>
<br />
<li>Pada text editor anda cari file (app/views/products) dan tambahkan file <b>print_all.pdf.prawn </b></li>
<br />
<li>Cari file (app/views/products/print_all.pdf.prawn) dan tambahkan:<br /><br /><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><span style="font-size: 12px; line-height: 20px;"><code style="word-wrap: normal;"></code>prawn_document(:margin => 15, :page_size => [612, 936]) do |pdf|
pdf.move_down (20)
pdf.text "LIST PRODUK", :size => 15, :style => :bold, align: :center
pdf.move_down(10)
pdf.stroke_horizontal_line(2, pdf.bounds.width)
pdf.move_down(20)
products = [ ]
products << [
{:content => "Nama Barang" , :align => :center, :background_color => "000000", :text_color => "ffffff" },
{:content => "Kategori", :align => :center, :background_color => "000000", :text_color => "ffffff" },
{:content => "Stock Barang", :align => :center, :background_color => "000000", :text_color => "ffffff" },
]
@products.each do |product|
products << [
{:content => "#{product.name}", :align => :center},
{:content => "#{product.category}", :align => :center },
{:content => "#{product.quantity}", :align => :center },
]
end
pdf.table products, :cell_style => { :border_style => :grid}, :position => :left
end
</span></pre>
<span style="font-family: monospace;"><span style="font-size: 12px; line-height: 20px; white-space: pre;"><code style="word-wrap: normal;">
</code></span></span></li>
<li style="text-align: justify;">Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya<br /><pre style="background: none 0% 0% repeat scroll rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); height: auto; overflow: auto; padding: 0px; width: 99%;"><code style="color: black; font-family: arial; font-size: 12px; line-height: 20px; word-wrap: normal;"><span class="pln"> </span></code><span style="font-size: 12px; line-height: 20px;"><span style="background-color: transparent;"><%= link_to 'New Product', new_product_path %>
<%= link_to "Print", print_all_product_path(@products, format: "pdf") %></span><span style="background-color: transparent;">
</span></span></pre>
</li>
<br />
<li><span style="text-align: justify;">Jalankan server</span><br style="text-align: justify;" /><pre style="background-color: #444444; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: arial; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; text-align: justify; word-wrap: normal;"><span style="color: #f8f8f8;">$ rails s</span></pre>
</li>
</ol>
<br />
<br />
kurang lebih seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-XaWREy0nlGc/WNI0blnHHRI/AAAAAAAAAoE/LCOmM8EfFT4OcBJXTvql0LPY8HgyuidMQCLcB/s1600/product_tutor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://2.bp.blogspot.com/-XaWREy0nlGc/WNI0blnHHRI/AAAAAAAAAoE/LCOmM8EfFT4OcBJXTvql0LPY8HgyuidMQCLcB/s400/product_tutor.png" width="400" /></a></div>
<br />
klik tombol print:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-1ZQgWucvLcE/WNIxz1bUF4I/AAAAAAAAAn8/RddXktvHFCEomU3BcXgZH9h3INV60QvpwCEw/s1600/pdf_product.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://2.bp.blogspot.com/-1ZQgWucvLcE/WNIxz1bUF4I/AAAAAAAAAn8/RddXktvHFCEomU3BcXgZH9h3INV60QvpwCEw/s400/pdf_product.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Untuk lebih jelasnya silahkan baca dokumentasi di:<br />
<br />
<ul>
<li><a href="http://prawnpdf.org/api-docs/2.0/Prawn/Document.html">Prawn Documentation</a></li>
</ul>
<br />
Sekian post kali ini tentang tutorial print pdf menggunakan gem prawn pada Ruby on Rails, nantikan postingan lain yang lebih menarik lagi, stay on <a href="http://belajarrubyonrails.com/">belajarrubyonrails.com</a><br />
<br />
Bye<br />
<br />
<div class="tL8wMe xAWnQc" dir="ltr" id=":3z.co" style="text-align: left;">
<a class="Xx" data-display="dicky.trifadillah@c-aio.com" data-sanitized="mailto:dicky.trifadillah@c-aio.com" dir="ltr" href="mailto:dicky.trifadillah@c-aio.com" rel="nofollow noreferrer" tabindex="-1" target="_blank">ersad@doterb.com</a> | Developer at <a href="http://doterb.com/">doterb solution</a></div>
Anonymousnoreply@blogger.com0