14: Adding a Landing page
If you did not do this by now, please implement the three quick tips:
- adding a Boostrap panel
- adding a navbar
- 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
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
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
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
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
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:
- Add a route
- Add an action to the controller
- 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.
get "landing" => "pages#landing"
def landing end
app/views/pages/landing.html.erb: your custom text.
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
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
pages. In that directory (namely
app/assets/stylesheets/pages) create a new file called
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.scssfile. 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"
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:
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
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:
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
Here's how the file content looks like:
After refresh, you will notice the name and icons, now present on the landing page:
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
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:
<%= 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!