jQuery / Ajax – Formulario simple

Bienvenidos sean a este post, hoy veremos como integrar un formulario.

En los posts anteriores vimos como pasar un request de tipo GET y de tipo POST, pero hoy nos centraremos en ver como hacer un formulario basico de busqueda, pero si no pasaron por los posts anteriores necesitaran configurar un servidor web para poder usar este ejemplo, si no poseen alguno les dejo el siguiente post:

En este veremos como crear un pc virtual y un linux debian, con esto realizado les recomiendo el siguiente post:

En este veremos como instalar un servidor Apache y PHP en debian, los cuales son obligatorios, y de forma opcional pueden instalar a mariadb pero como dije no es necesario, con todo esto realizado pueden pasar a descargar el archivo con todos los archivos necesarios para trabajar en este post:

Extraigan todos los archivos en el servidor antes creado, una vez realizado esto podemos pasar a trabajar con ellos, para ello debemos tomar el archivo indice.html y modificaremos el siguiente tag:

<div class="dioses" id="exteriores">
<h3><a href="dios-ext.html">Dioses Exteriores</a></h3>
</div>

De la siguiente manera:

<div class="dioses" id="exteriores">
<h3>Dioses Exteriores</h3>
  <form action="e.php">
  <input type="text" name="nombre" value="" id="buscar" />
  <input type="submit" name="buscar" value="Buscar" id="buscar" />
  </form>
</div>

En este caso eliminamos el link anterior, seguido a esto agregmos un form donde apuntaremos a un archivo llamado e.php, proximamente lo crearemos, despues tenemos una entrada de texto llamada nombre y luego un boton para hacer el submit y buscar el contenindo que ingresamos anteriormente, por el momento solo haremos esto, nuestro siguiente paso sera modificar el archivo estilo.css y le agregaremos el siguiente segmento de codigo:

.dioses input {
  width: 100%;
  margin-bottom: 1em;
}

Es simplemente un estilo al input agregado anteriormente, este lo pueden agregar al final del archivo o junto a los otros estilos de dioses, nuestro siguiente paso sera crear el archivo e.php y le agregaremos el siguiente codigo:

e.php

<?php

$entradas = array(
	'AZATHOTH' => array(
		'nombre' => 'Azathoth',
		'resumen' => 'Azathoth, El Necio Sultán de los Demonios, El que Roe, Gime y Babea en el Centro del Vacío Final. Es el caos creativo e infinito del universo y el supremo Dios Exterior. Una maldición ha hecho que sea un dios ciego y lobotomizado, que pasa la eternidad de su encarcelamiento moviéndose incesantemente al son de una flauta.',),
	'NYARLATHOTEP' => array(
		'nombre' => 'Nyarlathotep',
		'resumen' => 'Nyarlathotep es un Dios Exterior. Se desconoce cuál es su forma original, pues adopta una apariencia u otra en función de sus propósitos aunque se especula que esta es una gran masa poliposa con una larga excreción roja.',),
	'SHUB-NIGGURATH' => array(
		'nombre' => 'Shub-Niggurath',
		'resumen' => 'Shub-Niggurath, es una deidad de la fertilidad. Shub-Niggurath, a pesar de su importancia, jamás aparece físicamente, por lo que jamás se da una descripción de ella y hay gente que erróneamente asocia a ella la descripción de Abhoth.',),
	"YOG-SOTHOTH" => array(
		'nombre' => 'Yog-Sothoth',
		'resumen' => 'Yog-Sothoth es el dios más importante de Los Mitos de Cthulhu. Encarna la omnisciencia y es la contraparte de Azathoth, pues este se corresponde con la omnipotencia. Yog-Sothoth no es más que una masa amorfa de burbujas iridiscentes en continua creación y autodestrucción.',)
);

$salida = array();
foreach($entradas as $nombre=>$entrada) {
	if(strpos($nombre, strtoupper($_REQUEST['nombre'])) !== FALSE) {
		$salida[]=build_entrada($nombre, $entrada);
	}
}

if (!empty($salida)) {
	echo implode("\n", $salida);
} else {
	echo '<div class="entrada">Perdon, ninguna coincidencia para ';
	echo '<strong>' . $_REQUEST['nombre'] . '</strong>.';
	echo '</div>';
}

