logoApuntes agrupados: Sistema de comentarios paso a paso


Sistema de comentarios paso a paso (tutor_comentarios): Se encontraron 6 apuntes:

  1. Sistema de comentarios paso a paso: Introducción
  2. Sistema de comentarios paso a paso: Los datos
  3. Sistema de comentarios paso a paso: El formulario
  4. Sistema de comentarios paso a paso: El listado
  5. Sistema de comentarios paso a paso: Validar con javascript
  6. Sistema de comentarios paso a paso: Seguridad


Titulo: Sistema de comentarios paso a paso: Introducción


emoticón de Caricatos Publicado el día 07 de septiembre de 2012
id=95

En varias ocasiones me han pedido el código de alguno de mis sistemas de comentarios, pero esos códigos están algo "ajados" por las distintas modificaciones que hemos realizado, así que me pareció buena idea empezar desde cero.

Comentarios vs. Libro de visitas

Debemos saber diferenciar ambas cosas ya que si bien tienen la misma finalidad, los libros de visitas son más generales donde los comentarios suelen referirse al contenido global de todo el sitio. En los sistemas de comentarios debe añadirse también la referencia de la página donde queremos dejar el comentario.

A modo de introducción listaremos las páginas donde se trata este tema para que sean lecturas previas o introductorias. Empezaremos con los comentarios:

Ponga comentarios en su web
Poner comentarios en una página, puede parecer algo complejo, pero si pensamos que el código para insertar esos comentarios podemos usarlo en todas las páginas que deseemos simplemente añadiendo un par de líneas en el final de nuestra página php, ese trabajo será compensado. (Esta página es de otro dominio).
Este diario: Los comentarios
Como todo blog, tenemos un espacio para dejar comentarios en los apuntes.
Este diario: Mejoras en los comentarios
Sabíamos que tarde o temprano nos visitarían los spamers (léase "mamarrachos") introduciendo basura en nuestro sistema de comentarios, así que nos hemos visto obligados a retocarlo.
Este diario: BBCodes en comentarios
Los comentarios a los apuntes eran demasiado básicos así que hemos decidido enriquecerlos algo con unas pocas variantes.
Este diario: Comentarios y seguridad
No creía que pudieran usar una página mía para enviar mensajes "basura" de forma masiva, y aunque también se puede considerar un halago el hecho de que nos considerasen (aunque para tan despreciable motivo), nos obliga a revisar nuestro sistema de seguridad.
Este diario: Más comentarios
Hemos diseñado nuestro sistema de comentarios solo para los apuntes, y ahora lo hemos retocado para que también puedan comentarse los demás elementos.
Comentarios y evaluación en otras páginas del dominio
Hemos integrado algunas de las antiguas páginas de este dominio, y ahora también podemos comentarlas y evaluarlas.

Ahora nos dedicaremos a los libros de visitas:

Libro de visitas
En los libros de visita podemos dejar constancia de nuestra presencia en los distintos sitios donde los encontremos. En las páginas web pasa lo mismo.
Libro de visitas: dedos flojos
Cuando publicamos el apunte "Libro de visitas", ya habíamos previsto que nos visitarían los típicos aburridos con dedos flojos, y tendríamos que actuar editando o eliminando mensajes.

Vamos a plantear un sistema de comentarios muy básico pero también muy fácil de ampliar. Para empezar debemos saber que necesitamos una base de datos (una tabla de ella), y un lenguaje para su gestión. Nosotros disponemos del lenguaje php y una base de datos mysql. También nos ayudaremos con phpmyadmin, aunque con precaución podemos evitar esta ayuda revisando el apunte: Sencilla gestión de una base de datos: estructuras.






Titulo: Sistema de comentarios paso a paso: Los datos


emoticón de Caricatos Publicado el día 13 de septiembre de 2012
id=96

Los sistemas de comentarios tendrán siempre aparte del comentario en sí, otros datos básicos como el autor del mismo y la fecha de publicación. Trataremos de explicar como organizar la tabla que usaremos para guardar y recuperar esos datos.

Datos obligatorios

En este apartado mostraremos esos datos visibles o no que no debemos olvidarnos de incluír para la gestión del sistema de comentarios.

El comentario.

El texto podrá tener limitaciones según nuestro cometido. Podría ser limitado a esos 160 caracteres de los SMS o los 140 de Twitter. Pero en esta serie de apuntes simplemente lo definiremos como un campo de texto.

El autor.

Tal vez podría no ser obligatorio y considerar todos los comentarios anónimos, pero nosostros vamos a dejar que el autor pueda identificarse. Este dato creemos que debe limitarse, y queda "a gusto del consumidor" su tamaño.

Fecha de publicación.

