Building a Dynamic Website Using Dreamweaver MX and NeXTensio

Building a dynamic

website using

Dreamweaver MX and

NeXTensio 2

version 2.0.0

Building a dynamic website using Dreamweaver MX and NeXTensio

Table of Contents

Overview....................................................................................................................................................3

Architecture decision.......................................................................................................................................3

Tutorial goals.....................................................................................................................................................3

Prerequisites.............................................................................................................................................3

Requirements.....................................................................................................................................................3

Typographic conventions................................................................................................................................3

Tutorial files.......................................................................................................................................................4

Architectural Overview...........................................................................................................................4

Tools Overview........................................................................................................................................4

Macromedia Dreamweaver MX.......................................................................................................................4

InterAKT PHAkt 2.0 for MX..............................................................................................................................5

InterAKT ImpAKT 2.0 for MX...........................................................................................................................5

InterAKT NeXTensio 2 MX...............................................................................................................................5

Workshop..................................................................................................................................................5

Site structure.....................................................................................................................................................5

Dynamic menu................................................................................................................................................5Content frame..................................................................................................................................................5Site backend....................................................................................................................................................5

Setting up the applications.............................................................................................................................6

Installing Apache / PHP / MySQL..................................................................................................................6Installing Macromedia MX..............................................................................................................................6Installing PHAkt2 MX......................................................................................................................................6Installing ImpAKT 2 tNG.................................................................................................................................6Installing NeXTensio.......................................................................................................................................6

Database creation.............................................................................................................................................7

NeXTensio2 site creation.................................................................................................................................9

Site configuration............................................................................................................................................9Site folder structure.......................................................................................................................................11Conclusions...................................................................................................................................................11

NeXTensio2 CMS Frontend..........................................................................................................................12

Menu..............................................................................................................................................................13Contents Page..............................................................................................................................................17

NeXTensio2 CMS Backend............................................................................................................................21

The Login Page.............................................................................................................................................21Admin Frameset............................................................................................................................................22Building the administration pages................................................................................................................23

Conclusion..............................................................................................................................................35

Appendix I - versions............................................................................................................................37

Copyright................................................................................................................................................37

http://www.interakt.ro


Overview

Architecture decision

Why should we build a dynamic website instead of static one? The answer is simple: a dynamic website can be

updated and maintained much easier than its static counterpart. Every page can be stored in the database making

the site very flexible.

Tutorial goals

This tutorial intends to be a simple presentation of how easy you can build dynamic websites and an

administration tool for such a site. Therefore we haven't paid any attention to the graphical design that is required

in all regular websites. You can find a more detailed documentation and articles of how you can build a

professional, good-looking, dynamic website on the Macromedia Dreamweaver website at

http://www.macromedia.com. Our tutorial concentrates on the techniques used to create dynamic pages using

Dreamweaver MX and PHAkt 2. But the most important tutorial chapters are those presenting the easiest way to

build a Content Management System (CMS) using Dreamweaver MX and NeXTensio MX.

You can use this tutorial to create a CMS using only the PHAkt2 server model.

This tutorial describes the development of a dynamic presentation web site for a fictional company . The website

will be used as an internal publishing system, containing articles and news concerning the company and will be

named NeXTensio2CMS.

Prerequisites

Requirements

This tutorial requires basic knowledge of Macromedia Dreamweaver MX development practices.

To use ImpAKT 2, you will have to install the following software programs:

Macromedia Dreamweaver MX (6.1) http://www.macromedia.com/

PHAkt2 http:// www.interakt.ro /products/PHAkt/

ImpAKT http://www.interakt.ro/products/ImpAKT/

NeXTensio MX http://www.interakt.ro/products/NeXTensio/

AdvRS package ftp://ftp.interakt.ro/pub/ImpAKT/advrs-1_1_0.mxp

Apache/PHP http://www.apache.org/

A MySQL or PostgreSQL database http://www.mysql.com/ ; http://www.postgresql.org/

Typographic conventions

The notations and text formats used in this tutorial are found below:

�database name will be displayed using bold font "nextensio_database"

�database table: using an italic font "employees_emp"

�database field will be displayed using a bold italic font "id_dep"

�site name: underlined font "new site"

�site page: monospaced italic "index.php"

�recordset name: underlined italic "recordset"

�application button, menu or panel: bold font "Button"

�source code : monospaced font "<?php echo "ImpAKT tutorial"?>"



Tutorial files

The NeXTensio MX 2.0 package includes a printable version of this tutorial along with the zip archive of the

NeXTensio2 website and the SQL script used to create the database and add the admin user in it.

Here is the list of files related with this tutorial:

�the NeXTensio2 website zip archive: Tutorial/NeXTensio2CMS_Site_ADOdb.zip (built using

NeTXensio and ImpAKT for PHAkt) and NeXTensio2CMS_Site_MySQL.zip (built using

NeXTensio and ImpAKT for PHP_MySQL server model)

�the NeTXensio2 CMS Tutorial printable version: Tutorial/Building a dynamic website using

Dreamweaver MX and NeXTensio.pdf

�the SQL script: Tutorial/NeXTensio_tutorial.sql

Architectural OverviewFrom the website visitor's point of view, this is a simple web site that is receiving requests from the client's

browser, verifies these requests, builds an output from the database and sends it back as a plain HTML response.

To help you understand the architecture, we'll present you our local network architecture used to create and run

this tutorial web site. We have a workstation with Dreamweaver MX installed, a MySQL server running on a

separate computer, and an Apache Web Server, with PHP installed, running on a third computer. The network

drivers are mapped using a Samba server installed on the same computer as the Apache server. The databases are

stored on the computer running the MySQL server.

Tools Overview

Macromedia Dreamweaver MX

Macromedia offers, through Dreamweaver MX, a great set of tools to create and manage dynamic websites in a

