Blabber

This is a "twitter" like clone for Ruby Weekend 4

Checking requirements

from the console

ruby -v
  ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin12.3.0]
rails -v
  Rails 3.2.13

Creating the app

from the console

rails new blabber
cd blabber

Booting Rails

from the console

rails server

from the browser

localhost:3000

kill the server with control + c

Our first home page

from the code editor

• delete public/index.html. from the console
• rails generate controller site index. from the code editor
• open config/routes.rb.
  • a. delete the line with get "site/index"
  • b. add the line root :to => 'site#index'

from the console

• rails server. from the browser
• localhost:3000.

Editing a page

from the code editor

• open app/views/site/index.html.erb.
• change Site#index to Welcome to Blabber. from the browser
• refresh the page. from the code editor
• open app/views/layouts/application.html.erb.
• add the code above the yield:

<header>
  <h1>Top Nav</h1>
</header>

• add the code below the yield:

<footer>
  <h6>Footer</h6>
</footer>

from the browser

• refresh the page.

Taste of ERB

from the code editor

• open app/views/site/index.html.erb.
• add the line <%= Time.now %>. from the browser
• refresh the page (over and over). from the code editor
• add the line <p><%= 1 + 1 %></p>. from the browser
• refresh the page. from the code editor
• add the line <% 'HELLO?' %>. from the browser
• refresh the page.

Creating a new page

from the code editor

• open app/controllers/site_controller.rb.
• add the code:

def about
end

• add a new file app/views/site/about.html.erb.
• add the line <h1>About Blabber</h1>.
• open the file config/routes.rb.
• add the line get '/about' => 'site#about'. from the browser
• go to localhost:3000/about.

Linking Pages

from the code editor

• open app/views/site/about.html.erb.
• add the code:

<%= link_to('Go Back Home', root_path) %>

• open app/views/site/index.html.erb
• add the code:

<%= link_to('About Us', about_path) %>

from the browser

• refresh the page

Playing with the controller

from the code editor

• open app/controllers/site_controller.rb.
• inside of the index method add the code:

@foods = ['pizza', 'burger', 'burrito', 'cat']

• note: yes, I really mean add cat in there
• open app/views/site/index.html.erb
• add the code:

<% @foods.each do |food| %>
  <p>Eating <%= food %> is yummy!</p>
<% end %>

from the browser

• refresh the page

from the code editor

• open app/views/site/index.html.erb.
• fix the code:

<% @foods.each do |food| %>
  <% if food == 'cat' %>
    <p>Wait, <%= food %> is not a food..</p>
  <% else %>
    <p>Eating <%= food %> is yummy!</p>
  <% end %>
<% end %>

Our First model "the blab"

from the console

• stop the server control + c
• tell rails to generate a new model
  • rails generate model blab

from the code editor

• open db/migrate/##############_create_blabs.rb
• add the code:

t.string :text

from the console

• run rake db:migrate

Welcome to the console

from the console

• run rails console

Blab
#=> Blab(id: integer, text: string, created_at: datetime, updated_at: datetime)
Blab.count
#=> 0
Blab.first
#=> nil
my_first_blab = Blab.new
#=> #<Blab id: nil, text: nil, created_at: nil, updated_at: nil>
my_first_blab.text = "BLABBING AWAY!!!"
#=> "BLABBING AWAY!!!"
my_first_blab.save
#=> true

• create a second blab
  • What is the id of the second blab?
  • What is the total count of blabs in the database?
  • What is the id of Blab.first?

Done? type exit

Displaying our data

from the code editor

• open app/controllers/site_controller.rb
• add the code:

@blabs = Blab.all

• open app/views/site/index.html.erb
• add the code:

<% @blabs.each do |blab| %>
  <p>I said <%= blab.text %> at <%= blab.created_at %></p>
<% end %>

from the browser

• refresh the page

Controllers and models and views

from the console

• run rails generate controller blabs from the code editor
• open config/routes.rb
• add the code:

resources :blabs

