Sample: DogToys

See more about:

Where are we?

You’ve seen how PHP pages can send SQL statements to MySQL. We’re going to see how you use this ability to write Web applications.

But first, let’s look at two simple applications. Understanding what they do will help you understand why database stuff is done the way it is.

This lesson’s goals

Recall that DogToys has an online product catalog, with things like squeaky balls, and chew ropes. In this lesson, we’ll look at what the site does. Later, you’ll see how it can be built.

By the end of this lesson, you should:

  • Know what the business goals of the site are.
  • See how the site’s design achieves those goals.

Web site goals

The DogToys site has three main goals:

  • Customers can see product data.
  • Employees can change product data, quickly and easily.
  • Webers can update the Web site, quickly and easily.

Let’s talk about each one.

Customers can see product data

Customers want to be able to see pictures, descriptions, and prices of products. The product list should be easy to get to, from anywhere in the site.

Customers should be able to sort product data the way they want. We’ll let them sort the data by price (low to high, and high to low), and by product name.

Employees can change product data

We want DogToys employees to be able to change product data. The employees who change product data will be from the marketing department. They will not have strong technical skills. They don’t know any HTML.

We’ll create an administration section of the Web site. Employees will be able to fill in forms to change product data.

Webers can update the Web site

We will want to change the site. Maybe change the color scheme, add buttons to the nav bar, change the page footer, etc. Webers should be able to make these changes quickly and easily.

We’ll make a template-based site.

Try it

You can try the site. The admin parts of the site don’t actually update the database.

You can download the code.

For the customer

Time for some screens. Here’s the home page:

Home page

Figure 1. Home page

Notice the nav bar on the left. This will be the same on every page. Customers can click on the Products button to see the products catalog. This meets the goal of having the products list available from every page on the site. It’s always just one click away.

Here’s the product catalog:

Product catalog

Figure 2. Product catalog

Each product has a name, picture, description and price.

The user can sort the data. Clicking on the Name link sorts the data by name. Clicking on the up and down arrows next to the price sorts by price.

You can try it.

Administration

The administration section of the site lets employees change product data. The administration section is just a bunch of Web pages.

There is no clickable link from the main part of the DogToys site to the administration section. To get to it, you need to know the URL. Add /admin to the home page’s URL to get to the main administration menu.

CC
CC

That isn’t very secure.

Kieran
Kieran

You’re right, it isn’t. Later in the book, you’ll learn how to add user names and passwords to sites.

Main administration screen

Here’s the main administration screen:

Main administration screen

Figure 3. Main administration screen

There’s a link users can click to add a new product.

All the products are listed. It looks like the product catalog, but each product has an Edit and Delete link.

Adding product data

Here’s the form for adding product data:

Adding product data

Figure 4. Adding product data

There are four fields:

  • Product name
  • Description
  • Image file name
  • Price

Most are familiar, but what about the image file name? What’s that about?

We want to show a picture of each product. We’ll take a photo of each one, with a digital camera. We’ll store the image files on the Web site. Let’s put all the photos in a directory called product-images.

How to show the photo on a Web page? With the <img> tag, like this:

<img src="product-images/ Image file name " alt=" Product name ">

Suppose we take a photo of the ball. We name the file with the photo ball.jpg, and put the file into the product-images directory. To show it on the product catalog page:

<img src="product-images/ball.jpg" alt="Squeaky ball">

So the user would type “ball.jpg” into the image file name field in Figure 4.

Image file name is just a regular text field. It’s used to make the <img> tag. The tag itself is just text. But when the browser renders the tag, it will download the image file.

Changing product data

The user clicks a product’s Edit link to edit a product record:

Edit link

Figure 5. Edit link

This goes to a page like this:

Edit form

Figure 6. Edit form

It looks like the new product form in Figure 4, but the fields already have data in them.

Deleting product data

When on the main administration page, the user can click the Delete link to remove product data:

Delete link

Figure 7. Delete link

This shows a confirmation page, to make sure the user really wants to delete the product record:

Confirm delete

Figure 8. Confirm delete

The user has to click the Confirm button to actually delete the record.

Exercise: DogToys tasks

Using a site is a good way to get to know it. But you should use it in the same way that other people would use it.

Pretend you’re a DogToys customer, who wants to buy the most expensive toy. Start at the site’s home page. Write down the steps you would take to complete the task.

Now pretend you are a DogToys employee. DogToys is having a sale on squeaky balls. You want to reduce the price of squeaky balls by 50 cents. Start at the site’s home page. Write down the steps you would take to complete the task.

Put your answers below.

(Log in to enter your solution to this exercise.)

We’ve talked about two of the site’s goals so far:

  • Customers can see product data.
  • DogToys employees can change product data, quickly and easily.

Now for the last one.

Changing the Web site

We want to make it easy for Webers to change the site. We’ll use the PHP template approach we talked about before.

So we’ll be using PHP for two things:

  • Manage product data.
  • Assemble pages from template components.

Summary

We looked at the DogToys Web site. The site lets:

  • Customer look at product data.
  • Employees easily change product data.
  • Webers easily alter the Web site.

What now?

Let’s tour the DogRock site.


How to...

Lessons

User login

Log in problems? Try here


Dogs