LoginSignup
1
0

【Rails】診断機能をラジオボタンを使って実装!

Posted at

【Rails】診断機能をラジオボタンを使って実装!

今回はRuby on Railsで診断機能を実装します!
その時にチェックボックスではなくてラジオボタンを使って実装してみようと思います!
目次は以下の通りです!

1. コントローラー設計

1. データベース周り

1. Viewページ周り

1. ルート周り

1. コントローラー設計

travels_controller.rb
class TravelsController < ApplicationController
  def index
  end

  def new
    @travel = Travel.new
  end

  def show
    @travel = Travel.find_by(id: params[:id])
  end

  def create
    @travel = Travel.new(travel_params)
    if @travel.save
        flash[:notice] = "診断が完了しました"
        redirect_to travel_path(@travel.id)
    else
        redirect_to :action => "new"
    end
  end

private
  def travel_params
      params.require(:travel).permit(:id, :question1, :question2, question: [])
  end
end

2.データベース周り

ターミナル/コマンドプロンプト
$ rails g model Travel question1:string question2:string
ターミナル/コマンドプロンプト
$ rails db:migrate

3.Viewページ周り

travels/new.html.erb
<%= form_for(@travel, class: 'form-horizontal', role: 'form') do |f| %>
            <div class="container-sindan">
                <div class="row">
                    <div class="col-12">
                        <p>Question1. どちらかと言うと…</p>
                    </div>
                    <div class="col-6">
                        <p><%= f.radio_button :question1, "1" %>景色を選ぶ</p>
                    </div>
                    <div class="col-6">
                        <p><%= f.radio_button :question1, "2" %>食べ物を選ぶ</p>
                    </div>
                    <div class="col-12">
                        <p>Question2. 何人ぐらいで旅行行きたい?</p>
                    </div>
                    <div class="col-6">
                        <p><%= f.radio_button :question2, "1" %>1人</p>
                    </div>
                    <div class="col-6">
                        <p><%= f.radio_button :question2, "2" %>2~3人</p>
                    </div>
                </div>
           </div>

ラジオボタンを使う場合、一つのカラム(question)だけの場合、そのカラム内で一つしか選択することができないので、今回は質問ごとでカラムを変えて実装してます!

travels/show.html.erb
       <h5>診断結果</h5>
        <p>あなたにおすすめの旅行先は…</p>
        <div class="tweet-container">
                <% if @travel.question1 == "1" && @travel.question2 == "1"  %>
                    <h6>タイ</h6>
                <% elsif @travel.question1 == "1" && @travel.question2 == "2"  %>        
                    <h6>アメリカ</h6>
                 <% elsif @travel.question1 == "2" && @travel.question2 == "1"  %>       
                    <h6>インド</h6>
                 <% elsif @travel.question1 == "2" && @travel.question2 == "2"  %>       
                    <h6>ブラジル</h6>
                <% end %>
        </div>

if文を使って比較する時に、""で数字を囲うことに注意してください!今回は、DBでstring型で保存しているので比較させるときは文字列として比較させる必要があります!

4.ルート周り

routes.rb
resources :travels

以上です!

1
0
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
1
0