WYSIWYG interface. This new version is an evolution from the two currently most popular website editors:

Macromedia Ultradev and Dreamweaver 4.0. Apart from numerous improvements added to this version, a very

important one is the included PHP support, which is, unfortunately, supporting only MySQL connections for the

moment.


Figure 1 Web Application Basic Mechanism

Figure 2 Local Network Architecture


InterAKT PHAkt 2.0 for MX

With the release of PHAkt MX, InterAKT does not intend to compete with Macromedia on the PHP server model

market. Our extension could be considered as an additional value to Dreamweaver. PHAkt 2 is based on the

ADOdb library, supporting almost 12 databases types in a transparent way. Moreover, PHAkt 2 includes most of

the functionalities found in the initial version (Login Server Behaviors, Go to detail page, etc).

InterAKT ImpAKT 2.0 for MX

For the Dreamweaver MX PHP developers who need to implement complex and interactive dynamic websites,

ImpAKT 2 tNG is a tool for database application logic unified management. Unlike standard PHP or

Dreamweaver MX web development, that requires manual code modification to implement the application logic,

our product relies on tNG (InterAKT Transaction Engine), allowing software triggers generation and editing using

intuitive GUIs to increase productivity and avoid error prone manual coding.

InterAKT NeXTensio 2 MX

For a developer or project manager building mid-sized web projects, that needs to create a website administration

tool and to manage database content, NeXTensio is the solution that brings productivity to the process. Unlike

other software packages, our product uses a tight integration with the database and automates form generation and

editing, allowing the creation of a CMS solution in 15 minutes.

The great achievement of NeXTensio is UniFORM, the Unified FORM Architecture. It needs only one

description of the application logic, then generates the code for the 3 operations on the data (insert, modify and

delete). Combined with UniVAL, the automated validation algorithm, it allows vertical development, the

generated code remaining also editable as any other Dreamweaver MX code.

From the 2.0 version, NeXTensio works with the KTML visual HTML editor from ImpAKT2. This module is

extremely useful for dynamic sites natural editing (WYSIWYG). KTML only works on Windows with Internet

Explorer 5.5 or higher.

PHAkt and NeXTensio use the ADOdb extension (Active Data Objects for generic DataBase connectivity from

PHP), a database connection library for PHP, which allows connection to many databases, similar with

Microsoft's ADO library but implemented 100% in PHP. Among others, the following databases are supported:

MySQL, PostgreSOL, Interbase, Oracle, MS SQL 7, Foxpro, ACCESS, ADO, Sybase and ODBC.

Workshop

Site structure

The NeXTensio2CMS site will have three functional sections: a dynamic menu on the left side, a content frame on

the right side and an administration section. The content frame will display a page with HTML content or a list of

records from a table.

The NeXTensio2CMS website content will be managed using a CMS (Content Management System), in a site

section protected with username and password. As one of the most complex tasks until now was the creation of

this management section, we’ll emphasize how easy it is to create such a system with our tools.

Dynamic menuThe dynamic menu will be placed in the left side frame. This menu will allow site navigation. It can have a

variable menu items number as it is dynamically generated from a dedicated table in the database. When a menu

item is clicked, the corresponding page will be loaded in the content frame.

Content frameThis page will determine whether the clicked menu item is linked to a single page or a record list, and then it will

extract the page content from the database and generate the HTML output.

Site backendA site administrator should be able to add, delete or modify the site contents by using this administration section.



It should also be able to add or remove users that can use the administration section.

Setting up the applications

Before we begin the website development process, we have to install the applications needed to create, deploy and

run the NeXTensio2CMS website. The applications are: an Apache web server, a MySQL database server, PHP

4.1+, Macromedia Dreamweaver MX, NeXTensio2 MX, ImpAKT 2 tNG and PHAkt2 MX.

Installing Apache / PHP / MySQLThe Apache web server can be downloaded from the Apache Foundation's official web site:

http://httpd.apache.org/. The package contains detailed documentation that you will find useful during the

installation process.

The MySQL database server can be found at the http://www.mysql.com/. The latest recommended version is 3.23

and the package contains detailed explanations to guide you to a successful installation.

The most important PHP resources can be found at http://www.php.net/. You will have to download the package

and follow the instructions included in it.

Installing Macromedia MXMacromedia Dreamweaver MX can be downloaded from the Macromedia website as a trial version or can be

bought online or through Macromedia distributors in your country. The package contains detailed installation

notes.

Installing PHAkt2 MXBecause PHAkt is developed as an Dreamweaver extension, it must be installed using the Macromedia Extension

Manager. To fully use PHAkt for PHP based web application development, you will have to set the server model

for your site to PHP_ADODB ( you will find detailed explanations further in this tutorial). You will also have to

make sure that the document type of the newly created pages is "PHP4" and not "PHP (which is the default for

PHP_MySQL)

Installing ImpAKT 2 tNGAs it is based on the InterAKT transaction engine, NeXTensio 2 MX requires ImpAKT 2 tNG to be installed.

ImpAKT 2 tNG is included in the NeXTensio 2 bundle kit, so users should install the extension using the

Macromedia Extension Manager.

