Editando apunte: XML para guardar tablas

Editando apunte: XML para guardar tablas cerrar apuntes

ID: 100 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: javascript, php, webmaster
Extras: javascript, php, webmaster
apunte: - - - - - - - -

<p>
	<img src="diario.imagen.php?id=3&max=300" alt="webmaster" title="webmaster" longdesc="diario.ficha.php?id=3"
	style="border: 3px ridge red; float: right; margin: 0 0 .5em 1em; padding: .5em;"/>[rss]En ocasiones tenemos que realizar operaciones que implican cierto riesgo de alteración de datos y se nos ocurre que podría ser buena idea volcarlos a un fichero que pueda servirnos para recuperarlos si algo falla.[/rss]
	También podríamos utilizar esos mismos datos para transferir esa información a otro soporte (algún disco local, por ejemplo); entonces el formato que se nos antoja adecuado es una estructura "<a href="http://es.wikipedia.org/wiki/Extensible_Markup_Language">XML</a>".
</p>
<h3 class="subtitulo">
	Nuestro caso: Los apuntes
</h3>
<p>
	[rss]Para nuestro caso concreto, vamos a volcar la tabla de apuntes, pero solo nos interesan los título con sus respectivos contenidos, descartando la fecha y demás campos que para nuestro propósito son innecesarios, aunque viendo el código puede apreciarse con que facilidad podríamos insertar más campos.[/rss]
</p>
<p>
	Para la creación del nuevo documento usaremos código <a href="http://es.wikipedia.org/wiki/PHP">PHP</a>:
</p>
<pre class="codigo">$cabeza =<<< cabecera
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="diario.jocker.php?extra=apuntes_xsl" ?>
<apuntes>

cabecera;

$lista = "";

$sql = "select id, titulo, apunte from $tabla_apuntes order by fecha desc"; 
$res = @mysql_query($sql);

while ($dato = mysql_fetch_array($res))    {
	$id = $dato["id"];
	$titulo = $dato["titulo"];
	$apunte = $dato["apunte"];
	$lista .= "<apunte>\n\t";
	$lista .= "<id>$id</id>";
	$lista .= "<titulo><![CDATA[$titulo]]></titulo>";
	$lista .= "<texto><![CDATA[$apunte]]></texto>";
	$lista .= "\n</apunte>\n";
}

$apuntes = "$cabeza\n$lista\n</apuntes>\n";
file_put_contents("apuntes.xml", $apuntes);</pre>

<p>
	Para poder comprobar que el resultado es correcto, hemos asociado una hoja de estilos <a href="diario.jocker.php?extra=codigo&codigo=apuntes_xsl&PHPSESSID=sem4m74jql80le1p16bpssk6d7">XSL</a> y ya podemos <a href="apuntes.xml?PHPSESSID=sem4m74jql80le1p16bpssk6d7">enlazarlo</a> (posiblemente no actualizaremos este fichero constantemente).
</p>

<h3 class="subtitulo">
	Ajax al rescate
</h3>

<p>
	Ya hemos hablado de la "x" de Ajax: <a href="?titulo=Ajax%2C+con+X+de+XML&PHPSESSID=sem4m74jql80le1p16bpssk6d7">Ajax, con X de XML</a>, y en este caso no es necesario leer un documento creado dinámicamente.
	Nuestra página leerá al iniciarse el fichero mencionado, volcándolo en una capa que hemos identificado como "listado" (id="listado").
</p>

<pre class="codigo">window.onload = function() {
	url = "apuntes.xml";
	Ajax = objetoAjax();
	Ajax.open("get", url, true);
	Ajax.onreadystatechange = function()	{
		if	(Ajax.readyState == 4 && Ajax.status == 200) {
			nueva_capa = document.createElement("ul");
			respuesta = Ajax.responseXML.documentElement;
			apuntes = respuesta.getElementsByTagName("apunte");
			for (i = 0, total = apuntes.length; i < total; i++)	{
				titulo = apuntes[i].getElementsByTagName("titulo")[0].firstChild.nodeValue;
				apunte = apuntes[i].getElementsByTagName("texto")[0].firstChild.nodeValue;
				id = apuntes[i].getElementsByTagName("id")[0].firstChild.nodeValue;
				capas[id] = {"estado": false, "apunte": apunte};
				f = "<div><input type='checkbox' id='c_" + id + "' name='ap' value='ap_" + id + "'/> ";
				f += "<span style='cursor: pointer' onclick='plegar(" + id + ")'>" + titulo + "</span>";
				f += "<form action='apuntar.php' method='post' target='ventana'";
				f += " id='f_" + id + "'>";
				f += "<input type='hidden' name='id' value='" + id + "'/>";
				f += "<input type='hidden' name='titulo' value='" + titulo + "'/>";
				f += "<fieldset><legend> " + titulo + " </legend>";
				f += "<textarea name='apunte' style='width:100%; height: 200px'></textarea>";
				f += "<button type='submit' style='text-align: center; width: 100%;'> actualizar </button>";
				f += "</fieldset>";
				f += "<div id='v_" + id + "' class='prever'>";
				f += "<button type='button' onclick='prever(" + id + ")'>prever";
				f += "</button></div>";
				f += "</form>";
				tag("listado").innerHTML += f;
			};
			tag("cargando").src = "si.gif";//	<img src="diario/dibujos/espera.gif" alt="cargando" /> => <img src="diario/dibujos/si.gif" alt="cargado"/>
		}
	}
	Ajax.send();
}</pre>

<p>
	Si analizamos este código podemos encontrar cosas de difícil comprensión, que trataremos de explicar a continuación.
</p>

<h3 class="subtitulo">
	Volcado incompleto y objeto "capas"
</h3>
<p>
	Si bien generamos un elemento "textarea" con el nombre "apunte" (name="apunte"), y una capa "div" con la clase "prever" (class="prever"),
	podemos ver que no lleva contenido alguno en el primero de los casos, y que parece tratarse del valor asociado a la etiqueta apunte del fichero leído;
	y en el segundo caso, tan solo hay un botón con la leyenda "prever", y que tiene como parámetro el identificador "id" del apunte.
</p>
<p>
	Las razones son: para el primero de los casos que realmente no se muestra el contenido ya que el formulario está oculto y que se despliega pulsando sobre su título.
	De todos modos en el objeto "capas" guardamos cada apunte asociado a su id, así que a la vez que desplegamos el apunte asignamos ese valor al elemento textarea:
</p>

<pre class="codigo">function plegar(f)	{
	if (document.forms["f_" + f].apunte.value == "")
		document.forms["f_" + f].apunte.value = capas[f].apunte;
	tag("f_" + f).style.display = (capas[f].estado) ? "none":"block";
	capas[f].estado = !capas[f].estado;
}</pre>

<p>
	[rss]Si hubiéramos intentado incluir los contenidos al obtenerlos mediante Ajax, podríamos tener problemas por las etiquetas que tienen los apuntes, porque se podrían cerrar algunas existentes o añadidas como los "div" y "textarea".[/rss]
	Y si incluyésemos los contenidos se deberían cargar muchos elementos que ralentizarían demasiado la carga de la página.
</p>

<p>
Así es la función prever:
</p>

<pre class="codigo">function prever(f){
	tag("v_" + tag("id_" + f).value).innerHTML = document.forms["f_" + f].apunte.value;
}</pre>
<p>
	Evidentemente los cambios solo serán posibles en el modo administrativo. <a href="diario.plugin.php?plugin=apuntes_Ajax&PHPSESSID=sem4m74jql80le1p16bpssk6d7">Aquí el resultado</a> (nótese que cada apunte puede considerarse un probador de código modificando el contenido y pulsando el botón "prever").
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación