dreamweaver cs5 all in one for dummies phần 8 pps

Chapter 4: Collaborating Online with InContext EditingIn This Chapter ✓ Understanding editing with InContext ✓ Creating and managing editable regions ✓ Connecting to an InContext site ✓

Using Dreamweaver to Edit a Contribute Site

As Administrator, you can perform some tasks in both Dreamweaver and Contribute Some tasks, however, you should do only in Dreamweaver Make any robust changes to a Contribute site, such as modifying a template or CSS, in Dreamweaver to maintain the integrity of the site’s design

Updating templates in a Contribute site

Contribute users can’t change a Dreamweaver template, and that’s a good thing because they’re typically not Web designers If a template needs editing, you need to do it in Dreamweaver What part of a template might you need to edit? Perhaps you need to remove a navigation button from the layout or edit some text that appears on every page Or maybe you need to overhaul the site design, with all new graphics, while keeping the overall content intact

If you remove or rename an editable region from a template, Contribute users may not know what to do with the content from the old editable region To avoid confusion, try to make changes to the templates before

or after normal business hours and be sure to have Contribute users close down and relaunch their Contribute programs before making new changes

to the site Contribute users can get new remote server information to their local computers only by closing and relaunching Contribute

To edit a Dreamweaver template used in a Contribute site, follow these steps:

1 In Dreamweaver, open, edit, and save the Contribute site template.

Find out more about templates in Book III, Chapter 2

2 Tell the Contribute users about the change so that they can close and

restart their Contribute programs.

Restarting Contribute enables Contribute users to access the site with the most recent documents and templates

Editing style sheets in a Contribute site

Making sure that the look and feel of a site stays under tight control is important in any Web design scenario Contribute users aren’t allowed to change the contents of style sheets, which means that you don’t have to worry about style sheets being messed up by anyone but you and any other Dreamweaver users on the team

As with any site using style sheets, when you delete a style, the tag to apply that style to a particular word, sentence, or paragraph still resides in the code of the Web pages This discrepancy may confuse your Contribute users To quickly remove or rename style tags from an entire site, use Dreamweaver’s Find and Replace tool (see Book II, Chapter 2)

Using Dreamweaver to Edit a Contribute Site

Book VI Chapter 3

Follow these steps to edit a style in a Contribute site through Dreamweaver:

1 Use Dreamweaver’s style sheet editing tools.

You have a variety of options You can use the CSS Styles panel, use the Attributes panel (on the Tag Inspector), or edit the CSS code by hand

See Book III, Chapter 1 for information on using CSS in Dreamweaver

2 Tell the Contribute users about the change so that they can publish

and reedit pages with the newest version of the style sheet.

Better yet, tell users to restart Contribute so they can access all the site pages and assets with the most recent versions of everything

Using Dreamweaver to Edit a Contribute Site

590 Book VI: Working Collaboratively

Chapter 4: Collaborating Online with InContext Editing

In This Chapter

✓ Understanding editing with InContext

✓ Creating and managing editable regions

✓ Connecting to an InContext site

✓ Logging in to InContext

✓ Inviting users to an InContext site

✓ Updating pages with InContext

✓ Finding InContext Help

Recently, Adobe developed an online application called InContext Editing, or ICE, that helps Web designers and developers work more effectively among themselves and with their clients across the Internet

Unlike Adobe Contribute, which is a software-based tool that helps Web designers and developers manage the activity of several teams of con-tent providers for individual Web sites (see Book VI, Chapters 2 and 3), InContext Editing is a browser-based Web page editing service that puts the power of site management in the hands of content contributors Without having to purchase and install additional software, designers and develop-ers can now create Web sites in Dreamweaver that are easily editable by their clients through the InContext browser interface Even better, InContext Editing requires no prior knowledge of HTML or Web editing, making it the ideal content management solution for Web site owners

In the future (perhaps as soon as early 2011), access to the service may involve paying Adobe a nominal monthly fee of $10 to $20 for unlimited usage and access to Adobe BrowserLab For now, however, InContext Editing is offered as a free service to registered members

In this chapter, you find out how to create Web sites with editable InContext regions, configure pages with special text editing features, and upload the site to the live server After that, you discover how to log in to the ICE Web site; set up Editor, Publisher, and Administrator privileges; and send invita-tions to content providers The chapter ends with a list of helpful online resources about ICE for you and your customers

Creating and Managing Editable Regions

To create InContext editable Web sites, designers and developers simply build pages in Dreamweaver as they normally would, and then customize those pages with easily definable InContext editable regions These regions become the parts of the page that you want contributors to be able to edit

After the pages are published online, clients and in-house contributors have the opportunity to maintain site content from any major browser without disrupting the integrity of the overall Web site design Suppose, for exam-ple, you have a board member page with names, contact information, and photos for each member You can easily set each component as an editable region so that when contributors log in to ICE they can easily update the data directly through their browser

