Where are we?

On the previous page, you created a Web page and uploaded it to a server. When a Web browser asks for your home page, your Web server finds the file you uploaded to its disk drive. It then returns that file.

The file you uploaded contained HTML and a little CSS. But many server files contain programs as well. We’ll look at how that works in this lesson.

This lesson’s goals

By the end of this lesson, you should:

• Know how a Web server handles requests for PHP files.

• Know what a Web application is.

A page with a server-side program

Most of the URLs we’ve seen so far end in .html. Like http://doomdogs.com/test.html. But not all URLs end in .html.

Have a look at this page. Check out the URL. It’s:

http://coredogs.com/content_media/lessons/corecore/dynamic_pages/server_date.php

The URL ends with .php. But when your browser asks for this file, it still gets HTML. To verify that, tell the browser to show the source of server_date.php (right-click and choose View Page Source).

Part of what you’ll see is something like:

<h1>Hi there!</h1>
<p>I'm your friendly neighborhood Web server.</p>
<p>Today is July 30, 2009.</p>

Figure 1. Some HTML

The h1 tag says “make a heading”. The p tag says “make a paragraph.” The date will vary, depending on when you’re looking at the page.

But wait a minute. Do I have to edit the page every day, and change the date, to keep it current? Argh! That way lies madness!

No, I don’t edit it every day. Instead, I wrote a program that shows today’s date, and put the program inside server_date.php. The Web server runs the program when it gets a request for server_date.php.

I used the programming language PHP. Here’s what I typed into server_date.php.

<h1>Hi there!</h1>
<p>I'm your friendly neighborhood Web server.</p>
<p>Today is <?php print date('F j, Y'); ?>.</p>

Figure 2. PHP code embedded in an HTML page

Most of the page is normal HTML. When I want the server to run some PHP, I put the PHP code inside <?php ... ?>. This says to the browser:

Wait up! Got some PHP. Run it for me, 'K?

The PHP gets today’s date from the computer’s clock, and formats it. F means month name, j means day, and Y means year. print means to show something in a page.

So I don’t have to update the page every day. When someone asks for the page, the PHP code runs, and shows the date.

This is called a dynamic page, because it can change depending on conditions. Pages that don’t change like this are called static pages.

Notice that the PHP code runs on the Web server. The browser never sees the PHP code. It only gets the results, that is, the output that the PHP code creates. That’s why PHP is called a “server-side programming language.”

Handling PHP requests

How does all this work?

The URL ends in .php. This triggers the process.

We saw in a previous lesson that Apache (the Web server, remember) has a configuration file. The stuff in the configuration file tells it how to act. For example, we saw that the DocumentRoot setting tells Apache where on the disk drive Web files are stored.

On my PC, the following is in Apache’s configuration file:

LoadModule php5_module ".../php5apache2.dll"
...
AddType application/x-httpd-php .php ...

The first line tells Apache to load a module. A module is software that lets Apache do something extra. The module php5apache2.dll gives Apache the ability to execute PHP code.

Lots of programs use modules, though they might be called plug-ins, add-ons, extensions, or something else.

The AddType line tells Apache to handle files that end in .php a special way. They end up being passed through the PHP module.

Here’s how it works. Suppose Jake asked to see the page http://doomdogs.com/show-time.php.

Figure 3. Fetching dynamic pages

Jake clicks a link to the page http://doomdogs.com/show-time.php (1). The browser creates the request GET /show-time.php and sends it to doomdogs.com (2).

The server gets the request. It finds the file show-time.php on its disk drive, and reads it (3).

Because the file’s name ends in .php, the server passes show-time.php to the PHP module (4). The module runs through the file, interpreting anything in <?php ... ?> tags. The PHP module sends the results back to the server (5).

The server in turn sends the results back to the browser (6). The browser renders the results for the user (7). That is, it translates tags like <h1> to big, bold text.

Whew! That’s a lot of work. But that’s OK, because computers do the work, and computer time is cheap. All the Weber has to do is write a little bit of PHP, and it all works.

Why this matters

Dynamic pages are a Big Deal for Webers. Many of your favorite Web sites – Google, Yahoo, Amazon, CoreDogs – would be impossible without this technology.

Let’s look at a case.

Suppose Renata has a Web comic called DoomDogs. She publishes a new strip every day. She wants to interact with her readers, so she lets people add comments to each strip.

She designs her pages like this:

Figure 4. Page design

Each page has a heading at the top. This is part of her site’s branding, making sure users know where they are, and what company (or person or whatever) is giving them the comic.

Next there’s the comic itself, followed by links that let the user see the previous day’s comic, or the next day’s comic. People can use the site to look at all the DoomDogs comics Renata has made.

