PHP outputs HTML

See more about:

This lesson’s goals

By the end of this lesson, you should:

  • Know that Web servers embed PHP output in HTML.
  • Be able to use PHP’s print statement.

What’s the time, server?

Let’s take a look at a simple PHP program. It will show the time on the server. This is quite likely to be in a different time zone from the one you’re in, but that’s OK.

To begin, click here. A new window (or tab) opens, and a page shows with the time on the server.

Now look at the page’s URL. It will look something like this:

http://coredogs.com/content_media/lessons/servercore/web-site-templates/server-time.php

Look at the extension of the file. Usually, we see .html. This one is .php. What’s the difference?

When a Web server gets a request for a URL, it looks at the extension to figure out what to do. Here is the process for an HTML file.

Get an HTML file

Figure 1. Get an HTML file

The browser sends a request for x.html to the server (1). The server looks on its hard disk, and reads the file (2). It sends the data it read back to the browser (3).

You can read about the details on the page Static Web pages.

But when the URL ends in .php, the server does something else.

Get a PHP file

Figure 2. Get a PHP file

The browser sends a request to the server, this time for x.php. The server reads the file from its disk drive (2). The server notices the file has the extension .php, so it sends the data it read to the PHP interpreter (3).

The PHP interpreter is a program that runs on the server, just like any other program. It can follow instructions written in the PHP programming language.

The PHP interpreter follows the instructions in the data it got from the server (4). Most of the time, PHP code is embedded inside HTML code.

The PHP interpreter sends its results back to the server (5). The server sends the data back to the browser (6).

All of this happened when you clicked on a link to http://coredogs.com/content_media/lessons/servercore/web-site-templates/server-time.php. The browser asked the Web server at coredogs.com for the the data at server-time.php (1 in Figure 2). The server read the file server-time.php from its disk drive (2), and passed the file’s contents to the PHP interpreter (3). The interpreter ran the code (4), and gave the results back to the Web server (5). The server then sent the data back to your browser (6).

That’s a lot of stuff happening, just because you clicked a link!

What the browser got

Have a look at the HTML code that the browser got from this page. (In Firefox, hit Control-U. In other browsers, right-click and select View source or Show source, or whatever it says.)

You’ll see something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Server time</title>
  </head>
  <body>
    <p>The time at the server is 
    04:10:22 PM    </p>
  </body>
</html>

Figure 3. The HTML

It looks just like regular HTML, although the formatting around line 8 is a little strange. There is no PHP or anything here, just plain HTML.

The PHP in the file server-time.php generates normal HTML. The browser can’t tell the difference between a page manually typed in by a person, and one that’s generated. That’s the beauty of PHP; the browser just gets HTML, a language it already understands.

Now click the server time link again. You’ll get a different time, assuming that a few seconds have elapsed. Have a look at the HTML source of the new page. It’s almost the same as it was. Just the time is a little different.

In fact, each time your browser asks for server-time.php, it will get plain HTML, but it will get different HTML (if the requests are at least a second apart). The URL is always the same:

http://coredogs.com/content_media/lessons/servercore/web-site-templates/server-time.php

But the PHP in the file server-time.php creates different HTML each time.

Inside server-time.php

Here’s what’s in the file server-time.php on the server’s hard disk:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Server time</title>
  </head>
  <body>
    <p>The time at the server is 
    <?php 
    print date('h:i:s A');
    ?>
    </p>
  </body>
</html>

Figure 4. server-time.php

Lines 1 to 8 and 12 to 14 are regular HTML. The PHP interpreter just passes them back to the server unchanged. The magic happens in lines 9 to 11.

Let’s make sure we understand what I wanted the page to show. I wanted the server to send back HTML that looked like this:

<p>The time at the server is (time goes here)</p>

When you program in PHP, you are programming indirectly. You write PHP code that creates HTML, or text that gets embedded in HTML. The HTML then gets returned to the browser for rendering. So remember:

You write PHP that writes HTML.

Line 9 is the PHP opening tag: <?php. It tells the PHP interpreter that some PHP is about to appear. The interpreter runs the code until it hits the close tag in line 11: ?>.

Line 10 is:

print date('h:i:s A');

print is a PHP statement that says “Output what follows.” date() is a PHP function that gets the current date and time, and returns it. The stuff in the parentheses (()) is a format, telling date how to show the date and time. In this case, the hours, then a colon (:), then the minutes, then another colon, then the seconds, then a space, and then an AM/PM indicator.

The statement ends with a semicolon (;). All statements in PHP end this way. If you leave off the semicolon, the PHP interpreter will get confused, and complain.

The result? The print statement outputs the current time.

Exercise: Web server time

Upload the server time program on to your own server. One way is to:

  • Copy the code in Figure 4 onto the clipboard.
  • Paste it into a new file in Notepad++ (or whatever editor you use).
  • Save the file. Remember, I recommend you create a new directory for every exercise. For example, you might create a directory called coredogs/servercore/web-templates/server-time, and save the file there. coredogs is this site, servercore is the book on CoreDogs, web-templates is the chapter in the book, and server-time is the exercise in the chapter. It seems like a lot of typing, but it’s very important to keep your files organized.

Name the file whatever you want. If you name it index.php, it will be the default file in that directory. You can read more about default files.

If you installed XAMPP on your computer, and you put the file somewhere under your htdocs directory, you can access it through your browser. For example, suppose you saved the file as:

C:\xampp\htdocs\coredogs\servercore\web-templates\server-time\server-time.php

This is a file path for a Windows machine. If you use a Mac or Linux box, your path will have a slightly different format.

Remember that C:\xampp\htdocs\ is the root of the Web server on your computer.

Make sure your Apache server is running (use the XAMPP control panel to start it). In your browser, type the URL:

http://localhost/coredogs/servercore/web-templates/server-time/server-time.php

http://localhost/ maps to C:\xampp\htdocs\. The rest of the path maps to your PHP file.

Once the program works, upload the file to your hosting account, and point your browser there. (If you didn’t install XAMPP on your computer, you will need to upload the file before you can test it.) I recommend that you use the same file structure on your hosting account that you used on your own computer.

Now, change the page. Add an <h1> that says something like:

Renata’s first PHP program

Of course, replace Renata with your own name.

Upload the new version. Enter the URL of your first PHP program below.

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

Exercise: Show IP addresses

Write a PHP page that will show the IP addresses of your browser, and the server the page is running on.

You can get the IP addresses with:

$_SERVER['REMOTE_ADDR']

$_SERVER['SERVER_ADDR']

Hint: base this on the server time example.

You can run my solution.

Upload your solution to your server. Put the result below.

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

Summary

  • When a Web server gets a URL with a .php extension, it sends the file to the PHP interpreter.
  • You embed PHP code in HTML pages.
  • Most PHP code outputs HTML, which then gets sent to the browser for rendering.

What now?

Outputting stuff will help you create dynamic Web templates. The next thing you need to know is how to insert one file inside another.

Onward! To glory!


How to...

Lessons

User login

Log in problems? Try here


Dogs