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

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

Ruby on Rails6.0 | 動画学習サイトを作成する 45 | ページ修正

[44] ページネーション << [ホームに戻る] >> [46] デプロイ| herokuアカウント


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


「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



「app\views\users\show.html.erb」ファイルを以下のように編集します。


記述追加 app\views\users\show.html.erb(108行目)

<% 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>
        <% end %>
    <% end %>

<% else %>
    <div class="card-content">
        <strong>まだプロジェクトを購入していません</strong>
    </div>    
<% end %>



app\views\users\show.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">
                        <div class="card">
                            <!-- アバター -->
                            <div class="card-content is-horizontal-center is-flex">
                                <figure class="image is-256x256">
                                    <%= image_tag avatar_url(@user), class: "is-rounded" %>
                                </figure>
                            </div>
                            
                            <div class="card-content">
                                <!-- ユーザ名 -->
                                <div class="content has-text-centered">
                                    <p class="title is-5">
                                        <%= @user.full_name %>
                                    </p>
                                    <% if current_user.id != @user.id %>
                                        <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a>
                                    <% else %>
                                        <%= 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 %>
                                    <% end %>
                                </div>
                                <hr class="h-10">
                                
                                <!-- アカウント情報 -->
                                <article class="media">
                                    <div class="media-content">アカウント登録日</div>
                                    <div class="media-right">
                                        <strong><%= I18n.l(@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 @user.status %> オンライン <% else %> オフライン <% end %></strong>
                                        </div>
                                    </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>
                                                <%= @user.about %>
                                            </p>
                                        </div>

                                    </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>
                                <% end %>
                            <% end %>

                        <% else %>
                            <div class="card-content">
                                <strong>まだプロジェクトを購入していません</strong>
                            </div>    
                        <% end %>

                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<div class="modal" id="contact-form">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">メッセージを送る</p>
            <button class="delete toggle-contact" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="columns">
                <div class="column is-one-third">
                    <div class="card" st>
                        <div class="card-content is-horizontal-center is-flex">
                            <figure class="image is-128x128">
                                <%= image_tag avatar_url(@user), class: "is-rounded" %>
                            </figure>
                        </div>
                        <div class="card-content">
                            <hr>
                            <strong>確認しましょう:</strong>
                            <ul class="is-size-7" style="list-style:initial">
                                <li>購入について</li>
                                <li>質問内容</li>
                                <li>キャンセルについて</li>
                            </ul>
                        </div>
                     </div>
                </div>   
                <div class="column">
                    <%= form_with model: Message.new do |f| %>
                        <%= f.hidden_field :receiver_id, value: @user.id %>
                        <div class="card-content">
                            <div class="field">
                                <div class="control">
                                    <%= f.text_area :content, class: "textarea" %>
                                </div>
                            </div>
                            <%= f.submit "メッセージを送る", class: "button is-danger is-pulled-right" %>
                        </div>
                    <% end %>
                </div>
            </div>
        </section>
    </div>
</div>
<script>
    var toggle_modals = $('.toggle-contact');
    if (toggle_modals) {
        toggle_modals.on('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            var form = document.getElementById('contact-form');
            form.classList.toggle('is-active');
        });
    }
</script>



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

ユーザプロフィールページ修正
ユーザプロフィールページ修正



[44] ページネーション << [ホームに戻る] >> [46] デプロイ| herokuアカウント