【Ruby on Rails】ToDoアプリを簡単に作ってみる ~ その2. show, edit, update, destroy ~

その1からの続きです

showアクションの定義

ある一つのタスクの詳細画面を出力するshowアクションを定義します。

controllerの編集

app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def new
    @task = Task.new
  end

  def create
    @task = Task.new(task_params)

    if @task.save
      redirect_to tasks_path
    else
      render 'new'
    end
  end

  def show
    @task = Task.find(params[:id])
  end

  private
    def task_params
      params.require(:task).permit(:title, :description)
    end
end

viewを作成する。

showアクションに対応したviewを作ります。

$ touch app/views/tasks/show.html.erb

app/views/tasks/show.html.erb

<h1>タスク詳細</h1>

<h2><%= @task.title %></h2>
<p><%= @task.description %></p>

<%= link_to 'Back', tasks_path %>

リンクを付与

タスク一覧画面(index)の各タスクにリンクをつけます。
app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table>
  <thead>
    <tr>
      <th>タスク名</th>
      <th>説明</th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
    <tr>
      <td><%= link_to task.title, task %></td>
      <td><%= task.description %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New', new_task_path %>

edit, updateアクションの定義

タスクの情報を編集するアクションを定義します。

controllerの編集

app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def new
    @task = Task.new
  end

  def create
    @task = Task.new(task_params)

    if @task.save
      redirect_to tasks_path
    else
      render 'new'
    end
  end

  def show
    @task = Task.find(params[:id])
  end

  def edit
    @task = Task.find(params[:id])
  end

  def update
    @task = Task.find(params[:id])

    if @task.update(task_params)
      redirect_to tasks_path
    else
      render 'edit'
    end
  end

  private
    def task_params
      params.require(:task).permit(:title, :description)
    end
end

編集画面の作成

編集画面のviewを作ります。

$ touch app/views/tasks/edit.html.erb

app/views/tasks/edit.html.erb

<h1>タスク編集</h1>

<%= form_for(@task) do |f| %>
  <div class='field'>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class='field'>
    <%= f.label :description %><br>
    <%= f.text_field :description %>
  </div>
  <div class='actions'>
    <%= f.submit %>
  </div>
<% end %>

<%= link_to 'Back', tasks_path %>

リンクの付与

編集ページへのリンクをつけます

app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table>
  <thead>
    <tr>
      <th>タスク名</th>
      <th>説明</th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
    <tr>
      <td><%= link_to task.title, task %></td>
      <td><%= task.description %></td>
      <td><%= link_to 'edit', edit_task_path(task) %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New', new_task_path %>

destroyアクションの定義

ラストです。タスクの削除を行うdestroyアクションを定義します

controllerの編集

app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def new
    @task = Task.new
  end

  def create
    @task = Task.new(task_params)

    if @task.save
      redirect_to tasks_path
    else
      render 'new'
    end
  end

  def show
    @task = Task.find(params[:id])
  end

  def edit
    @task = Task.find(params[:id])
  end

  def update
    @task = Task.find(params[:id])

    if @task.update(task_params)
      redirect_to tasks_path
    else
      render 'edit'
    end
  end

  def destroy
    @task = Task.find(params[:id])

    @task.destroy
    redirect_to tasks_path
  end

  private
    def task_params
      params.require(:task).permit(:title, :description)
    end
end

削除ボタンをつける

app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table>
  <thead>
    <tr>
      <th>タスク名</th>
      <th>説明</th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
    <tr>
      <td><%= link_to task.title, task %></td>
      <td><%= task.description %></td>
      <td><%= link_to 'edit', edit_task_path(task) %></td>
      <td><%= link_to 'delete', task, method: :delete, data: { confirm: 'You sure?' } %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New', new_task_path %>

これで、簡単なToDoアプリケーションが完成しました。このアプリ製作の基礎練みたいな感覚、好きです。

でもこれって、scaffoldでできるんですよね。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です