Installing NeXTensioTo install NeXTensio MX you have to be a registered client (a.k.a paying customer - for more details check

http://www.interakt.ro/products/buy.php?prodId=2) and you will also need the Macromedia Extension Manager

1.5, included with the Dreamweaver package. No other configuration settings are required.



Database creation

Creating a website in the "static Internet age” implied a separate HTML file for each page of the site. The usage of

scripting languages, such as PHP or ASP, made it possible for web developers to use databases as content

repositories, and thus dynamic websites appeared, with PHP or ASP pages taking the content from the database

and generating HTML files on the fly.

Using a database, allowed people to organize the information and in the same time opened the way for a new

approach in information update. Instead of searching the content in the already formatted pages, now the content

was separated from the presentation, and was combined only per client request. Needless to say that the same

content can be used in multiple places, and changing it in the database will automatically update all related pages.

If we look again at the features we want to implement in NeXTensio2CMS’s website, we’ll notice that the most

important pages in the website are the menu and the content section. We can’t also forget the user authentication

section that will also need a table to store user information.

Therefore we’ll organize the database information in the following way, using three tables:

- the articles_art table will be the repository for the articles published on the NeXTensio2CMS website;

- the pages_pag table will contain the structure and properties of the single pages;

- the users_usr table will contain the NeXTensio2CMS users information.

Please note that we use a naming convention to be able to manage the database fields with ease, and this consists

in adding to each table name an underscore and then a short name (3 letters), that will be also added at the end of

the fields name. When doing a regular table join, this trick will allow us to avoid calling each field with

"tablename.fieldname”, because the field names will be unique.

Those who own NeXTensio will be able to execute directly the tutorial.sql file in their database manager (our

version is for MySQL) and create the database immediately (with some data already inserted).

You can find below articles_art’s table structure:

CREATE TABLE articles_art ( id_art int(11) NOT NULL auto_increment, idpag_art int(11) NOT NULL default '0', title_art varchar(255) NOT NULL default '', text_art text NOT NULL, date_art date NOT NULL default '0000-00-00', PRIMARY KEY (id_art), UNIQUE KEY id_art (id_art), KEY date_art (date_art)) TYPE=MyISAM;

pages_pag structure:

CREATE TABLE pages_pag ( id_pag int(11) NOT NULL auto_increment, title_pag varchar(255) NOT NULL default '', text_pag text NOT NULL, menu_pag varchar(100) NOT NULL default '', PRIMARY KEY (id_pag), UNIQUE KEY id_pag (id_pag)) TYPE=MyISAM;

users_usr structure:

CREATE TABLE users_usr ( id_usr int(11) NOT NULL auto_increment, username_usr varchar(50) NOT NULL default '', password_usr varchar(50) NOT NULL default '', PRIMARY KEY (id_usr)) TYPE=MyISAM;

The only important relationship is a one to many relation between a page and its articles. A visual representation

of this database and its relations has been generated with QuB (our commercial query builder):




Figure 3 Database Representation using QuB


NeXTensio2 site creation

This chapter will show you how to use Dreamweaver MX to create the NeXTensio2CMS site. First, start

Dreamweaver MX.

To create a new site you have selected "New Site" from the Site menu. A configuration window will appear. The

steps to follow are described below.

Note that, on our site samples we have used NeTXensio2CMS site name for the one created using the NeXTensio

2 for PHAkt2 version and NeXTEnsio2CMS_MySQL for the one created using the NeXTensio 2 for

PHP_MySQL version. On this document we'll use only the NeTXensio2CMS name.

Site configurationWhen you choose to create New Site in Macromedia Dreamweaver, the Basic configuration section will be

showed. In this section, name your site then move on to the Advanced section where you’ll be able to configure

all the parameters of your site.

The following screen shots will illustrate the configuration of our network computers. You will see below that we

keep Apache/PHP on the "ducu.iakt.ro computer”, and Apache’s Server root is mapped, using Samba, to the

\\Work\www\ folder. (actually, the /htdocs/www/ folder is mapped using Samba, not the actual Apache root).

Local Info

The information requested in the Local info section is about the local configuration setting, that you will use

during the development process: local root folder (as you can see, we used the

C:\Work\NeTXensio2\NeXTensio2CMS\ folder) and the URL of the actual site http:// address (in our case, the

HTTP address will be http://ducu.iakt.ro/www/test/NeXTensio2/ (this is a local URL, so don’t try to load it in

your browser)) .

Remote Info

In the Remote info section of this menu, you will have to indicate the connection type used to upload the files on

the production server and the actual path on the remote computer. You can also choose to automatically upload


Figure 4 Setting Up the Local Paths


the files on the server after saving them, which can be very useful and will save you a lot of "Ctrl+Shift+U” key

presses (as this is the shortcut for uploading a file on the server). If you are working in a team, you might also

wish to activate the Check In/Check Out support that will forbid two users to edit the same file.

Testing Server

The Testing Server section refers to the type of the connection and protocol used to connect to a test server. If you

are using the PHAkt2 server model please choose PHP_ADODB while the Dreamweaver MX PHP_MySQL

users should select PHP_MySQL as the server model. The HTTP address of the site and the path of the remote

site root folder are also required.

Cloaking and Design Notes

Site cloaking enables you to exclude file types and folders in a site from operations such as Get or Put. You can

cloak individual folders, but not individual files.

The Design Notes are the notes that you create for a file. The Design Notes are associated with the file they

describe, but stored in a separate file. You can use Design Notes to keep track of extra file information associated

with your documents, such as image source-filenames and comments on file status.


Figure 5 Setting up the Remote Info Section

Figure 6 Setting up the Testing Server


Site Map Layout and File View Columns

The purpose of the Site Map Layout dialog box is to customize the appearance of your sitemap. You can specify

the home page, the number of columns to display, decide whether the icon labels display the filename or the page

title, and whether or not to show hidden and dependent files.

This configuration section has the role of making changes to the file view columns in the Site panel. You can

change the order of columns, add a new column, or delete a column.

Site folder structureThe NeXTensio2CMS website relies on a simple file structure, having NeXTensio2CMS as root folder. The

frontend pages will be stored in this root folder while the administration files will be stored in the admin folder,

placed inside this root folder. When you create the connection, PHAkt will create and upload the Connections

folder, containing a file describing the connection parameters and the adodb folder, which will contain all ADOdb

database connection layer components. NeXTensio will also create the images folder, containing images used in

your site and the includes folders, containing common used files. Dreamweaver will create the

_mmServerScripts and _notes folders containing certain files used by Dreamweaver during the site development.

