2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-08-07

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

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
register.rb
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

以上になります!!!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?