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

皆さんこんにちは！！
今回はプルダウン式！タグ検索・投稿機能を作成していきます！！
参考文献はこちらですhttps://qiita.com/Kairi_Yasunnde/items/935dcdb8ec88b9e
参考までにイメージ写真を載せておきます！！
![スクリーンショット (72).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738887/c1b72a39-e3c2-31cf-cf9f-9c6425ac889b.png)
![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738887/6cae6e9d-900e-034f-a276-be6bd34f320b.png)


<b>Step1:事前準備</b>

```ruby:ターミナル
cd 
cd desktop 
rails new new_app
```

```ruby:ターミナル
cd new_app
rails generate register body:text title:string
rails db:migrate
```
<b>注意：既存のアプリケーションがある場合、上記は無視してください！！

<b>Step2:モデルの作成

```ruby:ターミナル
rails generate model Tag name:string
```
<b>上記のコマンドは変えないでください！！
```ruby:ターミナル
rails generate model Register_tag register:references tag:references
rails db:migrate
```
<b>上記のコマンドのregisterは自分の投稿モデルに置き換えて書いてください！！

```ruby: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
```
このように書いてあればよき！！

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

```ruby:register_tag.rb
class RegisterTag < ApplicationRecord
  belongs_to :register
  belongs_to :tag
end
```

```ruby:tag.rb
class Tag < ApplicationRecord
    has_many :register_tags, dependent: :destroy
    has_many :registers, through: :register_tags
end
```

```ruby:register.rb
class Register < ApplicationRecord
    has_many :register_tags, dependent: :destroy
    has_many :tags, through: :register_tags
end
```
<b>Step4:seedを設定していく
```ruby:seeds.rb
Tag.create([
  { name: 'タグ1' },
  { name: 'タグ2' },
  { name: 'タグ3' },
  { name: 'タグ4' },
  { name: 'タグ5' }
])
```

```ruby:ターミナル
rails db:seed
```
<b>注意：seedは何度も更新できません（更新するには一度DBをリセットしなければならない）

<b>Step5:Viewページを編集

```ruby:new.html.erb
<h5>ジャンル選択:</h5>
  <div class='form-group'>
    <%= f.collection_select :tag_ids, Tag.all, :id, :name, include_blank: "ジャンルを選択してください"  %>
  </div>
```
<b>newの f は変数を省略した書き方です！

```ruby:show.html.erb
<% @モデル名.tags.each do |tag| %>
    <%= tag.name %>
<% end %>
```

```ruby: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 は変数を省略した書き方です！
<b>ここでは省略した形で書かないとエラーが起きます！！


<b>Step6:コントローラーの編集

```ruby: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

```

以上になります！！！