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................................................................................................................................................5 Content frame..................................................................................................................................................5 Site backend....................................................................................................................................................5 Setting up the applications.............................................................................................................................6 Installing Apache / PHP / MySQL..................................................................................................................6 Installing Macromedia MX..............................................................................................................................6 Installing PHAkt2 MX......................................................................................................................................6 Installing ImpAKT 2 tNG.................................................................................................................................6 Installing NeXTensio.......................................................................................................................................6 Database creation.............................................................................................................................................7 NeXTensio2 site creation.................................................................................................................................9 Site configuration............................................................................................................................................9 Site folder structure.......................................................................................................................................11 Conclusions...................................................................................................................................................11 NeXTensio2 CMS Frontend..........................................................................................................................12 Menu..............................................................................................................................................................13 Contents Page..............................................................................................................................................17 NeXTensio2 CMS Backend............................................................................................................................21 The Login Page.............................................................................................................................................21 Admin Frameset............................................................................................................................................22 Building the administration pages................................................................................................................23
Conclusion..............................................................................................................................................35 Appendix I - versions............................................................................................................................37 Copyright................................................................................................................................................37
http://www.interakt.ro
Page 2
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) PHAkt2 ImpAKT NeXTensio MX AdvRS package Apache/PHP A MySQL or PostgreSQL database http://www.macromedia.com/ http://www.interakt.ro/products/PHAkt/ http://www.interakt.ro/products/ImpAKT/ http://www.interakt.ro/products/NeXTensio/ ftp://ftp.interakt.ro/pub/ImpAKT/advrs-1_1_0.mxp http://www.apache.org/ 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
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 Overview
From 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
Page 4
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, well emphasize how easy it is to create such a system with our tools.
Dynamic menu
The 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 frame
This 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 backend
A site administrator should be able to add, delete or modify the site contents by using this administration section.
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 / MySQL

The 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 MX
Macromedia 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 MX
Because 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 tNG

As 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 NeXTensio
To 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.
Page 6
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 NeXTensio2CMSs website, well notice that the most important pages in the website are the menu and the content section. We cant also forget the user authentication section that will also need a table to store user information. Therefore well 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_arts 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
Page 8
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 configuration
When 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 youll 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 Apaches 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 dont try to load it in your browser)) .
Figure 4 Setting Up the Local Paths
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
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.
Figure 5 Setting up the Remote Info Section
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.
Figure 6 Setting up the Testing Server
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.
Page 10
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 structure

The 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.
Conclusions
At 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.
Page 11
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.
Figure 7 Create a 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.
Figure 8 Save Left Frame
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.
Menu
The 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.
Figure 9 Create Connection
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).
Figure 10 Configuring the 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 11 Configuring a MySQL 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).
Figure 12 Create New Recordset
That following picture will give some hints about how to configure the recordset:
Page 14
Figure 13 Configuring the rsPages Recordset
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.
Figure 14 Create the 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 15 Go To Detail Page Configuration
will pass the "id_pag" value from the rsPages recordset.
Figure 16Configuring the link parameters on PHP_MySQL server model
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.
Figure 17 Setting the target frame
Do the same thing for the Home Page link with a small difference. Follow the screenshot for this.
Figure 18 Setting the target and the URL parameter
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.
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.
Figure 19 Create a Repeated Region
Select rsPages from the pop-up menu and the All Records for Show option and then click OK.
Figure 20 Configuring a Repeated Region
Now save the page and test it in the browser.
Contents Page
This 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.
Page 17
Figure 21 Creating the rsPage recordset
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.
Figure 22 Creating a Show If Server Behavior
In the displayed configuration window, select rsPages from the dropdown menu and click OK.
Figure 23 Configure Show If Server Behavior
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
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:
Figure 24 Showcontent page 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:
Figure 25 Configuring the rsArticles recordset
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:
Page 19
Figure 26 The created page
Save the page, upload the site and load it in the browser. You should see a screen similar to the screen below:
Figure 27The NeXTensio2CMS Site Frontend
Page 20
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 Page

