Home arrow HTML arrow Page 3 - 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
(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:

<html>

<head>

<title> Dynamic Menus </title>

<style>

.root_td

{

background-color: #000000;

color: #FFCF00;

font-family: Verdana;

font-size: 8pt;

font-weight: bold;

height: 22;

padding-left: 5;

}

.child_td

{

background-color: #D1D1D1;

color: #000000;

font-family: Verdana;

font-size: 8pt;

font-weight: bold;

text-decoration: underline;

height: 22;

padding-left: 10;

padding-right: 10;

padding-bottom: 3;

}



body

{

color: #000000;

font-family: Verdana;

font-size: 8pt;

font-weight: normal;

}



a

{

color: #000000;

}

</style>


We will use one JavaScript function to expand and collapse our menus. The function we will create is named "ToggleNode" and accepts two arguments. Its prototype is shown below:

ToggleNode(nodeObject, imgObject)

"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.

The complete code for the "ToggleNode" JavaScript function looks like this:

<script language="JavaScript">

function ToggleNode(nodeObject, imgObject)

{

if(nodeObject.style.display == '' || nodeObject.style.display == 'inline')

{

nodeObject.style.display = 'none';

imgObject.src = 'plus.gif';

}

else

{

nodeObject.style.display = 'inline';

imgObject.src = 'minus.gif';

}

}

</script>


The "ToggleNode" function takes advantage of Internet Explorers DOM (Document Object Model) and CSS (Cascading Style Sheets). Our menu items are each <td> tags, and expose their "display" style-attribute through JavaScript. The "display" attribute controls how that <td> tag is rendered on the page, and has three possible options:
  • 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.
Letís take a brief look at our "ToggleNode" JavaScript function:

if(nodeObject.style.display == '' || nodeObject.style.display == 'inline')

{

nodeObject.style.display = 'none';

imgObject.src = 'plus.gif';

}


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.

else

{

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.
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