ConclusionsAt this point we have finished configuring our new NeXTensio2CMS website. We have also created the database

on which the site relies. The next chapters of this tutorial will concentrate on the website development, following

two main directions: one describing the website frontend creation using Dreamweaver MX and PHAkt and the

other explaining the implementation of the website backend or CMS using Dreamweaver MX and NeXTensio.



NeXTensio2 CMS Frontend

This represents the public part of the website which can be viewed by all users accessing the associated HTTP

address using an Internet connection or the local network. To create this part of the site, we'll use Macromedia

Dreamweaver MX and PHAkt 2.

The structure of the frontend will rely on the frame concept. This concept was introduced to help web designers

publish content in a more organized way. Generally, it is composed of a main document, called frameset and two

or more documents called frames. The frameset describes the site layout, the size, position and functionalities of

the frame documents that are composing this frameset.

The NeXTensio2CMS website frontend will have a frameset document named index.php and two frame

documents: a left frame containing a dynamic generated menu, named menu.php and a right frame for

displaying information, named showpage.php.

When you create a new project, Macromedia Dreamweaver opens a default blank HTML file. You will close this

file without saving and go on the site view section of Dreamweaver, right click on NeXTensio2CMS and select

New File. Choose create a new HTML file and save it as showpage.php. In this file create a vertical left side

frameset and go in the left part of the newly created frameset.

Save this frame as menu.php and close the file. At this moment you will be asked if you want to save your

frameset. Choose Yes and save it as index.php.

Note: Due to a Macromedia bug related to frameset creation, you will have to set the document type for

menu.php and index.php. This is valid only when you are building the site using the NeXTensio2 for

PHAkt2 version. Open each of them, go to the "Component" tab in the "Application" right panel, and click on

"Choose a document type" link. Select PHP4 and then move on to the next step.


Figure 8 Save Left Frame

Figure 7 Create a Frameset


MenuThe menu is used to navigate through the site pages. As this menu will be dynamically generated from the

database, we'll have to create a database connection that will handle all the requests made by the

NeXTensio2CMS website to the tutorial database, which will be used to keep the information to be published.

To create a connection, go to the Databases tag from the Application panel, click the "+ button and select

ADODB connection.

Note that, if you are using the NeXTensio 2 for PHP_MySQL, you have to create a MySQL connection. In this

case Dreamweaver MX will display "MySQL Connection" instead of ADODB Connection on the create

connection menu.

In the configuration window that appears, you will have to fill out some fields describing the connection to be

created. The Connection Name field will contain the name of the connection used for this application: tutorial,

the Database Type will specify the type of the database server, which, in our case, is MySQL. The Database

Server requires the computer name or IP address of the machine running the database server described above, in

our case is remus.iakt.ro. You will also have to specify a User Name, in our case root, a Password and the

database name which, for this website, will be tutorial. The database Locales Fields will decide the date format

(Ex. m-d-Y or d-m-Y), the messages locales and the type of connection, which can be connection (a standard

connection that expires once you leave the page) or permanent connection (it uses the PHP pconnect() function to

create a persistent connection).

When you are using the MySQL server model, the "Database Type", "Data Locale", "Messages Locale" and

"Connection Type" fields are not included in the intrerface. Also the "Database Server" field is named "MySQL

Server".


Figure 9 Create Connection

Figure 10 Configuring the connection


First, we will create a recordset (rsPages) with all records from the pages_pag table. Go to Bindings (the panel

from the right), click the "+ button and choose Recordset (Query).

That following picture will give some hints about how to configure the recordset:


Figure 12 Create New Recordset

Figure 11 Configuring a MySQL connection


The menu is formed by several links extracted from the database.

The first link in the menu is for the Home Page and it is a static link. Edit the page, write "Home Page" and then

hit Enter. Select the text, right click and choose Make Link. Select showpage.php and hit OK button.

To display all the records (links), we'll use a repeated region. Before this, we should first construct the region that

we want to repeat.

Go to Bindings tab where you created the recordset and expand it. Drag the field rsPages.menu_pag on the page

under the Home Page link (the menu_pag field specifies what a menu link should contain) and then hit Enter.

Now select this field, right click on it and choose Make Link. Select the file showpage.php. Once the link was

created we'll use the Go To Detail Page server behavior to open every link from the menu in the right frame

(mainFrame). Select the link and go to Server Behaviors (right next to Bindings), click the "+ button and choose

Go To Detail Page.

A new configuration dialog box will appear. From the Link pop-up menu choose the link you've just created. Set

the detail page as showpage.php. For Pass URL Parameter choose id_pag (we pass the ID of the page that

will be displayed in the right frame). For the Recordset and Column options, use rsPages and id_pag. Finally,

check Pass Existing Parameters URL Parameters. Click the OK button.

If you are using the NeXTensio 2 for PHP_MySQL server model you should use link parameters instead of go to

detail page. For that you have to select the link, use the mouse right button and select "Change Link" option. In

the displayed configuration window press the "Parameters" button and then define the "id_pag" parameter that


Figure 13 Configuring the rsPages Recordset

Figure 14 Create the Go To Detail Page


will pass the "id_pag" value from the rsPages recordset.

Next we need to specify that the detail page should be opened in the right frame. To do that, select the link

previously created and go to Properties Inspector at the bottom of the page and fill in the Target with

"mainFrame.

Do the same thing for the Home Page link with a small difference. Follow the screenshot for this.

As you can see from the screenshot we've also added ?id_pag=0. This is used for transmitting the URL

parameter manually (like at Go To Detail Page), because the first page is static and there is no id_pag for it in the

database.


Figure 15 Go To Detail Page Configuration

Figure 18 Setting the target and the URL parameter

Figure 17 Setting the target frame

Figure 16Configuring the link parameters on PHP_MySQL server model


