戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク2-3   ナビゲーションバー(Bootstrap)

このタスクについて


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




サイト

getbootstrap.com


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


1.記述追加 app\views\layouts\application.html.erb(13行目)
<%= render 'shared/navbar' %>



2.記述追加 app\views\layouts\application.html.erb(19行目)
「<%= yield %>」の記述の前後にdivタグを記述しています。
 <div class="container"> 
    <%= yield %> 
</div> 



app\views\layouts\application.html.erb
 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Minpaku</title> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
  </head> 
  <body> 
    <!-- _navbar.html.erb をレンダーする --> 
    <%= render 'shared/navbar' %> 
    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %></p> 
    <!-- ページをコンテナに格納 --> 
    <div class="container"> 
      <%= yield %> 
    </div> 
  </body> 
</html> 



「app\views\view」フォルダに「shared」フォルダを新規作成
作成した「shared」フォルダに「_navbar.html.erb」ファイルを新規作成



app\views\shared\_navbar.html.erb (新規作成したファイル)
 
<!-- ナビゲーションバー --> 
<nav class="navbar navbar-default navbar-static-top"> 
  <div class="container"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">ナビゲーション トグル</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">テストサイトMinpaku</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
        <% if (!user_signed_in?) %> 
            <li><%= link_to "ログイン", new_user_session_path %></li> 
            <li><%= link_to "新規ユーザ登録", new_user_registration_path %></li> 
        <% else %> 
            <li class="dropdown"> 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
                <%= current_user.email %> 
                <span class="caret"></span> 
              </a> 
              <ul class="dropdown-menu"> 
                <li><a href="#"></a></li> 
                <li><a href="#"></a></li> 
                <li><a href="#"></a></li> 
                <li><a href="#"></a></li> 
                <li role="separator" class="divider"></li> 
                <li><%= link_to "ユーザ登録情報修正", edit_user_registration_path %></li> 
                <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li> 
              </ul> 
            </li> 
        <% end %> 
      </ul> 
    </div> 
  </div> 
</nav> 



ホームページのコントローラを作成します。
Webサーバ「Puma」は「control + C」で停止できます。


コマンド
rails g controller Pages home


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

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

民泊サイトの構築 Rails5.0

2,000円

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

タスク数: 136