Sin comentarios. Los sistemas gestores de bases de datos suelen tener mecanismos para introducir la fecha del sistema en los nuevas inserciones de datos, pero tenemos que tener prudencia para que no cambie cuando hagamos modificaciones (si fuese necesario).

Identificador "id".

Tampoco sería obligatorio, salvo para poder gestionar el mantenimiento. La forma más simple y tal vez mejor es usar un valor numérico del tipo "auto_increment".

La referencia.

Este dato no sería necesario en un libro de visitas donde los comentarios serían sobre la totalidad de contenidos de la página. Pero cuando se deben comentar elementos concretos, debemos crear un mecanismo de discriminación.

Con respecto a la discriminación, puede ser de elementos de una tabla de base de datos, y en tal caso bastaría con su identificador "id" (siempre que exista, que aún siendo algo normal, podemos encontrarnos con excepciones), o como en este caso (de este diario), puede referirse tanto a los apuntes como a sus categorías y etiquetas; incluso a viejas páginas que hemos adaptado al sistema actual, como también a elementos accesorios de ayuda a enriquecer el contenido como estilos y todo tipo de extras.

Otros datos que pueden interesar

Hasta ahora los datos mencionados los podemos considerar básicos, aunque podríamos añadir unos pocos con miras a mejorar la gestión administrativa del sistema (que no deberíamos descuidar).

Estado

Este atributo debería admitir muy pocos valores, los más básicos serían activo e inactivo.

Email

Aunque no se trate de un valor necesario en los mensajes, en el sistema del dominio "caricatos.net" se ha implementado un sistema de validación por email que funciona perfectamente y es una ayuda valiosísima para evitar mensajes no deseados.

Anonimato

Es el nombre que tiene el campo usado en el dominio antes mencionado para quienes no quieren compartir su correo electrónico (recordemos que es un caso donde se activan los mensajes por email).

Evaluación

Podemos aprovechar para que evalúen el contenido donde dejan el mensaje. En nuestro sistema actual, el sistema de estrellas es independiente.

También podemos añadir nuestro toque con otros datos a incluir, como página web, procedencia, edad, sexo, etc., pero en esta serie de apuntes poco trataremos esos datos que podrían considerarse superfluos para el sistema.

Para una idea de nuestro sistema creo que son suficientes datos, aunque solo usaremos los que consideremos básicos.

Creando la tabla

Para ayudarnos hemos revisado la estructura con el gestor phpMyAdmin y obtuvimos la consulta que mostramos a continuación:

CREATE TABLE IF NOT EXISTS `comentarios`	(
	`nombre` varchar(50) NOT NULL,
	`activo` tinyint(1) NOT NULL,
	`comentario` text NOT NULL,
	`referido` varchar(100) NOT NULL,
	`fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
	`id` int(11) NOT NULL AUTO_INCREMENT,
	PRIMARY KEY (`id`)
);

Para otros campos de la tabla no realizaremos gestión alguna pero supongo que no será difícil su inserción.

Si todo va bien la próxima acción será crear un formulario acorde a la estructura que tenemos. Puede servir de ejemplo el que encontramos en esta página.






Titulo: Sistema de comentarios paso a paso: El formulario


emoticón de Caricatos Publicado el día 11 de noviembre de 2012
id=101

Seguimos con esta serie de apuntes para crear un sistema de comentarios, y si bien es muy sencilla la parte teórica para hacerlo, debemos considerar importantes cuestiones adicionales.

Recordemos la estructura de datos con el código para crear nuestra tabla:

CREATE TABLE IF NOT EXISTS `comentarios`	(
	`nombre` varchar(50) NOT NULL,
	`activo` tinyint(1) NOT NULL,
	`comentario` text NOT NULL,
	`referido` varchar(100) NOT NULL,
	`fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
	`id` int(11) NOT NULL AUTO_INCREMENT,
	PRIMARY KEY (`id`)
);

De todos los campos de nuestra tabla, nos interesa el nombre y el comentario, y de ellos tan solo el comentario debería ser obligatorio (según nuestro criterio); entonces se nos antoja que se tratará de un trabajo sencillo pero aquí entran esas cuestiones adicionales, de las que la seguridad es primordial.

El campo "activo" sería otro "omitible", pero por nuestra experiencia no nos olvidamos de él (en nuestra lucha encarnizada contra el spam). Y el campo referido podría estar oculto o como en el sistema de comentarios de nuestro diario, seleccionable por radios (Podemos fijarnos en alguno de los apuntes con comentarios como Transiciones: Introducción, donde existen 2 elementos "radio" uno para el apunte y otro para el comentario existente en el mismo); pero no es nuestra intención dificultar la comprensión con códigos más complejos.

Tanto el campo fecha como el campo id los genera el sistema en el servidor.

Validaciones

