Entries tagged with ‘PHP’

In the simple PHP include article I covered how to re-use one file in many pages. If you’re new to using PHP, read that first. Now it’s time to make file includes a bit more useful. In this article, we’ll include one file for main navigation, but make individual menu items “live” depending on the page they appear on.

This is an article in the “Designer PHP” series of guides to using PHP for interface production. Previously:

A Simple Include

To perform this feat, we need to do three things:

Declare a variable on each page to tell the menu what markup to display.
Create a file with “live” and regular markup for each menu item. Add PHP to enable us to switch the markup according to the variable.
Include the menu on every page.

Declare the PHP Variable

The variable declaration must be in every page the menu will appear on. It must be before the line of code that includes the menu so the menu can pick it up. I would normally insert it above the <!DOCTYPE… to separate the PHP from my HTML as much as possible. This is the variable declaration for the home page:

(This variable declaration or PHP statement has two key parts: The variable reference, or name $page, and the variable value "home".)

<?php 
$page = 'home'; 
?>
<!DOCTYPE…

The variable name $page does not change. You can change it to whatever you like, just make sure it’s the same on every page.
The value 'home' will be different for each page to tell the menu what to display.

I usually have the value match the area of the site, so in the example we’re building it will be 'home' on the home page, 'about' on the about page, and so on. You can change the value to whatever you like, and have as many values as you need for individual pages.

Create the Menu File to be Included

For our purposes, we’re going to create a dynamic menu for a fictitious site with three pages: “Home”, “About” and “Contact”. You can extend this to apply to as many pages as you like. This is the basic HTML for the menu:

<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>

We want two different sets of markup for each menu item: “live” markup and regular markup. In this example we’re going to attach a class to the “live” item — <li class="live"> — and wrap the link in an <em> to differentiate it even if styles are disabled. For example, on the home page, the “live” home menu item will end up looking like this:

<li class="live">
<em><a href="index.php">Home</a></em>
</li>

To switch between “live” and regular markup, we will use PHP “if, and else statements”. This is the menu HTML with PHP:

(White space and line breaks inserted for legibility. PHP is emphasised in red. Disable styles to see it in italics if you need to.)

<div id="nav">
<ul>

<?php if ($page == 'home') { ?>
<li class="live">
<em><a href="index.php">Home</a></em>
</li>
<?php } else { ?>
<li><a href="index.php">Home</a></li>
<?php } ?>

<?php if ($page == 'about') { ?>
<li class="live">
<em><a href="about.php">About</a></em>
</li>
<?php } else { ?>
<li><a href="about.php">About</a></li>
<?php } ?>

<?php if ($page == 'contact') { ?>
<li class="live">
<em><a href="contact.php">Contact</a></em>
</li>
<?php } else { ?>
<li><a href="contact.php">Contact</a></li>
<?php } ?>

</ul>
</div>

Copy the code to a new file in your editor. Save it as nav.php inside an inc directory in your site root.

I have deliberately separated the PHP and HTML as much as possible. There are other ways to achieve the same result, but this removes PHP completely from within HTML tags, hopefully making it easier to read and edit.

