Let’s build a webapp With Ruby on Rails 

I know Rails 

Creating a new app $ rails new room-reservations 

What does it do? create create README.rdoc create Rakefile create config.ru create .gitignore create Gemfile create app create app/assets/javascripts/application.js create app/assets/stylesheets/application.css create app/controllers/application_controller.rb create app/helpers/application_helper.rb create app/views/layouts/application.html.erb create app/assets/images/.keep create app/mailers/.keep create app/models/.keep create app/controllers/concerns/.keep create app/models/concerns/.keep create bin create bin/bundle create bin/rails create bin/rake create config create config/routes.rb create config/application.rb create config/environment.rb create config/environments create config/environments/… create config/initializers create config/initializers/… create config/locales create config/locales/en.yml create config/boot.rb create config/database.yml create db create db/seeds.rb create lib create lib/tasks create lib/tasks/.keep create lib/assets create lib/assets/.keep create log create log/.keep create public create public/404.html create public/422.html create public/500.html create public/favicon.ico create public/robots.txt create test/fixtures create test/fixtures/.keep create test/controllers create test/controllers/.keep create test/mailers create test/mailers/.keep create test/models create test/models/.keep create test/helpers create test/helpers/.keep create test/integration create test/integration/.keep create test/test_helper.rb create tmp/cache create tmp/cache/assets create vendor/assets/javascripts create vendor/assets/javascripts/.keep create vendor/assets/stylesheets create vendor/assets/stylesheets/.keep run bundle install Creates A LOT OF files 

But what do they do?! 

Web applications client-server architecture thin client HTTP protocol stateless 

HTTP Request Response 

No content

HTTP Request Method URL Request headers 

No content

HTTP Methods GET (show) POST (create) PUT (replace) DELETE (delete) … 

HTTP Response Status Body Response headers 

No content

HTTP Status Codes 200 OK 404 Page Not Found 403 Forbidden 422 Unprocessable Entity 500 Internal Server Error 

No content

No content

No content

No content

No content

No content

No content

REST Architectural style Resources identifiable in request Representation sufficient to allow resource modification State transitions connect resources 

Identifiable Resources Guess which resource
 the following lists! ! https://gzgv.basecamphq.com/clients 

Representations HTML JSON 

Ruby A dynamic programming language designed to make programmers happy 

REPL Read-Eval-Print-Loop AKA The Console 

$ irb 

puts "Hello, world!" 

13.times { puts "Hi there!" } 

["Jane", "John"].each do |name|
 puts "Hi there #{name}!" end 

array = ["Jane", "John"] array[0] # => "Jane" 

hash = { id: 1, name: "John" } hash[:id] # => 1 hash[:name] # => "John" 

Ruby on Rails A web framework based on Ruby extracted from Basecamp 

Ruby on Rails Allows quick prototyping Joyful programming language Friendly community Documentation 

Ruby on Rails RESTful (somewhat) MVC Convention over configuration 

"Any sufficiently advanced technology is indistinguishable from magic." ! — Arthur C. Clarke 

Rails is a magical 

Model View Controller 

Model What is this application about? Resources 

View How do your users see your app? Representations 

Controller How does your application work? State transitions 

No content

What does it do? create create README.rdoc create Rakefile create config.ru create .gitignore create Gemfile create app create app/assets/javascripts/application.js create app/assets/stylesheets/application.css create app/controllers/application_controller.rb create app/helpers/application_helper.rb create app/views/layouts/application.html.erb create app/assets/images/.keep create app/mailers/.keep create app/models/.keep create app/controllers/concerns/.keep create app/models/concerns/.keep create bin create bin/bundle create bin/rails create bin/rake create config create config/routes.rb create config/application.rb create config/environment.rb create config/environments create config/environments/… create config/initializers create config/initializers/… create config/locales create config/locales/en.yml create config/boot.rb create config/database.yml create db create db/seeds.rb create lib create lib/tasks create lib/tasks/.keep create lib/assets create lib/assets/.keep create log create log/.keep create public create public/404.html create public/422.html create public/500.html create public/favicon.ico create public/robots.txt create test/fixtures create test/fixtures/.keep create test/controllers create test/controllers/.keep create test/mailers create test/mailers/.keep create test/models create test/models/.keep create test/helpers create test/helpers/.keep create test/integration create test/integration/.keep create test/test_helper.rb create tmp/cache create tmp/cache/assets create vendor/assets/javascripts create vendor/assets/javascripts/.keep create vendor/assets/stylesheets create vendor/assets/stylesheets/.keep run bundle install 

