[Ruby] I want to create a form to select [Rails] category

2 minute read

Hello. Currently I am making a bulletin board with Rails.

I wanted to display the bulletin board threads by category, so I implemented it with the intention of selecting a category when creating a thread.

Since I recently started to use Rails, I would like Masakari if you are familiar with it.

version

Ruby 2.5 Rails 5.1

DB/preparation

Designed with many threads tied to categories Screenshots 2020-07-09 12.08.06.png

Don’t forget to set between models…

thread.rb


class Thread <ApplicationRecord
belongs_to :category
end

category.rb


class Category <ApplicationRecord
has_many :threads
end

First, register the category

It will not start without a category, so let’s register. You can use the console, but I will create a registration form thinking that I will add categories in the future. After registering, you will be directed to the list page.

First, write routes and controller

  • Routing

routes.rb


Rails.application.routes.draw do
  root'thread#index'
  resources :thread # also write thread routing
  resources :categories
end
  • Controller

ruby:categories.controller.rb


class CategoriesController <ApplicationController
def new
@category = Category.new
end

def create
@category = Category.new(category_params)
if @category.save
redirect_to categories_path, notice: "Registered"
else
render :new
end
end

def index
@categories = Category.all
end

private
def category_params
params.require(:category).permit(:name)
end
end

  • Registration Form

Screenshot 2020-07-09 12.26.28.png

ruby:new.html.erb


<div class="col-sm-12">
<h2 class="text-center">Add category</h2>
<%= form_with model: @category, local: true do |f| %>
<div class="form_input">
<%= f.label :name %>
<%= f.text_field :name, class:"form-control" %>
</div>
<div class="form_action row">
<%= f.submit "submit", class: "btn col-sm-12 submit_btn" %>
</div>
<% end %>
</div>
  • List page

Screenshots 2020-07-09 12.28.24.png

I wish this could be displayed for the time being

index.rb


<div>
<% @categories.each do |category| %>
<%= category.name %>
<% end %>
</div>

Create a thread submission form

Now that you have registered, you can select a category from the thread’s post form.

  • Controller

threads_controller.rb


class ThreadsController <ApplicationController
  def new
    @thread = Thread.new
  end

  def create
    @Thread = Thread.new(board_params)
    if @thread.save
      redirect_to thread_path(@thread), notice: "Posting completed"
    else
      render :new
    end
  end

  def show
    @thread = Thread.find(params[:id])
  end

  private
  def board_params
    params.require(:thread).permit(:title,:body)
  end
end

  • Post page

Screenshots 2020-07-09 12.36.23.png

You can create a selection form with collection_select.

As a usage, I use it like this … collection_select( object name, method name, array of elements, item of value attribute, item of text [, option or HTML attribute or event attribute])

In this example, Category.all is the “array of elements” part. Maybe I put it in a variable in the controller and use it in the view rather than writing Category.all. It may be better to have such a form.

It would be helpful if anyone could point out here.

ruby:threads/new.index.erb


<div class="col-sm-12">
<h2 class="text-center">Stand up thread</h2>
<%= form_with model: @thread, local: true do |f| %>
<div class="form_input">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control" %>
</div>
<div class="form_input">
<%= f.label :body %>
<%= f.text_area :body, class: "form-control" %>
</div>
<div class="form_input">
<%= f.label :category_id %>
<%= f.collection_select :category_id, Category.all, :id, :name,
:include_blank => "Please select a category" %>
</div>
<div class="form_action row">
<%= f.submit "post", class: "btn col-sm-12 submit_btn" %>
</div>
<% end %>
</div>

You will be able to select with the following feeling.

Screenshots 2020-07-09 12.37.45.png

in conclusion

Thank you for watching until the end. I’m going to write a lot of articles and output more and more from now on.

Tags: ,

Updated: