33 Comments
April 26th 2010

Sortable List in Ruby on Rails 3 – Unobtrusive jQuery

Step 1 – create app

$ rails new books -d mysql

Step 2 – replace contents in rails.js with following (switch from prototype to jquery)

http://github.com/rails/jquery-ujs/blob/master/src/rails.js

Step 3 – bundler

Go to gemfile

gem "rails"
gem "mysql2"
gem "acts_as_list"

# go to console:
$ bundle install

Step 4 – to be quick will scaffold a resource

$ cd books
$ rails g scaffold books name:string
# make sure your config/database.yml file is filled in correctly
$ rake db:create
$ rake db:migrate

Add acts_as_list to model

# book.rb
class Book < ActiveRecord::Base
acts_as_list
end

Step 5 – add jquery to view and setup javascript content_for

Go to app/views/layouts/books.html.erb
Change this:

<%= javascript_include_tag :defaults %>

To this:

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js", "rails.js" %>

Also before /body add:

<%= yield :javascript %>

Step 6 – seed the db

Go to db/seeds.rb

#db/seeds.rb
book = Book.create([{ :name => 'Harry Potter' }, { :name => 'Twilight' }, { :name => 'Bible' }])

# back to console
$ rake db:seed
# doesn't work - need to add the position column to books in database
$ rails g migration add_position_to_books position:integer
$ rake db:migrate
$ rake db:seed

Step 7 – edit index for li – tables don’t work

<h1>Listing books</h1>
<ul id="books"> <% @books.each do |book| %>
<li id="book_<%= book.id %>"><span class="handle">[drag]</span><%= book.name %></li>
<% end %></ul>
<%= link_to 'New book', new_book_path %>

Step 8 – add javascript in view

# index.html.erb
<% content_for :javascript do %>
<%= javascript_tag do %>
// Sorting the list

$(document).ready(function(){
$('#books').sortable({
axis: 'y',
dropOnEmpty: false,
handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#books').sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#books').effect('highlight');
},
url: '/books/sort'})
}
});
});
<% end %>
<% end %>

Step 9 – controller

#books_controller.rb
def index
@books = Book.order('books.position ASC')
end

def sort
@books = Book.all
@books.each do |book|
book.position = params['book'].index(book.id.to_s) + 1
book.save
end

render :nothing => true
end

Cursor

#style.css
.handle:hover{cursor: move;}

Final step – routes

root to: "books#index"
resources :books do
post :sort, on: :collection
# ruby 1.8 would go :on => :collection
end

PS: if you want an all-in-one resource to become an expert in ruby on rails 3, I wouldn’t bother with textbooks – just buy this video tutorial series (and if you get it through this link I get some commission): Ruby on Rails Tutorial

PPS: I track my time with this awesome time tracking web app.

1 Comment
April 24th 2010

Rails 3 App From Scratch Tutorial – Part 2

Previously

In the last tutorial you should have ended up at http://localhost:3000/. What did you see? It should have been a welcome to rails page. Now where did this come from? It is important to realize that this is not really rails working – it’s just a plain html page with CSS. Rails is made to first check the Public folder for any html files before it gets into your app coding. So can you guess what happened?

Rails looked in public and saw the index.html – so it rendered it without another thought. Time to create our own index using real rails code.

Your own root view

What we want is for the URL of nothing (as in nothing after the slash behind “http://localhost:3000″) to equal our index ‘view’. This will be called our root view because it is at the root of our application. For apps out there it will be the home page usually. First we will create the controller and views for this ‘home page’. Go to the console so we can make some orders. Make sure you are in the apps directory. If you are outside the apps directory this next command will generate a whole new rails app!

=> rails g controller home index

Notice we start with rails again. In rails version 2 you had to write “script/generate controller home index”. They changed it to rails to make it a bit quicker. g stands for generate. The first word after g will be the name of the controller – I called mine ‘home’. The second word is called an action, which will be our view (index.html).

What are controllers and actions?

If you look in the folder app and controllers – double click on the home controller. What is the controller exactly? It’s just a class – those who have done a bit of programming will know what this is. Describing classes is beyond this tutorial – go look it up. The method ‘index’ should be in there too. If you are wondering why it seems so spacious, it is because if you look up the top you will see the class is inheriting from another class – the ApplicationController class. This means all the methods and coding is done in the ApplicationController and our HomeController just inherits ALL of it. We can write new methods that just get added onto the ones given to us from ApplicationController.

The action ‘index’ is a method of HomeController. Rails matches these methods to views – an ‘index’ action must mean there is an ‘index’ view rails thinks. Lets check – go to the views folder (in app). In the views folder we see a ‘home’ folder and inside of that an ‘index’ view.

You will need to get your mind around how controllers and views work. Note that when a user types in a URL and hits enter several things happen: first the dispatcher looks at the URL and decodes it based on the routes we have set (will get to that), so say the user types ‘/home/index’ (after http://localhost:3000) and the dispatcher knows to match the first word to a controller and the second word to an action – this means the dispatcher will create the HomeController class and then invoke the ‘index’ method. So in a flash it goes something like this :

controller = HomeController.create
controller.index
# the method index tells the browser to open the view with the same name - index.html

#(this is all in my mind and for demonstration purposes only - what actually happens is probably 30 pages of code)

So the rails dispatcher takes in URLs and assigns them to controllers and actions based on what’s known as routes. We will finish up with looking at the routes and then entering in a URL.

Little bit of Routes

Go to the folder config (in the root of your app), then click routes.rb. There will be lots of comments (lines beginning with a hash #) to help you along. Though they probably aren’t very useful to the beginner.

When we made our controller rails helpfully writes in a route for us – can you see it?

get 'home/index'

get is the http verb – GET. We are GETTING information from the server and putting on the page. If we were posting some data to the database – eg creating a new user and submitting their details – then we would want the http verb to be POST for the action called by the form submit button.

Routes need a long post in itself to describe. In a nutshell it turns URLs into controllers and actions and vice versa – turns calls to controller and actions into URLs for us. If we type into the browser now http://localhost:3000/home/index – what happens? (make sure the server is running – ‘rails s’ into console)

Note: if you want an all-in-one resource to become an expert in ruby on rails 3, don’t bother with textbooks – just get this video tutorial series (highly recommended): Ruby on Rails Tutorial

2 Comments
April 23rd 2010

Rails 3 App From Scratch Tutorial – Part 1

This tutorial provides the code I use, explanations in depth and is aimed at beginners.

In this tutorial I take you through the steps of creating a rails app, stopping at each point to explain why I am doing a specific action and how it fits into the rails framework as a whole.

Tagged: rails 3 app, rails 3 app tutorial, rails 3 scratch, rails 3 tutorial, tutorial

4 Comments
March 17th 2010

53 Ruby on Rails 3 Links to Resources, Tutorials and Tips (and growing)

A list for ruby on rails developers who want to start getting into rails 3.