function build_entrada($b, $e) {
	$html = '<div class="entrada">';
	$html .= '<h3 class="nombre">';
	$html .= $e['nombre'];
	$html .= '</h3>';
	$html .= '<div class="resumen">';
	$html .= $e['resumen'];
	$html .= '</div>';
	$html .= '</div>';

	return $html;	
}

?>

Al igual que vimos en los posts de GET y POST primero emularemos los datos cargados en el servidor, para ello crearemos un array con otros array donde contendran el nombre y el resumen del mismo, ahora analicemos este segmento de codigo:

$salida = array();
foreach($entradas as $nombre=>$entrada) {
	if(strpos($nombre, strtoupper($_REQUEST['nombre'])) !== FALSE) {
		$salida[]=build_entrada($nombre, $entrada);
	}
}

Primero definiremos una variable como array, despues por medio de foreach pasaremos por todo el contenido en entradas, el array con los datos, en el condicional buscaremos el dato que nos pasaron al llamar a este archivo, para ello utilizaremos a strpos para buscar lo informado en nuestros datos y para ello primero pasaremos la entrada en $nombre, para buscar el nombre tomaremos el dato que pasamos al llamar este archivo y mientras el resultado no sea identico a FALSE, almacenaremos en el array declarado al comienzo el resultado de la funcion build_entrada, para ello pasaremos los datos de cada entrada.

La funcion build_entrada ya la vimos anteriormente pero en un resumen muy rapido simplemente genera todo un bloque div donde ubicara la informacion que deseamos obtener, y gracias a esto podemos aplicar las clases necesarias para darle un mejor formato, pasemos a hablar de este segmento:

if (!empty($salida)) {
	echo implode("\n", $salida);
} else {
	echo '<div class="entrada">Perdon, ninguna coincidencia para ';
	echo '<strong>' . $_REQUEST['nombre'] . '</strong>.';
	echo '</div>';
}

Este condicional verifica si $salida tiene algun dato, en caso de ser verdadero ejecuta un implode para separarlo por medio del caracter de nueva linea, en caso contrario significa que no pudo encontrar el dato solicitado y por lo tanto muestra un mensaje con el dato resaltado, con esto ya tenemos la parte encargada de buscar y mostrar la informacion, solo nos falta un tema mas y para ello debemos ir al archivo codigo.js donde cambiaremos este segmento de codigo:

$(document).ready(function() {
	$('#exteriores a').click(function(ev) {
		ev.preventDefault();
		$.getScript('e.js');
	});
});

De la siguiente manera:

$(document).ready(function() {
	$('#exteriores form').submit(function(ev) {
		ev.preventDefault();
		$.get('e.php', {'nombre':$('input[name="nombre"]').val()},
			function(datos) {
				$('#diccionario').html(datos);
		});
	});
});

Aqui aplicamos el evento submit en lugar de click, y en lugar de seleccionar el link lo haremos con el nuevo formulario, en la funcion pasamos un argumento para almacenar el evento, y a esta variable le aplicamos el preventDefault para que evite actuar como tal, despues cargaremos al archivo e.php y le pasaremos el argumento con el valor de la entrada y lo siguiente sera volver a usar una funcion anonima y con el argumento recibiremos la salida devuelta por el archivo, y en este seleccionaremos a diccionario y a traves de metodo html escribiremos el contenido de datos, con todo esto comentado pasemos a ver como trabaja ahora mediante el siguiente video

En el video pueden observar como nos devuelve todas las entradas que coincidan con el criterio de busqueda, y devolviendo el consejo cuando no existe, pero esto se puede mejorar y para ello tomemos el codigo anterior y modifiquemoslo de la siguiente manera:

$(document).ready(function() {
	$('#exteriores form').submit(function(ev) {
		ev.preventDefault();
		var valores=$(this).serialize();
		$.get('e.php', valores, function(datos) {
				$('#diccionario').html(datos);
		});
	});
});

En este caso agregamos una nueva variable donde al elemento actual le aplicaremos el metodo serialize, esta funcion transforma todos los elementos DOM coincidentes en una cadena de query permitiendo enviarla a un request de Ajax, esto hace que para la siguiente linea pasemos esta variable en lugar del que usabamos antes, el resto sigue siendo el mismo, si lo prueban deberia funcionr exactamente de la misma forma que vimos en el video anterior, antes de finalizar les dejo todos los archivos necesarios para el proyecto y codigos finales en este post:

En resumen, hoy hemos visto como trabajar con un formulario simple para realizar una busquedda en los datos que podemos mostrar, aplicando Ajax mediante jQuery, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.