Programs on servers

See more about:

Where are we?

This chapter is on interactive Web sites. We just saw how code running in a browser can interact with the user. But that’s just part of the story. Let’s look at the server side.

This lesson’s goals

By the end of this lesson, you will:

  • See how to manually create a Web page with a product list.
  • See how easy it is to make a mistake.
  • Learn that a Web server can automatically create a product list page from data in a database. This reduces the number of mistakes.
Jesse
Jesse

A list of products

Think back to the first chapter of this book, the one about what makes a Web site good. We talked about Jesse and his site, WanderingDog.Com. WanderingDog sells portable electronics for dogs, like MP3 players, and paw-held games.

Here’s part of a page on the site. It lists squirrel scanners people can buy.

SquirelScan 3000 $49.95

Bob's Bark 'n Bag Mark II $54.95

Tree Ratter Xtreme $29.95


Figure 1. Product list

OK, it won’t win any design awards. But it’s simple.

Each product has two pieces of information: name, and price. Each line in the product list has the same format. First the name, then the price in bold.

Here’s the HTML that makes the product list. It’s in a file called squirrel-scanners.html.

<p>
  SquirelScan 3000
  <strong>$49.95</strong>
</p>
<p>
  Bob's Bark 'n Bag Mark II
  <strong>$54.95</strong>
</p>
<p>
  Tree Ratter Xtreme
  <strong>$29.95</strong>
</p>

Figure 2. HTML for product list

The <p> tag makes a paragraph. That’s some content with white space above and below it. The <strong> tag does the bolding.

So every product has a simple HTML template:

<p>
  Name
  <strong>Price</strong>
</p>

Figure 3. HTML template for product list

Apply the template to every product, and you get the HTML for the product list.

Creating the product list

How does the HTML in Figure 2 get created? One way is to do it by hand. Suppose Jesse uses a word processor like OpenOffice Writer or Microsoft Word. He makes a document like this:

Name Price
SquirelScan 3000 $49.95
Bob’s Bark ‘n Bag Mark II $54.95
Tree Ratter Xtreme $29.95

Figure 4. Master product list

Jesse keeps this master product list current at all times.

It’s easy to make the HTML from this. Just a lot of copy-and-paste.

  • Create a new file, called squirrel-scanners.html.
  • Paste a copy of template (Figure 3) at the end of the file. Remember that it looks like this:
<p>
  Name
  <strong>Price</strong>
</p>

Figure 3 (again). HTML template for product list

  • Take the name and price of the first product, and paste them in the copy of the template.
  • Paste another copy of template at the end of the file.
  • Take the name and price of the second product, and paste them in the copy of the template.
  • Paste another copy of template at the end of the file.
  • Take the name and price of the third product, and paste them in the copy of the template.

And so on. Just do the same thing for every product in the master list, and you’ve got the HTML you need. Here it is again:

<p>
  SquirelScan 3000
  <strong>$49.95</strong>
</p>
<p>
  Bob's Bark 'n Bag Mark II
  <strong>$54.95</strong>
</p>
<p>
  Tree Ratter Xtreme
  <strong>$29.95</strong>
</p>

Figure 2 (again). HTML for product list

Jesse uploads squirrel-scanners.html to his Web server. Customers can see it at http://wanderingdog.com/squirrel-scanners.html.

Updating product data

Product data changes all the time. New products are added. Old ones are dropped. Prices go up. Or down, when there’s a sale. There could be dozens of changes a week for a small store with a few hundred products. A large store with thousands of products might have to make a hundred changes to the product data every week.

Suppose the price of Bob’s Bark ‘n Bag Mark II goes from $54.95 to $56.95. Jess first goes to his master product list and changes it:

Name Price
SquirelScan 3000 $49.95
Bob’s Bark ‘n Bag Mark II $54.95 $56.95
Tree Ratter Xtreme $29.95

Figure 5. New master product list

Then Jesse can change the HTML in squirrel-scanners.html. If this product’s price appears on more than one page, Jesse has to remember to change it everywhere.

Let’s say there are 15 price changes per week. That means 15 changes to the master product list, and 15 to the squirrel-scanners.html. That’s 30 changes every week.

It would be easy to make a mistake. Take the price change for Bob’s Bark ‘n Bag Mark II. Let’s say that Jesse typed the new price correctly into the master product list, but made a mistake when editing squirrel-scanners.html. Instead of changing $54.95 to $56.95, he accidentally deleted the first 5, making the price on the Web site $6.95.

