Home arrow HTML arrow Page 4 - Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
HTML

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.

Author Info:
By: Annette Tennison
Rating: 4 stars4 stars4 stars4 stars4 stars / 40
January 05, 2002
TABLE OF CONTENTS:
  1. · Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
  2. · Creating the database
  3. · Displaying the menus in Internet Explorer
  4. · Displaying the menus in Internet Explorer (contd.)
  5. · Conclusion

print this article
SEARCH DEVARTICLES

Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML - Displaying the menus in Internet Explorer (contd.)
(Page 4 of 5 )

We use the $nodeResult resource to loop through each of our menu headings and display them. Each one is displayed as a <td> tag, using the style classes we talked about earlier:

</head>

<body bgcolor="#FFFFFF">

<table width="250" border="0" cellspacing="0" cellpadding="0">

<?php



while($node = mysql_fetch_array($nodeResult))

{

?>

<tr>

<td class="root_td">

<img id="img_root_<?php echo $counter; ?>" onClick="ToggleNode(td_root_<?php echo $counter; ?>, img_root_<?php echo $counter; ?>)" border="0" src="minus.gif" style="cursor:hand">

 <?php echo $node[1]; ?>

</td>

</tr>

<tr>

<td id="td_root_<?php echo $counter++; ?>" class="child_td">

<table width="100%">


As you can see, the <img> tag calls the JavaScript function "ToggleNode" whenever it is clicked on. We are using a counter to give each <td> tag a unique id. The id of each <td> heading tag and a pointer to its expand/collapse image is passed to the ToggleNode function.

<?php



$sql = "select * from nodes where parentId = {$node[0]} order by title asc";

@$childResult = mysql_query($sql);



while($child = mysql_fetch_row($childResult))

{

?>

<tr>

<td class="child_td">

<a href="<?php echo $child[2]; ?>">

<?php echo $child[1]; ?>

</a>

</td>

</tr>

<?php

}

?>


Once the menu header <td> tag is displayed, we re-query the "nodes" table to get a list of its menu items. Each of these items will have a parentId matching the nodeId of its menu heading. The <td> tag uses the "child_td" class to set the style of each menu item, and the URL field is also used to display the text as a hyperlink.

We have used the "mysql_fetch_row" function to retrieve each row from the queries resource object. If we wanted to refer to each field by its name, we couldíve used the "mysql_fetch_array" function instead.

To finish up, we close all open table tags and close both the <body> and <html> tags:

</table>

</td>

</tr>

<?php

}

?>



</table>

</body>

</html>


Once you have saved your script in a directory that can be read by your web server, fire it up in your browser to see it in action. I am using Internet Explorer 6, however I have also tested it in Internet Explorer 5 and 5.5, and it worked fine. Hereís how it looked in my browser:

All headings collapsed:

Our menu with all headings collapsed

The "ASP.NET Books " and "C# Books " headings expanded:

Our menu with two headings expanded

Collapsing a heading:

Collapsing a menu heading with a single click

Letís try adding a new menu heading, just to see how easily it really is. Jump back to the MySQL console window and enter the following SQL command:

insert into nodes values(0, 'XML Books', '', 0);

Press Enter, jump back to Internet Explorer, and click on the refresh button. You should have a new menu heading:

Our new XML Books heading
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials