You are here
Sencillo sistema de comentarios AJAX Sin categoría 

Sencillo sistema de comentarios AJAX

Sencillo sistema de comentarios AJAX

Esta vez, estamos haciendo un Sencillo sistema de comentarios AJAX. Se contará con un gravatar integración y demostrar cómo lograr una comunicación efectiva entre jQuery y PHP / MySQL con la ayuda de JSON.

Paso 1 – XHTML

En primer lugar, permite echar un vistazo a el margen de beneficio de los comentarios. Este código es generado por PHP en la clase comentario, lo que vamos a echar un vistazo a en un momento.

demo.php

<div class="comment">
    <div class="avatar">
        <a href="http://tutorialzine.com/">
        <img src="http://www.gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif">
        </a>
    </div>

    <div class="name"><a href="http://tutorialzine.com/">Person's Name</a></div>
    <div title="Added at 06:40 on 30 Jun 2010" class="date">30 Jun 2010</div>
    <p>Comment Body</p>
</div>

El div contiene un avatar una imagen de avatar, que se obtiene de hipervínculo (si el usuario ha introducido una URL válida al presentar el comentario) y gravatar.com . Volveremos a esto en la etapa de PHP de la Tut. Por último tenemos el nombre y divs tiempo, y el cuerpo comentario.

El otro elemento importante en la parte XHTML es el formulario de comentarios. Se envía a través de la POST . Se requiere que todos los campos excepto para el campo URL.

demo.php

<div id="addCommentContainer">
	<p>Add a Comment</p>
	<form id="addCommentForm" method="post" action="">
    	<div>
        	<label for="name">Your Name</label>
        	<input type="text" name="name" id="name" />

            <label for="email">Your Email</label>
            <input type="text" name="email" id="email" />

            <label for="url">Website (not required)</label>
            <input type="text" name="url" id="url" />

            <label for="body">Comment Body</label>
            <textarea name="body" id="body" cols="20" rows="5"></textarea>

            <input type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>

Este formulario se envía a través de AJAX. La validación se realiza en su totalidad en el backend porsubmit.php , como se verá en el paso del tutorial jQuery. Cada campo tiene un elemento de etiqueta correspondiente, con un apropiado para atributo.

Paso 2 – PHP

PHP se encarga de la comunicación con la base de datos MySQL y genera el marcado de los comentarios.También está en el extremo receptor de las peticiones AJAX e inserta los datos de comentarios a loscomentarios de la tabla. Puede ver el código que imprime los comentarios a la página a continuación.

demo.php

/*
/	Select all the comments and populate the $comments array with objects
*/

$comments = array();
$result = mysql_query("SELECT * FROM comments ORDER BY id ASC");

while($row = mysql_fetch_assoc($result))
{
	$comments[] = new Comment($row);
}

La consulta MySQL selecciona todas las entradas de la base de datos y llena el $ comentarios matriz con los objetos de la clase comentario, que se verá a continuación. Esta matriz se emite más adelante en la ejecución del script.

demo.php

/*
/	Output the comments one by one:
*/

foreach($comments as $c){
	echo $c->markup();
}

Cada comentario tiene un margen de beneficio () método, que genera el código HTML válido listo para ser impreso a la página. Se puede ver la definición de este método y la clase a continuación.

La clase tiene una fila de la base de datos (con descabellada mysql_fetch_assoc () ) y lo almacena en la variable privada de datos $ . Está disponible sólo para los métodos de la clase y no se puede acceder desde el exterior.

comment.class.php – Parte 1

class Comment
{
	private $data = array();

	public function __construct($row)
	{
		/*
		/	The constructor
		*/

		$this->data = $row;
	}

	public function markup()
	{
		/*
		/	This method outputs the XHTML markup of the comment
		*/

		// Setting up an alias, so we don't have to write $this->data every time:
		$d = &$this->data;

		$link_open = '';
		$link_close = '';

		if($d['url']){

			// If the person has entered a URL when adding a comment,
			// define opening and closing hyperlink tags

			$link_open = '<a href="'.$d['url'].'">';
			$link_close =  '</a>';
		}

		// Converting the time to a UNIX timestamp:
		$d['dt'] = strtotime($d['dt']);

		// Needed for the default gravatar image:
		$url = 'http://'.dirname($_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]).
				'http://cdn.tutorialzine.com/img/default_avatar.gif';

		return '

			<div class="comment">
				<div class="avatar">
					'.$link_open.'
					<img src="http://www.gravatar.com/avatar/'.
				md5($d['email']).'?size=50&default='.
				urlencode($url).'" />
					'.$link_close.'
				</div>

				<div class="name">'.$link_open.$d['name'].$link_close.'</div>
				<div class="date" title="Added at '.
				date('H:i \o\n d M Y',$d['dt']).'">'.
				date('d M Y',$d['dt']).'</div>
				<p>'.$d['body'].'</p>
			</div>
		';
	}

Esta secuencia de comandos utiliza gravatar para presentar los avatares en los comentarios.

Para aquellos de ustedes, que no han utilizado gravatar, este es un servicio muy útil, que permite asociar un avatar con su dirección de correo electrónico.

La imagen de avatar puede ser fácilmente fue a buscar al pasar un md5 ()de hash codificado de su dirección de correo electrónico a gravatar.com. Esto es exactamente lo que hacemos en la línea 48 .

Aviso línea 39 por encima de ella – el guión trata de averiguar la dirección URL a la que se encuentra, y determina la dirección exacta del default_avatar.gif imagen.

Este gif se pasa a lo largo de la Gravatar hash MD5, por lo que si no se encontró una imagen de usuario para este correo electrónico en particular, se muestra la imagen de respaldo en su lugar.

comment.class.php – Parte 2

	public static function validate(&$arr)
	{
		/*
		/	This method is used to validate the data sent via AJAX.
		/
		/	It return true/false depending on whether the data is valid, and populates
		/	the $arr array passed as a paremter (notice the ampersand above) with
		/	either the valid input data, or the error messages.
		*/

		$errors = array();
		$data	= array();

		// Using the filter_input function introduced in PHP 5.2.0

		if(!($data['email'] = filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)))
		{
			$errors['email'] = 'Please enter a valid Email.';
		}

		if(!($data['url'] = filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)))
		{
			// If the URL field was not populated with a valid URL,
			// act as if no URL was entered at all:

			$url = '';
		}

		// Using the filter with a custom callback function:

		if(!($data['body'] = filter_input(INPUT_POST,'body',FILTER_CALLBACK,
						array('options'=>'Comment::validate_text'))))
		{
			$errors['body'] = 'Please enter a comment body.';
		}

		if(!($data['name'] = filter_input(INPUT_POST,'name',FILTER_CALLBACK,
						array('options'=>'Comment::validate_text'))))
		{
			$errors['name'] = 'Please enter a name.';
		}

		if(!empty($errors)){

			// If there are errors, copy the $errors array to $arr:

			$arr = $errors;
			return false;
		}

		// If the data is valid, sanitize all the data and copy it to $arr:

		foreach($data as $k=>$v){
			$arr[$k] = mysql_real_escape_string($v);
		}

		// Ensure that the email is in lower case (for a correct gravatar hash):
		$arr['email'] = strtolower(trim($arr['email']));

		return true;

	}

El validate () método anterior (también parte de la clase) se define como estática .

Esto significa que puede ser evocado directamente como Añadir :: validate () , sin la necesidad de crear un objeto de la clase. Lo que hace este método, es validar los datos de entrada que se presenta a través de AJAX.

Este método utiliza las nuevas funciones de filtro, que están disponibles a partir de PHP 5.2.0 . Estos nos permiten validar y filtrar los datos de entrada que se pasa a la secuencia de comandos fácilmente.

