En este tutorial os vamos a enseñar a hacer un libro de visitas simple con ASP, Flash y sin necesidad de base de datos.
Para evitar el uso de base de datos vamos a almacenar los comentarios de los visitantes en un archivo de texto plano en formato XML.
El mecanismo del libro es muy sencillo, añadimos los comentarios secuencialmente en un fichero de texto existente en nuestro servidor. Para mostrar todos los comentarios, se lee el archivo y se cargan los datos en la película swf.
COMO HACERLO.
El archivo que almacena los comentarios, que en nuestro caso se llama libro.txt, tendrá este formato:
<visita fecha='27/12/2006 12:31:11'>
<autor>Usuario%201</autor>
<comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien%3F</comentario>
</visita>
<visita fecha='27/12/2006 12:31:37'>
<autor>Usuario%202</autor>
<comentario>Este%20es%20otro%20comentario%20de%20prueba%2E%20Pues%20s%ED%2C%20se%20ve%20bien%2E</comentario>
</visita>
Como veis, se parece a un documento XML, pero le faltan dos elementos imprescindibles en todo XML: La declaración del tipo de documento y el nodo principal que contiene al resto de nodos. Más adelante veremos el porqué de este formato incompleto.
Para editar este archivo libro.txt cada vez que se incluye un comentario nuevo, usamos el objeto FileSystemObject de ASP ya que Flash de por sí solo no puede hacerlo. Además tendrá que estar habilitado el permiso de escritura en el directorio que lo contenga. Con este archivo add_comentarios.asp llevamos a cabo la operación.
<%
On Error Resume Next
' Creamos el objeto FileSystemObject llamado fs
Set fs=Server.CreateObject("Scripting.FileSystemObject")
' Abrimos el archivo para modificarlo y nos posicionamos al final
' del archivo, por eso el 2do argumento es 8, si fuera 1 se abriría
' en modo sólo lectura
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 8)
' Insertamos los datos enviados desde Flash
f.WriteLine("<visita fecha='"& Now &"'>")
f.Write("<autor>")
f.Write(Trim(Request("autor")))
f.WriteLine("</autor>")
f.Write("<comentario>")
f.Write(Trim(Request("comentario")))
f.WriteLine("</comentario>")
f.WriteLine("</visita>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
' si Err=0 todo ha ido bien, este valor es devuelto
' a flash para confirmarle la operación
Response.write("error="&Err)
%>
Si os fijáis, se añade la fecha del servidor en el momento del comentario, el autor y el comentario en sí.
Para leer el archivo con los comentarios usamos el archivo comentarios.asp.
<%
Response.ContentType="text/xml"
' Abro el archivo para leerlo
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 1)
' Añado la declaración de documento y abro el nodo principal
Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>")
Response.Write(f.ReadAll)
' cierro el nodo principal, con lo que ya tengo
' un XML bien formado
Response.write("</visitas>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
%>
La respuesta de este archivo es un XML bien construido que podéis ver aquí. La razón de guardar el archivo libro.txt en formato incompleto es que se facilita su actualización de nuevos comentarios. Con cada comentario nuevo simplemente tenemos que añadir al final los nuevos datos y olvidarnos.
En este punto, vamos a Flash para ver el código ActionScript necesario que va en el primer fotograma:
// ajustes iniciales -----------------------------------
System.useCodepage = true;
// evitamos problemas con los nodos en blanco
XML.prototype.ignoreWhite = true;
_global.style.setStyle("fontSize", 10);
visitas_txt.htmlText = true;
// impedimos el uso de los caracteres < y >
// que pueden dar problemas
autor_txt.restrict = "^<>";
comentario_txt.restrict = "^<>";
// fin ajustes iniciales -------------------------------
// estilos CSS para los comentarios
var my_styles:TextField.StyleSheet = new TextField.StyleSheet();
my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px", color:"#99CC00"});
my_styles.setStyle("fecha", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#006699"});
my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#666666"});
visitas_txt.styleSheet = my_styles;
// objeto LoadVars para enviar comentarios
// y comprobar la operación
var visitas_lv:LoadVars = new LoadVars();
visitas_lv.onLoad = function() {
if (this.error == 0) {
comentarios_xml.load("/asp/comentarios.asp");
} else {
visitas_txt.text = "Error escribiendo comentario.";
}
};
// objeto XML que carga los comentarios
var comentarios_xml:XML = new XML();
comentarios_xml.onLoad = cargarComentarios;
function cargarComentarios() {
visitas_txt.text = "";
var array_temp:Array = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de comentarios
titulo_lb.text = array_temp.length+" comentarios";
// relleno el textArea con los comentarios
array_temp.reverse();
for (var k:Number = 0; array_temp[k]; k++) {
var autor:String = unescape(array_temp[k].firstChild.firstChild.toString());
var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString());
visitas_txt.text += "<p><autor>Autor: <b>"+autor+"</b></autor></p>";
visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.fecha+"</fecha></p>";
visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>";
visitas_txt.text += "<p></p>";
}
}
}
// función para mandar un comentario, compruebo que el autor
// tenga por lo menos 3 caracteres y el comentario 1
function enviarComentario() {
if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) {
visitas_lv.autor = escape(autor_txt.text);
visitas_lv.comentario = escape(comentario_txt.text);
visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST");
}
}
// defino la función que se ejecutará el hacer click en el botón
boton_enviar.addEventListener("click", enviarComentario);
// cargo los comentarios sin intervención del usuario
// al entrar en la página
comentarios_xml.load("/asp/comentarios.asp");
Empleamos escape() y unescape() para asegurarnos que no haya problemas con los caracteres empleados en el nombre de autor y los comentarios.
Podéis descargaros este mismo ejemplo y ver cómo funciona: libro.zip
| Nota: Los comentarios soeces u ofensivos serán borrados del archivo por el equipo de tutoriales-flash.com. |
El mecanismo del libro es muy sencillo, añadimos los comentarios secuencialmente en un fichero de texto existente en nuestro servidor. Para mostrar todos los comentarios, se lee el archivo y se cargan los datos en la película swf.
COMO HACERLO.
El archivo que almacena los comentarios, que en nuestro caso se llama libro.txt, tendrá este formato:
<visita fecha='27/12/2006 12:31:11'>
<autor>Usuario%201</autor>
<comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien%3F</comentario>
</visita>
<visita fecha='27/12/2006 12:31:37'>
<autor>Usuario%202</autor>
<comentario>Este%20es%20otro%20comentario%20de%20prueba%2E%20Pues%20s%ED%2C%20se%20ve%20bien%2E</comentario>
</visita>
Como veis, se parece a un documento XML, pero le faltan dos elementos imprescindibles en todo XML: La declaración del tipo de documento y el nodo principal que contiene al resto de nodos. Más adelante veremos el porqué de este formato incompleto.
Para editar este archivo libro.txt cada vez que se incluye un comentario nuevo, usamos el objeto FileSystemObject de ASP ya que Flash de por sí solo no puede hacerlo. Además tendrá que estar habilitado el permiso de escritura en el directorio que lo contenga. Con este archivo add_comentarios.asp llevamos a cabo la operación.
<%
On Error Resume Next
' Creamos el objeto FileSystemObject llamado fs
Set fs=Server.CreateObject("Scripting.FileSystemObject")
' Abrimos el archivo para modificarlo y nos posicionamos al final
' del archivo, por eso el 2do argumento es 8, si fuera 1 se abriría
' en modo sólo lectura
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 8)
' Insertamos los datos enviados desde Flash
f.WriteLine("<visita fecha='"& Now &"'>")
f.Write("<autor>")
f.Write(Trim(Request("autor")))
f.WriteLine("</autor>")
f.Write("<comentario>")
f.Write(Trim(Request("comentario")))
f.WriteLine("</comentario>")
f.WriteLine("</visita>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
' si Err=0 todo ha ido bien, este valor es devuelto
' a flash para confirmarle la operación
Response.write("error="&Err)
%>
Si os fijáis, se añade la fecha del servidor en el momento del comentario, el autor y el comentario en sí.
Para leer el archivo con los comentarios usamos el archivo comentarios.asp.
<%
Response.ContentType="text/xml"
' Abro el archivo para leerlo
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 1)
' Añado la declaración de documento y abro el nodo principal
Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>")
Response.Write(f.ReadAll)
' cierro el nodo principal, con lo que ya tengo
' un XML bien formado
Response.write("</visitas>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
%>
La respuesta de este archivo es un XML bien construido que podéis ver aquí. La razón de guardar el archivo libro.txt en formato incompleto es que se facilita su actualización de nuevos comentarios. Con cada comentario nuevo simplemente tenemos que añadir al final los nuevos datos y olvidarnos.
En este punto, vamos a Flash para ver el código ActionScript necesario que va en el primer fotograma:
// ajustes iniciales -----------------------------------
System.useCodepage = true;
// evitamos problemas con los nodos en blanco
XML.prototype.ignoreWhite = true;
_global.style.setStyle("fontSize", 10);
visitas_txt.htmlText = true;
// impedimos el uso de los caracteres < y >
// que pueden dar problemas
autor_txt.restrict = "^<>";
comentario_txt.restrict = "^<>";
// fin ajustes iniciales -------------------------------
// estilos CSS para los comentarios
var my_styles:TextField.StyleSheet = new TextField.StyleSheet();
my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px", color:"#99CC00"});
my_styles.setStyle("fecha", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#006699"});
my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#666666"});
visitas_txt.styleSheet = my_styles;
// objeto LoadVars para enviar comentarios
// y comprobar la operación
var visitas_lv:LoadVars = new LoadVars();
visitas_lv.onLoad = function() {
if (this.error == 0) {
comentarios_xml.load("/asp/comentarios.asp");
} else {
visitas_txt.text = "Error escribiendo comentario.";
}
};
// objeto XML que carga los comentarios
var comentarios_xml:XML = new XML();
comentarios_xml.onLoad = cargarComentarios;
function cargarComentarios() {
visitas_txt.text = "";
var array_temp:Array = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de comentarios
titulo_lb.text = array_temp.length+" comentarios";
// relleno el textArea con los comentarios
array_temp.reverse();
for (var k:Number = 0; array_temp[k]; k++) {
var autor:String = unescape(array_temp[k].firstChild.firstChild.toString());
var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString());
visitas_txt.text += "<p><autor>Autor: <b>"+autor+"</b></autor></p>";
visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.fecha+"</fecha></p>";
visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>";
visitas_txt.text += "<p></p>";
}
}
}
// función para mandar un comentario, compruebo que el autor
// tenga por lo menos 3 caracteres y el comentario 1
function enviarComentario() {
if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) {
visitas_lv.autor = escape(autor_txt.text);
visitas_lv.comentario = escape(comentario_txt.text);
visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST");
}
}
// defino la función que se ejecutará el hacer click en el botón
boton_enviar.addEventListener("click", enviarComentario);
// cargo los comentarios sin intervención del usuario
// al entrar en la página
comentarios_xml.load("/asp/comentarios.asp");
Empleamos escape() y unescape() para asegurarnos que no haya problemas con los caracteres empleados en el nombre de autor y los comentarios.
Podéis descargaros este mismo ejemplo y ver cómo funciona: libro.zip
Tutoriales-flash.com
La web de los tutoriales flash en castellano