ユーザー一覧・ユーザーページ　・ユーザー編集ページ・削除機能の作成

sungi

2021年7月21日 01:37

初めましてこんにちは！すんぎぃです。
SoundReviewというアプリができるまでの流れをやっています。
今回は、ユーザー一覧・ユーザーページ　・ユーザー編集ページ・削除機能の作成方法について話していきます。

1.目的

どんなユーザーがいるのか一目でわかるようにする。
ユーザーがどんなものを投稿しているのかわかるようにする。
ユーザー情報を書き換えることができるようにする。

2.扱うgem

なし

3.方法

○ユーザーページの作成

①routesを以下のように編集します。

Rails.application.routes.draw do
mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
devise_for :users
root to: 'items#index'
resources :items 
resources :users, only: [:show]

ユーザー詳細ページを表示したいためshowアクションを加えていきます。

②ヘッダーにユーザーページボタンを追加します。
header.html.erbを以下のように編集します。

//省略
<div class='nav'>
       <ul class='lists-right'>
         <% if user_signed_in? %>
         <div class="user_nav grid-6">
           <div class="profile">
                   <% if current_user.image.attached? %>
                     <%=link_to user_path(current_user.id),class:"user-icon4" do %>
                       <%= image_tag current_user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(current_user.id) ,class:"user-icon4" do %>
                       <%= image_tag "willy.png", alt: "user-icon", class: "user-icon4" %>
                     <%end%>
                   <% end %>
                 </div>
           <div class="right-head">
             <div>
             <%= link_to current_user.nickname, user_path(current_user.id), class: "post" %>
             </div>
             <div>
             <%= link_to "ログアウト", destroy_user_session_path, method: :delete ,class:"post" %>
             </div>
           </div>
         </div>
         <% else %>
         <div class="user_sign grid-6">
           <%= link_to "ログイン", new_user_session_path, class: "post" %>
           <%= link_to "新規登録", new_user_registration_path, class: "post" %>
         </div>
         <% end %>
       </ul>
     </div>
//省略

ユーザー名には、current_user.nicknameとすることで現在ログインしているニックネームを表示することができます。

ユーザーページへのリンクは、/users/:idと指定します。
:idの部分には表示したいユーザーのidを入れる必要がありますが、今回表示するのは、ログイン中のユーザーのページなのでcurrent_user.idとします。

③次にterminalにてコントーローラーを作成していきます。
以下のコマンドを実行します。

%rails g controller users

④作成されたusers_controller.rbを以下のように編集します。
showアクションを加えます。

class UsersController < ApplicationController
 before_action :set_user
 def show
   
 end
private
def set_user
   @user = User.find(params[:id])
 end

end

@userは、見ようとしているユーザーの情報を取得しています。

④app/views/usersディレクトリ以下にshow.html.erbというファイルを作成します。

