学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Ruby on Rails6.0 | 動画学習サイトを作成する 36 | レビュー表示

[35]レビューフォーム << [ホームに戻る] >> [37]ホームページ


「app\views\project\show.html.erb」ファイルにレビューを表示させる記述を追加します。


1.記述追加 app\views\project\show.html.erb(13行目)

<span class="star-review"><i class="fa fa-star"></i>
    <%= @project.average_rating %>
    <span class="has-text-primary">(<%= @project.reviews.count %>)</span>
</span>



2.記述追加 app\views\project\show.html.erb(170行目)

<div class="card">
    <div class="card-header">
        <div class="card-header-title">最新のレビュー</div>
    </div>
    <div class="card-content">
        <!-- レビュー -->
        <% @reviews.each do |r| %>
            <article class="media">
                <figure class="media-left">
                    <p class="image is-64x64">
                        <%= image_tag avatar_url(r.user), class: "is-rounded" %>
                    </p>
                </figure>
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong><%= r.user.full_name %></strong><br>
                            <%= r.review %>
                        </p>
                        <div>
                            <%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか?"} if current_user && current_user.id == r.user.id %>
                        </div>
                        <small><%= time_ago_in_words(r.created_at) %></small>
                    </div>
                </div>
                <div class="media-right">
                    <span class="star-review"><i class="fa fa-star"></i> <%= r.stars %></span>
                </div>
            </article>
        <% end %>
    </div>
</div>



app\views\project\show.html.erb

