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:


$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:


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

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



$widget = “mixer”;



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

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


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

Put PHP code inside other HTML tags

What we’re doing in this task:

We’re integrating PHP-generated content even more tightly into the HTML content of the page, and learning the power of re-using variables.

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

2. We want to include the user’s name in the welcome statement, so change the heading to look like this:

Welcome to My Simple Page, User!

3. Go to Code view.

4. Select the entire second PHP tag (echo $user), and Edit > Cut.

5. In the heading, select the word User and delete it; then paste the PHP code in its place.

The result should look like this:

<h1>Welcome to My Simple Page, <?php echo $user ?>!</h1>

6. Upload and view the page … check the source code.

Back in Dreamweaver … we can use this code anywhere:

7. Go to Code view

8. In the <title> element, we want the page title to be “George’s Simple Page” … so change the code to insert the php tags …

<title>George’s Simple Page</title>

<title><?php echo $user ?>’s Simple Page</title>

9. Upload and preview again

Why did we do this?

We learned that php tags and instructions can be inserted anywhere within the HTML, in place of static data.

We learned the value of defining information at the top of the page, and then using it multiple times in the page.

Put PHP code above the HTML tag

What we’re doing in this task:

We’re adding PHP code to be processed before any of the HTML page is read.

We’re learning how Dreamweaver will structure the PHP code it writes for us.

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

2. Move the variable declaration to its own PHP tags, above the HTML tag. So the code for your page looks like this (PHP code is bold):


$user = “George”;




<title>Simple Page</title>



<h1>Welcome to My Simple Page!</h1>

<?php echo $user ?>



3. Note that the variable declaration can be anywhere, as long as it’s before the echo statement that calls on the variable.

4. Note also that the echo statement can be displayed on one line, and without a semicolon.

This is perfectly allowable, and very simple statements are often written this way … whatever makes the code easiest to read, multiple lines or one line.

Because there’s only one statement, we can remove the semicolon also.

5. View the page in Design view. Note that the code above the HTML tag is not displayed anywhere here; just the code in the body tag.

6. Upload and view … the page should work the same as it did before.

Why did we do this?

We learned that pages can have as many PHP tags as they need.

We learned that the different sections of PHP code share information.

We learned that it’s perfectly valid — and common practice — to put PHP code entirely outside the HTML tags; things that will be used in the rest of the page are often placed here, so they’re sure to get processed before they’re used.

We learned that PHP tags can be “inline” or multiline.

Create and use a PHP variable in the simple page

What we’re doing in this task:

We’re learning about the concept of variables and how they’re used.

We’re learning what variables look like in PHP.

We’re expanding what we know about the echo command (it can use variables).

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

2. Select the PHP icon.

3. In the Property inspector, change the code to this:

$user = “George”;

echo $user;

(Note that when you’re working in the Property inspector, Dreamweaver doesn’t show you the PHP tags; also, there’s no color coding to help you spot problems.)

4. Go to Code view and make sure your code looks right … and see the color coding.

5. Upload and view the served page; check the source code to see how PHP instructions have been translated into HTML code.

Why did we do this?

We learned what variables are — they are core to the whole PHP scripting functionality.

We learned how to recognize PHP variables in source code (they always start with $).

We learned how to use the Property inspector to view and edit PHP code.

Put a PHP command into the simple page

What we’re doing in this task:

We’re seeing how PHP instructions work within the HTML structure of a page, and how to embed the PHP code.

We’re also learning another very simple PHP command: echo

1. Change the file extension of simple.html to simple.php

(Windows users: it’s important that your computer show file extensions, so you can see exactly what type of file you’re dealing with.)

2. Open simple.php.

3. Go to Code view.

4. Change the body code to look like this (new code is in boldface):

<h1>Welcome to My Simple Page!</h1>


echo “Hello from PHP”;


5. Look at the page in Design view.

The PHP icon shows where the PHP code is.

6. Select the icon, and the Property inspector shows you what’s inside the PHP tags. (You can edit it from here if you want.)

7. Preview in browser (local); you won’t see the dynamic content properly.

8. Upload and preview the served page.