Below that is a list of comments people have made about the comic that is showing. Each comic has its own set of comments. Below that, there’s a form people can use to add a new comment.

On the right is a block for ads. That’s how Renata plans to make some money for her work, or at least pay the Web hosting fees.

Now, suppose someone enters a new comment on a page. The next person to look at the page should see the comment. How does that happen? Where does the comment go?

Here’s how it works.

Figure 5. Showing comments

Sarah tells her browser to show the comic for July 10 (1). The browser asks the server to show the page show_comic.php (ignore for the moment how “July 10” is specified).

The server sees that it’s a request for a .php file, so it tells the PHP module to run show_comic.php (2 in the figure). show_comic.php contains the following:

<h1>DoomDogs</h1>
(Code to show the comic.)
(Code to show the "Previous" and "Next" links.)
<h2>Comments</h2>
<?php
$comments = fetch_comments("July 10");
foreach($comment in $comments) {
  print "<p>$comment</p>";
}
?>
(Code to show a form for adding a new comment.)
(Code to show the ads.)

Figure 6. Comic code

This isn’t really PHP, of course. It’s pseudocode, something that has the rough form of a program, but isn’t really a complete program.

Let’s run through it. Line 1 creates the page heading in Figure 4 – the text “DoomDogs.” The next line shows the comic. Line 3 shows the “Previous” and “Next” links in Figure 4.

Lines 4 to 10 show the existing comments. The comments are stored in a database. You don’t need to know what that is right now. Just think of it as a super filing cabinet where data can be stored and retrieved as needed.

The PHP code first asks the database for all the comments for July 10 (line 6). The database returns them all. The PHP code then goes through the comments one at a time, and shows them. Lines 7 to 9 are a loop. Line 8 is executed once for each comment.

Line 11 shows the form for entering a new comment (at the bottom of Figure 4). Finally, line 12 shows the ads.

When show_comic.php has finished running, it has created HTML that will show the comic and all of the comments. The server then sends that HTML to the browser that asked for the page in the first place (1 in Figure 5).

Again, there’s a lot going on here. But, again, computers are doing the work, and they’re time is cheap.

Now suppose that Sarah adds a new comment. Here’s Figure 5 again.

Figure 5 (again). Showing comments

She types in her comment, and clicks the Save button (3 in the figure). This time, a PHP program tells the database to save the new comment, along with all of the other comments for the July 10 comic (4 in the figure).

Later, Paula asks to see the July 10 comic (5 in the figure). The Web server runs show_comic.php again (2 in the figure). The same code runs:

<h1>DoomDogs</h1>
(Code to show the comic.)
(Code to show the "Previous" and "Next" links.)
<h2>Comments</h2>
<?php
$comments = fetch_comments("July 10");
foreach($comment in $comments) {
  print "<p>$comment</p>";
}
?>
(Code to show a form for adding a new comment.)
(Code to show the ads.)

Figure 6 (again). Comic code

But this time, the comments fetched in line 6 include the comment Sarah just added. So it gets displayed.

This is called a dynamic page. As people add comments, the comments automatically show up on the page, without anyone having to edit the page manually.

Web applications

Many of the Web pages you see every day are dynamic. Amazon, Google, Facebook, Twitter – that’s all dynamic Web tech.

But some companies have taken dynamic tech even further.

You’ve probably used spreadsheet software. Here’s three screenshots.

Figure 7. Spreadsheets

Which of these is a Web page?

CC

That’s a trick question. None of them is a Web page. The pictures are all from PC software. Like Microsoft Excel.

The first image is of OpenOffice Calc. OpenOffice is a free office suite, running on Windows and other operating systems.

The next image is a Google Docs spreadsheet. It’s a Web page! And free.

The last image is from Microsoft Excel. Not free, of course.

With enough programming, you can make Web pages act like desktop applications. For instance, Google Docs has a word processor, spreadsheet, and presentation package.

They aren’t “Web pages” in the sense we usually mean. They’re tools you use with a Web browser. They’re called “Web applications,” because they do things that we normally think you need application software for, like Microsoft Office.

Server-side tech like PHP helps make Web applications work.

The dividing line between Web sites and applications is fuzzy, and not worth arguing about. The point is that, with some programming, a Web site can become interactive software.

There are Web applications for just about everything, including:

• Small business accounting

• Project management

• Games

• Photo editing

• Customer relationship management

• Personnel records

• Composing music

If you can do it on the desktop, you can probably do at least part of it in a Web application.

Summary

In this lesson, you:

• Learned that PHP code embedded in a Web page is run on a Web server before the page is send to a browser.

• Saw how a PHP program can work with a database to let users add comments to pages.

• Learned what a Web application is.

What now?

In the last few years, a new wrinkle on dynamic pages has emerged: Ajax.

Onward!