Skip to content

Backend Training: Layout Setup

Nelson Lee edited this page Dec 1, 2017 · 6 revisions

Usually, when you are assigned to set up the backend of a project, you will be provided with a low/high fidelity mockup. Then you will use this as the guideline to setup up the controller, models, and views for the frontend developer.

The frontend framework we use is Bootstrap. We are currently on Bootstrap 3.3 and is subjected to upgrade to Bootstrap 4 when it becomes stable. For Rails compatible bootstrap gem it is located inside your Gemfile gem 'bootstrap-sass'. If you would like to browse the source code please see official repositories.

Create Static Pages

🔖 : Rails Generators

# Create home controller resources
$ rails g controller home

Setup Controller Actions & Routes

🔖 : Slim, Layout

From the mockup, we see that we have these static pages

  • Home
  • Pricing

Create the associated controller actions

# app/controllers/home_controller.rb
class HomeController < ApplicationController

  def index; end

  def pricing; end

end

Create the associated view templates

Inside project directory create the following files

# app/views/home/index.slim
h1 Hello World!
# app/views/home/pricing.slim

Add the routes

🔖 Resource Routing

Rails.application.routes.draw do
  .......

  # route to home#pricing
  get '/pricing' => 'home#pricing', as: :pricing

  # add a root for the project
  root 'home#index'
end

Run the following command to see the routes

$ rails routes
      pricing GET        /pricing(.:format)                        home#pricing
         root GET        /                                         home#index

Start the server and you should see Hello World!

$ rails s

Create The Layout

🔖 : Layout, Partial, Bootstrap 3.3, Overcommit, Draper, RSpec

In the prototype, the following components are used across the entire site so let's create them using bootstrap components.

  • navbar(doc)
  • footer

Create the following files

/ app/views/components/_navbar.slim
nav.navbar.navbar-default
  .container-fluid
    .navbar-header
      button.navbar-toggle.collapsed[type="button" data-toggle="collapse" data-target="#main-nav" aria-expanded="false"]
        span.sr-only
          | Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand[href="#"]
        | Logo
    .collapse.navbar-collapse[id='main-nav']
      ul.nav.navbar-nav.navbar-right
        li= link_to 'home', root_path
        li= link_to 'about', '#about'
        li.dropdown
          a.dropdown-toggle[href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"]
            | pricing
            span.caret
          ul.dropdown-menu
            li= link_to 'Basic Package', pricing_path
            li= link_to 'Advanced Package', pricing_path
/ app/views/components/_footer.slim
footer
  .container
    .row
      .col-md-12.text-center
        h6 2017 © Clever Banana Studios Inc. All Rights Reserved.

Add these two components to the layout file

/ app/views/layouts/application.slim
doctype html
html
  head
    / ...
  body[class=rails_route]
    = render 'components/navbar'
    = yield
    = render 'components/footer'

Refresh the browser Command ⌘+r and you should see the added components.

Commit your changes

$ git add -A
$ git commit -m 'Setup layout components'
Errors on modified lines:
/Users/ilunglee/Work/rails/mock_project/app/decorators/home_decorator.rb:1:1: C: Style/Documentation: Missing top-level class documentation comment.
/Users/ilunglee/Work/rails/mock_project/app/decorators/home_decorator.rb:2:1: C: Layout/EmptyLinesAroundClassBody: Empty line missing at class body beginning.
/Users/ilunglee/Work/rails/mock_project/spec/controllers/home_controller_spec.rb:4:1: C: Layout/EmptyLinesAroundBlockBody: Extra empty line detected at block body beginning.

Oops... seems like overcommit found some errors. Let's go ahead a fix them

We don't need the following files since draper decorators decorate database models and home is not a database model so let's go ahead remove

  • app/decorators/home_decorator.rb
  • spec/decorators/home_decorator_spec.rb

The following files temporary by adding pending "add some examples to (or delete) #{__FILE__}". This is to remind us to come back to fix this file later on.

# spec/controllers/home_controller_spec.rb
RSpec.describe HomeController, type: :controller do
  pending "add some examples to (or delete) #{__FILE__}"
end

Run RSpec to ensure it's working

$ rspec spec
**

Pending: (Failures listed here are expected and do not affect your suite's status)

  1) HomeController Add specs for HomeController
     # Not yet implemented
     # ./spec/controllers/home_controller_spec.rb:4

  2) AdminUser add some examples to (or delete) /Users/ilunglee/Work/rails/mock_project/spec/models/admin_user_spec.rb
     # Not yet implemented
     # ./spec/models/admin_user_spec.rb:4


Finished in 0.07866 seconds (files took 5.67 seconds to load)
2 examples, 0 failures, 2 pending

Commit your code again to continue to next step. You should be able to pass the overcommit hooks this time.

$ git add -A
$ git commit -m 'Setup layout components'
Clone this wiki locally