What does it do? create create README.rdoc create Rakefile create config.ru create .gitignore create Gemfile create app create app/assets/javascripts/application.js create app/assets/stylesheets/application.css create app/controllers/application_controller.rb create app/helpers/application_helper.rb create app/views/layouts/application.html.erb create app/assets/images/.keep create app/mailers/.keep create app/models/.keep create app/controllers/concerns/.keep create app/models/concerns/.keep create bin create bin/bundle create bin/rails create bin/rake create config create config/routes.rb create config/application.rb create config/environment.rb create config/environments create config/environments/… create config/initializers create config/initializers/… create config/locales create config/locales/en.yml create config/boot.rb create config/database.yml create db create db/seeds.rb create lib create lib/tasks create lib/tasks/.keep create lib/assets create lib/assets/.keep create log create log/.keep create public create public/404.html create public/422.html create public/500.html create public/favicon.ico create public/robots.txt create test/fixtures create test/fixtures/.keep create test/controllers create test/controllers/.keep create test/mailers create test/mailers/.keep create test/models create test/models/.keep create test/helpers create test/helpers/.keep create test/integration create test/integration/.keep create test/test_helper.rb create tmp/cache create tmp/cache/assets create vendor/assets/javascripts create vendor/assets/javascripts/.keep create vendor/assets/stylesheets create vendor/assets/stylesheets/.keep 

$ cd room-reservations $ rails server 

No content

No content

$ rails generate scaffold \ room name:string description:text 

No content

No content

$ rake db:migrate 

No content

No content

No content

No content

No content

Let's look at the new files app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

Model app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

class Room < ActiveRecord::Base end Class name Base class name 

class Room < ActiveRecord::Base end Model name 

Views app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

Name: <%= @room.name %>

!

Description: <%= @room.description %>

! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %> 

Name: <%= @room.name %>

!

Description: <%= @room.description %>

! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %> Render model! attributes 

Name: <%= @room.name %>

!

Description: <%= @room.description %>

! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %> Render links 

Controller app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Class name Base class name 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Controller name Base controller Controllers are classes 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Instance method Instance variable 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Action Controller actions are methods 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Retrieves all rooms from DB 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end "Macro"! (a class method) Private methods 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Macros are used to! create callbacks Private methods! are not actions 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Macros are used to! create callbacks Finds a single room by ID 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! def index @rooms = Room.all end ! def show end ! def new @room = Room.new end ! private ! def set_room @room = Room.find(params[:id]) end end Macros are used to! create callbacks "params" is a hash with! data submitted by a user 

def create @room = Room.new(room_params) ! respond_to do |format| if @room.save format.html { redirect_to @room, notice: 'Room was successfully created.' } format.json { render action: 'show', status: :created, location: @room } else format.html { render action: 'new' } format.json { render json: @room.errors, status: :unprocessable_entity } end end end Create new room from what??? 

class RoomsController < ApplicationController before_action :set_room, only: [:show, :edit, :update, :destroy] ! # … ! def create # … end ! # … ! private ! # … ! # Never trust parameters from the scary internet, # only allow the white list through. def room_params params.require(:room).permit(:name, :description) end end 

def create @room = Room.new(room_params) ! respond_to do |format| if @room.save format.html { redirect_to @room, notice: 'Room was successfully created.' } format.json { render action: 'show', status: :created, location: @room } else format.html { render action: 'new' } format.json { render json: @room.errors, status: :unprocessable_entity } end end end Good, we're safe 

def create @room = Room.new(room_params) ! respond_to do |format| if @room.save format.html { redirect_to @room, notice: 'Room was successfully created.' } format.json { render action: 'show', status: :created, location: @room } else format.html { render action: 'new' } format.json { render json: @room.errors, status: :unprocessable_entity } end end end 

def create @room = Room.new(room_params) ! respond_to do |format| if @room.save format.html { redirect_to @room, notice: 'Room was successfully created.' } format.json { render action: 'show', status: :created, location: @room } else format.html { render action: 'new' } format.json { render json: @room.errors, status: :unprocessable_entity } end end end HTML representation JSON representation! (API) Pick a format 

Router app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