Por ejemplo filter_input (INPUT_POST, ‘url’, FILTER_VALIDATE_URL) significa que estamos comprobando si $ _POST [ ‘url’] es una dirección URL válida. Si es así, la función devuelve el valor de la variable, de lo contrario, volver falsa .

Esto es muy útil, ya que hasta ahora, hemos tenido que usar expresiones regulares a medida para validar los datos (y tienen serie de sentencias if).

Además, otra ventaja es que estos datos se recupera antes de que se aplique cualquier transformaciones específicas de la configuración (como las comillas mágicas).

También tenemos la opción de especificar una función personalizada que se va a aplicar algunas modificaciones más avanzadas de los datos, como se puede ver en las líneas 31 y 37.

comment.class.php – Parte 3

	private static function validate_text($str)
	{
		/*
		/	This method is used internally as a FILTER_CALLBACK
		*/

		if(mb_strlen($str,'utf8')<1)
			return false;

		// Encode all html special characters (<, >, ", & .. etc) and convert
		// the new line characters to <br> tags:

		$str = nl2br(htmlspecialchars($str));

		// Remove the new line characters that are left
		$str = str_replace(array(chr(10),chr(13)),'',$str);

		return $str;
	}

}

El último método es validate_text, el cual estamos pasando como una función de devolución de llamada en los dos filter_input llama anteriormente.

Codifica todos los caracteres especiales de HTML, bloqueando los ataques XSS. También sustituye los caracteres de nueva línea con <br /> salto de línea.

submit.php

/*
/	This array is going to be populated with either
/	the data that was sent to the script, or the
/	error messages:
/*/

$arr = array();

$validates = Comment::validate($arr);

if($validates)
{
	/* Everything is OK, insert to database: */

	mysql_query("	INSERT INTO comments(name,url,email,body)
					VALUES (
						'".$arr['name']."',
						'".$arr['url']."',
						'".$arr['email']."',
						'".$arr['body']."'
					)");

	$arr['dt'] = date('r',time());
	$arr['id'] = mysql_insert_id();

	/*
	/	The data in $arr is escaped for the mysql insert query,
	/	but we need the unescaped text, so we apply,
	/	stripslashes to all the elements in the array:
	/*/

	$arr = array_map('stripslashes',$arr);

	$insertedComment = new Comment($arr);

	/* Outputting the markup of the just-inserted comment: */

	echo json_encode(array('status'=>1,'html'=>$insertedComment->markup()));

}
else
{
	/* Outputting the error messages */
	echo '{"status":0,"errors":'.json_encode($arr).'}';
}

submit.php recibe los datos del formulario comentario a través de una petición AJAX.

Es lo valida y da salida a un objeto JSON, ya sea con el código XHTML del comentario insertado con éxito, o una lista de mensajes de error. jQuery utiliza la propiedad de estado para determinar si se deben mostrar los mensajes de error o agregar la marca de comentario a la página.

Se puede ver dos respuestas de ejemplo siguientes.

respuesta exitosa

{
    "status": 1,
    "html": "Html Code Of The Comment Comes Here..."
}

El html propiedad contiene el código del comentario, similar a la marcación en el paso uno.

La falta de respuesta

{
    "status": 0,
    "errors": {
        "email": "Please enter a valid Email.",
        "body": "Please enter a comment body.",
        "name": "Please enter a name."
    }
}

En caso de fallo, los bucles de jQuery a través de los errores de objeto, y da salida a los errores junto a los campos que los han motivado.

Paso 3 – CSS

Ahora que tenemos todo el marcado adecuadamente genera y se muestra en la página, podemos pasar a labrar la misma.

styles.css – Parte 1

.comment,
#addCommentContainer{

	/* Syling the comments and the comment form container */

	padding:12px;
	width:400px;
	position:relative;
	background-color:#fcfcfc;
	border:1px solid white;
	color:#888;
	margin-bottom:25px;

	/* CSS3 rounded corners and drop shadows */

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow:2px 2px 0 #c2c2c2;
	-webkit-box-shadow:2px 2px 0 #c2c2c2;
	box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

	/*
	/	The avatar is positioned absolutely,
	/	and offset outside the comment div
	/*/

	height:50px;
	left:-70px;
	position:absolute;
	width:50px;
	background:url('img/default_avatar.gif') no-repeat #fcfcfc;

	/* Centering it vertically: */

	margin-top:-25px;
	top:50%;

	-moz-box-shadow:1px 1px 0 #c2c2c2;
	-webkit-box-shadow:1px 1px 0 #c2c2c2;
	box-shadow:1px 1px 0 #c2c2c2;
}