• open app/controllers/blabs_controller.rb
• add the code:

def new
  @blab = Blab.new
end
  
def create
  @blab = Blab.new(params[:blab])
  if @blab.save
    redirect_to(root_path, notice: 'Just created a new blab')
  else
    render(:new)
  end
end

• add a new file app/views/blabs/new.html.erb
• add the code:

<h1>Write a new blab</h1>
<%= form_for(@blab) do |f| %>
  <p><%= f.text_area(:text) %></p>
  <p><%= f.submit('Save') %></p>
<% end %>

from the browser

• go to localhost:3000/blabs/new
• write a blab
• fix the error from the code editor
• open app/views/models/blab.rb
• add the code:

attr_accessible :text

from the browser

• refresh the page

from the code editor

• open app/views/site/index.html.erb
• add a link to the form. the url helper is new_blab_path

Validations

from the code editor

• open app/models/blab.rb
• add the code:

validates :text, presence: true

from the browser

• go to localhost:3000/blabs/new
• submit empty form

Helpers

from the code editor

• open app/helpers/application_helper.rb
• add the code:

def flash_message
  unless flash.blank?
    [:notice, :error].each do |message|
      return content_tag(:div, flash[message], class: message) if flash[message].present?
    end
  end
end

• open app/views/layouts/application.html.erb
• add the code:

<%= flash_message %>

• open app/controllers/blabs_controller.rb
• add the line flash[:error] = 'oops!' to the create action.

Make it "pretty" (not really)

from the code editor

• open app/assets/stylesheets/application.css
• add the code:

a {
  color: red;
  font-size: 20px;
}
header {
  border-bottom: 2px solid black;
}
footer {
  border-top: 2px solid black;
}
.notice {
  color: green;
  font-size: 20px;
}
.error {
  color: red;
  font-size: 20px;
}

from the browser

• refresh the browser

Gems

from the code editor

• open Gemfile
• add the gem will_paginate, unicorn, zurb-foundation, pg, heroku
• move sqlite3 gem to development group and pg to production group

from the console

• run bundle install
• configure foundation with rails g foundation:install press y to access overwrite

from the browser

• refresh the browser

from the code editor

• open app/controllers/site_controller.rb
• remove the code @blabs = Blab.all
• add the code:

@blabs = Blab.paginate(page: params[:page], per_page: 5)

• open app/views/site/index.html.erb
• add the code: <%= will_paginate @blabs %>

Heroku and git

• Signup at https://api.heroku.com/signup from the console
• run git init
• run git add .
• run git commit -m "Initial Commit"

Deploying the app

from the console

• run heroku create --stack cedar
• run git push heroku master
• run heroku run rake db:migrate

from the browser

• visit your site

User signup

Adding a migration

from the console

• run rails generate migration add_fields_to_blab from the code editor
• open the new migration file
• add the code:

add_column :blabs, :tags, :string

from the console

• run rake db:migrate

from the code editor

• open app/views/blabs/new.html.erb
• add the code:

<p><%= f.text_field(:tags, placeholder: 'tags') %></p>

• open app/models/blab.rb
• update attr_accessible with :tags

Another Deploy

from the console

• run git add .
• run git commit -am "more updates"
• run git push heroku master
• run heroku run rake db:migrate

from the browser

• refresh your site

Rails Challenges

1. Create another page. Link to it from the home page, and link to the home page from it
2. Update your layout to have a new header and footer
3. Change some styles.
4. Add a "private" boolean to your blab model and database
5. deploy your changes

Resources

Congrats! You've built a rails app. Now it's time to go re-learn what you just did. Here are some links to help you get started

• http://meetup.lvrug.org/
• http://www.codecademy.com/tracks/ruby
• http://www.codeschool.com/paths/ruby
• http://www.codeschool.com/courses/ruby-bits
• http://railsforzombies.org/
• http://jumpstartlab.com/courses
• http://railscasts.com/
• http://ruby.railstutorial.org/
• http://railsbest.com/