ユーザー詳細画面の作成

今回は下記のようなユーザー詳細画面を作成していく。

必要な情報としては、サイドバー（左側）にユーザー情報の作成、前回作成した本の投稿機能を作成、

メインに現在表示しているユーザーの投稿した本を一覧で表示する。

サイドバーは後で部分テンプレート化するが、今回は個々に記述していく。

作業の流れとしては下記の手順で行っていく。

users_controllerの記述
ルーティングの確認
ビューの作成
動作の確認

コントローラの作成

users_controllerのshowアクションに記述をしていく。

app/controllers/users_controller.rb

  def show
    @user = User.find(params[:id])
    @books = @user.books
    @book = Book.new
  end

解説） @user = User.find(params[:id])

URLのIDを取得し、同じIDのuser情報を取得し、@userへ代入する。

@books = @user.books

表示されているuserが投稿したbookをすべて取得し、@booksへ代入する。

@book = Book.new

Bookクラスに空のインスタンスを作り、@bookへ代入する。

ルーティングの確認

config/routes.rb(usersの定義を抜粋)

resources :users, only: [:index, :show, :update, :edit]

usersのshowアクションのルーティングが定義されているので問題ない。ここにshowがない場合、追加。

ビューの作成

users/show.html.erbに記述していく。

app/views/users/show.html.erb

<div>
  <div>
    <div>
      <!--ユーザー情報-->
      <h2>User info</h2>
      <%= image_tag @user.get_profile_image(100,100) %>
      <table>
        <tbody>
          <tr></tr>
          <tr>
            <th>name</th>
            <th><%= @user.name %></th>
          </tr>
          <tr>
            <th>introduction</th>
            <th><%= @user.introduction %></th>
          </tr>
        </tbody>
      </table>

      <div>
        <%= link_to edit_user_path(@user) do %>
          <i class="fas fa-user-cog"></i>
        <% end %>
      </div>

      <!--本の投稿機能-->
      <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 %>
    </div>

    <!--ユーザーが投稿した本の一覧機能-->
    <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>
  </div>
</div>