> Home > e-Handouts and Assignments > XML and CMS

XML and CMS

XML Basics

XML stands for "eXtensible Markup Language". It is more than a language, although it is that, also. It is a way of describing data with tags and text.

XML is a lot like HTML. You use HTML-like syntax to describe the information that is in your file.

Here is a sample XML file that describes some pets. This is file pets.xml:

<?xml version="1.0" encoding="utf-8" ?>
<pets>
  <cat>
    <name>Lucy</name>
    <color>tabby</color>
    <breed>shorthair</breed>
  </cat>
  <dog name="Fido" color="brown" breed="mutt" />
  <snake>
    <name>Jacob</name>
    <color>Black and Yellow</color>
    <breed>Garter</breed>
  </snake>
</pets>

Please note these points about the above XML file:

The first tag, <?xml ... ?>, is a special tag that marks the file as an XML file. It looks a lot like the <?php ... ?> tags that we have seen before. This is not an accident. There is a lot of overlap in how XML and HTML tags look.
utf-8 stands for Unicode Transformation Format-8. It is an 8-bit lossless encoding of Unicode characters. You should always use an encoding attribute. utf-8 is compatible with ASCII character encoding, which is what most text editors support.
The <pets> ... </pets> tag is the main ("root") tag in this file. It defines what the file contains; in this file, the contents are about pets, obviously. You can make up whatever tag name you want to for this main tag, but be nice to your brain cells!
The <cat> ... </cat> and <snake> ... </snake> tags define two of the pets. They contain other tags for the various properties of these pets. The tags that are contained by the <cat> ... </cat> and <snake> ... </snake> tags are called child tags. The <cat> ... </cat> and <snake> ... </snake> tags are parent tags to the contained/child tags.
The <dog ... /> tag defines another pet, obviously. Instead of using child tags to define the dog's properties, this tag uses attributes. You can use either child tags or attributes, depending on what you prefer. Also note that the <dog ... /> tag is self-closing.

XML Rules

The sample XML code above demonstrates and follows these XML rules:

XML is case sensitive. Most tags are lowercase. In XML, <pets> is a different tag than is <PETS>.
All attribute values must be enclosed in quotation marks. The attributes above are name, color, and breed in the <dog... /> tag.
All tags must be closed.
- The tag may be closed with an actual "ending" tag, such as </cat>.
- The tag may be marked as "self-closing" with a slash before the end of the tag, such as
```
<dog name="Fido" color="brown" breed="mutt" />
```
XML data can be thought of as a hierarchy tree, sort of like the directory structure on your computer's hard drive. Each element (except the main/root element, such as <pets>) has exactly one parent element, and each element can have any number of children.

Simple XML Parser

You could write your own PHP code to read and parse (interpret) your XML files, but you would be re-inventing the wheel. Several XML parsers are available already in PHP. PHP 5 ships with 3 different XML parsers.

The simplest and most widely available XML parser for PHP is called simpleXML. This is the parser that we will use in this class.

simpleXML treats the entire XML document as a special object called an XML node.

You can use the PHP function simplexml_load_file() to load an XML file into PHP's memory. The file is returned as a simplexml_element object, which you can save in a variable.

The main methods of the simplexml_element object are:

Method	What it Returns
->asXML()	A string which has the XML text/code in it for the node that is the object containing the method
->attributes()	An associative array of the node's attributes
->children()	An array of simplexml_element nodes
->xpath()	An array of simplexml_elements addressed by the path
->getName()	A string which is the name of the element

Let's look at how simpleXML can be used to parse and display the pets XML file. Here is page parsePets.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Some Pets in XML</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="PHPstyles.css" />
</head>

<body>
  <h1>Some Pets in XML</h1>
  <h3>Here is the XML source file:</h3>
  <?php
  $xml = simplexml_load_file("pets.xml");
  $xmlText = $xml->asXML();
  $xmlText = htmlentities($xmlText);
  print "<pre>$xmlText</pre> \n";
  ?>
  <h3>Here are the XML elements extracted from the source file
  as arrays:</h3>
  <?php
  foreach($xml->children() as $pet)
  {
    print $pet->getName() . "<br /> \n";
    if ($pet->attributes())
    {
      $petAttributes = $pet->attributes();
      foreach($petAttributes as $name => $value)
      {
        print "<b>$name:</b>    $value<br /> \n";
      }
    }
    else
    {
      foreach($pet->children() as $name => $value)
      {
        print "<b>$name:</b>    $value<br /> \n";
      }
    }
    print "<br /> \n";
  }
  ?>
</body>
</html>

You can see the code running here.

Please note these points about the above code:

There are two PHP script sections/blocks.
In the first block, the XML file shown above, pets.xml, is loaded into memory and saved as a simplexml_element object in variable $xml.
Also in the first block, the simplexml_element object is converted into a string (using asXML()), then converted into displayable tags (using the PHP function htmlentities()), and then displayed using the standard HTML tags <pre>...</pre>. You will not normally display your XML files like this.
The second PHP code block also uses the $xml variable from the first code block, which stores the simplexml_element object that was returned from simplexml_load_file().
In the second PHP code block, the code that converts the elements into associative arrays is different depending on whether the element has children or has attributes.
The associative arrays are used to display each element's detail in the page. This is the way that you will normally parse/process the elements of an XML file.