Before you begin, keep in mind that InContext Editing has some limitations and will not work properly under specific conditions For example, Adobe AIR doesn’t support ICE For a list of known network, browser, page, and editing limitations, visit www.adobe.com/go/incontextediting_limitations

You can create ICE editable regions in Dreamweaver in two ways:

✦ Automatic editable regions: When creating new blank HTML pages using

one of Dreamweaver’s built-in CSS layouts, select the Enable InContext Editing option in the New Document dialog box When the new page is cre-ated, the area in that file using <div id=“content”> </div>

(in CS4, content was called mainContent) is automatically marked as

an ICE editable region

✦ Manual editable regions: You can manually insert an ICE editable region

anywhere on your page by selecting the content or region on the page that you want to become editable For instance, you could select an image, a cell in a table, an editable region in a template, or the contents

of an entire layer

In addition to adding ICE editable regions in Dreamweaver, you may add these regions to an existing page after logging in to InContext Editing at http://incontextediting.adobe.com/

You can insert two kinds of ICE editable regions in your pages: regular able regions and repeating regions

edit-Creating editable regions

To create an ICE editable region in Dreamweaver, follow these steps:

Creating and Managing Editable Regions

Book VI Chapter 4

593

1 Open in the Dreamweaver workspace the page to which you want to

add ICE editable regions.

Editable regions must be created one at a time, one page at a time When working with Dreamweaver templates, any ICE editable regions in the tem-plate will produce identical ICE editable regions in the template-based files

If you are starting from a new blank page, you must save the page before adding the ICE editable regions

When adding an editable region to a template or a template-based file, the ICE editable region must be in a Dreamweaver template editable region

2 In Design view, select the area you want to convert to an ICE editable

region.

To select the parent container of a selection, use the Tag Selector

3 Choose Insert ➪InContext Editing➪Create Editable Region.

You can also click the Create Editable Region option in the InContext Editing category of the Insert panel Depending on what you selected in Step 2, one of the following happens:

• If you selected a DIV, TH, or TD tag: Dreamweaver converts the

selec-tion to an editable region by applying the ice:editable attribute, as in

<div id=”header” ice:editable=”*”>

<h1>Welcome</h1>

</div>

• If you selected a tag other than DIV, TH, or TD: Dreamweaver opens

a Create Editable Region dialog box that provides the option for you

to Wrap the Current Selection with a DIV Tag and Then Transform It

Click the OK button for Dreamweaver to convert the selection to an editable region by wrapping the selection with a <div> tag with the ice:editable attribute

• If you selected a Dreamweaver template editable region:

Dreamweaver wraps the editable region with a <div> tag with the ice:editable attribute Note: This method may produce unwanted page CSS rendering results

• If you selected content but not a tag: Dreamweaver prompts you to

wrap the selection with a <div> tag with the ice:editable attribute

4 In Design view, select the ICE editable region’s blue tab In the

Properties inspector, select the formatting elements that will remain editable for content contributors.

Formatting options (see Figure 4-1) are Bold, Italic, Underline, Alignment, Font Face, Font Size, Indent/Outdent, Numbered/Bulleted Lists,

Paragraph Styles, Background Color, Font Color, and CSS Styles, as well

as providing the ability to insert and edit Image/Media files and Links

To select all items, click the Check all button To deselect all items, click the Uncheck all button

Creating and Managing Editable Regions

When you create a new editable page or insert an editable region for the first time, Dreamweaver adds a folder containing a set of dependent files

to the root level of your managed site Inside this folder is another folder containing two script files and one HTML file: includes/ice/ice.conf

js includes/ice/ice.js, and includes/ice/ide.html You must upload this folder and all these files when you upload your page to the live server for InContext Editing to work properly

Figure 4-1:

Choose formatting options for your ICE editable region in the Properties inspector

BoldItalicUnderlineAlignmentFont FaceFont SizeIndent/OutdentNumbered/Bulleted ListParagraph StylesBackground ColorFont ColorCSS StylesImage/Media Link

Creating and Managing Editable Regions

Book VI Chapter 4

595

Creating repeating regions

Repeating regions define a part of the page that can be both editable and

repeated in the page, such as with a row of data in a table or a layer ing a heading, text, and graphics When the page is opened in the InContext Editing browser, each repeating region can be duplicated, moved up or down, or deleted from the page Figure 4-2 shows how a repeating region looks in the InContext Editing browser

attri-tag (or the parent container’s attri-tag) with the ice:repeatinggroup attribute

When creating repeating regions in a Dreamweaver template, the repeating region must be inside an editable region

To create an ICE editable repeating region in Dreamweaver, follow these steps:

1 Open the desired page and select the area to be converted to a

2 Choose Insert ➪InContext Editing➪Create Repeating Region.

You can also select the Create Repeating Region option in the InContext Editing category of the Insert panel Depending on what you selected in Step 1, one of the following happens:

• If you selected a transformable tag: Dreamweaver converts the

selection to a repeating region

• If you inserted a region without a selection: You can insert the

repeating region there or choose to transform the parent tag closest

to your insertion point into the repeating region

• If you selected a Dreamweaver template editable region:

Dreamweaver wraps the editable region with a <div> tag with

the ice:repeating attribute Note: This method may produce

unwanted page CSS rendering results

• If you selected content but not a tag: Dreamweaver prompts you to

either transform the parent tag of the content or wrap the selection with a <div> tag with the ice:repeating attribute

3 In Design view, select the Repeating Region’s blue tab In the

Properties inspector, select the Repeating Regions Group options that will remain editable for content contributors.

Options are Reorder, which allows editors to reposition the region above or below other regions in the group, and Add/Remove, which lets editors add or remove regions in the group Both options are selected

by default, and you must always have at least one option selected

When you create a new editable page or insert an editable region for the first time, Dreamweaver adds a folder of supporting files to the root level

of your managed site: ice.conf.js, ice.js, and ide.html You must upload your page and this folder to the live server for InContext Editing to work properly

Deleting editable regions

For best results, use the Properties inspector to delete regions This way, you are assured of having Dreamweaver delete all the code associated with the region

To remove a region, follow these steps:

1 In Design view, select the region to be deleted by its blue tab.

You may select an editable region, a repeating region, or a repeating regions group

Creating and Managing Editable Regions

Book VI Chapter 4

597

2 In the Properties inspector, click the Remove Region button.

Dreamweaver alerts you that the region will be removed but the content

within it will stay on the page

3 Click OK to remove the region, or Cancel to cancel the action.

Occasionally, you may encounter an error message when attempting to create ICE editable regions in your Dreamweaver files For a complete listing

of common errors, visit http://help.adobe.com/en_US/dreamweaver/

CS/using/WSDD8EB85D-905A-495d-A743-7CF9002372EA.html#WSCF97C2E7-14BA-4a1d-947C-26A00A7A59EA

Preparing a Site for Use with InContext Editing

After you have uploaded all your ICE editable pages along with the folder of dependent files (includes/ice/) created by Dreamweaver to the live server, the next step is for you to log in to the InContext Editing Web site to config-ure the site for InContext users

To log in to InContext Editing, follow these steps:

1 Go to http://incontextediting.adobe.com/ to open the

InContext Editing page in your browser.

The Sign In window appears

2 Sign in with your Adobe ID, and then click Enter.

The Add New Site? dialog box appears

3 In the Add New Site? dialog box, click Add Site to add your site to

your account.

4 Follow the prompts to input the Site Name and Site Address (URL)

Click Next to proceed.

5 Enter your FTP access information, including FTP Host, Username,

and Password.

If you don’t have the FTP access information, get it from the host provider

6 Click the Test Connection button.

If you have entered your information correctly, your connection will be successful If you get an error message, check for spelling and letter case errors and test again If you still can’t establish a connection, speak with your host provider or systems administrator

7 When your connection is established, click the Next button to proceed.

Preparing a Site for Use with InContext Editing

8 (Optional) Enter information for the Host Directory, Media Directory,

and Default page:

• Host directory: This directory is not a standard feature on every

hosted site If you have a host directory, click the Browse button to select the appropriate directory Otherwise, leave this field blank

• Media directory: This directory is the location where you will store

media for this site, such as an folder named images Click the Browse button to select the desired folder

• Default page: This page is the index.html or default.html page Enter

the filename of the default page here If you are using a programming language on your site, the file extension may be different, such as cfm or php

9 Click Save to save your site information.

It may take a few moments for InContext Editing to process your information When the account has been officially created, you see a Congratulations screen From here, you may either edit the site or invite users

Inviting Users to the Site

To invite an editor or publisher to your site, click the Edit button and follow the prompts to add an Invitee Name and Email address You may also specify whether this invitee will have Editor or Publisher privileges If you would like a copy of the invitation to be sent to you, select the Send Me a Copy of the Invitation option Click the Invite button to send out the invita-tion Invitations are valid for up to 30 days; you my cancel an invitation at any time by selecting it in the Manage Users panel and clicking the Delete Invitation button

Updating Pages with InContext Editing

When invited content contributors are ready to modify a page, all they need to do is navigate to the desired page in a browser and press Ctrl+E (Windows) or Ô+E (Macintosh) to sign in to the InContext Editing service for that page

Inviting Users to the Site

Book VI Chapter 4

InContext Editing is a remarkable tool Learning to use the InContext Editing service is intuitive and straightforward, but some users may want additional training For general help and instruction with your Adobe InContext Editing Web projects, visit, www.adobe.com/products/incontextediting/

For additional training help, check out these resources:

✦ www.adobe.com/newsletters/edge/february2009/articles/

article5/index.html ✦ http://tv.adobe.com/watch/learn-dreamweaver-cs4/

introducing-adobe-incontext-editing/

✦ www.adobe.com/devnet/dreamweaver/articles/getting_

started_with_ice_dev.html ✦ www.adobe.com/devnet/dreamweaver/articles/ice_product_

catalog_04.html

Updating Pages with InContext Editing

600 Book VI: Working Collaboratively

Book VII

Building Web Applications

Contents at a Glance

Chapter 1: Preparing to Build Web Applications Chapter 2: Configuring MySQL Database Connections for PHP Chapter 3: Configuring ASP Database Connections

Chapter 4: Configuring ASP.NET Database Connections Chapter 5: Configuring JSP Database Connections Chapter 6: Configuring ColdFusion Database Connections Chapter 7: Dealing with Database Problems and Other Gotchas

Chapter 1: Preparing to Build Web Applications

In This Chapter

✓ Selecting a Web application platform

✓ Installing an application server

✓ Analyzing your choices for Web and application servers

✓ Defining Testing server settings in Dreamweaver

✓ Choosing a database

From Web site to Web app: That’s the transformation that many Web

developers find themselves dealing with as the needs of their Web sites expand over time A typical scenario goes something like this: At the start,

a company is content to create a static site presenting its products and vices Over time, however, the company realizes that their Web site could

ser-be far more useful to their customers if they offered more interactive and dynamic content, so they transform their static site into a full-scale Web application

The first challenge when planning how to build applications from Web pages is choosing a set of tools to use This chapter explores various Web application platforms and application servers and how to choose the right ones for your needs We also touch on various languages, such as PHP, ASP, JavaServer Pages (JSP), and ColdFusion, that work hand-in-hand with the application server when generating your dynamic Web pages Finally, this chapter gives you the lowdown on designing your database and choosing the right database application

Understanding Web Applications

A basic Web site consists of HTML pages and related assets (images, CSS style sheets, and so on) After you place this set of files on a Web server, each file can be accessed by a browser through a unique URL Because the content that the user sees is already contained in the HTML files, no further processing is necessary beyond sending the page to the browser to be dis-played (see Figure 1-1)

Figure 1-1:

Basic Web site architecture

Webserver

popu-in turn calls the PHP application server to process the php file When the app server has finished doing its magic, it sends a dynamically generated document to the browser to be displayed (see Figure 1-2) To the user, the dynamic document still looks like a normal Web page—but the way in which

it goes to the browser is altogether different

Figure 1-2:

Basic Web application

Webserver

Understanding Web Applications

Book VII Chapter 1

605

Choosing a Web Application Platform

Web application platforms (or application servers) run behind the scenes on the Web server The application server supports the processing of your Web pages, acting as a helper to the Web server for processing the code that’s part of the requested pages

Dreamweaver CS5 allows you to create pages and sites that can be grated in a variety of Web application platforms, including PHP, ASP, ASP

inte-NET, and JSP Each of these languages corresponds to a Dreamweaver ment type (such as php, aspx, or jsp)

docu-If you’re already familiar with one of these languages, choose that one docu-If they’re all new to you, PHP and ASP are popular choices You can find plenty

of help and sample code on the Web for both of them

Choosing a Web Server

Before you can develop Web services, you need to choose the ing server technology The two popular choices are Microsoft Internet Information Services (IIS) and Apache As discussed in this section, your decision will often be based on where you plan to host the server

underly-Hosted sites

If your Web site is hosted by a Web hosting provider, you are already using IIS or Apache Many ISPs even allow you to choose between Unix/Apache or Microsoft IIS server plans

If you’re still in the process of selecting a hosting company for your Web site, or if you want to test your Web application pages on your computer without uploading them to a remote server, compare the pros and cons of using the IIS Web platform versus the Apache Web platform

For Web designers and developers, the major platform decision usually boils down to programming language and database support Microsoft platform

is the best choice for ASP and ASP.NET, whereas Apache is ideal for PHP and JSP

When working with hosting sites, Dreamweaver enables you to generate

a Web service proxy that allows the Web page to communicate with the

Web service publisher The proxy, also known as an abstraction class,

con-tains the fields, methods, and properties of the Web service and makes them available to the locally hosted page When you generate a proxy for your page, Dreamweaver lets you view it in the Components panel (choose Window➪Components to open the panel)

Choosing a Web Server

Hosting your own site

If you’re hosting the server on your own machine (either for testing or live purposes), you’ll want to want to explore two options, Apache and IIS

Apache

Apache server is the most popular Web server It’s an open-source product,

so it’s free to download and use Apache works well with PHP and JSP, which

we talk about later in the chapter

If you’re running Windows, you can download the latest Apache version at http://httpd.apache.org

If you’re using Mac OS X and want to run your Web application files locally, you already have Apache installed To enable it, you simply pop over to your System Preferences tool, as described in the following steps:

1 From the Apple menu, choose System Preferences.

The System Preferences application in Mac OS X controls the tion of your system, including optional components such as Apache

2 Click the Sharing icon.

The Sharing panel tells OS X which services your computer provides, including Apache and file sharing

3 In the Service list, select the check box next to Web Sharing.

Web sharing is turned on, as shown in Figure 1-3 You’re all set to start using Apache

Figure 1-3:

Turning on the Apache server

Choosing a Web Server

Book VII Chapter 1

Some editions of Windows 7 install IIS 7.0 by default If your edition doesn’t, you can select it among the list of optionally installed components

Additionally, not all editions of Windows 7 provide support for ASP and ASP.NET

When you run IIS 7.x on Windows 7 or Vista, it restricts performance based

on the number of simultaneous Web page requests but does not limit the number of connections In contrast, for older systems, Windows XP’s more restricted version of IIS 5.1 allows you to host one Web site and supports only 10 simultaneous connections

In general, the version of Windows you’re running determines which version

of IIS you can run

To install or verify that IIS is installed on your Windows 7 or Vista computer, follow these steps:

1 Choose Start ➪Control Panel➪Programs.

2 Click the Turn Windows Features On or Off link.

You’ll need to confirm this action The Windows Features dialog box is displayed

3 If Internet Information Services is already selected, you’re all set

and can cancel out of the you’re all set Click the Cancel button

Otherwise, select the option and then click OK to install IIS.

To install or verify that IIS is installed on your Windows XP computer, follow these steps:

1 Choose Start ➪Control Panel➪Add/Remove Programs or choose

Start ➪Control Panel and double-click the Add/Remove Programs icon.

You see the same dialog box that you’ve probably used to remove software

Typically, computers have two IP addresses:

the public one, such as 128.34.34.34, and the

localhost address, which point to a special IP

address, 127.0.0.1 For Web users at large to access your Web pages, they must reference the external address

A special host

Choosing a Web Server

2 In the Add or Remove Programs window, click the Add/Remove

Windows Components icon.

You are telling Windows that you want to change which Microsoft ponents (including IIS) are installed The Windows Components Wizard appears

3 If the Internet Information Services option is selected, IIS is already

installed and you can skip Step 4.

4 If the Internet Information Services option is not selected:

a Select the Internet Information Services (IIS) option.

Windows tells you approximately how much space you need to install IIS

Choosing an Application Server

Perhaps the most critical decision you will make as you begin developing Web applications is choosing the application server, because the actual pro-gramming you do is based on your choice This section presents the major options to consider

PHP

PHP is an open-source programming language and application server that

is built for creating Web applications It works well with many databases, including the popular open-source database MySQL

It supports all major operating systems, including Windows, Mac OS X, and Linux It integrates with either IIS or Apache to form a PHP application server For Apache, it’s loaded as an Apache module For IIS, it’s loaded as

an ISAPI add-on

Many ISPs come with preinstalled support for PHP, whereas others require you to configure it manually on your server If you’re installing it on your own computer, follow the instructions in this section for Windows and Mac

OS X

Choosing an Application Server

Book VII Chapter 1

After you download the file, follow these steps to install PHP:

1 Double-click the msi file.

2 Click Next to install.

3 Agree to the license terms by clicking I Accept, and then click Next.

4 Click Next to accept the default installation directory of C:\Program

Files\PHP.

5 Select a Web server setup.

6 Select the items to install, and then click Next.

The standard install uses default values for many of the settings You can use the defaults without problems

7 To begin the installation, click Install.

8 If the IIS Has Been Configured dialog box appears, click OK.

This dialog box appears only if you didn’t select IIS as your HTTP server

9 Click Finish in the Installation Complete dialog box.

Mac OS X setup

Mac OS X includes the files necessary to run PHP, but those files require manual editing that’s quite tedious for most users To enable PHP support for Mac OS X without messing around with your system files, visit www

entropy.ch/software/macosx/php and then follow these steps:

1 Download an installer file for Mac OS X based on the version of Mac

OS X you’re running.

2 The Mac installer file is a dmg disk image Double-click the dmg file.

The Mac mounts the disk image and displays a drive icon with the files

3 When you see the installer package, double-click it and follow the

Active Server Pages (ASP)

Active Server Pages (ASP) is designed to work with the IIS Web platform

Dreamweaver CS5 supports building ASP code that can stand alone or be modified outside Dreamweaver

ASP aims to make Web application development as easy as possible by grouping common tasks into objects These objects are Application, ASPError, Request, Response, Server, and Session objects The ASPError object, for example, provides functions for handling errors

ASP pages use JavaScript or VBScript as the programming language

Dreamweaver knows what code to put in regardless of which language you choose

devel-You can download ASP.NET and related toolkits at http://asp.net

Java Server Pages (JSP)

JSP uses the Java language and processor to deliver Web-based applications

JSP pages are different from other pages because they’re compiled into byte

code by the JSP compiler These compiled JSP pages are called servlets.

Apache Jakarta Tomcat is the servlet container used for both the Java let and JSP technologies Apache Jakarta Tomcat is an open-source applica-tion that helps develop large-scale, high-traffic Web applications

