戻る

Rails5.0


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

  (0)
1,000円

タスク6-4   レビューフォーム

このタスクについて


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




「app\views」フォルダに「reviews」フォルダを新規作成して下さい。
作成した「reviews」フォルダに「_form.html.erb」ファイルを新規作成します。



app\views\reviews\_form.html.erb(新規作成したファイル)
 
<%= form_for([@project, @review]) do |f| %> 
	<div id="user_stars"></div> 
	<%= f.text_field :comment %> 
	<%= f.hidden_field :project_id, :value => @project.id %> 
    <%= f.hidden_field :user_id, :value => current_user.id %> 
	<div class="actions"> 
		<%= f.submit "レビューする", class: "button is-danger is-fullwidth m-t-10 m-b-10" %> 
	</div> 
<% end %> 
<script> 
	$('#user_stars').raty({ 
		path: '/assets', 
		scoreName: 'review[star]', 
		score: 1 
	}); 
</script> 



「app\views\reviews」フォルダに「_index.html.erb」ファイルを新規作成します。


app\views\reviews\_index.html.erb(新規作成したファイル)
 
<% if @reviews.blank? %> 
	<span class="center"><h4>まだレビューはありません。</h4></span> 
<% end %> 
<% @reviews.order("id desc").each do |r| %> 
	<hr> 
	<div class="row"> 
		<div class="col m1"> 
        <figure class="image is-32x32"> 
            <%= image_tag r.user.gravatar_url, class: "is-rounded" %><br/> 
            </figure> 
		</div> 
		<div class="col m10"> 
			<div> 
				<strong><%= r.user.full_name %></strong> 
				<span class="right"><%= r.created_at %></span> 
			</div> 
			<div id="stars_<%= r.id %>"></div> 
			<div><%= r.comment %></div> 
            <br/> 
			<div> 
				<%= link_to "削除", [@project, r], class: "button is-danger", method: :delete, data: {confirm: "本当によろしいですか?"} if current_user && current_user.id == r.user.id %> 
			</div> 
		</div> 
	</div> 
	<script> 
		$('#stars_<%= r.id %>').raty({ 
			path: '/assets', 
			readOnly: true, 
			score: <%= r.star %> 
		}); 
	</script> 
<% end %> 



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


1.記述追加 app\views\project\show.html.erb(47~62行目)
 
<!--レビュー--> 
<div class="box"> 
    <span id="average_rating"></span> 
    <p>レビュー(<%= @reviews.count %>)</p> 
    <br/> 
    <%= render 'reviews/index' %> 
    <hr/> 
    <article class="media"> 
        <div class="card-content"> 
            <div><%= render 'reviews/form' if @joined && !@hasReview %></div> 
        </div> 
    </article> 
</div> 



2.記述追加 app\views\project\show.html.erb(182~189行目)
 
<!-- レビュー jQuery Raty--> 
<script> 
	$('#average_rating').raty({ 
		path: '/assets', 
		readOnly: true, 
		score: <%= @project.average_rating %> 
	}); 
</script> 



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> 
                                    <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"> 
                                    <%= image_tag @project.image %> 
                                </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> 
                                <!--レビュー--> 
                                <div class="box"> 
                                    <span id="average_rating"></span> 
                                    <p>レビュー(<%= @reviews.count %>)</p> 
                                    <br/> 
                                    <%= render 'reviews/index' %> 
                                    <hr/> 
                                    <article class="media"> 
                                        <div class="card-content"> 
                                            <div><%= render 'reviews/form' if @joined && !@hasReview %></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="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 current_user.gravatar_url, class: "is-rounded" %><br/> 
                                                </figure> 
                                        </div> 
                                        <h5><%= current_user.full_name %></h5> 
                                        </div> 
                                    <% end %> 
                                <% else %> 
                                    <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button>  
                                <% end %> 
                            </div> 
                        </div> 
                    </div> 
                   
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 
<!-- レビュー jQuery Raty--> 
<script> 
	$('#average_rating').raty({ 
		path: '/assets', 
		readOnly: true, 
		score: <%= @project.average_rating %> 
	}); 
</script> 



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

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

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

1,000円

動画で学べるサイトを構築するプロジェクトです。プロジェクトを登録し、そのプロジェクトに動画を登録できます。プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。写真のアップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。ActiveAdminの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。 フルコードのダウンロード可能。

タスク数: 100