How to Create Static Pages in a Ruby on Rails application

By:, On:

Alright, we have created our first application in Ruby on Rails. The problem with this is that it only presents a default landing page which is auto generated by Rails itself. This is not very useful. We want our application to start serving some content that is meaningful to the users of our app.

Our first step in building some functionality into our application will be giving an ability to present some static pages to the user, for example, the home page or the contact page. Of course, "static" doesn't mean that those pages won't be able to do some cool stuff.

Step 1: Generate a Controller

We will start by creating a 'Controller'. A controller is one of three main types of files we will be creating along the way. The other two are "Model" and "View". All three together form the MVC (Model, View, Controller) architecture that is used to organize the code inside of an application. Each element of MVC has a different role and as we go along, you will learn how we utilize their abilities.

Let's go ahead and use rails generator. Navigate to the folder from your Terminal

bash


$ cd Documents/projects #depending where you put your application

As a reminder: use $ ls to see the contents of folder you're currently inside. Once you're inside the app you can generate new controller:


$ rails generate controller static_pages

This will generate several files:


create  app/controllers/static_pages_controller.rb
invoke  erb
create  app/views/static_pages
invoke  test_unit
create  test/controllers/static_pages_controller_test.rb
invoke  helper
create  app/helpers/static_pages_helper.rb
invoke  test_unit
create  test/helpers/static_pages_helper_test.rb
invoke  assets
invoke  coffee
create  app/assets/javascripts/static_pages.js.coffee
invoke  scss
create  app/assets/stylesheets/static_pages.css.scss

  • app/controllers/static_pages_controller.rb - actual controller
  • app/views/static_pages - folder that will hold our HTML templates
  • test/controllers/static_pages_controller_test.rb - test file for the controller
  • app/helpers/static_pages_helper.rb - helper file
  • test/helpers/static_pages_helper_test.rb - test file for the helper
  • app/assets/javascripts/static_pages.js.coffee - coffee script file
  • app/assets/stylesheets/static_pages.css.scss - CSS file

In this tutorial we will only use controller and folder for views. Our goal here is not to do proper TDD (Test Driven Development). If you're interested in writing tests with RSpec, I highly recommend going to Michael Hartl's tutorial.

Step 2: Modify the Static Pages

Let's have a look at the controller:

app/controllers/static_pages_controller.rb


class StaticPagesController < ApplicationController
end

Controller is now empty. You can see two lines were automatically created when we ran the generator. We will put all our new code between the opening line and the "end". Let's go and create the first custom "action" for the home page:


class StaticPagesController < ApplicationController
    def home
    end
end

Step 3: Create a Home File

We have defined a custom action and called it "home." The Rails framework is smart enough and will try to send to the user an HTML template that matches name of the controller action, so we need to create one. Inside the folder app/views/static_pages create a new file and call it home.html.erb

app/views/static_pages/home.html.erb


<h1>This is the home page</h1>

Step 4: Create a Route

We're almost done. All that's left is to tell the app at what URL this action can be reached. We need to create a "route". All routes are defined in the file inside the config folder:

config/routes.rb


Rails.application.routes.draw do
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  # root 'welcome#index'

  # Example of regular route:
  #   get 'products/:id' => 'catalog#view'

  # Example of named route that can be invoked with purchase_url(id: product.id)
  #   get 'products/:id/purchase' => 'catalog#purchase', as: :purchase

  # Example resource route (maps HTTP verbs to controller actions automatically):
  #   resources :products

  # Example resource route with options:
  #   resources :products do
  #     member do
  #       get 'short'
  #       post 'toggle'
  #     end
  #
  #     collection do
  #       get 'sold'
  #     end
  #   end

  # Example resource route with sub-resources:
  #   resources :products do
  #     resources :comments, :sales
  #     resource :seller
  #   end

  # Example resource route with more complex sub-resources:
  #   resources :products do
  #     resources :comments
  #     resources :sales do
  #       get 'recent', on: :collection
  #     end
  #   end

  # Example resource route with concerns:
  #   concern :toggleable do
  #     post 'toggle'
  #   end
  #   resources :posts, concerns: :toggleable
  #   resources :photos, concerns: :toggleable

  # Example resource route within a namespace:
  #   namespace :admin do
  #     # Directs /admin/products/* to Admin::ProductsController
  #     # (app/controllers/admin/products_controller.rb)
  #     resources :products
  #   end
end

All lines starting with # are ignored by our application.

I recommend you read the commented out lines. We will eventually use most of them. For now however, let's define the "root" of our application. This will be the "landing" page of our application. The one that people will see when they come to the root of the website, when the URL will contain only the basic address e.g.: www.peoplecancode.com

To do that, let's uncomment (by removing # symbol) the line with root and modify it so that it points to our new controller and action that we created:


root 'static_pages#home'

This can be read like: When the user types the URL of the website, take him to controller called "static_pages" and the action inside this controller will be called "home".

Step 5: Run Rails Server

You can now save all the files we have created and start the server if you are not running it yet.Finally, type in your terminal:

bash


$ rails server

Open your browser and go to URL: localhost:3000

You should now see "This is the home page"

If you login you will be able to mark this tutorial as finished to track your progress



Comments

  • On: Frank wrote:

    Nice, straightforward, easy to follow!
  • On: 4goodapp wrote:

    +1

  • On: Marius wrote:

    i like it . easy.

  • On: richard.Garcia wrote:

    +1

Comment

You can login to comment