serv-Jakarta Tomcat is available from http://tomcat.apache.org If you’re using Windows, download the core Windows executable installer For Mac

OS X, visit http://developer.apple.com/internet/java/tomcat1

html to find instructions on installing the Mac OS X binaries of Tomcat

Other commercial JSP application severs are

Book VII Chapter 1

Considering Web/Application Server Combinations

Although the Web platforms and application servers described in this ter offer similar capabilities, they differ slightly in how they process Web application pages that contain code The differences are in the location of the additional files and the URL to access these files

chap-The Web root folder for your application varies depending on the Web form you choose and what your ISP dictates as the Web root You want to create a directory in your Web root folder for each Web application you build

plat-Table 1-1 lists the default Web root folder and base URLs for each tion of Web platforms and application servers

Web Server Default Web Root Default Base URLApache on

tomcat-4.x.x\

You can verify that you have the correct Web root setup by placing a sample file in the Web root directory and then navigating your browser to the base URL An example of a test file is a file called index.html that contains the following:

Setting Up the Testing Server in Dreamweaver

You can set up a testing server in Dreamweaver to indicate how to process Web application pages while you’re developing them Often, you simply use

a local directory if you’re using a server technology that your local Web form can process, such as IIS/ASP on Windows or Apache/PHP on Mac OS X

plat-Alternatively, you can connect to a remote staging server

Follow these steps to set up a staging server:

1 Choose Site ➪Manage Sites.

The Manage Sites dialog box appears

2 Select your site from the list, and then click the Edit icon.

If you need to create a site from scratch, see Book I, Chapter 3

3 Click the Servers item to the left of the dialog box.

The server list is displayed, as shown in Figure 1-4.

4 Click the + icon to add a new server entry.

5 A dialog box appears for configuring the server.

See Book V, Chapter 3 for complete details on how to configure a server

Setting Up the Testing Server in Dreamweaver

Book VII Chapter 1

6 In the Connect Using drop-down list, select how to get your files from

your local computer to your remote site.

Your selections are FTP, SFTP, Local/Network, WebDAV, and RDS In most testing cases, you’ll want to use Local/Network

7 In the Web URL field, enter the URL path that your testing server uses

to publish the pages.

If the testing server is on your local machine, it looks like http://

