スクラッチでRails3に挑戦 Part 4(各ページへの移動リンクの追加)

さて,続きです.

前回は学生情報の編集や更新の処理部分を作成しましたが,これら作成したページ同士のリンクについて設定してみたいと思います.まずは,学生情報一覧の画面(index)から,各学生情報の表示や編集ページへ移動するリンクを作成してみたいと思います.

単純に考えれば,index.html.erbに次のようなAタグを用意すれば良いとわかります.

[app/view/students/index.html.erb]

<h1>All Students</h1><table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>email</th>
      <th> </th>
      <th> </th>
    </tr>
  </thead>
  <tbody>
    <% @students.each do |student| %>
      <tr>
      <td><%= student.id %></td>
      <td><%= student.name %></td>
      <td><%= student.email %></td>
      <td><a href="/students/<%= student.id %>">表示</td>
      <td><a href="/students/<%= student.id %>/edit">編集</td>
      </tr>
    <% end %>
</tbody>
</table>

Railsには,最初からヘルパーとして「link_to」というリンクタグを作成するメソッドが用意されています.単純に説明すると,

<a href="http://www.yahoo.co.jp/">Yahoo!のページ</a>

というリンクを作成したいときは....

<%= link_to "Yahoo!のページ", "http://www.yahoo.co.jp/" %>

とすれば良い,というようなものです.

ということで,前回「表示(show)」に関してはパスの別名「student_path」を付けたのですが,「編集(edit)」に関してはまだ別名を付けていません.

基本,Railsでは,URLパス「/students/1234567890/edit」というようなパスの場合は,「edit_student」と付けるのが一般的のようです.

[config/routes.rb]

Sample::Application.routes.draw do  match 'students', :to  => 'students#index'
  match 'students/:id', :to => 'students#show', :as => 'student', :via => :get
  match 'students/:id', :to => 'students#update', :via => :put
  match 'students/:id/edit', :to  => 'students#edit', :as => 'edit_student'

「rake routes」コマンドで確認してみます.

$ rake routes
    students     /students(.:format)          {:action=>"index", :controller=>"students"}
     student GET /students/:id(.:format)      {:controller=>"students", :action=>"show"}
             PUT /students/:id(.:format)      {:controller=>"students", :action=>"update"}
edit_student     /students/:id/edit(.:format) {:controller=>"students", :action=>"edit"}

これにより,「edit_student_path(:id)」例えば,「edit_student_path(‘1234567890’)」と指定することで,「/students/1234567890/edit」のURLパスを取得することが可能となります.よってリンクの部分は次のように記述すれば良いことが分かります.

<td><%= link_to "表示", student_path(student.id) %></td>
<td><%= link_to "編集", edit_student_path(student.id) %></td>

または,

<td><%= link_to "表示", student_path(student) %></td>
<td><%= link_to "編集", edit_student_path(student) %></td>

でも良いです.

同様に,(一人の)学生情報表示の画面(show)から,一覧表示(index)や編集画面(edit)へ移動するリンクを追加しましょう.

[app/views/students/show.html.erb]

<h1>学生情報</h1>

<ul>
  <li>ID: <%= @student.id %></li>
  <li>氏名: <%= @student.name %></li>
  <li>E-mail: <%= @student.email %></li>
</ul>

<%= link_to "編集", edit_student_path(@student) %>
<%= link_to "一覧", students_path %>

また,同様に,編集画面からそれぞれへのリンクを追加しましょう.

[app/views/students/edit.html.erb]

<h1>学生情報の編集</h1>

<%= form_for @student do |f| %>
<ul>
    <li>ID: <%= f.text_field :id %></li>
    <li>氏名: <%= f.text_field :name %></li>
    <li>E-mail: <%= f.text_field :email %></li>
</ul>
<%= f.submit '更新' %>
<% end %>

<%= link_to "表示", student_path(@student) %>
<%= link_to "一覧", students_path %>

カッコは悪いけど,これで全ページを行き来できるようになりました.

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中