Cargando



Desarrollo de aplicaciones web dinámicas Con Jquery, Php Y MySQL

Os sigo mostrando el desarrollo de la aplicación del tutorial Generar Listados Dinámicos Con Jquery, Php Y Mysql, le añadimos formularios dinámicos manteniendo la combinación de php y jquery sin tener que redireccionar la pagina.


dic 01 2014 17:42
Profesional
dic 01 2014 17:48
La combinación de PHP y Jquery es una de las técnicas mas utilizadas para el desarrollo de aplicaciones Web dinámicas.

La libería JQuery provee de muchos Plugins Jquery que los desarrolladores utilizan para dotar a sus aplicaciones de mucho dinamismo para mejorar la experiencia del visitante tanto en el navegador de Internet o en un dispositivo móvil. Continuaremos desarrollando la aplicación del tutorial Generar Listados Dinámicos Con Jquery, Php Y Mysql, le añadiremos formularios dinámicos para dar de alta y modificar información, aplicando la combinación de php y jquery podremos realizar esta tarea sin redireccionar la página.

Además Añadiremos el plugin jquery.validator que nos permitirá validar los campos del formulario.

Atención
Para este tutorial necesitaremos el plugin que podemos descargar desde http://jqueryvalidation.org/, al descargarlo lo descomprimimos y tendremos todos los archivos de los cuales solo nos interesan dos por ahora que son:


jquery.validate.js que es el plugin propiamente dicho messages_es.js que es el archivo donde pondremos los mensajes para el visitante y lo podremos traducir por idiomas.

Añadimos los archivos al directorio del proyecto:

desarrollo-aplicaciones.jpg


Tenemos entonces el listado generado de vehículos, vamos a añadir un formulario para dar de alta los vehículos.

desarrollo-aplicaciones2.jpg


Continuando con el código del tutorial anterior, deberemos disponer de una capa donde se mostraran los formularios al momento de ser invocados con Jquery, para ello debajo del boton nuevo crearemos la capa formularios.

<div id=formularios"></div>


En el encabezado de la web en la pagina index.php, añadimos las librerías de jquery.validador y mensajes. Luego las utilizaremos para hacer formularios dinamicos

<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript" src="messages_es.js"></script>

Si no queremos descargar el plugin podemos hacer uso desde un servidor externo
<script type="text/javascript" src="://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

<script type="text/javascript" src="code.google.com/p/bassistance-plugins/source/browse/trunk/plugins/validate/localization/messages_es.js?r=70"></script>

Vamos a crear ahora el archivos con el formulario que nos servirá para dar de alta un vehículo y al que invocaremos desde el botón nuevo. Para ello debemos asegurarnos que el botón nuevo tenga un id (identificador) para luego poder reconocer cuando ocurra un evento en el por ejemplo un clic. Entonces el código del botón sera el siguiente:

<input type="submit" name="nuevovehiculo" id=”nuevovehiculo” value="Nuevo Vehiculo" />

El nombre del componente y el identificador puede ser el mismo, pero unico para cada componente html. En el archivo de funciones.js escribimos el siguiente código que detectara el clic del mouse en el boton nuevovehiculo e invocara el archivo altavehiculos con el formulario de alta.

// Invocar formulario de alta vehículos
$(function(){
$("#nuevovehiculo").click(function(){
		 $.get("http://localhost/proyectos/agenciaautos/altavehiculos.php",
		 function(data){
		 $("#formularios").html(data); //Tomo el resultado de pagina e inserto los datos en el div formularios
});
});
});


Luego creamos el formulario de alta que se llamara altavehiculos.php

Incorporamos en la cabecera las librerias necesrarias para poder trabajar con jquery y validar los campos

<script src="funciones.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

Creamos unos estilos para dar algo de diseño y orden al formulario. Para el ejemplo se puede utilizar en el mismo archivo o en un archivo de hoja de estilo separada y luego añadida en la cabecera.
<style>
form {
			 display:block;
width: 450px;
}			
label {
			 display:block;
width: 150px;
float:left;
}

br {
			 display:block;
			 margin-top:5px;
}
#boton {
			 display:block;
			 margin:5px auto;
			 width: 122px;
}
</style>


Luego escribimos el código para guardar los datos y el código del formulario para la captura de datos
<?
include('config.php');

//Si se envio el formulario grabo los datos en la base de datos
if (isset($_POST['enviado'])) {
foreach($_POST AS $key => $value) { $_POST[$key] = mysql_real_escape_string($value); }
$sql = "INSERT INTO `vehiculos` ( `idtipo_vehiculo` , `caracteristicas` , `idmarca` , `idmodelo`, `foto1` ) VALUES( '{$_POST['idtipo_vehiculo']}' , '{$_POST['caracteristicas']}' , '{$_POST['idmarca']}' , '{$_POST['idmodelo']}' , '{$_POST['foto1']}' ) ";
mysql_query($sql) or die(mysql_error());
echo "Alta completada.";
}
?>

// Consulto vehiculos para llenar el select de tipo de vehiculos
<? $sqltipo="SELECT * FROM tipo_vehiculo";
$consultatipo = mysql_query($sqltipo); ?>

