Last Updated: April 04, 2017
·
5.62K
· mariakatosvich

How To Create A default landing page which is auto generated by Rails itself?

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/staticpagescontroller.rb
invoke erb
create app/views/staticpages
invoke test
unit
create test/controllers/staticpagescontrollertest.rb
invoke helper
create app/helpers/static
pageshelper.rb
invoke test
unit
create test/helpers/staticpageshelpertest.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/staticpagescontroller.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.: w w w. xyz .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"