Viewing the Info

The Automated Store

It's great that people can now access the products, but the data that is returned doesn't look very nice. A complete website has another component - the View.

In Rails

Websites don't usually send visitors raw data, they send HTML files. In Rails, these are created from layouts and templates. A template contains areas to be filled in with data variables made available from the controller. These variables are marked with a @, such as @product. The data is "pasted" into the template, and combined with a layout to create a final HTML page, which is sent to the user to view.

Try it out

It's time to edit an actual code file in your Rails project.

1. Go to the sidebar and click on app->views->products->show.html.erb to open the products show file. This was actually the page that was displayed earlier. It currently says @product.inspect which is used when debugging, but you can make it look nicer.
2. Change @product.inspect to @product.name.
3. On the next line type <%= %>. This is the syntax to print Ruby code to the page. In between the tags, type @product.description. Click on " Save and Run" to view your page. (You may need to re-enter products/1 and the end of the URL box.)
4. Follow the same step to display the price of the product.
   Stuck?

   Here's the code:
   <%= @product.description %>
   The page now has the information you need, but it's all on one line. Let's use some HTML to fix it up. (Need to review HTML? See HTML in 21 minutes.)
   
5. Add <h1> heading tags around the name, like this: <h1> <%= @product.name %> </h1>.
   
6. Add <p> paragraph tags around the description.
7. Add <b> bold tags around the price.
   Stuck?

   Here's the code:

   <p><%= @product.description %></p>
   <b><%= @product.price %></b>
   

You now have a correctly formatted HTML page which shows actual product data from the database!