Help us understand the problem. What is going on with this article?

11日目(1)、12日目:マスターデータ。ページUIの編集、ページャ導入

9日目10日目の続き

使用環境

ホストOS: Windows10 Home
仮想環境OS: Ubuntu Bento/Bionic
Ruby:2.51
Rails:5.2.2

作成テーブルと関連性

マスターデータ関連.jpg

前回までの流れ

  1. rails new -d mysql
  2. rails g scaffold で5テーブル作成
  3. app/modelsで各テーブルの関連性定義
  4. 各テーブルにデータ入力
  5. Studentのshowページに、生徒ごとの試験結果のデータを出力

今回の流れ

  1. ExamResultsのindexページのデータ出力を編集
  2. ExamRusultの新規作成ページのUIを変更
  3. gem kaminariでページャー追加(授業内では時間足らず)

現状

ExamResults-show編集前.JPG
ExamResults-new編集前.JPG

実段階

インデックスページの表示を編集

※app/views/exam_results/show.html.erbも同様にやる

app/views/exam_results/index.html.erb
# 編集前
#  <td><%= exam_result.student %></td>
#  <td><%= exam_result.subject %></td>

#  編集後
<td><%= exam_result.student.name %></td>
<td><%= exam_result.subject.name %></td>

newページにセレクトボックス

参照:Action View Form Helpers

app/views/exam_results/_form.html.erb
<div class="field">
    <%= form.label :student_id %>
    <%= form.select :student_id, @students %>
 </div>

<div class="field">
    <%= form.label :subject_id %>
    <%= form.select :subject_id, @subjects %>
</div>
app/controllers/exam_results_controller.rb
before_action :set_students_subjects, only: [:new, :edit]

def set_students_subjects
  @students = Student.all.pluck(:name, :id)
  @subjects = Subject.all.pluck(:name, :id)
end

編集後

ExamResult-show編集後.JPG
ExamResults-new編集前.JPG

ページャの導入(kaminari)

インデックス表示データが、studentページは100行、ExamResultページは900行と、見づらい.
なので、studentとExamResultのindexページを、数ページに区切って表示させたい。

今回はgemのkaminariを用いる。
参照:kaminari -github

kaminariのインストール

Gemfile
gem 'kaminari'
terminal
bundle install

studentのindexページから変更

indexアクションを編集

app/controllers/students_controller.rb
def index
  # 編集前:@students = Student.all
    @students = Student.page(params[:page]).per(20)
end

viewを編集

app/views/students/index.html.erb
# ファイル先頭行に追加
<div class="page-header">
# ファイル最終行に追加
<%= paginate @students %>
</div>

出来た
pagenate.JPG

ExamResultのindexページ編集

app/controllers/exam_result_controller.rbのindexアクションと
app/view/exam_results/index.html.erbを同様に編集

ページャの見た目を変える

terminal
rails g kaminari:views default

# 実行結果
  create  app/views/kaminari/_next_page.html.erb
      create  app/views/kaminari/_gap.html.erb
      create  app/views/kaminari/_prev_page.html.erb
      create  app/views/kaminari/_last_page.html.erb
      create  app/views/kaminari/_first_page.html.erb
      create  app/views/kaminari/_paginator.html.erb
      create  app/views/kaminari/_page.html.erb

ページャの設定を変える

terminal
rails g kaminari:config

#実行結果
create  config/initializers/kaminari_config.rb
# ここで作成されたファイルに設定がある。

Bootstrap対応のページャテーマもある.
amatsuda/kaminari_themes

config/initializers/kaminari_config.rb
# frozen_string_literal: true
Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end

12日目

kaminariの別のファイル設定

11日目に私がやったものとの違いは、

  • modelsにpaginates_per 30と記述
  • controllerのindexアクションの末尾にある、per()を削除
    • (ビューファイルは同じ)

exam_resultも編集は同じ。

app/models/student.rb
paginates_per 30
app/controllers/students_controller.rb
@students = Student.page(params[:page])
app/views/students/index.html.erb
# ファイル先頭
<div class="page-header">
# ファイル末尾
<%= paginate @students %>
</div>

studentのindexページに、exam_resultのnewへのリンク作成

リンクを作成

app/views/student/index.html.erb
<td><%= link_to 'New Exam Result', new_exam_result_path(student_id: student.id) %></td>
app/controllers/exam_results_controller.rb
def new
  if params[:student_id]
    @student = Student.find(params[:student_id])
    @selected_student = [@student.name, @student.id]
  end
  @exam_result = ExamResult.new
end
app/views/exam_result/_form.html.erb
<%= form.select :student_id, options_for_select(@students, @selected_student) %>

studentのindexから'New Exam Result'リンクを押すと、exam_resultのnewページに飛び、
フォームのセレクトボタンのうち、生徒が自動で選択されるようになった。

OriverK
農学学士。植物学等を専門に学び、所属研究室では画像処理による農作物列検出の研究。卒業後は食品系企業に就職したが幸か不幸か退職することになり、この機を逃すまいと勉強を本格的に再開し、現在の転職活動に至る。
https://oriverk.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした