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

[9日目](https://qiita.com/OriverK/items/80dc52ba9753f8bf6c82)、[10日目](https://qiita.com/OriverK/items/b7eae8f195d9d2111ea4)の続き

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

#作成テーブルと関連性
![マスターデータ関連.jpg](https://qiita-image-store.s3.amazonaws.com/0/294402/98c1819e-f557-5a93-1027-b44bbc9ac600.jpeg)

#前回までの流れ
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](https://qiita-image-store.s3.amazonaws.com/0/294402/2d6a54fd-ce6e-95af-12d9-adcdedc91669.jpeg)
![ExamResults-new編集前.JPG](https://qiita-image-store.s3.amazonaws.com/0/294402/680c18b9-5d0a-68d6-ac33-8b1ddc2c30e3.jpeg)

#実段階
##インデックスページの表示を編集
※app/views/exam_results/show.html.erbも同様にやる

```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](https://guides.rubyonrails.org/form_helpers.html#select-boxes-for-dealing-with-models)

```erb: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](https://qiita-image-store.s3.amazonaws.com/0/294402/52921abc-ff3d-faf9-a36b-b1f0b74496d6.jpeg)
![ExamResults-new編集前.JPG](https://qiita-image-store.s3.amazonaws.com/0/294402/2196b207-baa9-8f61-3d49-66af44bb47a7.jpeg)

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

今回はgemのkaminariを用いる。
[参照：kaminari -github](https://github.com/kaminari/kaminari)

##kaminariのインストール
```rb: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を編集

```erb:app/views/students/index.html.erb
# ファイル先頭行に追加
<div class="page-header">
# ファイル最終行に追加
<%= paginate @students %>
</div>
```
出来た
![pagenate.JPG](https://qiita-image-store.s3.amazonaws.com/0/294402/8d725379-0d21-7b0f-263a-d70fe7fe5319.jpeg)

##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](https://github.com/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])
```
```erb:app/views/students/index.html.erb
# ファイル先頭
<div class="page-header">
# ファイル末尾
<%= paginate @students %>
</div>
```

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

```erb: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
```
```erb: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ページに飛び、
フォームのセレクトボタンのうち、生徒が自動で選択されるようになった。