Home arrow PHP arrow Page 3 - PHP and JavaScript, Pooling Your Resources (continued)

What Does PHP Do? - PHP

In this article, you will learn how to combine PHP and JavaScript to create two SELECT menus, one containing categories, and the other containing only those options applicable to the category selected.

  1. PHP and JavaScript, Pooling Your Resources (continued)
  2. Separating the Logic
  3. What Does PHP Do?
  4. Main Layout
  5. Is it PHP? Or Javascript?
By: Brian Vaughn
Rating: starstarstarstarstar / 22
September 27, 2005

print this article



The reasons for using HTML in our project are obvious, as are the reasons for using JavaScript (hopefully) – but why do we need PHP? PHP provides us with an enormous range of programming options, one of which is an easy mechanism through which to query a MySQL database and receive a result set. This is primarily what we will be using our helper function to do. Let’s take a look now at the code:

      function get_parent_menu() {
            $select_menu      = NULL;
            # establish connection to the MySQL server
            mysql_connect( 'localhost', 'root', '' );
            mysql_select_db( 'devshed' );           

            # append empty option (to be default)
            $select_menu      .= "\t" . "<OPTION
onMouseOver=\"show_hint( 'Please select an option from the list
below.' );\" onMouseOut=\"set_timeout();\" value=\"\" SELECTED>-
- select - -</OPTION>" . "\r\n";     

            # retrieve a list of all parent values
            $db_query   = 'SELECT * FROM php_js_parent_menu;';
            $db_result  = mysql_query( $db_query );         

            # output a SELECT menu option for each row returned
            if ( $db_result ) {
                  while ( $l_db_row = mysql_fetch_assoc( $db_result ) ) {                 

                        # retrieve and format (if necessary) SQL
                        $l_description    = $l_db_row
                        $l_id       = stripslashes( $l_db_row
['id'] );
                        $l_name           = stripslashes
( $l_db_row['name'] );                 

                        # output SELECT menu with JS attributes
                        $select_menu      .= "\t" . "<OPTION
onMouseOver=\"show_hint( '$l_description' );\"
onMouseOut=\"set_timeout();\" value=\"$l_id\">$l_name</OPTION>" .

                  } # END while rows
            } # END if rows           

            # return SELECT menu
            return $select_menu;           

      } # END get_parent_menu()

As you can see above, the ‘get_parent_menu’ function does two basic things. First, it queries the SQL database for all values stored in our ‘parent_menu’ table. It then takes those values, and outputs them in the form of <OPTION> tags for our ‘parent’ SELECT menu.

The only thing that may need additional explanation here is the use of the onMouseOver and onMouseOut events. The application we are developing is pretty self-explanatory to an end-user, but it never hurts to make our systems a little easier to use and understand to someone who may not be adept with computers. Because of that, we have chosen to implement a “hint box” to display helpful tips to the user in real-time. When the user hovers over a menu option, a brief explanation of that option will be displayed in our hint box. When the user moves on a timeout is set to erase the hint after a couple of seconds. This is all done through the use of the JavaScript functions we discussed in the previous section.

We’re now ready to move on to our application’s stylesheet.

How’s it Looking?

Our stylesheet, “stylesheet.css”, is very simple. One class is used to control the appearance and formatting of our SELECT menus, and another is used to control the previously mentioned “hint box”. Those classes are as follows:

select {
      width: 300px;
      font-family: Tahoma, Arial, Helvetica, sans-serif;
      font-size: 11px;
#hint_box {
      width: 290px;
      background-color: #DDDDDD;
      border: 1px solid #000000;
      padding: 5px;
      font-family: Tahoma, Arial, Helvetica, sans-serif;
      font-size: 11px;

There is nothing too complex here, so let’s move on now to our index file.

>>> More PHP Articles          >>> More By Brian Vaughn

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: