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

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

## 1. 前置き

### 1. 前提・事前作業

 * [こっちの投稿](http://qiita.com/fujimohige/items/17586bccf4d160ddd413)の内容を事前に実施済み
 * 例によって[ドットインストール](http://dotinstall.com/lessons/basic_rails_v2/24901)の写経
 * [#11 Projectsの詳細を表示しよう](http://dotinstall.com/lessons/basic_rails_v2/24911)から実施



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

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



![無題.png](https://qiita-image-store.s3.amazonaws.com/0/40160/d1cd1766-4c6b-20bd-4f2c-4f0d5f38eed9.png)


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

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

```erb:ERB(before)
<h1>Projects</h1>

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

```

* `link_to` ヘルパーを使用
* `project.id` を `project` に渡すようにする
* `project` とか `id` とかそこら辺の定義が何処にあるかは[以前のポスト](http://qiita.com/fujimohige/items/4076dde5bc9c5aa965c1)を参照

```erb:ERB(after)
<h1>Projects</h1>

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

```

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/40160/9ad74216-ca60-4b7a-5a3e-31057bc6be91.png)

* リンクになった

## 4.Actionの作成

* [以前のポスト](http://qiita.com/fujimohige/items/4076dde5bc9c5aa965c1)を見たところ、 `show` が必要
* Controllerを弄る(　`/home/vagrant/taskApp/app/controllers` の `projects_controller.rb` )

```rb:ruby(before)
class ProjectsController < ApplicationController


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


end
```

```rb: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:ERB
<h1><%= @project.title %></h1>
```


![無題.png](https://qiita-image-store.s3.amazonaws.com/0/40160/d3d9b48e-6b42-355f-ce0d-5f0e4ed8c036.png)

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


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

* `projects/new` を作成する
* [以前のポスト](http://qiita.com/fujimohige/items/4076dde5bc9c5aa965c1)を参照

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

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

```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>
```

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

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/40160/f9ab9233-1dd8-2f02-a019-84ba409e1d52.png)


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

```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: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 %>
```

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

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/40160/708da83d-8015-1698-bbab-6b1e3727b5e2.png)


* 続きは次のポスト