Hello World! An Introduction to Controllers, Views, and Layouts in Ruby on Rails

The following article describes how to build a simple Hello World application in Ruby on Rails. It introduces the reader to the creation of a new application and to the basic notions of controllers, views and layouts.

Liked it? !

The following posts are based on a Ruby on Rails workshop I am teaching in Thimphu, Bhutan. It is not a complete tutorial since it does not include explanations. It may in the future but I do not know when I will have time to add them, so I am publishing it now as is to make it available to others that may find it useful. The sketches describe how to progressively build an Image Management System from the ground-up.

Index

1. Creating an application for the first time
2. Creating the first controller and action
3. Creating the first view
4. Passing information
   1. From the controller to the view
   2. Via the URL
5. Using expressions
6. Using cycles
7. Adding a link
8. Sending information through the link
9. Creating the first layout

 

Creating an application for the first time

To create an application, type into the command-line:

rails ims

Output:

create create app/controllers create app/helpers create app/models create app/views/layouts create config/environments create components create db create doc create lib create lib/tasks create log create public/images create public/javascripts create public/stylesheets create script/performance create script/process create test/fixtures create test/functional create test/integration create test/mocks/development create test/mocks/test create test/unit create vendor create vendor/plugins create tmp/sessions create tmp/sockets create tmp/cache create tmp/pids create Rakefile create README create app/controllers/application.rb create app/helpers/application_helper.rb create test/test_helper.rb create config/database.yml create config/routes.rb create public/.htaccess create config/boot.rb create config/environment.rb create config/environments/production.rb create config/environments/development.rb create config/environments/test.rb create script/about create script/breakpointer create script/console create script/destroy create script/generate create script/performance/benchmarker create script/performance/profiler create script/process/reaper create script/process/spawner create script/process/inspector create script/runner create script/server create script/plugin create public/dispatch.rb create public/dispatch.cgi create public/dispatch.fcgi create public/404.html create public/500.html create public/index.html create public/favicon.ico create public/robots.txt create public/images/rails.png create public/javascripts/prototype.js create public/javascripts/effects.js create public/javascripts/dragdrop.js create public/javascripts/controls.js create public/javascripts/application.js create doc/README_FOR_APP create log/server.log create log/production.log create log/development.log create log/test.log

To start server, type into the command-line:

ruby script/server

Output:

=> Booting Mongrel (use 'script/server webrick' to force WEBrick) => Rails application starting on http://0.0.0.0:3000 => Call with -d to detach => Ctrl-C to shutdown server ** Starting Mongrel listening at 0.0.0.0:3000 ** Starting Rails with development environment... ** Rails loaded. ** Loading any Rails specific GemPlugins ** Signals ready. INT => stop (no restart). ** Mongrel available at 0.0.0.0:3000 ** Use CTRL-C to stop.

Test in browser by typing into the address bar:

http://localhost:3000/

Output will be a Welcome Abroad initial page.

Creating the first controller and action

Type into the command-line:

ruby script/generate controller say

Output:

exists app/controllers/ exists app/helpers/ create app/views/say exists test/functional/ create app/controllers/say_controller.rb create test/functional/say_controller_test.rb create app/helpers/say_helper.rb

To the file app/controllers/say_controller.rb with this generated content:

class SayController < ApplicationController end

add the action hello:

class SayController < ApplicationController def hello render_text 'Hello world!' end end

Test in browser by typing into the address bar:

http://localhost:3000/say/hello

Creating the first view

Get rid of the body of the hello action:

class SayController < ApplicationController def hello end end

To the folder app/views/say add the file hello.rhtml with the following content:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i>world</i>!</p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello

Passing information

From the controller to the view

Update app/controllers/say_controller.rb to:

class SayController < ApplicationController def hello @time = Time.now end end

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i>world</i>!</p> <p>It is <%= @time %>.</p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello

Via the URL

Update app/controllers/say_controller.rb to:

class SayController < ApplicationController def hello @name = params[:id] @time = Time.now end end

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i><%= @name %></i>!</p> <p>It is <%= @time %>.</p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello/andres

Using expressions

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i><%= "#{@name} " * 3 %></i>!</p> <p>It is <%= @time %>.</p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello/andres

Using cycles

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <% 3.times do %> <p>Hello <i><%= @name %></i>!</p> <p>It is <%= @time %>.</p> <% end %> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello/andres

Using conditional execution

Update app/controllers/say_controller.rb to:

class SayController < ApplicationController def hello @name = params[:id] @name = 'stranger' if @name.nil? @time = Time.now end end

This also works:

class SayController < ApplicationController def hello @name = params[:id] if @name.nil? @name = 'stranger' end @time = Time.now end end

Test in browser by typing into the address bar:

http://localhost:3000/say/hello

Adding a link

Add the action goodbye to app/controllers/say_controller.rb:

class SayController < ApplicationController def hello @name = params[:id] @name = 'stranger' if @name.nil? end def goodbye end end

To the folder app/views/say add the file goodbye.rhtml with the following content:

<html> <head> <title>Hello</title> </head> <body> <p>Goodbye!</p> <p>Thank you for using IMS!</p> </body> </html>

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i><%= @name %></i>!</p> <p><%= link_to 'Go to goodbye', :action => 'goodbye' %></p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello

Sending information through the link

Update app/controllers/say_controller.rb:

class SayController < ApplicationController def hello @name = params[:id] @name = 'stranger' if @name.nil? end def goodbye @name = params[:id] @name = 'stranger' if @name.nil? end end

Update app/views/say/hello.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Hello <i><%= @name %></i>!</p> <p><%= link_to 'Go to goodbye', :action => 'goodbye', :id => @name %></p> </body> </html>

Update app/views/say/goodbye.rhtml to:

<html> <head> <title>Hello</title> </head> <body> <p>Goodbye <i><%= @name %></i>!</p> <p>Thank you for using IMS!</p> </body> </html>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello/andres

Creating the first layout

To the folder app/views/layout add the file say.rhtml with the following content:

<html> <head> <title>Hello</title> </head> <body> <%= yield :layout %> </body> </html>

Update app/views/say/hello.rhtml to:

<p>Hello <i><%= @name %></i>!</p> <p><%= link_to 'Go to goodbye', :action => 'goodbye', :id => @name %></p>

Update app/views/say/goodbye.rhtml to:

<p>Goodbye <i><%= @name %></i>!</p> <p>Thank you for using IMS!</p>

Test in browser by typing into the address bar:

http://localhost:3000/say/hello/andres

Next recommended article to read: RESTful Controller in Ruby on Rails

Technorati tags: ruby on rails, ruby-on-rails, Ruby, Rails

Liked it? !