Travel Agency Article

8/2/2019 Travel Agency Article

http://slidepdf.com/reader/full/travel-agency-article 1/31

Creating a Travel Agency Website Using Dreamweaver and KTML

Creating a Travel Agency Website Using Dreamweaver and KTML ..................................1

Requirements ........................................................................................................................2

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:

• Dreamweaver 8Try [Link: http://www.macromedia.com/go/trydreamweaver] | Buy [Link:http://www.interaktonline.com/Store/Macromedia-Affiliate/Redirect/]

• KTML Lite, a free Dreamweaver extension from InterAKT Online. You can

download it from here [Link: http://www.interaktonline.com/Products/Online-

HTML-Editor/KTML-for-Dreamweaver/Try-Download/ ?from=mm_ktml4]

• 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)

http://www.apache.org/

http://www.microsoft.com/WindowsServer2003/iis/default.mspx

http://www.php.net/

http://dev.mysql.com/

http://www.apache.org/

http://www.microsoft.com/WindowsServer2003/iis/default.mspx

http://www.php.net/

http://dev.mysql.com/



Getting Started

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

Knowledge Base.

http://www.macromedia.com/devnet/dreamweaver/articles/lamp.html

http://www.macromedia.com/devnet/dreamweaver/articles/php_macintosh.html


http://www.macromedia.com/devnet/dreamweaver/articles/php_iis.html

http://www.wampserver.com/en/index.php

http://www.mysql.com/


http://www.phpmyadmin.net/home_page/index.php


http://www.sqlitemanager.org/

http://www.interaktonline.com/Support/Knowledgebase/Technote/Details/148/14/Installing+Wamp5+on+your+computer.html?from=mm_f1


http://www.macromedia.com/devnet/dreamweaver/articles/lamp.html



http://www.macromedia.com/devnet/dreamweaver/articles/php_iis.html

http://www.wampserver.com/en/index.php



http://www.sqlitemanager.org/




Defining your site

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

http://www.macromedia.com/support/dreamweaver/ts/documents/define_new_site.htm





repeating ID's.

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

