Blog (my web musings)
Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.
Search Blog
XML to HTML - Getting XML Data into a Web Page with SimpleXML
- Details
XML stands for EXtensible Markup Language. It is a language designed to accurately describe and structure data, keeping it separate from any styling or visual formatting. Its aim is to separate presentation, structure, and meaning from the actual content - and it does a pretty good job of it.
Storing the data in this fuss-free way is great and many tools, software and websites output data/feeds in the XML format because it is reliable, format-free, robust, easily transferred and easily manipulated - I'll be showing you how to manipulate it below using PHP's simpleXML extension, which is ready built-in to PHP5.
First, here's an example of an XML file for IT jobs that need doing around the office. The data is stored in self-descriptive tags that you can define yourself. That's right! You're not limited to using pre-defined elements as you are with HTML - with XML, you can make up your own (except for the first line -prolog- which describes the document as XML);
<?xml version="1.0" encoding="utf-8"?>
<tasks>
<task date-added="2015-12-09">
<title>Laptop Won't Boot</title>
<message>Laptop gets to welcome screen then crashes. Blue screen of death.</message>
<name>Toni</name>
<priority>Emergency</priority>
<status>OVERDUE</status>
</task>
<task date-added="2016-01-13">
<title>Memory Card</title>
<message>Corrupt memory card. Card-reader won't recognise it. Can't get pictures from it.</message>
<name>Jim</name>
<priority>Normal</priority>
<status>OPEN</status>
</task>
<task date-added="2016-01-12">
<title>Printer Cartridge</title>
<message>New cartridge required for Kyocera printer. Black. High yield.</message>
<name>Toni</name>
<priority>High</priority>
<status>OPEN</status>
</task>
<task date-added="2016-01-10">
<title>Projector Bulb Orders</title>
<message>Only 2 projector bulbs left in stock. Please order more.</message>
<name>Carl</name>
<priority>Normal</priority>
<status>CLOSED</status>
</task>
</tasks>
The XML file must contain one root element that is the parent of all other elements (<tasks>). Each item can then be nested within the parent (<task>).
This file is saved as 'tasks.xml'. Now begins the fun part - getting at the stored data and bending it to our will! Well, baby-steps first - let's start by simply outputting the bits we want to a web page...
Using simpleXML
First we have to load the XML file (which could also be a link to an online podcast or RSS news feed) into simpleXML;
<?php
$tasks = simplexml_load_file('path/to/tasks.xml'); // could also be an URL
?>
The $tasks variable now stores an array of mapped tags, that can be accessed like this...
The PHP code below prints the title, status and date-added attribute of the first task to the page (remember that arrays start from 0 in PHP, so the first task will be stored as task[0]);
<?php
$tasks = simplexml_load_file('path/to/tasks.xml'); // could also be an URL
echo $tasks -> task[0] -> title;
echo '<br/>';
echo $tasks -> task[0] -> status;
echo '<br/>';
echo $tasks -> task[0]['date-added'];
?>
Using a number reference is fine for targetting specific items, but what if you want to print a list of all the XML items? You can use a foreach loop;
<?php
$tasks = simplexml_load_file('path/to/tasks.xml'); // could also be an URL
echo '<ul id="tasks">';
foreach ($tasks as $task) { // list all items
echo '<li>'; echo '<b>' . $task -> title . ': </b>' . $task -> message . ' <em><small>~ ' . $task -> name . '</small></em>';
echo '<br/>';
echo $task -> priority . ' | ' . $task -> status . ' (' . $tasks->task[0]['date-added'] . ')';
echo '</li>';
}
echo '</ul>';
?>
You can also limit the number of items displayed by using a for loop - this example displays only 3 items;
<?php
$tasks = simplexml_load_file('path/to/tasks.xml'); // could also be an URL
echo '<ul id="tasks">';
for ($i = 0; $i < 3; $i++) { // list upto 3 items
echo '<li>'; echo '<b>' . $task -> title . ': </b>' . $task -> message . ' <em><small>~ ' . $task -> name . '</small></em>';
echo '<br/>';
echo $task -> priority . ' | ' . $task -> status . ' (' . $tasks->task[0]['date-added'] . ')';
echo '</li>';
}
echo '</ul>';
?>
I hope you found this short introduction to XML, and XML manipulation with simpleXML useful.
I'll be expanding on this tutorial soon with a paginated RSS feed script.
Search Blog
Recent Posts
Popular Posts
Latest Scripts
- Scroll Down Before/ After Effect Image Switcher
- Pop-up Text Message with Entrance Effects
- Log and block email spam IPs w/ PHP + .htaccess
- Responsive CSS3 Blinds Effect Slideshow
- AJAX & PHP 5-Star Rating with Flat File Storage
- Defer YouTube Load until Scrolled-To (Lazy-Load)
- Keyboard Accessible 'Tab-to' Menu (JS)
- Defer Image Load until Scrolled-To (Lazy-Loading)
- Scroll Wide Tables w/ Gradient + Indicator (JS)
- Convert anchors to spans (LinkAdv/ Atto in Moodle)