Railsでタスク管理アプリを作成_3

タスク管理アプリを作ってみよう(続き)

1. 前置き

1. 前提・事前作業

• こっちの投稿の内容を事前に実施済み
• 例によってドットインストールの写経
• #11 Projectsの詳細を表示しようから実施

2. Projectsの詳細を表示しよう

• projectをクリックしたら詳細に飛べるようにする

3. index Viewの編集（遷移先を定義）

• /home/vagrant/taskApp/app/views/projects の index.html.erb を編集する

ERB(before)

<h1>Projects</h1>

<ul>
  <% @projects.each do |project| %>
  <li> <%= project.title %> </li>
  <% end %>
</ul>

• link_to ヘルパーを使用
• project.id を project に渡すようにする
• project とか id とかそこら辺の定義が何処にあるかは以前のポストを参照

ERB(after)

<h1>Projects</h1>

<ul>
  <% @projects.each do |project| %>
  <li> <%= link_to project.title, project_path(project.id) %> </li>
  <% end %>
</ul>

• リンクになった

4.Actionの作成

• 以前のポストを見たところ、 show が必要
• Controllerを弄る(　/home/vagrant/taskApp/app/controllers の projects_controller.rb )

ruby(before)

class ProjectsController < ApplicationController


  # indexアクションを追加
  def index
    # @をつけた変数はviewでそのまま使用可能
    # Projectの全データを引っ張ってくる
    @projects = Project.all
  end


end

ruby(after)

class ProjectsController < ApplicationController


  # indexアクションを追加
  def index
    # @をつけた変数はviewでそのまま使用可能
    # Projectの全データを引っ張ってくる
    @projects = Project.all
  end

  # showアクションを追加
  def show
    @project = Project.find(params[:id])
  end

end

5. show Viewの追加

• /home/vagrant/taskApp/app/views/projects の index.html.erb をコピーして show.html.erb を作成

ERB

<h1><%= @project.title %></h1>

• HOMEの「project1」リンクをクリックしたら↑に遷移できた

6. 新規project作成フォームを作成

• projects/new を作成する

• 以前のポストを参照

• projects/new で作成した内容をPOSTで受け取って projects/create でデータ保存する

• /home/vagrant/taskApp/app/views/projects の index.html.erb にフォームを作成

ERB

<h1>Projects</h1>

<ul>
  <% @projects.each do |project| %>
  <li> <%= link_to project.title, project_path(project.id) %> </li>
  <% end %>
</ul>

<p><%= link_to "Add New", new_project_path %></p>

• これで、リンクが作成される

• Controllerを編集する(　/home/vagrant/taskApp/app/controllers の projects_controller.rb )

ruby

class ProjectsController < ApplicationController


  # indexアクションを追加
  def index
    # @をつけた変数はviewでそのまま使用可能
    # Projectの全データを引っ張ってくる
    @projects = Project.all
  end

  # showアクションを追加
  def show
    @project = Project.find(params[:id])
  end

  # newアクションを追加
  def new
    @project = Project.new
  end


end

• Viewを作成する（/home/vagrant/taskApp/app/views/projects の new.html.erb を作成）

ERB

<h1>Add New</h1>

<!-- フォーム -->
<%= form_for @project do |f| %>

<p>
  <!-- ラベル -->
  <%= f.label :title %> <br>
  <!-- フィールド -->
  <%= f.text_field :title %> <br>
</p>

<p>
  <!-- サブミット -->
  <%= f.submit %> <br>
</p>

<% end %>

• 登録フォーム画面ができた

• 続きは次のポスト