Suppose there are ten orders before Jesse finds the mistake. He either loses $50 per order, or annoys ten customers. No way to win.

The more products there are, the more chances there are for errors. Not to mention the time it would take to make all the changes.

A better way

Jesse makes two big changes. First, instead of having his master product list in a word processing document, he puts it into a database table.

A database management system (DBMS) is a piece of software that can help with problems like Jesse’s. There are many different DBMS. Jesse uses MySQL, a popular open source DBMS, widely used for Web sites. CoreDogs uses MySQL underneath.

Most DBMS store data in tables. Here’s a MySQL table called products.

products table from database

Figure 6. products table from database

It’s the same data as before, in more-or-less the same format. There are rows, and there are columns. Each row is data for one product. Each column is an attribute, or characteristic, of a product.

Why did Jesse move the data into a database table? Because when the data is in a database, programs can use the data.

So that’s the first thing Jesse does. He moves the data to a database.

The second thing: he writes a program to automatically create the page squirrel-scanners.html.

Remember the steps Jesse went through to make squirrel-scanners.html manually. Here they are again.

  • Create a new file, called squirrel-scanners.html.
  • Paste a copy of the HTML template at the end of the file.
  • Take the name and price of the first product, and paste them in the copy of the template.
  • Paste another copy of template at the end of the file.
  • Take the name and price of the second product, and paste them in the copy of the template.
  • Paste another copy of template at the end of the file.
  • Take the name and price of the third product, and paste them in the copy of the template.

These are repetitive things that a computer can do. Here’s what a program to create squirrel-scanners.html would do.

Connect to the database.
Open the products table.
For each row:
  Get the name from the row.
  Get the price from the row.
  Output: <p>
            name
            <strong>price</strong>
          </p>

Figure 7. A program to make the product list HTML

Line 3 starts a loop. Lines 4 to 9 run for each row in the table. They grab product data, populate the template, and output the results. When the program finishes, we have this:

<p>
  SquirelScan 3000
  <strong>$49.95</strong>
</p>
<p>
  Bob's Bark 'n Bag Mark II
  <strong>$54.95</strong>
</p>
<p>
  Tree Ratter Xtreme
  <strong>$29.95</strong>
</p>

Figure 2 (again). HTML for product list

It’s the same as before, but the computer does the work, not Jesse.

The big advantage is that Jesse enters a new price just one time, no matter how many times the price is shown on his site. The computer does the grunt work of transforming the product data into HTML, so there are fewer mistakes.

Big productivity win for Jesse! W00f!

Where does the program run?

So there’s a program that takes data from a database, and outputs HTML. Where does the program run? In a browser?

Typically, programs like this run on the Web server, not in the browser. They aren’t written in JavaScript, but in a language designed for use on servers. PHP is a popular server-side language. In fact, the code that generates CoreDogs pages is in PHP.

Here’s what happens.

Showing the product list

Figure 8. Showing the product list

Customers like Sarah and Paula go to the page http://wanderingdog.com/squirrel-scanners.php. The extension isn’t .html anymore, because this isn’t an HTML file. squirrel-scanners.php is a program that generates HTML.

When the Web server gets the request, it notices the .php extension. It runs the program, and sends back the output the program generates.

Remember that squirrel-scanners.php is a program, and it outputs HTML (see Figure 7). So the browser gets HTML. The browser doesn’t know or care that the HTML was generated automatically, rather than typed by a person. It just renders what it gets.

Where the value is

Companies that create value on the Web do a lot of server-side processing. When you send a tweet, a program on a Twitter server stores it in a database. When one of your followers logs in to Twitter, another program reads the database, and shows your tweet.

When you add something to your Facebook wall, a program on a Facebook server stores your new entry in a database. When one of your friends logs in, a different program runs. It extracts your entry from the database, and shows it.

You search for a product on Amazon:

Amazon search

Figure 9. Amazon search

A program runs on an Amazon server. It searches through the database for your search term, and shows matches:

Amazon search results

Figure 10. Amazon search results

Notice that this is like Jesse’s product list, with a product name and a price. Well, a little better, even Jesse would admit that.

So the server side is where it’s at if you want to make money on the Web. CoreDogs’ ServerCore book is all about server-side processing.

Summary

You learned:

  • How to manually create a Web page with a product list.
  • How easy it is to make a mistake.
  • A Web server can automatically create a product list page from data in a database. This reduces the number of mistakes.

How to...

Lessons

User login

Log in problems? Try here


Dogs