PHP TIPS AND TRICKS - Side Navigation with PHP

This tutorial is intended for the PHP programmer interested in creating a tiered side navigation panel for their website.

(For more about Zend Technologies, please visit www.zend.com)

A basic understanding of PHP and using arrays will be given in this tutorial. Knowledge of the intended use of arrays and the purpose of tiered side navigation will be helpful, although this tutorial should help illustrate both.

Readers interested in learning more about Arrays and PHP before reading this tutorial are encouraged to do so by referring to:

Zend.com's PHP manual entry on Arrays

http://www.zend.com/manual/language.types.array.php

Zend.com's PHP manual entry on the array ( ) function

http://www.zend.com/manual/function.array.php

Overview

This tutorial will show you how to lay out your side navigation and populate an array with the intended values.

An array in PHP is similar to a database in many ways, most noticeable as an ordered map. An ordered map is a structure that matches stored values to “keys” ( identifiers ) . Because these values and keys exist, an array can be organized and optimized in several ways, making it a highly efficient way of retaining and calling data. Because you can have another PHP-array as a value, arrays are the ideal way to store tiered side navigation, similar to array trees.

Learning Objectives

In this tutorial, you will learn how to use the following PHP functions and control structures respectively:

array ( )

foreach ( )

while ( )

Definitions

Array: an ordered map that maps values to keys.

Side Navigation: The method of providing links to pages within your website via a column located on the side of the webpage.

Tier/Tree: A method of organizing directory structure or data into groups, subgroups and sub-subgroups. ( i.e. within a group of food, there can be the subgroup fruits and vegetables and within the subgroup fruits, there can be the sub-subgroup apples, oranges and grapes ) .

Key: A key is either a positive integer or a string.

Value: A value can be anything – it is identified by a key.

Background Information

Arrays allow you to interact and work with data in various ways. They are the life blood of most database queries and are necessary for storing, managing and using sets of data efficiently.

There are a number of different types of arrays. Both simple and multi-dimensional arrays are supported, and can either be created by the user or by another function, such as “database”_fetch_array ( ) .

Because databases are a popular source of obtained arrays, there are specific functions that populate arrays by handling database queries, as well as several functions that return arrays independent of a database.

Please refer to the Arrays section of the manual for a detailed explanation of how arrays are implemented and used in PHP.

Prerequisites

As a prerequisite to understanding arrays and their application to side navigation, it is recommended that you review the manual entry on arrays. This tutorial will cover some array basics, but for more complex use, the manual is an excellent tool. The manual gives a nice overview of arrays and how to use them:

http://www.zend.com/manual/language.types.array.php

Arrays

The types of arrays that will be covered in this tutorial are called Single Dimensional and Multi-Dimensional. The more “dimensional” the array the more complex it is.

A good way to conceptualize the difference between the array types is like a directory structure, where a single dimensional array would be a set of values for a single key, and a multi-dimensional array could contain a wide variety of values for a number of different keys. For example, if a single dimensional array contained information on fruits, it could contain values such as apples, oranges and grapes. However a multi-dimensional array could contain information on food as the first dimension, breaking down into the five major food groups as the second dimension and finally breaking down values ( i.e. apples, oranges and grapes in the fruits & vegetables section ) into their appropriate food groups.

In order to create or modify an array, one generally sets the values. This is done by assigning values to an array by using a bit of syntax you will become very familiar with, the square brackets [ ] . This is done in a couple of different ways, for example:

$ variable [ keyname ] = value;

$ variable [ ] = value;

The second example is often seen in form submission when using PHP to populate an array. For example, if you have three fields for visitors to enter names in ( i.e. for e-mail references ) , you could use something like the following:

< ! -Script Start-- >

<

<

< /

Having collected the data, let's try to output that data. This is a rather long way to output array data, but shows more clearly how the array data is stored:

< ! -Script End ->

Go ahead and copy that into your test.php file ( delete the short sentences in the middle, between the sections of code ) and take a look at the output. When you open the script in the browser, you should see something like this:

Type in three email addresses and click on the “Refer” button. The three e-mail addresses will then appear on the page.

In this tutorial, the array example that will be explored involves side navigation. There are easier ways both to populate the arrays and to output the information, especially when incorporated either within a class or database, but for the purposes of this tutorial, an array will be used.

This array will be manually populated so as to show both the construction and output features of an array.

Hopefully, after having read the introduction and the example, you now have an understanding of how arrays function. In the following script example, the popular tiered ( or tree ) side navigation is explored as an array function. However, remember that arrays can be more efficiently populated and called, in this example we are populating the array manually for educational purposes.

The wonderful thing that arrays are famous for are the wide variety of methods at your disposal both for input and output of data. Arrays are found in most PHP applications and are very useful tools when manipulating something as complex as database information or as simple as form pull down menus.

Side Navigation

The array functions in this tutorial cover a popularly requested item, side navigation. By creating a tiered side bar for navigation on your site, it is possible to conceal a large number of links beneath a smaller number of links, thereby allowing the user to select the area that they would like to expand and obtain more links for. This can aid in condensing a large site tree into a smaller navigational area, much like the directory / sub-directory relationship within your computer.

Upon selection of a category ( or directory ) , the visitor is given the choices below that parent link.

Code Flow

First off, the arrays need to be populated with two kinds of links. The first kind of link ( found in the top levels ( or any level that has links beneath it ) is a reference link, that calls a portion of the script in order to open another layer with additional links. The second kind of link is a regular type of link, one that links to either a separate page on your site or an external link on the internet. The first kind of link looks like those found in the $ headers array:

$ headers

The submenu.php link tells the array to look for the variable number at the end of that link ( 1,2 or 3 ) and reference it for available additional links. This is also how you set up the array for the headers, using the

Now repeat the same step, but set the values for each sub header with their additional links. This means that when ‘Header ‘1 is clicked, three links will appear and their content will be derived from these arrays.

Links that appear when ‘Header1' is clicked:

Links that appear when ‘Header2' is clicked ( pay special attention to the “

Links that appear when'

Links that appear when Header3 is clicked:

Now that your arrays are populated, the script needs to be programmed to output the top layer only, but to then output the additional layers when they are clicked ( and only when they are clicked ) . For this, use the

http://www.php.net/manual/en/control-structures.foreach.php

What this function does is output our information in the

echo

Then we tell the script that if it receives a call from those keys ( specifically the one called ‘Header1' ) and the link contains the variable

foreach (

echo

}

}

We then do the exactly same thing for ‘Header2' and

foreach (

echo

Now for the interesting part: a sub layer to a sub layer. This means that the script will output a third sub layer, embedding an even deeper tree to your side navigation.

Again we tell the script that if it receives a call from those keys ( specifically the one called ‘

{

foreach (

{

echo

if (

}

}

}

}

Finally, almost identical to our ‘Header1' layer, we tell the script that if it receives a call from the third key ( specifically the one called ‘Header3' ) and the link contains the variable $ s equal to 3, it should output our final array, ‘ $ sub_3'. This means that if ‘Header3' is clicked, our ‘sub_3 array' will output, giving us the output shown in the graphic below the code snippet.

foreach (

echo

}

}

That's all there is to it, As mentioned above there are a lot more creative ways ofpopulating arrays and displaying information, incorporating a database or a special class. The basics are just loading arrays and outputting them, as detailed above, when specific areas are clicked on. It is readily apparent how this can provide a nicely organized side navigation piece to your existing website.

<

<

< ?

$ headers

foreach (

echo

if ( (

foreach (

echo

}

}

if ( (

foreach (

echo

if ( (