The next Product College class starts January 2018. Apply Now

Making Resources

Making Resources

August 18, 2015

Project: Build a Ruby on Rails blog with cats (and unicorns)

We already had our /config/routes.rb file open, so edit it a little bit more. Add this line to the file:

Rails.application.routes.draw do
    resources :articles

    root 'welcome#index'

PS: We removed all the greyed out code from the file to make it easier to read. You can just copy and paste the above lines and remove everything else.

Now we are going to use more Rails magic. Let's go back to the terminal and type

$ bin/rake routes (Mac OSX)

$ ruby bin/rake routes (Windows)

and press enter. Rails will now create new web addresses for our blog. The web addresses we will use are

http://localhost:3000/articles - this will show all the articles

http://localhost:3000/new - this will show the form to create an article

http://localhost:3000/articles/:id - this will show us only one article

Now that we have the routes, let's make our basic form, which will look something like this:

New article form

It will look a little basic for now, but that's ok. We'll make it look awesome later.

Firstly, we need a place within the application to create a new article. A great place for that would be at /articles/new. Rails has already created the route for us, so we just need to create the controller and view for it.

Let's create an ArticlesController by using some Rails magic in the terminal again. Type the following:

$ bin/rails generate controller articles (Mac OSX)

$ ruby bin/rails generate controller articles (Windows)

and ... you know it ... press enter. Let's open the newly created controller and add a new action.

What are actions?
In object-oriented programming, a method is a programmed procedure that is defined as part of a class and included in any object of that class. In Ruby, methods are called actions.

The code should look like this in the articles_controller.rb, which you can find under /blog/app/controllers.

class ArticlesController < ApplicationController
  def new

We also need a view to create an article, so let's go ahead and create a new file. As it is a view, it should live under /views/articles in the /app folder. Let's name it new.html.erb as it will create new articles.

Articles folder in Sublime

Adding new file to articles folder

Now type Cmd + S (Mac OSX) or Ctrl + S (Windows) to save the file and name it:

Naming file in Sublime

Press enter when you typed the filename and the file will appear in the directory. Now let's put some HTML into the new file:

<h1>New Article</h1>
<%= form_for :article, url: articles_path do |f| %>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
    <%= f.submit 'Save Article' %>
<% end %>

If you now navigate to the new URL http://localhost:3000/articles/new​ you will see the new form. It really is that easy to make a form!

New route in browser

Ruby vs HTML syntax
In HTML, the tags we use to make a web page use these < > brackets.

Example: <h1>Hello</h1>

In Ruby, the same brackets are used but they are followed with the % sign.

Example: <=% ... %>

Click the Save Article button now to see what happens.

Ruby action error

Oh no, we got an error! This is because we have not defined the create action in the controller yet. Let's do that now.

Open the articles_controller.rb again and add this code to it:

class ArticlesController < ApplicationController
  def new

  def create
    render plain: params[:article].inspect

Enter some details into the form and click the Save Article button now. You should be getting something like this in your browser:

Article json in browser

This is already really great but not very useful when building a blog. We want to save this data in a database to then show it on a website. So let's build the last building block to a complete web application.


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations across the USA and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more