Understand web applications

The user interface has been simplified in Dreamweaver and later. As a result, you may not find some of the options described in this article in Dreamweaver and later. For more information, see this article.

A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page is determined only when the visitor requests a page from the web server. Because the final content of the page varies from request to request based on the visitor’s actions, this kind of page is called a dynamic page.

Web applications are built to address a variety of challenges and problems. This section describes common uses for web applications and gives a simple example.

Common uses for web applications

Web applications have many uses for both site visitors and developers, including the following:

• Let visitors find information quickly and easily on a content-rich website.

  This kind of web application gives visitors the ability to search, organize, and navigate content as they see fit. Examples include company intranets, Microsoft MSDN (www.msdn.microsoft.com), and Amazon.com (www.amazon.com).

• Collect, save, and analyze data provided by site visitors.

  In the past, data entered in HTML forms was sent as e‑mail messages to employees or CGI applications for processing. A web application can save form data directly into a database and also extract the data and create web-based reports for analysis. Examples include online banking pages, store check-out pages, surveys, and user-feedback forms.

• Update websites that have constantly changing content.

  A web application frees the web designer from continually updating the site’s HTML. Content providers such as news editors provide the web application with content, and the web application updates the site automatically. Examples include the Economist (www.economist.com) and CNN (www.cnn.com).

Web application example

Janet is a professional web designer and longtime Dreamweaver user responsible for maintaining the intranet and Internet sites of a medium-sized company of 1000 employees. One day, Chris from Human Resources comes to her with a problem. HR administers an employee fitness program that gives employees points for every mile walked, biked, or run. Each employee must report his or her monthly mile totals in an e‑mail to Chris. At the end of the month, Chris gathers all the e‑mail messages and awards employees small cash prizes according to their point totals.

Chris’s problem is that the fitness program has grown too successful. So many employees now participate that Chris is inundated with e‑mails at the end of each month. Chris asks Janet if a web‑based solution exists.

Janet proposes an intranet-based web application that performs the following tasks:

• Lets employees enter their mileage on a web page using a simple HTML form

• Stores the employees’ mileage in a database

• Calculates fitness points based on the mileage data

• Lets employees track their monthly progress

• Gives Chris one-click access to point totals at the end of each month

  Janet gets the application up and running before lunchtime using Dreamweaver, which has the tools she needs to build this kind of application quickly and easily.

How a web application works

A web application is a collection of static and dynamic web pages. A static web page is one that does not change when a site visitor requests it: The web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.

For example, you could design a page to display fitness results, while leaving certain information (such as employee name and results) to be determined when the page is requested by a particular employee.

The next sections describe how web applications work in greater detail.

Process static web pages

A static website comprises a set of related HTML pages and files hosted on a computer running a web server.

A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a visitor clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’s address text box.

The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:

Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.

Strictly speaking, a “static” page may not be static at all. For example, a rollover image or Flash content (a SWF file) can make a static page come alive. However, this documentation refers to a page as static if it is sent to the browser without modifications.

When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as the following example shows:

In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.

Process dynamic pages

When a web server receives a request for a static web page, the server sends the page directly to the requesting browser. When the web server receives a request for a dynamic page, however, it reacts differently: It passes the page to a special piece of software responsible for finishing the page. This special software is called an application server.

The application server reads the code on the page, finishes the page according to the instructions in the code, and then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:

Access a database

An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see www.adobe.com/go/learn_dw_dbguide.

Using a database to store content allows you to separate your website’s design from the content you want to display to site users. Instead of writing individual HTML files for every page, you only need to write a page—or template—for the different kinds of information you want to present. You can then upload content into a database and then have the website retrieve that content in response to a user request. You can also update information in a single source, and then populate that change throughout the website without having to manually edit each page. You can use Adobe Dreamweaver to design web forms to insert, update, or delete data from the database.

The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database language called SQL (Structured Query Language). The SQL query is written into the page’s server-side scripts or tags.

An application server cannot communicate directly with a database because the database’s proprietary format renders the data undecipherable in much the same way that a Microsoft Word document opened in Notepad or BBEdit may be undecipherable. The application server can communicate with the database only through the intermediary of a database driver: software that acts like an interpreter between the application server and the database.

After the driver establishes communication, the query is executed against the database and a recordset is created. A recordset is a set of data extracted from one or more tables in a database. The recordset is returned to the application server, which uses the data to complete the page.

Here’s a simple database query written in SQL:

This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see www.adobe.com/go/learn_dw_sqlprimer.

The following example shows the process of querying a database and returning data to the browser:

You can use almost any database with your web application, as long as the appropriate database driver for it is installed on the server.

If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL.

If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.

Author dynamic pages

Authoring a dynamic page consists of writing the HTML first, and then adding the server-side scripts or tags to the HTML to make the page dynamic. When you view the resulting code, the language appears embedded in the page’s HTML. Accordingly, these languages are known as HTML embedded programming languages. The following basic example uses ColdFusion Markup Language (CFML):

note: CFML support is removed from Dreamweaver and later.

The embedded instructions on this page perform the following actions:

The application server returns the following page to the web server:

The web server sends the page to the requesting browser, which displays it as follows:

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

You choose a scripting or tag-based language to use depending on the server technology available on your server. Here are the most popular languages for the server technologies supported by Dreamweaver:

Dreamweaver can create the server-side scripts or tags necessary to make your pages work, or you can write them by hand in the Dreamweaver coding environment.

Web application terminology

This section defines frequently used terms relating to web applications.

Software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see How a web application works.

Common application servers include ColdFusion and PHP.

A collection of data stored in tables. Each row of a table constitutes one record and each column constitutes a field in the record, as shown in the following example:

Software that acts as an interpreter between a web application and a database. Data in a database is stored in a proprietary format. A database driver lets the web application read and manipulate data that would otherwise be undecipherable.

(DBMS, or database system) Software used to create and manipulate databases. Common database systems include Microsoft Access, Oracle 9i, and MySQL.

The operation that extracts a recordset from a database. A query consists of search criteria expressed in a database language called SQL. For example, the query can specify that only certain columns or only certain records be included in the recordset.

A web page customized by an application server before the page is sent to a browser.

A set of data extracted from one or more tables in a database, as in the following example:

A database containing more than one table, with the tables sharing data. The following database is relational because two tables share the DepartmentID column.

The technology that an application server uses to modify dynamic pages at runtime.

The Dreamweaver development environment supports the following server technologies:

• Adobe® ColdFusion®

• Microsoft Active Server Pages (ASP)

• PHP: Hypertext Preprocessor (PHP)

  You can also use the Dreamweaver coding environment to develop pages for any other server technology not listed.

A web page that is not modified by an application server before the page is sent to a browser. For more information, see Processing static web pages.

A website that contains pages with partly or entirely undetermined content. The final content of these pages is determined only when a visitor requests a page from the web server. Because the final content of the page varies from request to request based on the visitor’s actions, this kind of page is called a dynamic page.

Software that sends out web pages in response to requests from web browsers. A page request is generated when a visitor clicks a link on a web page in the browser, selects a bookmark in the browser, or enters a URL in the browser’s address text box.

Popular web servers include Microsoft Internet Information Server (IIS) and Apache HTTP Server.