Your first PHP page
You now know a little about what PHP is, and
you've installed (or have access to) a server. Now we are ready to begin
making our first PHP page. We keep it simple and easy, but after you
have gone through this lesson, you will understand much more about what
PHP is and what you can do with it.
Basically, a PHP file is a text file with the extension .php which consists of:
- Text
- HTML tags
- PHP Scripts
You already know what text and HTML tags are. So let's look a little more at PHP scripts.
PHP Scripts
PHP Documentation Group has issued detailed documentation for PHP.
Throughout the tutorial, there will be many links to the documentation.
The goal is that you become accustomed to looking up and finding
answers to your questions. PHP is so extensive that you can't to learn
all facets in this tutorial. But PHP is not difficult! On the contrary,
PHP is often very similar to plain English.
Let's get started with your first PHP page.
Example: Hello World!
Start by making an ordinary HTML document, but name the file page.php and save it in the root of the site:
- If you use XAMPP (see lesson 2), the path for the root is "c:\xampp\htdocs\page.php" on your computer (which is now a server).
- If you have a website on a host that supports PHP, you simply upload/ftp the file to your web host.
The HTML code should look like this:
<html> <head> <title>My first PHP page</title> </head> <body> </body> </html>
As you probably remember from lesson 1, PHP is all about writing commands to a server. So let's write a command to the server.
First, we need to tell the server when the PHP will start and end. In PHP you use the tags <?php and ?> to mark the start and end for the PHP codes that the server must execute (on most servers it will be suficient to use just <? as start tag, but <?php is the most correct to use the first time PHP is used.)
Now try to add the following simple code snippet to your HTML code:
<html> <head> <title>My first PHP page</title> </head> <body> <?php echo "<h1>Hello World!</h1>"; ?> </body> </html>When we look at the PHP document in a browser, it should look like this:
The PHP codes are gone! As you may remember from lesson 1, it is only the server that can see the PHP codes - the client (the browser) only sees the result!
Let's look at what happened. We asked the server to write <h1>
Hello World!</h1>. In a more technical language, one would say
that we used the string function echo
to write a specified string to the client where the semicolon ends the
command. But do not worry! In this tutorial, we try to keep the
technical language at a minimum.
Our first example is obviously not particularly exciting. But just
wait! From now on, it's only going to be more and more interesting.
Let's look at another example.
Example: Now!
Let's make the server write something else. We could, for example, ask it to write the current date and time:<html> <head> <title>My first PHP page</title> </head> <body> <?php echo date("r"); ?> </body> </html>That will look like this in the browser:
Now things are getting interesting, right?
We make the server write the date and time when the PHP page is
displayed. Note that if you refresh the page in the browser, a new time
is written. The server writes the current date and time each time the
page is sent to a client.
It is also important to note that the HTML code contains only the
date - not the PHP codes. Therefore, the example is not affected by
which browser is used. Actually, all functionalities that are made with server-side technologies always work in all browsers!
And again, notice the semicolon after the code line. It is a
separator and very important to include - otherwise the script won't
work.
In the example, we used date, which is a function that returns the current date and time on the server.
Let's try to extend the example by writing both a string and a function - separated by "." (a period) - it's done like this:
<html> <head> <title>My first PHP page</title> </head> <body> <?php echo "<p>Current date and time: " . date("r") . "</p>"; ?> </body> </html>It will look like this in the browser:
ConversionConversion EmoticonEmoticon