Universidad Inca Garcilaso de la Vega

Laboratorio de Introduccin

XML + DTD + CSS / RSS / XML a MYSQL

I. Competencia General:
Comprender el uso y aplicacin de los Documentos
Extensible Markup Language (XML).
Utilizar este estndar para el intercambio de
informacin estructurada entre diferentes plataformas
y sobre todo en bases de datos.
II. Editor XML Writer

Figura 02: Definiendo el nombre del proyecto

El proyecto tendr el nombre de presentacion, a

continuacin se genera automticamente el siguiente
WorkSpace:

XML Writer es un editor y validador profesional para

archivos en formatos XML, XSL, DTD, hojas de estilo
CSS, HTML y texto plano. Una ventana de
previsualizacin integrada permite al usuario dar
formato al XML, utilizando tanto hojas de estilo en
formato CSS como XSL.
Su interfaz es muy intuitivo y altamente
personalizable, e incluye funciones avanzadas de
edicin como por ejemplo las bookmarks (favoritos),
auto-sangrado de texto, o buscar y reemplazar.
Otras caractersticas importantes de XML Writer son:
Ayuda para XML Reference, Gestin de proyectos,
coloreado de sintaxis XML en tiempo real, Vista con
forma de rbol, posibilidad de procesar archivos en
lnea de comando o en masa, Vista en esquema
expandible, y mucho ms. Un editor realmente
completo y altamente recomendable en caso de que
tengamos que trabajar con este lenguaje XML.

Figura 03: Workpace predefinido por XML Writer

A continuacin se adicionara los archivos necesarios

que respalden al proyecto XML.
a) Adicionamos un archivo XML en la carpeta XML
Files

Figura 01: FrontEnd XML Writer

III. Creacin de un proyecto

Para crear un proyecto nuevo se dirige a Project,
luego New Proyecto:

Figura 04: Adicionando un nuevo archivo a la carpeta XML

Files

Luego nos pedir el tipo de archivo, en este caso

XML Document

Curso: Sistemas Distribuidos II

Pag. - 1 -

Universidad Inca Garcilaso de la Vega

Figura 05: Identificando el tipo de archivo y nombre

El nombre del Archivo XML ser persona.

Figura 09: Identificando el tipo de archivo y nombre

Finalmente en el workspace tendremos los tres

archivos necesario para el proyecto.

Figura 06: Archivo XML creado

b) Adicionamos ahora un nuevo archivo del tipo

CSS en la carpeta Stylesheets

Figura 10: Workspace con los 3 archivos

III. Editando el archivo XML

a) Caso Persona
Figura 07: Seleccionado archivo CSS

El nombre del Archivo CSS ser persona.

Para comenzar a trabajar con el archivo xml es

editamos el siguiente cdigo:
<?xml version="1.0"?>
<!DOCTYPE listin SYSTEM "persona.dtd">
<listin>
<persona sexo="hombre" id="ricky">
<nombre>Ricky Martin</nombre>
<email>ricky@puerto-rico.com</email>
</persona>

Figura 08: Workspace con dos archivos

c) Finalmente al proyecto adicionamos un ltimo

archivo del tipo DTD.

Curso: Sistemas Distribuidos II

<persona sexo="mujer" id="leatitia">

<nombre>Leatitia Casta</nombre>
<email>castal@micasa.com</email>
</persona>
</listin>
Notese al inicio de la cabecera del documento la
declaracin de dos archivos:

Pag. - 2 -

Universidad Inca Garcilaso de la Vega

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE listin SYSTEM "persona.dtd">

font-size: 14pt;
text-indent: 12px;
}
relacion {
display: block;
color: yellow;
font-family: Courier, monospace;
font-size: 14pt;
text-indent: 12px;
}

Figura 11: Editando el archivo persona.xml

A continuacin editamos el archivo, DTD, con el

