Open Waves

So you’re a “web designer”. You make a site for a band, a friend, yourself, and then you start making stuff up. You have about 20 pages for a site and it looks pretty good. Everything is nicely coded in HTML. Suddenly, you want to make a change small but significant, until you realize that change is going to have to be made on every single page so they all will look the same. Maybe you decide it looks better how it is already. Maybe not, in which case you begin the process of opening every page, copying and pasting your new code into every single page. Whether it’s a new image, link, or some other snippet of code, repeating this task again and again becomes monotonous, and makes you regret all the time you spent reading “HTML For Dummies”. How can you figure out a way to end the modification madness and go back to spending your time doing what you love, designing web sites?

PHP to the rescue! First, change all your “page.html” extensions to “page.php”. Now you can insert PHP code into any of your HTML pages and it will be able to be understood by your browser. Pretty easy, right? The next step is to actually use some PHP. The reason we wanted to use it in the first place is to efficiently make changes to our reusable code in our HTML, such as headers, footers, and navigation.

So let’s create a test page called “test.php” and open it in a text editor. Create the html, head, title, and body opening and closing tags, and in the title you can just type “PHP Test”. In between your body tags, type:

<?php echo '<p>Hello World</p>'; ?>

This is how you print a line of text in PHP. Upload it to your site and navigate to the page on your browser. If you see “Hello World”, you did it! If not, try copy/paste instead of typing it in yourself.

Create a folder in your main directory called “includes”. This is where you are going to store all your reusable PHP code you already created, because it’s HTML. For example, start at the top of your “index.php” page and cut everything down to and including your “</head>” tag. Now create a file called “head.php” and paste it in your “includes” folder. We’re almost done. Now go back to your “index.php” page and in place of all that header code, type the following:

<?php include("includes/head.php"); ?>

Save it an upload it to your server. Now you can go edit all your pages to look the same way. Once you are done, you will now only have to edit one page when you want to add a CSS file, Javascript file, or meta tag into the top of your page. You can repeat these steps for any other code (such as your navigation/links) so it becomes reusable as well. Notice when you view the source code in your browser, the code appears as before. That is because PHP finds the code and writes it to the page when your browser loads it so it looks the same, but it saves you precious time! Think about how much time this will save you in the future when you are designing sites with literally hundreds of pages.

So what does “PHP” stand for?

• Good question. PHP is an acronym, which stands for “Hypertext Preprocessor”.

That doesn’t make sense!

• You are correct, but it is what it is.

But wait, when I try to preview my new pages in a browser, I can’t!

• Because PHP is a scripting language, it needs to be loaded on a server to be processed and displayed correctly in a browser, otherwise you will just see your code.

But I don’t own my own server, so was this just a big waste of time?

• Hopefully not, because guess what? Your computer can be a server! Well, kind of. Apache is a free and open source server that is actually used to host most websites on the internet. And you can run it on your very own computer! However, it can be tricky finding the version of Apache and installing PHP on your computer. If you are running Windows, you can download “Wamp” for free, which will install everything you need to make your new PHP web site work on your computer. There is also a Linux version, appropriately called “Lamp”, and I dare assume if you are using Linux, you probably will know how to install it properly. Maybe someday we will talk about the additional item in this package, the MySQL database.