💬

Rails｜投稿にカテゴリタグを追加する

2023/08/07に公開

Rails

要件

本の投稿をする際にカテゴリタグを追加できる
作成したタグで検索ができる
作成したタグのリンクをクリックすると検索ができる

前提

前回の記事の続きです。

Book モデルにカラムを追加

まずは、Bookモデルに Categoryカラムを追加します。

$ rails g migration AddCategoryToBooks category:string

$ rails db:migrate

Books コントローラの編集

books_controller.rb

  def book_params
    params.require(:book).permit(:title, :body, :star, :category)
  end

book_params に :category を追加します。

TagSearchs コントローラを作成

$ rails g controller TagSearches

tag_searches_controller.rb

  def search
    @model = Book
    @word = params[:content]
    @books = Book.where("category LIKE ?", "%#{@word}%")
    render "tag_searches/tagsearch"
  end

searchアクションを追加します。
詳細は以前作成したこちらを参照ください。

ルーティングの設定

config.routes.rb

get "tag_searches/search" => "tag_searches#search"

この1行を追加します。

投稿フォームビューの作成

_form.html.erb

    <div class="form-group">
      <%= f.label :Category %>
      <%= f.text_field :category, class: "form-control book_category" %>
    </div>

form_with の中に、上記コードを追記します。

books/show ビューの作成

books/show.html.erb

          <td>
            <% if @book.category.present? %>
              <%= link_to @book.category, tag_searches_search_path(content: @book.category) %>
            <% end %>
          </td>

この部分を追記します。

books/index ビューの作成

books/_index.html

          <td>
            <% if book.category.present? %>
              <%= link_to book.category, tag_searches_search_path(content: book.category) %>
            <% end %>
          </td>

この部分を追記します。（私はレンダリングファイルにしているので、@booksが booksになっています。）

検索ボックスビューの作成

_tagsearch.html.erb

<% if user_signed_in? %>
  <%= form_with url: tag_searches_search_path, method: :get, local: true do |f| %>
    <%= f.text_field :content %>
    <%= f.submit "タグ検索" %>
  <% end %>
<% end %>

このレンダリングファイルは、application.html.erb の <main> 内に挿入しました。

layouts/application.html.erb

<%= render 'tag_searches/tagsearch' %>

検索結果一覧の作成

tagsearch.html.erb

<div class="container">

  <h2>Books search for "<%= @word %>" </h2>
  <%= render "books/index", books: @books %>
  </table>

</div>

以上で完成です！