# config/routes.rb ! RoomReservations::Application.routes.draw do resources :rooms end 

No content

Database migration app/assets/javascripts/rooms.js.coffee app/assets/stylesheets/rooms.css.scss app/controllers/rooms_controller.rb app/helpers/rooms_helper.rb app/models/room.rb app/views/rooms/_form.html.erb app/views/rooms/edit.html.erb app/views/rooms/index.html.erb app/views/rooms/index.json.jbuilder app/views/rooms/new.html.erb app/views/rooms/show.html.erb app/views/rooms/show.json.jbuilder config/routes.rb db/migrate/20140311195644_create_rooms.rb db/schema.rb test/controllers/rooms_controller_test.rb test/fixtures/rooms.yml test/helpers/rooms_helper_test.rb test/models/room_test.rb 

# db/migrate/201403xxxxxxxx_create_rooms.rb ! class CreateRooms < ActiveRecord::Migration def change create_table :rooms do |t| t.string :name t.text :description ! t.timestamps end end end 

# db/schema.rb ! ActiveRecord::Schema.define(version: 20140311195644) do ! create_table "rooms", force: true do |t| t.string "name" t.text "description" t.datetime "created_at" t.datetime "updated_at" end ! end 

Scaffold some more! $ rails generate scaffold team \ name:string 

Scaffold some more! $ rails generate scaffold reservation \ room:belongs_to team:belongs_to \ from:datetime until:datetime 

Associations A reservation belongs to a team A reservation belongs to a room A room has many reservations A team has many reservations 

Associations db/migrate/201403xxxxxxxx_create_reservations.rb ! create_table "reservations" do |t| t.integer "room_id" t.integer "team_id" t.datetime "from" t.datetime "until" t.datetime "created_at" t.datetime "updated_at" end 

Should a user type numbers here? 

Select lists 

Select lists 

Select lists 

No content

Umm? 

Relation display # app/views/reservations/show.html.erb !

Room: <%= @reservation.room %>

!

Team: <%= @reservation.team %>

!

From: <%= @reservation.from %>

!

Until: <%= @reservation.until %>



Relation display # app/views/reservations/show.html.erb !

Room: <%= @reservation.room %>

!

Team: <%= @reservation.team %>

!

From: <%= @reservation.from %>

!

Until: <%= @reservation.until %>



Relation display # app/views/reservations/show.html.erb !

Room: <%= @reservation.room.name %>

!

Team: <%= @reservation.team.name %>

!

From: <%= @reservation.from %>

!

Until: <%= @reservation.until %>



Not bad, but it can be better 

Date/time format # app/views/reservations/show.html.erb !

Room: <%= @reservation.room.name %>

!

Team: <%= @reservation.team.name %>

!

From: <%= @reservation.from %>

!

Until: <%= @reservation.until %>



Date/time format # app/views/reservations/show.html.erb !

Room: <%= @reservation.room.name %>

!

Team: <%= @reservation.team.name %>

!

From: <%= @reservation.from.to_s(:short) %>

!

Until: <%= @reservation.until.to_s(:short) %>



No content

No content

Root route # config/routes.rb ! RoomReservations::Application.routes.draw do resources :reservations resources :teams resources :rooms end 

Root route # config/routes.rb ! RoomReservations::Application.routes.draw do root 'reservations#index' ! resources :reservations resources :teams resources :rooms end 

No content

Photo upload Where to store images?! Server's hard drive Database Cloud Problematic with! deployments Just… don't 

No content

Is there a magic solution? CarrierWave gem Cloudinary service 

Gems # Gemfile ! source 'https://rubygems.org' ! gem 'rails', '4.0.0' gem 'sqlite3' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 1.2' ! group :doc do gem 'sdoc', require: false end 

Gems # Gemfile ! source 'https://rubygems.org' ! gem 'rails', '4.0.0' gem 'sqlite3' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 1.2' ! gem 'carrierwave' gem 'cloudinary' ! group :doc do gem 'sdoc', require: false end 

Install new gems $ bundle install 

No content

No content

Generate the uploader $ rails generate uploader RoomPhoto 

And edit it… # app/uploaders/room_photo_uploader.rb ! class RoomPhotoUploader < CarrierWave::Uploader::Base include Cloudinary::CarrierWave end 

Generate the migration $ rails generate migration \ add_photo_to_room 

