Beginning XML with DOM and Ajax From Novice to Professional phần 10 doc

This table stores the date of the forecast, the maximum and minimum temperatures, and the current weather conditions. The current conditions come from values in the weatherWeatherTypeID field. This foreign key is associated with the weatherType table: CREATE TABLE weatherType ( weatherTypeID int(11) NOT NULL auto_increment, weatherType varchar(40) default NULL, PRIMARY KEY (weatherTypeID) ) TYPE=MyISAM; The last section of the SQL script inserts the default weather conditions into the weatherType table: INSERT INTO weatherType VALUES (1,'hot'); INSERT INTO weatherType VALUES (2,'sunny'); INSERT INTO weatherType VALUES (3,'windy'); INSERT INTO weatherType VALUES (4,'cloudy'); INSERT INTO weatherType VALUES (5,'rain'); INSERT INTO weatherType VALUES (6,'rainstorms'); INSERT INTO weatherType VALUES (7,'snow'); INSERT INTO weatherType VALUES (8,'snowstorms'); Each of these weather types has an associated image in the images folder. In phpMyAdmin, switch to the SQL section and copy and paste the contents of the weather.sql file into the Run SQL queries section of the page, as shown in Figure 13-3. Figure 13-3. Running the SQL script in phpMyAdmin CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION386 6765CH13.qxd 5/19/06 11:47 AM Page 386 Click the Go button to run the script. You should see a message stating that the SQL query has been executed successfully. The left-hand side of the page should show the names of six tables, as in Figure 13-4. Figure 13-4. The completed database You also need to set the permissions and user details for the database. The connection details are stored within the file weather.php: $wdb_host = 'localhost'; $wdb_user = 'user_weather'; $wdb_pass = 'weatherpassword'; $wdb_name = 'weather'; You may need to alter the host setting for your own system. In phpMyAdmin, switch back to the databases section by choosing (Databases) from the drop-down list on the left of the screen. Click the Privileges link in the central pane and choose Add a new User. CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 387 6765CH13.qxd 5/19/06 11:47 AM Page 387 Enter the details from weather.php. The default username is user_weather, and the default password is weatherpassword. Enter the host details and assign the privileges, as shown in Figure 13-5. Figure 13-5. The privileges for the user_weather user Click Go, then set the same database-specific privileges on the weather database. You may also need to restart MySQL to apply the permissions. Understanding Components of the Weather Portal Application Before I work through the application, let’s look at its component parts. The home page, index.php, is made up of sidebar.php and standard.php. The file standard.php is constructed from mk_navxml.php and mk_weather.php. These pages interact with the XSLT stylesheets nav.xsl and weather.xsl, and the pages addnew.php and addweather.php. Figure 13-6 shows the interaction between these pages. CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION388 6765CH13.qxd 5/19/06 11:47 AM Page 388 Figure 13-6. The interaction between the components of the Community Weather Portal applica- tion Figure 13-7 shows the finished application displaying the temperature for a city. Figure 13-7. The Community Weather Portal CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 389 6765CH13.qxd 5/19/06 11:47 AM Page 389 Table 13-1 summarizes the purpose of each part of the application. Table 13-1. The Purpose of Components in the Community Weather Portal Application Component Purpose weather.php This page contains the database username and password, as well as the database connection code. index.php This is the home page of the application. standard.css This CSS stylesheet adds styling to XHTML elements. sidebar.php This page contains the sidebar for the application, which provides a breadcrumb style of navigation through the locations to the home page. standard.php This page determines the content to display. mk_navxml.php This page queries the database and returns an XML document determining the next level of navigation. nav.xsl This XSLT stylesheet transforms the navigation XML into XHTML. addnew.php This page adds content to the database. mk_weather.php This page queries the database and returns the current weather conditions as an XML document. weather.xsl This XSLT stylesheet transforms the weather conditions into XHTML. addweather.php This page adds a new weather record to the database. /images/ This folder contains images for the application. I’ll examine these components in more detail in the next section. weather.php As I mentioned previously, the weather.php script contains settings for the application. It con- tains details for connecting to the database along with the code to make the connection: <?php $wdb_host = 'localhost'; $wdb_user = 'user_weather'; $wdb_pass = 'weatherpassword'; $wdb_name = 'weather'; mysql_connect($wdb_host, $wdb_user, $wdb_pass); mysql_select_db($wdb_name); ?> Storing the details in a single place means that you can update the settings more easily. The settings shown here relate to my own environment. If you changed the password or have a different host, your settings may be a little different. index.php The index.php page shows all of the content for the application. The content depends on the arguments passed to the script through the querystring in the address bar. CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION390 6765CH13.qxd 5/19/06 11:47 AM Page 390 The application identifies four navigation areas: continent, country, area, and city. By passing these arguments to the script, the application can filter the content displayed on the index.php page. It determines which value(s) are passed and then extracts the filter from the $_GET array. If you test the page before populating the database content, you’ll see something similar to the image shown in Figure 13-8. Figure 13-8. The Community Weather Portal without database content The addnew.php script allows users to enter content for the portal. I’ll work through that page shortly. The code within the index.php page follows: <?php if (isset($_GET['continent'])) { $continent = intval($_GET['continent']); } if (isset($_GET['country'])) { $country = intval($_GET['country']); } if (isset($_GET['area'])) { $area = intval($_GET['area']); } if (isset($_GET['city'])) { $city = intval($_GET['city']); } ?> The content displayed on the page is determined by your position in the navigation sys- tem. Therefore, the application needs to figure out which values have been passed into the page through the querystring. It uses these variables to determine what data to extract and display from the database. CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 391 6765CH13.qxd 5/19/06 11:47 AM Page 391 The remainder of the page follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Community Weather</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="standard.css" rel="stylesheet" type="text/css" /> <style> #layHeading { position:absolute; left:0px; top:0px; width:600px; height:70px; z-index:1; } #layNavigation { position:absolute; left:2px; top:75px; width:140px; z-index:2; } #layContent { position:absolute; left:150px; top:75px; width:450px; z-index:3; } </style> </head> <body> <div id="layHeading"> <img </div> <div id="layNavigation"> <?php include 'sidebar.php'; ?> </div> <div id="layContent"> <?php include_once 'standard.php'; ?> </div> </body> </html> CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION392 6765CH13.qxd 5/19/06 11:47 AM Page 392 This code sets up the page, links to an external stylesheet, and embeds some stylesheet declarations associated with the ids of <div> elements. The <body> section of the page contains a series of <div> elements. The first, layHeading, contains the heading image: <div id="layHeading"> <img </div> The second, layNavigation, contains the navigation on the left side of the screen. The navigation comes from the page sidebar.php, which I’ll look at shortly: <div id="layNavigation"> <?php include 'sidebar.php'; ?> </div> The final <div> element encloses the content from the page, which comes from standard.php: <div id="layContent"> <?php include_once 'standard.php'; ?> </div> The standard.php page determines whether to display additional levels of navigation— either countries, areas, or cities. If users select a city, this page displays the weather conditions. I’ll work through the page shortly. standard.css The CSS stylesheet standard.css provides formatting for index.php. It contains a set of stan- dard declarations for elements on the page: body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; } strong { font-size: 12px; font-weight: bold; } a { color : #0066FF; text-decoration : none; } a:hover, a:active { text-decoration : underline; } CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 393 6765CH13.qxd 5/19/06 11:47 AM Page 393 sidebar.php The sidebar.php script builds the breadcrumb navigation for the left of the index.php page. Figure 13-9 shows the navigation system. Notice that I’ve used Australasia in the example, which isn’t, strictly speaking, a continent. Figure 13-9. The index.php page showing the breadcrumb navigation The sidebar.php page starts with a link to the home page: <a href="index.php">Home</a><br /> The page needs to connect to the database, so it must include the weather.php file: <?php include_once 'weather.php'; The next block of code determines which of the three navigation variables have been set: $country, $area, or $city. The page doesn’t need to test for the $continent variable, as the home page is above continent level, and that page has a fixed link. If users are at country level, the page will need to provide a link to the continent contain- ing that country: if (isset($country)) { $sql = 'SELECT country.countryContinentID, continent.* ➥ FROM country, continent WHERE countryContinentID=continentID ➥ AND countryID=' . $country; $cRes = mysql_query($sql) or die(mysql_error()); if (mysql_num_rows($cRes) == 1) { $cRow = mysql_fetch_array($cRes); echo '<a href="index.php?continent=' . $cRow['continentID'] . '">' . ➥ $cRow['continent'] . '</a><br />'; } } CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION394 6765CH13.qxd 5/19/06 11:47 AM Page 394 The SELECT statement determines the country. If the database contains a valid country, the page provides a link. The application uses the same approach for the area level, where it provides links back to the area’s country and continent: if (isset($area)) { $sql = 'SELECT area.areaCountryID, country.*, continent.* ➥ FROM area, country, continent WHERE areaCountryID=countryID ➥ AND countryContinentID=continentID AND areaID=' . $area; $cRes = mysql_query($sql) or die(mysql_error()); if (mysql_num_rows($cRes) == 1) { $cRow = mysql_fetch_array($cRes); echo '<a href="index.php?continent=' . $cRow['continentID'] . '">' . ➥ $cRow['continent'] . '</a><br />'; echo '<a href="index.php?country=' . $cRow['countryID'] . '">' . ➥ $cRow['country'] . '</a><br />'; } } Finally, when users are at a city level, they need to be able to link back to the area, country, and continent: if (isset($city)) { $sql = 'SELECT city.cityAreaID, area.*, country.*, continent.* ➥ FROM city, area, country, continent WHERE cityAreaID=areaID ➥ AND areaCountryID=countryID AND countryContinentID=continentID ➥ AND cityID=' . $city; $cRes = mysql_query($sql) or die(mysql_error()); if (mysql_num_rows($cRes) == 1) { $cRow = mysql_fetch_array($cRes); echo '<a href="index.php?continent=' . $cRow['continentID'] . '">' . ➥ $cRow['continent'] . '</a><br />'; echo '<a href="index.php?country=' . $cRow['countryID'] . '">' . ➥ $cRow['country'] . '</a><br />'; echo '<a href="index.php?area=' . $cRow['areaID'] . '">' . ➥ $cRow['area'] . '</a><br />'; } } ?> You’ll notice that the SQL statements become more complicated as the page determines more levels in the navigation hierarchy. CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 395 6765CH13.qxd 5/19/06 11:47 AM Page 395 [...]... $proc->transformToDoc( $xml) ; echo $newdom->saveXML(); ?> 6765CH13.qxd 5/19/06 11:47 AM Page 397 CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION Let’s work through the code in a little more detail First, the page creates two DomDocument objects for the XML and XSL documents: $xsl = new DomDocument(); $inputdom = new DomDocument(); Then it tests to see if the $city variable is set and includes... 6765CH13.qxd 410 5/19/06 11:47 AM Page 410 CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION Building the XML Document The mk_weather.php script starts by including the weather.php page and creating a new DomDocument: xmlStandalone = false; $root = $xml- >createElement('weather');... libraries and, 284 determining type of, 222 DOM interfaces and, 226 extension function support for, 209 fixed box positioning and, 146 JavaScript and, 225–264 older, empty elements and, 63 server-side XML and, 318 sorting content within, 191–196 support for W3C DOM, 241–246 SVG and, 78 testing XSLT transformations and, 188 XML support and, 99–120 XSLT support and, 169 ■ C calculations, including with XPath... 228–230 MSXML and, 238 vs XML class, 294 Document Object Model (DOM) parsers, 17 Document Type Definitions See DTDs tag, 90 documentElement attribute, 228 documents, 4, 6–11 content, adding additional to, 160 contents of, displaying, 272 displaying, 38–44 Document Interface and, 227 DTDs associated with, 28 embedding XHTML syntax into, 157 headers, extracting from, 270 images, adding to, ... extension functions to, 206 attaching to documents, 130 CSS1/CSS2, 124 ■ D data binding XML data islands and, 111 for XMLConnector component, 313 data components, updating XML content via, 315 data islands Internet Explorer and, 109 Mozilla and, 113 data types, 31 defining, 34 web services and, 88 database structure, understanding, 351, 382 databases, output formats and, 97 DataDirect Technologies’ Stylus... PHP FOR AN XML APPLICATION Summary In this chapter, I worked through an application that uses PHP MySQL, XML, and XSLT to , display and manage weather content The application stores all of the data within a MySQL database The application retrieves the relevant database records with PHP 5 It uses the new PHP 5 DomDocument object to generate the XML document The structure of the generated XML documents... large, dealing with, 262 loading, 248, 294–297, 311 namespaces, adding to, 23 presenting with XSLT, 181–186 schemas assigned to, 35 sorting data within, 191–196 structure of, 7 well-formed, 4, 7 working with, 253–257 XSLT stylesheets, applying to, 251 DocumentSource property, 321, 328 Dojo toolkit, 287 doLoadXMLFromURL() function, 248, 259 DOM (Document Object Model) parsers, 17 DOM Documents creating,... http://superindex.apress.com/ dom extension, 322 DOM interfaces, 227–237 DOM parsing, 17 DomDocument object, 322, 331 DVD library and, 338, 342, 345, 348 DOMs, 103 domxml feature, 322 doReplace() function, 274 doTransform() function, 282, 284, 286 Dreamweaver (Adobe), 67 DTDs (Document Type Definitions), 11, 24, 25–29 documents, associating with, 28 entity declarations and, 36 vs XML schemas, 36 DVD library... that corresponds to the id field in the database It also contains the name of the navigation item—in this case, the name of the city Now let’s see how to build the XML document to cope with these different scenarios Building the XML Document The mk_navxml.php document starts by including weather.php: load('weather.xsl'); } else { include 'mk_navxml.php'; $xsl->load('nav.xsl'); } $xml- >loadXML( $xml- >saveXML()); $proc = new XsltProcessor(); $xsl = $proc->importStylesheet($xsl); $xml = . two DomDocument objects for the XML and XSL documents: $xsl = new DomDocument(); $inputdom = new DomDocument(); Then it tests to see if the $city variable is set and includes the appropriate document. The. sidebar.php and standard.php. The file standard.php is constructed from mk_navxml.php and mk_weather.php. These pages interact with the XSLT stylesheets nav.xsl and weather.xsl, and the pages. starts by creating a new DomDocument: $xml = new DomDocument('1.0', 'UTF-8'); $xml- >xmlStandalone = false; CHAPTER 13 ■ CASE STUDY: USING PHP FOR AN XML APPLICATION 399 6765CH13.qxd