戻る

Rails6.0


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

  (0)
2,000円

タスク7-3   コントローラとビュー

このタスクについて


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




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


コマンド
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」ファイルを以下のように編集します。


1.24~35行目に以下の記述を追加します。
 
<% 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 %>                  



2.115行目に以下の記述を追加します。
 
<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> 
                            </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\users\show.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(@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><% if @user.status %> オンライン <% else %> オフライン <% end %></strong> 
                                        </div> 
                                    </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> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント連携 --> 
                                <article class="media"> 
                                    <div class="content"> 
                                        <p> 
                                            <strong>アカウント連携</strong><br/> 
                                            <% if current_user.provider == 'google_oauth2' %> 
                                                <span class="has-text-success">Googleアカウントでログイン中</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"> 
                    <!-- 購入したプロジェクト --> 
                    <div class="column is-one-third has-text-centered"> 
                    
                    </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> 
                            </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> 




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

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

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

2,000円

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

タスク数: 128