Creating a Travel Agency Website Using Dreamweaver and KTML

Creating a Travel Agency Website Using 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 Latest Travel Destination...............................................................................10 Create the Recordset......................................................................................................10 Display Dynamic Data...................................................................................................12 Editing Travel Destinations...............................................................................................13 Create the edit content link............................................................................................13 Create the Record Update Form....................................................................................15 Replacing a Standard Textarea with a Rich Text Editor...................................................19 Edit 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’s employees 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 the front-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 8 Try [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/OnlineHTML-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 files
Travel_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 skills required)

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 8 and 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 detailed instructions on installing WAMP Server, see this technical note on the InterAKT Knowledge Base.

Table 1 lists the structure of the travel destinations table. Description of the destination. The site will only contain two files.Defining your site Before you build the application. It stores travel destinations and their descriptions into a database table. you need to set up your site in Dreamweaver. As you will only implement displaying and editing travel destinations. If you want to skip these steps. Notice that the ID is set to automatically increment. take a look at this TechNote: How to Define a Site in Dreamweaver. Setting up your database The application is entirely dynamic. so the latest entry will have the highest ID and there are no . unzip the sample file archive into the site root. In the next section you will set up and connect to your database. the database will only need one table: destination_dst. Travel destinations id_dst name_dst date_dst description_dst Destination_dst Primary key: unique identifier for each destination The travel destination name. 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. and the images that are associated with them. The SQL code for creating this table is pretty straightforward. For a quick site setup. The date when the destination has been added. Contains HTML code and is displayed in the browser. using Dreamweaver’s Starter Pages.

