Seri Belajar Ruby on Rails Bagian 12 - Menambahkan Sub Category pada category

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 :

	class SubCategory < ApplicationRecord
	validates :name, presence: true, length: {minimum: 4}
	has_many :homeworks
	belongs_to :category
	end

view raw sub_category.rb hosted with ❤ by GitHub

Sesudah menambahkan validasi dan relasi di model sub_category, kita perlu menambahkan relasi juga di model category :

has_many :sub_categories

view raw category.rb hosted with ❤ by GitHub

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 :

   before_action :set_categories, only: [:new, :edit, :update, :create]

   view raw sub_categories_controller.rb hosted with ❤ by GitHub
2. Tambahkan method berikut pada bagian private sub_categories_controller :

   	def set_categories
   	@category = Category.all
   	end

   view raw sub_categories_controller.rb hosted with ❤ by GitHub

Modifikasi Views sub_category

Kita ubah terlebih dahulu file app/views/sub_categories/_form.html.erb menjadi :

	<%= form_with(model: sub_category, local: true) do |form| %>
	<% if sub_category.errors.any? %>
	<div id="error_explanation">
	<h2><%= pluralize(sub_category.errors.count, "error") %> prohibited this sub_category from being saved:</h2>
	<ul>
	<% sub_category.errors.full_messages.each do |message| %>
	<li><%= message %></li>
	<% end %>
	</ul>
	</div>
	<% end %>
	<div class="field">
	<%= form.label :name %>
	<%= form.text_field :name, id: :sub_category_name %>
	</div>
	<div class="field">
	<%= form.label :category_id %>
	<% if @sub_category.category.present? %>
	<%= select_tag 'sub_category[category_id]', options_for_select(@category.collect { |c| [c.name, c.id] }, {:selected => @sub_category.category.id}) %>
	<% else %>
	<%= select_tag 'sub_category[category_id]', options_for_select(@category.collect { |c| [c.name, c.id] }) %>
	<% end %>
	</div>
	<div class="actions">
	<%= form.submit %>
	</div>
	<% end %>

view raw _form.html.erb hosted with ❤ by GitHub

Kita ubah juga file app/views/sub_categories/show.html.erb menjadi :

	<p id="notice"><%= notice %></p>
	<p>
	<strong>Name:</strong>
	<%= @sub_category.name %>
	</p>
	<p>
	<strong>Category:</strong>
	<%= @sub_category.category.name %>
	</p>
	<%= link_to 'Edit', edit_sub_category_path(@sub_category) %> |
	<%= link_to 'Back', sub_categories_path %>

view raw show.html.erb hosted with ❤ by GitHub

Dan yang paling penting, kita ubah file app/views/sub_categories/index.html.erb menjadi :

	<p id="notice"><%= notice %></p>
	<h1>Sub Categories</h1>
	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Category</th>
	<th colspan="3"></th>
	</tr>
	</thead>
	<tbody>
	<% @sub_categories.each do |sub_category| %>
	<tr>
	<td><%= sub_category.name %></td>
	<td><%= sub_category.category.name %></td>
	<td><%= link_to 'Show', sub_category %></td>
	<td><%= link_to 'Edit', edit_sub_category_path(sub_category) %></td>
	<td><%= link_to 'Destroy', sub_category, method: :delete, data: { confirm: 'Are you sure?' } %></td>
	</tr>
	<% end %>
	</tbody>
	</table>
	<br>
	<%= link_to 'New Sub Category', new_sub_category_path %>

view raw index.html.erb hosted with ❤ by GitHub

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 :

	class AddSubCategoryIdToHomework < ActiveRecord::Migration[5.1]
	def change
	add_column :homeworks, :sub_category_id, :integer
	end
	end

view raw add_sub_category_id_to_homework.rb hosted with ❤ by GitHub

Lakukan migrasi dengan menjalankan code berikut di terminal :

$ rake db:migrate

Kita buat relasi baru di model homework, dengan menambahkan script berikut :

belongs_to :sub_category

view raw homework.rb hosted with ❤ by GitHub

Selanjutnya kita ubah controller homeworks_controller menjadi seperti berikut :

	class HomeworksController < ApplicationController
	before_action :set_homework, only: [:show, :edit, :update, :destroy]
	before_action :set_categories, only: [:new, :edit, :update,:create]
	before_action :set_sub_categories, only: [:new, :edit, :update,:create]
	def index
	@homeworks = Homework.all
	end
	def show
	end
	def new
	@homework = Homework.new
	end
	def edit
	end
	def create
	@homework = Homework.new(homework_params)
	respond_to do |format|
	if @homework.save
	format.html { redirect_to @homework, notice: 'Homework was successfully created.' }
	format.json { render :show, status: :created, location: @homework }
	else
	format.html { render :new }
	format.json { render json: @homework.errors, status: :unprocessable_entity }
	end
	end
	end
	def update
	respond_to do |format|
	if @homework.update(homework_params)
	format.html { redirect_to @homework, notice: 'Homework was successfully updated.' }
	format.json { render :show, status: :ok, location: @homework }
	else
	format.html { render :edit }
	format.json { render json: @homework.errors, status: :unprocessable_entity }
	end
	end
	end
	def destroy
	@homework.destroy
	respond_to do |format|
	format.html { redirect_to homeworks_url, notice: 'Homework was successfully destroyed.' }
	format.json { head :no_content }
	end
	end
	private
	def set_homework
	@homework = Homework.find(params[:id])
	end
	def set_categories
	@category = Category.all
	end
	def set_sub_categories
	@sub_category = SubCategory.all
	end
	def homework_params
	params.require(:homework).permit(:homework_name, :category_id, :deadline, :description, :sub_category_id)
	end
	end

