PHP outputs HTML
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
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:
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.
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.
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:
But the PHP in the file
server-time.php creates different HTML each time.
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>
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');
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
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.
coredogsis this site,
servercoreis the book on CoreDogs,
web-templatesis the chapter in the book, and
server-timeis 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:
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.
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/ 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:
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.)
- When a Web server gets a URL with a
.phpextension, 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.
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!