Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
Web pages are very flexible, and are used in more places than just the Internet. In this article, Annette will teach us how to create a PHP/DHTML driven menu system that uses MySQL to store its menu headings and items.
Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML - Displaying the menus in Internet Explorer (Page 3 of 5 )
As I mentioned earlier, our menu will use some simple DHTML to provide expand/collapse functionality through the browser You should download the support material at the end of this article if you want the complete version of the script to test on your server.
Our script starts by connecting to the MySQL server:
$sqlConn = mysql_connect("localhost", "admin", "password") or die("Couldn't connect to database");
You should change "admin" to a valid MySQL username, and "password" to a valid MySQL password. If the connection to our database server fails, we use the die() command to output an error message to the browser and end our scripts execution.
Next, we use the "mysql_select_db" function to create a connection to our "menu" database:
$dbConn = mysql_select_db("menu", $sqlConn) or die("Couldn't connect to database");
Our menu items will be retrieved in a two-step process. Firstly, the menu headings are retrieved (those are the items with parentId of 0) and stored in the $nodeResult resource:
$sql = "select * from nodes where parentId = 0 order by title asc";
$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;
Because we are designing for Internet Explorer specifically, we create some style classes that use the padding style attributes. They allow us to set the space around any object that supports the "padding" attribute, such as <td>, <p>, <div>, etc:
<title> Dynamic Menus </title>
"nodeObject" is a pointer to any object that supports the "display" style attribute. In our case, we will be passing a pointer to a <td> tag. The "imgObject" is a pointer to an <img> tag. We will use the "imgObject" item to display plus and minus buttons when our menu items are collapsed and expanded respectively.
none: If the display attribute is set to "none", then the <td> tag (and its contents) isnít displayed on the page.
inline: When the display attribute is set to "inline", then the <td> tag (and its contents) is displayed inline, as part of the HTML document.
block: Setting the display attribute to block positions the <td> tag as part of the HTML document, but all tags around it are moved to accommodate it.
As mentioned above, the "nodeObject" is really just a pointer to a <td> tag. The function checks the display attribute of the object, and if itís empty or "inline", then its display attribute is set to "none", resulting in the entire <td> tag being hidden.
Remember also, that a pointer to an image object is passed to our "ToggleNode" function? This is the image that we click on to expand/collapse the menu items, and is displayed as either a plus or minus sign. When the menu items are collapsed, it is set to "plus.gif", which is a picture of a plus symbol, indicating to the user that it is collapsed and can be expanded.
nodeObject.style.display = 'inline';
imgObject.src = 'minus.gif';
The contents of the "else" braces is the exact reverse of the content in the "if" braces: If the menu item is currently hidden, then its display attribute is set to "inline", making it visible on the page.