Now let's open up VScode and open the folder called "Ideator" that contains our rails application.

Let's open into our terminal (the terminal window that isn't running the rails server) and run the following command:

rails g controller ideas

Output:

  create  app/controllers/ideas_controller.rb
  invoke  erb
  create    app/views/ideas
  invoke  test_unit
  create    test/controllers/ideas_controller_test.rb
  invoke  helper
  create    app/helpers/ideas_helper.rb
  invoke    test_unit

Here, g is shortcode for generate. This command generates a controller called ideas for you and will also generate a lot of files. Don't worry too much about what this piece of code does yet. Things will start coming together as we progress, but for now, we want you to start building an app first. This will keep you motivated from the start and help you overcome the first initial wall.

Now let's go into VScode and open up ideas_controller.rb (remember the little trick? Command + p on mac and Ctrl + p in windows and linux).

Inside ideas_controller.rb, let's add an index method. Our code should look like this.

class IdeasController < ApplicationController
  def index
  end
end

When we ran rails generate controller ideas, a folder called ideas was generated in the app/views folder.

In VScode, let's right click on the ideas folder(inside app/views/ folder) and create a new file. Let's save that file as index.html.erb.

erb stands for Embedded Ruby. By making the file extension, html.erb we can embed ruby code in our HTML files. We will see how this works in the next few lessons.

Inside index.html.erb, let's add this:

<h1>This is my first app ever and I'm super excited to become a coder</h1>

Awesome! Now let's hop back into our browser and refresh our application on C9.

...nothing has changed. It's still on the Ruby on Rails Welcome Page. Hmm.

It turns out that you have to tell Rails where your default homepage should be. The routes.rb (inside config/ folder) is responsible for mapping requests. We need to edit routes.rb to configure how the application should handle the requests to the server.

Inside VScode let's open up routes.rb. This file defines how the internals of the web application is hooked up when a user goes to a specific URL. For example, it defines which pages should show up when a user goes to a URL.

Inside this file, let's add root 'ideas#index'.

Your routes.rb should now look something like this:

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'ideas#index'
end

Here, we are telling rails that when the user accesses the 'root' of the application (the homepage), it will trigger the index action (another word for method) in the ideas_controller.rb.

Routes, Controllers, Views

First, a request is sent from the client. Each request has a path. The router responds to the path.

Then the router finds the appropriate controller action for that path. If you run rake routes in your terminal, you can see how the router is mapping the path and the controller actions:

As we can see, / is mapped to the ideas#index controller action. ideas is the controller, and index is the action.

We see this mapping because we defined it as such in the routes.rb file:

Rails then tries to find the appropriate controller and action:

In this case, Rails tries to find the index action inside of ideasController.

Lastly, Rails looks inside app/views directory, tries to find a folder with the same controller name, then tries to find a file with the same controller action name.

By default, when a controller action is triggered in the controller (in this case, the index method is triggered), then Rails will try to find an html file that has the same name as the method (in this case index) to display to the user in the views directory under the controller name's folder (Rails will also try to look into the inherited controller's folder, but let's not get into this right now).

To clear things up, this is what happens:

• A user accesses the root page (the homepage)

  • A request is sent to the server

• Rails looks at the routing to see which controller action to trigger

• The index action in ideas_controller.rb is triggered

• Rails tries to find an html file that is named index in the views/ideas directory

• Rails finds the index.html.erb file

• Rails displays the file

Now let's refresh our web application and see what happens.

Boom! You should now see something like below

Congrats on making it this far. You have written your first page on Ruby on Rails!

Let's now commit this to GitHub. "Committing to Github" is another way of saying, "uploading our code up to Github".

We're first going to add all the files that we just updated:

git add .

Then we're going to add a commit message describing what we just updated:

git commit -am "Add ideas controller and set ideas#index as root"

And finally, push up to GitHub.

git push origin master

You'll be doing this quite a lot and it will become second nature!