Los divs .comment y la #addCommentContainer son de estilo a la vez, ya que comparten la mayor parte del estilo. se aplica una serie de reglas CSS3, incluyendo las esquinas redondeadas y una caja-sombra.

Huelga decir que estos no funcionan en navegadores antiguos, pero ya que son solamente a la presentación, la secuencia de comandos puede trabajar sin ellos.

styles.css – Parte 2

.comment .avatar img{
	display:block;
}

.comment .name{
	font-size:20px;
	padding-bottom:10px;
	color:#ccc;
}

.comment .date{
	font-size:10px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:#bbb;
}

.comment p,
#addCommentContainer p{
	font-size:18px;
	line-height:1.5;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs */

	display:block;
	border:1px solid #ccc;
	margin:5px 0 5px;
	padding:3px;
	font-size:12px;
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
	width:300px;
}

label{
	font-size:10px;
}

label span.error{
	color:red;
	position:relative;
	right:-10px;
}

#submit{

	/* The submit button */

	background-color:#58B9EB;
	border:1px solid #40A2D4;
	color:#FFFFFF;
	cursor:pointer;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:4px;
	margin-top:5px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

#submit:hover{
	background-color:#80cdf5;
	border-color:#52b1e2;
}

En la segunda parte de la hoja de estilo, que el estilo de los elementos de comentario y forma. Nótese laentrada [type = text] selector, que selecciona los elementos en función del tipo de atributo.

Paso 4 – jQuery

Ahora vamos a continuar con jQuery, que es el último paso de este tutorial.

Después de incluir la biblioteca a la parte inferior de la página (mejor para el rendimiento percibido de la página) podemos empezar a codificar el archivo de secuencia de comandos.

script.js

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */

	/* This flag will prevent multiple comment submits: */
	var working = false;

	/* Listening for the submit event of the form: */
	$('#addCommentForm').submit(function(e){

 		e.preventDefault();
		if(working) return false;

		working = true;
		$('#submit').val('Working..');
		$('span.error').remove();

		/* Sending the form fileds to submit.php: */
		$.post('submit.php',$(this).serialize(),function(msg){

			working = false;
			$('#submit').val('Submit');

			if(msg.status){

				/*
				/	If the insert was successful, add the comment
				/	below the last one on the page with a slideDown effect
				/*/

				$(msg.html).hide().insertBefore('#addCommentContainer').slideDown();
				$('#body').val('');
			}
			else {

				/*
				/	If there were errors, loop through the
				/	msg.errors object and display them on the page
				/*/

				$.each(msg.errors,function(k,v){
					$('label[for='+k+']').append('<span class="error">'+
						v+'</span>');
				});
			}
		},'json');

	});

});

A partir de la parte superior, tenemos el $ (document) ready () llamada, que se une una función a la carga el contenido de DOM evento.

Las variable actúa como una bandera de trabajo, que le dice al script si una petición AJAX está en curso (evitando así la doble desplazamiento).

En la función de devolución de llamada para la solicitud POST AJAX, comprobamos la propiedad de estado para determinar si el comentario se insertó con éxito.

Si lo fuera, le añadimos el margen de beneficio recibido a la página después de que el último comentario con una slideDown animación.

Si hubo problemas, se muestra el mensaje de error añadiendo un lapso de error para el elemento de etiqueta apropiada (el atributo de la etiqueta contiene el ID de la entrada que provocó el error).


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

 

Related posts