14: Adding a Landing page

If you did not do this by now, please implement the three quick tips:

  1. adding a Boostrap panel
  2. adding a navbar
  3. styling buttons

They will serve as a warm-up.

We're also kindly asking you to review the section on how Rails works, to navigate easily through this section.

Adding new pages

Any page is a view that is returned by our Rails app as a response to a request from the browser. The browser requests a URL from your Rails app. Therefore, we first need to define what our URL will be.

For our app, we'll choose features. Therefore, if our app would be hosted at casemanagementsystem.md, the user would be able to visit the new page at casemanagementsystem.md/features.

If we want to add our URLs, we need an action and a controller. For my case, I will call the controller Pages and the action features.

Open the file config/routes.rb and add the following line (after root to: "cases#index"):

get "features" => "pages#features"

Then, from your terminal, run:

$ rake routes

In the output you will see the following line:

features GET    /features(.:format)            pages#features

Now run your app using

$ rails server

and open your browser to http://localhost:3000/features. You should see the following:

Rails tried to find the action features in the controller pages, but it doesn't exist. Create a new file called pages_controller.rb in app/controllers/ and type in the following:

class PagesController < ApplicationController  
end

Save, refresh the page and see the following:

This looks familiar. Rails tells us that it couldn't find an action! Let's create an empty action. Write the following code in the app/controllers/pages_controller.rb, inside the classs (between the class declaratin and the end):

  def features
  end

Save the file, refresh the page:

Rails has successfully directed the request towards the action of the controller, but could not find a suitable view!

Let's create one. Create a folder under app/views, called pages (since the controller is called Pages). Inside the folder create a file called features.html.erb, as per the action name.

Write anything into it, save and refresh the page:

Now we have a features page.

Adding a landing page

Repeat the previous exercise, but this time instead of a features page, create a landing page. Remember what you need to do:

  1. Add a route
  2. Add an action to the controller
  3. Create a view

It doesn't matter what is the view you use right now, we will replace that soon.

Spoiler altert! Do not read the following unless you've tried to do the landing page yourself.

  1. In config/routes.rb: get "landing" => "pages#landing"
  2. In app/controllers/pages_controller.rb: 
    def landing
end
  3. In app/views/pages/landing.html.erb: your custom text.

Importing pages

One of the good things about Bootstrap is that there are lots of things on the Internet about it. In particular, we found a website that offers a couple of easy-to-use templates. We'll start with a beautiful landing page template.

Go to the link above and choose to download the archive.

If you extract the archive, you should see the following file hierarcy:

├── LICENSE
├── README.md
├── css
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   └── landing-page.css
├── font-awesome
│   ├── css
│   │   ├── font-awesome.css
│   │   └── font-awesome.min.css
│   ├── fonts
│   │   ├── FontAwesome.otf
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   └── fontawesome-webfont.woff
│   ├── less
│   │   ├── bordered-pulled.less
│   │   ├── core.less
│   │   ├── fixed-width.less
│   │   ├── font-awesome.less
│   │   ├── icons.less
│   │   ├── larger.less
│   │   ├── list.less
│   │   ├── mixins.less
│   │   ├── path.less
│   │   ├── rotated-flipped.less
│   │   ├── spinning.less
│   │   ├── stacked.less
│   │   └── variables.less
│   └── scss
│       ├── _bordered-pulled.scss
│       ├── _core.scss
│       ├── _fixed-width.scss
│       ├── _icons.scss
│       ├── _larger.scss
│       ├── _list.scss
│       ├── _mixins.scss
│       ├── _path.scss
│       ├── _rotated-flipped.scss
│       ├── _spinning.scss
│       ├── _stacked.scss
│       ├── _variables.scss
│       └── font-awesome.scss
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── img
│   ├── banner-bg.jpg
│   ├── dog.png
│   ├── intro-bg.jpg
│   ├── ipad.png
│   └── phones.png
├── index.html
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── jquery.js

9 directories, 52 files

Let's first take the index.html from the archive, open it using Sublime Text (just drag and drop it into Sublime Text), copy just what's between and (lines 35-231, inside the <body> </body> tags) into your newly created app/views/landing.html.erb.

Now refresh your app (at http://localhost:3000/landing) and see the following:

This is what you get for blind copy and paste. Time to figure out how to adapt the template.

The CSS files

Now go back to the archive and open the file css/landing-page.css. You'll see a whole bunch of things there! Select all of the contents of the file and copy it.

Go back to your Rails app structure and create a new folder under app/assets/stylesheets called pages. In that directory (namely app/assets/stylesheets/pages) create a new file called landing.css.

Open the newly created landing.css file and into it paste the whole contents.

Now refresh your page. You should see the following:

If you don't see this, you may need to make small adjustments to the app/assets/application.scss file. It should look like this:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 *= require_tree .
 */

@import "bootstrap-sprockets";
@import "bootstrap"

The images

First, copy the whole img folder from the theme and put it in your Rails app under assets/images. You should get a hierarcy like app/assets/images/img/*.png, like this:

app/assets
├── images
│   └── img
│       ├── banner-bg.jpg
│       ├── dog.png
│       ├── intro-bg.jpg
│       ├── ipad.png
│       └── phones.png
├── javascripts
│   └── application.js
└── stylesheets
    ├── application.scss
    └── pages
        └── landing.css

Now refresh the page and here's what we see:

Not all images are displayed. This is because Rails cannot properly find some of the images. We will get into why a bit later, but for now, we can fix that using an image_tag instead of an img.

Open the file app/views/pages/landing.html.erb , and change the lines 81, 103, and 125 from something like this:

<img class="img-responsive" src="img/ipad.png" alt="">

to something like this:

<%= image_tag "img/ipad.png", class: "img-responsive" %>

Do that for all three images. (To be sure, stop and restart the Rails server). Refresh the page:

The fonts

A couple more things left on this page and we're done. The first one is the fonts. The page uses some icon fonts (those are just icons, but written like text) that are found on Font Awesome, so let's include these.

Go to the file app/views/layouts/application.html.erb and you can find a section between <head> and </head>. Now paste the following code there:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

While you're editing the file, you can write your application's name between the <title></title> tags.

Here's how the file content looks like:

<!DOCTYPE html>
<html>
<head>
  <title>Case management system</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>

<%= yield %>

</body>
</html>

After refresh, you will notice the name and icons, now present on the landing page:

Customize

First of all, open the file app/views/pages/landing.html.erb and use the Find -> Find... menu (or Ctrl + F) to find the text or component you'd like to replace. Then, replace it!

Same goes for the images. As long as you put them somewhere in the app/assets/images, you can reference them using an image_tag.

If you need to add a link, here's what you can do. First, open your terminal and run:

> rake routes

Then identify the page you want to link to. For instance, I'd like to link to /users/sign_up. I see that the path name is new_user_registration. So I will replace a link from the navbar from this:

<a href="#about">About</a>

to this:

<%= link_to("Sign up now", new_user_registration_path)%>

Feel free to make any changes you want - get creative and don't hesitate to ask your mentors for help.

I was not very creative, so this is what my custom landing page looks like after a few tweaks:

Making the new page a landing page

After you've finished customizing your landing page, you probably want to make it the default page your users see.

To do this, replace the line from config/routes.rb using instead of:

root to: "cases#index"

the following code:

root to: "pages#landing"

Now just go to http://localhost:3000 and your new landing page will greet you!

results matching ""

    No results matching ""