Skip to content

Commit

Permalink
WIP - Adding a scaffold-free version of Suggestotron
Browse files Browse the repository at this point in the history
* First few pages are drafted
* The rest of the curriculum has placeholder pages
* Not using any generators other than rails generate migration
  • Loading branch information
lilliealbert committed Oct 21, 2013
1 parent adf1143 commit ca5b55c
Show file tree
Hide file tree
Showing 28 changed files with 1,073 additions and 0 deletions.
5 changes: 5 additions & 0 deletions lib/step.rb
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ def todo todo_text
IRB_CAPTION = "Type this in irb:"
RESULT_CAPTION = "Expected result:"
FUZZY_RESULT_CAPTION = "Approximate expected result:"
RAILS_CONSOLE_CAPTION = "Type this in the Rails console:"

def console(commands)
console_with_message(TERMINAL_CAPTION, commands)
Expand All @@ -211,6 +212,10 @@ def console_without_message(commands)
console_with_message("", commands)
end

def rails_console(commands)
console_with_message(RAILS_CONSOLE_CAPTION, commands)
end

def irb msg
div :class => "console" do
span IRB_CAPTION
Expand Down
7 changes: 7 additions & 0 deletions sites/suggestotron-sans-scaffolds/_consider_deploying.step
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
div :class => "deploying" do
h1 "Deploying"
blockquote do
message "Before the next step, you could try deploying your app to Heroku!"
link 'deploying_to_heroku'
end
end
10 changes: 10 additions & 0 deletions sites/suggestotron-sans-scaffolds/_switch_to_home_directory.step
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
message "`cd` stands for change directory."

option "Windows" do
console "cd c:\\Sites"
message "`cd c:\\Sites` sets our Sites directory to our current directory."
end
option "Mac or Linux" do
console "cd ~"
message "`cd ~` sets our home directory to our current directory."
end
9 changes: 9 additions & 0 deletions sites/suggestotron-sans-scaffolds/add_a_new_topics_form.step
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
message <<-MARKDOWN

This page will walk through adding a form to create topics. FORM HELPERS!

This is probably a good time to talk about HTTP verbs and RESTful routing.

MARKDOWN

next_step "add_an_edit_topics_form"
78 changes: 78 additions & 0 deletions sites/suggestotron-sans-scaffolds/add_a_topics_index.step
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
section "Overview" do
message <<-MARKDOWN
Now let's add a view!

Things to cover:

* Getting resources from the DB via the controller
* Sharing those with the view
* ERB
MARKDOWN
end

steps do
step do
message <<-MARKDOWN
First, let's add the correct view. Under views, add a folder called `topics`. Within that folder, make a file
called `index.html.erb`
MARKDOWN
source_code "<h1>This is a topics index!!!</h1>"
message <<-MARKDOWN
View file structure description & how they're named the same as the controller actions
MARKDOWN
end

step do
message <<-MARKDOWN
Go to the browser and look at your beautiful page
MARKDOWN
end

step do
message <<-MARKDOWN
Now we'll actually show the topics on the page. First, we need to get all the topics out of the database.

Update your controller!
MARKDOWN
source_code <<-RUBY
def index
@topics = Topic.all
end
RUBY
message <<-MARKDOWN
Now we're getting the stuff from the controller
MARKDOWN
end

step do
message <<-MARKDOWN
Lets show it on the page. Add this to your view, `app/views/topics/index.html.erb`.
MARKDOWN
source_code <<-RUBY
<%= @topics %>
RUBY
message <<-MARKDOWN
Wow, that's ugly! I guess we're not done. ERB!!
MARKDOWN
end

step do
message <<-MARKDOWN
Let's show all the topics! Remove that ugly line, and replace it with this:
MARKDOWN
source_code <<-RUBY
<% @topics.each do |topic| %>
<h2><%= topic.title %></h2>
<p><%= topic.description %></p>
<% end %>
RUBY
message <<-MARKDOWN
MARKDOWN
end
end

section "Recap" do
message "This is a recap"
end

next_step "add_a_new_topics_form"
59 changes: 59 additions & 0 deletions sites/suggestotron-sans-scaffolds/add_a_topics_model.step
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
section "Overview" do
message <<-MARKDOWN
Now that we have a place to save our topics in the database, we need to create a Ruby class to represent
our topics &mdash; a model.
MARKDOWN
end

steps do
step do
message <<-MARKDOWN
Add a new file inside the directory `app/models`. In Sublime, you can right click (ctrl + click on Mac)
and select "New File". Save it as `topic.rb`.
MARKDOWN
end

step do
message "Add the following code to that file:"
source_code <<-RUBY
class Topic < ActiveRecord::Base
end
RUBY
message <<-MARKDOWN
This creates a class called Topic that inherits from ActiveRecord::Base. (Don't forget to save!)
MARKDOWN
end

step do
message "Now we're going to make sure we hooked up our model correctly, using the Rails console!"
console "rails console"
message "You're now in an interactive terminal, just like IRB, but with all of your Rails app loaded up!"
end

step do
rails_console "Topic"
message "This will tell you what Rails knows about the model Topic, something like: "
source_code "=> Topic(id: integer, title: string, description: text)"
end

step do
rails_console 'cats = Topic.new(title: "Cats are so great", description: "Yay cats!")'
message "This creates a new topic in the database, but it's not saved yet. See how it doesn't have an id?"
source_code '=> #<Topic id: nil, title: "Cats are so great", description: "Yay cats!">'
rails_console 'cats.save'
rails_console 'cats'
message "Now we have a saved topic &mdash; you can see it now has an id:"
source_code '=> #<Topic id: 1, title: "Cats are so great", description: "Yay cats!">'
end

step do
message "Make two or three more topics so that you have something to look at once you make a web interface!"
end

step do
rails_console "Topic.all"
message "Look at all your topics! Neat!"
end
end

next_step "add_a_topics_routes_and_controller"
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
section "Overview" do
message <<-MARKDOWN
We're going to an index, so we can see all of our beautiful topics!

### Reviewing MVC
This is a review of MVC
MARKDOWN
end

steps do
step do
message <<-MARKDOWN
First, we're going to update the `routes.rb` file, inside the `config` directory. This file comes
with lots of helpful comments that can help you create your routes correctly. We're going to add our
routes using the resource method on line 2:
MARKDOWN
source_code <<-RUBY
resources :topics
root 'topics#index'
RUBY
message <<-MARKDOWN
This is helping information about routes. Mention something about the root route.
MARKDOWN
end

step do
message <<-MARKDOWN
Now let's look at what routes that generated by visiting http://localhost:3000/rails/info/routes.

Here's some info about reading that page
MARKDOWN
end

step do
message <<-MARKDOWN
Okay, let's go look at our app again and see what's changed. Visit http://localhost:3000.

Now, instead of the default Rails page, we see the error "uninitialized constant TopicController" ... because
there's no controller for topics!
MARKDOWN
end


step do
message <<-MARKDOWN
Time for a topics controller
MARKDOWN
source_code <<-RUBY
class TopicsController < ApplicationController
def index
end
end
RUBY
message <<-MARKDOWN
What does this do? How does it relate to the route?
MARKDOWN
end
end

section "Recap" do
message <<-MARKDOWN
This is a recap
MARKDOWN
end

next_step "add_a_topics_index"


message "# here's the original 'set root route' page content"

goals {

goal "Now that the structure is complete, let's make the flow work smoothly."

message "Currently when you go to <http://localhost:3000> you see the \"Welcome
aboard\" message."

message "It would be easier to use our app if <http://localhost:3000> went directly to the topics list."

message "In this step we'll make that happen and learn a bit about routes in Rails."
}

steps {

step "Add a root route" do
message "Open `config/routes.rb`. Search the file for 'root' (near the top) uncomment that line and change it to read `root 'topics#index'`. When you are done the line should look like this:"

message "(Rails 3.x users should add `root to: 'topics#index'` and will need to remove their `public/index.html` file)."

end

source_code :ruby, <<-RUBY
root 'topics#index'
RUBY


step "Confirm your changes" do
message "Go back to <http://localhost:3000/>. You should be taken to the topics list automatically."
end
}

explanation {

message <<-MARKDOWN
* `root 'topics#index'` is a rails route that says the default
address for your site is `topics#index`. `topics#index` is the topics
list page (the topics controller with the index action).
* Rails routes control how URLs (web addresses) get matched with
code on the server. Similar to how addresses match with houses and
apartments.
* The file `config/routes.rb` is like an address directory listing the
possible addresses and which code goes with each one
* `routes.rb` uses some shortcuts so it doesn't always show all the
possible URLs. To explore the URLs in more detail we can use the
terminal.

At the terminal type `rake routes`. You should get something that
looks like this:

````
$ rake routes

Prefix Verb URI Pattern Controller#Action
topics GET /topics(.:format) topics#index
POST /topics(.:format) topics#create
new_topic GET /topics/new(.:format) topics#new
edit_topic GET /topics/:id/edit(.:format) topics#edit
topic GET /topics/:id(.:format) topics#show
PATCH /topics/:id(.:format) topics#update
PUT /topics/:id(.:format) topics#update
DELETE /topics/:id(.:format) topics#destroy
root GET / topics#index
````
This shows all the URLs your application responds to. The code that starts with colons are variables so :id means the id number of the record. The code in parenthesis is optional.

In Rails 4, you can also get this information on your site in development. Go to <a href="http://localhost:3000/rails/info">http://localhost:3000/rails/info</a> and you'll see something like this:

<img src='img/rails4_rails_info_routing.png'>

You'll also see that table in Rails 4 whenever you try to access an invalid route (try <a href="http://localhost:3000/sandwich">http://localhost:3000/sandwich</a>)

### Exploring Routes (optional)

Now you can have a look at the paths that are available in your app.
Let's try looking at one of the topics routes we just generated.
Open up your rails console and play:

$ rails console
>> app.topics_path
=> "/topics"
>> app.topics_url
=> "http://www.example.com/topics"

`app` is a special object that represents your entire application.
You can ask it about its routes (as we just did), play with its
database connections, or make pseudo-web requests against it with
`get` or `post` (and lots more).

MARKDOWN
}

0 comments on commit ca5b55c

Please sign in to comment.