戻る

Rails6.0


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

  (0)
2,000円

タスク7-8   ページ修正

このタスクについて


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




ダッシュボードに購入したプロジェクトを表示させるよう変更します。


「app\controllers\users_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\users_controller.rb(6行目)
 
    if !current_user.nil? 
      @projects = current_user.projects 
    end    



app\controllers\users_controller.rb
 
class UsersController < ApplicationController 

  before_action :authenticate_user! 

  def dashboard 
    if !current_user.nil? 
      @projects = current_user.projects 
    end    
  end 

  def show 
    @user = User.find(params[:id]) 
  end 

  def update 
    @user = current_user 
    if @user.update_attributes(current_user_params) 
      flash[:notice] = "保存しました" 
    else 
      flash[:alert] = "更新できません" 
    end 
    redirect_to dashboard_path 
  end 

  def update_payment 
    if !current_user.stripe_id 
      customer = Stripe::Customer.create( 
        email: current_user.email, 
        source: params[:stripeToken] 
      ) 
    else 
      customer = Stripe::Customer.update( 
        current_user.stripe_id, 
        source: params[:stripeToken] 
      ) 
    end 
    if current_user.update(stripe_id: customer.id, stripe_last_4: customer.sources.data.first["last4"]) 
      flash[:notice] = "新しいカード情報が登録されました" 
    else 
      flash[:alert] = "無効なカードです" 
    end 
    redirect_to request.referrer 
  rescue Stripe::CardError => e 
    flash[:alert] = e.message 
    redirect_to request.referrer 
  end 

  private 
  def current_user_params 
    params.require(:user).permit(:about, :status, :avatar) 
  end 
end 


フルコードの「サンプル画像」フォルダにある「icon_add_cat.jpg」ファイルを「app\assets\images」フォルダにコピーしておいて下さい。


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


記述追加 app\views\users\dashboard.html.erb(131行目)
 
    <!-- 購入したプロジェクト --> 
    <% if @projects.count > 0 %> 
        <% @projects.each do |project| %> 
            <%= link_to project do %> 
            
                <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-6" style="color: black; margin: 10px;"><%= project.name %></h4> 
                        &nbsp; 
                        <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"> 
                        <h4 class="title is-6" style="color: black; margin: 5px;">タスク&nbsp;&nbsp;<i class="far fa-clock"></i> <%= project.tasks.count %></h4> 
                    </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> 
                    <br/>                                                    
                    <div class="tag is-danger is-medium">購入済み</div> 
                    <br/> 
                    <br/>                                    
                </div> 
            <% end %> 
        <% end %> 
    <% else %> 
    <!-- 新しいプロジェクトを購入する --> 
    <%= link_to project_index_path do %> 
        <div class="card"> 
            <div class="card-image card-content is-horizontal-center is-flex "> 
                <figure class="image is-256x256 is-rounded"> 
                    <%= image_tag 'icon_add_cat.jpg', class: "is-rounded" %> 
                </figure> 
            </div> 
            <div class="card-content"> 
                <strong>プロジェクトを購入する</strong> 
            </div>    
        </div> 
    <% end %> 
<% end %> 