<%=render "shared/header"%>
<div class='main'>
       <div class="user-item">
         <div class="user-nick">
           <%="#{@user.nickname}のホーム" %> 
         </div>  
            
       </div>
        
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           user reviews
         </div>
         <ul class='item-lists'>
     
           <%@user.items.each do |item|%>
           
           <li class='list'>
             <%= link_to item_path(item.id),class:"link" do %>
             <div class='item-info'>
               
             <%= item.name%>
               
           </div>
             <div class='item-img-content'>
               
               <%if item.image.attached? %>
                 <%= image_tag item.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if item.user.image.attached? %>
                     <%=link_to user_path(item.user.id),class:"user-icon4" do %>
                       <%= image_tag item.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(item.user.id) ,class:"user-icon4" do %>
                       <%= image_tag "willy.png", alt: "user-icon", class: "user-icon4" %>
                     <%end%>
                   <% end %>
                 </div>
             <div class="item-create">
               <div class="item-user-name">
                 <%= link_to item.user.nickname, user_path(item.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=item.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             
             </div>
             
             
             
             
             <% end %>
           </li>
           
           <%end%>
          
         </ul>
        
       </div> 
       <%= link_to new_item_path, class: 'item-btn' do %>
       <span class='item-btn-text'>Post Review</span>
       <%= image_tag 'icon_camera.png' , size: '79x50' ,class: "item-btn-icon" %>
       <% end %> 
         
</div>

<%= render "shared/footer" %>

これにてユーザーページは、完成です。

○ユーザー一覧ページ

①routesを以下のように編集します。

Rails.application.routes.draw do
mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
devise_for :users
root to: 'items#index'
resources :items 
resources :users, only: [:show,:index]

ユーザー一覧ページを追加したいためindexアクションを加えていきます。

②users_controller.rbを以下のように編集します。
indexアクションを加えます。

class UsersController < ApplicationController
 before_action :set_user, except: [:index]
 //省略
 
 def index
   @users = User.all
 end

//省略

end

ユーザーテーブル全ての情報を読み込んでいます。

③app/views/usersディレクトリ以下にindex.html.erbというファイルを作成します。

④index.html.erbファイルを以下のように編集します。

<%=render "shared/header"%>
<div class='main'>
       <div class="user-lists">
         <h1>ユーザー一覧</h1>   
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           user list
         </div>
      
         <ul class='item-lists'>
     
           <%@users.each do |user|%>
           <div class="comment-profile">
               <div class="profile">
               <% if user.image.attached? %>
                 <%=link_to user_path(user.id),class:"user-icon4" do %>
                   <%= image_tag user.image, class: "user-icon4" %>
                 <%end%>  
               <% else %>
                 <%=link_to user_path(user.id) ,class:"user-icon4" do %>
                   <%= image_tag "willy.png", alt: "user-icon", class: "user-icon4" %>
                 <%end%>
               <% end %>
             </div>
               <div  class="name-file">
                 <%= link_to user.nickname, user_path(user.id) ,class: "message-nickname" %>
               </div>
              
           </div>
           <%end%>
         </ul>
         
       </div> 
         
</div>
<%=render "shared/footer"%>

これにてユーザー一覧ページは、完成です。

○ユーザー編集ページの作成

①routes.rbを以下のように編集します。

Rails.application.routes.draw do
mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
devise_for :users
root to: 'items#index'
resources :items 
resources :users, only: [:show,:index,:edit,:update]

②ユーザーページからユーザー編集ページへ遷移できるようにボタンを追加します。
show.html.erbを以下のように編集します。

<div class="user-item">
         <div class="user-nick">
           <%="#{@user.nickname}のホーム" %> 
         </div>  
         <div class="follow">
           <%if user_signed_in? && current_user.id == @user.id%>
           <%=link_to "アカウント情報の編集",edit_user_registration_path(current_user), class:"edi-user"%>
           <%end%> 
         </div>     
       </div>

ログインしているユーザーかつ現在ログインしているユーザーのアカウントである場合だけアカウント編集のボタンが表示されるようにしています。

③users_controller.rbを以下のように編集します。
editアクション,updateアクションを加えます。

//省略

def edit

end

def update
   if @user.update(user_params)
     redirect_to user_path(@user.id)
   else
     render :edit
   end
 end
 
  private

 def user_params
   params.require(:user).permit(:nickname, :email, :image)
 end
//省略

④app/views/registrations/edit.html.erbを以下のように編集をします。

<%=render "shared/second-header"%>
   <div class='ma'>
       <div class="sign">
         <div class="form-header">
         <h1>edit profile</h1>
         </div>
         <%= render 'shared/error_messages', model: @user %>
         <%= form_with model: @user, id: 'new_user', class: 'new_user', local: true do |f| %>
     <div class="field">
       <div class="weight-bold-text">
         プロフィール画像
         <span class="indispensable">*任意</span>
       </div>
       <div class="click-upload">
         <p>
           ファイルをアップロードするにはクリックしてください
         </p>
         <%= f.file_field :image, id:"item-image" %>
       </div>
     </div>
     <div class="field">
       <label class="form-text">ニックネーム</label><br />
       
       <%= f.text_area :nickname,class:'new-form', autofocus: true  %>
     </div>
     <div class="field">
       <label class="form-text">Eメール</label><br />
       <%= f.email_field :email,class:'new-form' %>
     </div>

     <div class="actions">
       <%= f.submit "update",class:"log"  %>
     </div>
   <% end %>
         <div class="delete-acount">
           <%=link_to "アカウントの削除","/",method: :delete, class:"edit-user"%>
          </div>
          <div class="back">
           <%=link_to "back", :back%>
          </div>
       </div>
     
       <video autoplay muted playsinline src="/videos/sign.mp4", autoplay loop ,class="niko" ></video>    
   </div>
   <%=render "shared/second-footer"%>

これにてユーザー編集機能は完成です。

○ユーザー削除機能の実装

①routes.rbを以下のように編集します。

Rails.application.routes.draw do
mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
devise_for :users
root to: 'items#index'
resources :items 
resources :users, only: [:show,:index,:edit,:update,:destroy]

ユーザーの削除機能を実装したいためdestroyアクションを追加していきます。

②users.controller.rbを以下のように編集していきます。
destroyアクションを加えます。

//省略
def destroy
   @user.destroy
   redirect_to root_path
 end
 private
 def set_user
   @user = User.find(params[:id])
 end
 //省略

③app/views/registrations/edit.html.erbにユーザー削除ボタンをつけます。
以下のように編集します。

         　　//省略
         <div class="delete-acount">
           <%=link_to "アカウントの削除",user_path(current_user),method: :delete, class:"edit-user"%>
          </div>
          <div class="back">
           <%=link_to "back", :back%>
          </div>
          //省略

○cssの追加

app/assets/stylesheets/shared以下にファイルを配置します。

4.これにて完成です。

以下のように表示されていたらOKです。

ありがーとございました。

5.過去記事

この記事が気に入ったらサポートをしてみませんか？

ユーザー一覧 ・ユーザーページ ・ユーザー編集ページ・削除機能の作成