0. If you have no github account yet, create one at https://github.com and then follow the instructions on https://help.github.com/articles/generating-ssh-keys to generate a new ssh key and add it to your github account.

On the command line in a terminal window, set the values of some global variables that git would like to use:

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

You might want to replace the name in the above commands with your own name, and the email address with your own.

1. Start building a new application depot and change into the newly created directory. The commands for this (again on the command line) are:

rails new depot
cd depot

The first command might take a while to complete, so please be patient. When it completes, a lot of files have been created automatically, and before we move on and modify things, let’s put these files under version control.

1a. Make sure that the current directory is the depot directory that contains the freshly created rails application. Create a local git repository as follows:

git init
git add .
git commit -m "initial commit"

1b. On your github account, create a new repository depot (without README or other files’). Then follow the instructions to push your new depot to the github cloud.

2. Next, we use scaffolding to create a product model with components title (of type string), description (of type text), image_url (of type string) and price (of type decimal). The full command for this is:

rails generate scaffold product title:string description:text image_url:string price:decimal

… all on one line.

3. Again, this command creates many files. One of them is a file called ..._create_product.rb in the directory db/migrate. This file contains instructions to create a table with the specified columns for product objects. Open the file in an editor and modify the line about the price to look like

t.decimal :price, precision: 8, scale: 2

This informs the database that a price has 2 decimal digits (out of a total of 8).

4. In order to actually create the database (and a first table in it) we need one more command (on the command line):

rake db:migrate

This initializes the products table in the database.

5. Start the server as a background process:

rails server &

then point your browser to http://localhost:3000/products and follow the instructions to enter a new product.

5a. If it all works fine, it is time to update the git repository. The command

git status

will print a brief report about what has happened since the initial commit. You can now delete unwanted backup copies of files. To commit all changes, the new files and the modified ones, you can use the commands

git add .
git commit -m "scaffolded products"

similar to the ones used for the initial commit. Then, to push the update to the cloud:

git push

Check your github web pages to make sure the new version has arrived.

6. A number of files which rails creates automatically, serve the purpose of testing the basic functionality of the application. Run the test suite with the command

rake test

and watch out for its effects.

7. The form for entering new products could look better in many ways. For example, the description field need not be that long, but wider. Study the file app/views/products/_form.html.erb and modify the line about the description text area to

<%= form.text_area :description, rows: 6, cols: 80 %>

Then enter a new product, and notice the changed appearance of the form.

8. Run the test suite again (rake test) and watch out for its effects.

8a. Again, if you are happy with the modifications and it all works as it should, update your git repositories, local and remote:

git add .
git commit -m "resized description field"
git push

Check your github page for updates.

9. Let’s populate the database with some data that we can play with. Download the files

• db/seeds.rb
• app/assets/images/git.jpg
• app/assets/images/linux.jpg
• app/assets/images/ruby.jpg
• app/assets/images/char.jpg
• app/assets/stylesheets/products.scss

from http://schmidt.nuigalway.ie/cs424/depot and copy them into the corresponding directories in your own depot application.

10. Then load these data into your database with the command:

rake db:seed

(This will probably delete all previously entered data.)

10a. Can you see the new contents of the database in your application? If not, why not? Can you see the new contents of the database on your github pages? If not, why not? If all went well, update the git repositories, local and remote.

11. Next, we try and make the catalog page look more attractive. The key for this lies in the products.scss file. For those instructions to take effect, we need to modify the view files in a couple of places. Start with app/views/layouts/application.html.erb and replace <body> ... </body> by

<body>
  <%= content_tag :main, class: controller.controller_name do %>
    <%= yield %>
  <% end %>
</body>

Then reload the products listing and notice the difference.

12. In the file app/views/products/index.html.erb, replace the first line by

<% if notice %>
  <aside id="notice"><%= notice %></aside>
<% end %>

Also delete <thead> ... </thead> and everything in between. Then replace <tr> by

<%= content_tag :tr, class: cycle('list_line_odd', 'list_line_even') do %>
  <td>
    <%= image_tag(product.image_url, class: 'list_image') %>
  </td>

and </tr> by

<% end %>

Reload the page and notice the differences.

13. Moreover, replace the parts concerned with product.title, product.description, product.image and product.price by

<td class='list_description'>
  <dl>
    <dt><%= product.title %></dt>
    <dd>
      <%= truncate strip_tags(product.description), length: 240 %>
    </dd>
  </dl>
</td>

And finally, replace the navigation links with

<td class='list_actions'>
  <%= link_to 'Show', product %><br/>
  <%= link_to 'Edit', edit_product_path(product) %><br/>
  <%= link_to 'Destroy', product, method: :delete,
      data: { confirm: 'Are you sure?' } %>
</td>

Reload the page and notice the difference.

13a. Once more, do a rake test to check if everything still works as it should. And again, one last time, if you are happy with the changes, update the git repositories. Then send a link to your github repository to cs424.nuig@gmail.com.

14. Formulate 3 questions about this code and submit them as comments to this article. We will try and provide answers to each question asked.