siguiente cdigo:
<?xml encoding="UTF-8"?>
<!ELEMENT listin (persona)+>
<!ELEMENT persona (nombre, email*, relacion?)>
<!ATTLIST persona id ID #REQUIRED>
<!ATTLIST persona sexo (hombre | mujer)
#IMPLIED>
<!ELEMENT nombre (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT relacion EMPTY>

Figura 13: Editando el archivo persona.css

Ntese que el elemento relacion, no esta

implementado como elemento en el archivo
persona.xml
Finalmente para verificar si esta bien formado (F6) y
Validado de acuerdo al esquema DTD
a) Presionar F6, para verificar si esta bien
formado
Figura 12: Editando el archivo persona.dtd

Finalmente agregamos el respectivo cdigo a la Hoja

de Estilo (CSS):
persona {
display: block;
margin-bottom: 10px;
background-color: white;
text-align: left;
}
nombre {
display: block;
color: black;
font-family: Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
}

b) Presionar F7, para validad, si cumple con la

especificacin del DTD
c) O puede validar todo el proyecto (XML y
DTD)

Para visualizar, puede presionar F5, y el resultado

ser finalmente este:

email {
display: block;
color: blue;
font-family: Courier, monospace;

Curso: Sistemas Distribuidos II

Pag. - 3 -

Universidad Inca Garcilaso de la Vega

<comments>A classic one-of-a-kind screwball love

story.</comments>
</movie>
<movie type="comedy" rating="R" review="5"
year="1988">
<title>Midnight Run</title>
<writer>George Gallo</writer>
<producer>Martin Brest</producer>
<director>Martin Brest</director>
<actor>Robert De Niro</actor>
<actor>Charles Grodin</actor>
<comments>The quintessential road
comedy.</comments>
</movie>

Figura 14: Previsualizacin del proyecto presentacin

Importante: Este documento debe agregar y corregir

en el laboratorio
IV. Ejemplo Movies
Para empezar con este nuevo ejemplo, debe crear un
nuevo proyecto con el nombre: Movies

Figura 16: Previsualizacin del proyecto presentacin

Una vez creado debe crear 03 archivos, tal como el

proyecto presentacin
- Movies.xml
- Movies.dtd
- Movies.css
a) Cdigo del archivo Movies.xml
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="Movies.css"?>
<!DOCTYPE movies SYSTEM "Movies.dtd">
<movies>
<movie type="comedy" rating="PG-13" review="5"
year="1987">
<title>Raising Arizona</title>
<writer>Ethan Coen</writer>
<writer>Joel Coen</writer>
<producer>Ethan Coen</producer>
<director>Joel Coen</director>
<actor>Nicolas Cage</actor>
<actor>Holly Hunter</actor>
<actor>John Goodman</actor>

Curso: Sistemas Distribuidos II

<movie type="mystery" rating="R" review="5"

year="1995">
<title>The Usual Suspects</title>
<writer>Christopher McQuarrie</writer>
<producer>Bryan Singer</producer>
<producer>Michael McDonnell</producer>
<director>Bryan Singer</director>
<actor>Stephen Baldwin</actor>
<actor>Gabriel Byrne</actor>
<actor>Benicio Del Toro</actor>
<actor>Chazz Palminteri</actor>
<actor>Kevin Pollak</actor>
<actor>Kevin Spacey</actor>
<comments>A crime mystery with incredibly intricate
plot twists.</comments>
</movie>
<movie type="sci-fi" rating="PG-13" review="4"
year="1989">
<title>The Abyss</title>
<writer>James Cameron</writer>
<producer>Gale Anne Hurd</producer>
<director>James Cameron</director>
<actor>Ed Harris</actor>
<actor>Mary Elizabeth Mastrantonio</actor>
<comments>A very engaging underwater
odyssey.</comments>
</movie>
</movies>

b) Cdigo del archivo Movies.dtd

<!ELEMENT movies (movie)+>
<!ELEMENT movie (title, writer+, producer+, director+, actor*,
comments?)>
<!ATTLIST movie
type (drama | comedy | adventure | sci-fi | mystery | horror |
romance |
documentary) "drama"
rating (G | PG | PG-13 | R | X) "PG"
review (1 | 2 | 3 | 4 | 5) "3"
year CDATA #IMPLIED>
<!ELEMENT title (#PCDATA)>
<!ELEMENT writer (#PCDATA)>
<!ELEMENT producer (#PCDATA)>
<!ELEMENT director (#PCDATA)>
<!ELEMENT actor (#PCDATA)>

Pag. - 4 -

Universidad Inca Garcilaso de la Vega

<!ELEMENT comments (#PCDATA)>

c) Cdigo del Archivo Movies.css

movie {
display: block;
margin-bottom: 10px;
background-color: white;
text-align: left;
}
title {
display: block;
color: black;
font-family: Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
}

Figura 17: Proyecto Final

Para finalizar debe mostrar en una ventana (tecla

F4), la siguiente salida.

writer {
display: block;
color: blue;
font-family: Courier, monospace;
font-size: 14pt;
text-indent: 12px;
}
producer {
display: block;
color: red;
font-family: Western, fantasy;
font-size: 12pt;
text-indent: 12px;
}

Figura 18: Vistas desde XML Write

Y presionando la tecla F5, la siguiente salida.

director {
display: block;
color: green;
font-family: Times, serif;
font-size: 14pt;
text-indent: 12px;
}
actor {
display: block;
color: fuchsia;
font-family: Zapf-Chancery, cursive;
font-size: 20pt;
text-indent: 12px;
}
comments {
display: none;
}

Finalmente el proyecto debe ser verificado, si esta

bien formado y validado el DTD.

Figura 19: Vista desde Firefox

V. Ejemplo Mensaje en un Servidor Web

Para poder mostrar su aplicacin en un servidor web
debe crear los los tres archivos.

a) Archivo mensaje.xml (Documento XML)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="mensaje.css"
type="text/css"?>
<!-- Ejemplo muy sencillo de documento XML:
mensaje simple -->
<!DOCTYPE MENSAJE SYSTEM "mensaje.dtd">

Curso: Sistemas Distribuidos II

Pag. - 5 -

Universidad Inca Garcilaso de la Vega

<MENSAJE prioridad="maxima">
<CABECERA>
<FECHA fd="09" fm="01" fa="2008" />
<DE>Toms Nogales</DE>
<A>Menchu Arellano</A>
<ASUNTO>Reunin proyecto</ASUNTO>
</CABECERA>
<CUERPO>
<SALUDO>Hola de nuevo.</SALUDO>
<P>En relacin con tu mensaje:</P>
<CITA>tendra que ser una tarde de esta
semana.</CITA>
<P>Yo slo podra el <ENFASIS>jueves o el
viernes</ENFASIS>.</P>
<DESPEDIDA>Saludos.</DESPEDIDA>
<FIRMANTE>Toms</FIRMANTE>
</CUERPO>
</MENSAJE>

b) Archivo mensaje.dtd (DTD, Document Type

Definition)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Ejemplo muy sencillo de DTD XML: mensaje
simple -->
<!ELEMENT MENSAJE (CABECERA, CUERPO)>
<!ATTLIST MENSAJE
prioridad (maxima | alta | normal | baja |
minima) "normal"
>
<!ELEMENT CABECERA (FECHA, DE, A+, CC*, ASUNTO?)>
<!ELEMENT CUERPO (SALUDO?, (P | CITA)+,
DESPEDIDA?, FIRMANTE?)>
<!ELEMENT FECHA EMPTY>
<!ATTLIST FECHA
fd CDATA #REQUIRED
fm CDATA #REQUIRED
fa CDATA #REQUIRED
>
<!ELEMENT DE (#PCDATA)>
<!ELEMENT A (#PCDATA)>
<!ELEMENT CC (#PCDATA)>
<!ELEMENT ASUNTO (#PCDATA)>
<!ELEMENT SALUDO (#PCDATA)>
<!ELEMENT P (#PCDATA | ENFASIS)*>
<!ELEMENT ENFASIS (#PCDATA)>
<!ELEMENT CITA (#PCDATA)>
<!ELEMENT DESPEDIDA (#PCDATA)>
<!ELEMENT FIRMANTE (#PCDATA)>

c) Proponga el Archivo mensaje.css (Hoja de estilo)

A continuacin debe ser verificado, si esta bien
formado y validado el DTD.

Figura 20: Vista desde el Servidor Web

Figura 21: Vista del archivo XML en Firefox

VI. Base de Datos, PHP + XML

Para combinar diferentes tecnologas con XML, debe
considerar el siguiente procedimiento:
6.1 Base de Datos
a) Crear la Base de Datos
CREATE DATABASE noticias
USE noticias
b) Crear la tabla articulos
#
# Table structure for table 'articulos'
#
CREATE TABLE `articulos` (
`id` int(11) NOT NULL auto_increment,
`categoria` varchar(50) NOT NULL,
`titulo` varchar(50) NOT NULL,
`resumen` varchar(50) NOT NULL,
`fecha` date NOT NULL,
`enlace` varchar(50) NOT NULL,

Curso: Sistemas Distribuidos II

Pag. - 6 -

Universidad Inca Garcilaso de la Vega

UNIQUE KEY `id` (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=3 /*!40100
DEFAULT CHARSET=utf8*/;

fclose($fp);
print ('Creado Feed RSS.');
?>

c) Insertar algunos registros

#
INSERT INTO `articulos` (`id`, `categoria`, `titulo`, `resumen`,
`fecha`, `enlace`) VALUES
(1,'Sistemas','Nuevo Perfil de Sistemas','Esta nueva
carrera es a distancia','2009-01-01','http://www.uigv.edu.pe'),
(2,'Electronica','Utilizando red electrica para Internet','Es
una novedosa tecnica para trabajar por internet','2009-0210','http://internet.com');

6.3 Ejecutar el archivo PHP

Cuando lo visualiza el archivo php, automaticamente
crea un Nuevo archivo index.xml

6.2 Crear el Archivo PHP

a) Crear un archivo php con el nombre
noticias.php
b) Copiar el siguiente cdigo:

Figura 22: Vista del archivo noticias.php

6.4 Visualizacin de las noticias

Las vistas cambian dependiendo el visualizador
O browser:

<?php
$fp = fopen('index.xml', 'w');
$rand = "\n";
fwrite($fp, '<?xml version="1.0" encoding="UTF-8"?>' .$rand);
fwrite($fp, '<rss version="2.0"
xmlns:atom="http://www.w3.org/2005/Atom">' .$rand);
fwrite($fp, '<channel>' .$rand);
fwrite($fp, '<title>UIGV' .$dirname. '</title>' .$rand);
fwrite($fp, '<description>Bj - El blog de un linuxero</description>' .
$rand);
fwrite($fp, '<link>http://www.somoslibres.org' .$dirname. '/</link>' .
$rand);
fwrite($fp, '<language>es-sp</language>' .$rand);
fwrite($fp, '<copyright>Copyright ' .date('Y'). '
SomosLibres.org</copyright>' .$rand .$rand);
$db=mysql_connect('localhost','root','uigv');
mysql_select_db('noticias',$db);
$sql = "SELECT * FROM articulos ORDER BY fecha
DESC";
$result = mysql_query($sql) or die('No se ha podido realizar la
consulta.');
while ($row = mysql_fetch_array($result)) {
$id
= $row['id'];
$categoria = strip_tags($row['categoria']);
$titulo = htmlentities(strip_tags($row['titulo']), ENT_QUOTES);
$resumen = htmlentities(strip_tags($row['resumen']),
ENT_QUOTES);
$fecha = $row['fecha'];
$enlace = $row['enlace'];
fwrite($fp, '<item>' .$rand);
fwrite($fp, '<title>' .$titulo. '</title>' .$rand);
fwrite($fp, '<description>' .$resumen. '</description>' .$rand);
fwrite($fp, '<category>![CDATA[' .$categoria. ']]</category>' .
$rand);
fwrite($fp, '<link>' .$enlace. '</link>' .$rand);
fwrite($fp, '<pubDate>' .date('D, d M Y H:i:s O', strtotime($fecha)).
'</pubDate>' .$rand);
fwrite($fp, '</item>' .$rand .$rand);}

Figura 23: Las noticias estn listas para ser distribuidas desde
Firefox

Figura 24: Desde Internet Explorer

fwrite($fp, '</channel>' .$rand);

fwrite($fp, '</rss>');

Curso: Sistemas Distribuidos II

Pag. - 7 -

Universidad Inca Garcilaso de la Vega

<titulo>Foto del autor</titulo>

</image>
</images>
</libro>
</root>

b) Creando el archivo a la conexin de la Base de

Datos

Figura 25: Resumen de los Elementos

VII. Importar de XML a MYSQL con PHP

Llevar un fichero XML a tablas de una base de datos
en mySQL, es sencillo para esto utilizando una
versin de PHP 5, ya que incorpora por defecto la
extensin simpleXML que facilita mucho las cosas.
Para este ejemplo necesitaremos crear 2 ficheros en
php, uno con la configuracin y conexin a la base de
datos, y otro con el script de importacin en si.
Adems del fichero XML que vamos a importar. Y
evidentemente necesitaremos tener creada las tablas
a la que vamos a importar.
a) Estructura del fichero XML a importar.
Archivo libros.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<root>
<libro>
<ref>XLT-5841AHJ</ref>
<precio>29.95</precio>
<editorial>Editorial Planeta</editorial>
<titulo>Nunca es tarde para aprender</titulo>
<autor>J.M.Navarro</autor>
<desc>Ensayo sobre la necesidad de estar en constante
fase de
aprendizaje a lo largo de nuestra vida, su repercusin en nuestra
vida,
en todas sus etapas y los beneficios que ello reportar sobre
nuestra
salud tanto mental como fsica</desc>
<images>
<image id="1">
<url>http://images.leemiblog.com/1_large.jpg</url>
<titulo>Portada grande</titulo>
</image>
<image id="2">
<url>http://images.leemiblog.com/2_large.jpg</url>
<titulo>Contraportada</titulo>
</image>
<image id="3">
<url>http://images.leemiblog.com/foto_autor.jpg</url>

Curso: Sistemas Distribuidos II

Partiendo de esta estructura de nuestro fichero XML

a importar deberemos crear nuestro script para que
sea capaz de importar estos datos directamente en
una tabla mysql que tendremos que haber creado
anteriormente. Adems dicha base de datos deber
incorporar al menos dos tablas para que sea capaz
de incorporar eficientemente esta estructura en la
que un libro tiene asociada una serie de imgenes,
aunque podramos hacerlo con una sola en la que
tener triplicados los campos url de la imagen y su
descripcin, me ha parecido ms didctico e
interesante hacerlo en dos tablas. Dando as solucin
a un problema bastante comn como la divisin en
distintas tablas de un nico fichero XML.
Ahora veremos el cdigo php necesario para realizar
la importacin. En primer lugar tendremos un fichero
de configuracin con los datos de conexin y los
comandos necesarios para realizar dicha conexin a
la base de datos mySql.
Archivo config.php
<?php
$dbhost='localhost';
$dbusername='root';
$dbuserpass='root';
$dbname = 'importar';
// Ahora conectamos a la base de datos.
mysql_connect ($dbhost, $dbusername, $dbuserpass);
// y la seleccionamos para poder trabajar con ella.
mysql_select_db($dbname) or die('Cannot select database');
?>

Recuerde que las tablas tienen un campo ID de tipo

entero, definida como clave primaria y con autoincremento. As que al aadir el libro a la tabla
necesitaremos recuperar dicho ID (generado
automticamente) para relacionar el ltimo libro
aadido con las imgenes.
Creamos el script que genera la Importacin
Archivo: importxml.php
<?
$xml_file = 'libros.xml';
if (file_exists($xml_file)) {
$xml = simplexml_load_file($xml_file);
} else {
exit('Error al intentar abrir el fichero '.$xml_file);
}
// Todo bien asi que abrimos BD para importar
require 'config.php';

Pag. - 8 -

Universidad Inca Garcilaso de la Vega

/* Recorremos el XML */
$count=0;
foreach ($xml->libro as $libro) {
// Inserta el libro en la tabla
$qry = "INSERT INTO libros ".
"(codigo, titulo, editorial, autor, descripcion,precio)".
" VALUES ('$libro->ref', ".
"'$libro->titulo', ".
"'$libro->editorial', ".
"'$libro->autor', ".
"'$libro->desc', ".
$libro->precio.")";
// Ahora ejecutamos el INSERT en la BD
$result = mysql_query($qry) or die(mysql_error());
// Y necesitamos recuperar el ultimo ID para relacionar sus
imagenes
$libro_id = mysql_insert_id ();
// Y ahora sus imgenes (en este caso tiene 3)
for ($i=0;$i<3;$i++) {
$img_url = $libro->images->image[$i]->url;
$img_des = $libro->images->image[$i]->titulo;
$qry = "INSERT INTO img_libros (libro_id, url, descripcion) ".
"VALUES ($libro_id, '$img_url', '$img_des')";
$result = mysql_query($qry) or die(mysql_error());
}
// Incrementamos contado para ver cuntos libros se importan.
$count++;
}

CREATE TABLE `img_libros` ( `id` int(4) NOT NULL

auto_increment, `libro_id` int(4) NOT NULL, `url` varchar(250)
NOT NULL, `descripcion` varchar(30) default NULL, PRIMARY
KEY (`id`));

VIII. ACTIVIDADES
8.1 Plantear un enunciado para el caso persona
y caso movies.
8.2 Proponer el codigo en XSD para la aplicacin
Movies y Mensaje
8.3 Generar un archivo XML a partir de un
programa en PHP de un sistema de Biblioteca.
8.4 Exportar de MYSQL a XML el ltimo caso del
problema
8.5 Llevar 2 libros con sus respectivas imgenes
a MYSQL, utilizando el archivo libros.xml
Universidad Inca Garcilaso de la Vega
FACULTAD DE INGENIERA DE SISTEMAS, CMPUTO y
TELECOMUNICACIONES
Docente: MSc. Daniel Alejandro Yucra Sotomayor
Lima, Abril, del 2012
Consultas: danielyucra@gmail.com

echo "<br/>";
echo "-------------------------------------------<br/>";
echo "Total de libros importados: $count en total<br/>";
echo "-------------------------------------------<br/>";
?>

Las funciones claves para la importacion son

simplexml_load_file que carga el fichero XML
interpretandolo como un objeto, lo cual simplifica
mucho su manipulacin, permitindonos recorrer
todo el fichero con la funcin en PHP "foreach ($xml>libro as $libro)"; teniendo as para cada registro de
un libro en el XML la oportunidad de obtener sus
valores a travs de la variable $libro, la cual es un
objeto con todas las propiedades definidas en el
XML.
El resto del cdigo se encarga de inserta el registro
en la base de datos y luego recorremos las imgenes
del libro para igualmente insertarlas en la
correspondiente tabla.
Destacando
aqu
el
uso
de
la
funcin
mysql_insert_id() para obtener el valor del ID del
ltimo registro insertado en la tabla libros.
d) Cdigo SQL de las tablas
CREATE TABLE `libros` ( `id` int(4) unsigned NOT NULL
auto_increment, `codigo` varchar(15) default NULL, `titulo`
varchar(30) default NULL, `editorial` varchar(25) NOT NULL,
`autor` varchar(30) default NULL, `descripcion` varchar(500)
default NULL, `precio` decimal(10,0) default NULL, PRIMARY
KEY (`id`));

Curso: Sistemas Distribuidos II

Pag. - 9 -