戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク2-10   アイコン

このタスクについて


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




「Font Awesome」のアイコンを使えるようにします。
fontawesome.com


「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\layouts\application.html.erb(13行目)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">



app\views\layouts\application.html.erb
 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Minpaku6</title> 
    <%= csrf_meta_tags %> 
    <%= csp_meta_tag %> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- Googleフォント --> 
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> 
    <!-- アイコン Font Awesome --> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 
  </head> 
  <body> 
    <!-- ナビゲーションバー --> 
    <%= render  "shared/navbar" %> 
    <!-- noty --> 
    <%= render 'shared/notification' %> 
    <%= yield %> 
  </body> 
</html> 



「フルコード」の「サンプル画像」フォルダから「icon_add.png」「icon_default_avatar.jpg」「blank.jpg」の3ファイルを「app\assets\images」フォルダの中にコピーしておいて下さい。


ダッシュボードページを更新します。


記述更新 app\views\users\dashboard.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 'icon_default_avatar.jpg' %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                                <!-- 画像アップロードボタン --> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"> 
                                        <%= current_user.full_name %> 
                                    </p> 
                                    <button class="button is-primary is-outlined is-fullwidth">アバター画像アップロード</button> 
                                </div> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント情報 --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(current_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 current_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> 
                                                <%= current_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 class="media"> 
                                </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 class="column is-one-third has-text-centered"> 
                    </div> 
                    
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 



アイコンをクリックしたらフォームが開くようにします。


記述追加 app\javascript\packs\application.js(13行目)
 
$(document).ready(() => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 



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

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

民泊サイトの構築 Rails6.0

3,000円

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

タスク数: 128