Now all we need to do is create the repeated region. Select the second link and go to the "Application" tab in the

"Insert" panel and press the "Repeated Region" button.

Select rsPages from the pop-up menu and the All Records for Show option and then click OK.

Now save the page and test it in the browser.

Contents PageThis application will use two types of pages: static and dynamic. An unique file, called showpage.php, will

display these pages. The decision whether to generate a static or a dynamic page will be implemented in this file,

using the Show Region server behavior.

First, open showpage.php file and create a recordset named rsPages as follows: for the Filter, select id_pag.

Under it, from the pop-up menu, choose URL Parameter and under the "=” sign, write id_pag. This recordset will

be used to extract the page specified by the id_pag variable previously transmitted in the URL (by the Go To

Detail Page in menu.php) from the database.


Figure 19 Create a Repeated Region

Figure 20 Configuring a Repeated Region


Now write "Welcome to NeXTensio-KTML tutorial" on page and hit Enter. This text should be displayed only

when the home page is loaded (where the id_pag variable is 0, the rsPages recordset therefore being empty). To

set the text to be displayed only when the home page is loaded, select the text, go to Server Behaviors and choose

Show Region->Show If Recordset Is Empty.

In the displayed configuration window, select rsPages from the dropdown menu and click OK.

For every page in the database we have a title, a text and possibly some articles. The title and text are always

present.

Go to "Bindings" tab in the "Application" panel, expand the "rsPages" recordset and drag the rsPages.title_pag

and rsPages.text_pag fields on the page. Then select both fields and apply the Show Region->Show If Recordset

Is Not Empty server behavior. On the server behavior configuration window, choose rsPages (the only option


Figure 21 Creating the rsPage recordset

Figure 22 Creating a Show If Server Behavior

Figure 23 Configure Show If Server Behavior


available for the moment) and press the OK button. The page should look like in the following image in the

Dreamweaver MX Design View:

At this moment the static part of the page is done and we have to create the dynamic one. To do that we have to

create a second recordset that will be used to extract from database all the articles that are associated with the

current page.

To create a recordset, go to "Bindings" tab in the "Application" panel, press the "+" button and select the

"Recordset (Query)" option. Configure the recordset as in the below image:

Once you have created the recordset, go to Bindings tab, expand the recordset rsArticles and drag the "title_art",

"text_art" and "date_art" fields on the page.

Now we need to create the repeated region that we will use to display all the articles that are associated with the

current page. This region should be applied to all these three fields. Select the fields and create a repeated region

with them (be careful to choose rsArticles for this repeated region and not rsPages) with All Records set.

The current page might not have any articles to display, so we must include this repeated region in a Show If

condition. Select the repeated region and apply Show Region->Show If Recordset Is Not Empty for the

rsArticles recordset.

The resulted page should look like in the below image if viewed from the Dreamweaver MX Design View:


Figure 25 Configuring the rsArticles recordset

Figure 24 Showcontent page view


Save the page, upload the site and load it in the browser. You should see a screen similar to the screen below:


Figure 26 The created page

Figure 27The NeXTensio2CMS Site Frontend


NeXTensio2 CMS Backend

While developing complex web applications using Macromedia Dreamweaver MX and PHAkt2, it soon became

obvious that the backend is one of the most expensive parts of a web site in terms of time. One of the causes that

led to this was the lack of cohesion between design and application logic, a problem that still exists in

Dreamweaver MX. For example, when initially implementing a form using Dreamweaver, you need to

individually create 3 separate pages for Inserting, Deleting and Updating data in your database. Moreover, the

application logic (especially the validation) would have to be reproduced at least 6 times (client-side logic and

server-side logic on each of the 3 pages).

The desire to simplify the process of generating client and server-side logic led us to develop NeXTensio, the

dedicated solution for task automation and form generation, which includes UniFORM (Unified FORM

Architecture) a revolutionary system that allows you to describe the application logic once, and UniVAL, the

automated validation algorithm.

Now let us go back to our NeXTensio2CMS publishing application. The structure of our CMS is a very simple

one: a left frame containing the menu and a right one containing the information. The access to this page is done

through the admin/index.php file, a simple PHP login script that validates the user login data.

First of all, create a new folder in the site root, called admin. This folder will hold all pages for the administration

area of the site.

The Login PageBefore you build the login page, add a user called admin and set it's password to admin in the database. Then

create a file named index.php which will contain the login form and open it.

To create a login form we'll use the powerful user authentication engine included in the ImpAKT 2 tNG. Using

ImpaKT's commands we'll be able to create a login form and all the necessary code in just one step. To access the

ImpAKT commands, go to the ImpAKT 2 tab in the Dreamweaver "Insert" tab and press the "tNG-Login Form"

button:

Dreamweaver will display a configuration window where users can set the transaction name, the database

connection, the database fields, types and values. First they have to choose a name for the Login Transaction, in

our case "NeXTensio_Login", a connection to an existing database, in our case "NeXTensio_conn", the database

table containing the user information ("users_usr"), the user id column ("id_usr"), the user name ("name_usr")

and the password column ("password_usr").

The passwords are not encrypted so that we'll leave un-checked the "Password is Crypted" checkbox. Also we

don't have multiple level users so we have to choose a Restrict access based on username and password only.

If the login is successful, the login page should redirect users to the main administration page which in our case

will be admin.php. Follow the image below for details:


Figure 28 Accessing the tNG Login Form command


As we have said, ImpAKT will automatically create all the necessary code block to handle a user login. When

viewed in the Dreamweaver MX Design View, the page should look like in the following image:

Admin FramesetA frameset document is an HTML document that describes a frame layout, more precisely the size, position and

functionalities of frame documents composing the frameset. This concept was created as a response to the

increased need to publish more information in a more organized, and in the same time easy to read, form. HTML

frames offer designers a way to keep certain information visible, while other views are scrolled or replaced. The

