Rails at a Snail’s Pace        Matt Reider      Jen-Mei Wu
9:00 - 10:30 UNIT 1                               Agenda    2.3 Questions  1.1 Demo an app                       12:00 LUN...
Unit 11.1 Demo an app            Lab 1b: Scaffolding1.2 What is Rails?         1. 5 Questions1.3 Our EnvironmentLab 1a: Ge...
Intros• Matt Reider• Jen Mei
1.1 Demo an App• Little School House• Courses Lists (add / edit / delete)• Assignments (add / edit / delete)
1.2 What is Rails?• A Framework based on Ruby • Huh? Framework? • Wha? Ruby?• A fast way to build web applications• Fun!
1.3 Our Environment• We will develop in a browser based editor• Ctrl-s (or ctrl-shift-s) to save• Right click to create fil...
Lab 1a: Getting Oriented1. Download & install http://google.com/chrome2. Open Google Chrome as your browser3. Get your Lab...
1.4 Databases•   From Oracle to MySQL and back again•   Databases consist of Tables    •   Tables consist of Columns    • ...
1.5 Scaffolding• A simple command• Creates HTML, CSS, Test stuff, DB Tables, & Ruby!• Is a generic start for building an a...
Lab 1b: Scaffolding1. In your Lab Environment, go to the Console tab.2. Press ctrl-c and [enter] to make sure you have a p...
Lab 1c: More Scaffolding1. In your Lab Environment, go to the Console tab.2. Press ctrl-c and [enter] to make sure you hav...
1.6 Questions
BREAK
Unit 22.1 What is MVCLab 2a Working with Views2.2 RoutesLab 2b Changing the Home Directory2.3 Questions
2.1 What is MVC?• The smart way to build applications• Separates Business Logic, HTML, and Actions • Model: talks to datab...
2.1 What is MVC?                            Hey Model,                             can I have                            s...
Lab 2a: Working with Views1. Browse to http://(your environment address):3000/courses2. Make sure you have at least one co...
Lab 2b: Adding assignments1. Click the Editor tab in your Lab Environment2. Open up little_school_house/app/views/courses/...
2.2 Routes• Looks at which URL a user clicked on• Decides which Controller to use based on the URL• Can set root (home) pa...
Lab 2c: Changing the Home Directory1. In the Console tab, run the server if it isn’t running already:   rails server2. Bro...
Lab 2d: Redirection1. In the Editor tab, edit config/routes.rb again to use a redirect   (changed text in blue):   root :to...
2.3 Questions
LUNCH
Unit 33.1 ActiveRecordLab 3a Using ActiveRecord3.2 ValidationsLab 3b Creating a Validation3.3 Questions
3.1 ActiveRecord• The Rails way of talking to a database• Let’s you switch databases without worrying• Used in Models    •...
Lab 3a: Using ActiveRecord1. Click on the Console tab.2. Click control-c if the server is running.3. To go into the Rails ...
3.2 Validations• Protects the database from garbage data• Belongs in a Model• Complains if user doesn’t enter clean data: ...
Lab 3b: Using Validations1. Click the Editor tab in your Lab Environment2. Open file app/models/course.rb.3. Add the follow...
3.3 Questions
BREAK
Unit 44.1 AssociationsLab 4-1 Editing the Model4.2 Putting it all togetherLab 4-2 Making UI changes4.3 Questions
4.1 Associations• Creates a relationship between Models• Represents the relationship between database tables       belongs...
Lab 4-1a: Making database changes1. In the Console tab, click control-c to exit the server if it’s   running. Create a new...
Lab 4-1b: Editing the Models1. In the Editor tab, edit app/models/course.rb (new text in blue):   class Course < ActiveRec...
Lab 4-1c: Testing changes1. In the Console tab, type control-C to exit server if running.   Then go into the rails console...
4.2 Putting it all together• Modify routes to show nested structure.• Modify course show view to list assignments.• Modify...
Lab 4-2a: Modifying routes1. In the Editor tab, edit config/routes.rb. Nest assignments inside   of courses, like so:   Lit...
Lab 4-2b: Modifying the course show view1. In the Editor tab, edit app/views/courses/show.html.erb. Replace the   static l...
Lab 4-2c: Modifying the new assignment1. In the Editor tab, edit app/views/assignment/new.html.erb.   Since the routes hav...
Lab 4-2d: Modifying the controller1. In the Editor tab, edit app/controllers/assignments_controller.rb.   Change the new m...
Lab 4-2e:Viewing changes1. In the Console tab, run the server again:   rails server2. In the browser, go to the show page ...
4.3 Questions
FINISH
Upcoming SlideShare
Loading in …5
×

