[Ruby] Creating an EC site with Rails 5 ④-Header and footer-

5 minute read

Introduction

This is a continuation of the series Create an EC site with Rails 5 ③, a series for creating an EC site where you can shop at a fictitious bakery. This time, we will make the header and footer. Since it is a big deal, I decided to make it responsive.

Source code

https://github.com/Sn16799/bakeryFUMIZUKI

Color scheme

As an aside, I decided the theme color for the entire site. The store name (fictitious) is Bunetsu, so I’ll put it together in a summer blue color. I will also post the color code. For your information.

Dark blue……#120136, rgb(18,1,54) Middle blue……#035aa6, rgb(3,90,166) Light blue……#40bad5, grb(64,186,213) One point yellow……#fcbf1e, rgb(252,191,30)

header

Create a partial template for the header in app/views/layouts. The file name is _header.html.erb.

The condition is branched so that the display changes in three patterns: when logged in as an administrator, when a customer logs in, and when not logged in. I want to display the message “Welcome, Mr. XX!” when the customer logs in, but since the last name and last name are stored separately in the database, the view code becomes complicated. Therefore, add it to the file of Model so that the character string that concatenates the surname and the first name can be output.

app/model/customer.rb


def full_name
  self.family_name + "" + self.first_name
end

Now, if you type full_name in view or controller, you can display it with full name!

app/views/layouts/_header.html.erb


<header class="container-fluid middle-blue-back">
  <nav class="navbar navbar-expand-lg">
    <!-- Logo image. I will replace it later. -->
    <div>
      <%= link_to customer_top_path, style:'color: #fcbf1e' do %>
      <h1>LOGO</h1>
      <% end %>
    </div>

    <!-- Toggle button that appears only when the screen width becomes narrower -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFumizuki" aria-controls="navbarFumizuki" aria-expanded="false" aria-label="Toggle navigation ">
    <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Various links. The display is switched when the administrator logs in, when the customer logs in, and when not logged in. -->
    <div class="collapse navbar-collapse" id="navbarFumizuki">
      <!-- admin -->
      <ul class="navbar-nav mr-auto w-75 nav-justified">
        <% if admin_signed_in? %>
          <div class="admin-message">You are logged in as an administrator</div>
          <li class="nav-item"><%= link_to'Product list', admins_products_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'Member List', admins_customers_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'Order history list', admins_orders_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'Genre management', admins_genres_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'logout', destroy_admin_session_path, method: :delete, class:'nav-link' %></li>
        <!-- Customer -->
        <% elsif customer_signed_in? %>
          <li class="nav-item"><%= link_to'About', customer_about_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'My Page', customer_path(current_customer.id), class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'Product list', products_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'cart', cart_items_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'logout', destroy_customer_session_path, method: :delete, class:'nav-link' %></li>
        <!-- Non-login -->
        <% else %>
          <li class="nav-item"><%= link_to'About', customer_about_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'Product list', products_path, class:'nav-link' %></li>
          <li class="nav-item" ><%= link_to'new registration', new_customer_registration_path, class:'nav-link' %></li>
          <li class="nav-item"><%= link_to'login', new_customer_session_path, class:'nav-link' %></li>
        <% end %>
      </ul>
      <!-- message (customer) or search window (admin) -->
      <% if customer_signed_in? %>
        <p>Welcome <%= current_customer.full_name %>! </p>
      <% else admin_signed_in? %>
        <!-- Search form is provisional. Make something that works later and replace it. -->
        <form class="form-inline my-2 my-lg-0">
        <input type="search" class="form-control mr-sm-2" placeholder="Search..." aria-label="Search...">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0">Search
        </button>
</form>
      <% end %>
    </div>
  </nav>
</header>

footer

It may or may not have any special features, but I will make it because I am lonely without it.

app/views/layouts/_footer.html.erb


<div class="container-fluid middle-blue-back">
  <h3 class="footer-message">Bakery FUMIZUKI</h3>
</div>

It has a simple structure with a blue background and yellow “Bakery FUMIZUKI” in the center.

Make a rough framework

Edit application.html.erb to adjust the site-wide layout. We will also load the header and footer we created earlier.

app/views/layouts/application.html.erb


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

    <%= stylesheet_link_tag'application', media:'all','data-turbolinks-track':'reload' %>
    <%= javascript_include_tag'application','data-turbolinks-track':'reload' %>

    <!-- Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <!-- font awsome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>

  <body>
    <%= render'layouts/header' %><div class="container-fluid">
      <div class="row">
        <%= yield %>
      </div>
    </div>
    <%= render'layouts/footer' %>
  </body>
</html>

Swiper in the middle is a library for displaying photos as slides. I won’t use it in this article, but I’ve included it because I think it will be taken care of because it is convenient. Below that, font-awsome is a convenient site where you can use many icons for free just by copying the link. I think I’ll use this one too soon.

Decorated with # scss Set various colors for the class name written on the HTML side.

app/assets/stylesheets/application.scss


@import'bootstrap';

.middle-blue-back {
  background-color: #035aa6
}

.light_blue_letter {
 color: #40bad5
}

.footer-message {
  line-height: 100px;
  text-align: center;
  color: #fcbf1e
}

// header
.navbar-toggler {
  border-color: #40bad5;
}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(64,186,213)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-link {
  color: #40bad5;
}

Craft the top page

I wanted to check what the color sample selected as the theme color would look like in the browser, so I tried it on the top page. I will erase it later when writing the official top page.

html:app/views/homes/top.html.erb


<div class="col">
  <h1>Homes#top</h1>
  <div class="row">
    <div class="col-3" style="height: 100px; background-color: #120136"></div>
    <div class="col-3" style="height: 100px; background-color: #035aa6"></div>
    <div class="col-3" style="height: 100px; background-color: #40bad5"></div>
    <div class="col-3" style="height: 100px; background-color: #fcbf1e"></div>
  </div>
</div>

Try to access localhost:3000. fumizuki_top.jpg

Both the header and footer are displayed without any problems.

toggle.jpg

When I narrowed the screen width with the developer tool, it became a hamburger icon properly!

Postscript

Bootstrap makes it responsive and easy, and I think it’s a really useful feature. I’ve written some CSS, but I’m just specifying colors. Since the color code is only 4 colors, I think that the amount of CSS code will hardly increase even if the entire application is completed.

Also, those who have read up to this point may think that it is faint. I am also a little concerned. The theme color of the site, like I’ve seen it somewhere.

Yes. **It’s completely IEA. I did not notice until I displayed it on the site, so I was surprised after writing the code. I like IK●A, so it’s okay, but I don’t think I like it or anything else, so I’m wondering if I continued implementing it. Once you look like IKE●, it’s also a difficult point to think “everything in this store doesn’t sell bread” ** whenever you visit the site.

Will I be able to complete the site without being offended by KEA? Continue to Next time!

Reference

Bootstrap4 migration guide Bootstrap4 Japanese Reference Introduction to Tohohono Bootstrap 4 How to change the color of Bootstrap 4 hamburger menu