captured sparks

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.

You can talk to me, or trackback from your own site. Or, if you're looking for more things to read? Why not check out the Archive.

  1. [...] Welcome to Part 2 of the video tutorial on building a todo list with Rails 3. Part One of the video tutorial is here. [...]

  2. [...] I’ve now posted my two-part video tutorial on building a todo list application with Rails 3 (Part 1 and Part 2). What have I [...]

  3. Kyle said at 5:12 am on May 7, 2010

    Nice job! Would like to see more from you, everything was explained very well. Keep the tuts coming!

  4. It’s great! I’m following the tutorial, but I wonder what’s the CSS you used?

    could you share it too?

    Thank you.

  5. 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.

  6. Robin Fisher said at 7:01 am on June 1, 2010

    Hi Felipe,

    I’ve added the CSS as a gist.

    Robin

  7. Robin Fisher said at 7:02 am on June 1, 2010

    You’ll see the CSS for this in the file. It’s display property needs to be set to inline-block.

    Robin

  8. Thank you very much Robin!

  9. Hey Robin, one more question, what if I wanna include checkboxes instead of the buttons?

  10. I’m having problems trying to declare the action (like in button_to) to a checkbox form…

  11. Robin Fisher said at 6:12 pm on June 7, 2010

    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

  12. 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.

  13. 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?

  14. Robin Fisher said at 6:42 pm on September 14, 2010

    Hi Chris,

    You need to make sure that your layout includes the flash messages. Check out the Rails Guides for info.

    Robin

  15. Brianoh said at 6:10 am on October 5, 2010

    Have completed Part One and it was a great help thanks.

  16. 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. :)

  17. Robin Fisher said at 10:51 am on November 7, 2010

    Hi Mathew,

    It should be < %= link_to "Delete", list_url(list), :method => :delete %>

    Robin

  18. 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?

  19. Robin Fisher said at 10:15 am on December 19, 2010

    Hi Kristian,

    Can you check your routes.rb file. You should have a line in there that says resources :lists

    It should have been generated when you typed rails g resource list.

    Thanks

    Robin

  20. 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!

  21. Hi Robin;

    Thank you for lesson primarily.
    What is name by textmate color scheme ? I suppose as amy. I’m wrong?

  22. Robin Fisher said at 8:29 am on March 12, 2011

    Hi Mirac,

    The theme is Made of Code.

    Robin

  23. Thanks Robin.

  24. 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

  25. Nevermind – figured it out! As simple as forgetting to capitalize the second “List”. :)

  26. 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:
    respond_to :html, :x ml, :js

    def index
    respond_with(@lists = List.all)
    end

    def new
    @list = List.new
    end

    What am I missing??

    Thanks,
    Paul

  27. sorry, the html cut out part of the page, the code is:
    = form_for @list do |form|

  28. Not sure what I changed, but it works now… please disregard. Great tutorial btw.

  29. 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

  30. Robin Fisher said at 6:51 am on June 28, 2011

    Hi Paul,

    Have you added in the code to display the flash messages in your layout?

    Robin

  31. 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.

  32. Robin Fisher said at 6:41 am on June 29, 2011

    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

  33. nope, i didn’t have that – thank you.

    did i miss it in the tutorial or was i taking it too literal?

  34. Robin Fisher said at 7:54 pm on June 29, 2011

    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. :o )

  35. I loved it but you need to slow down a bit :) It’s hard to keep up as a a newbie to rails.

  36. Ohmbie said at 8:58 pm on July 26, 2011

    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. ;)

Talk to me