- Where are we?
- This lesson’s goals
- Web site goals
- Try it
- For the customer
- Changing the Web site
- What now?
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.
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:
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:
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.
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.
That isn’t very secure.
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:
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:
Figure 4. Adding product data
There are four fields:
- Product name
- Image file name
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
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:
Figure 5. Edit link
This goes to a page like this:
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:
Figure 7. Delete link
This shows a confirmation page, to make sure the user really wants to delete the product record:
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.
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.
Let’s tour the DogRock site.