At its most basic, a website for a bookshop would simply give the contact details of the shop, so people can visit it.

However we want to provide visitors with a list of what is available. By the end of this tutorial we'll have a sophisticated e-commerce engine so they can buy online, but for this first step we'll simply create a mechanism for listing the books out on screen.

Of course, if that's all we were going to do,  the quickest way would probably be to create a grid using an HTML table, and type in the details there. But we know that we'll want to use the data in more interesting ways later on, so its worth looking at handling the data 'properly' from the start.

To do this, we are going to use a Form component as a 'data feed' to store the information about each book, and then display the information on a Page. Helping to control the formatting of the information will be a Query (and its built-in Table view). All together, a schematic of the data flow looks like this:

 

Creating the Book Form

The Book Form will contain information about each book. To start with we'll want to store some basic information: Title, Author, Price. Later on, we'll want to add in more information, but Forms are very flexible, and don't mind being altered and won't loose any existing information as they get modified.

To add the Table to the site:

  1. Go to the Layout Manager, and choose a Table from the Component Bank. (If there are no Tables left in the Component Bank, select a Form from the Component Store, and add it to the Component Bank first)
  2. Give the Table a name in the bottom box. In this case, we'll call it: Book  (Everyone develops their own styles and naming conventions, but we generally recommend naming tables with singular nouns - so "Book", not "Books" or "Table")
  3. Click "Add to site" and drag the new Table component onto the site tree. The location doesn't matter for now, but later on it will probably get filed away in an admin area (an admin area is nothing special - just a Page component called "Admin", with permissions set on it to keep the public out).

Adding fields to the Table

Before we can start adding information about each book, we need to configure the Table by telling it which fields it will have, effectively designing a questionnaire or form that we'll be filling in for each book.

  1. Go to the Book Table (either by right-clicking the item in the Layout Manager tree where we just added it and choosing "Open", or by clicking its name in the navigation around the edge of the site)
  2. Click on the floating Toolbox, and choose Edit Table. The table configuration interface appears.
  3. Click on the Fields tab.

Now we can tell it about the three fields we need initially: Title, Author and Price. For each field, click Add, and a popup dialog allows us to select the datatype, and give the field a name:

  1. For the Title field, name the field "Title", and leave it as a Text field
  2. For the Author field, name the field "Author", and leave it as a Text field
  3. For the Price field, name the field "Price", and select Currency as the datatype.

Below the list of fields is a box allowing the Default field to be specified. This tells the system which field to show us in a simple pick list, that we'll see when adding the books. 

  1. Choose "Title" from the dropdown, and click Update.

The Table is now fully configured, and ready for us to enter the details about the books.

Entering book data

  1. From the floating Toolbox, click "View Form" which takes us back to the initial view of the Form. This page is mostly blank at the moment, but we're about to change that by adding some books.
  2. Click the "Click here to add a new record" link, and a form will appear, asking for a Title, Author, and Price.
  3. Enter some information here (you can take the information from any books you have to hand)
  4. Click "Submit record" to save the book details, and you'll get back to the inital form page, but this time iwth the book title shown above the link to add a new book.
  5. Add four or five more books, in the same way.

If you want to edit an existing book entry, click on its title. You'll see the full details, with a link at the bottom to edit them.

 

 

It's worth noting that the process described below normally takes only about five minutes to complete, and if the description seems a bit long it's only because we take frequent opportunities to pause and look around as we go.