<form name="frmalta" id="frmalta" style="margin-top:15px;" action='' method='POST'>
<fieldset>
<legend>Alta de Vehiculo</legend>
<p>
			 <label>Vehiculo</label>
			 <select name="idtipo_vehiculo" id="altavehiculo">
				 <option selected="selected">Seleccionar</option>
				 <? while($filatipo = mysql_fetch_array($consultatipo)){ ?>
				 <option value="<? echo $filatipo['id'] ?>"><? echo $filatipo['tipo'] ?></option>

				 <? } ?>
			 </select>
<br>
<label>Marca</label>
<select name="idmarca" id="altamarca">
				 <option>Seleccionar</option>
			 </select>
<br>			
<label>Modelo</label>
							 <select name="modelo" id="altamodelo">
				 <option>Seleccionar</option>
			 </select>
			 <br>
<label>Foto</label>
<input type="file" name='foto'/>

<br>
<label>Características</label><br>
<textarea name='caracteristicas' rows="4" cols="60" ></textarea>
<br>
<input type='submit' id="boton" value='Grabar' />
<input type='hidden' value='1' name='enviado' /> </p>
</fieldset>
</form>

Creo además las funciones Jquery para relacionar los select en el formulario de alta

// select relacionado Alta Vehiculo y Marcas
$(function(){
$("#altavehiculo").change(function(){
	 vehiculo=$(this).val(); // Valor seleccionado
	 $.get("http://localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo,
		 function(data){
			 $("#altamarca").html(data);			 //Tomo el resultado de pagina e inserto los datos en el combo							
		 });															
});
});		

// select relacionado Marcas y Modelos
$(function(){
$("#altamarca").change(function(){
	 marca=$(this).val(); // Valor seleccionado
	 $.get("http://localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca,
		 function(data){
			 $("#altamodelo").html(data);		 //Tomo el resultado de pagina e inserto los datos en el select
		 });			
});
});		


Una vez terminado si ejecutamos y pulsamos el botón nuevo debe aparecer el formulario de alta de la siguiente manera:

desarrollo-aplicaciones4.jpg


Como vemos el formulario se muestra sin redireccionar la pagina, si tenemos instalado en nuestro navegador algún plugin como Firebug podremos ver los llamados de Jquery en segundo plano.

desarrollo-aplicaciones5.jpg


Finalmente vamos a realizar el código de validación para el formulario utilizando un sencillo script de jquery y las reglas del plugin validator. Dentro del archivo funciones.js, creamos un script y hacemos referencia al id del formulario y le asignamos la funcion validate y el idioma español sino saldrá por defecto en inglés cuando muestre un mensaje de error.

// validacion de formulario

$(document).ready(function() {

$("#frmalta").validate({

lang: 'es' // or whatever language option you have.

});

});


Luego en el componente que queremos validar le añadimos la clase required, es decir que el elemento no puede estar vacio o sin datos.

Las clases de validaciones pueden encontrarse en el archivo de mensajes. Ejemplo de validaciones
Validar un email:
<input type="text" name="email" id="email" />

Validar un fecha:
<input id="fecha" type="text" class="required date" />

Validar un número:
<input id="numero" type="text" class="required number" />


Entonces si le añadimos a nuestro formulario al elemento textarea por ejemplo la clase required y en caso de los select debemos dejar la primera opción vacía entonces si no se selecciona nada se producirá el error y el formulario no se enviará.
<label>Características</label><br>
<textarea name='caracteristicas' rows="4" cols="60" class="required" ></textarea>

desarrollo-aplicaciones6.jpg


Ejemplo para el select modelos:
<label>Modelo</label>
							 <select name="modelo" id="altamodelo" class="required" />
				 <option value="" >Seleccionar</option>
			 </select>


Finalmente si completamos el formulario y hacemos clic en el boton Grabar el formulario se enviara sobre si mismo haciendo una llamada jquery a la misma pagina altavehiculos.php, que envía la bandera enviado con valor 1 y entonces activa la inserción en la tabla MySQL.

Un detalle que nos queda por realizar ya sea con jquery o redireccionando de la forma tradicional, es que cuando se guarde los datos se refresque el listado en la parte de arriba ya que el formulario de alta desaparece, pero no tenemos ningun evento que regargue el listado de vehiculos, por lo tanto deberemos añadir el llamado para que se muestre el listado dentro de la capa listado que anteriormente utilizamos en el otro tutorial, de esta manera podremos dar de alta información si redireccionar la pagina o bien haciendo tareas en segundo plano sin que el usuario tenga que redireccionar la pagina o para darle mas interactividad o transparencia a la aplicación web, además permite reutilizar código fuente ya que es compatible con cualquier navegador y dispositivo compatible con javascript.

¿Te ayudó este Tutorial?


3 Comentarios

nos puedes compartir el codigo fuente, gracias


Leonardo Arena
ago 22 2017 12:10
Tendremos? Un demo para bajarlo?Gracias

Adminis Trador
feb 25 2020 13:11

Saludos, he tenido problemas para llevar a cabo este tutorial, no se si le es factible dejar un link en la cual podamos bajar el codigo, hasta el momento me da muchos errores con la consulta a la base de datos. Mi email es canderob2005@gmail.compor si es posible que me envien los archivos. gracias de antemano.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X