main difference between a classic HTML document and a frameset is the replacement of the <body> tag with

<frameset>.

Create a frameset like you did for the frontend. The file containing the frameset name should be named

admin.php (the page chosen previously if login succeeds). Name the left frame menu.php and the right frame

content.php.

Note:

do not forget to set up the document type for menu.php and admin.php.


Figure 29 Configuring the ImpAKT 2 Login Transaction

Figure 30 The Login Page Preview


Menu Frame

Although many web designers do not recommend the creation of a separate frame for a navigation menu, we have

chosen this option due to its simplicity. This frame will contain a menu.php file, which includes links to users

and site contents configuration pages. All the HTML <a href =""> tags include a target="mainFrame"

option. This option specifies the frame in which the targeted document will be displayed. In the NeXTensio2CMS

website, the main frame is the right frame (or the content frame), while the left frame is called leftFrame.

Create 2 links according to the picture: the first one, Users, should point to usera.php and the second one,

Pages & Articles should point to page.php (do not forget to set target="mainFrame" for every link).

Now, under Pages & Articles, write Logout. Select the text, go to the Server Behaviors panel, press the "+"

button and selecte the ImpAKT2->Login->Log Out User option. Configure the server behavior according to the

screenshot:

Content Frame

The file content.php is a blank page used just for the frameset creation and it will be loaded only when the

administration interface is first time loaded. The information about site users and pages/articles will be displayed

and managed by the user.php and page.php files.

Building the administration pages

User Administration Page

As we explained, the user management will be handled by the users.php. This file will contain a NeXTensio

list that will display the site users. Open the users.php file and add a NeXTensio list by using the "Create

NeXTensio List" button displayed on the Dreamweaver "Insert" panel, "NeXTensio2" tag :


Figure 31 Menu page Preview

Figure 32 Configuring the Logout Server Behavior


In the configuration window that will apear, you will have to set up some parameters. You will have to define a

list title (User management), choose the connection to be used by this list as datasource (in our case

NeXTensio_conn). Although it can be modified by users, the "List Name" field is automatically completed by

NeXTensio with an unique name. This name must be unique through the NeXTensio2CMS site.

The Table to List field, choose the users_usr, as this is the table that contains the user data and select the id_usr as

"Unique Key Column". The "Order By" field should define the field used to order the list records and we'll select

"id_usr".

The page size field is a text area which defines the number of records to be listed on the same page. The default

value is 5 and we'll leave it unchanged.

The "Form Page" field should contain the page that will include a NeXTensio 2 form used to edit the list records.

If the page exists, use the "Browse" button to easily locate the file. NeXTensio also allows users to define a file

name and later create the specified file. We have selected "user_detail.php" file.

Passing to the interface next section, we'll check the "Nav Bar Images" as we want a graphical representation of

the list navigation elements and also check the "Row Counter". The "Multiple Delete" check box is used to decide

whether or not the NeXTensio list will allow multiple delete operation on the list. When checked, NeXTensio will

insert a "Delete" button and, for each list entry, a check box used to select the corresponding record.

The Form Fields window will require the names of the columns to be displayed in the list (select the id_usr and

username_usr columns). You can set a label for each field of the list, the form in which these fields will be

displayed (choose Read Only Text Fields) and the size (choose 5 for id_usr and 20 for username_usr) of the

fields in character.

The last interface section the configuration field for the NeXTensio list filters. Users can configure the data type

on Submit and display for each list field filter.


Figure 33 Insert NeXTensio List


In NeXTensio2 users cannot longer edit a list but they can add, edit or delete selected list fields by using the

NeXTensio2 server behaviors accessible through the "Application" panel, "Server Behaviors" tab, "NeXTensio

2" menu option.

Let's upload the page and see how it will look in a browser:

Now you have to create the user_form.php file in which you will create a NeXTensio form. The main

difference between a NeXTensio form and a NeXTensio list is that a form creates editable fields, while a list

creates read only fields.


Figure 35 User List Preview

Figure 34 Configuring the NeXTensio List


The configuration options are much the same as for the previously configured list where you have been asked to

select the connection, the table to update, the unique key column, the visible fields or the action to be done after

update. However, there are some important differences that have to be emphasized. The first one is that you will

have to display all the columns. The second difference lies in the type of the field in which the data is displayed:

for the id_usr you will have to set the Display Type to text, as this field has an auto increment property set in the

database. The "username_usr" field will be set to Text Field while the "password_usr" will be set to "Passowrd".

Save the file and upload it on the server. Load the user list on your browser and press a "Detail" button

corresponding to a list record. You should access the User Insert/Update page like in the below image:


Figure 36 Editing a NeXTensio Form

Figure 37 Preview User Insert/Update Form


Pages & Articles Management

The pages and articles are related through an one to many relationship as one page can contain one or more

articles. To handle this type of relation we have to build a NeXTensio master list and form in order to manage the

site pages and then build a NeXTensio detail list and form to manage the article associated with a selected page.

In order to allow multiple level one to many relations, NeXTensio2 does no longer include the "NeXTensio

Master Detail" command. In NeXTensio1 version, this command automatically creates all the files required to

manage an one to many relation and links between these files. In NeXTensio2 users will have to create these files

one by one.

When you have to manage two entities (in our case pages and articles), related through an one to many relation,

you will need to create four files: one to list the master records and one to edit the master records (in our case

pages) and one to list the related records and to edit the related records (in our case articles).

Create the following files: page.php, page_form.php, article.php and article_form.php. The

page.php will list the site pages and therefore it should include a NeXTensio List Master. The

page_form.php will be used to edit page content and it should include a NeXTensio Form with a KTML2

field. The articles will be listed in the article.php containing a NeXTensio List and a NeXTensio List detail.

Each article will be edited in the article_form.php that will contain a NeXTensio form and a NeXTensio

