カテゴリー別表示機能の実装

初めましてこんにちは！すんぎぃです。
SoundReviewというアプリができるまでの流れをやっています。
今回は、カテゴリー別表示機能の実装について話していきます。

1.目的

カテゴリー別に表示することで見たいものを簡単に見つけることができるようにします。

2.扱うgemまたはAPI

なし

3.方法

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

##省略
get 'items/category/:category_id' => 'items#category'
##省略

②items_controller.rbを以下のように編集します。

##省略
def category
   @movie = Item.where(category_id: '2')
   @anime = Item.where(category_id: '3')
   @music = Item.where(category_id: '4')
   @book = Item.where(category_id: '5')
   @other = Item.where(category_id: '6')
   @category = params[:category_id]
 end
##省略

それぞれのカテゴリー別に習得します。
@categoryにパラメーターの中身を入れています。

③app/views/items/index.html.erbを以下のように編集します。

      　<div class="categories">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "映画", "/items/category/2" ,class:"category-name"%>
         </div>  
         <div class="category">
           <%= link_to "アニメ", "/items/category/3" ,class:"category-name"%>
         </div>  
         <div class="category">
           <%= link_to "音楽", "/items/category/4",class:"category-name" %>
         </div>  
         <div class="category">
           <%= link_to "本", "/items/category/5",class:"category-name" %>
         </div>  
         <div class="category">
           <%= link_to "その他", "/items/category/6" ,class:"category-name"%>
         </div> 
          
       </div>

パラメターにカテゴリーに適した数字を入れています。

④app/views/itemsディレクトリ以下にcategory.html.erbファイルを作成します。

⑤category.html.erbを以下のように編集してください。

<%=render "shared/header"%>
<% if @category=="2" %>
<div class='main'>
       <div class="category-movie">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "映画", "/items/category/2" ,class:"category-name"%>
         </div>     
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           movie reviews
         </div>
         <ul class='item-lists'>
     
           <%@movie.each do |movie|%>
           <li class='list'>
             <%= link_to item_path(movie.id),class:"link" do %>
             <div class='item-info'>
               
               <%= movie.name%>
              
             </div>
             <div class='item-img-content'>
               
               <%if movie.image.attached? %>
                 <%= image_tag movie.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if movie.user.image.attached? %>
                     <%=link_to user_path(movie.user.id),class:"user-icon4" do %>
                       <%= image_tag movie.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(movie.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 movie.user.nickname, user_path(movie.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=movie.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             </div>
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
         
       </div> 
         
</div>
<% end %>
<% if @category=="3" %>
<div class='main'>
       <div class="category-anime">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "アニメ", "/items/category/3" ,class:"category-name"%>
         </div>     
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           anime reviews
         </div>
         <ul class='item-lists'>
     
           <%@anime.each do |anime|%>
           <li class='list'>
             <%= link_to item_path(anime.id),class:"link" do %>
             <div class='item-info'>
               
               <%= anime.name%>
               
             </div>
             <div class='item-img-content'>
               
               <%if anime.image.attached? %>
                 <%= image_tag anime.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if anime.user.image.attached? %>
                     <%=link_to user_path(anime.user.id),class:"user-icon4" do %>
                       <%= image_tag anime.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(anime.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 anime.user.nickname, user_path(anime.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=anime.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
      
         
       </div> 
         
</div>
<%end%>
<% if @category=="4" %>
<div class='main'>
       <div class="category-music">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "音楽", "/items/category/4" ,class:"category-name"%>
         </div>     
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           music reviews
         </div>
         <ul class='item-lists'>
     
           <%@music.each do |music|%>
           <li class='list'>
             <%= link_to item_path(music.id),class:"link" do %>
             <div class='item-info'>
               
               <%= music.name%>
               
             </div>
             <div class='item-img-content'>
               
               <%if music.image.attached? %>
                 <%= image_tag music.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if music.user.image.attached? %>
                     <%=link_to user_path(music.user.id),class:"user-icon4" do %>
                       <%= image_tag music.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(music.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 music.user.nickname, user_path(music.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=music.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
         
         
       </div> 
         
</div>
<%end%>
<% if @category=="5" %>
<div class='main'>
       <div class="category-book">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "本", "/items/category/5" ,class:"category-name"%>
         </div>     
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
         book reviews
         </div>
         <ul class='item-lists'>
     
           <%@book.each do |book|%>
           <li class='list'>
             <%= link_to item_path(book.id),class:"link" do %>
             <div class='item-info'>
               
               <%= book.name%>
              
             </div>
             <div class='item-img-content'>
               
               <%if book.image.attached? %>
                 <%= image_tag book.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if book.user.image.attached? %>
                     <%=link_to user_path(book.user.id),class:"user-icon4" do %>
                       <%= image_tag book.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(book.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 book.user.nickname, user_path(book.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=book.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
        
         
       </div> 
         
</div>
<%end%>
<% if @category=="6" %>
<div class='main'>
       <div class="category-other">
         <h1>Category</h1>
         <div class="category">
           <%= link_to "その他", "/items/category/6" ,class:"category-name"%>
         </div>     
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
         other reviews
         </div>
         <ul class='item-lists'>
     
           <%@other.each do |other|%>
           <li class='list'>
             <%= link_to item_path(other.id),class:"link" do %>
             <div class='item-info'>
               
               <%= other.name%>
               
             </div>
             <div class='item-img-content'>
               
               <%if other.image.attached? %>
                 <%= image_tag other.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
                   <% if other.user.image.attached? %>
                     <%=link_to user_path(other.user.id),class:"user-icon4" do %>
                       <%= image_tag other.user.image, class: "user-icon4" %>
                     <%end%>  
                   <% else %>
                     <%=link_to user_path(other.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 other.user.nickname, user_path(other.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=other.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
       
         
       </div> 
         
</div>
<%end%>
<%= render "shared/footer" %>

⑥cssファイルの追加
以下のcssファイルを追加します

category.scss

832 Bytes

ファイルダウンロードについて

ダウンロード

4.まとめ

これにて完成です。
以下のように表示されたらOK!!です。