戻る

Rails6.0


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

  (0)
3,000円

タスク8-2   コントローラとビュー

このタスクについて


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




メッセージコントローラを作成します。


コマンド
rails g controller messages create


「app\controllers\messages_controller.rb」ファイルを以下のように変更します。


記述変更 app\controllers\messages_controller.rb
 
class MessagesController < ApplicationController 

  def create 
    if current_user.id == message_params[:receiver_id] 
      redirect_to request.referrer, alert: "自分にメッセージを送ることはできません" 
    end 
    conversation = Conversation.where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)", 
                                      current_user.id, message_params[:receiver_id], 
                                      message_params[:receiver_id], current_user.id 
                                    ).first 
    if !conversation.present? 
      conversation = Conversation.create(sender_id: current_user.id, receiver_id: message_params[:receiver_id]) 
    end 
    @message = Message.new(user_id: current_user.id, 
                           conversation_id: conversation.id, 
                           content: message_params[:content] 
    ) 
    if @message.save 
      redirect_to request.referrer, notice: "メッセージを送りました。" 
    else 
      redirect_to request.referrer, alert: "メッセージを送ることができません。" 
    end 
  end 

  private 
  def message_params 
    params.require(:message).permit(:content, :receiver_id) 
  end 
end 



ビューの編集をします。


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


記述更新 app\views\users\show.html.erb
27~38行目、266行目からの記述を変更しています。
コードをコピーしてファイルの内容を置き換えて下さい。
 
<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><%= @user.from %></strong> <i class="toggle far fa-edit" aria-controls="user-from"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-from', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :from, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-from">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </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> <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> 
                                                <%= @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> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>言語</strong> 
                                                <br> 
                                                <%= @user.language %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-language"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-language', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :language, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-language">キャンセル</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 @user.provider %> 
                                                <span class="has-text-success">Facebookでログイン中</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"> 
                    <!-- 登録したお仕事 --> 
                    <% @user.gigs.each do |gig| %> 
                        <div class="column is-one-third"> 
                            <div class="card"> 
                                <div class="card-image"> 
                                    <%= link_to edit_gig_path(gig) do %> 
                                        <figure class="image is-4by3"> 
                                            <%= image_tag gig_cover(gig) %> 
                                        </figure> 
                                    <% end %> 
                                </div> 
                                <div class="card-content p-t-5 p-b-5"> 
                                    <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> 
                                    <span class="star-review"><i class="fa fa-star"></i> 
                                        <%= gig.average_rating %> 
                                        <span class="has-text-primary">(<%= gig.reviews.count %>)</span> 
                                    </span>                                        
                                </div> 
                                <footer class="card-footer"> 
                                    <% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' } %> 
                                    <a class="has-text-danger is-block card-footer-item has-text-right"> 
                                        <% if !basic_price.nil? %> 
                                            <span class="small-title">最低価格</span> 
                                            <strong><%= number_to_currency(basic_price.price) %></strong>                                            
                                        <% else %> 
                                            <strong> 
                                                <span class="small-title has-text-dark">まだ価格がありません</span> 
                                            </strong> 
                                        <% end %> 
                                    </a> 
                                </footer>  
                                
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
                <div class="card"> 
                    <div class="card-header"> 
                        <div class="card-header-title">最新のレビュー</div> 
                    </div> 
                    <div class="card-content"> 
                        <!-- レビュー --> 
                        <% @reviews.each do |r| %> 
                            <article class="media"> 
                                <figure class="media-left"> 
                                    <p class="image is-64x64"> 
                                        <%= image_tag avatar_url(r.buyer), class: "is-rounded" %> 
                                    </p> 
                                </figure> 
                                <div class="media-content"> 
                                    <div class="content"> 
                                        <p> 
                                            <strong><%= r.buyer.full_name %></strong><br> 
                                            <%= r.review %> 
                                        </p> 
                                        <small><%= time_ago_in_words(r.created_at) %></small> 
                                    </div> 
                                </div> 
                                <div class="media-right"> 
                                    <span class="star-review"><i class="fa fa-star"></i> <%= r.stars %></span> 
                                </div> 
                            </article> 
                        <% 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> 
                                <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> 



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