localhost/myapp (where myapp is the specific directory for your app

If the testing server is in a remote location, the URL path includes the full domain name, such as http://www.example.com/myapp

Dreamweaver assumes, by default, that both the Web server and cation server are running on the same system Therefore, if you specify

appli-a remote locappli-ation (see Book V, Chappli-apter 3), Dreappli-amweappli-aver appli-assumes thappli-at the testing server is the same URL If you don’t enter a remote category, Dreamweaver makes sure that the default testing server matches the local folder

8 Click the Advanced icon to display the Advanced settings.

9 In the Server Model drop-down list, select the server technology you

want to use (see Figure 1-5).

Your choices are None, ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, JSP, and PHP MySQL

10 Click Save to save your changes and begin using the new site.

Setting Up the Testing Server in Dreamweaver

Figure 1-5:

Setting up

a staging server

Introducing Databases

Perhaps the most common reason that many Web designers and developers have for using a Web application server is to dynamically pull data from a database and display it in a Web document

A database (or relational database) is a collection of data organized in such a

way that you can quickly add, retrieve, or modify the information For ple, Amazon.com and Facebook use enormous databases that enable users

exam-to search and navigate the immense amounts of data on their sites Creating your own database is nothing more than putting data into a logical system that stores and retrieves related information

The information in a database is organized into grid-like tables Each table

has multiple fields (or columns) and individual records in rows For example,

take a look at Table 1-2, the Employees table

At the top of the Employees table are the column (field) names: EmployeeID, FirstName, LastName, and Department The three subsequent rows contain the individual records

Introducing Databases

Book VII Chapter 1

✦ One-to-one: In a one-to-one relationship, each item is related to one and

only one other item In the Employees table, the Employee ID and the name of the employee have a one-to-one relationship Each employee has one and only one ID number, and each ID number can belong to one and only one employee

✦ One-to-many: A one-to-many relationship has keys (unique identifiers)

from one table that appear multiple times in another table Say you have

a Department table along with an Employees table The Employees table has a one-to-many relationship with the Department table A department (such as Accounting) can have many employees, but each employee can work in only one department

✦ Many-to-many: A many-to-many relationship means that two tables each

have multiple keys from another table

Your data should also conform to normalization rules (a series of

progres-sively strict rules to help you build a well-designed database):

✦ First normal form: For your database to be in first normal form, every

table must not have repeating columns that contain the same kind of data, and all columns must contain only one value

✦ Second normal form: Stricter than the first normal form, the second

normal form requires that each field be based specifically on the key

✦ Third normal form: The third normal form expands on the second

normal form by allowing no other column in the table except the key column to define any other column

If you’re interested in delving deeper into the subject of databases, we

rec-ommend that you check out Database Development For Dummies by Allen G

Taylor (Wiley)

Choosing a Database

You have many relational database choices Any of the following databases work well with Dreamweaver:

✦ MySQL (www.mysql.org): The open-source MySQL is one of the most

popular databases for Web apps Many Web hosting providers provide support for it You can download it for free and run it on a Windows, Mac OS X, or Linux machine

Unless you want to go with a Microsoft-centric solution, we recommend MySQL for its quality, ease of use, and scalability

Choosing a Database

✦ Microsoft Office Access (www.microsoft.com/access): If you’re just

getting started and are accustomed to working with Microsoft Office apps, you may want to consider using Access It’s good for establishing

a small, simple database when you’re not overly concerned about formance It’s also bundled with Microsoft Office, so it isn’t very expen-sive You may even have it installed

Some Web hosting providers provide support for Microsoft Access databases

✦ Microsoft SQL Server (www.microsoft.com/sql): The popular

Microsoft offering is SQL Server Although it is more complex than other database choices, it has the power to handle a large quantity of requests from users of your Web site

✦ PostgreSQL (www.postgresql.org) is an open-source object-relational

database that many Web hosts support You can download it to run on all major platforms, including Windows and Mac OS X

After you choose the right database for your needs, consult your database system’s documentation for details on how to create the database Book VII, Chapters 2 through 6, gives you the details on setting up PHP, ASP, ASP.NET, JSP, and ColdFusion database connections in Dreamweaver

Choosing a Database

Chapter 2: Configuring MySQL Database Connections for PHP

In This Chapter

✓ Connecting to a MySQL database

✓ Adding a database connection

✓ Editing or deleting a database connection

If you’ve decided to go the open-source route and use PHP as your cation server platform and MySQL for your database, this chapter is for you (If you haven’t set up PHP, see Book VII, Chapter 1 for details.) You’ll find the discussion helpful whether you’re working with a Web-hosted remote server or running PHP and MySQL on your local machine

appli-In this chapter, we show you how to connect to your server and create a dynamic Web page with PHP in Dreamweaver CS5 Additionally, you find out how to set up a MySQL database connection and add, edit, or delete a connection

However, before you begin, make sure that you have a Dreamweaver site created or opened that has server settings configured and operational

Dreamweaver needs this info to connect to the database

Adding a PHP Database Connection

To create a database connection in PHP to access a MySQL database, you need to create a new dynamic PHP page The database connection enables Dreamweaver to interact with the database using database connections through PHP Dreamweaver automatically adds code specific to your dynamic page type to your new dynamic page when creating a database connection

Creating a new dynamic PHP page

To create a new dynamic PHP page in Dreamweaver, follow these steps:

The New Document window appears, as shown in Figure 2-1

Figure 2-1:

Create

a new document

2 Click the PHP icon in the Page Type list.

3 (Optional) Choose a Layout in the list.

For now, feel free to leave <none> selected in the Layout column

4 Select XHTML 1.0 Transition in the DocType drop-down list.

A new dynamic PHP page is created, as seen in Figure 2-2

Figure 2-2:

A new PHP document is ready to go

Adding a PHP Database Connection

Book VII Chapter 2

619

Creating the database connection for PHP

After you create a new dynamic PHP page (as described in the preceding steps), you can connect to the database We show you how to connect to an existing MySQL database in this section However, if you’d like info on how

to get started with MySQL databases, check out www.mysql.org

Connect to an existing MySQL database by following these steps:

The Databases panel appears If you have a site open and a testing server configured, the first three steps are selected, as shown in Figure 2-3

2 Click the plus (+) icon and select MySQL Connection from the

drop-down list that appears.

The MySQL Connection dialog box appears, as shown in Figure 2-4

3 Enter a name for the database connection in the Connection Name

field.

Dreamweaver uses this name to reference your database connection

The name can contain only letters, numbers, and underscores

Figure 2-4:

The MySQL Connection dialog box

4 Enter the host name or IP address of the database server in the MySQL

Server field.

This may be a host name or IP address

If the MySQL server resides on the same system as the Web or tion server, reference it locally with the host name localhost This value applies even if you’re connecting to a remote server

5 Enter the username for the database in the User Name field.

MySQL enables you to create users and assign permissions in its based control panel See your MySQL control panel if you need to set up

Web-a user

6 Enter the corresponding password in the Password field.

7 Click the Select button.

If your settings are correct to this point, the Select Database dialog box appears with available databases, as shown in Figure 2-5

If you are using a Web hosting provider and receive an error, check to make sure that MySQL is configured to allow external IP connections

The exact instructions will depend on your particular Web host

Figure 2-5:

The Select Database dialog box

Adding a PHP Database Connection

Book VII Chapter 2

621

8 Select your database from the list, and then click OK.

The Select Database dialog box closes, and the name of the database you selected appears in the Database field of the MySQL Connection dialog box

9 Click the Test button to confirm that your connection is set up properly.

An alert box tells you whether the connection was successful

10 Click OK to close the alert box.

11 Click OK to close the MySQL Connection dialog box.

Dreamweaver creates the database connection (see Figure 2-6)

You can then click down on the outline structure to display Stored Procedures, Tables, and Views (see Figure 2-7)

Editing a PHP Database Connection

In case you change the password for your database connection or the address of your database server changes, you need to know how to update your MySQL database connection settings

To edit a MySQL database connection in PHP, follow these steps:

1 Open the Databases panel by clicking the Databases tab of the

Application panel.

2 Right-click the database connection you want to edit.

3 Select Edit Connection.

The MySQL Connection dialog box appears

4 Edit the connection properties as necessary.

5 Click the Test button to confirm that your connection is properly set

up.

An alert box tells you whether the connection was successful

6 Click OK to close the alert box.

7 Click OK to close the MySQL Connection dialog box.

Dreamweaver saves your changes to the database connection

Deleting a PHP Database Connection

To delete a MySQL database connection in PHP, follow these steps:

1 Open the Databases panel by clicking the Databases tab of the

Application panel.

2 Right-click the database connection you want to delete.

A list of options appears

When you have a php file open in the Dreamweaver editor, you have full access

to PHP code hinting To access code hinting, press Ctrl+Space (Windows) or Ô+Space

(Mac OS X) A context-sensitive drop-down list

of functions and operations is displayed When you select an item, help is displayed below the item

PHP code hinting

Editing a PHP Database Connection

Book VII Chapter 2

623

An alert box appears to confirm your deletion

cre-Deleting a PHP Database Connection

624 Book VII: Building Web Applications

Chapter 3: Configuring ASP Database Connections

In This Chapter

✓ Gathering database connection information

✓ Adding a database connection

✓ Connecting to a remote database

✓ Editing or deleting a database connection

In this chapter, we show you how to set up a database connection in ASP

(Active Server Pages) using Dreamweaver You find out how to add, edit, and delete a database connection and connect to a remote database

Before you begin, however, make sure you have the details on connecting

to your database To make a connection in ASP to a database, you need to know the following:

✦ The type of database you’re connecting to (for example, SQL Server or

Oracle) ✦ The host name of the database server or the IP address if no host name

is available ✦ The username and password to access your database

✦ The name of the database to which you are trying to connect, or the

Data Source Name (DSN)

Before starting, you need to have a site opened with a valid staging server setup, on your local computer or a remote server See Book I, Chapter 3 for more information

Understanding ASP Database Connections

Dreamweaver offers two ways to connect to a database when using ASP:

✦ Data Source Name (DSN): The DSN is a setting configured on your

appli-cation server that contains the information needed to connect to your database ASP then connects through the DSN instead of connecting directly from ASP The advantage of using a DSN is that it’s simpler than

setting up the OLE DB (Object Linking and Embedding Database) driver, described next

✦ Custom connection string: To set up a custom connection string, you

enter information about your database server, and ASP uses that tion to connect directly to your database Connecting directly to a data-

informa-base requires ASP to run a small program called a driver, which enables

ASP to speak directly with your database Because this OLE DB driver talks directly to the database, it’s faster than other drivers but requires a few extra steps (such as downloading and installing the driver)

OLE DB drivers are available for download from the provider of the database For example, Microsoft supplies Access and SQL Server OLE DB drivers as part of its MDAC (Microsoft Data Access Components) download at www.microsoft.com/downloads/

185d0506396c&displaylang=en.To download OLE DB drivers for Oracle databases, visit www.oracle.com/technology/software/

details.aspx?FamilyID=6c050fe3-c795-4b7d-b037-tech/windows/ole_db/index.html These packages come with installers that guide you through the process of installing the OLE DB driver on your computer

If your Web hosting provider supports ASP, you can connect to a Microsoft Open Database Connectivity (ODBC) DSN provided on their server

Before you can create an ASP database connection, you have to create a new dynamic ASP page so that Dreamweaver can interact with the database using database connections through ASP

Creating a New ASP Page

To create a new dynamic ASP page, follow these steps:

The New Document window appears, as shown in Figure 3-1

2 Select ASP JavaScript or ASP VBScript in the Page Type list.

This selection is based on the type of scripting enabled on your server

For this example, we selected ASP JavaScript

3 (Optional) Select a layout style in the Layout list.

We left <none> selected in this example

Creating a New ASP Page

Book VII Chapter 3

A new dynamic ASP page is created

After you create a new dynamic ASP page, you can establish the database connection

Connecting to a Database with a

Data Source Name (DSN)

To create a database connection in ASP through a DSN, follow these steps:

1 Choose Window ➪Databases to open the Databases panel, as shown in

Figure 3-2.

2 Click the plus (+) icon Select Data Source Name (DSN) in the

drop-down list that appears.

The Data Source Name (DSN) dialog box appears, as shown in Figure 3-3

Connecting to a Database with a Data Source Name (DSN)