HTMLの基礎知識（プルダウンのタグ検索・投稿） #Ruby

皆さんこんにちは！！
今回はプルダウン式！タグ検索・投稿機能を作成していきます！！
参考文献はこちらですhttps://qiita.com/Kairi_Yasunnde/items/935dcdb8ec88b9e
参考までにイメージ写真を載せておきます！！

Step1:事前準備

ターミナル

cd 
cd desktop 
rails new new_app

ターミナル

cd new_app
rails generate register body:text title:string
rails db:migrate

注意：既存のアプリケーションがある場合、上記は無視してください！！

Step2:モデルの作成

ターミナル

rails generate model Tag name:string

上記のコマンドは変えないでください！！

ターミナル

rails generate model Register_tag register:references tag:references
rails db:migrate

上記のコマンドのregisterは自分の投稿モデルに置き換えて書いてください！！

schema.rb

ActiveRecord::Schema.define(version: 2019_10_30_135534) do
上記省略

  create_table "register_tags", force: :cascade do |t|
    t.integer "register_id", null: false
    t.integer "tag_id", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["register_id"], name: "index_register_tags_on_register_id"
    t.index ["tag_id"], name: "index_post_tags_on_tag_id"
  end

  create_table "registers", force: :cascade do |t|
    t.text "body"
    t.text "title"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "tags", force: :cascade do |t|
    t.string "name"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  add_foreign_key "register_tags", "posts"
  add_foreign_key "register_tags", "tags"
end

このように書いてあればよき！！

Step3：アソシエーションを設定

register_tag.rb

class RegisterTag < ApplicationRecord
  belongs_to :register
  belongs_to :tag
end

tag.rb

class Tag < ApplicationRecord
    has_many :register_tags, dependent: :destroy
    has_many :registers, through: :register_tags
end

class Register < ApplicationRecord
    has_many :register_tags, dependent: :destroy
    has_many :tags, through: :register_tags
end

Step4:seedを設定していく

seeds.rb

Tag.create([
  { name: 'タグ1' },
  { name: 'タグ2' },
  { name: 'タグ3' },
  { name: 'タグ4' },
  { name: 'タグ5' }
])

ターミナル

rails db:seed

注意：seedは何度も更新できません（更新するには一度DBをリセットしなければならない）

Step5:Viewページを編集

new.html.erb

<h5>ジャンル選択:</h5>
  <div class='form-group'>
    <%= f.collection_select :tag_ids, Tag.all, :id, :name, include_blank: "ジャンルを選択してください"  %>
  </div>

newの f は変数を省略した書き方です！

show.html.erb

<% @モデル名.tags.each do |tag| %>
    <%= tag.name %>
<% end %>

index.html.erb

#タグ検索の部分
<%= form_tag registers_path, method: :get, class: 'boards__searchForm' do %>
  <%= select_tag :tag_id,
                 options_from_collection_for_select(Tag.all, :id, :name, params[:tag_id]),
                 {
                   prompt: 'ジャンルを絞る',
                   onchange: 'submit(this.form);'
                 }
  %>
<% end %>

#上記省略
#↓は投稿を反映させるコードです！！注意：これを書かないとタグ投稿・検索することができません！！！
<% @モデル名.tags.each do |tag| %>
    <%= tag.name %>
<% end %>  
#以下省略

showとindexの t は変数を省略した書き方です！
ここでは省略した形で書かないとエラーが起きます！！

Step6:コントローラーの編集

register_controller.rb

      def index
        if params[:search] == nil
          @register = params[:tag_id].present? ? Tag.find(params[:tag_id]).registers : Register.all
        elsif params[:search] == ''
          @register = params[:tag_id].present? ? Tag.find(params[:tag_id]).registers : Register.all
        else

          @register = Register.where("storename LIKE ? OR menu LIKE ? OR place LIKE ?", "%#{search}%", "%#{search}%", "%#{search}%")
        end
      end
以下省略

private
    def register_params
        params.require(:register).permit(:tag_ids)←tag_idを追加する
    end

以上になります！！！