Database-Driven Site Basics

Organizing your site's content in a database, instead of simply placing static content on the page, has many advantages:

• The content can be separated from the markup, so it is easier to edit, especially for non-technical users.
• Since the markup is not embedded in the content, the design is more reliably preserved.
• The content can be delivered in an RSS feed.
• The content can be displayed on multiple pages without having to enter it in multiple places.
• The content can easily be used in a mobile version of the site.

Webvanta provides a rich set of capabilities for creating database-driven content. It is far easier to do so with Webvanta than with any other CMS, and Webvanta is one of very few hosted content management systems where it is possible at all.

This article lays out the basic approach; other support articles go into detail on more advanced aspects.

Built-In and Custom Item Types

The Webvanta system has a number of built-in database item types that require no setup at all, and are available in all pricing plans: blog posts, articles, links, books, and events.

The full power of the system becomes available when you create a custom item type. Unlike the built-in types, whose fields are fixed, custom types can have whatever fields you want. You can also relate one item type to another, use field sets for groups of fields that need to repeat an arbitrary number of times, and have any number of related assets (typically images or PDF files).

For the purposes of this article, we'll create a simple custom item type: Staffmember. This item type will be used to create a page that lists all the staff members, and then a detail page for each staff member.

To create a custom item type, select Database > Item Types and click the Add Custom Item Type button.

Then check the fields you want to use among the standard fields, and click the Add Custom Field button for each custom field you want to add. (See Creating Custom Item Types for details.)

For this example, we're going to create an item type called staffmember, with the following fields:

• name: person's name
• body: biography
• icon: photo
• job_title: person's title (custom field)
• phone: person's phone number (custom field)

Listing Items

To create a page that lists all the staff members, create a new page, and use the w:kb:item:each iterator in its content area, as follows:

<ul>
  <w:kb:item:each type="staffmember" sort="name asc">
    <li><w:name />, <w:job_title /></li>
  </w:kb:item:each>
</ul>

In this example, we've specified that we only want items of type staffmember, and that we want them sorted by name in ascending order. The <li> line inside the iterator will be repeated for each item in the database when the page is displayed.

See Accessing Database Information for more details about how to use WebvantaScript to access the content.

Creating a Detail Page

You might want to simply display all the information about each staff member in the list, but for the purposes of this example we're showing only the name and title. Then we need a detail page that shows all the information about a single staff member. This keeps the list page simple, and it also has SEO advantages: a page that is all about one person, and has that person's name in the pagetitle and H1, is much more likely to rank for that person's name than is a page that lists all the staff members.

Here's the basic code to show all the details for a single staff member:

<w:kb:item>
  <img src="<w:icon />">
  <h2><w:name /></h2>
  <h3><w:job_title /></h3>
  <p>Phone: <w:phone /></p>
  <p><w:body /></p>
</w:kb:item>

This code must be on a page whose page type (selected in a pop-up list at the bottom of the page edit screen) is set to Item. This tells the system that this page needs to display the contents of a particular database item, and that the item's ID is in the URL.

Linking to the Detail Page

Now we just need to link the person's name in the list page to the detail page. The w:path statement will produce the URL for us, inserting the ID and name of the current item. This URL will link to the item page and tell the item page which item should be fetched from the database.

Here's the replacement for the <li> line on the list page to include the link:

<li><a href="<w:path url='staff-detail' />"><w:name /></a>, <w:job_title /></li>

The w:path statement requires an attribute "url" that specifies which item page should be used. You might, for example, have a product database as well as a staff database, and you want the staff list to link to the staff detail page and the product list to link to the product detail page.

This example will generate a URL such as this:

http://www.mysite.com/staff-detail/274289-michael-slater

In this URL, "staff-detail" is the URL for the item page, "274289" is the ID of the database item (which is automatically generated and guaranteed to be unique), and "-michael-slater" is the name of the database item. (The name is added just for SEO purposes; only the ID actually used to select the item, since the name may not be unique.)

Summary

By creating a simple custom item type and just two pages, we now have a system that will display any number of staff members. They will all be listed on the staff list page, with each person's name linked to the staff detail page. There's really only one staff detail page, but because it is passed the ID of a particular staff member as part of the URL, there is effectively a staff detail page automatically generated for every staff member.

Even though you only had to build one page, from the site vistors' and a search engine's perspective, there is one page for every staff member. These pages are dynamically generated from the database, but a search engine can't tell that they aren't static pages. And because the Webvanta system automatically caches each dynamically-generated page as a static page, visitors (and search engines) see static-page performance once the server-side cache has been filled.