Building a todo list with Rails 3 – Part One
EDIT: The source code is now on Github.
In this video tutorial, we’ll be building a todo list application in Rails 3 that allows the user to have multiple todo lists with multiple tasks. Part 1 will cover setting up the lists and part 2 will deal with adding tasks to those lists and completing tasks.
This is my first video tutorial so please leave constructive comments. If there is anything you’d like to see me cover, let me know. Further reading material is after the video.
- Upgrading to Rails 3
- script/* replaced by script/rails
- Cleaner controllers with respond_with
- New validations
If you enjoyed this post, you should sign up to be notified when my book, Real World Development with Ruby on Rails, is released in May 2013. The book and full source code to the application we develop in it will be just $39 with added value packages also available.
36 Comments
Post a comment
Nice job! Would like to see more from you, everything was explained very well. Keep the tuts coming!
It’s great! I’m following the tutorial, but I wonder what’s the CSS you used?
could you share it too?
Thank you.
Hi Felipe,
I’ve added the CSS as a gist.
Robin
I’m having problems displaying the button_to button because it causes a line break before it.
How do you do it to diaplay it inline of the task?
Thanks.
You’ll see the CSS for this in the file. It’s display property needs to be set to inline-block.
Robin
Thank you very much Robin!
Hey Robin, one more question, what if I wanna include checkboxes instead of the buttons?
I’m having problems trying to declare the action (like in button_to) to a checkbox form…
Hi Felipe,
There are 2 options if you want to use checkboxes. Firstly, wrap the entire list in the form and for each todo item, output a checkbox and if the task has been completed, output a checked box. The second is to use javascript to observe the checkbox and when it is (un)checked make a remote call to the server to update the status in the database.
Robin
Hey Robin,
I’ve tried both methods but I can’t get it working yet…
I found a Railscast episode where Ryan explains how to do this (http://railscasts.com/episodes/52-update-through-checkboxes) and I’m trying to follow it but I think it’s outdated. I’ve tried to adapt it to this application and to Rails 3. This is what I’ve done so far:
I’ve added a new route:
resources :tasks do
collection do
put :complete
end
end
And this is what the view looks like now:
Stuff to do
:put do %>
I’ve also added an update method to the tasks controller:
def update
@task = @list.tasks.find(params[:task])
if @task.update_attributes(params[:task])
flash[:notice] = “Task updated.”
respond_with(@list, :location => list_url(@list))
else
flash[:error] = “Could not update task”
redirect_to list_url(@list)
end
end
I get the checkboxes to appear on the site, but when I click the “Mark as Complete” button I’m getting this error :
ActiveRecord::RecordNotFound in TasksController#update
Couldn’t find List without an ID
app/controllers/tasks_controller.rb:39:in `find_list’
Do you know what do I have to modify or add in order for this to work?
Thank you.
Great tutorial so far! I’m half way and have everything working, except for the flash messages. Nothing shows up when I perform an action that should cause them to appear? Any ideas?
Hi Chris,
You need to make sure that your layout includes the flash messages. Check out the Rails Guides for info.
Robin
Have completed Part One and it was a great help thanks.
Great tutorial.
One thing though I can’t get past which seem to be a routing problem. In the index.html.erb on the line
– | delete %>
I get a wrong number of arguments (0 for 1) error. Isn’t the method supposed to be able to take the list?
I’m a former Java developer so I might be thinking backwards here.
Hi Mathew,
It should be
:delete %>Robin
Hey there, everything’s working for me, but when I get to the part where I add a new list item with
ruby throws me an error saying
No route matches {:controller=>”lists”, :action=>”new”}
Yet, in my lists_controller.rb file, I’ve got
def new
@list = List.new
end
What am I missing?
Hi Kristian,
Can you check your routes.rb file. You should have a line in there that says
resources :listsIt should have been generated when you typed
rails g resource list.Thanks
Robin
Robin, I’m not sure why, but ‘rails g resource list never’ created that line. The good news is that the error caused me to spend some time learning about routes — so I was on the right track at least.
Thank you sir!
Hi Robin;
Thank you for lesson primarily.
What is name by textmate color scheme ? I suppose as amy. I’m wrong?
Hi Mirac,
The theme is Made of Code.
Robin
Thanks Robin.
Thanks for this tutorial! I’ve learned a ton so far…
I’m facing a problem when I try to enter the list = list.new in the rails console. I get the following error message:
NoMethodError: undefined method `new’ for nil:NilClass
from /Users/csamanian/.rvm/gems/ruby-1.9.2-p180/gems/activesupport-3.0.8/lib/active_support/whiny_nil.rb:48:in `method_missing’
from (irb):1
from /Users/csamanian/.rvm/gems/ruby-1.9.2-p180/gems/railties-3.0.8/lib/rails/commands/console.rb:44:in `start’
from /Users/csamanian/.rvm/gems/ruby-1.9.2-p180/gems/railties-3.0.8/lib/rails/commands/console.rb:8:in `start’
from /Users/csamanian/.rvm/gems/ruby-1.9.2-p180/gems/railties-3.0.8/lib/rails/commands.rb:23:in `’
from script/rails:6:in `require’
from script/rails:6:in `’
Any thoughts??? Also – when I use “Rake DB:migrate”, my local server page still shows the “welcome aboard” RoR page and not the messages you have been showing.
Thanks a lot!
Cynthia
Nevermind – figured it out! As simple as forgetting to capitalize the second “List”.
I’m having a similar problem to some of the other posts, but must have a different cause as I’ve checked all the errors discussed.
The error is on the new.html.erb, I get the following error when loading the page:
ActionView::Template::Error (undefined method `model_name’ for NilClass:Class):
1: update test
2:
3:
4: Name
5:
app/views/lists/new.html.erb:2:in `_app_views_lists_new_html_erb___454229099_1
5659544__549769975′
My routs.rb shows:
resources :lists
root :to => ‘lists#index’
My ListsController shows:
ml, :js
respond_to :html,
def index
respond_with(@lists = List.all)
end
def new
@list = List.new
end
What am I missing??
Thanks,
Paul
sorry, the html cut out part of the page, the code is:
= form_for @list do |form|
Not sure what I changed, but it works now… please disregard. Great tutorial btw.
So i’ve gotten all of this to work, except the “flash” code does not work – is there a setting somewhere to enable that?
Thanks!
Paul
Hi Paul,
Have you added in the code to display the flash messages in your layout?
Robin
Hi Robin,
Yes, I have the flash command under all the methods in the lists_controller file, such as:
if @list.save
flash[:notice] = “Form Saved.”
respond_with(@list, :location => list_url(@list))
The list saves correctly, but regardless of which flash is called, it doesn’t shows the flash like in your video.
Hi Paul, did you add the layout code to your application.html.erb file? You should have a div in your application that displays the flash. Layout code
nope, i didn’t have that – thank you.
did i miss it in the tutorial or was i taking it too literal?
No you didn’t miss it. I’ve just had a very quick look over my notes and I skipped the layout at the very start I think. My bad.
)
I loved it but you need to slow down a bit
It’s hard to keep up as a a newbie to rails.
I agree, slow it down a little or at least add some pauses before moving onto the next task. Also, complete your sentence about the last task before moving on. We all know you are sooooo l33t, no need to show off.