Let me explain what the PHP does: Each menu item is marked up in two different ways: the “live” version and a regular version. The variable we declared tells the PHP in the menu which to display. For example, if $page = 'home'; is declared, the if statement ( <?php if ($page == 'home') { ?> ) will display the “live” markup. If home is not declared then the <?php } else { ?> statement takes over, and the regular markup is displayed.

To make any of the other menu items “live”, you adjust the variable. The menu picks it up and switches the HTML. Simple. That’s our menu created and ready for use. The next step is to include it on every page.

Include the Menu

To do this we use the same technique explained in the simple include article, except this time we’re including the menu file, which we’ve called nav.php. This is the PHP you need:

<?php include 'inc/nav.php'; ?>

Insert that in each page at the point you wish the menu to be displayed. The path ( 'inc/nav.php' ) pointing to the nav.php file is relative — make sure you change it if your pages are not all in the site root. Each of your site pages will now look something like this (with the variable value * edited as required):

<?php 
$page='*'; 
?>
<!DOCTYPE… >
<html>
<head>… </head>
<body>

<?php include 'inc/nav.php'; ?>

…content

</body>
</html>

That’s all! Now you can get to the fun bit of styling your menu with CSS. If you need to change anything, you simply edit the nav.php file and every page will be updated. Easy, isn’t it? Let’s end with a few tips about errors and security.

PHP Error Debugging

If you get a heap of PHP errors on a page instead of the menu, the chances are your include file path is wrong. Check it is pointing correctly to nav.php from the location of the page calling it.

It’s useful to know that you can navigate straight to the include file directly in your browser and see the markup.

(E.g. http://yoursite.com/inc/nav.php)

If the file path is wrong, you will get a 404 error.

If no menu items are active, or one is incorrectly active in a certain page, check the variable declared at the top of the page. Does it match the on in the if condition that precedes the item you want “live” in nav.php?

If you’ve done all that, and you’re still having problems, check your syntax line by line. The chances are you’ve missed a tiny mistake. It’s a pain but a good way to learn.

Security

I grabbed a moment with web application security guru, Chris Shiflett to have him check my PHP. This is what he said:

Whenever you’re working with a server-side programming language such as PHP, it’s good to be aware of potential security problems, because a simple mistake is all it takes to create one. If you follow Jon’s example, you’re safe, but what happens when you need to modify it to suit your own unique needs?

Rather than complicate a wonderful tutorial, I’ll just point out that you should research further before doing either of the following:

Add any additional PHP code to your includes.

Use a variable in your include statement, e.g. include "inc/$template".

If you need to do either of the above, you should first read a little more about remote code execution.

Can You Translate?

After a wonderful response to the em and elastic layout article, I’d love to hear from anyone who’d like to translate this, or any other article in the series. I’ll be happy to host your work, like the previous Italian translation, or you’re welcome to publish it yourself. Just drop me a line.

Years ago I was introduced to PHP. Since then, using simple PHP includes has saved me huge amounts of time in revising and editing HTML, so I thought I’d share some basic tips and hopefully save you some time, too.

This is the first article in a series of basic designers’ guides to using PHP for interface production.

Including CSS style sheets, JavaScript files, and image files in HTML pages will be familiar to most people. PHP includes work in a similar way: Create one file with a chunk of HTML in it (like a menu or a footer) and include it in multiple pages using a bit of PHP. Change the contents of that one file and every page that includes it displays the change. Sexy, eh? Let’s get started:

What is PHP?

In case you don’t already know: PHP is a programming language that works on the server—“server-side scripting”—in much the same way that JavaScript works in the browser (“client-side scripting”).

All good hosting services have PHP installed on the server. You can find out what version and modules you have installed using phpinfo(). PHP also powers many of the most popular sites in the world. However, all we need to know for our simple purpose is this:

PHP allows us to create a single file on the server, and include the contents of that file in multiple pages before they are delivered to the browser.

Creating PHP Files

Make sure your hosting service supports PHP. Then, instead of saving your site files with a .html or .htm extension, save them with a .php extension. They won’t render any differently in the browser, the extension just tells the server that the file may contain PHP which will need to be executed before the file is served.

Before creating PHP includes, I usually create the first page of a site in the normal way, but save it as .php. I only pull chunks of HTML out to includes when I start building other pages in the information architecture.

Example: A Regular HTML Footer

Web sites usually have a footer that is constant across all pages making it perfect to be included using PHP. This is a simplified example of a regular page with the footer included inline as usual:

<!DOCTYPE… >
<html>
<head>… </head>
<body>

…main content

<div id="footer">
…footer contents
</div>

</body>
</html>

Making the Footer a PHP Include

Create a directory in your site root called inc to contain all of your includes and keep your files organised.
Remove the whole of the footer markup and paste it into a new file in your editor. Save that file to the inc directory as footer.php (it can be whatever you wish).
In the regular site pages, where the footer would usually be, replace it with a bit of PHP to include the footer.php file:

<?php include ("inc/footer.php"); ?>

Important: The file path ("inc/footer.php") is relative to the location of the page including it — make sure it points to the right place from any given page in your site.

With that bit of PHP in your pages, the footer.php will be included in the page at that place.

Change the markup in footer.php and it will change for every page where you have included it. Now, when you need to change the date in the footer to include the new year, or change anything about it, you only have to change it once in the include. That’s it! You can make any bit of markup an include.

More Complex Includes

PHP becomes even more useful for designers when the state of HTML objects needs to change depending on what page they appear in. For example, the markup and style of main navigation items will change to indicate which item is active. I often apply a class and either disable a link or wrap it in <em> tags. You can do all that in a single menu include. In the next article I’ll show you how. In the meantime, if this is new to you but you’re enthused by it, take a look at if/else statements yourself.

Entries tagged with ‘PHP’

Display:

Tags

Designer PHP: A Dynamic Menu with If and Else