Design the front end
Top  Previous  Next

The Front End of your ds/X Engine (the screens your visitors interact with) are driven by a combination of HTML templates.

A template is simply the HTML "shell" that will contain your website's content. It is the full HTML, without any actual content, that will represent the way your website looks in a browser.

ds/X provides facilities for many templates ... one template dedicated to each type of output the program produces (ie: Search Results, Category Results, Site Ratings, Site Reviews, etc). Although you have the option to create a unique page template for each type of output, ds/X is also smart enough to "revert" back to its default template, should a template not be defined for the current task. So, you could take the long road, and design 50 separate templates, or take the shortcut, and design only one template, the default, which all pages will share.

We recommend an approach in the middle. In most cases, not all templates or functions of the program are called (for example, you may not be using detail pages or ratings), and when they are used, the default template will generally be suitable for the output. In the beginning, we recommend that you setup 2 templates:

Home Page
This template will only be used on the main directory page. Because there's no search results here, just the main category list, this template can be simpler in terms of layout, and possibly have more verbiage or "site links" than your results pages.

Default
This template is used by every other page in the system: Category Listings, ratings, details, etc.

Others....
We will discuss the other templates, and their uses, and some creative ideas in the Advanced Template section of this documentation.



With the ds/X admin center in the top frame, click on the "Page Templates" link. You will see a drop down list which contains the names of each of the pre-defined templates, as well as any templates that you have previously created. To edit a template, simply pick its name from the list, and press the edit template button.

Let's look at a simple template example:

<HTML>
   <HEAD>
     <!-- PLUGIN:META -->
   </HEAD>

   <BODY BGCOLOR="#e0e0e0" LINK="black" VLINK="navy">

     <TABLE WIDTH=85% BORDER=0>
       <TR>
         <TD COLSPAN=2 ALIGN=CENTER>
           <H1>My Search Engine</H1>
           <!-- PLUGIN:BANNER -->
         </TD>
       </TR>
       <TR>
         <TD VALIGN="TOP" WIDTH=25% NOWRAP>
            <!-- PLUGIN:SEARCH -->
         </TD>
         <TD VALIGN="TOP" WIDTH=75%>
            <!-- PLUGIN:MENU -->
            <!-- PLUGIN:CATEGORIES -->
            <!-- PLUGIN:BODY -->
         </TD>
       </TR>
     </TABLE>

   </BODY>

</HTML>


Press the "Save Template" button when you're finished editing. Note, that you can change the template name when saving. This enables you to use one template as a "template" for a new custom template (saving you the chore of copying and pasting your HTML).

This is a very simple template, a table with a centered upper column, and 2 columns for the actual page content.

Notice, in this template the "PLUGIN" tags.... these are the keys to enabling ds/X to merge this template with your page content. Plugins are covered in great detail later in the documentation, as well as within the main JJS Admin Center documentation. For now, just know that these plugins are essential to making ds/X work, and must be included in each template that you create. PLUGIN:BODY is especially important, as it represents the main output of your program. Every template must have this plugin.

Each of the plugins shown above, as well as all of the other ds/X plugins are described in great detail in the System Plugins portion of this documentation. Below, we'll briefly describe the purposes of the plugins shown in the example.

<!-- PLUGIN:META -->
When you created your categories, you entered META information (Title, Description, Keywords). This plugin will insert that information, based on the category the visitor is browsing into your template.

<!-- PLUGIN:SEARCH -->
To draw a search form for searching your website content

<!-- PLUGIN:MENU -->
When browsing categories, this will draw a horizontal menu, allowing your visitor to navigate backwards through the category structure. (ie: Home::Sports:Football:College:Michigan State)

<!-- PLUGIN:CATEGORIES -->
When browsing categories, this will draw a menu, allowing your visitor to navigate forward through the category structure. For example, if you are currently in the "Football" subcategory, this plugin would draw links to PopWarner League, College, and National Football League, as they are on the next level down in the category tree.

<!-- PLUGIN:BODY -->
This is the most important plugin in the system. The BODY plugin represents the "focus" of the page. On the Main (or Home) page of the directory, this plugin will draw the main category list. When searching, or browsing a category, this plugin will draw the search results (links). When voting or rating a website, this plugin draws the rating form. Think of the BODY plugin as the "Meat" of the page.




Internal Templates

In addition to the page templates, you also have the ability to design the internal parts of some of the plugin output. Namely, you can "draw" the front page categories and sub categories, the menu (for PLUGIN:MENU), and the listings for search results.

As an example, for the listings, you could draw a template that looks like this:

<B> <<LINK>> </B><BR>
<BLOCKQUOTE>
   <I> <<DESCRIPTION>> </I><BR>
   <<RATING>>
</BLOCKQUOTE>


What the program will do, is, in a search or a category page, for each link that it finds to display inside of PLUGIN:BODY, it'll run the link through the template above, to show them properly:

JJS Software & Consulting

   The home of the finest Search Engine software under the sun.
   Rating
: 8.5 ( 9 votes )

You can design as many listing templates as you like, and assign each link to use any specific listing template (or they'll all share a common default template, called "link").

The Menu, Category, and Home Page internal templates work in a very similar fashion, using <<VARIABLE>> identifiers to signify the various bits of information you want expressed in the output.

The internal templates are discussed in detail later in the documentation. In the early stages of the development of your front end, we recommend sticking with the system defaults, as they're designed to be generic, and eye pleasing enough to carry you until you are ready to get your hands dirty ....