the name. They include design and graphics and are an easy way to get started on a project. `description_dst` text NOT NULL. Some guidelines on database naming conventions can be found in this article [LINK: http://www. CREATE TABLE `destination_dst` ( `id_dst` int(11) NOT NULL auto_increment. The New Document dialog box will load. Create the site using Starter Pages In order to quickly build a site design you will Starter Pages.repeating ID's.net/home_page/index. When creating the database you should consider using a naming convention to ease further development. Starter Pages are a set of already created pages that you can add to your site. . To create a new page from starter pages. e-mail address and password. 2. fire up the sample SQL script in your MySQL console or in your favorite database management software (such as phpMyAdmin[LINK: http://www. follow the next steps: 1.html?id_art=22] Before you can connect to the database you have to create the site files. at the vary basic.interaktonline.phpmyadmin.com/Support/Articles/Details/Naming+Conventions+in+Applica tion+Development. Include the following line at the beginning if you want to create a separate database: create database travel_agency. Open Dreamweaver.php]) and create the database. `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. `name_dst` varchar(255) NOT NULL. Go to File > New. Now that you have an idea of how your database will look.

which you will edit later on: Figure 5 Dreamweaver view of the selected template . One more dialog box appears. Figure 3 Select the Starter Page to use 4. In the Category list select Start pages. you will be prompted to copy them to your site root folder. Now the page has been created. Click Copy. The second panel displays the available pages. 5. Click OK to create the page.php and hit Save. Since the selected template uses some images and a CSS file. Scroll until you find the Travel – Home Page item. It displays the default template content. Figure 4 Click Copy to add the images to the site root 6. In the Save As dialog enter the file name – index.3. and select it.

php page.php page. Select the OPTIONAL TAGLINE HERE text. At this point you have created one of the site pages – the index. 2. close both of the created files and re-open them in Dreamweaver. You can change anything – from page elements to the actual design to make it fit you project. follow these steps: 1.php for the page name. but instead of index. Select it and type Carribean Tours. Open the index.The Starter Pages are fully customizable. Save the page. In the Application panel click the Database tab to open it. delete it and type: exploring tropical paradises. Do the same for the tagline. To determine Dreamweaver to correctly recognize the file type. Repeat the same steps for the edit. you can move on and connect to the database you’ve created earlier. The first thing to do will be to replace the page title and tagline: 1. repeat the same steps as above. 3. To create the second one. Create the database connection To connect to the database in Dreamweaver. you should start changing them to better suit your purpose. Open the index. 4. 3. Next click the Plus (+) button and select the MySQL Connection option: Figure 7 Create a new MySQL database connection . Figure 6 Customized site name and tagline Once you’re done creating and customizing the files. 2.php enter edit.php file. In the upper-right section there is a default text – insert website name. Customize the default pages After creating the pages.

Figure 8 Configure the connection parameters . Note: If you do not know your database authentication information.4. A dialog box opens. enter the name of the user that is allowed to connect to the database. enter the password of the user that connects to the database. • In the MySQL server text box enter the address (IP or hostname) of the computer that is running the MySQL database server. • 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. • In the User name text box. allowing you to define the connection parameters. Configure it as shown below: • In the Connection Name text box enter connTravel. • In the Password text box. please contact your hosting company or your network administrator.

In the next section you will use data from the table to add content to the site pages. you can create recordsets and apply server behaviors. Click OK when done to close the dialog box and create the connection. in order to display or process information from the database.5. 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. .

php file. 2. or enter the SQL code yourself. . Fill in the options as follows: a. a set of vacation destinations. Display a travel destination on the homepage. In the Application tab. Open the index. follow the next steps: 1.the recordset name. Figure 10 Click the Bindings title to open the tab 3. Create a recordset that retrieves the destinations. Click the Plus (+) button and select the Recordset (Query) option.Display the Latest Travel Destination The homepage of the site will display the latest travel destination entered in the database. In the Name text box enter rsDestination . In Dreamweaver. To achieve this you must: 1. 2. To create the recordset that retrieves the latest travel destination from the corresponding table. Figure 11 Create a new recordset option 4. b. click the Bindings tab to display it. The basic recordset dialog box is displayed. you can either create a recordset using its dialog box. In the Connection drop-down menu select the connTravel database connection created at the beginning of the tutorial. Create the Recordset A recordset is a set of records from a database table – in this particular case.

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. Click OK to close the dialog box and create the recordset.c. Figure 12 Configure the recordset properties 5. The newly created recordset is displayed in the Bindings tab. The Table drop-down will display the only table in the database: destination_dst. . you can move on and display information from it on the page. In the Sort drop-down menu select date_dst. Select it. d. For the method select Descending.

replacing the bogus content.Display Dynamic Data The description text will be displayed in the center column of the template page. using the Property Inspector set the table width to 650 pixels. Open the index. Figure 16 Set the table width using the Property Inspector controls 5. You should then have a layout as in figure 15. Drag and drop the name_dst field from the Bindings tab into the first table cell: Figure 17 Display the travel destination name . follow the next steps: 1. 2. Figure 15 Select the table containing the TD 4.php file. Next place the mouse cursor inside one of the table cells in the center and click the Table tag in the Tag Selector. Delete the content from the center column: select it (including the title) and press Delete. To make space for the dynamic field. Figure 14 Empty table after removing content 3. Then.

This ID is used to identify the record to update. Create the edit content link To edit the content on the first page you must add a link to the edit. Create a link on the home page that points to the edit page and passes as parameter the ID of the record. 2.6. . The default entry will be displayed: Figure 19 The description is displayed on the page Now that display is out of the way. you must complete two actions: 1.php page. drag and drop the corresponding recordset field from the Bindings tab into the second table row. Create a form that updates database content in the edit. To display the description. I will guide you through building a page that updates the record for the travel destination you have displayed earlier. Open the index. follow the next steps: 1.php page.php page that also passes the ID of the record being displayed. The result is like figure 17: Figure 18 Dynamic text in the center column Save the page and hit F12 to preview it. To build it. To create such a link. you can move on and create the page that allows editing database information. Editing Travel Destinations In this section of the article.

3. In the dialog box that opens select the edit. 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. 4.php page and click the Parameters button: Figure 21 Select the page to link to . Place the mouse cursor after the dynamic text and press Enter/Return to create a new paragraph. Type: Edit content.2.

and set a width of 650 in the Property Inspector panel. Click OK three times to complete the link creation process. To merge them. 3. Remove the center column’s content. With the mouse cursor in the resulting cell. Figure 22 Select a recordset field to provide the value 7. as shown for the index. and more. select them both. you should create the edit page. and for the value click the dynamic data icon. Create the Record Update Form Dreamweaver helps users who want to speed up dynamic web development by providing server behaviors and commands that create the elements needed to insert. Open the edit.php page.6. 2. Before you go ahead and test it though. Follow the next steps to create the form that updates records: 1. Place the mouse cursor in the unified table cell that has been created. edit or delete a record. Next set the width of the table.php page in Dreamweaver. In the new dialog box select the id_dst field of the rsDestination recordset. 4. In the new interface enter the parameter name – id_dst . select the table tag in the Tag Inspector. 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. right-click and select Table > Merge Cells. . and merge the two rows. Save the page .

a dialog box appears showing that not all prerequisites have been met. In the Connection drop-down menu select the connTravel database connection. As you can see. . From the Insert bar > Application tab and then click the Record Update Form Wizard icon. In the Name text box enter rsUpdate. Figure 24 Click the requirement that isn't checked 7. configure the parameters for the new query as shown below: Figure 25 Create a filtered recordset a. In the recordset interface that opens.5. c. Figure 23 Record Update Form Wizard icon 6. Click the link to create one. After clicking the icon. b. In the Table drop-down menu select the destination_dst table. you need to define the recordset containing the item that will be updated.

go to text box enter index. to match the record to update. In the After updating. and which fields to display in the form. 8. Click OK to create the recordset. The wizard interface allows defining the database information. d. In the Select record from drop-down menu select the rsUpdate recordset. 9.d. Now the Setup Instructions dialog box shows all requirements are met. and you can click OK to start the wizard. Figure 27 Remove fields from the grid .php. In the Filter drop-down menu select the column by which to filter the recordset – id_dst. Configure the options as follows: Figure 26 Configured Update Record Form Wizard interface a. c. and enter id_dst as its name. In the Connection drop-down menu select the connTravel database connection. select the URL Parameter. The URL parameter is passed by the Edit content link in the index. b.php page. For the matching value. e. From the Form Fields grid remove the id_dst field – select it and click the Minus(-) button. In the Table to update drop-down menu select destination_dst.

Click OK when done to close the wizard and apply the changes to the page. and in the Display as dropdown menu select Text area. The wizard creates the form and the application logic needed to perform the update.f. Select the field in the grid. Next select the description_dst field in the grid. Select the column and press Delete. and in the Display as drop-down menu select Hidden Field. In Dreamweaver. remove the first column – the one displaying the label. Next select the name_dst field and in the Label text field enter Name. 11. Figure 29 Form created by the wizard in the page . In the Label text field enter Description: Figure 28 Set the form element to use for the field 10. From the table created in the page center. the two updated areas are the center column (figure 28) and the Server Behaviors tab (figure 29). The date_dst field will always receive the current date as a value. 12.

And if you simply want to rephrase something. Save the changes you’ve made to all pages. Next you will replace this text area with an online HTML editor which will make editing content a child's play. And you should see the HTML code in the textarea: Figure 31 Edit page content through the text area Not a pretty sight. or format text in a different manner. you have to create the link by which the ID of the record to edit is passed to the edit.Figure 30 Server Behaviors added by the wizard Before jumping in to test if the page works. Not the easiest way. you have to scroll through the code and know HTML.php page. Replacing a Standard Textarea with a Rich Text Editor . To test the work so far you must first load the home page in a browser. KTML allows even non-technical users to edit content in a WYSIWYG (What You See Is What You Get) environment. and click the Edit content link. much like they would do in Microsoft Word or other word processor applications.

Figure 32 Final editing page Before starting to replace the textarea with KTML Lite. Extensions can vary from small HTML programs to complex Java applications. an accessory to Dreamweaver. they’ll put the Word knowledge to good use. . as the textarea will turn into something much friendlier – a HTML online editor. the biggest repository for extensions on the web. You can find a lot of extensions on the Dreamweaver Exchange [LINK: http://www.Now it’s time to make the staff that will work to update the site happy.cfm].php page. Just run them and Extension Manager will initiate the installation. Their purpose is to reduce areas of manual coding. Extensions are usually delivered as executable MXP files. and minimize repetitive tasks in order to increase productivity. Open the edit. Instead of learning HTML. make sure you have the extension installed.macromedia. You can install and manage extensions using Macromedia Extension Manager. An extension is a tool that can be added to Dreamweaver to bring greater functionality and enhance its capabilities. The steps to follow in order to enhance the page are: 1.com/cfusion/exchange/index.

In the Application panel click the Server Behaviors tab to open it. 3. buttons. 4. . toolbars. security permissions and more..2. The KTML 4 Lite server behavior has four sets of options that you can use to configure the editor to suit your needs: editor size. Click on the textarea to select it. In the Server Behaviors tab click the Plus (+) button > KTML 4 > KTML 4 Lite Figure 33 Apply the KTML 4 Lite Server Behavior 5.

These are the dimensions. use the same CSS stylesheet as the rest of the site. To maintain consistency. In the Basic tab set primary editor options: Figure 34 Configure the Basic options a.css.6. For the Height enter 500. c. In the Files upload folder and Media upload folder text boxes you can specify where the uploaded files will be stored. The KTML editor allows you to format content using CSS styles. . b. These folders will be automatically created for you when first accessed. Leave these settings at their default values. KTML allows users to upload images. So click the Browse button and select the CSS file in the site root: mm_travel2. of the editor area. d. in pixels. In the Apply to field drop-down menu select the form field to replace. the one that comes with the Starter Page you used. that is. In the Width text box enter 650. movies and documents on the server and insert them in their pages.

In the Show toolbar drop-down menu select “On load”. f. b. the Toolbars tab. In the Toolbar presets drop-down menu you can select what predefined configuration of buttons you want to use. Using the grid you can add or remove toolbars from the current configuration. the toolbar will be displayed as soon as the editor loads. In the Show property panel drop-down menu select “Yes”. Configure what toolbars and buttons are displayed: Figure 35 Configure the editor toolbars a. For each selected toolbar you can use the checkboxes to display or hide buttons. 7. Next. This way.e. .

8. In the Strip server location select whether the full server path will be used for links or not. b. In the Allowed document types and Allowed media types lists. c. In the Security tab define file upload restrictions: Figure 36 Configure security settings a. In the Maximum file size text box you can enter the maximum allowed size for uploaded files. specify the file extensions that can be uploaded to the server. .

When done configuring all options click OK to close the user interface and apply the changes.9. 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: .

images and tables. for inserting form elements or links. This way. The options displayed vary based on the selected element. Now you have finished with the hard work.Figure 38 Edit the destination details visually! The KTML editor workspace consists of the toolbar section – on top. allowing more in depth settings. the main editing area and the Property Inspectors area. . Then click Edit content to load the editor. During this section you will learn how to: • Insert an image • Apply text formatting • Create links To complete this section. 1. Load the Travel Agency homepage in a browser. 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. The Property Inspector area will display additional options for supported elements. you will learn how to use some of the editor’s features. and you can have a little fun editing the demo destination. for text formatting. you only need your web browser – everything can be edited online. editing. There are several toolbars available in KTML. Hovering the mouse over each button will display a quick tip on its function.

First click on the image and press the delete button to remove it. 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. Next you will replace the default image with a new one. 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. 4.2. Then click the Insert Image button in the KTML toolbar: Figure 41 Click the icon to access the Remote File Explorer . The first step is to style the title.

click the Browse button to select one or more files on the disk that will be uploaded to the server. After the Remote File Explorer loads. 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 . To insert the uploaded image.5.

Simply select the text you want to change. Figure 44 Click the toolbar button to apply formatting 8. Creating links is just as easy. and press the corresponding button to make the text italic. First you select the text to turn into a link and then click the Insert Link button: Figure 45 Insert a new Hyperlink . To apply formatting to the text you can use the text formatting toolbar options.7. bold or underlined.

All extra tags added by Word will be automatically removed when pasting. Microsoft Word adds some specific markup that makes the HTML code difficult to read and work with. hyperlink and image insertion – users can insert and format tables. manage them using the integrated file explorer. upload documents.9. . create links to them. If you want to replace the text you can simply copy it from a word document. or even create HTML forms. To save the changes that you made click the Update Record button. 11. In the dialog box that loads enter the desired URL: Figure 46 Enter the hyperlink URL 10. 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. Next click OK and the link has been created: Figure 47 New link in the editor.

and a page to add new destinations. Enhance the page for adding destinations by replacing the textarea with KTML Lite. Before you can call the application complete. Create a login form. XHTML clean-up and even a remote image editor.KTML also comes with a more advanced version featuring advanced Property panels for images. . tables. For the list you have to create a recordset and use a dynamic table. and set the Edit content link to be displayed for logged in users only. You can find a good tutorial on how to do this here [LINK: http://www.macromedia.com/devnet/dreamweaver/articles/auth_users.html] 2. You can find out more about the full version here [LINK: http://www. while for the page to add destination you will use the Insert Record Form Wizard in Dreamweaver. Implement a User Authentication system using Dreamweaver server behavior. 3. Create a page that lists all travel destinations. as shown above. 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.interaktonline. spellchecking. form elements and virtually any element in the editor. there are several things you should do: 1.com/Products/Online-HTMLEditor/KTML-for-Dreamweaver/VersionComparison/?from=mm_ktml4].