[29]サブスクリプション << [ホームに戻る] >> [31]Stripe（ストライプ）
購入したプロジェクトを表示するページを作成します。
「app\controllers\project_controller.rb」ファイルに以下の記述を追加します。
記述追加 app\controllers\project_controller.rb(4行目)
before_action :authenticate_user!, only: [:list]
app\controllers\project_controller.rb
class ProjectController < ApplicationController before_action :set_project, only: [:show] before_action :authenticate_user!, only: [:list] def index @projects = Project.all end def show @tasks = @project.tasks.order(:tag) @joined = false if !current_user.nil? && !current_user.projects.nil? @joined = current_user.projects.include?(@project) end @users = @project.users.order('created_at desc').first(10) end def list if !current_user.nil? @projects = current_user.projects end end private # コールバックを使用して、アクション間で共通のセットアップまたは制約を共有します。 def set_project @project = Project.find(params[:id]) end # 信頼できるパラメータのリストのみを許可します。 def project_params params.require(:project).permit(:name, :content, :price, :active, :description) end end
「app\views\project」フォルダに「list.html.erb」ファイルを新規作成します。
app\views\project\list.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(current_user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <!-- メンバー --> <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> </div> </div> </div> <!-- 認証 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <!-- Googleの認証 --> <article class="media"> <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider %> <span class="has-text-success">googleアカウントでログイン中</span> <% end %> </p> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <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-6" style="color: black; margin: 10px;"><%= project.name %></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> <div class="card-content p-t-5 p-b-5"> <h4 class="title is-6" style="color: black; margin: 5px;">タスク <i class="far fa-clock"></i> <%= project.tasks.count %></h4> </div> <footer class="card-footer"> <div style="margin-top: 10px; margin-bottom: 10px;"> <%= link_to "このプロジェクトを始める", project_path(project), class: "button is-success" %> </div> </footer> </div> </div> <% end %> <% end %> <% else %> <div class="center"> <h5>購入したプロジェクトはありません。</h5> <%= link_to "プロジェクトの一覧", project_index_path, class: "button is-success" %> </div> <% end %> </div> </div> </div> </div> </div> </section>
ルートの設定をします。
記述追加 config\routes.rb(14行目)
get '/myprojects' => 'project#list'
config\routes.rb
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'users' get '/myprojects' => 'project#list' post '/users/edit', to: 'users#update' post '/free' => 'charge#free' resources :project do resources :task, only: [:show] end # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
ブラウザ確認
http://localhost:3000/myprojects
購入したプロジェクトが表示されます。
ナビゲーションバーにリンクを追加します。
記述追加 app\views\shared\_navbar.html.erb
56行目に「<%= link_to "マイプロジェクト", myprojects_path, class: "navbar-item" %>」の記述を追加しています。
<nav class="navbar is-link" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトGakushuu6</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-info" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <a class="navbar-item"><%= current_user.full_name %> <i class="far fa-caret-square-down"></i> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "マイプロジェクト", myprojects_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">メニュー</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <hr class="navbar-divider"> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替えます $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
↓↓クリックして頂けると励みになります。
