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 Page 2
Building a dynamic website using Dreamweaver MX and NeXTensio
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"?>"
http://www.interakt.ro Page 3
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 4
Figure 1 Web Application Basic Mechanism
Figure 2 Local Network Architecture
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 5
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 6
Building a dynamic website using Dreamweaver MX and NeXTensio
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):
http://www.interakt.ro Page 7
Building a dynamic website using Dreamweaver MX and NeXTensio
http://www.interakt.ro Page 8
Figure 3 Database Representation using QuB
Building a dynamic website using Dreamweaver MX and NeXTensio
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
http://www.interakt.ro Page 9
Figure 4 Setting Up the Local Paths
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 10
Figure 5 Setting up the Remote Info Section
Figure 6 Setting up the Testing Server
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 11
Building a dynamic website 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.
http://www.interakt.ro Page 12
Figure 8 Save Left Frame
Figure 7 Create a Frameset
Building a dynamic website using Dreamweaver MX and NeXTensio
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".
http://www.interakt.ro Page 13
Figure 9 Create Connection
Figure 10 Configuring the connection
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 14
Figure 12 Create New Recordset
Figure 11 Configuring a MySQL connection
Building a dynamic website using Dreamweaver MX and NeXTensio
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
http://www.interakt.ro Page 15
Figure 13 Configuring the rsPages Recordset
Figure 14 Create the Go To Detail Page
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 16
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
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 17
Figure 19 Create a Repeated Region
Figure 20 Configuring a Repeated Region
Building a dynamic website using Dreamweaver MX and NeXTensio
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
http://www.interakt.ro Page 18
Figure 21 Creating the rsPage recordset
Figure 22 Creating a Show If Server Behavior
Figure 23 Configure Show If Server Behavior
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 19
Figure 25 Configuring the rsArticles recordset
Figure 24 Showcontent page view
Building a dynamic website using Dreamweaver MX and NeXTensio
Save the page, upload the site and load it in the browser. You should see a screen similar to the screen below:
http://www.interakt.ro Page 20
Figure 26 The created page
Figure 27The NeXTensio2CMS Site Frontend
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 21
Figure 28 Accessing the tNG Login Form command
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 22
Figure 29 Configuring the ImpAKT 2 Login Transaction
Figure 30 The Login Page Preview
Building a dynamic website using Dreamweaver MX and NeXTensio
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 :
http://www.interakt.ro Page 23
Figure 31 Menu page Preview
Figure 32 Configuring the Logout Server Behavior
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 24
Figure 33 Insert NeXTensio List
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 25
Figure 35 User List Preview
Figure 34 Configuring the NeXTensio List
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 26
Figure 36 Editing a NeXTensio Form
Figure 37 Preview User Insert/Update Form
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 27
Building a dynamic website using Dreamweaver MX and NeXTensio
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
http://www.interakt.ro Page 28
Figure 38 Configuring the NeXTensio List for Site Pages
Figure 39 NeXTensio Page List Preview
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 29
Figure 40 Configuring the NeXTensio Page Form
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 30
Figure 41 NeXTensio Page Form Preview
Figure 43 Configuring the List Master Server Behavior
Figure 42 NeXTensio 2 Server Behaviors Menu
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 31
Figure 44 Preview Page Master List
Building a dynamic website using Dreamweaver MX and NeXTensio
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
http://www.interakt.ro Page 32
Figure 45 Configuring the NeXTensio Article List
Figure 46 Create Convert to Detail List Server Behavior
Building a dynamic website using Dreamweaver MX and NeXTensio
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).
http://www.interakt.ro Page 33
Figure 47 Configuring the Convert to NeXTensio Detail List Behavior
Figure 48 Article List Preview
Building a dynamic website using Dreamweaver MX and NeXTensio
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:
http://www.interakt.ro Page 34
Figure 49 Configuring the Articles Insert/Update Form
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 35
Figure 51 Insert/Update Article Form
Figure 50 Configuring the Convert to NeXTensio Detail Form Behavior
Figure 52 New Page Article List
Building a dynamic website using Dreamweaver MX and NeXTensio
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/
http://www.interakt.ro Page 36
Figure 53 Configuring the Restrict Access to Page SB
Building a dynamic website using Dreamweaver MX and NeXTensio
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.
http://www.interakt.ro Page 37
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].