記述更新 app\views\gigs\show.html.erb
129~131行目、165行目から220行目の記述を変更しています。
コードをコピーしてファイルの内容を置き換えて下さい。
 
<% content_for :head do %> 
  <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 
<%= render 'shared/categories' %> 
<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"> 
                                    <p class="title is-4"><%= @gig.title %></p> 
                                </div> 
                                <hr> 
                                <div class="hero-carousel" id="carousel-photo"> 
                                    <% @gig.photos.each do |photo| %> 
                                        <div class="carousel-item has-background image is-16by9"> 
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %> 
                                        </div> 
                                    <% end %> 
                                    <% if @gig.video.present? %> 
                                        <div class="video-container"> 
                                            <iframe src="https://www.youtube.com/embed/<%= @gig.video %>" allowfullscreen></iframe> 
                                        </div> 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- お仕事の内容 --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <p><strong>このお仕事について</strong></p> 
                                        <hr> 
                                        <%= @gig.description %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div>                        
                    </div> 
                    
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 価格プラン --> 
                    <div class="column is-full"> 
                        <div class="tabs is-fullwidth" id="tabs"> 
                            <ul> 
                                <% Pricing.pricing_types.each do |key, value| %> 
                                    <li class="tab <%= 'is-active' if value == 0 %> " 
                                                data-tab="<%= key %>" style="<%= 'display: none' if @gig.has_single_pricing && value != 0 %>"> 
                                        <a> 
                                            <% if value == 0 %> 
                                                ベーシック 
                                            <% elsif value == 1 %> 
                                                スタンダード 
                                            <% else %> 
                                                プレミアム 
                                            <% end %> 
                                        </a> 
                                    </li> 
                                <% end %> 
                            </ul> 
                        </div> 
                        <div class="tabs-content"> 
                            <% @gig.pricings.each do |p| %> 
                                <div class="tab-content" id="tab-<%= p.pricing_type %>" style="<%= 'display: none' if !p.basic? %>"> 
                                    <div class="card"> 
                                        <div class="card-content"> 
                                            <div class="media"> 
                                                <div class="media-content"> 
                                                    <strong><%= p.title %></strong>                                                                                                        
                                                </div> 
                                                <div class="media-right"> 
                                                    <p class="title is-4"><%= number_to_currency(p.price) %></p> 
                                                </div>                                                
                                            </div> 
                                            <div class="content f-15"> 
                                                <p class="m-t-30"><%= p.description %></p> 
                                                <p class="m-t-30"> 
                                                    <strong><i class="far fa-clock"></i> 期日: <%= p.delivery_time %>日</strong>                                                    
                                                </p> 
                                            </div> 
                                            <% if (!user_signed_in? && @gig.active) || (user_signed_in? && @gig.active && @gig.user_id != current_user.id) %> 
                                                <%= link_to "購入する (#{number_to_currency(p.price)})", checkout_path(id: @gig.id, pricing_type: p.pricing_type), class: "button is-fullwidth is-danger" %> 
                                            <% else %> 
                                                <button class="button is-fullwidth is-danger" disabled>購入できません</button>  
                                            <% end %> 
                                          
                                        </div> 
                                    </div> 
                                </div> 
                            <% end %> 
                        </div> 
                    </div> 
                    <!-- プロフィール --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(@gig.user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            <div class="card-content f-15"> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"><%= @gig.user.full_name %></p> 
                                    <% if current_user.id != @gig.user.id %> 
                                      <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a> 
                                    <% end %> 
                                </div> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-user m-r-5"></i> アカウント登録日 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= I18n.l(@gig.user.created_at, format: :full_date) %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= @gig.user.from %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <%= @gig.user.about %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </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(@gig.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> 
                                <li>予算について</li> 
                            </ul> 
                        </div> 
                     </div> 
                </div>   
                <div class="column"> 
                    <%= form_with model: Message.new do |f| %> 
                        <%= f.hidden_field :receiver_id, value: @gig.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> 
<script> 
    BulmaCarousel.attach('#carousel-photo', { 
        slidesToScroll: 1, 
        slidesToShow: 1 
    }); 
    $(document).ready(function() { 
        $('#tabs li').on('click', function() { 
            var type = $(this).data('tab'); 
            $('#tabs li').removeClass('is-active'); 
            $(this).addClass('is-active'); 
            $('.tab-content').hide(); 
            $('#tab-' + type).show(); 
        }) 
    }) 
</script> 



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


記述更新 app\views\requests\show.html.erb
63~65行目、141行目から196行目の記述を変更しています。
コードをコピーしてファイルの内容を置き換えて下さい。
 
<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"> 
                        <p class="title is-4"><%= @request.title %></p> 
                        <article class="media"> 
                            <div class="media-content"> 
                                <p> 
                                    カテゴリー:<%= @request.category.name %> 
                                    <span class="is-pulled-right">リクエスト日: <%= I18n.l(@request.created_at, format: :full_date) %></span> 
                                </p> 
                                期日: <%= @request.delivery %> 日 | 申し込み: <%= @request.offers.count %> | 予算: <%= number_to_currency(@request.budget) %> 
                            </div> 
                        </article> 
                    </div> 
                    <!-- 内容 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <strong>内容</strong> 
                                <hr> 
                                <%= @request.description %> 
                                <% 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> 
                        </div> 
                    </div> 
                    <!-- 買い手について --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <strong>買い手について</strong> 
                                <hr/> 
                                <div class="content"> 
                                    <div class="columns"> 
                                        <!-- 買い手のアバター --> 
                                        <div class="column"> 
                                            <div class="card-content is-horizontal-center is-flex"> 
                                                <figure class="image is-256x256"> 
                                                    <%= image_tag avatar_url(@request.user), class: "is-rounded" %> 
                                                </figure> 
                                            </div> 
                                            <div class="content has-text-centered"> 
                                                <p class="title is-5"><%= @request.user.full_name %></p> 
                                                <% if current_user.id != @request.user.id %> 
                                                    <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a> 
                                                <% end %> 
                                            </div> 
                                        </div> 
                                        <!-- 買い手のプロフィール --> 
                                        <div class="column f-15"> 
                                            <article class="media"> 
                                                <div class="media-content"> 
                                                    <i class="fas fa-user m-r-5"></i> アカウント登録日 
                                                </div> 
                                                <div class="media-right"> 
                                                    <%= I18n.l(@request.user.created_at, format: :full_date) %> 
                                                </div> 
                                            </article> 
                                            <article class="media"> 
                                                <div class="media-content"> 
                                                    <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 
                                                </div> 
                                                <div class="media-right"> 
                                                    <%= @request.user.from %> 
                                                </div> 
                                            </article> 
                                            <article class="media"> 
                                                <div class="media-content"> 
                                                    <%= @request.user.about %> 
                                                </div> 
                                            </article> 
                                            
                                        </div> 
                                    </div> 
                                </div> 
                                    
                            </div> 
                        </div> 
                    </div> 
                    
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="card"> 
                    <%= form_for Offer.new do |f| %> 
                        
                        <div class="card-content"> 
                            <%= f.hidden_field :request_id, value: @request.id %> 
                            <div class="field"> 
                                <label for="" class="label">価格 (円)</label> 
                                <%= f.text_field :amount, class: "input" %> 
                            </div> 
                            <div class="field"> 
                                <label for="" class="label">期日 (日)</label> 
                                <%= f.text_field :days, class: "input" %> 
                            </div> 
                            <div class="field"> 
                                <label for="" class="label">申し込みコメント</label> 
                                <%= f.text_area :note, class: "textarea" %> 
                            </div> 
                            <%= f.submit '申し込みする', class: "button is-primary is-fullwidth" %> 
                        </div> 
                    <% end %> 
                </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(@request.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> 
                                <li>予算について</li> 
                            </ul> 
                        </div> 
                     </div> 
                </div>   
                <div class="column"> 
                    <%= form_with model: Message.new do |f| %> 
                        <%= f.hidden_field :receiver_id, value: @request.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> 






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

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

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

3,000円

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

タスク数: 146