How to use NeXTensio to build front-end lists

In this 'how to' tutorial you will learn how to modify a NeXTensio list in order to use it in the application front-end. A NeXTensio list is mainly designed for the administrative sections of the application, as it contains the add new, edit and delete buttons which, in conjunction with the NeXTensio form allows modifying database information.

To use it in the application's public pages means to strip off all administrative features, and leave it with the basics only. Even so, it can be done and it will provide some interesting features to your application lists, without too much of a hassle:

• List filtering - you can filter the existing records using various criteria.

• The common list layout.

• Alternate and highlight rows.

• Sorting possibilities: sort the list by any column in the header.

If you have the MX Kollection 3 bundle installed, then you have all the needed tools to build this application. Otherwise, the following separate products should be installed on your computer in order to complete the How to use NeXTensio to build front-end lists tutorial:

• NeXTensio

The estimated completion time for this tutorial is 20 minutes. It also depends on your authoring knowledge with Dreamweaver and MX Kollection 3.

For the goal of this tutorial, you will build a front-end list of products. The database table is simple, containing only one table, as you can see below:

Note: The database diagram in the image above was built with MX Query Builder (also referred as QuB) to better illustrate the database structure. You do not need to build it in order to complete this 'how to' tutorial.

The products_prd table stores information regarding the products:

• id_prd - unique identifier and table primary key.

• name_prd -product name.

• price_prd - product price.

• description_prd - product description.

To quickly create a similar database structure, use the sql or mdb scripts provided in the \tutorials\_HOW_TO\Use NeXTensio in Front-End\db\ folder, depending on the database model you are using. Import the script contents into a new or existing database.

The application will have two pages: index and details:

1. The tutorial will focus on the creation of one page though: the application index, which will contain the modified NeXTensio list. You can create the index page in the local site root.

2. The second page will display the details of the selected product, and can be easily built using a recordset filtered by the URL parameter passed by the list. If using the same table structure as in the tutorial, you can find a completed details page in the \tutorials\_HOW_TO\Use NeXTensio in Front-End\ folder, in the .zip package corresponding to your server model.

Before adding the NeXTensio list and modifying it, create a Dreamweaver connection that will access the database containing a similar table structure as depicted above. Configure the connection parameters using your own particular data:


 

In the next topic of the tutorial you will add the NeXTensio list and modify it in order to suit the application front-end.