戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク4-4   仕事のリクエスト

このタスクについて


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




買い主が仕事をリクエストできるようにします。


リクエストモデルを作成します。


コマンド
一文です。
rails g model Request description:text title budget:bigint delivery:bigint user:references category:references --no-test-framework


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


「app\models\request.rb」ファイルの記述を更新します。


記述更新 app\models\request.rb
 class Request < ApplicationRecord 

  belongs_to :user 
  belongs_to :category 

  has_one_attached :attachment_file 

  validates :title, presence: { message: "空白にはできません" } 
  validates :description, presence: { message: "空白にはできません" } 
  validates :delivery, numericality: { only_integer: true, message: "数字でなければなりません" } 
end 



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


記述追加 app\models\category.rb(3行目)
has_many :requests



app\models\category.rb
 class Category < ApplicationRecord 
    has_many :gigs 
    has_many :requests 
end 



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


記述追加 app\models\user.rb(4行目)
has_many :requests



app\models\user.rb
 
class User < ApplicationRecord 

  has_many :gigs 
  has_many :requests 
  has_many :buying_orders, foreign_key: "buyer_id", class_name: "Order" 
  has_many :selling_orders, foreign_key: "seller_id", class_name: "Order" 

  has_one_attached :avatar 

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

  validates :full_name, presence: true, length: {maximum: 50}      

  def self.from_omniauth(auth) 
    user = User.where(email: auth.info.email).first 
    if user 
      if !user.provider 
        user.update(uid: auth.uid, provider: auth.provider, image: auth.info.image) 
      end 
      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 



リクエストコントローラを作成します。


コマンド
一文です。
rails g controller Requests index new create edit update show destroy list --no-test-framework


「app\controllers\requests_controller.rb」ファイルを以下のように編集します。


記述編集 app\controllers\requests_controller.rb
 
class RequestsController < ApplicationController 

  before_action :authenticate_user! 
  before_action :set_request, except: [:new, :create, :index, :list] 
  before_action :is_authorised, only: [:edit, :update, :destroy] 
  before_action :set_categories, only: [:new, :edit, :list] 
 
  def index 
    @requests = current_user.requests 
  end 

  def new 
    @request = current_user.requests.build 
  end 

  def create 
    @request = current_user.requests.build(request_params) 
    if @request.save 
      redirect_to requests_path, notice: "保存しました" 
    else 
      redirect_to request.referrer, flash: {error: @request.errors.full_messages.join(', ')} 
    end 
  end 

  def edit 
  end 

  def update 
    if @request.update(request_params) 
      redirect_to requests_path, notice: "保存しました" 
    else 
      redirect_to request.referrer, flash: {error: @request.errors.full_messages.join(', ')} 
    end 
  end 

  def show 
  end 

  def destroy 
    @request.destroy 
    redirect_to requests_path, notice: "削除しました" 
  end 

  def list 
    @category_id = params[:category] 
    if @category_id.present? 
      @requests = Request.where(category_id: @category_id) 
    else 
      @requests = Request.all 
    end 
  end 

  private 
  def set_categories 
    @categories = Category.all 
  end 

  def set_request 
    @request = Request.find(params[:id]) 
  end 

  def is_authorised 
    redirect_to root_path, alert: "あなたに権限はありません。" unless current_user.id == @request.user_id 
  end 

  def request_params 
    params.require(:request).permit(:description, :category_id, :delivery, :budget, :attachment_file, :title) 
  end 

end 



ルートの設定をします。
自動で追加されたものはすべて削除します。


記述追加(2ヶ所) config\routes.rb
16行目に「get '/all_requests', to: 'requests#list'」の記述を追加。
30行目に「resources :requests」の記述追加
 
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' 
  get '/selling_orders', to: 'orders#selling_orders' 
  get '/buying_orders', to: 'orders#buying_orders' 
  get '/all_requests', to: 'requests#list' 

  post '/users/edit', to: 'users#update' 

  put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order' 

  resources :gigs do 
    member do 
      delete :delete_photo 
      post :upload_photo 
    end 
    resources :orders, only: [:create] 
  end 

  resources :requests 

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



「app\views\requests」フォルダにある「create.html.erb」「destroy.html.erb」「update.html.erb」の3ファイルは使用しないので削除して大丈夫です。


ビューを編集していきます。


記述編集 app\views\requests\new.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="form-container"> 
            <p class="title is-4 has-text-centered">どんなお仕事をお探しですか?</p> 
            <%= form_for @request do |f| %> 
                <div class="field"> 
                    <label class="label">タイトル(*)</label> 
                    <%= f.text_field :title, placeholder: "こんなお仕事を探しています", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">内容 (*)</label> 
                    <%= f.text_area :description, placeholder: "こんな内容のお仕事を探しています", class: "textarea" %> 
                </div> 
                <div class="field"> 
                    <label class="label">カテゴリー選択</label> 
                    <div class="select is-fullwidth"> 
                        <%= f.select(:category_id, options_for_select(@categories.map { |c| [c.name, c.id] })) %> 
                    </div> 
                </div> 
                <div class="field"> 
                    <label class="label">期日</label> 
                    <%= f.number_field :delivery, placeholder: "1-30 日", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">予算(円)</label> 
                    <%= f.number_field :budget, placeholder: "最低 500円", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">ファイルのアップロード (オプション)</label> 
                    <div class="file is-warning has-name"> 
                        <label class="file-label"> 
                            <%= f.file_field :attachment_file, class: "file-input" %> 
                            <span class="file-cta"><span class="file-label">ファイルを選択して下さい</span></span> 
                            <span class="file-name" id="file-name">何も選択されていません</span> 
                        </label> 
                    </div> 
                </div> 
                <br/> 
                <div class="field has-text-centered"> 
                    <%= f.submit 'この内容でリクエストする', class: "button is-primary" %> 
                </div> 
              
            <% end %> 
        </div> 
    </div> 
</section> 
<script> 
    $(document).ready(function() { 
        var file = $('.file-input'); 
        file.change(function(e) { 
            if (file[0].files.length > 0) { 
                var attachment = file[0].files[0]; 
                $('.file-name').text(attachment.name + " (" + attachment.size + " bytes)"); 
            } 
        }) 
    }) 
</script> 



ブラウザ確認
http://localhost:3000/requests/new


リクエストの登録ができます。


リクエストの登録



記述編集 app\views\requests\edit.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="form-container"> 
            <p class="title is-4 has-text-centered">どんなお仕事をお探しですか?</p> 
            <%= form_for @request do |f| %> 
                <div class="field"> 
                    <label class="label">タイトル (*)</label> 
                    <%= f.text_field :title, placeholder: "こんなお仕事を探しています", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">内容 (*)</label> 
                    <%= f.text_area :description, placeholder: "こんな内容のお仕事を探しています", class: "textarea" %> 
                </div> 
                <div class="field"> 
                    <label class="label">カテゴリー選択</label> 
                    <div class="select is-fullwidth"> 
                        <%= f.select(:category_id, options_for_select(@categories.map { |c| [c.name, c.id] }, selected: @request.category_id)) %> 
                    </div> 
                </div> 
                <div class="field"> 
                    <label class="label">期日</label> 
                    <%= f.number_field :delivery, placeholder: "1-30 日", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">予算(円)</label> 
                    <%= f.number_field :budget, placeholder: "最低 500円", class: "input" %> 
                </div> 
                <div class="field"> 
                    <label class="label">ファイルのアップロード (オプション)</label> 
                    <div class="file is-warning has-name"> 
                        <label class="file-label"> 
                            <%= f.file_field :attachment_file, class: "file-input" %> 
                            <span class="file-cta"><span class="file-label">ファイルを選択して下さい</span></span> 
                            <span class="file-name" id="file-name">何も選択されていません</span> 
                        </label> 
                    </div> 
                </div> 
                <% if @request.attachment_file.attached? %> 
                    <p> 
                        <%= link_to url_for(@request.attachment_file), 
                                        class: "tag small is-warning m-t-20",  
                                        download: "Attachment_#{@request.attachment_file.id}" do %> 
                            <i class="fas fa-paperclip fa-lg p-r-5"></i> <%= @request.attachment_file.filename %> 
                        <% end %> 
                    </p> 
                <% end %> 
                <div class="field has-text-centered"> 
                    <%= f.submit 'リクエストの内容を更新する', class: "button is-primary" %> 
                </div> 
              
            <% end %> 
        </div> 
    </div> 
</section> 
<script> 
    $(document).ready(function() { 
        var file = $('.file-input'); 
        file.change(function(e) { 
            if (file[0].files.length > 0) { 
                var attachment = file[0].files[0]; 
                $('.file-name').text(attachment.name + " (" + attachment.size + " bytes)"); 
            } 
        }) 
    }) 
</script> 



ブラウザ確認
リクエストの編集ができます。
http://localhost:3000/requests/1/edit


記述編集 app\views\requests\index.html.erb
 
<section class="section"> 
    <div class="container"> 
        <p class="title"> 
            リクエストの確認 
            <%= link_to '新しいリクエストを登録する', new_request_path, class: "button is-primary is-pulled-right"%> 
        </p> 
        <table class="table is-fullwidth"> 
            <thead class="is-centered"> 
                <tr> 
                    <td>リクエスト日</td> 
                    <td>タイトル</td> 
                    <td class="has-text-right">申し込み</td> 
                    <td class="has-text-right">アクション</td> 
                </tr> 
            </thead> 
            <tbody> 
                <% if @requests.blank? %> 
                    <tr> 
                        <td colspan="4" class="has-text-centered"><h1>表示できるリクエストがありません</h1></td> 
                    </tr> 
                <% end %> 
                <% @requests.each do |r| %> 
                    <tr> 
                        <td><%= I18n.l(r.created_at, format: :full_date) %></td> 
                        <td><%= link_to r.title, request_path(r) %></td> 
                        <td class="has-text-right">3</td> 
                        <td class="has-text-right"> 
                            <%= link_to edit_request_path(r), class: "m-r-5" do %> 
                                <span class="icon has-text-success"> 
                                    <i class="far fa-edit fa-lg"></i> 
                                </span> 
                            <% end %> 
                            <%= link_to r, method: :delete, data: {confirm: "削除してよろしいですか?"} do %> 
                                <span class="icon has-text-danger"> 
                                    <i class="far fa-trash-alt fa-lg"></i> 
                                </span> 
                            <% end %> 
                        </td> 
                    </tr> 
                <% end %> 
            </tbody> 
        </table> 
    
    </div> 
</section> 



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


リクエストの一覧表示


リクエストの一覧表示



fakerを使ってランダムなリクエストを登録します。


「db\seeds.rb」ファイルの前回登録した部分(10行目から33行目まで)をコメントアウトします。
コメントアウトは範囲選択して「Ctrl+K」のあとに「Ctrl+C」で一気にできます。
その後、次の記述を追加してください。


記述追加 db\seeds.rb(36行目)
 
10.times do 
    random_user = User.all.sample(1)[0] 
    category = Category.all.sample(1)[0] 
    request = Request.create( 
        title: Faker::Job.title, 
        description: Faker::Quote.matz, 
        budget: Faker::Number.between(500, 5000), 
        delivery: Faker::Number.between(1, 30), 
        user_id: random_user.id, 
        category_id: category.id 
    ) 
end 



db\seeds.rb
 
# This file should contain all the record creation needed to seed the database with its default values. 
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup). 
# 
# Examples: 
# 
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }]) 
#   Character.create(name: 'Luke', movie: movies.first) 
# テストカテゴリーを追加(10個) 
# 10.times do 
#     Category.create( 
#         name: Faker::Job.unique.field 
#     ) 
# end 
# # テストユーザーを追加(5ユーザー パスワードは 123456) 
# 5.times do 
#     user = User.create( 
#         full_name: Faker::Name.name, 
#         email: Faker::Internet.free_email, 
#         about: Faker::Quote.matz, 
#         password: '123456', 
#         from: Faker::Address.country, 
#         language: Faker::Nation.language, 
#         created_at: Date.today 
#     ) 
#     user.avatar.attach(                
#         io: image = open("https://i.pravatar.cc/300"), 
#         filename: "avatar#{user.id}.jpg", 
#         content_type: 'image/jpg' 
#     ) 
# end 

# ランダムなリクエストを10個登録 
10.times do 
    random_user = User.all.sample(1)[0] 
    category = Category.all.sample(1)[0] 
    request = Request.create( 
        title: Faker::Job.title, 
        description: Faker::Quote.matz, 
        budget: Faker::Number.between(500, 5000), 
        delivery: Faker::Number.between(1, 30), 
        user_id: random_user.id, 
        category_id: category.id 
    ) 
end 

コマンド
rails db:seed


データベースを確認します。


ランダムなリクエスト登録



ナビゲーションバーにリンクを追加します。


記述追加 app\views\shared\_navbar.html.erb
79,86,87行目にリンクを追加しています。
  • 79行目:<%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %>
  • 86行目:<%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %>
  • 87行目:<%= link_to 'リクエストの確認', requests_path, class: "navbar-item" %>
 
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
        <a class="navbar-item" href="/"> 
            <h1>テストサイトOshigoto</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-start"> 
            <div class="navbar-item"> 
                <div class="field has-addons"> 
                    <div class="control"> 
                        <input class="input" type="text" placeholder="どんなお仕事を?"> 
                    </div> 
                    <div class="control"> 
                        <a class="button is-success">検索</a> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <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-primary" %> 
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-light" %> 
                    </div> 
                </div> 
            <!-- ログインしていたら --> 
            <% else %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                     <a class="navbar-link"> 
                        <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> 
                        <%= current_user.full_name %> 
                    </a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'ダッシュボード', dashboard_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?) && !current_page?(root_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> 
    <nav class="navbar has-shadow" style="z-index: 5;"> 
        <div class="container"> 
            <div class="navbar"> 
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を売る人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> 
                        <%= link_to '売れた注文の確認', selling_orders_path, class: "navbar-item" %> 
                         <%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %> 
                    </div> 
                </div> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を買う人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to '買った注文の確認', buying_orders_path, class: "navbar-item" %> 
                        <%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %> 
                        <%= link_to 'リクエストの確認', requests_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> 



「app\views\requests\list.html.erb」ファイルを以下の内容に編集します。


記述編集 app\views\requests\list.html.erb
 
<section class="section"> 
    <div class="container"> 
        <p class="title"> 
            全てのリクエスト 
        </p> 
        <div class="card"> 
            <div class="card-header"> 
                <%= form_tag '', method: :get do %> 
                    <div class="field p-10"> 
                        <div class="select"> 
                            <%= select_tag 'category', content_tag(:option, '全てのカテゴリー', value: "") + 
                                                        options_for_select(@categories.map { |c| [c.name, c.id] }, 
                                                        selected: @category_id), 
                                                        onchange: "this.form.submit();" %> 
                        </div> 
                    </div> 
                <% end %> 
            </div> 
            <div class="card-content"> 
                <table class="table is-fullwidth"> 
                    <thead> 
                        <tr> 
                            <th>リクエスト日</th> 
                            <th>買い手</th> 
                            <th>リクエスト</th> 
                            <th class="has-text-centered">申し込み</th> 
                            <th class="has-text-centered">期日</th> 
                            <th class="has-text-centered">予算</th> 
                        </tr> 
                    </thead> 
                    <tbody> 
                        <% if @requests.blank? %> 
                            <tr> 
                                <td colspan="6" class="has-text-centered"><h1>表示できるリクエストがありません</h1></td> 
                            </tr> 
                        <% end %> 
                        <% @requests.each do |r| %> 
                            <tr> 
                                <td><%= I18n.l(r.created_at, format: :full_date) %></td> 
                                <td> 
                                    <figure class="image is-48x48"> 
                                        <%= image_tag avatar_url(r.user), class: "is-rounded" %> 
                                    </figure> 
                                </td> 
                                <td> 
                                    <%= link_to request_path(r), class: "tootip" do %> 
                                        <label for="" class="tooltip" data-tooltip="<%= r.description %>"> 
                                            <%= r.title.truncate(25, seperator: ' ') %> 
                                        </label> 
                                    <% end %> 
                                </td> 
                                <td class="has-text-right">5</td> 
                                <td class="has-text-right"><%= r.delivery %>日</td> 
                                <td class="has-text-right"><%= number_to_currency(r.budget) %></td> 
                            </tr> 
                        <% end %> 
                    </tbody> 
                </table> 
            </div> 
        </div> 
    </div> 
</section> 



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


カテゴリー検索もできます。











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

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

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146