Save Time Learning PHP

Share This:

If you like my work show support on my Patreon

This post is assuming that you have never used PHP but are experienced in HTML and CSS and have thought about getting into PHP.

I could go into a simple Hello World PHP tutorial for you. But Hello World is found in every programming tutorial and gets played out fast. Instead I figured I would help the HTML site developers out there by teaching a very practical PHP tutorial, so this way they will consider and be more motivated in learning more about it.

Scenario

You have an HTML website that has 100 pages. Each page has the same navigation menu and the same logo. But every time you add a new page you end up having to update the menu of the other 100 pages. This means your taking extra time out to make a very simple change. If only there was a way to change the menu once and have it update for all the pages. But wait there is using PHP.

Note: PHP isn’t the only way to achieve this. But for the purpose of this post we will be using PHP.

Requirements

PHP is a server side language. Which means it is the site owners responsibity to make sure the server that is hosting the PHP site has PHP installed on it. Because of this you do need to have some requirements. Below is a list of minimal requirements.

  • A Hosting Plan with PHP or a server with PHP installed on it.
  • Storage (Enough to store the contents of your site)
  • Bandwidth
  • Common Sense

Basic Logic

You probably are familiar with both HTML and CSS by now. And if you are then your aware that they both have a format that you must follow. For example with HTML the format looks something like the following.

<tag>Content</tag>

And with CSS the format would look something like the following.

tag { foo: bar }

Well PHP has it’s own format. PHP must begin with the following.

<?php

and it must end with the following.

?>

So when someone uses the term break in with PHP they are breaking into a part of the site with PHP, using the <?php. This doesn’t mean anything is being broken into and you need to worry about anything. It means anything starting after <?php will follow a standard PHP syntax and will continue to follow that syntax until it breaks out of PHP with the ?>. This will make more sense shortly.

Example Site

Below is an example of how your site may look.

<html>
<head>
<title>My Site</title>
<link href="./css/style.css" />
</head>
<body>
<img src="./images/logo.png" id="logo" />
<ul id="menu">
<li><a href="./">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./products.html">Products</a></li>
</ul>
<br />
<div id="content">
<h1 id="homepage">Home Page Header</h1>
<p id="content-paragraph">Some content text here</p>
<img src="./images/front-page-image-1.png" id="content-image" />
</div>
</body>
</html>

As you can see all of the pages are using HTML and because of this they all end in the .html file extension. We will need to change them to PHP. We can easily do this from the windows cammand prompt, or a *nix terminal by using the following commands.

Windows

ren *.html *.php

Mac, Unix, Linux, BSD

mv *.html *.php

Before we go any further lets make sure the site functions on our server. Lets remove all the .html files on the server and replace them with the .php files we just made. After we do this if it appears there has been no change visually then we are good.

Modify The File Contents

Now lets open up our new index.php file in a text editor. Assuming the text editor has a find and replace hot key combination of Ctrl + H we will use it. If not use the method your text editor uses for find and replace.

Now in the above example our menu linked to about.html, contact.html and products.html this will now cause problems since they are now .php files. So now we have the find and replace window opened. We will find all of the .html text in the file and replace them with .php by typing the following into the find and replace parts of the window.

Find

.html">

Replace

.php">

Now if our text editor has the option to replace all press the Replace All button. And it will replace all the names that end in .html to .php

Now we will copy all the content that we know will be the same on every page of our site. In the example we are using it will be the following that we will need to copy.

<html>
<head>
<title>My Site</title>
<link href="./css/style.css" />
</head>
<body>
<img src="./images/logo.png" id="logo" />
<ul id="menu">
<li><a href="./">Home</a></li>
<li><a href="./about.php">About</a></li>
<li><a href="./contact.php">Contact</a></li>
<li><a href="./products.php">Products</a></li>
</ul>

After we have copied the contents to our clipboard. We will create a new PHP file. In most text editors this can be achieved by pressing CTRL + N. After we have a new file we will paste the contents we just copied to our clipboard to the new file. Then we will save the file as head.php

We will now remove the content from our index.php file. So our index.php file will look like the following.


<br />
<div id="content">
<h1 id="homepage">Home Page Header</h1>
<p id="content-paragraph">Some content text here</p>
<img src="./images/front-page-image-1.png" id="content-image" />
</div>
</body>
</html>

Now our index.php file no longer will display the upper half of the contents. But we have those contents in our newly created head.php file. So lets add the head.php file to our index.php file. We can do this by adding the following code to the index.php file.

<?php include “head.php” ?>

Our index.php file should now look like the following.


<?php include "head.php" ?>
<br />
<div id="content">
<h1 id="homepage">Home Page Header</h1>
<p id="content-paragraph">Some content text here</p>
<img src="./images/front-page-image-1.png" id="content-image" />
</div>
</body>
</html>

Now lets save our work by pressing CTRL + S. After we save our work we will upload our index.php file and our new head.php file to the server. If all is good we should see the same site, but with the menu that points to the correct .php files.

Now we need to do the same for all the other pages on our site. This is easier then you may think. We simply open up each page in our text editor. Then open up our Find And Replace tool. And paste the correct contents into the find and replace fields of our find and replace tool.

Find


<html>
<head>
<title>My Site</title>
<link href="./css/style.css" />
</head>
<body>
<img src="./images/logo.png" id="logo" />
<ul id="menu">
<li><a href="./">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./products.html">Products</a></li>
</ul>

Replace


<?php include "head.php" ?>

Now we click the Replace All button and all the content will be replaced as needed. Next we press CTRL + S to save our changes. We repeat this with all of our website files. Then we upload all of them to our server.

Final Words

What we have pretty much done is the equivalent to the <link> and <script src=”script.js”> methods you may use regularly. Chances are you only have to modify the file and it updates on other pages. Now the same is true with you menu as well.

Now that we have made these changes. Updating the site becomes much easier. Lets say we wanted to add a feedback page to our site. And that feedback page needed to have a link in our site menu.

Before this meant we needed to add the same link to each page of the site. Now we only need to open up our head.php file and add the link once. Then re-upload the file to the server. Saving us time in the future.

I have a lot of gripes about PHP. Because it isn’t perfect for everything. And when attempting more complex things, PHP becomes less of a choice for me, because it becomes more time consuming to do something. But I do give credit where credit is due, and this is a very time saving method. And it is in my opinion a great way to start in your PHP journey. It is something practical for you to use immediately with PHP.

If you like my work show support on my Patreon