PHP and JavaScript, Pooling Your Resources (continued)
(Page 1 of 5 )
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.
What We’ve Learned So Far
In part one of this article we learned about PHP’s ‘header’ function, and how it can be used to send text to a browser in a variety of ways. We also learned how to attach additional PHP/JavaScript files to a web page after the page has finished loading. Using these two bits of information, we created a simple application that attached an external PHP file (rendered as a JavaScript file) each time the user clicked an anchor tag on our original page. This simple example allowed us to track and increment a PHP SESSION variable each time the link was clicked, as well as update the content of our original page depending on what value that variable contained, without ever reloading the original page.
A simple example, this application is not very useful by itself. However, our main goal was to present an easily understood model of interaction between PHP and Javascript. Now that we understand the basics, we’re ready to move on to a more practical example.
What Will Our Application Do?
We are now ready to create a more useful implementation of the tactics we discussed in part one, but what should our sample application do? There are a variety of possibilities so let’s just pick one of the more common ones.
SELECT menus are fairly common to dynamic websites. Furthermore, it is often useful for the values in one SELECT menu to depend in some way on values stored within another menu. Our example application then will create two such menus – one containing categories, and the other containing only those options applicable to the category selected. For the purposes of our example, we’ll create two categories: “Days of the Week” and “US Timezones”.
In order to continue following along you will need access to a MySQL database and a web server supporting PHP. Before beginning you will need to run the following SQL statements:
-- Generate SQL Tables
CREATE TABLE `php_js_parent_menu` (
`id` int(2) unsigned zerofill NOT NULL auto_increment,
`name` varchar(25) NOT NULL default '',
`description` text NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `php_js_child_menu` (
`id` int(2) unsigned zerofill NOT NULL auto_increment,
`parent_id` int(2) unsigned zerofill NOT NULL default '00',
`name` varchar(25) NOT NULL default '',
PRIMARY KEY (`id`),
KEY `parent_id` (`parent_id`)
);
-- Insert main parent menu options
INSERT INTO `php_js_parent_menu` VALUES (01, 'Days of the Week', 'Displays each day of the week.');
INSERT INTO `php_js_parent_menu` VALUES (02, 'US Timezones', 'Displays a list of all US Timezones.');
-- Insert child menu options
INSERT INTO `php_js_child_menu` VALUES (01, 01, 'Sunday');
INSERT INTO `php_js_child_menu` VALUES (02, 01, 'Monday');
INSERT INTO `php_js_child_menu` VALUES (03, 01, 'Tuesday');
INSERT INTO `php_js_child_menu` VALUES (04, 01, 'Wednesday');
INSERT INTO `php_js_child_menu` VALUES (05, 01, 'Thursday');
INSERT INTO `php_js_child_menu` VALUES (06, 01, 'Friday');
INSERT INTO `php_js_child_menu` VALUES (07, 01, 'Saturday');
INSERT INTO `php_js_child_menu` VALUES (08, 02, 'Atlantic');
INSERT INTO `php_js_child_menu` VALUES (09, 02, 'Eastern');
INSERT INTO `php_js_child_menu` VALUES (10, 02, 'Central');
INSERT INTO `php_js_child_menu` VALUES (11, 02, 'Mountain');
INSERT INTO `php_js_child_menu` VALUES (12, 02, 'Pacific');
INSERT INTO `php_js_child_menu` VALUES (13, 02, 'Alaska');
INSERT INTO `php_js_child_menu` VALUES (14, 02, 'Hawaii');
INSERT INTO `php_js_child_menu` VALUES (15, 02, 'Samoa');
The above SQL code creates two tables: one storing values for our “parent” menu, and the other holding values for our “child” menu. Now let’s take a look at the PHP and JavaScript for our project.
Next: Separating the Logic >>
More PHP Articles
More By Brian Vaughn
/ 18 
