This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

大学生管理アプリの作成10(いくつかの点を修正して、良いアプリにしよう)

Last updated at Posted at 2019-05-24
  • ヘッダーメニューを作成して、ページ遷移をできるようにする
  • 表示を正しくする。このように「 #Student:0x000055703d5c2c10」表示されている箇所を名前に変更する
  • 生徒情報のGenderが「0」と「1」で表示されている所を、「male」「female」と表示されるように変更する
  • 学科の詳細画面に、「所属している生徒」を表示します
  • サークルの詳細画面に、「所属している生徒」を表示します
  • サークルの一覧画面に、「所属している生徒の数」を表示します
  • 生徒の詳細画面に、「所属しているサークル情報」と「テスト結果」を表示します

ヘッダーメニューを作成して、ページ遷移をできるようにする

application.html.erbを編集する

vi app/views/layouts/application.html.erb
app/views/layouts/application.html.erb
  <head>
    <title>CebuCollege</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <style type="text/css">
    ul {
      list-style: none;
    }
    li {
      display: inline-block;                                                                                                                                           
    }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="/students" >生徒の一覧</a>
      </li>
      <li>
        <a href="/subjects" >学科の一覧</a>
      </li>
      <li>
        <a href="/exam_results" >試験結果の一覧</a>
      </li>
      <li>
        <a href="/clubs" >サークル一覧</a>
      </li>
    </ul>
    <%= yield %>
  </body>

スクリーンショット 2019-05-30 8.47.27.png

表示を正しくする。このように「 #Student:0x000055703d5c2c10」表示されている箇所を名前に変更する

変更対象のURL

http://192.168.33.10:3000/students

変更前

app/views/students/index.html.erb
 <% @students.each do |student| %>
      <tr>
        <td><%= student.name %></td>
        <td><%= student.subject %></td>

変更後(.nameを追加)

app/views/students/index.html.erb
 <% @students.each do |student| %>
      <tr>
        <td><%= student.name %></td>
        <td><%= student.subject.name %></td>

スクリーンショット 2019-05-30 8.45.56.png

変更対象のURL

http://192.168.33.10:3000/exam_results

変更前

app/views/exam_results/index.html.erb
<% @exam_results.each do |exam_result| %>
      <tr>
        <td><%= exam_result.student %></td>

変更後(.nameを追加)

app/views/exam_results/index.html.erb
<% @exam_results.each do |exam_result| %>
      <tr>
        <td><%= exam_result.student.name %></td>

スクリーンショット 2019-05-24 12.22.21.png

生徒情報のGenderが「0」と「1」で表示されている所を、「male」「female」と表示されるように変更する

app/models/student.rb
class Student < ApplicationRecord
  belongs_to :subject
  enum gender: { male: 0, female: 1 }                                                                                                                                  
end

スクリーンショット 2019-05-24 12.34.00.png

大学生管理アプリの作成11

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