戻る

Rails6.0


動画学習サイトの構築 Rails6.0

  (0)
2,000円

タスク6-4   レビュー表示

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




「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







この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

動画学習サイトの構築 Rails6.0

2,000円

Rails6.0で作成しています。
動画で学べるサイトを構築するプロジェクトです。
プロジェクトを登録し、そのプロジェクトに動画を登録できます。
プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。
写真の複数アップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。
管理ダッシュボードtrestleの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
フルコードのダウンロード可能。

タスク数: 128