CMS Basics

CMS stands for Content Management System. A CMS is a popular solution for creating dynamic Web sites. A CMS can make it easier to provide a consistent look for the many pages in a large site.

Some of the most common features of the various kinds of CMS are:

Controlled (secure) access for various levels of users and content owners.
Separation of content into blocks, usually based on the semantic meaning of the content.
Isolation of content from layout and formatting. This is usually done with CSS rules.
User-contributed content.

XCMS

For this class, we will be looking at a light-weight CMS that uses XML pages to encode the various parts of each page in the site. We can call the combination of CMS and XML, XCMS.

Each page in the site will be represented by an XML file which encodes these features of the page:

The page's title (for the <title>...</title> tag)
The CSS stylesheet for the page
The top portion of the page, usually a banner of some kind
The navigation menu
The URL to the main content for the page

XCMS Sample

We will encode each page's features in a <cpage>...</cpage> XML element, which represents a CMS page. (And keep in mind that we could call this element anything we want to. We will make it easy on our brain cells by calling it cpage.)

Here is the XML code for the main page of our sample system. This is file main.xml:

<?xml version="1.0" encoding="utf-8" ?>
<cpage>
  <title>Sample CMS Main Page</title>
  <css>menuLeft.css</css>
  <top>top.html</top>
  <menu>menuX.html</menu>
  <content>main.html</content>
</cpage>

The CSS stylesheet is menuLeft.css (and is used in this system as an embedded rather than an external stylesheet):

<!--
  This stylesheet places a menu on the left and an item (content)
  section in the center.
-->

<style type="text/css">
body
{
  background-color: #FFFFAA;
  font-family: Arial, sans-serif;
}

h1
{
  color: #0000FF;
  font-family: Arial, sans-serif;
  text-align: center;
}

p
{
  color: #000000;
  text-align: left;
}

ul
{
  color: #000000;
  text-align: left;
}

.topPanel
{
  position: absolute;
  left: 17%;
  top: 10px;
}

.menuPanel
{
  position: absolute;
  left: 1%;
  top: 120px;
  width: 15%;
  background-color: #CCCCFF;
}

.item
{
  position: absolute;
  left: 17%;
  top: 120px;
  width: 80%;
  height: 60%;
  background-color: #CCCCFF;
}
</style>

The file top.html is very simple. It is a banner image:

<img src="images/logo.jpg" width="500" height="100" alt="" />

File main.html is also very simple:

<h1>Main Content</h1>
<p>
  This is the main content.
</p>

Here is the menu file, menuX.html:

<h3>Main Menu</h3>

<ul>
  <li>
    <a href="XCMS.php?theXML=main.xml">main</a>
  </li>
  <li>
    <a href="XCMS.php?theXML=links.xml">links</a>
  </li>
  <li>
    <a href="XCMS.php?theXML=classes.xml">classes</a>
  </li>
  <li>
    <a href="XCMS.php?theXML=sitemap.xml">site map</a>
  </li>
</ul>

And now here is the main XCMS processing page, XCMS.php. Please note before you look at this file:

The page is usually initially loaded into the browser without the URL variable theXML defined.
URL variables are in the $_REQUEST associative array.

<?php

//If the $theXML URL variable is missing,
//set a default XML file:
if (isset($_REQUEST["theXML"]))
{
  $theXML = $_REQUEST["theXML"];
}
else
{
  $theXML = "main.xml";
}

// Open the XML file:
$xml = simplexml_load_file($theXML);
if (!$xml)
{
  print ("There was a problem opening the XML file.");
}
else
{
  print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"' . "\n";
  print '   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' . "\n";
  print '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' . "\n";
  print "<head>\n";
  print "<title>" . $xml->title . "</title> \n";
  print '  <meta http-equiv="content-type" content="text/html;charset=utf-8" />' . "\n";
  include ($xml->css);
  print "</head> \n<body> \n";
  
  print "<div class=\"topPanel\"> \n";
  include ($xml->top);
  print "</div> \n";

  print "<div class=\"menuPanel\"> \n";
  include ($xml->menu);
  print "</div> \n";
  
  print "<div class=\"item\"> \n";
  include ($xml->content);
  print "</div> \n";
  
  print "</body>\n";
  print "</html>\n";
}
?>

You can see the XCMS pages running here. You should look carefully at the URL/Address of this page when it first loads into your browser: There is no URL variable defined. After you click on one of the menu items, the URL variable theXML is defined.

Please note these points about the above PHP page and its supporting pages:

Another reminder: URL variables are stored in PHP in the associative array $_REQUEST.
If no XML file is given in the URL variable theXML, which is usually the situation when the site is first displayed, the code defaults to using file main.xml to define the page.
If an XML file is given in the URL variable theXML, that file is used to define the page.
The page that is being built is a combination of print statements that put standard HTML tags into the page, and include statements that put the files specified by the loaded XML file, into the page.
When you use a syntax like this:
```
$xml->title
```
you are making convenient use of the fact that the simplexml_element object will usually return a property as a string, even though the property is technically another simplexml_element object.

Richland College Multimedia Learning Center

Digital Media Programming with PHP and MySQL