Put a dynamic image on the PHP page

Put a dynamic image on the PHP page

What we’re doing in this task:

We’re inserting some more complex content in the page, in the form of an image and a table.

We’re using PHP instructions to determine what image gets displayed.

1. In Dreamweaver, open simple.php and go to Design view.

Create the static version of the page:

1. Insert a simple table, one row, two columns.

2. In the left cell, insert coffeemaker_widget.gif (in the widgetpix folder).

3. In the right cell, type “Automated coffeemaker”.

4. Upload and preview (be sure to upload the widgetpix folder as well!).

Make the image dynamic:

5. Go to Code view.

6. At the top of the page, add a variable declaration for a $widget variable, assigned the value of coffeemaker. Your code above the HTML tag should look like this:

<?php

$user = “George”;

$widget = “coffeemaker”;

?>

In the <img> tag, put PHP instructions in place of just the word “coffeemaker”:

7. In the <body> section of your code, find the <img> tag. It looks like this:

<img src=”images/coffeemaker_widget.gif” width=”200″ height=”187″>

8. Change it to look like this (new code is in purple):

<img src=”images/<?php echo $widget ?>_widget.gif” width=”200″ height=”187″>

9. Go back to design view.

See how the image now appears with a special dynamic image icon? In Dreamweaver, the lightning bolt always means there’s server-generated (PHP) code present.

10. Select the dynamic image and examine the Property inspector. See how the PHP code shows up as part of the Src field?

11. Select the text in the right-hand table cell (Automated coffeemaker) and go back to Code view.

12. Change the code for this text so it uses the PHP variable:

Automated <?php echo $widget ?>

13. Upload and view the served page to see how this code gets translated back to usable HTML.

14. Back in Dreamweaver: Add another table row.

15. Copy the dynamic image to the second row.

16. Go to Code view.

17. Add a PHP line changing the value of the variable. Your code for between the table rows should look like this:

<tr>

<td><img src=”images/<?php echo $widget ?>_widget.gif” width=”200″ height=”187″></td>

<td width=”100%”>Automated <?php echo $widget ?> </td>

</tr>

<?php

$widget = “mixer”;

?>

<tr>

<td><img src=”images/<?php echo $widget ?>_widget.gif” width=”200″ height=”187″></td>

<td>Automated <?php echo $widget ?> </td>

</tr>

18. Upload and browse.

Why did we do this?

We saw that PHP code can even be plugged inside an HTML tag, to replace an attribute.

We learned about dynamic images, and how Dreamweaver displays them.

We saw how changing a variable and repeating the code that displays it can create multiple different items on the page.
This is the essential mechanism used for displaying multiple items from a database (what we’ll be doing in our following
exercises).