【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
以上です!