Form Detail.

Now open the page.php file and create a NeXTensio list using the "Create NeXTensio List" command from

the "Insert" panel, "NeXTensio 2" tab. Define the list title (it will be displayed on the list header), select the

connection to be used, the table to list and the primary column. Select page_form.php as form page, set the

number of records to be displayed on the same page and order by "title_pag" ascending.

Make sure that the "NavBar Images", "Row Counter" and "Delete Boxes" are checked and pass to the form fields

selection. The fields listed are included in the list and displayed on page. We'll list only the page id, title and

associated menu entry. Follow the below image for details:



You can now save the page, upload it on the server and see how the page list is displayed on the browser:

The next step will be to edit the page_form.php file that will be used to insert/update pages. Open the

page_form.php file and create a NeXTensio Form by using the "Create NeXTensio2 Form" command from

the "Insert" panel, "NeXTensio 2" tab.

Define the form title (it will be displayed on the form page above the form table), select the connection, select

"pages_pag" as table to update and "id_pag" as unique key column. In the Form Fields section we'll leave only the

page title, text and menu title. The page id is not required as it will be generated by the database.

You can change the fields labels by selecting a field and entering the new value in the "Field Label" interface


Figure 38 Configuring the NeXTensio List for Site Pages

Figure 39 NeXTensio Page List Preview


field. All three fields must be displayed in both insert and update page form and this can be set by checking the

"Show In Insert/Update" check boxes for each field. Also, field should not be empty and therefore we have to set

them required both in the insert and update transaction by checking the "Required Insert/Update" check boxes for

each field.

The page title and page associated menu should be entered as simple text and therefore we should select the

"TEXT" option in the "Display As" drop down menu for both form fields. The page content should be edited using

the KTML2 on line editor and therefore we should select "KTML" option in the "Display As" drop down field.

Once selected you can define the KTML field properties by using the "KTML Properties" button displayed on

the interface button section (we have set 670 as KTML field width).

You can also define custom error messages for each form field. These messages are displayed when one of the

form validators returns an error. Once finished you can press the "OK" button and the page insert/update form

will be automatically generated.

Follow the bellow image for details on how to configure the form:

You can save the page and upload it on the server. Load the "page.php" file in your browser and try to add or

update a page. You should get a similar result with the one displayed on the bellow image:

As you can see from the picture below, the page body can be edited and formated using the InterAKT KTML

Editor. The KTML editor allows on line HTML editing in a WYSIWYG environment without any HTML tag

notions. You can also paste text from Word (or any other editor) with all text formatting preserved.


Figure 40 Configuring the NeXTensio Page Form


With the page.php and page_form.php files built, you can consider that you have a functional page

management interface that will help you edit your NeXTensio2CMS site pages and the static pages content. You

can view all the site page by simply navigating through the list or you can add a new page by using the "New"

button displayed on the list. To edit an existing page you can use the "Detail" button corresponding to the selected

page.

The dynamic content of these pages (in our case page articles) will be edited using another list and form included

in the article.php and article_form.php.

But first of all we have to connect the page list with the article list so that user can select a page and view only its

associated articles. To do that we have to insert, in the page list a NeXTensio list master using the "Master

Detail/List Master" server behavior. This will modify the list by inserting a new button used to select a page and

load the associated article list.

Open the "page.php" file, go to "Server Behavior" tab in the "Application" panel, push the "+" button and

select the "Master Detail ->Convert to Master List" option from the "NeXTensio2" menu:

NeXTensio will display a configuration interface where users have to specify a detail page containing the related

list. Use the Browse button to select the "article.php" file from your NeXTensio2CMS site admin folder

and press the "OK" button when done:

Save the page and load it on your browser. You should see a page similar with the following example:


Figure 41 NeXTensio Page Form Preview

Figure 43 Configuring the List Master Server Behavior

Figure 42 NeXTensio 2 Server Behaviors Menu


Now we have to create the article list page. Open article.php and insert a NeXTensio list by using the

"Create NeXTensio 2 List" command from the "Insert" panel, "NeXTensio 2" tab.

In the displayed configuration window set the list title, set the list name or let nextensio do it (the name must be

unique on a site), select a connection, select the "articles_art" table and "id_art" as table's primary key. Order by

date set the number of records to be displayed on the same page to 5 and use the "Browse" button to select the

"article_form.php" file.

The list will display only the article id, title and date, therefore remove from the "idpag_art" (which is the foreign

key to the pages table) and "text_art" fields from the list by selecting them and using the "–" button.

Set the field labels, sizes, configure the field filters and press the "OK" button to generate the list. Follow the

bellow image for details:


Figure 44 Preview Page Master List


Now we have to insert a NeXTensio List Detail behavior, that is used to filter the article list and display only

those articles that are associated (included) in the selected page. The behavior will add on the page a status bar

showing the master record to which the list elements are associated.

To insert the behavior we have to add a new paragraph before the list table, make sure that the mouse pointer is on

this paragraph and then go to "Server Behavior" tab in the "Application" panel, push the "+" button and select the

"Master Detail/List Detail" option from the Next2 menu.

NeXTensio will display the following configuration window where users have to define a Title, which will be

displayed on the first paragraph along with the "Master Field to Display", select the master table (in our case is the

"pages_pag" table), select the master table field to display, select the master table unique key and select the detail


Figure 45 Configuring the NeXTensio Article List

Figure 46 Create Convert to Detail List Server Behavior


table foreign key to master table.

Follow the below image for details:

Save the page, upload it on the server and load the page list in your browser. Pick a page from the list and press

the corresponding "Select" button to view the page associated article list. The resulting page should look like in

the bellow image:

Now we have to create the NeXTensio form that will be used to insert/update articles. Open the

"article_form.php" file and press the "Create NeXTensio2 Form" button displayed in the "NeXTensio 2"

