This is an example tutorial for teaching web development with Ruby.
gem install sinatra
Coach: Explain shortly what Sinatra is.
Create a suffragist.rb
file with the following contents:
require 'sinatra'
get '/' do
'Hello, voter!'
end
Go to the directory where you put your app and run ruby suffragist.rb
.
Now you can visit localhost:4567. You should
see a ‘Hello, voter!’ page, which means that the generation of your new
app worked correctly. Hit ctrl-c
in the terminal to quit the server.
Coach: Explain POST and GET methods, and how to communicate with the browser.
To keep everything in order let’s make
a directory for our views (and name it views
).
Put this code into an index.erb
file in the views
directory:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Suffragist</title>
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
<p>Cast your vote:</p>
<form action='cast' method='post'>
<ul class='unstyled'>
<% Choices.each do |id, text| %>
<li>
<label class='radio'>
<input type='radio' name='vote' value='<%= id %>' id='vote_<%= id %>' />
<%= text %>
</label>
</li>
<% end %>
</ul>
<button type='submit' class='btn btn-primary'>Cast this vote!</button>
</form>
</body>
</html>
And into suffragist.rb
:
Choices = {
'krk' => 'Cracow',
'rad' => 'Radom',
'waw' => 'Warsaw',
'wro' => 'Wrocław',
}
Change the get
action:
get '/' do
erb :index
end
Run ruby suffragist.rb
, check your
results and quit the server with ctrl-c
.
Coach: Talk a little about HTML. Explain templates. Explain what global costants are.
Adjust the index.erb
file in the views
directory and add the <h1>…</h1>
line:
…
<body class='container'>
<h1><%= @title %></h1>
<p>Cast your vote:</p>
…
Change the get
action:
get '/' do
@title = 'Welcome to the Suffragist!'
erb :index
end
Coach: Explain what instance variables are and how Sinatra makes them visible in the views.
Put this into suffragist.rb
:
post '/cast' do
@title = 'Thanks for casting your vote!'
@vote = params['vote']
erb :cast
end
Create a new file in the views
directory, cast.erb
,
and put there some HTML with embedded Ruby code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Suffragist</title>
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
<h1><%= @title %></h1>
<p>You cast: <%= Choices[@vote] %></p>
<p><a href='/results'>See the results!</a></p>
</body>
</html>
Coach: Explain how POST works. How to catch what
was sent in the form? Where do params
come from?
Create layout.erb
file in the views
directory. Put the following in there:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Suffragist</title>
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
<h1><%= @title %></h1>
<%= yield %>
</body>
</html>
Remove the above parts from the other two templats
(index.erb
and cast.erb
in the views
directory).
Coach: Talk about the structure of HTML documents and how factoring
out common code work in general. Explain what yield
does.
Put this into suffragist.rb
:
get '/results' do
@votes = { 'waw' => 7, 'krk' => 5 }
erb :results
end
Create a new file in the views
directory, results.erb
.
<table class='table table-hover table-striped'>
<% Choices.each do |id, text| %>
<tr>
<th><%= text %></th>
<td><%= @votes[id] || 0 %>
<td><%= '#' * (@votes[id] || 0) %></td>
</tr>
<% end %>
</table>
<p><a href='/'>Cast more votes!</a></p>
Watch the page (run ruby suffragist.rb
, check
your results and quit the server with ctrl-c
).
Coach: Explain HTML tables and how how the missing values from the hash default to zero.
Time for something new! Let’s store our choices.
Add the following to the top of suffragist.rb
:
require 'yaml/store'
Add some more code into suffragist.rb
– replace
post '/cast'
and get '/results'
with the following:
post '/cast' do
@title = 'Thanks for casting your vote!'
@vote = params['vote']
@store = YAML::Store.new 'votes.yml'
@store.transaction do
@store['votes'] ||= {}
@store['votes'][@vote] ||= 0
@store['votes'][@vote] += 1
end
erb :cast
end
get '/results' do
@title = 'Results so far:'
@store = YAML::Store.new 'votes.yml'
@votes = @store.transaction { @store['votes'] }
erb :results
end
Coach: Explain what YAML is.
Let’s open votes.yml
. And vote. And check again.
Coach: There will be situations when one or more students will forget to quit the server before running it again. It’s a good opportunity to search the Internet for a solution. They don’t have to know everything about killing processes to find a solution.
Coach: In the end explain shortly the differences between Sinatra and Rails.
Try to change things in the app in any way you see fit:
- Add some additional logic to the views.
- Redirect to the results outright.
- Add other votings; how would the YAML file need to change?
- Try to style the file in different ways.