Web20

295
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
295
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Talking Points:\nThis is for Snails. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Web20

    1. 1. Rails at a Snail’s Pace Matt Reider Jen-Mei Wu
    2. 2. 9:00 - 10:30 UNIT 1 Agenda 2.3 Questions 1.1 Demo an app 12:00 LUNCH 1.2 What is Rails? 1:00 - 1:45 UNIT 3 1.3 Intro Environment 3.1 ActiveRecord Lab 1a: Getting Oriented Lab 3a: Using ActiveRecord 1.4 Databases 3.2 Validations 1.5 Scaffolding Lab 3b: Creating a Validation Lab 1b: Scaffolding 3.3 Questions Lab 1c: More Scaffolding 1:45 - 2:00 BREAK 1. 6 Questions 2:00 - 3:00 UNIT 4 10:30 - 10:45 BREAK 4.1 Associations 10:45 - 12:00 UNIT 2 Lab 4a: Editing the Model 2.1 What is MVC? 4.2 Finishing Up Lab 2a: Working with Views Lab 4b: Changing the View Lab 2b: Adding Assignments 4.3 Questions 2.2 Routes and Rake and redirects FINISH Lab 2c: Changing the Home Page Lab 2d: Redirection
    3. 3. Unit 11.1 Demo an app Lab 1b: Scaffolding1.2 What is Rails? 1. 5 Questions1.3 Our EnvironmentLab 1a: Getting Oriented1.4 Databases
    4. 4. Intros• Matt Reider• Jen Mei
    5. 5. 1.1 Demo an App• Little School House• Courses Lists (add / edit / delete)• Assignments (add / edit / delete)
    6. 6. 1.2 What is Rails?• A Framework based on Ruby • Huh? Framework? • Wha? Ruby?• A fast way to build web applications• Fun!
    7. 7. 1.3 Our Environment• We will develop in a browser based editor• Ctrl-s (or ctrl-shift-s) to save• Right click to create files / folders• Console view• Curriculum view
    8. 8. Lab 1a: Getting Oriented1. Download & install http://google.com/chrome2. Open Google Chrome as your browser3. Get your Lab Environment at http://rubygami.com4. Click on Console tab5. Type rails new little_school_house6. Type cd school_house7. Type bundle install (and wait)8. Type rails s9. Open a new browser tab in Google Chrome10. Browse to http://(your environment address):300011. What do you see? :)
    9. 9. 1.4 Databases• From Oracle to MySQL and back again• Databases consist of Tables • Tables consist of Columns • col um Records contain columns of data n: cou rse _na me id course_name id course_id course_name 1 Biology 1 1 proteins 2 History 2 1 cell organelles 3 1 DNA 3 Literature Table: ord lles) assignme rec rgane urses nts ll o : co , ce ble (2,1 Ta
    10. 10. 1.5 Scaffolding• A simple command• Creates HTML, CSS, Test stuff, DB Tables, & Ruby!• Is a generic start for building an application rails generate scaffold course title:string description:text
    11. 11. Lab 1b: Scaffolding1. In your Lab Environment, go to the Console tab.2. Press ctrl-c and [enter] to make sure you have a prompt3. Create your application by typing (all on one line): rails generate scaffold course title:string description:text4. Add the database from your scaffold by typing: rake db:migrate5. Run the server again: rails server6. Browse to http://(your environment address):3000/courses.7. Pretend you are a user and add, edit, and delete courses
    12. 12. Lab 1c: More Scaffolding1. In your Lab Environment, go to the Console tab.2. Press ctrl-c and [enter] to make sure you have a prompt3. Now that we have courses, we’re going to add assignments to our application. Do this by typing (all on one line): rails generate scaffold assignment description:text assigned_on:date due_on:date4. Update the database by by typing: rake db:migrate5. Run the server again: rails server6. Browse to http://(your environment address):3000/assignments.7. Pretend you are a user and add, edit, and delete assignments
    13. 13. 1.6 Questions
    14. 14. BREAK
    15. 15. Unit 22.1 What is MVCLab 2a Working with Views2.2 RoutesLab 2b Changing the Home Directory2.3 Questions
    16. 16. 2.1 What is MVC?• The smart way to build applications• Separates Business Logic, HTML, and Actions • Model: talks to database • View: displays information • Controller: responds when user does something
    17. 17. 2.1 What is MVC? Hey Model, can I have some data? CONTROLLER Hey View, can you show VIEW the data? MODEL Sure! Sure, heres some data...
    18. 18. Lab 2a: Working with Views1. Browse to http://(your environment address):3000/courses2. Make sure you have at least one course by clicking on show3. Click the Editor tab in your Lab Environment4. Open little_school_house/app/views/courses/show.html.erb5. Turn the title into a header by putting h1 tags around it (delete lines in red; type lines in blue): <p> <b>Title:</b> <%= @course.title %> </p> <h1><%= @course.title %></h1>6. Also, remove the “Description” label: <b>Description:</b>7. Run the server again: rails server8. View the changes.
    19. 19. Lab 2b: Adding assignments1. Click the Editor tab in your Lab Environment2. Open up little_school_house/app/views/courses/show.html.erb3. Add in placeholders for assignments: (new code is in blue): <p> <%= @course.description %> </p> <h2>Assignments</h2> <ul> <li>2011-04-01: This quick brown fox jumps over the lazy dog.</li> <li>2011-04-08: After the jumping.</li> </ul> <%= link_to Edit, edit_course_path(@course) %> |4. Click the Console tab and run the server again to look at your changes.
    20. 20. 2.2 Routes• Looks at which URL a user clicked on• Decides which Controller to use based on the URL• Can set root (home) page root :to =>"courses#index"
    21. 21. Lab 2c: Changing the Home Directory1. In the Console tab, run the server if it isn’t running already: rails server2. Browse to http://(your environment address):3000/. Notice that you get the default page.3. In the Editor tab, delete the file public/index.html.4. Reload the page the in the browser and notice that you get an error.5. In the Editor tab, edit the file config/routes.rb. Add the line in blue below: resources :courses root :to => courses#index6. In the browser, reload the page. Notice that your page now shows up.
    22. 22. Lab 2d: Redirection1. In the Editor tab, edit config/routes.rb again to use a redirect (changed text in blue): root :to => redirect("/courses")2. In the browser, reload the page. Notice that the front page now redirects to /courses.
    23. 23. 2.3 Questions
    24. 24. LUNCH
    25. 25. Unit 33.1 ActiveRecordLab 3a Using ActiveRecord3.2 ValidationsLab 3b Creating a Validation3.3 Questions
    26. 26. 3.1 ActiveRecord• The Rails way of talking to a database• Let’s you switch databases without worrying• Used in Models • drawing_101 = Course.new(:title => “Drawing 101”, :description => “Learn to draw”) • drawing_101.save!
    27. 27. Lab 3a: Using ActiveRecord1. Click on the Console tab.2. Click control-c if the server is running.3. To go into the Rails console, type: rails console4. Try typing these commands: • c = Course.first • c.title • courses = Course.all • courses.class • drawing_101 = Course.new(:title => “Drawing 101”, :description => “Learn to draw”) • drawing_101.save!
    28. 28. 3.2 Validations• Protects the database from garbage data• Belongs in a Model• Complains if user doesn’t enter clean data: • 45-344-2 *not a valid phone number • mreider@engine.yard *not a valid email addressvalidates_length_of :title, :within => 5..254, :too_short => "Please pick a longer title.", :too_long => "Title is too long! Please be more concise"
    29. 29. Lab 3b: Using Validations1. Click the Editor tab in your Lab Environment2. Open file app/models/course.rb.3. Add the following line (new text highlighted in blue): class Course < ActiveRecord::Base validates_length_of :title, :within => 5..254, :too_short => "Please pick a longer title.", :too_long => "Your title is too long! Please be more concise" end4. In your browser, try adding a course that has a name shorter than 5 characters or longer than 254 characters.
    30. 30. 3.3 Questions
    31. 31. BREAK
    32. 32. Unit 44.1 AssociationsLab 4-1 Editing the Model4.2 Putting it all togetherLab 4-2 Making UI changes4.3 Questions
    33. 33. 4.1 Associations• Creates a relationship between Models• Represents the relationship between database tables belongs_to has_one has_many a course has_many assignments an assignment belongs_to courses id course_name id course_id course_name 1 1 proteins 1 Biology 2 1 cell organelles 2 History 3 1 DNA 3 Literature
    34. 34. Lab 4-1a: Making database changes1. In the Console tab, click control-c to exit the server if it’s running. Create a new migration by typing: rails generate migration add_course_id_to_assignments2. In the Editor tab, open the file that was generated (under the db/migrations directory). Edit it to include (new text in blue): class AddCourseIdToAssignments < ActiveRecord::Migration def self.up add_column :assignments, :course_id, :integer end def self.down remove_column :assignments, :course_id end3. In the Console tab, type: rake db:migrate
    35. 35. Lab 4-1b: Editing the Models1. In the Editor tab, edit app/models/course.rb (new text in blue): class Course < ActiveRecord::Base has_many :assignments2. Also edit the app/models/assignment.rb: class Assignment < ActiveRecord::Base belongs_to :course
    36. 36. Lab 4-1c: Testing changes1. In the Console tab, type control-C to exit server if running. Then go into the rails console: rails console2. Create a new course and add some assignments to it (comments denoted by “#”): c = Course.create!(:title => c.assignments # Should show a blank array: [] c.assignments.create!( :description => "Figure drawing", :due_on => 1.week.from_now, :assigned_on => Date.today ) c.assignments # Should show the new assignment
    37. 37. 4.2 Putting it all together• Modify routes to show nested structure.• Modify course show view to list assignments.• Modify Assignment creation UI.
    38. 38. Lab 4-2a: Modifying routes1. In the Editor tab, edit config/routes.rb. Nest assignments inside of courses, like so: LittleSchoolHouse::Application.routes.draw do resources :courses do resources :assignments end root :to => redirect("/courses")
    39. 39. Lab 4-2b: Modifying the course show view1. In the Editor tab, edit app/views/courses/show.html.erb. Replace the static list that we added earlier with this code (changes in blue). We will also add a link to create a new assignment: <h2>Assignments</h2> <ul> <% @course.assignments.each do |assignment| %> <li> <%= "#{assignment.due_on}: #{assignment.description}" %> </li> <% end %> </ul> <%= link_to "Create a new assignment", new_course_assignment_path(@course) %>
    40. 40. Lab 4-2c: Modifying the new assignment1. In the Editor tab, edit app/views/assignment/new.html.erb. Since the routes have changed, we need to change the link for ‘Back’. Make the change in blue: <%= link_to Back, course_path(@course) %>2. We will also need to change the form itself, which is in a partial. Edit it by opening up app/views/assignment/_form.html.erb. Edit the form so that it reflects that an assignment belongs to a course. Make the changes in blue (make certain to include the square brackets ([])): <%= form_for([@course, @assignment]) do |f| %>
    41. 41. Lab 4-2d: Modifying the controller1. In the Editor tab, edit app/controllers/assignments_controller.rb. Change the new method (delete line in red; add lines in blue): def new @assignment = Assignment.new @course = Course.find(params[:course_id]) @assignment = @course.assignments.build2. Now let’s make a similar change to the create method plus one other change: def create @assignment = Assignment.new(params[:assignment]) @course = Course.find(params[:course_id]) @assignment = @course.assignments.build(params[:assignment]) respond_to do |format| if @assignment.save format.html { redirect_to(course_path(@course), :notice => Assignment was successfully created.) }
    42. 42. Lab 4-2e:Viewing changes1. In the Console tab, run the server again: rails server2. In the browser, go to the show page of a course. Add an assignment.
    43. 43. 4.3 Questions
    44. 44. FINISH
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×