Creating a Travel Agency Website Using Dreamweaverand KTML Creating a Travel Agency Website Usi ng Dreamweaver and KTML .................................. 1 Requirements........................................................................................................................ 2 Getting Started ...................................................................................................................... 3 Setting up the Development Framework ......................................................................... 3 Defining your site............................................................................................................. 4 Setting up your database .................................................................................................. 4 Create the site using Starter Pages ....................................................................................... 5 Customize the default pages ............................................................................................ 7 Create the database connection ............................................................................................ 7 Display the Lat est T ravel Destination ............................................................................... 10 Create the Recordset ...................................................................................................... 10 Display Dynamic Data ................................................................................................... 12 Editing Travel Destinations ............................................................................................... 13 Create the edit content link ............................................................................................ 13 Create the Record U pdate For m .................................................................................... 15 Replacing a Standard Textarea with a Rich Text Editor ................................................... 19 Edit Y our First Travel Destination .................................................................................... 26 Where to go from here ....................................................................................................... 31
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Getting Started ......................................................................................................................3Setting up the Development Framework .........................................................................3
Defining your site .............................................................................................................4
Setting up your database ..................................................................................................4
Create the site using Starter Pages .......................................................................................5Customize the default pages ............................................................................................7
Create the database connection ............................................................................................7
Display the Latest Travel Destination ...............................................................................10Create the Recordset ......................................................................................................10
Display Dynamic Data ...................................................................................................12
Editing Travel Destinations ...............................................................................................13Create the edit content link ............................................................................................13
Create the Record Update Form ....................................................................................15
Replacing a Standard Textarea with a Rich Text Editor ...................................................19Edit Your First Travel Destination ....................................................................................26
Where to go from here .......................................................................................................31
When maintaining a website for a travel agency with hundreds of travel destination offers,
you most often rely on a web master or web developer to edit content in HTML and then
upload it using a FTP connection. Wouldn’t it be nice to allow any of company’semployees edit the site content in a browser (in a secure and visual manner)? Well, it can
be done, and it will allow you enable any Word savvy user to edit the website content,
without learning HTML or anything.
In this article, I will walk you through creating a website for a fictional travel agency that
sells vacations in the Caribbean, from designing and setting up the database, to creating thefront-end and editing travel destinations. You will have the website up fast, with minimum
effort and coding, using Dreamweaver’s integrated server features and KTML Lite – a free
product from InterAKT.
Requirements
In order to complete this tutorial you need to install the following software and files:
• Server Operating system: Apple Mac OS X 10.2 +, Microsoft Windows XP or later,
or Linux .
• Web server: Apache 1.3.x [Link: http://www.apache.org] or Microsoft IIS [Link:http://www.microsoft.com/WindowsServer2003/iis/default.mspx]
• Application server: PHP [Link: http://www.php.net] version 4.3.0 or later
(recommended version: PHP 5)• Database server: MySQL [Link: http://dev.mysql.com] version 3.x or higher
Note: You can build this application on any of the supported server models — PHP_MySQL, ColdFusion, ASP VBScript, PHP_ADODB The steps are similar. However,
for this article, we used PHP 5 and MySQL as the development framework.
Sample filesTravel_agency.zip [LINK: sample_files.zip][436 Kb] The sample files contain the
completed web application, and the database script.
Prerequisite Knowledge
• Familiarity with the Dreamweaver workspace and interface
• Grasp of basic web application development concepts (no programming skillsrequired)
In this article, you will build a website for a fictional travel agency that books vacations in
the Caribbean. You will use Dreamweaver and KTML to:
• Create the basic page design using Starter Pages.
• Connect to the database server and display the latest travel destination.• Create a page that allows editing the travel destination’s description.
• Manage the site content using a visual HTML editor, directly in the browser window.
Figure 1 Preview of the completed application
Before you start building the application, please make sure that:
• You have a running database and application server.
• You have installed the required software: Dreamweaver and KTML Lite
• You have correctly defined a Dreamweaver site with a PHP_MySQL testing server.
The next two sections briefly present how to do that.
Setting up the Development Framework
First you have to set up your application server environment and install Dreamweaver 8and KTML Lite.
This article assumes that you have already installed and configured a web server with PHP
and MySQL support. If this is not the case, take a look at the following articles from the
Developer Center:
• Setting Up Your PHP Server Environment Using Linux, Apache, MySQL and PHP
(by David Sklar) if you use the LAMP platform
• Setting Up the PHP, MySQL, and Apache Server Platform on Macintosh OS X for
Dreamweaver MX (by Minh Huynh) if you're working in Mac OS• Setting up PHP for Microsoft IIS (by Andrew Stopford) if you're a fan of IIS
If you're using Windows, also take a look at WAMP Server , a free tool that automatically
installs Apache, PHP 5, MySQL server , phpMyAdmin, and SQLiteManager . For detailedinstructions on installing WAMP Server, see this technical note on the InterAKT
Before you build the application, you need to set up your site in Dreamweaver. For a quick
site setup, take a look at this TechNote: How to Define a Site in Dreamweaver .The site will only contain two files, and the images that are associated with them, as you
can see in figure 2:
Figure 2 File structure for the travel agency site
You will create these files in the sections that follow, using Dreamweaver’s Starter Pages.
If you want to skip these steps, unzip the sample file archive into the site root.In the next section you will set up and connect to your database.
Setting up your database
The application is entirely dynamic. It stores travel destinations and their descriptions into
a database table. As you will only implement displaying and editing travel destinations, thedatabase will only need one table: destination_dst.
Table 1 lists the structure of the travel destinations table.
Travel destinations Destination_dst
id_dst Primary key: unique identifier for each destination
name_dst The travel destination name.
date_dst The date when the destination has been added.description_dst Description of the destination. Contains HTML code and isdisplayed in the browser.
The SQL code for creating this table is pretty straightforward. Notice that the ID is set to
automatically increment, so the latest entry will have the highest ID and there are no
CREATE TABLE `destination_dst` (`id_dst` int(11) NOT NULL auto_increment,`name_dst` varchar(255) NOT NULL,
`description_dst` text NOT NULL,`date_dst` date NOT NULL,PRIMARY KEY (`id_dst`)
)
In order to add user authentication to the application you will need to add another database
to store user informations, at the vary basic, the name, e-mail address and password.
Now that you have an idea of how your database will look, fire up the sample SQL script inyour MySQL console or in your favorite database management software (such as
phpMyAdmin[LINK: http://www.phpmyadmin.net/home_page/index.php]) and create the
database. Include the following line at the beginning if you want to create a separatedatabase:
create database travel_agency;
When creating the database you should consider using a naming convention to ease further development. Some guidelines on database naming conventions can be found in this article
Before you can connect to the database you have to create the site files.
Create the site using Starter Pages
In order to quickly build a site design you will Starter Pages.Starter Pages are a set of already created pages that you can add to your site. They include
design and graphics and are an easy way to get started on a project. To create a new page
from starter pages, follow the next steps:1. Open Dreamweaver.
2. Go to File > New. The New Document dialog box will load.
3. In the Category list select Start pages. The second panel displays the available
pages. Scroll until you find the Travel – Home Page item, and select it.
Figure 3 Select the Starter Page to use
4. Click OK to create the page. In the Save As dialog enter the file name – index.php
and hit Save.
5. One more dialog box appears. Since the selected template uses some images and aCSS file, you will be prompted to copy them to your site root folder. Click Copy.
Figure 4 Click Copy to add the images to the site root
6. Now the page has been created. It displays the default template content, which youwill edit later on:
Figure 5 Dreamweaver view of the selected template
The Starter Pages are fully customizable. You can change anything – from page elements
to the actual design to make it fit you project.
At this point you have created one of the site pages – the index. To create the second one,repeat the same steps as above, but instead of index.php enter edit.php for the page name.
To determine Dreamweaver to correctly recognize the file type, close both of the created
files and re-open them in Dreamweaver.
Customize the default pages
After creating the pages, you should start changing them to better suit your purpose. The
first thing to do will be to replace the page title and tagline:
1. Open the index.php page.2. In the upper-right section there is a default text – insert website name. Select it and
type Carribean Tours.
3. Do the same for the tagline. Select the OPTIONAL TAGLINE HERE text, delete itand type: exploring tropical paradises.
4. Save the page. Repeat the same steps for the edit.php page.
Figure 6 Customized site name and tagline
Once you’re done creating and customizing the files, you can move on and connect to the
database you’ve created earlier.
Create the database connection
To connect to the database in Dreamweaver, follow these steps:
1. Open the index.php file.
2. In the Application panel click the Database tab to open it.3. Next click the Plus (+) button and select the MySQL Connection option:
5. Click OK when done to close the dialog box and create the connection. It will
appear in the Database tab:
Figure 9 The new connection is displayed in the Database tab
Once the database connection has been set up, you can create recordsets and apply server behaviors, in order to display or process information from the database.
In the next section you will use data from the table to add content to the site pages.
6. To display the description, drag and drop the corresponding recordset field from the
Bindings tab into the second table row. The result is like figure 17:
Figure 18 Dynamic text in the center column
Save the page and hit F12 to preview it. The default entry will be displayed:
Figure 19 The description is displayed on the page
Now that display is out of the way, you can move on and create the page that allows editingdatabase information.
Editing Travel Destinations
In this section of the article, I will guide you through building a page that updates therecord for the travel destination you have displayed earlier. To build it, you must complete
two actions:
1. Create a link on the home page that points to the edit page and passes as parameter
the ID of the record.2. Create a form that updates database content in the edit.php page.
Create the edit content link
To edit the content on the first page you must add a link to the edit.php page that also passes the ID of the record being displayed. This ID is used to identify the record to update.
6. In the new interface enter the parameter name – id_dst , and for the value click the
dynamic data icon. In the new dialog box select the id_dst field of the rsDestination
recordset.
Figure 22 Select a recordset field to provide the value
7. Click OK three times to complete the link creation process.
Save the page . Before you go ahead and test it though, you should create the edit page.
Create the Record Update FormDreamweaver helps users who want to speed up dynamic web development by providing
server behaviors and commands that create the elements needed to insert, edit or delete a
record, and more.For the task at hand you will use the Record Update Form Wizard to build the form and
application logic that saves the updated information to your database.
Follow the next steps to create the form that updates records:1. Open the edit.php page in Dreamweaver.
2. Remove the center column’s content, and merge the two rows. To merge them,
select them both, right-click and select Table > Merge Cells.
3. Next set the width of the table. With the mouse cursor in the resulting cell, selectthe table tag in the Tag Inspector, and set a width of 650 in the Property Inspector
panel, as shown for the index.php page.
4. Place the mouse cursor in the unified table cell that has been created.
5. From the Insert bar > Application tab and then click the Record Update Form
Wizard icon.
Figure 23 Record Update Form Wizard icon
6. After clicking the icon, a dialog box appears showing that not all prerequisites have been met. As you can see, you need to define the recordset containing the item that
will be updated. Click the link to create one.
Figure 24 Click the requirement that isn't checked
7. In the recordset interface that opens, configure the parameters for the new query as
shown below:
Figure 25 Create a filtered recordset
a. In the Name text box enter rsUpdate. b. In the Connection drop-down menu select the connTravel database
connection.
c. In the Table drop-down menu select the destination_dst table.
f. Next select the description_dst field in the grid, and in the Display as drop-
down menu select Text area. In the Label text field enter Description:
Figure 28 Set the form element to use for the field
10. Next select the name_dst field and in the Label text field enter Name.11. The date_dst field will always receive the current date as a value. Select the field in
the grid, and in the Display as drop-down menu select Hidden Field.
12. Click OK when done to close the wizard and apply the changes to the page.
The wizard creates the form and the application logic needed to perform the update. From
the table created in the page center, remove the first column – the one displaying the label.
Select the column and press Delete.In Dreamweaver, the two updated areas are the center column (figure 28) and the Server
Now it’s time to make the staff that will work to update the site happy. Instead of learning
HTML, they’ll put the Word knowledge to good use, as the textarea will turn into
something much friendlier – a HTML online editor.
Figure 32 Final editing page
Before starting to replace the textarea with KTML Lite, make sure you have the extension
installed.
An extension is a tool that can be added to Dreamweaver to bring greater functionality and
enhance its capabilities. Extensions can vary from small HTML programs to complex Java
applications. Their purpose is to reduce areas of manual coding, and minimize repetitivetasks in order to increase productivity.
You can install and manage extensions using Macromedia Extension Manager, an
accessory to Dreamweaver. Extensions are usually delivered as executable MXP files. Justrun them and Extension Manager will initiate the installation. You can find a lot of
extensions on the Dreamweaver Exchange [LINK:
http://www.macromedia.com/cfusion/exchange/index.cfm], the biggest repository for
extensions on the web.
The steps to follow in order to enhance the page are:
2. In the Application panel click the Server Behaviors tab to open it.
3. Click on the textarea to select it.
4. In the Server Behaviors tab click the Plus (+) button > KTML 4 > KTML 4 Lite
Figure 33 Apply the KTML 4 Lite Server Behavior
5. The KTML 4 Lite server behavior has four sets of options that you can use toconfigure the editor to suit your needs: editor size, toolbars, buttons, security
The KTML editor workspace consists of the toolbar section – on top, the main editing area
and the Property Inspectors area.There are several toolbars available in KTML, for text formatting, editing, for inserting
form elements or links, images and tables. Hovering the mouse over each button willdisplay a quick tip on its function.
The Property Inspector area will display additional options for supported elements,
allowing more in depth settings. The options displayed vary based on the selected element. Now you have finished with the hard work, and you can have a little fun editing the demo
destination. This way, you will learn how to use some of the editor’s features.
Edit Your First Travel Destination
Now you will learn how to use the editor you’ve just applied in order to edit a travel
destination. During this section you will learn how to:• Insert an image
• Apply text formatting
• Create linksTo complete this section, you only need your web browser – everything can be edited
online.
1. Load the Travel Agency homepage in a browser. Then click Edit content to load theeditor.
KTML also comes with a more advanced version featuring advanced Property panels for
images, tables, form elements and virtually any element in the editor, spellchecking,
XHTML clean-up and even a remote image editor. You can find out more about the fullversion here [LINK: http://www.interaktonline.com/Products/Online-HTML-
2. Create a page that lists all travel destinations, and a page to add new destinations.For the list you have to create a recordset and use a dynamic table, while for the
page to add destination you will use the Insert Record Form Wizard in
Dreamweaver.
3. Enhance the page for adding destinations by replacing the textarea with KTMLLite, as shown above.