本の投稿機能の実装、一覧表示

本の投稿機能作成

本の投稿機能を作成していく。レイアウトは最後に調整するため、不恰好である。

本の投稿機能は、サイドバーに表示させるため、多くのページに表示することになるが、

ひとまず、booksのindex画面に作成していく。

下記が実装予定の投稿機能である。

上記のようにするためにviewに記述していく。

app/views/books/index

<h2>New book</h2>
<%= form_with model: @book do |f| %>
  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div>
    <%= f.label :opinion %>
    <%= f.text_area :body %>
  </div>

  <div>
    <%= f.submit 'Create Book' %>
  </div>
<% end %>

次に、books_controllerへ記載をする。

app/controllers/books_controller.rb

  def index
    @book = Book.new
  end

  def create
    @book = Book.new(book_params)
    @book.user_id = current_user.id
    @book.save
    redirect_to book_path(@book)
  end

  private

  def book_params
    params.require(:book).permit(:title, :body)
  end

記述が完了したら、サーバーを立ち上げる。

下記のような表示になっている。

一覧機能の実装

投稿した本を一覧表示するビューを作成する。

booksのindex画面に下記のようになるように記述を変更していく。レイアウトは最後に調整するため、不恰好である。

books/index

（省略）
<div>
  <h2>Books</h2>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Title</th>
        <th>Opinion</th>
      </tr>
    </thead>
    <tbody>
      <% @books.each do |book| %>
        <tr>
          <td>
            <%= link_to user_path(book.user_id) do %>
              <%= image_tag book.user.get_profile_image(80,80) %>
            <% end %>
            </td>
          <td>
            <%= link_to book_path(book.id) do %>
              <%= book.title %>
            <% end %>
            </td>
          <td><%= book.body %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

booksコントローラのindexアクションに記述を追加。

books_controller.rb

  def index
    @book = Book.new
    @books = Book.all
  end

上記記述が完了したら、サーバーを立ち上げて、新規投稿を実施する。

問題なく投稿が完了すると、下記のようにbooks/index画面に投稿した内容が表示される。下記はテストを２回投稿している。

以上。

アプリケーションの作成 参考URL　 作成するアプリケーションについて - takifugu’s blog