Coding Server-side Menus

Client-side or browser-side menu systems are quite common. A look at sites such as www.dynamicdrive.com reveal quite a few. But what is more of a pick these days are menu systems which can be built at the server side-a concept largely brought in by ASP.NET, and menu systems which are supported by a wide variety of Web browsers (ideally browser independent). If you are a PHP developer and missing a cool server-side menu system, here is PHPLM, ie, PHP Layers Menu. This PHP-based menu system supports wide variety of Web browsers including IE, Mozilla, Netscape and Opera.

Get started



We will build a simple menu system (as shown in the screenshot) using a text file that describes the menu items. We will use PCQLinux 2004. (We proceed with the assumption that you have already installed PHP on PCQLinux 2004.) On this month's PCQuest Essential CD, you will find the PHPLM package. Extract the archive named phplayersmenu-3.2.0-rc.tar.gz, which will produce a directory, phplayersmenu-3.2.0. Under this directory you will find numerous files, which are examples of how to use the package. We will start on a clean slate. 

Direct Hit! Applies to: Web developers USP: How to create a server-side and browser-independent menu system using PHP Links: http://phplayersmenu.sourceforge.net, www.php.net On Essencial CD: systems\labs

Create a directory say, menutest under the /var/www/html directory. Copy the sub-directories named libjs, menuimages, templates, lib and menuicons in the directory phplayersmenu-3.2.0, to the menutest directory. Also copy the file named layersmenu-gtk2.css to the menutest directory. 

The menu items



What follows is the content of a text file, defining the menu items, for our menu system. 

.|PCQuest|https://www.pcquest.com/|PCQuest||_blank



.|Articles||PCQuest Articles


..|Developers


...|.Net|dotnet.php|.Net|sourceforge.net_images_favicon.png


...|Java|java.php|Java|sourceforge.net_images_favicon.png


..|Linux


...|Desktop|desktop.php|Desktop Linux|sourceforge.net_images_favicon.png


...|Server|server.php|Server Linux|sourceforge.net_images_favicon.png

The lines above follow the syntax mentioned below:

|||||

Here in the syntax, dots define the hierarchical placement of the item in the menu. Note that the menu items 'PCQuest' and 'Articles' are at the top level and hence a single dot for them. Now 'Developers' and 'Linux' are below 'Articles' and hence prefixed with two dots. Very obviously, the menu items '.Net', 'Java', 'Desktop' and 'Server' which are at the third level are prefixed by three dots. The is the display name for the menu item and specifies the URL of the page to be displayed when the menu item is clicked. Note that in case of the menu items such as 'Articles' you can omit the URL. The is the text displayed when the mouse is moved over the menu item. Next, an image or icon can be displayed besides a menu item. Note that the images should be placed in the sub-directory menuicons. For this example we have selected the image file named sourceforge.net_images_favicon.png, which is already present in the menuicons directory. Hence with you specify the name of the image file. Finally with you can specify where will the new page open when you click on the menu item. The possible values are same as for the target attribute of the HTML anchor tag (), ie _self, _parent, blank, _top.Note that if you don't want to specify a value-say, if you don't want to display an icon - then you can leave the place for it empty. For example, in the case of the first menu item namely PCQuest, we did not want an icon and hence no value for it.

Switching from a horizontal to a vertical menu system is only a matter of changing a single line of code

.|PCQuest|https://www.pcquest.com/|PCQuest||_blank

Save the above contents in a file named menuitems.txt in the directory /var/www/html/menutest

PHP code for the menu system



Next we need to write the PHP code to display the menu system comprising the menu items, defined in the menuitems.txt. 

require_once ("lib/phplib.php");


require_once ("lib/layersmenu-common.inc.php");


require_once ("lib/layersmenu.inc.php");


$menu = new LayersMenu();


$menu->setMenuStructureFile("menuitems.txt");


$menu->parseStructureForMenu('testmenu');


$menu->newHorizontalMenu('testmenu');


$menu->printHeader();


?>









$menu->printMenu('testmenu');


?>











-- page content goes here --




$menu->printFooter();


?>

The page starts with including a number of JavaScript and PHP files. Note the lines:

$menu->setMenuStructureFile("menuitems.txt");


$menu->parseStructureForMenu('testmenu');


$menu->newHorizontalMenu('testmenu');

The above lines pick the menu structure from the file named menuitems.txt and set up a horizontal menu system as specified by the function newHorizontalMenu( ). Save the above file as menu.php and access it using the

URL http:///menutest/menu.php, to see the menu system in action. 

To turn this horizontal menu system into a vertical one, you only need to substitute the following line in menu.php

$menu->newHorizontalMenu('testmenu');

with






$menu->newVerticalMenu('testmenu');

PHPLM does not stop here. It supports picking up the menu items from a database and a tree like menu system similar to Windows Explorer or any file manager. 

Shekhar Govindarajan IT4Enterprise