La razón por la que usamos el plural es porque siempre aconsejamos que sean dos (2) validaciones: en el navegador con javascript, y la más segura en el servidor con el lenguaje que tengamos (en nuestro caso php).

Debemos evitar los formularios vacíos o con etiquetas html (posiblemente maliciosas). También deberíamos considerar el spam, y para ello se puede incluir un código de seguridad del tipo "captcha", donde sencillamente debe coincidir el código introducido en un campo de texto con el valor de una variable de sesión en el servidor:

$captchaBueno = ($_SESSION["captcha"] == $_POST["captcha"]);

No nos explayaremos más sobre las validaciones ya que tenemos un tutorial bastante completo en: El abc de los formularios, además del artículo Ponga comentarios en su web.

Algunos códigos

Nos abstraeremos de mostrar códigos complejos, aunque procuraremos que sean completos. Empezaremos por el formulario:

<form action="enviarComentario.php" method="post" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="pagina" value="<?php echo $pagina; ?>" />
<label for="nombre">Nombre</label>: <input type="text" id="nombre" name="nombre" />
<br/>
<label for="mensaje">comentario</label>:
<textarea name="comentario" id="mensaje"></textarea>
<br/>
</form>

Y en el servidor recogemos los datos y actualizamos la base de datos:

<?php
$nombre = $_POST["nombre"];
$comentario = $_POST["comentario"];
$pagina = $_POST["pagina"];

// ... y luego de validar... //

$sql = "insert into $tabla_comentarios (nombre, comentario, referido, fecha) values ('$nombre', '$comentario', '$pagina', 'now()')";
@mysql_query($sql);
?>

Si todo ha ido bien, ya se pueden insertar los primeros comentarios. Ahora tenemos que pensar ¿cómo mostrarlos?...






Titulo: Sistema de comentarios paso a paso: El listado


emoticón de Caricatos Publicado el día 20 de noviembre de 2012
id=104

De esta serie de apuntes sobre los sistemas de comentarios, aún nos queda mostrar los comentarios que han hecho los visitantes de nuestra página. Teniendo la referencia, primero debemos saber buscarlos en nuestra base de datos.

Supongamos que nuestra referencia la ponemos directamente en nuestra página, tal vez de la siguiente manera:

$pagina = "listado_comentarios";

Nuestra consulta sería:

$sql = "select * from comentarios where referido='$pagina'";
$resultado = mysql_query($sql);

La misma consulta sería válida para cualquiera de los listados que necesitásemos, así que podríamos usar el mismo código en todas las páginas donde implementemos el sistema. Podría hacerse (y desde luego, así hacemos en este diario) utilizando ficheros externos que incrustamos en las páginas con instrucciones "include".

Nos queda mostrar los datos devueltos por la variable "$resultado":

$total = mysql_num_rows($resultado);
$mensaje = ($total == 0) ? "No hay comentarios" : "Hay $total comentarios";
echo $mensaje;
$mensajes = array();
while ($item = mysql_fetch_array($resultado))	{
	$autor = $item["nombre"];
	$mostrar_autor = ($autor == "") ? "anónimo" : $autor;
	$comentario = $item["comentario"];
	$m = "<div>Autor: $mostrar_autor<br/>Comentario:<br/><p>$comentario</p></div>";
	array_push($mensajes, $m);
}
echo implode("<hr/>\n", $mensajes);

yo Tan solo nos queda juntar los conocimientos de esta serie de apuntes y animarse a implementar nuestro propio sistema. Espero que sea de utilidad.






Titulo: Sistema de comentarios paso a paso: Validar con javascript


emoticón de Caricatos Publicado el día 04 de marzo de 2013
id=117

Podemos mejorar nuestros formularios evitando que se envíen cuando no se han completado correctamente, Y no está de más añadir algún código de seguridad para evitar el spam. Antes de continuar recomendamos leer este viejo tutorial: El abc de los formularios, en especial la parte titulada "Validando en el navegador (javascript)".

Siempre que pensamos en programar con javascript debemos considerar que nuestros visitantes pueden desactivarlo, no por ello haya que descartarse.

Conceptos básicos

Como todo tipo de formulario, debe tener un botón de envío (tipo submit), y para evitar la dependencia de javascript, debemos tener también un sistema de validación en el servidor; en nuestro caso con el lenguaje php (será un próximo apunte).

Pondremos un sencillo ejemplo de formulario que al enviarse mostrará un mensaje de alerta. Estará compuesto de varios campos que se validarán de distintas maneras. Uno de esos campos que siempre existen es uno de comentario, mensaje, sugerencia o similar que debemos evitar que se quede vacío.

Aunque no se trate de un campo importante, para este ejemplo de validación, consideraremos el autor del comentario un campo obligatorio, así como su tratamiento (Sr., Sra.).

