What this series is all about.
This is a hands-on tutorial as always and we start at the beginning and this tutorial assumes that you have not done any PHP implementation before.
We concentrate on making use of PHP for making web site maintenance easier and start to introduce some handy code right from the word go. There will be no big explanation to begin with on what PHP is, but its benefits and differences compared with other langauges will be explained during the series.
There is a lot to go through, PHP is a big language, although we are only going to touch a small part of it, web design and maintenance is still a big subject. We start slowly in this part one, the pace will increase as the series continues.
This is the first in a planned six part series, beginner status is assumed in part one, by the time you have completed part six, we hope to have you at intermediate level as far as PHP and web design are concerned.
So lets begin ..
What you will need for this tutorial :
You will need either PHP enabled web space provided by your ISP, or a PHP enabled web server installed on your own computer.
You can create PHP pages the same way as you do HTML pages, so no specific editor is required or assumed, use what you normally would in your web site creations.
Finally, this tutorial assumes you are familar with the basics of web design in general and that you understand the basics of HTML coding. Future Tutorials may require the presence also of the mySQL database, but we only touch on it with a simple example. This six part series is not set in stone as to which route we are taking, so please, if you want something specific covered, let us know.
Step 1 - things you should know
Most Web Servers that are PHP ready are configured with a default set of rules. These rules are there in part for security and in part to ease the workload of the server and as a side-effect makes for the loading of your web pages quicker. These servers look at the extension names of your web site files and base certain rules on these extensions. As far as PHP is concerned, web servers will only look in files that have the .php or .php3 extension. The second one .php3 was introduced when PHP version 3 was released, because of the incompatabilites between this and previous versions, i.e. it was not backwards compatible in a number of areas. When the current stable version of PHP 4 was released, this naming convension was dropped and the .php extension reigns supreme once more.
This also means that by default, all of your normal web site files that have the normal .htm or .html or .shtml extensions, will not be parsed for PHP code. What does that mean ? , well, the Web Server will not look inside (parse) any file with those extensions and assume that no PHP code is contained within them. This also means that if you do have PHP code inside any file with any of those extensions, then it will not work, and the code itself will be displayed on the web page as ordinary text. There are exceptions to this rule if for example a web server has been configured differently for whatever reason, we'll assume the other 99%.
On the other side of the coin, any code that normally resides inside .htm .html or .shtml type files - i.e. good old HTML code, CAN be parsed inside of .php files, so we are on to a winner. We can create PHP only files with the .php extension, and we can create a mixture of HTML and PHP code inside files with the .php extension. This will also help us in our file organisation.
step 2 - testing the waters
The object of this lesson is to get you working with a little bit of PHP code, the best way to do that is to get an existing HTML page, and stick some PHP in it. Is it really that simple ? Yep....
Starting with a basic html page we shall call 'simple.html' . Create a blank file with your usual editor and paste in this code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> </head> <body> <p> This is a default site template page.</p> </body> </html>
The above code is a basic xhtml compliant page with one paragraph of content. This will provide the basis of all pages we create during this series and will build on it. There is information here (code) that will more than likely appear on nearly all pages on a web site. Similar to Server Side Includes (SSI) , PHP also has an include function that is probably one of the most used functions in web design. This has many uses, not least of which is to help us designers out by re-using repetitive code, that is code that appears a lot within our pages of a site.
Nearly all of the code above is classed as repetitive, so we'll break it down, put it into seperate files and include them in our pages when we need them.
Cut out this first section of code and place it in a new file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body>
Save the file as 'header.inc' - it could be any extension but traditionally the .inc extension means 'include' so we'll use that.
Now cut this last section of code out and place it in another new file.
</body> </html>
Save this file as 'footer.inc' . Now what are we left with from our original code , not a lot :-
<p> This is a default site template page.</p>
That is all, just the actual content of the page. Lets bring it all back together PHP style.
step 3 - include the header and footer
Now, before I carry on I need to clarify something here. The words 'header' and 'footer' are again traditional names for the top section and bottom section of a web page. Do not get mixed up with what headers and footers are in a Word document for example, although the application is similar - to include repetitive pieces of information.
PHP has an include function and it looks like this :-
<? include 'file_to_include.inc; ?>
So we'll use two of these statements, one for the header and one for the footer. Now the original 'simple.html' looks like this :-
<? include 'header.inc'; ?> <p> This is a default site template page.</p> <? include 'footer.inc'; ?>
That's a nice and compact piece of coding, we are not quite finished. This web page now contains PHP code, so we need to save it with the .php extension in order for it to work. So, save this code as a new file called 'simple.php' . Now we can test it.
Upload these 3 files to your PHP enabled web space, all into the same directory for now.
'simple.php'
'header.inc'
'footer.inc'
Now open up your web browser and assuming you have placed these in the root of your site go to 'http://yoursite.com/simple.php'
You should have a perfectly viewable web page, although it only contains the simple line ' This is a default site template page.'
Have a look at the source code of the site and it will look exactly like the 'simple.html' code we started with earlier. The Web Server has interpreted the PHP code, done what has been asked of it and 'inc'luded the contents of header.inc and footer.inc and inserted the code in place of the PHP include statements.
For the future now then, we can include the header and footer into every page just like we did with simple.php.
step 4 - php start and end tags
Because PHP files can contain PHP code and other code such as HTML and javascript, the web server and PHP needs to know what is to be regarded as PHP code and what is not, so all PHP code is pre-empted by start tags <? and after the PHP code block is finished, is ended with ?> . So don't let these symbols worry you, that's all they are. The only other thing to mention in the code above is the semi-colon. Semi-colons ; finish off a line of PHP code so you will be seeing this a lot.
Summary
Well, that's the first dip into PHP for some of you and hopefully a successful one. It was relatively short and not a lot to do, never fear, we can pick up the pace and do more code and less chatter next Issue. You can build on this months tutorial yourself already by basing a new site around this structure - that is just place the two include statements inside a .php file, then insert the actual viewable content as you normally would in between. This has the advantage that, if you need to change your header for your site, you only alter the header.inc file and the changes are replicated across the entire site. You can also alter existing sites to do the same.
Want to know more?
As I said earlier, this series is not yet set in stone as to the direction we will be taking, I have ideas and will continue on with them, but if you want something covered then let us know via a message in the Forums. Things like navigation menus, dynamic forms, sessions, login areas etc will be covered in future issues either way. You may have had to log in to view this tutorial - if so then you are experiencing another power that is PHP.
Related Tutorials
Introduction to PHP - Part Two
Introduction to PHP - Part Three
Introduction to PHP - Part Four
