Ejercicios: Capítulo 4
Ejercicio 1*
Crea un documento XML para guardar los detalles de los alumnos. El elemento raíz debe ser estudiantes,
con 4 elementos child (hijo). Cada elemento child (hijo) necesita tener 3 subchilds; studentId (id de
estudiante), firstName (nombre) y lastName (apellido).
Solución #1
Abre tu editor de texto favorito y añade las siguientes líneas de código en un archivo:
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
<studentId>7324</studentId>
<firstName>John</firstName>
<lastName>Smith</lastName>
</student>
<student>
<studentId>5447</studentId>
<firstName>Hannah</firstName>
<lastName>Young</lastName>
</student>
<student>
<studentId>2285</studentId>
<firstName>Sarah</firstName>
<lastName>White</lastName>
</student>
<student>
<studentId>5323</studentId>
<firstName>Kevin</firstName>
<lastName>Adams</lastName>
</student>
</students>
Guarda el archivo como students.xml en tu localización preferida. Abre el archivo en tu browser favorito y
el resultado será el siguiente:
Puedes añadir la cantidad que quieras de elementos child (hijo) y sub child (hijo).
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
1
Ejercicio 2*
Formatea el mismo documento XML que has creado en el Ejercicio #1 utilizando CSS. Los detalles de
cada alumno deben ser exhibidos en nuevas líneas. Muestra el ID de Estudiante en rojo con el tamaño
fuente 15pt y el nombre y el apellido en azul con el tamaño fuente 25pt.
Solución #2
Abre el archivo students.xml en tu editor de texto. Poco después de la primera línea, añade la siguiente
línea de código para enlazar a la hoja de estilo:
<?xml-stylesheet type="text/css" href="styles.css" ?>
Guarda el archivo students.xml. Después abre un nuevo archivo en tu editor de texto y añade las
siguientes líneas de código:
students
{
}
background-color:white;
width:100%;
student
{
}
display:block;
margin-left: 10pt;
margin-top: 10pt;
studentId
{
color:red;
font-size:15pt;
}
firstName, lastName
{
color:blue;
font-size:25pt;
}
Guarda el archivo como styles.css en la misma pasta donde guardaste el archivo students.xml. Ahora
abre el archivo students.xml en tu browser y el resultado será el siguiente:
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
2
Ejercicio 3*
Crea un documento XML donde el utilizador es informado, al principio, sobre la estructura del documento
XML y después sobre la estructura XML actual.
Solución #3
Abre tu editor de texto y añade las siguientes líneas de código en un archivo:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="styles.css" ?>
<students>
<![CDATA[
For your information.
Here is the structure of the XML document. <students> is the root element and <student> is the
child element.
Next, <studentId> specifies the unique Id. <firstName> and <lastName> specifies the first and
last name of the student respectively.
For example, <studentId>7324</studentId>
<firstName>John</firstName>
<lastName>Smith</lastName>
means that John Smith is a student with student id 7324.
]]>
<student>
<studentId>7324</studentId>
<firstName>John</firstName>
<lastName>Smith</lastName>
</student>
<student>
<studentId>5447</studentId>
<firstName>Hannah</firstName>
<lastName>Young</lastName>
</student>
<student>
<studentId>2285</studentId>
<firstName>Sarah</firstName>
<lastName>White</lastName>
</student>
<student>
<studentId>5323</studentId>
<firstName>Kevin</firstName>
<lastName>Adams</lastName>
</student>
</students>
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
3
Guarda el archivo como cdata.xml en la misma pasta donde guardaste styles.css. Abre el archivo en
cualquier browser y el resultado será el siguiente:
Ejercicios: Capítulo 4
4
Ejercicio 4*
Crea un documento XML que guarde los detalles de varias músicas instrumentales. Los detalles deben
incluir title (título), composer (compositor), duration (duración) y link (enlace) para la música. Presenta los
datos en una tabla utilizando XSLT para que el utilizador pueda pinchar el enlace directamente y
escuchar la música.
Solución #4
Abre tu editor de texto y añade las siguientes líneas de código en un archivo:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="songs.xsl" ?>
<list>
<song>
<title>Wildflower</title>
<composer>Richard Clayderman</composer>
<time>2.56</time>
<src>http://ia601501.us.archive.org/16/items/Best100InstrumentalSongs/024RichardClayderman-WildFlower.mp3</src>
</song>
<song>
<title>Music Box Dancer</title>
<composer>Frank Mills</composer>
<time>3.19</time>
<src>http://ia601501.us.archive.org/16/items/Best100InstrumentalSongs/062-FrankMillsMusicBoxDancer.mp3</src>
</song>
<song>
<title>Thanksgiving</title>
<composer>George Winston</composer>
<time>4.07</time>
<src>http://ia801501.us.archive.org/16/items/Best100InstrumentalSongs/007-GeorgeWinstonThanksgiving.mp3</src>
</song>
<song>
<title>Dolannes Melody</title>
<composer>Jean Claude Borelly</composer>
<time>3.28</time>
<src>http://ia801501.us.archive.org/16/items/Best100InstrumentalSongs/093JeanClaudeBorelly-DolannesMelody.mp3</src>
</song>
<song>
<title>That Happy Feeling</title>
<composer>Bert Kaempfert</composer>
<time>2.55</time>
<src>http://ia801501.us.archive.org/16/items/Best100InstrumentalSongs/040-BertKaempfertThatHappyFeeling.mp3</src>
</song>
</list>
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
5
Guarda el archivo como music.xml en tu localización favorita. Abre un nuevo archivo en el editor de texto
y añade las siguientes líneas de código:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Song List</h2>
<table border="1">
<tr bgcolor="aqua">
<th>Title</th>
<th>Composer</th>
<th>Duration</th>
<th>Link</th>
</tr>
<xsl:for-each select="list/song">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="composer"/></td>
<td><xsl:value-of select="time"></xsl:value-of></td>
<td><a href="{src}"><xsl:value-of select="title"/></a></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Guarda el archivo como songs.xsl en la misma pasta donde guardaste el archivo music.xml. Ahora abre
el archivo music.xml en tu browser (el browser necesita ser actualizado). Tu pantalla aparecerá así:
Pincha cualquier enlace que quieras oír y escucha la música correspondiente. Necesitas estar
conectado/a a Internet si quieres oír la música.
Ejercicios: Capítulo 4
6
Ejercicio 5*
Crea un documento XML que guarde los detalles de cinco empleados. El elemento raíz necesita ser
<employees> y el elemento child (hijo) <employee>. Cada elemento child (hijo) debe tener cuatro
elementos: id, name (nombre), department (departamento) y salary (sueldo). Muestra los detalles de
todos los empleados en una tabla utilizando los métodos XML DOM Get apropiados. Haz con que los
valores de id se pueden pinchar para que cuando los utilizadores pinchen el enlace se abra una nueva
página con los detalles particulares del empleado y una caja de texto para actualizar el sueldo. Cuando el
utilizador cambia el sueldo y pincha el botón de Save (Gravar), el sueldo debe actualizarse.
Solución #5
Crea una pasta llamada exercise5 en la pasta xampp/htdocs. Abre tu editor de texto y añade las
siguientes líneas de código en un archivo:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<employees>
<employee>
<id>15672</id>
<name>John Smith</name>
<department>HR</department>
<salary>$15000</salary>
</employee>
<employee>
<id>18542</id>
<name>Olivia Clark</name>
<department>Accounts</department>
<salary>$19000</salary>
</employee>
<employee>
<id>26581</id>
<name>Sophia Lopez</name>
<department>Software</department>
<salary>$23000</salary>
</employee>
<employee>
<id>27931</id>
<name>Ethan Turner</name>
<department>Accounts</department>
<salary>$20000</salary>
</employee>
<employee>
<id>27965</id>
<name>Noah Nelson</name>
<department>Accounts</department>
<salary>$20000</salary>
</employee>
</employees>
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
7
Guarda el archivo como employees.xml en la pasta exercise5. Abre un nuevo archivo en tu editor. Copia
las siguientes líneas de código:
<html>
<head>
<title></title>
<script type="text/javascript">
function loadXMLDoc(name) {
var xhttp;
if (window.XMLHttpRequest)
xhttp = new XMLHttpRequest();
else
xhttp = new
ActiveXObject("Microsoft.XMLHTTP");
xhttp.open("GET", name, false);
xhttp.send();
return xhttp.responseXML;
}
var xmlDocument = loadXMLDoc('employees.xml');
var len = xmlDocument.getElementsByTagName("id").length;
document.write("<h2>Employee Details</h2>");
var output = "<table
border=\"1\"><tr><th>Id</th><th>Name</th><th>Department</th><th>Salary</th></tr>";
for ( i = 0; i < len; i++) {
id =
xmlDocument.getElementsByTagName("id")[i].childNodes[0].nodeValue
output += "<tr><td><a href=\"changeSalary.html?id=" + id
+ "\">";
output += id;
output += "</a></td><td>";
output +=
xmlDocument.getElementsByTagName("name")[i].childNodes[0].nodeValue;
output += "</td><td>";
output +=
xmlDocument.getElementsByTagName("department")[i].childNodes[0].nodeValue;
output += "</td><td>";
output +=
xmlDocument.getElementsByTagName("salary")[i].childNodes[0].nodeValue;
output += "</td></tr>";
}
output += "</table>";
document.write(output);
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Ejercicios: Capítulo 4
8
Guarda el archivo como index.html en la pasta exercise5. Ahora abre el index.html en tu browser
colocando localhost/exercise5/index.html. Tu pantalla aparecerá así:
<html>
<head>
<title></title>
<script type="text/javascript">
var currentId;
var xmlDocument;
function load() {
xmlDocument = loadXMLDoc('employees.xml');
var len =
xmlDocument.getElementsByTagName("id").length;
id = window.location.search.slice(4);
document.getElementById("empId").innerHTML = id;
for ( i = 0; i < len; i++) {
if
(xmlDocument.getElementsByTagName("id")[i].childNodes[0].nodeValue == id) {
currentId = i;
name =
xmlDocument.getElementsByTagName("name")[i].childNodes[0].nodeValue;
document.getElementById("name").innerHTML = name;
department =
xmlDocument.getElementsByTagName("department")[i].childNodes[0].nodeValue;
document.getElementById("dept").innerHTML = department;
salary =
xmlDocument.getElementsByTagName("salary")[i].childNodes[0].nodeValue;
document.getElementById("salary").innerHTML = salary;
}
}
}
function saveDetails() {
newsal = document.getElementById("newsalary").value;
xmlDocument.getElementsByTagName("salary")[currentId].childNodes[0].nodeValue = newsal;
alert("Details saved successfully");
}
function loadXMLDoc(name) {
var xhttp;
if (window.XMLHttpRequest)
xhttp = new XMLHttpRequest();
else
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
xhttp.open("GET", name, false);
xhttp.send();
return xhttp.responseXML;
}
Ejercicios: Capítulo 4
9
function displayDetails() {
var output = "<table
border=\"1\"><tr><th>Name</th><th>Department</th><th>Salary</th></tr>";
var len = xmlDocument.getElementsByTagName("id").length;
for ( i = 0; i < len; i++) {
output += "<tr><td>";
output +=
xmlDocument.getElementsByTagName("name")[i].childNodes[0].nodeValue;
output += "</td><td>";
output +=
xmlDocument.getElementsByTagName("department")[i].childNodes[0].nodeValue;
output += "</td><td>";
output +=
xmlDocument.getElementsByTagName("salary")[i].childNodes[0].nodeValue;
output += "</td></tr>";
}
output += "</table>";
document.getElementById("result").innerHTML = output;
}
</script>
</head>
<body onload="load();">
<h3>Enter the New Salary and Click Save</h3>
<table>
<tr>
<td>Employee Id:</td>
<td><div id="empId"></div></td>
</tr>
<tr>
<td>Name:</td>
<td><div id="name"></div></td>
</tr>
<tr>
<td>Department:</td>
<td><div id="dept"></div></td>
</tr>
<tr>
<td>Current Salary:</td>
<td><div id="salary"></div></td>
</tr>
<tr>
<td>New Salary:</td>
<td>
<input type="text" id="newsalary" />
</td>
</tr>
<tr>
<td>
<button id="btnSave" onclick="saveDetails();">
Save
</button></td>
<td>
<button id="btnDisplay" onclick="displayDetails();">
Display
Ejercicios: Capítulo 4
10
</tr>
</body>
</button></td>
</table>
<div id="result"></div>
</html>
Guarda el archivo como changeSalary.html en la pasta exercise5. Ahora abre el index.html en tu browser
colocando localhost/exercise5/index.html. Tu pantalla aparecerá así:
Pincha cualquier de los ids, por ejemplo 18542. Te aparecerá una nueva pantalla como esta:
Ahora coloca un nuevo valor en la caja de texto y pincha Save. Verás un nuevo mensaje como este:
Ahora pincha OK y después pincha el botón Display. Te aparecerá una pantalla así, donde podrás ver el
nuevo sueldo ($22000) de Olivia Clark.
Ejercicios: Capítulo 4
11
Ejercicio 6*
Crea una aplicación que permita al utilizador añadir y apagar detalles de los empleados en un documento
XML. Utiliza el mismo archivo employees.xml que utilizaste en el ejercicio anterior. Añade un botón Add
Employee (Añadir Empleado) en la página del index.html. Cuando el utilizador pincha el botón debe ser
enviado para una nueva página donde pueda colocar el id, name (nombre), department (departamento) y
salary (sueldo) de un empleado y grabar esos datos. Añade un botón Delete (Apagar) a la página
changeSalary.html. Cuando el utilizador pincha este botón se deben apagar los datos particulares del
empleado.
Solución #6
Abre tu editor de texto y el archivo index.html. Añade un botón como este, dentro de la tag <body>:
<button id="btnAdd" onclick="addEmployee();">Add Employee</button>
Añade las siguientes líneas de código dentro de la tag <script>:
function addEmployee()
{
window.location = "addDetails.html";
}
Abre un nuevo archivo en tu editor de texto y añade las siguientes líneas de código:
<html>
<head>
<title>Change Salary</title>
<script type="text/javascript">
var xmlDocument;
window.onload = function()
{
xmlDocument = loadXMLDoc('employees.xml');
}
function saveDetails()
{
var rootNode=xmlDocument.documentElement;
newNode=xmlDocument.createElement("employee");
newId=xmlDocument.createElement("id");
var id = document.getElementById("empId").value;
newIdText=xmlDocument.createTextNode(id);
newName=xmlDocument.createElement("name");
var name = document.getElementById("empName").value;
newNameText=xmlDocument.createTextNode(name);
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
12
newDept=xmlDocument.createElement("department");
var department = document.getElementById("dept").value;
newDeptText=xmlDocument.createTextNode(department);
newSalary=xmlDocument.createElement("salary");
var salary = document.getElementById("salary").value;
newSalaryText=xmlDocument.createTextNode(salary);
newId.appendChild(newIdText);
newNode.appendChild(newId);
newName.appendChild(newNameText);
newNode.appendChild(newName);
newDept.appendChild(newDeptText);
newNode.appendChild(newDept);
newSalary.appendChild(newSalaryText);
newNode.appendChild(newSalary);
rootNode.appendChild(newNode);
alert("Details saved successfully.");
}
function loadXMLDoc(name)
{
var xhttp;
if(window.XMLHttpRequest)
xhttp = new XMLHttpRequest();
else
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
xhttp.open("GET", name, false);
xhttp.send();
return xhttp.responseXML;
}
function displayDetails()
{
var output = "<table
border=\"1\"><tr><th>Name</th><th>Department</th><th>Salary</th></tr>";
var len= xmlDocument.getElementsByTagName("id").length;
for(i=0;i<len;i++)
{
output += "<tr><td>";
output += xmlDocument.getElementsByTagName("name")[i].childNodes[0].nodeValue;
output += "</td><td>";
output += xmlDocument.getElementsByTagName("department")[i].childNodes[0].nodeValue;
output += "</td><td>";
output += xmlDocument.getElementsByTagName("salary")[i].childNodes[0].nodeValue;
output += "</td></tr>";
}
output += "</table>";
document.getElementById("result").innerHTML = output;
}
Ejercicios: Capítulo 4
13
</script>
</head>
<body>
<h3>Enter the Details</h3>
<table>
<tr>
<td>Employee Id:</td>
<td><input type="text" id="empId" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="empName" /></td>
</tr>
<tr>
<td>Department:</td>
<td><input type="text" id="dept" /></td>
</tr>
<tr>
<td>Current Salary:</td>
<td><input type="text" id="salary" /></td>
</tr>
<tr>
<td><button id="btnSave" onclick="saveDetails();">Save</button></td>
<td><button id="btnDisplay" onclick="displayDetails();">Display</button></td>
</tr>
</table>
<div id="result"></div>
</body>
</html>
Guarda el archivo como addDetails.html en la pasta exercise5. Abre el changesalary.html en tu editor de
texto y añade las siguientes líneas de código en la sección <body> junto con los botones Save y Display:
<td><button id="btnDelete" onclick="deleteDetails();">Delete</button></td>
Añade las siguientes líneas de código dentro de la tag <script>:
function deleteDetails()
{
var rootNode=xmlDocument.documentElement;
var node = xmlDocument.getElementsByTagName("employee")[currentId];
var name = xmlDocument.getElementsByTagName("name")[currentId].childNodes[0].nodeValue
rootNode.removeChild(node);
alert("The details of the employee " + name + " has been removed.");
}
Guarda el archivo changeSalary.html. Abre el archivo index.html en tu browser colocando
localhost/exercise5/index.html. Pincha cualquier de los ids de empleado, por ejemplo 26581. Serás
enviado para una nueva página como esta:
Ejercicios: Capítulo 4
14
Pincha el botón Delete y verás un mensaje como este:
Para confirmar que los datos fueron apagados, pincha OK y después el botón Display. Te aparecerá una
pantalla como esta y los datos de Sophía Lopez ya no estarán disponibles en la tabla:
Ahora vuelve otra vez al archivo index.html (los datos de Sophía Lopez no estarán apagados en la
página index.html) y pincha el botón Add Employee. Serás redirigido para una nueva pantalla así.
Ejercicios: Capítulo 4
15
Coloca datos válidos en cada caja de texto y pincha Save. Te aparecerá una pantalla como esta:
Pincha OK y después el botón Display para confirmar que los datos fueron añadidos. Podrás verificar los
datoss que añadiste recientemente a Emma White:
No hemos hecho ningún tipo de validación a los inputs. Lo puedes hacer, si quieres que el código sea de
mayor confianza.
Ejercicios: Capítulo 4
16
Ejercicio 7*
Crea una página web que muestre los datoss de todos los empleados en un archivo employees.xml
(creado en el ejercicio 5) utilizando la función PHP.
Solución #7
Copia el archivo employees.xml de la pasta exercise5 y colócalo dentro de la pasta xampp/htdocs. Abre
tu editor de texto y añade las siguientes líneas de código a un nuevo archivo:
<?php
$x = simplexml_load_file('employees.xml');
$i=1;
foreach($x->employee as $employee)
{
echo "<b>Employee Id:</b> " . $employee->id. "<br />".
"<b>Name:</b> " . $employee->name . "<br />".
"<b>Department:</b> " . $employee->department . "<br />".
"<b>Salary:</b> " . $employee->salary . "<br /><br />";
}
?>
Guarda el archivo como xml.php en la pasta xampp/htdocs. Abre el archivo en tu browser web colocando
localhost/xml.php. Tu pantalla aparecerá así:
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
17
Ejercicio 8*
Crea un feed RSS que busque las noticias tecnológicas más recientes de la BBC News.
Solución #8
Abre tu editor de texto y añade las siguientes líneas de código a un nuevo archivo:
<?php
function getFeed($url)
{
$x = simplexml_load_file($url);
echo "<ul>";
foreach($x->channel->item as $feed)
{
echo "<li><a href='$feed->link' title='$feed->title'>" . $feed->title . "</a></li>";
}
echo "</ul>";
}
echo getFeed("http://feeds.bbci.co.uk/news/technology/rss.xml");
?>
Guarda el archivo como rssBBC.php en la pasta xampp/htdocs. Abre el archivo en tu browser web
colocando localhost/rssBBC.php. Tu pantalla aparecerá así:
Puedes pinchar cualquier de estos enlaces y serás enviado a la página correspondiente de la BBC News.
Ejercicios: Capítulo 4
* El código y las imágenes generadas por ese código están en inglés.
18
