学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 62 | Bootstrap | ナビゲーションバー

Bootstrapでの書き直しを行っていきます。


まずはホームページのコントローラ作成です。


コマンド
rails g controller Pages home


ナビゲーションバーを作成していきます。


「app\views」フォルダに「shared」フォルダを新規作成してください。
作成した「shared」フォルダに「_navbar.html.erb」ファイルを新規作成して下さい。



app\views\shared\_navbar.html.erb(新規作成したファイル)

<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;">
  <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
    <!-- もしログインしていなかったら-->

      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <a class="btn btn-light">新規ユーザ登録</a>
      </li>
      <li class="nav-item">
        <a class="btn btn-light">ログイン</a>
      </li>
    <!-- ログインしていたら -->

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">


        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <hr/>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><a href="" class="btn btn-white">ログアウト</a></span>
          
        </div>
      </li>

    </ul>
  </div>
</nav>



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


記述追加 app\views\layouts\application.html.erb(15行目)

<%= render  "shared/navbar" %>



app\views\layouts\application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MinpakuBs</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
  
    <%= render  "shared/navbar" %>

    <%= yield %>
  </body>
</html>



サーバを起動してブラウザ表示を確認します。


ブラウザ確認
http://localhost:3000/pages/home

ナビゲーションバー確認
ナビゲーションバー確認



ブラウザを縮小してスマートフォンでの表示を確認します。
右上にバーガーメニューがでます。

バーガーメニュー
バーガーメニュー


メニューを開く
メニューを開く