戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク5-1   ステータス表示

このタスクについて


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




ナビゲーションバーのアイコンにステータス表示が出るようにします。


「app\views\shared\_navbar.html.erb」ファイルの記述を更新します。


記述更新 app\views\shared\_navbar.html.erb
36行目の記述を以下の記述に置き換えます。
<figure class="image is-48x48 m-r-5 avatar <%= current_user.status ? "online" : "offline" %>">



app\views\shared\_navbar.html.erb
 
<nav class="navbar is-light" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
        <a class="navbar-item" href="/"> 
            <h1>テストサイトMinpaku6</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> 
        </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-white" %> 
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-white" %> 
                    </div> 
                </div> 
            <!-- ログインしていたら --> 
            <% else %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-item"> 
                        <figure class="image is-48x48 m-r-5 avatar <%= current_user.status ? "online" : "offline" %>"> 
                            <div style="margin-top: 0.6rem;"> 
                            <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                            </div> 
                        </figure> 
                        <%= current_user.full_name %>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                    </a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> 
                        <a href="" class="navbar-item"></a> 
                        <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?) %> 
    <nav class="navbar has-shadow" style="z-index: 3;"> 
        <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_room_path, class: "navbar-item" %> 
                        <%= link_to  "登録したお部屋一覧", rooms_path, class: "navbar-item" %> 
                        <%= link_to "受注予約の管理", your_reservations_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 "ご予約の確認", your_trips_path, class: "navbar-item" %> 
                        <a class="navbar-item"></a> 
                    </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> 





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

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

民泊サイトの構築 Rails6.0

3,000円

Rails6.0で民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装方法解説。
フルカレンダー による予約管理。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 128