⑨日記の編集機能を実装

この章でのゴール

・投稿した日記を、後から編集できるようにする

投稿した日記の編集機能を実装

この章では、投稿した日記の編集機能を実装していきます。

完成イメージは下記です。

日記編集用のビューを作成

まずは、日記を編集するためのビューを作成します。

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

 

作成したら、app/views/posts/edit.html.erbを開き、以下の通り保存します。

<div class="post-new-wrapper" >
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">投稿編集</h1>
        <%= form_for @post do |f| %>
          <div class="form-group">
            <%= f.label :トップ画像 %>
            <%= f.file_field :image%>
          </div>

          <div class="form-group">
            <%= f.label :タイトル %>
            <%= f.text_field :title, class: 'form-control' %>
            <%= f.label :内容 %>
            <%= f.text_area :description, class: 'form-control' %>
          </div>

          <%= f.submit '保存', class: 'btn btn-black btn-block' %>

        <% end %>
      </div>
    </div>
  </div>
</div>

 

また、コントローラを追加します。

app/controllers/posts_controller.rbを開き、以下のコードを追加します。

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])
    if @post.update_attributes(post_params)
      redirect_to '/'
    else
      flash.now[:danger] = "編集に失敗しました"
      render 'edit'
    end
  end

 

また、トップページから編集ページへのリンクをつけて、画面遷移できるように変更します。

app/views/pages/index.html.erbを開き、以下の通りに編集します。

<td><%= post.title %></td>

↓

<td><%= link_to post.title, edit_post_path(post.id) %></td>

 

すると、トップページに表示されている日記のタイトルがリンクに変更され、クリックすると編集ページに遷移できるようになります。

上記の編集画面から、実際に編集してみて、下記画像のように、投稿が編集されていればOKです。

ここまで完成したら、githubへプッシュしておきましょう。

コメントを残す

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

CAPTCHA