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

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

Rails6.0 | 民泊予約サイトの構築 | 63 | Bootstrap | デバイス(devise)

[62]Bootstrap |ナビゲーションバー<< [ホームに戻る] >> [64]Bootstrap | 氏名認証


デバイスの設定部分は「06 | デバイス(devise)」と同じです。
Bootstrap用に書き換えた部分を載せていきます。


ナビゲーションバーに「新規ユーザ登録」「ログイン」「ログアウト」のリンクを追加する変更です。


記述更新 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">
    <!-- もしログインしていなかったら-->
    <% if (!user_signed_in?) %>
      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %>
      </li>
      <li class="nav-item">
        <%= link_to  "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %>
      </li>
    <!-- ログインしていたら -->
    <% else %>
      <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">

        <%= current_user.email %>

        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span>
          <hr/>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span>
        </div>
      </li>
    <% end %>
    </ul>
  </div>
</nav>

<% if (user_signed_in?) %>

  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 3;">

    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;">
        <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span>
        </li>

        <li class="nav-item dropdown" style="margin-right: 50px;">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-hospital-symbol"></i>&nbsp;ホスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="fas fa-edit"></i></i></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i></span>
            <span class="dropdown-item"><i class="far fa-calendar-alt"></i></span>
          </div>
        </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">
          <i class="fas fa-user-friends"></i>&nbsp;ゲスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="far fa-list-alt"></i></span>
            <span class="dropdown-item"><i class="far fa-credit-card"></i></span>
          </div>
        </li>

      </ul>
    </div>
  </nav>
<% end %>



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


「新規ユーザ登録」ボタンを押します。

新規ユーザ登録
新規ユーザ登録



メールアドレス、パスワードを2回入力して「sign up」ボタンを押します。

サインアップ
サインアップ



ドロップダウンメニューで「ログアウト」できます。

ドロップダウンメニュー
ドロップダウンメニュー



Posticoでユーザテーブルを確認してみます。
Windowsの場合はHeidiSQLで確認します。

ユーザテーブル確認
ユーザテーブル確認

ユーザテーブル確認
ユーザテーブル確認


↓↓クリックして頂けると励みになります。


[62]Bootstrap |ナビゲーションバー<< [ホームに戻る] >> [64]Bootstrap | 氏名認証

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)