Introduction to Ruby on Rails

A head-first dive into the awesomeness of Ruby on Rails, with theoretical background on HTTP, REST and MVC

Transcript

1. Let’s build a webapp With Ruby on Rails
2. I know Rails
3. Creating a new app $ rails new room-reservations
4. 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
5. But what do they do?!
6. Web applications client-server architecture thin client HTTP protocol stateless
7. HTTP Request Response
9. HTTP Request Method URL Request headers
11. HTTP Methods GET (show) POST (create) PUT (replace) DELETE (delete) …
12. HTTP Response Status Body Response headers
14. HTTP Status Codes 200 OK 404 Page Not Found 403 Forbidden 422 Unprocessable Entity 500 Internal Server Error
22. REST Architectural style Resources identifiable in request Representation sufficient to allow resource modification State transitions connect resources
23. Identifiable Resources Guess which resource
 the following lists! ! https://gzgv.basecamphq.com/clients
24. Representations HTML JSON
25. Ruby A dynamic programming language designed to make programmers happy
26. REPL Read-Eval-Print-Loop AKA The Console
27. $ irb
28. puts "Hello, world!"
29. 13.times { puts "Hi there!" }
30. ["Jane", "John"].each do |name|
 puts "Hi there #{name}!" end
31. array = ["Jane", "John"] array[0] # => "Jane"
32. hash = { id: 1, name: "John" } hash[:id] # => 1 hash[:name] # => "John"
33. Ruby on Rails A web framework based on Ruby extracted from Basecamp
34. Ruby on Rails Allows quick prototyping Joyful programming language Friendly community Documentation
35. Ruby on Rails RESTful (somewhat) MVC Convention over configuration
36. "Any sufficiently advanced technology is indistinguishable from magic." ! — Arthur C. Clarke
37. Rails is a magical
38. Model View Controller
39. Model What is this application about? Resources
40. View How do your users see your app? Representations
41. Controller How does your application work? State transitions
43. 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
44. 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
45. $ cd room-reservations $ rails server
48. $ rails generate scaffold \ room name:string description:text
51. $ rake db:migrate
57. 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
58. 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
59. class Room < ActiveRecord::Base end Class name Base class name
60. class Room < ActiveRecord::Base end Model name
61. 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
62. <p> <strong>Name:</strong> <%= @room.name %> </p> ! <p> <strong>Description:</strong> <%= @room.description %> </p> ! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %>
63. <p> <strong>Name:</strong> <%= @room.name %> </p> ! <p> <strong>Description:</strong> <%= @room.description %> </p> ! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %> Render model! attributes
64. <p> <strong>Name:</strong> <%= @room.name %> </p> ! <p> <strong>Description:</strong> <%= @room.description %> </p> ! <%= link_to 'Edit', edit_room_path(@room) %> | <%= link_to 'Back', rooms_path %> Render links
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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
74. 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
75. 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
76. 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???
77. 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
78. 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
79. 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
80. 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
81. 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
82. # config/routes.rb ! RoomReservations::Application.routes.draw do resources :rooms end
84. 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
85. # 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
86. # 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
87. Scaffold some more! $ rails generate scaffold team \ name:string
88. Scaffold some more! $ rails generate scaffold reservation \ room:belongs_to team:belongs_to \ from:datetime until:datetime
89. Associations A reservation belongs to a team A reservation belongs to a room A room has many reservations A team has many reservations
90. 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
91. Should a user type numbers here?
92. Select lists <div class="field"> <%= f.label :room %><br> <%= f.text_field :room %> </div> <div class="field"> <%= f.label :team %><br> <%= f.text_field :team %> </div> <div class="field"> <%= f.label :from %><br> <%= f.datetime_select :from %> </div> <div class="field"> <%= f.label :until %><br> <%= f.datetime_select :until %> </div>
93. Select lists <div class="field"> <%= f.label :room %><br> <%= f.text_field :room %> </div> <div class="field"> <%= f.label :team %><br> <%= f.text_field :team %> </div> <div class="field"> <%= f.label :from %><br> <%= f.datetime_select :from %> </div> <div class="field"> <%= f.label :until %><br> <%= f.datetime_select :until %> </div>
94. Select lists <div class="field"> <%= f.label :room %><br> <%= f.collection_select :room_id, Room.all, :id, :name %> </div> <div class="field"> <%= f.label :team %><br> <%= f.collection_select :team_id, Team.all, :id, :name %> </div> <div class="field"> <%= f.label :from %><br> <%= f.datetime_select :from %> </div> <div class="field"> <%= f.label :until %><br> <%= f.datetime_select :until %> </div>
96. Umm?
97. Relation display # app/views/reservations/show.html.erb ! <p> <strong>Room:</strong> <%= @reservation.room %> </p> ! <p> <strong>Team:</strong> <%= @reservation.team %> </p> ! <p> <strong>From:</strong> <%= @reservation.from %> </p> ! <p> <strong>Until:</strong> <%= @reservation.until %> </p>
98. Relation display # app/views/reservations/show.html.erb ! <p> <strong>Room:</strong> <%= @reservation.room %> </p> ! <p> <strong>Team:</strong> <%= @reservation.team %> </p> ! <p> <strong>From:</strong> <%= @reservation.from %> </p> ! <p> <strong>Until:</strong> <%= @reservation.until %> </p>
99. Relation display # app/views/reservations/show.html.erb ! <p> <strong>Room:</strong> <%= @reservation.room.name %> </p> ! <p> <strong>Team:</strong> <%= @reservation.team.name %> </p> ! <p> <strong>From:</strong> <%= @reservation.from %> </p> ! <p> <strong>Until:</strong> <%= @reservation.until %> </p>
100. Not bad, but it can be better
101. Date/time format # app/views/reservations/show.html.erb ! <p> <strong>Room:</strong> <%= @reservation.room.name %> </p> ! <p> <strong>Team:</strong> <%= @reservation.team.name %> </p> ! <p> <strong>From:</strong> <%= @reservation.from %> </p> ! <p> <strong>Until:</strong> <%= @reservation.until %> </p>
102. Date/time format # app/views/reservations/show.html.erb ! <p> <strong>Room:</strong> <%= @reservation.room.name %> </p> ! <p> <strong>Team:</strong> <%= @reservation.team.name %> </p> ! <p> <strong>From:</strong> <%= @reservation.from.to_s(:short) %> </p> ! <p> <strong>Until:</strong> <%= @reservation.until.to_s(:short) %> </p>
105. Root route # config/routes.rb ! RoomReservations::Application.routes.draw do resources :reservations resources :teams resources :rooms end
106. Root route # config/routes.rb ! RoomReservations::Application.routes.draw do root 'reservations#index' ! resources :reservations resources :teams resources :rooms end
108. Photo upload Where to store images?! Server's hard drive Database Cloud Problematic with! deployments Just… don't
110. Is there a magic solution? CarrierWave gem Cloudinary service
111. 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
112. 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
113. Install new gems $ bundle install
116. Generate the uploader $ rails generate uploader RoomPhoto
117. And edit it… # app/uploaders/room_photo_uploader.rb ! class RoomPhotoUploader < CarrierWave::Uploader::Base include Cloudinary::CarrierWave end
118. Generate the migration $ rails generate migration \ add_photo_to_room
119. 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
120. And setup the model # app/models/room.rb ! class Room < ActiveRecord::Base mount_uploader :photo, RoomPhotoUploader end
121. Modify the form… # app/views/rooms/_form.html.erb ! <div class="field"> <%= f.label :name %><br> <%= f.text_field :name %> </div> <div class="field"> <%= f.label :description %><br> <%= f.text_area :description %> </div> <div class="field"> <%= f.hidden_field(:photo_cache) %> <%= f.label :photo %><br> <%= f.file_field(:photo) %> </div>
123. Display the photo… # app/views/rooms/show.html.erb ! <p> <strong>Name:</strong> <%= @room.name %> </p> ! <p> <strong>Description:</strong> <%= @room.description %> </p> ! <% if @room.photo %> <p> <%= link_to @room.photo.url do %> <%= cl_image_tag(@room.photo, width: 200, height: 200, crop: :fit) %> <% end %> </p> <% end %>
125. User authentication Let's use Devise!
126. 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."
127. 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
128. Install new gems $ bundle install
129. Setup Devise #1 $ rails generate devise:install
130. Setup Devise #2 $ rails generate devise team $ rake db:migrate
131. Protect the application # app/controllers/application_controller.rb ! class ApplicationController < ActionController::Base protect_from_forgery with: :exception ! before_action :authenticate_team! end
133. Where should a user enter team name?
134. Customize signup template $ rails generate devise:views
135. Customize signup template # app/views/devise/registrations/new.html.erb ! <h2>Sign up</h2> ! <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> ! <div><%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %></div> ! <div><%= f.label :password %><br /> <%= f.password_field :password %></div> ! <div><%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation %></div> ! <div><%= f.submit "Sign up" %></div> <% end %> ! <%= render "devise/shared/links" %>
136. Customize signup template # app/views/devise/registrations/new.html.erb ! <h2>Sign up</h2> ! <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> ! <div><%= f.label :name %><br /> <%= f.text_field :name, autofocus: true %></div> ! <div><%= f.label :email %><br /> <%= f.email_field :email %></div> ! <div><%= f.label :password %><br /> <%= f.password_field :password %></div> ! <div><%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation %></div> ! <div><%= f.submit "Sign up" %></div> <% end %> ! <%= render "devise/shared/links" %>
137. Whitelist the attribute # app/controllers/application_controller.rb ! class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :authenticate_team! end
138. 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
140. Next steps Prevent other teams to:! edit team info delete teams create new teams change reservations
142. 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
143. Install new gems $ bundle install
144. 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 . */
145. Change CSS # app/assets/stylesheets/application.css ! @import "bootstrap"; @import "bootstrap/theme";
146. Rename the file! Sass is a CSS pre-processor application.css → application.css.scss
147. 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 %>
148. Prettify the app! # app/views/reservations/index.html.erb ! <div class="btn-group"> <%= link_to 'Show', reservation, class: "btn btn-primary" %> <% if reservation.team == current_team %> <%= link_to 'Edit', edit_reservation_path(reservation), class: "btn btn-default" %> <%= link_to 'Destroy', reservation, method: :delete, class: "btn btn-danger", data: { confirm: 'Are you sure?' } %> <% end %> </div>
149. Add navbar # app/views/layouts/application.html.erb ! <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Room Reservations</a> </div> ! <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <%= link_to "Reservations", reservations_path %> </li> <li> <%= link_to "Rooms", rooms_path %> </li> <li> <%= link_to "Teams", teams_path %> </li> </ul> ! <% if team_signed_in? %> <ul class="nav navbar-nav navbar-right"> <li> <p class="navbar-text"> <%= current_team.name %> </p> </li> <li> <%= form_tag destroy_team_session_path, method: :delete, class: 'navbar-form navbar-right' do %> <%= button_tag "Sign out", class: 'btn btn-default' %> <% end %> </li> </ul> <% end %> </div>
150. Also modify JS # app/assets/javascripts/application.js ! //= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap //= require_tree .
151. And now it's up to you!
152. 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/
153. 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