You see the hello message on the page.

9. In the browser, view source. Note how the PHP code has been stripped out and replaced.

(That’s part of the whole HTTP request process.)

Why did we do this?

To see how PHP and HTML code work together, and how they are processed together.

To see what PHP code looks like in Design view.

To learn about the echo command. This command is used a lot. It’s how PHP puts information into the HTML page.

Create a PHP information page

What we’re doing in this task:

We’re making our first PHP page.

We’re seeing how the .php file extension works.

We’re watching the HTTP request process work for PHP pages (as discussed earlier).

We’re making sure we can connect to the PHP engine (the application server software) on the server.

And we’re also learning how to create a simple test page that you can use with any web server, to see if PHP is installed and running.

1. Create a new page, named phpinfo.php

2. Open the file and go to Code view.

3. Select and delete all code there.

4. Type in this new code:




5. Preview locally (by pressing F12). What do you get?

6. Upload the page to the remote site and view it as a served page. The URL will look like this:

We have contacted the PHP server … what about this file made that happen?

A. The .php File Extension

Try changing the file name to phpinfo.html and uploading it and viewing it.

B. The PHP tags

Try changing the file name back to phpinfo.php, deleting the opening and closing tags, and uploading for viewing.

C. And of course valid PHP

Try putting some random stuff in there, and see what you get back — this is often what happens when there’s an error .

Also try simple case sensitivity or spacing errors, to see color coding in action.

With all of those things in place, the HTTP server passed what was inside the tags to the PHP server.

(NOTE:Dreamweaver color coding supports this, only showing up when everything is in place.)

Why did we do this?

If you get the PHP info page, that means PHP is running on the server and that you have successfully connected to it.

It tells you lots of things about PHP that we don’t need to worry about … but specific configuration information that you might need when you’re a more advanced PHP developer.

We can also see how the dynamic process works:

send PHP instructions

get processed HTML back

And we can see what elements a PHP page needs (the file extension, the PHP tags)

And we need a valid PHP function … and we’ve seen what some valid PHP code looks like:

a function has ()

a line ends with ;

code is case sensitive

Create a simple page

Create a simple page

1. In Dreamweaver, create and open a new file, called simple.html.

Put very simple content into it:

Page title: Simple Page

Contents: a Heading 1 formatted line, “Welcome to a Simple Page”

Test the page: Preview in Browser (F12)

Note that the URL in the browser’s address field starts with the protocol “file://”. This tells your browser to get a file from the local file system.

2. Upload the page to your remote site.

3. View the served page.

Do this by going to the browser and typing in the following URL:

By typing in the HTTP protocol (http://), you’re sending an HTTP request to the HTTP server software (on lab server, this is Apache)

Remember the discussion earlier on web page processing: a lot more is happening behind the scenes when you send an HTTP request than when you send a file request.

Why did we do this?

To see the difference between previewing served pages and previewing locally;

to make sure our site can be served;

and to demonstrate how to send an HTTP request that will serve our pages back to us.

Create your Dreamweaver site

Create a Dreamweaver site

Now we need to create our basic web site, which you’ll use through the rest of the class.

Creating local and remote folders (on our lab server) will confirm that you can indeed connect to the server.

In Dreamweaver:

Create a new site (Site > New Site)

In the Site Definition dialog box, under Local Site category, set the following:

Name: DW PHP Site

Local folder: your local website folder

Under the Remote Site category, set the following:


Directory: public_html/webuser00
(substitute your account name for webuser00)

Password: student


Use the Test button to make sure you can connect.

When you’ve verified that the connection is working, click OK to close the dialog box and create the site.

Web Server Account Information

Web Server Account Information

For the exercises in our UNM classroom, you’ll be using a UNM student account on a lab web server. If you’re doing this exercise elsewhere, you’ll need the account
settings for your web host (your ISP).

For UNM class:

user names: webuser01 – webuser15
(I will assign a number to you)

password: student
(it’s the same for all accounts)

web server: I will give you the IP address

NOTE: Throughout this material, I will refer to the generic “webuser00”.
Obviously, use your own number.