view raw homeworks_controller.rb hosted with ❤ by GitHub

Lalu kita lanjutkan dengan mengubah script app/views/homeworks/index.html.erb menjadi :

	<p id="notice"><%= notice %></p>
	<%= render 'navigation'%>
	<h1>Homeworks</h1>
	<table>
	<thead>
	<tr>
	<th>Homework name</th>
	<th>Category</th>
	<th>Sub-Category</th>
	<th>Deadline</th>
	<th>Description</th>
	<th colspan="3"></th>
	</tr>
	</thead>
	<tbody>
	<% @homeworks.each do |homework| %>
	<tr>
	<td><%= homework.homework_name %></td>
	<td><%= homework.category.try(:name) %></td>
	<td><%= homework.sub_category.try(:name) %></td>
	<td><%= homework.deadline %></td>
	<td><%= homework.description %></td>
	<td><%= link_to 'Show', homework %></td>
	<td><%= link_to 'Edit', edit_homework_path(homework) %></td>
	<td><%= link_to 'Destroy', homework, method: :delete, data: { confirm: 'Are you sure?' } %></td>
	</tr>
	<% end %>
	</tbody>
	</table>
	<br>
	<%= link_to 'New Homework', new_homework_path %>
	<%= link_to 'New Category', new_category_path %>

view raw index.html.erb hosted with ❤ by GitHub

Dan kita ubah juga script yang ada pada app/views/homeworks/show.html.erb menjadi :

	<p id="notice"><%= notice %></p>
	<%= render 'navigation'%>
	<p>
	<strong>Homework name:</strong>
	<%= @homework.homework_name %>
	</p>
	<p>
	<strong>Category:</strong>
	<%= @homework.category.present? ? @homework.category.name : "-" %>
	</p>
	<p>
	<strong>Sub-Category:</strong>
	<%= @homework.sub_category.present? ? @homework.sub_category.name : "-" %>
	</p>
	<p>
	<strong>Deadline:</strong>
	<%= @homework.deadline %>
	</p>
	<p>
	<strong>Description:</strong>
	<%= @homework.description %>
	</p>
	<%= link_to 'Edit', edit_homework_path(@homework) %> |
	<%= link_to 'Back', homeworks_path %>

view raw show.html.erb hosted with ❤ by GitHub

Setelah mengubah index dan show pada homework. Maka kita teruskan dengan mengubah script yang ada pada app/views/homeworks/_form.html.erb menjadi :

	<%= form_with(model: homework, local: true) do |form| %>
	<% if homework.errors.any? %>
	<div id="error_explanation">
	<h2><%= pluralize(homework.errors.count, "error") %> prohibited this homework from being saved:</h2>
	<ul>
	<% homework.errors.full_messages.each do |message| %>
	<li><%= message %></li>
	<% end %>
	</ul>
	</div>
	<% end %>
	<div class="field">
	<%= form.label :homework_name %>
	<%= form.text_area :homework_name, id: :homework_homework_name %>
	</div>
	<div class="field">
	<%= form.label :category %>
	<% if @homework.category.present? %>
	<%= select_tag 'homework[category_id]', options_for_select(@category.collect { |c| [c.name, c.id] }, {:selected => @homework.category.id}) %>
	<% else %>
	<%= select_tag 'homework[category_id]', options_for_select(@category.collect { |c| [c.name, c.id] }) %>
	<% end %>
	</div>
	<div class="field">
	<%= form.label :sub_category_id %>
	<% if @homework.sub_category.present? %>
	<%= select_tag 'homework[sub_category_id]', options_for_select(@sub_category.collect { |c| [c.name, c.id] }, {:selected => @homework.sub_category.id}) %>
	<% else %>
	<%= select_tag 'homework[sub_category_id]', options_for_select(@sub_category.collect { |c| [c.name, c.id] }) %>
	<% end %>
	</div>
	<div class="field">
	<%= form.label :deadline %>
	<%= form.date_select :deadline, id: :homework_deadline %>
	</div>
	<div class="field">
	<%= form.label :description %>
	<%= form.text_area :description, id: :homework_description %>
	</div>
	<div class="actions">
	<%= form.submit %>
	</div>
	<% end %>

view raw _form.html.erb hosted with ❤ by GitHub

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.

so, congratulations !! anda telah berhasil membuat dropdown sub-category