[LINK:

http://www.interaktonline.com/Support/Articles/Details/Naming+Conventions+in+Application+Development.html?id_art=22]

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:

Figure 7 Create a new MySQL database connection



4. A dialog box opens, allowing you to define the connection parameters. Configure it

as shown below:

• In the Connection Name text box enter connTravel.

• In the MySQL server text box enter the address (IP or hostname) of the

computer that is running the MySQL database server.• In the User name text box, enter the name of the user that is allowed to connect

to the database.

• In the Password text box, enter the password of the user that connects to thedatabase.

Note: If you do not know your database authentication information, please

contact your hosting company or your network administrator.

• In the Database text field enter the name of the database you have created at the beginning of this article – travel_agency

Note: Make sure you replace the sample database authentication information

with the actual values for your server.

Figure 8 Configure the connection parameters



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.



Display the Latest Travel Destination

The homepage of the site will display the latest travel destination entered in the database.

To achieve this you must:

1. Create a recordset that retrieves the destinations.

2. Display a travel destination on the homepage.

Create the Recordset

A recordset is a set of records from a database table – in this particular case, a set of

vacation destinations. In Dreamweaver, you can either create a recordset using its dialog

box, or enter the SQL code yourself.To create the recordset that retrieves the latest travel destination from the corresponding

table, follow the next steps:

1. Open the index.php file.2. In the Application tab, click the Bindings tab to display it.

Figure 10 Click the Bindings title to open the tab

3. Click the Plus (+) button and select the Recordset (Query) option.

Figure 11 Create a new recordset option

4. The basic recordset dialog box is displayed. Fill in the options as follows:

a. In the Name text box enter rsDestination - the recordset name.

b. In the Connection drop-down menu select the connTravel databaseconnection created at the beginning of the tutorial.



c. The Table drop-down will display the only table in the database:

destination_dst. Select it.

d. In the Sort drop-down menu select date_dst. For the method selectDescending.

Figure 12 Configure the recordset properties

5. Click OK to close the dialog box and create the recordset.

The newly created recordset is displayed in the Bindings tab. Expand it to see the columns

it retrieves:

Figure 13 Expand the recordset to see the columns it retrieves

Now that you created the recordset, you can move on and display information from it on

the page.



Display Dynamic Data

The description text will be displayed in the center column of the template page, replacing

the bogus content. To make space for the dynamic field, follow the next steps:1. Open the index.php file.

2. Delete the content from the center column: select it (including the title) and press

Delete. You should then have a layout as in figure 15.

Figure 14 Empty table after removing content

3. Next place the mouse cursor inside one of the table cells in the center and click theTable tag in the Tag Selector.

Figure 15 Select the table containing the TD

4. Then, using the Property Inspector set the table width to 650 pixels.

Figure 16 Set the table width using the Property Inspector controls

5. Drag and drop the name_dst field from the Bindings tab into the first table cell:

Figure 17 Display the travel destination name



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.

To create such a link, follow the next steps:

1. Open the index.php page.



2. Place the mouse cursor after the dynamic text and press Enter/Return to create a

new paragraph.

3. Type: Edit content.4. Select the entered text and click the Folder icon in the Property Inspector:

Figure 20 Click the icon to open the Create Link dialog

5. In the dialog box that opens select the edit.php page and click the Parameters button:

Figure 21 Select the page to link to



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.



d. In the Filter drop-down menu select the column by which to filter the

recordset – id_dst. For the matching value, select the URL Parameter, and

enter id_dst as its name. The URL parameter is passed by the Edit contentlink in the index.php page, to match the record to update.

8. Click OK to create the recordset. Now the Setup Instructions dialog box shows all

requirements are met, and you can click OK to start the wizard.9. The wizard interface allows defining the database information, and which fields to

display in the form. Configure the options as follows:

Figure 26 Configured Update Record Form Wizard interface

a. In the Connection drop-down menu select the connTravel databaseconnection.

b. In the Table to update drop-down menu select destination_dst.

c. In the Select record from drop-down menu select the rsUpdate recordset.d. In the After updating, go to text box enter index.php.

e. From the Form Fields grid remove the id_dst field – select it and click the

Minus(-) button.

Figure 27 Remove fields from the grid



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

Behaviors tab (figure 29).

Figure 29 Form created by the wizard in the page



Figure 30 Server Behaviors added by the wizard

Before jumping in to test if the page works, you have to create the link by which the ID of

the record to edit is passed to the edit.php page.

Save the changes you’ve made to all pages. To test the work so far you must first load the

home page in a browser, and click the Edit content link. And you should see the HTML

code in the textarea:

Figure 31 Edit page content through the text area

Not a pretty sight. And if you simply want to rephrase something, or format text in a

different manner, you have to scroll through the code and know HTML. Not the easiest

way. Next you will replace this text area with an online HTML editor which will make editing

content a child's play. KTML allows even non-technical users to edit content in a

WYSIWYG (What You See Is What You Get) environment, much like they would do in

Microsoft Word or other word processor applications.

Replacing a Standard Textarea with a Rich Text Editor



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:

1. Open the edit.php page.



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

permissions and more..



6. In the Basic tab set primary editor options:

Figure 34 Configure the Basic options

a. In the Apply to field drop-down menu select the form field to replace.

b. In the Width text box enter 650. For the Height enter 500. These are thedimensions, in pixels, of the editor area.

c. The KTML editor allows you to format content using CSS styles. To

maintain consistency, use the same CSS stylesheet as the rest of the site,

that is, the one that comes with the Starter Page you used. So click theBrowse button and select the CSS file in the site root: mm_travel2.css.

d. KTML allows users to upload images, movies and documents on the server

and insert them in their pages. In the Files upload folder and Media uploadfolder text boxes you can specify where the uploaded files will be stored.

Leave these settings at their default values. These folders will be

automatically created for you when first accessed.



e. In the Show toolbar drop-down menu select “On load”. This way, the

toolbar will be displayed as soon as the editor loads.

f. In the Show property panel drop-down menu select “Yes”.7. Next, the Toolbars tab. Configure what toolbars and buttons are displayed:

Figure 35 Configure the editor toolbars

a. In the Toolbar presets drop-down menu you can select what predefinedconfiguration of buttons you want to use.

b. Using the grid you can add or remove toolbars from the current

configuration. For each selected toolbar you can use the checkboxes to

display or hide buttons.



8. In the Security tab define file upload restrictions:

Figure 36 Configure security settings

a. In the Allowed document types and Allowed media types lists, specify thefile extensions that can be uploaded to the server.

b. In the Maximum file size text box you can enter the maximum allowed size

for uploaded files.c. In the Strip server location select whether the full server path will be used

for links or not.



9. When done configuring all options click OK to close the user interface and apply

the changes. A translator – a scale image that represents the editor is now displayed

instead of the textarea:

Figure 37 KTML translator replaces the textarea

If you follow the same steps as when first testing the edit page, you will see that it is now

much easier to edit content:



Figure 38 Edit the destination details visually!

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.



2. The first step is to style the title. Select the Paradise Island text and from the CSS

style drop-down menu select the pageName class:

Figure 39 Select the desired CSS class from the menu

3. The editor displays the formatted header just as it will look in the browser after you

save the content:

Figure 40 Changes are immediately displayed in the editor.

4. Next you will replace the default image with a new one. First click on the image

and press the delete button to remove it. Then click the Insert Image button in the

KTML toolbar:

Figure 41 Click the icon to access the Remote File Explorer



5. After the Remote File Explorer loads, click the Browse button to select one or more

files on the disk that will be uploaded to the server. To insert the uploaded image,

select it and click Insert:

Figure 42 Insert an image to replace the default one

6. The new image is displayed inside the editor:

Figure 43 New images are rendered as soon as they are inserted



7. To apply formatting to the text you can use the text formatting toolbar options.

Simply select the text you want to change, and press the corresponding button to

make the text italic, bold or underlined.

Figure 44 Click the toolbar button to apply formatting

8. Creating links is just as easy. First you select the text to turn into a link and thenclick the Insert Link button:

Figure 45 Insert a new Hyperlink



9. In the dialog box that loads enter the desired URL:

Figure 46 Enter the hyperlink URL

10. Next click OK and the link has been created:

Figure 47 New link in the editor.

11. If you want to replace the text you can simply copy it from a word document.

Microsoft Word adds some specific markup that makes the HTML code difficult to

read and work with. All extra tags added by Word will be automatically removedwhen pasting.

To save the changes that you made click the Update Record button. You will be redirected

to the site home page that will display the updated text:

Figure 48 Changed preview

KTML Lite offers more than just text formatting, hyperlink and image insertion – users can

insert and format tables, upload documents, manage them using the integrated file explorer,

create links to them, or even create HTML forms.



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-

Editor/KTML-for-Dreamweaver/VersionComparison/?from=mm_ktml4].

Where to go from here

In this article you have learned how to use Dreamweaver 8 and KTML to create a simple

application that allows visual content editing. Before you can call the application complete,there are several things you should do:

1. Implement a User Authentication system using Dreamweaver server behavior.

Create a login form, and set the Edit content link to be displayed for logged in usersonly. You can find a good tutorial on how to do this here [LINK:

http://www.macromedia.com/devnet/dreamweaver/articles/auth_users.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.

http://www.macromedia.com/devnet/dreamweaver/articles/auth_users.html

http://www.macromedia.com/devnet/dreamweaver/articles/auth_users.html

Documents

Travel Agency Article