tab from the Dreamweaver "Insert" panel.

In the displayed configuration window define the form title, select the connection, select "articles_art" as table to

update and "id_art" as primary key column. In the Form Fields section we'll leave only the article title, text and

date. The article id is not required as it will be generated by the database.

You can change the fields labels by selecting a field and entering the new value in the "Field Label" interface

field. All three fields must be displayed in both insert and update page form and this can be set by checking the

"Show In Insert/Update" check boxes for each field. Also, a field should not be empty and therefore we have to

set them required both in the insert and update transaction by checking the "Required Insert/Update" check boxes

for each field.

The article title should be entered as simple text and therefore we should select the "TEXT" option in in the

"Display As" drop down menu when the field is selected in the Form Fields interface. The article content should

be edited using the KTML2 on line editor and therefore we should select "KTML" option in the "Display As" drop

down field. Once selected you can define the KTML field properties by using the "KTML Properties" button

displayed on the interface button section (we have set 670 as KTML field width).


Figure 47 Configuring the Convert to NeXTensio Detail List Behavior

Figure 48 Article List Preview


The article date should have a form validator, that will be used to verify if users have correctly entered the date.

Select the "date_art" field and set the "UniVAL" drop down menu value to "Date".

You can also define custom UniVAL error messages for each form field validators (if used). These messages are

displayed when one of the UniVAL form validators returns an error. Once finished, you can press the "OK"

button and the articles insert/update form will be automatically generated by NeXTensio.

Follow the bellow image for details on how to configure the form:

As for the articles list, we also have to convert the form to a "NeXTensio Detail Form", so that it can keep the

association between the article and its associated page. To insert such a behavior, go to "Server Behavior" tab in

the "Application" panel, push the "+" button and select the "Master Detail -> Convert to Detail Form" option

from the NeXTensio2 menu.

NeXTensio will display the following configuration window where users have to select the master table (in our

case is the pages_pag table), select the master table field to display (it will be displayed along with the Detail

Form title), select the master table unique key and select the detail table foreign key to master table.

Follow the below image for details:


Figure 49 Configuring the Articles Insert/Update Form


Now you can save the file and upload it on the server. You now have created all the necessary files needed to

administrate the NeXTensio2CMS website contents and users.

Let's try to insert, in the "New Page" we have created a "New Article". Load the administration interface and

follow the Pages & Articles link. Use the "Select" button corresponding to the "New Page" and, in the displayed

empty list, use the "New" button to access the article insert/update form. Write some content and press the

"Insert" button, displayed under the form.

See the bellow image for details:

The New Page associated article list should look like in the following image:

The site seems to be ready, but there is one more thing that you have to do. You must ensure that no unauthorized

person can access the administration area. To do that, you will have to restrict the access to every page in the

admin folder. Here is an example of how to do this for menu.php. You will do the same for all the other pages.

Open content.php, go to the Server Behaviors panel and select ImpAKT2->Login->Restrict Access. Select

the user table, the primary key field, the username field and the password field. Use the "Browse" button to select

index.php page as target page if login fails and select Username and Password as the method of restriction.


Figure 51 Insert/Update Article Form

Figure 50 Configuring the Convert to NeXTensio Detail Form Behavior

Figure 52 New Page Article List


Follow the bellow image for details:

Save this page and add restrict access behaviors to the following pages: user list and form, pages list and form,

article list and form. When done you must upload all the site on the server to be sure that all pages are updated and

you can start building a small site.

ConclusionThis technological walk through was meant to show you how easy it can be to build a CMS using Dreamweaver,

PHAkt or PHP_MySQL and NeXTensio2. The basic techniques used for this CMS can be used to create more

complex applications, with a lot of features and very few code lines to write.

You can download PHAkt2 MX for free at http://www.interakt.ro/products/PHAkt/

You can buy NeXTensio from our store at http://www.interakt.ro/products/NeXTensio/


Figure 53 Configuring the Restrict Access to Page SB


Appendix I - versionsTo create this tutorial we have used the following software versions:

Code Generators: Macromedia Dreamweaver MX 6.0

Dreamweaver MX Update 6.1

Extensions: NeXTEnsio 2

ImpAKT 2.5.0

PHAkt 2.5.0

AdvRs 2.4.0

Database server: MySQL

PHP: PHP 4.3.0

Webserver: Apache Web Server 1.3.27

Operating systems:

Workstation: Microsoft Windows 98

Web server: Redhat Linux 7.2

CopyrightWindows is a trademark of Microsoft Inc.

Dreamweaver MX is a trademark of Macromedia Inc.

Redhat is a trademark of Redhat Inc.


Copyrights and Trademarks

Copyright - 2000-2003 by InterAKT Online, SRL.

All Rights Reserved. This tutorial is subject to copyright protection.

PHAkt, ImpAKT, NeXTensio, QuB, Transaction Engine are trademarks of InterAKT.

All other trademarks are acknowledged as the property of their respective owners.

This document and the product to which it pertains are distributed under licenses

restricting their use, copying, distribution, and decompilation. No part of this document or

of the associated product may be reproduced in any form by any means without prior

written authorization of InterAKT Online, except when presenting only a summary of the

tutorial and then linking to the InterAKT website.

DOCUMENTATION IS PROVIDED "AS IS AND ALL EXPRESS OR IMPLIED

CONDITIONS, REPRESENTATIONS AND WARRANTIES, INCLUDING ANY

IMPLIEDWARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR

PURPOSE OR NON-INFRINGEMENT, ARE DISCLAIMED, EXCEPT TO THE

EXTENT THAT SUCH DISCLAIMERS ARE HELD TO BE LEGALLY INVALID.

Send comments and suggestions to [email protected].

Building a Dynamic Website Using Dreamweaver MX and NeXTensio

Documents

Transcript of Building a Dynamic Website Using Dreamweaver MX and NeXTensio