Edit the last migration # db/migrate/201403xxxxxxxx_add_photo_to_room.rb ! class AddPhotoToRoom < ActiveRecord::Migration def change add_column :rooms, :photo, :string end end 

And setup the model # app/models/room.rb ! class Room < ActiveRecord::Base mount_uploader :photo, RoomPhotoUploader end 

Modify the form… # app/views/rooms/_form.html.erb ! 

No content

Display the photo… # app/views/rooms/show.html.erb !

Name: <%= @room.name %>

!

Description: <%= @room.description %>

! <% if @room.photo %>

<%= link_to @room.photo.url do %> <%= cl_image_tag(@room.photo, width: 200, height: 200, crop: :fit) %> <% end %>

<% end %> 

No content

User authentication Let's use Devise! 

WARNING "If you are building your first Rails application, we recommend you to not use Devise. Devise requires a good understanding of the Rails Framework. In such cases, we advise you to start a simple authentication system from scratch." 

Gems # Gemfile ! source 'https://rubygems.org' ! gem 'rails', '4.0.0' gem 'sqlite3' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 1.2' ! gem 'carrierwave' gem 'cloudinary' gem 'devise' ! group :doc do gem 'sdoc', require: false end 

Install new gems $ bundle install 

Setup Devise #1 $ rails generate devise:install 

Setup Devise #2 $ rails generate devise team $ rake db:migrate 

Protect the application # app/controllers/application_controller.rb ! class ApplicationController < ActionController::Base protect_from_forgery with: :exception ! before_action :authenticate_team! end 

No content

Where should a user enter team name? 

Customize signup template $ rails generate devise:views 

Customize signup template # app/views/devise/registrations/new.html.erb !

Sign up

! <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> ! ! ! ! <% end %> ! <%= render "devise/shared/links" %> 

Customize signup template # app/views/devise/registrations/new.html.erb !

Sign up

! <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> ! ! ! ! ! <% end %> ! <%= render "devise/shared/links" %> 

Whitelist the attribute # app/controllers/application_controller.rb ! class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :authenticate_team! end 

Whitelist the attribute # app/controllers/application_controller.rb ! class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :authenticate_team! before_action :configure_permitted_parameters, if: :devise_controller? ! private ! def configure_permitted_parameters devise_parameter_sanitizer.for(:sign_up) << :name end end 

No content

Next steps Prevent other teams to:! edit team info delete teams create new teams change reservations 

No content

Gems # Gemfile ! source 'https://rubygems.org' ! gem 'rails', '4.0.0' gem 'sqlite3' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 1.2' ! gem 'carrierwave' gem 'cloudinary' gem 'devise' gem 'bootstrap-sass', '~> 3.1.1' ! group :doc do gem 'sdoc', require: false end 

Install new gems $ bundle install 

Change CSS # app/assets/stylesheets/application.css ! /* * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the * compiled file, but it's generally better to create a new file per style scope. * *= require_self *= require_tree . */ 

Change CSS # app/assets/stylesheets/application.css ! @import "bootstrap"; @import "bootstrap/theme"; 

Rename the file! Sass is a CSS pre-processor application.css → application.css.scss 

Prettify the app! # app/views/reservations/index.html.erb ! <%= link_to 'Show', reservation %> <% if reservation.team == current_team %> <%= link_to 'Edit', edit_reservation_path(reservation) %> <%= link_to 'Destroy', reservation, method: :delete, data: { confirm: 'Are you sure?' } %> <% end %> 

Prettify the app! # app/views/reservations/index.html.erb ! 

Add navbar # app/views/layouts/application.html.erb !

Also modify JS # app/assets/javascripts/application.js ! //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap //= require_tree . 

And now it's up to you! 

Code for Room Reservation:
 https://github.com/sidonath/room-reservations/ Guides to various Rails-related topics:
 http://guides.rubyonrails.org/ CarrierWave homepage:
 https://github.com/carrierwaveuploader/carrierwave Cloudinary Rails/CarrierWave docs:
 http://cloudinary.com/documentation/rails_carrierwave Devise Readme:
 https://github.com/plataformatec/devise/tree/v3.2.3 Twitter Bootstrap homepage:
 http://getbootstrap.com/ 

When you have more time to study Rails or Ruby http://tutorials.jumpstartlab.com/ http://mislav.uniqpath.com/poignant-guide/ http://pragprog.com/book/rails4/agile-web-development-with-rails-4