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
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:
Is is possible to use the rails console to view content. For example:
will show the first entry,
will display the last one
will show them all.
To find a specific case, use
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.
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
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>
<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.