Separating the Logic - 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.

TABLE OF CONTENTS:

By: Brian Vaughn

Poor Best

Rating:

/ 22

September 27, 2005

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Although more complex in nature than our previous application, this example will still be relatively simple. However it is good practice to separate the various elements of our project so that the logic and the display do not get unnecessarily mixed together. To help keep things separate, we will create the following files:

index.php This is our main display file, containing mostly HTML.

functions.php A helper file, used to retrieve SQL information.

external.php PHP file used to generate external Javascript code.

javascript.js Javascript helper file, contains misc. JS functions.

stylesheet.css Stylesheet for our document, controls visual layout.

Again, many of these files could be combined, but by separating them we are making our code easier to maintain and expand later. Let’s take a closer look now at each of the files.

What About the Javascript?

Our Javascript file, ‘javascript.js’, contains five basic functions. The first will look familiar, but we made a couple of subtle changes that may warrant explanation:

// call to external Javascript/PHP file and pass Parent ID
function update_child( p_parent_option ) {

      // create new script element and set its relative URL
(including ID argument)
      script = document.createElement( 'script' );
      script.src = 'external.php?parent_id=' +
p_parent_option.value;

// attach (load) script element to document head
document.getElementsByTagName( 'head' )[0].appendChild( script );
}

As you can see from its commenting, the ‘update_child’ function receives an OPTION tag as a parameter (more specifically, the OPTION tag that has just been selected by the user). It then creates a new script element as before, and attaches it to the document’s <head>. One difference in this updated version is that it also passes a URL argument along to the external JavaScript file: the currently selected OPTION’s value, (which is in this case the primary key for our ‘parent_menu’ SQL record).

The other four functions are also pretty simple, but can be very useful in terms of user interface design. As you will see shortly, our basic HTML file contains a <pre> element with the ID ‘hint_box’. This box is set to display “Ready…” by default, but will be updated when our ‘parent’ menu’s onChange event is fired. This is done in order to display helpful information to the user about our ‘parent’ SELECT menu and the information it contains. The functions we’ve written to do this are as follows:

// update hint box value
function display_hint( p_hint_text ) {
            document.getElementById( 'hint_box' ).innerHTML =
'<strong>Status</strong>: ' + p_hint_text;
}

// clear interval (if one has been set) & update hint box value
using helper function
function reset_hint() {
            window.clearInterval( document.getElementById
( 'hint_box' ).interval );
            display_hint( 'Ready...' );
}

// clear interval (if one has been set) & update hint box value
using helper function
function show_hint( p_hint_text ) {
window.clearInterval( document.getElementById
( 'hint_box' ).interval );
display_hint( p_hint_text );
}

// set new interval
function set_timeout() {
document.getElementById( 'hint_box' ).interval =
window.setInterval( 'reset_hint()', 2000 );
}

Each function is relatively simple, and probably self-explanatory with the help of the inline commenting. However, let’s take a brief look at each to make sure there is no confusion.

The ‘display_hint’ function receives as a parameter a simple string of text. It then appends to that string the text “Status: ”, and updates our ‘hint box’ to display the resulting string. This function acts as a helper for ‘reset_hint’ and ‘show_hint’, which we will now look at.

The ‘reset_hint’ function does two things. First it clears any interval that may be set for our ‘hint box’, then it updates the status text to show “Ready” using our helper function, ‘display_hint’.

The ‘show_hint’ function acts in much the same way as the ‘reset_hint’ function does. First it clears any pre-existing interval, then it updates the ‘hint box’ display value using our helper function, ‘display_hint’. The only exception is that ‘show_hint’ displays the text it receives as a parameter, instead of displaying a default value.

Lastly, the ‘set_timeout’ function simply creates an interval, and attaches it to our ‘hint box’. This interval then waits for approximately two seconds to elapse before calling the ‘reset_hint’ function to clear any rollover text and return to the default “Ready” message.

Next: What Does PHP Do? >>