戻る

Rails5.0


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

  (0)
1,000円

タスク5-1   サブスクリプション

このタスクについて


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




モデルを作成していきます。


コマンド
rails g model Subscription project:references user:references


「db\migrate\20200715223129_create_subscriptions.rb」ファイルを編集します。


記述追加 db\migrate\20200715223129_create_subscriptions.rb
9行目に「add_index :subscriptions, [:project_id, :user_id], unique: true」の記述を追加しています。
 
class CreateSubscriptions < ActiveRecord::Migration[5.0] 
  def change 
    create_table :subscriptions do |t| 
      t.references :project, foreign_key: true 
      t.references :user, foreign_key: true 
      t.timestamps 
    end 
    add_index :subscriptions, [:project_id, :user_id], unique: true 
  end 
end 



コマンド マイグレーション適用
rails db:migrate


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


記述追加 app\models\project.rb(3,4行目)
     has_many :subscriptions 
    has_many :users, through: :subscriptions 



app\models\project.rb
 
class Project < ApplicationRecord 

    has_many :tasks 
    has_many :subscriptions 
    has_many :users, through: :subscriptions 

    validates :name, presence: true, length: { maximum: 50 } 
    validates :content, presence: true, length: { maximum: 500 } 
    validates :price, presence: true, numericality: { only_integer: true } 

    has_attached_file :image, styles: { medium: "680x300>", thumb: "170x75>" } 

    validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/ 
end 



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


記述追加 app\models\user.rb(3,4行目)
    has_many :subscriptions 
   has_many :projects, through: :subscriptions 



app\models\user.rb
 
class User < ApplicationRecord 

  has_many :subscriptions 
  has_many :projects, through: :subscriptions 

  # アバター画像表示用 
  include Gravtastic 
  gravtastic 

  # Include default devise modules. Others available are: 
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable 
  devise :database_authenticatable, :registerable, 
         :recoverable, :rememberable, :validatable, 
         :confirmable, :omniauthable 

  #長さ50文字以下 入力必須 
  validates :full_name, presence: true, length: {maximum: 50} 

  def self.from_omniauth(auth) 
    user = User.where(email: auth.info.email).first 
    if user 
      return user 
    else 
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user| 
        user.email = auth.info.email 
        user.password = Devise.friendly_token[0, 20] 
        user.full_name = auth.info.name   # ユーザーモデルに名前があると仮定 
        user.image = auth.info.image # ユーザーモデルに画像があると仮定 
        user.uid = auth.uid 
        user.provider = auth.provider 
      end 
    end 
  end 
end 



コントローラを作成していきます。


「app\controllers」フォルダに「charge_controller.rb」ファイルを新規作成します。


app\controllers\charge_controller.rb(新規作成したファイル)
 class ChargeController < ApplicationController 
	
	before_action :authenticate_user! 

	def free 
		project = Project.find(params[:project_id]) 
		current_user.subscriptions.create(project: project) 
		redirect_to project 
	end 
end 



「app\controllers\project_controller.rb」ファイルの編集をします。


1.記述追加 app\controllers\project_controller.rb(10~16行目)
「show()」メソッドの記述を追加しています。
 
  def show 
    @project = Project.find(params[:id]) 
  	@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 



2.記述追加 app\controllers\project_controller.rb(20~24行目)
新たに「list()」メソッドを追加しています。
 
  def list 
    if !current_user.nil? 
      @projects = current_user.projects 
    end 
  end 



app\controllers\project_controller.rb
 
class ProjectController < ApplicationController 

  def index 
  	@projects = Project.all 
  end 

  def show 
  	@project = Project.find(params[:id]) 
  	@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 
end 



「app\controllers\task_controller.rb」ファイルを編集します。


記述変更 app\controllers\task_controller.rb
記述を大幅に変更しているのでコードをコピーしてファイルの内容を置き換えて下さい。
 
class TaskController < ApplicationController 

	before_action :authenticate_user! 

  def show 
  	project = Project.find(params[:project_id]) 
  	@tasks = project.tasks.order(:tag) 
  	joined = false 
  	if !current_user.nil? && !current_user.projects.nil? 
  		joined = current_user.projects.include?(project) 
  	end 
  	if joined 
	  	@task = @tasks.find(params[:id]) 
	  	@next_task = @task.next 
	  	@prev_task = @task.prev 
	  else 
	  	flash[:notice] = "プロジェクトを購入して下さい。" 
	  	redirect_to project 
	  end 
  end 
end 



ルートを設定します。


記述追加 config\routes.rb
15行目に「post '/free' => 'charge#free'」の記述を追加しています。
 
Rails.application.routes.draw do 

  devise_for :admin_users, ActiveAdmin::Devise.config 

  ActiveAdmin.routes(self) 

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, 
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} 

  # ルートページをapp\views\pages\about.html.erbに設定 
  root 'pages#about' 

  get 'pages/about' 

  post '/free' => 'charge#free' 

  resources :project do 
    resources :task, only: [:show] 
  end 

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 
end 



ビューを編集します。


「app\views\project\show.html.erb」ファイルを編集します。


記述追加 app\views\project\show.html.erb(116~144行目)
 
<!-- サブスクリプション --> 
<% 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 %> 



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> 
                                <!-- タスク 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> 



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

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

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

1,000円

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

タスク数: 100