8: Displaying the content

In this section we will learn how to use Rails to display the content in out system.

Creating a new migration

If we want to have our own cases in the application, we need a database table where we can store and keep track of them.

As you remember, in order to make any changes in databases rails uses migrations. We will now generate a migration that will create a cases table.

Initially, we would like to only display the images associated with each case. We will extend this functionality in the future.

We start with storing the images URLs in our database. Right now, if the users want to post something, they have to upload the image to a separate service like imgur.com, then copy and paste the image URL. Our post will be defined by the link to the image.

In order to obtain the links to images you find somewhere on the internet, right click on the image, and select for Firefox Copy Image Location, or for Google Chrome Copy Image URL.

The cases table will contain the list of cases, each case having an image link. And since a link is a string of characters, we will define the links as strings.

To generate the migration, we use the following command in the terminal:

$ rails generate migration create_cases image_link:string

This migration will create a table to store cases. Each case will have a column called image_link, in which a string is stored.

After the migration is created, we migrate the database using the rake tool:

$ rake db:migrate

Creating a model

Having created the database table, we still have to create a model the database will use.

Make a new file in app/models/ and name it case.rb. Inside the new file type and save the following lines:

class Case < ActiveRecord::Base  
end

Using ERB to visualise posts

In the previous section, we created the views/cases/index.html.erb page containing a list of cases we had written by hand.

Let's change the file and make it display the cases we have in the database. To do this, we need to go through each case and display the image link.

Let's replace the previous code with the following:

<h1>Cases</h1>
<ul>
  <% Case.all.each do |c| %>
    <li> Case: <%= c.image_link %> </li>
  <% end %>
</ul>

This will display, for each case c a list item containing the word Case: and the image_link from this case.

We save the file, go to localhost:3000/cases. And see nothing. Which is expected, because we do not have, in fact, any case stored in the database.

To display content, we should first have it. So let's make some database entries.

Using the Rails console to create, read, update and delete Cases

We have a table and a model and a very simple way of displaying the cases. Now we will learn how to create a few entries using the rails console.

To open the console type in a new terminal window or tab:

$ rails console

To exit the console use CTRL+D.

Create entries

To create a new case whose image_link points to a stock photo , type:

> Case.create(image_link: "http://finda.photo/image/15529/thumbnail/original")

Having done this, we refresh localhost:3000/cases page. Note that the rails server is running in a second tab in the terminal.

This is great! The page shows the entry we created and currently have in the database. The extra ">" is due to a typo in the index.html.erb file, you should not have it.

Let's make some more entries, for future use, just by repeating the command above, with different image links:

Read entries

Is is possible to use the rails console to view content. For example:

> Case.first

will show the first entry,

> Case.last

will display the last one

and

> Case.all

will show them all.

To find a specific case, use find:

> Case.find(3)

It is also possible to create a variable and store in it the value of a post. For example

> c = Case.last

We can display the information contained by c. Now this is the id, which is assigned by default, and image_link, which we assigned when we created the last case entry.

Update

If we want to update or to edit a case, we can simply assign to the data it contains new values and save. For example:

> c.image_link = "http://finda.photo/image/8198/thumbnail/original"
> c.save

Delete

If we want to delete an entry we can do that by calling .destroy. For example, to destroy the case number 6 you would type:

> c = Case.find(6)  
> c.destroy

A small adjustment to the way cases are displayed

Instead of the image link, we would like to see an image preview. To do this, we have to modify the data display, or the view.

We open the views/cases/index.html.erb file and modify the list item line. Instead of

<li> Case: <%= c.image_link %> </li>

We use

<li> Case: <%= image_tag(c.image_link )  %> </li>

We save the file and we get to admire the images!

Our images are quite large, we will resize their display in one of the following sections.

Displaying the content