Rabu, 06 Maret 2019

Seri Belajar Ruby on Rails Bagian 12 - Membuat Dropdown List Dinamis menggunakan Ajax

Hallo !! Kembali lagi di Seri Belajar Ruby on Rails. Pada seri kali ini kita akan mempelajari pengimplementasian pembuatan dropdown list dinamis menggunakan Ajax. Dalam seri ini kita akan membuat dua buah dropdown list yang saling berelasi (dependent), dimana list yang ada pada dropdown list kedua akan berubah berdasarkan value yang telah dipilih di dropdown pertama. 

Di dalam seri ini kita masih akan melanjutkan project yang telah kita buat di Seri Belajar Ruby on Rails Bagian 11. Jadi, untuk kalian yang sudah tidak menyimpan project Homework Management silahkan download contoh aplikasi di link berikut [Download]

Sebelum memulai, pastikan kembali project Homework Management yang telah dibuat berjalan dengan baik. Jika sudah pasti, let’s begin !

Membuat CRUD sub_category


Seperti biasa, kita buka terminal dan kita jalankan code berikut:
$ rails g scaffold sub_category name:string category_id:integer
$ rake db:migrate
Dengan menjalankan code tersebut, kita telah membuat CRUD untuk sub_category, dan melakukan migrasi ke database.

Langkah berikutnya kita tambahkan validasi dan relasi di model sub_category :
Sesudah menambahkan validasi dan relasi di model sub_category, kita perlu menambahkan relasi juga di model category :
Setelah menambahkan relasi di model category, kita tambahkan script berikut pada controller sub_categories_controller :
  1. Tambahkan method ini pada bagian atas sub_categories_controller :
  2. Tambahkan method berikut pada bagian private sub_categories_controller :

Modifikasi Views sub_category


Kita ubah terlebih dahulu file app/views/sub_categories/_form.html.erb menjadi :
Kita ubah juga file app/views/sub_categories/show.html.erb menjadi :
Dan yang paling penting, kita ubah file app/views/sub_categories/index.html.erb menjadi :
Dengan mengubah ketiga file tersebut, kita lanjutkan dengan mencoba mengisi data sub_category. Jalankan code berikut:
$ rails s
Buka url http://localhost:3000/sub_categories/new di browser, lalu kita coba membuat satu data baru di sub_category. Kita isikan "Beginner 1" pada kolom name dan pilih "Bahasa Inggris" sebagai category nya. Klik create sub category untuk menyimpan.

Halaman Show Sub_Category
Jika berhasil menyimpan data, maka browser anda akan menampilkan :

Halaman Show Sub_Category

Menambahkan data sub_category


Agar pengimplementasian pembuatan dropdown list ini lebih dapat dipahami, kita perlu menambahkan banyak data di sub_category. Tambahkan data sub_category berikut berdasarkan category masing-masing :
Data Sub_Category

Setelah selesai menambahkan data-data yang ada pada gambar, kita pun dapat menambahkan data sub_category lebih banyak lagi, sesuai dengan keinginan kita.

Modifikasi CRUD Homework


Sebelum mengubah script yang ada pada CRUD homework, kita terlebih dahulu menambahkan atribut sub_category_id kedalam struktur homework dengan cara menjalankan code berikut di terminal.
$ rails g migration AddSubCategoryIdToHomework
Buka file migration tersebut yang ada pada folder db/migrate,dan tambahkan script berikut :
Lakukan migrasi dengan menjalankan code berikut di terminal :
$ rake db:migrate
Kita buat relasi baru di model homework, dengan menambahkan script berikut :
Selanjutnya kita ubah controller homeworks_controller menjadi seperti berikut :
Lalu kita lanjutkan dengan mengubah script app/views/homeworks/index.html.erb menjadi :
Dan kita ubah juga script yang ada pada app/views/homeworks/show.html.erb menjadi :
Setelah mengubah index dan show pada homework. Maka kita teruskan dengan mengubah script yang ada pada app/views/homeworks/_form.html.erb menjadi :
Dengan menjalankan http://localhost:3000/homeworks/new 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.

Form Homework sebelum menggunakan Ajax

Menggunakan script Ajax


Untuk menggunakan script ajax dalam rails, kita harus mengatur gemfile kita terlebih dahulu. Kita tambahkan script berikut kedalam file gemfile :
gem 'jquery-rails'
Selanjutnya kita lakukan proses bundle di project kita.dengan menjalankan perintah berikut di terminal :
bundle
Langkah selanjutnya, kita akan menambahkan file javascript di project kita, akan tetapi sebelum kita membuat file tersebut, kita harus cek terlebih dahulu file app/assets/javascripts/application.js. Cek apakah script berikut ada di dalam file application.js :
//= require jquery
//= require jquery_ujs
Kedua code tersebut sangat diperlukan dalam penggunaan script-script javascript (ajax) dalam rails. jadi jika tidak ditemukan code tersebut didalam file application.js, tambahkan code tersebut.

Note: Jika di dalam file application.js tersebut terdapat code "//= require_tree .", pastikan kedua code diatas disimpan / ditambahkan sebelum code "//= require_tree ."

Setelah mengubah application.js kita buat file baru di folder app/assets/javascripts/ dengan nama "homeworks.js", dan kita simpan script berikut :
File javascript tersebut nantinya akan menjalankan proses dalam bentuk ajax dan akan tereksekusi ketika kita akan membuat data homework baru ataupun ketika mengubah data homework.

Selanjutnya kita modifikasi kembali controller homeworks_controller dengan ketentuan berikut :
  1. Tambahkan script berikut ini :
  2. Cari method set_sub_categories pada bagian private :Ubah method tersebut menjadi seperti berikut :
Kita lanjutkan dengan memodifikasi file app/views/homeworks/show.html.erb menjadi seperti berikut :
Dan sebagai tahap terakhir, kita lakukan mofidikasi script pada config/routes.rb dengan mengubahnya menjadi :
Jalankan kembali rails server anda :
$ rails s
Lalu akses http://localhost:3000/homeworks/new pada browser, dan dapat kita lihat di tampilan form, list yang ada pada dropdown sub_category secara otomatis mengikuti nilai yang ada pada dropdown list category.

Form Homework setelah menggunakan Ajax

so, congratulations !! anda telah berhasil membuat dropdown list dinamis menggunakan ajax.