Views, Cascading Style Sheets and Seeds

A web application usually has a number of pages each produced by a separate view. All the views (html documents) are kept in the app/views folder. In order to maintain consistency across all the sheets, web sites use style sheets. In Rails these are stored in app/assets/stylesheets. The scaffold command creates one called scaffolds.css.scss.

The New Product link on the products page assists you in adding a single product to the database. If you wish to add a number of items at once, you can use the file, seeds.rb, found in the db (database) folder. If you have a lot of data to add, it is much more convenient than using the New Product link.

  1. Style sheets are stored in the folder /app/assets/stylesheets. Either open scaffolds.css.scss or create a new file with extension .css, such as table.css.
  2. Add the following style code to the new file:

table{

border-style: solid;

border-width: thin;

margin: auto;

}

td {

border-style: solid;

border-width: thin;

padding-right: 0.5cm;

}

3.  Save the file in the /app/assets/stylesheets folder, open the server and check the results at localhost:3000/products.

4.  Create another stylesheet file and place some more styles in it. You can add the following one at a time and check out what each does.

h1, h2, h3, h3, h4, h5, h6 {color: blue}

form {color: seagreen}

table {border-color: blue}

a:link {color:green}

  1. Find an image on the Internet, which you wish to have tile the background, and place it in the images folder. Then add the lines below to the stylesheet, where “image.jpg” is the name of the image that you found.

body

{

background-image: url("image.jpg");

text-align: center;

color: blue;

}

6.  There are several ways to add data to your database table. The easiest probably is to use seeds.rb. This is a Ruby file found in the store/db folder. Type the following code in after the comments (or in place of the commented material.)

products = Product.create([

{ name: 'Apples', quantity_in_stock: 20, price: 2.15 },

{ name: 'Bananas', quantity_in_stock: 50, price: 1.25 },

{ name: 'Pears', quantity_in_stock: 10, price: 3.50 }

])

  1. Run this file by typing rake db:seed at the command prompt. Note it is seed, not seeds. Then open the server and check the data.
  2. Now close this application and return to the one for the playlist that you created in the first lab. Add code to the file scaffolds.css.scss and then add data to the database using seeds.