<section class="section">
    <div class="container">
        <div class="columns">
            <!-- 左側 -->
            <div class="column is-two-thirds">
                <div class="columns is-multiline">
                    <!-- プロジェクト -->
                    <div class="column is-full">   
                        <div class="card">
                            <div class="card-content">
                                <div class="content">
                                    <h1 class="title"><%= @project.name %></h1>
                                    <span class="star-review"><i class="fa fa-star"></i>
                                        <%= @project.average_rating %>
                                        <span class="has-text-primary">(<%= @project.reviews.count %>)</span>
                                    </span>
                                    <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div>
                                </div>
                                <hr>
                                <!-- 画像カルーセル表示 -->
                                <div class="hero-carousel" id="carousel-photo">
                                    <% @project.images.each do |photo| %>
                                        <div class="carousel-item has-background image is-16by9">
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %>
                                        </div>
                                    <% end %>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="column">
                        <div class="card">
                            <div class="card-content">
                                <!-- コンテンツ -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <h2 class="subtitle">このプランについて</h2>
                                                <hr>
                                                <%= @project.content %>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                                <!-- タスク Section -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <div class="collection">
                                                    <% @tasks.each do |task| %>
                                                        <% if task.header %>
                                                            <br/>
                                                            <div class="collection-item active">
                                                                <span class="tag is-link is-large"> <%= task.title %></span>
                                                                <span class="tag is-white is-large"> <%= task.note %></span>
                                                            </div>
                                                            <br/>
                                                        <% else %>
                                                            <div class="collection-item active">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag is-light is-medium" style="margin: 3px;">
                                                                    <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %>
                                                                        <%= task.title %>
                                                                    <% end %>                                                                
                                                                 </span>
                                                                
                                                            </div>                            
                                                        <% end %>
                                                    <% end %>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
 
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>
            <!-- 右側 -->
            <div class="column">
                <div class="columns is-multiline">
                    <!-- 購入 -->
                    <div class="column is-full">
                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <div class="media-content">
                                        <strong><%= @project.name %></strong>                                                                                                        
                                    </div>
          
                                    <div class="media-right">
                                        <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p>
                                    </div>                                                
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <%= link_to users_path(@project.user.id), class: "tootip" do %>
                                        <figure class="image is-48x48">
                                            <%= image_tag avatar_url(@project.user), class: "is-rounded" %>
                                            <span class="tag is-light"><%= @project.user.full_name %></span>
                                        </figure>
                                    <% end %>
                                </div>                     

                                <div class="content f-15">
                                    <p class="m-t-30"><%= @project.content %></p>
                                    <p class="m-t-30">
                                        <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong>                                                    
                                    </p>
                                </div>
                                <% if user_signed_in? %>
                                    <!-- サブスクリプション -->
                                    <% if !@joined %>
                                        <div class="center">
                                            <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1>
                                        </div>
                                        <br/>
                                        <div class="card-action center">
                                                <%= form_tag free_path do %>
                                                    <%= hidden_field_tag 'project_id', @project.id %>
                                                    <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する(<%= number_to_currency(@project.price) %></button>
                                                <% end %>
                                        </div>
                                    <% else %>
                                        <div class="card-content center">
                                            <span class="tag is-success is-light is-large">購入済みです</span>
                                        </div>
                                        <div class="card-content center">
                                            <div class="card-content is-horizontal-center is-flex">
                                                <figure class="image is-256x256">
                                                    <%= image_tag avatar_url(current_user), class: "is-rounded" %><br/>
                                                </figure>
                                        </div>
                                        <h5><%= current_user.full_name %></h5>
                                        </div>
                                        <span style="margin-left: 20px;">
                                            <a class="button is-medium is-outlined is-danger toggle-modal" aria-control="<%= @project.id %>">レビューする</a>
                                        </span>
                                        <div class="modal" id="<%= @project.id %>">
                                            <div class="modal-background"></div>
                                            <div class="modal-content">
                                                <div class="box">
                                                    <%= form_for Review.new do |f| %>
                                                        <%= f.hidden_field :project_id, value: @project.id %>
                                                        <%= f.hidden_field :user_id, value: current_user.id %>
                                                        <div class="field">
                                                            <div id="star_<%= @project.id %>"></div>
                                                        </div>
                                                        <div class="field">
                                                            <%= f.text_area :review, class: "textarea" %>
                                                        </div>
                                                        <a class="toggle-modal button is-light" aria-control="<%= @project.id %>">キャンセル</a>
                                                        <%= f.submit "レビューする", class: "button is-danger" %>
                                                    <% end %>
                                                </div>
                                            </div>
                                        </div>

                                    <% end %>

                                <% else %>
                                    <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button>  
                                <% end %>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <div class="card-header-title">最新のレビュー</div>
                            </div>
                            <div class="card-content">
                                <!-- レビュー -->
                                <% @reviews.each do |r| %>
                                    <article class="media">
                                        <figure class="media-left">
                                            <p class="image is-64x64">
                                                <%= image_tag avatar_url(r.user), class: "is-rounded" %>
                                            </p>
                                        </figure>
                                        <div class="media-content">
                                            <div class="content">
                                                <p>
                                                    <strong><%= r.user.full_name %></strong><br>
                                                    <%= r.review %>
                                                </p>
                                                <div>
                                                    <%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか?"} if current_user && current_user.id == r.user.id %>
                                                </div>
                                                <small><%= time_ago_in_words(r.created_at) %></small>
                                            </div>
                                        </div>
                                        <div class="media-right">
                                            <span class="star-review"><i class="fa fa-star"></i> <%= r.stars %></span>
                                        </div>
                                    </article>
                                <% end %>
                            </div>
                        </div>

                    </div>
                   
                </div>
            </div>
            
        </div>
    </div>
</section>
<script>
    BulmaCarousel.attach('#carousel-photo', {
        slidesToScroll: 1,
        slidesToShow: 1
    });
    $(document).ready(function() {
        $('#tabs li').on('click', function() {
            var type = $(this).data('tab');
            $('#tabs li').removeClass('is-active');
            $(this).addClass('is-active');
            $('.tab-content').hide();
            $('#tab-' + type).show();
        }) 
    })
</script>

<script>
    $('.toggle-modal').on('click', (e) => {
        e.stopPropagation();
        e.preventDefault();
        var project_id = e.target.getAttribute('aria-control');
        $('#star_' + project_id).raty({
            path: '/assets/raty-js/lib/images',
            scoreName: 'review[stars]',
            score: 1
        });
        $('#star_' + project_id).raty('reload');
        $('#' + project_id).toggleClass('is-active');
    });
</script>



ブラウザ確認
http://localhost:3000/project/2

レビュー表示
レビュー表示



「app\views\project\index.html.erb」ファイルに記述を追加します。


記述追加 app\views\project\index.html.erb(21行目)

<div class="card-content p-t-5 p-b-5" style="margin-left: 10px;">
    <span class="star-review"><i class="fa fa-star"></i>
        <%= project.average_rating %>
        <span class="has-text-primary">(<%= project.reviews.count %>)</span>
    </span>
</div>    



app\views\project\index.html.erb

<div class="box">
  <article class="media">
    <div class="column">
        <div class="columns is-multiline">
            <% if @projects.count > 0 %>
                <% @projects.each do |project| %>
                    <%= link_to project do %>
                        <div class="column is-one-third">
                            <div class="card">
                               
                                <div class="card-image">
                                    <%= link_to project_path(project) do %>
                                        <figure class="image is-4by3">
                                            <%= image_tag project_cover(project) %>
                                        </figure>
                                    <% end %>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.name %></h4>
                                </div>
                                <div class="card-content p-t-5 p-b-5" style="margin-left: 10px;">
                                    <span class="star-review"><i class="fa fa-star"></i>
                                        <%= project.average_rating %>
                                        <span class="has-text-primary">(<%= project.reviews.count %>)</span>
                                    </span>
                                </div>                                
                                <div class="card-content p-t-5 p-b-5">
                                    <%= link_to users_path(project.user.id), class: "tootip" do %>
                                        <figure class="image is-48x48">
                                            <%= image_tag avatar_url(project.user), class: "is-rounded" %>
                                            <span class="tag is-light"><%= project.user.full_name %></span>
                                        </figure>
                                    <% end %>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span>
                                </div>
                                <footer class="card-footer">
                                    <h4 style="margin: 20px;"><%= project.description %></h4>
                                </footer>  
                                
                            </div>
                        </div>
                    <% end %>
                <% end %>
            <% else %>
                <div class="column is-one-third">
                    <div class="card">
                        <div class="card-content p-t-5 p-b-5">
                            <p class="subtitle is-6 m-b-5">表示できるプロジェクトはありません。</p>
                        </div>
                      
                    </div>
                </div>
            <% end %>
      </div>
    </div>
  </article>
</div>



ブラウザ確認
http://localhost:3000/project


星のアベレージ表示をつけました。

アベレージ表示
アベレージ表示



[35]レビューフォーム << [ホームに戻る] >> [37]ホームページ