Para terminar pondremos el típico código de seguridad para evitar el odioso spam, aunque no será sofisticado al ser este formulario tan solo un ejemplo para aplicar la validación.

Usaremos código no intrusivo, así que tendremos que añadir nuestra validación al cargarse la página.

El código

Lo primero es obtener el formulario por el id y asociar el evento submit con la rutina de validación. Antes de continuar recordaremos códigos que necesitaremos para nuestro cometido.

function tag(id) {return document.getElementById(id);};
function poner_evento(elemento, evento, f)	{
	if (document.addEventListener)
		elemento.addEventListener(evento, f, true);
	else
		if (document.attachEvent)
			elemento.attachEvent("on" + evento, f);
		else
			elemento["on" + evento] = f;
}

function cancelar_evento(e) {
	if (!e) e = window.event;
	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
}

El primer código :"tag", es un alias de "document.getElementById" para acortar nuestro código. Luego "poner_evento" equivale a "addEventListener/attachEvent", y por último "cancelar_evento" es casi equivalente a "return false", que nos ayudará a cancelar el envío del formulario.

Probaremos nuestro código con el formulario que vemos a continuación y luego lo comentaremos.

Formulario de ejemplo

:
Autor del comentario :
Tratamiento:
Código de seguridad

En el recuadro código de seguridad inserte el resultado de la siguiente operación: 5 x 5

:

Al no tratarse de un código sofisticado (tal vez nos dediquemos a ello en futuros apuntes), realizaremos controles muy básicos. El comportamiento será de chequeo de los distintos campos obligatorios, añadiendo a un array de errores una advertencia por cada elemento que no pase la validación.

Validando textos y radios

En este apunte solo controlaremos que los campos de texto requeridos no queden vacíos sin considerar la coherencia del contenido.

Con los controles del tipo radio, al ser varios con un mismo nombre -en este caso tan solo dos (2)-, hay que controlar que al menos uno de esos controles esté chequeado.

El código lo mostramos a continuación:

function validar_ejemplo(e) {
	errores = [];
	if (this.comentario.value == "")
		errores.push("Debe escribir en el recuadro para el comentario.");
	if (this.nombre.value == "")
		errores.push("Debe indicarnos su nombre.");
	if (!(this.trato[0].checked || this.trato[1].checked))
		errores.push("Indíquenos el tratamiento que debemos darle.");
	if (this.seguridad.value == "")
		errores.push("Rellene el código de seguridad con el resultado de la operación expuesta.");
	if (errores.length > 0)	{
		alert(errores.join("\n"));
		cancelar_evento(e);
	}
}

La función validar_ejemplo es muy sencilla y no creo que merezca explicación, aunque es un ejemplo para demostrar que no es necesario el uso de extensas librerías para una sencilla validación.






Titulo: Sistema de comentarios paso a paso: Seguridad


emoticón de Caricatos Publicado el día 29 de septiembre de 2013
id=124

Debemos tener una lucha encarnizada contra el spam... A nadie le gusta ver entre los comentarios a usuarios de nombre "viagra online", o "encuentra a tu pareja", o tantos otros de ese tipo y con comentarios totalmente fuera de sitio.

Lamentablemente tarde o temprano todas las páginas con comentario (o simplemente formularios de contacto o similares) son víctimas de esa odiosa práctica, por lo que debemos buscar una medida para evitar o tan solo limitar el envío de spam.

Códigos de seguridad

Los códigos "captcha" por mucho tiempo han sido los más usado para evitar los mensajes "basura", consistente en una imagen que representa la clave que se debe introducir en un control del formulario, y de coincidir, realizar la transacción. Pero presenta algunos inconvenientes, ya que esa clave puede obtenerse con la tecnología "OCR" (reconocimiento de caracteres). Una variable del mismo consistía en deformar el aspecto de la clave, ya sea distorsionándolos o insertándolos en fondos que en parte dificultan la lectura, razón por la cual debíamos obtener nuevas claves que en parte es un incordio para quien quiere dejar su comentario, y en muchos casos desisten de ello.

Hay alternativas a los códigos captcha que consiste en contestar a una sencilla pregunta, por ejemplo una simple operación matemática, o como en nuestro caso escribir una palabra que tenemos resaltada en un párrafo

El futuro

Estamos trabajando en un nuevo sistema que en breve presentaremos, pero a pesar de que en principio pueda parecer eficaz, debemos seguir pensando que "los malos" pueden encontrar alguna vulnerabilidad. Por lo pronto seguiremos dejando los comentarios ocultos, mostrándolos tras una sesión administrativa de los mismos.



Zona de comentarios

Esto grupo aún no tiene comentarios.

Evaluación

Valoración de esta página: (grupo.tutor_comentarios) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio