戻る

Rails6.0


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

  (0)
2,000円

タスク5-2   マイプロジェクトページ

このタスクについて


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




購入したプロジェクトを表示するページを作成します。


「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;">タスク&nbsp;&nbsp;<i class="far fa-clock"></i> <%= project.tasks.count %></h4> 
          
                                            </div> 
                                            <footer class="card-footer"> 
                                                <div  style="margin-top: 10px; margin-bottom: 10px;"> 
                                                &nbsp;&nbsp;<%= 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


購入したプロジェクトが表示されます。







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

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

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

2,000円

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

タスク数: 128