app\views\users\dashboard.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
        
            <!-- 左パネル --> 
            <div class="column is-one-third"> 
                <div class="columns is-multiline"> 
                    <!-- 上部 --> 
                    <div class="column is-full"> 
                        <!--通知 --> 
                        <article class="media"> 
                            <div class="content" style="margin-left: 30px; margin-bottom: 10px;"> 
                                <%= link_to notifications_path do %> 
                                    <span id="num_of_unread"><%= current_user.unread %></span> 件の通知があります。 
                                <% end %> 
                            </div> 
                        </article> 
                        <div class="card"> 
                            <!-- アバター --> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                                <!-- 画像アップロードボタン --> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"> 
                                        <%= current_user.full_name %> 
                                    </p> 
                                <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> 
                                    <div class="file"> 
                                        <label class="button is-primary is-outlined is-fullwidth"> 
                                            <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> 
                                            <i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード 
                                        </label> 
                                    </div> 
                                <% end %>   
                                </div> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント情報 --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- オンラインステータス --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">ステータス</div> 
                                        <div class="media-right"> 
                                            <strong><% if current_user.status %> オンライン <% else %> オフライン <% end %></strong> <i class="toggle far fa-edit" aria-controls="user-status"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-status', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "select is-fullwidth"}) %> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-status">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- 下部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- アカウント詳細 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>自己紹介</strong> 
                                                <br> 
                                                <%= current_user.about %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-about"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-about">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント連携 --> 
                                <article class="media"> 
                                    <div class="content"> 
                                        <p> 
                                            <strong>アカウント連携</strong><br/> 
                                            <% if current_user.provider == 'google_oauth2' %> 
                                                <span class="has-text-success">Googleアカウントでログイン中</span> 
                                            <% else %> 
                                                <span class="has-text-danger">アカウント連携していません</span> 
                                            <% end %> 
                                        </p> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 購入したプロジェクト --> 
                    <div class="column is-one-third has-text-centered"> 
                        <!-- 購入したプロジェクト --> 
                        <% if @projects.count > 0 %> 
                            <% @projects.each do |project| %> 
                                <%= link_to project do %> 
                                
                                    <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-6" style="color: black; margin: 10px;"><%= project.name %></h4> 
                                            &nbsp; 
                                            <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"> 
                                            <h4 class="title is-6" style="color: black; margin: 5px;">タスク&nbsp;&nbsp;<i class="far fa-clock"></i> <%= project.tasks.count %></h4> 
                                        </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> 
                                        <br/>                                                    
                                        <div class="tag is-danger is-medium">購入済み</div> 
                                        <br/> 
                                        <br/>                                    
                                    </div> 
                                <% end %> 
                            <% end %> 
                        <% else %> 
                        <!-- 新しいプロジェクトを購入する --> 
                        <%= link_to project_index_path do %> 
                            <div class="card"> 
                                <div class="card-image card-content is-horizontal-center is-flex "> 
                                    <figure class="image is-256x256 is-rounded"> 
                                        <%= image_tag 'icon_add_cat.jpg', class: "is-rounded" %> 
                                    </figure> 
                                </div> 
                                <div class="card-content"> 
                                    <strong>プロジェクトを購入する</strong> 
                                </div>    
                            </div> 
                        <% end %> 
                    <% end %> 
                    
                    </div> 
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 



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



ダッシュボード修正




ユーザプロフィールページにも購入したプロジェクトを表示させます。


「app\controllers\users_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\users_controller.rb(14行目)
 
    if !current_user.nil? 
      @projects = @user.projects 
    end        



app\controllers\users_controller.rb
 
class UsersController < ApplicationController 

  before_action :authenticate_user! 

  def dashboard 
    if !current_user.nil? 
      @projects = current_user.projects 
    end    
  end 

  def show 
    @user = User.find(params[:id]) 
    if !current_user.nil? 
      @projects = @user.projects 
    end        
  end 

  def update 
    @user = current_user 
    if @user.update_attributes(current_user_params) 
      flash[:notice] = "保存しました" 
    else 
      flash[:alert] = "更新できません" 
    end 
    redirect_to dashboard_path 
  end 
  def update_payment 
    if !current_user.stripe_id 
      customer = Stripe::Customer.create( 
        email: current_user.email, 
        source: params[:stripeToken] 
      ) 
    else 
      customer = Stripe::Customer.update( 
        current_user.stripe_id, 
        source: params[:stripeToken] 
      ) 
    end 
    if current_user.update(stripe_id: customer.id, stripe_last_4: customer.sources.data.first["last4"]) 
      flash[:notice] = "新しいカード情報が登録されました" 
    else 
      flash[:alert] = "無効なカードです" 
    end 
    redirect_to request.referrer 
  rescue Stripe::CardError => e 
    flash[:alert] = e.message 
    redirect_to request.referrer 
  end 

  private 
  def current_user_params 
    params.require(:user).permit(:about, :status, :avatar) 
  end 
end 




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

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

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

2,000円

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

タスク数: 128