Before 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:
Figure 28 Accessing the tNG Login Form command
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:
Page 21
Figure 29 Configuring the ImpAKT 2 Login Transaction
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:
Figure 30 The Login Page Preview
Admin Frameset
A 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.
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).
Figure 31 Menu page Preview
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:
Figure 32 Configuring the Logout Server Behavior
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 :
Page 23
Figure 33 Insert NeXTensio List
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.
Page 24
Figure 34 Configuring the 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:
Figure 35 User List Preview
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.
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".
Figure 36 Editing a NeXTensio Form
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 37 Preview User Insert/Update Form
Page 26
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:
Page 27
Figure 38 Configuring the NeXTensio List for Site Pages
You can now save the page, upload it on the server and see how the page list is displayed on the browser:
Figure 39 NeXTensio Page List Preview
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
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:
Figure 40 Configuring the NeXTensio Page 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.
Page 29
Figure 41 NeXTensio Page Form Preview
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:
Figure 42 NeXTensio 2 Server Behaviors 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:
Figure 43 Configuring the List Master Server Behavior
Save the page and load it on your browser. You should see a page similar with the following example:
Page 30
Figure 44 Preview Page Master List
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:
Page 31
Figure 45 Configuring the NeXTensio Article 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.
Figure 46 Create Convert to Detail List Server Behavior
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
table foreign key to master table. Follow the below image for details:
Figure 47 Configuring the Convert to NeXTensio Detail List Behavior
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:
Figure 48 Article List Preview
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).
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:
Figure 49 Configuring the Articles Insert/Update 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:
Page 34
Figure 50 Configuring the Convert to NeXTensio Detail Form Behavior
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:
Figure 51 Insert/Update Article Form
The New Page associated article list should look like in the following image:
Figure 52 New Page Article List
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.
Follow the bellow image for details:
Figure 53 Configuring the Restrict Access to Page SB
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.
Conclusion
This 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/
Page 36
Appendix I - versions
To create this tutorial we have used the following software versions: Code Generators: Extensions: Macromedia Dreamweaver MX 6.0 Dreamweaver MX Update 6.1 NeXTEnsio 2 ImpAKT 2.5.0 PHAkt 2.5.0 AdvRs 2.4.0 Database server: PHP: Webserver: Operating systems: Workstation: Web server: Microsoft Windows 98 Redhat Linux 7.2 MySQL PHP 4.3.0 Apache Web Server 1.3.27
Copyright
Windows is a trademark of Microsoft Inc. Dreamweaver MX is a trademark of Macromedia Inc. Redhat is a trademark of Redhat Inc.
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 products@interakt.ro.

Building A Dynamic Website Using Dreamweaver MX and NeXTensio

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Building A Dynamic Website Using Dreamweaver MX and NeXTensio

Caricato da

Copyright:

Formati disponibili

Building a dynamic website using Dreamweaver MX and NeXTensio 2

Building a dynamic website using Dreamweaver MX and NeXTensio

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

Building a dynamic website using Dreamweaver MX and NeXTensio

Building a dynamic website using Dreamweaver MX and NeXTensio

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

InterAKT ImpAKT 2.0 for MX

Setting up the applications

Installing Apache / PHP / MySQL

Installing ImpAKT 2 tNG

Building a dynamic website using Dreamweaver MX and NeXTensio

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 3 Database Representation using QuB

Building a dynamic website using Dreamweaver MX and NeXTensio

NeXTensio2 site creation

Figure 4 Setting Up the Local Paths

Figure 5 Setting up the Remote Info Section

Figure 6 Setting up the Testing Server

Cloaking and Design Notes

Building a dynamic website using Dreamweaver MX and NeXTensio

Site Map Layout and File View Columns

Site folder structure

Building a dynamic website using Dreamweaver MX and NeXTensio

NeXTensio2 CMS Frontend

Figure 7 Create a Frameset

Figure 8 Save Left Frame

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 9 Create Connection

Figure 10 Configuring the connection

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 11 Configuring a MySQL connection

Figure 12 Create New Recordset

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 13 Configuring the rsPages Recordset

Figure 14 Create the Go To Detail Page

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 15 Go To Detail Page Configuration

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

Figure 16Configuring the link parameters on PHP_MySQL server model

Figure 17 Setting the target frame

Figure 18 Setting the target and the URL parameter

Figure 19 Create a Repeated Region

Figure 20 Configuring a Repeated Region

Now save the page and test it in the browser.

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 21 Creating the rsPage recordset

Figure 22 Creating a Show If Server Behavior

Figure 23 Configure Show If Server Behavior

Figure 24 Showcontent page view

Figure 25 Configuring the rsArticles recordset

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 26 The created page

Figure 27The NeXTensio2CMS Site Frontend

Building a dynamic website using Dreamweaver MX and NeXTensio

NeXTensio2 CMS Backend

The Login Page

Figure 28 Accessing the tNG Login Form command

Building a dynamic website using Dreamweaver MX and NeXTensio

Figure 29 Configuring the ImpAKT 2 Login Transaction

Figure 30 The Login Page Preview