Modulo 3 – HTML, jquery y PHP

Rodrigo Alfaro

Web Something

ralfaro.pinto@outlook.com

Indice

• Formulario HTML• Paso de datos HTML + PHP• Paso de datos HTML + Jquery – PHP• Ejemplo pagina web dinamica.• Ejercicios.

Formulario HTML

• El formulario es un tag de HTML que permite enviar informacion a otra pagina a traves de ciertos metodos (GET y POST). Esta informacion esta contenida en los objetos tipo “input” que esten dentro del formulario.

Formulario HTML + PHP

<form method="post" action="php/accion_formulario.php"><label>Nombre:<input type="text" name="nombre" /></label><label>Apellidos:<input type="text" name="apellido" /></label><label><input type="submit" value="Enviar Datos!" /></label></form>

Proceso de datos en PHP

<?php$nombre = $_REQUEST['nombre'];$apellido = $_REQUEST['apellido'];

if(empty($nombre) or empty($apellido)){echo "Debe completar todos los campos.<br /><a

href=\"../ejemplo_modulo_3.php\">Volver al formulario</a>";}else{

echo "Las variables enviadas son Nombre = ".$nombre." Apellido = ".$apellido." <a href=\"../ejemplo_modulo_3.php\">Volver al formulario</a>";}?>

Ejemplo funcionando

Formulario HTML + Jquery + PHP

<p><h1>Ejercicio 2 - Formulario HTML - JQUERY - PHP</h1><div id="alerta"></div></p><p><label>Nombre:<input type="text" id="nombre" /></label><label>Apellidos:<input type="text" id="apellido" /></label><label><input type="submit" value="Enviar Datos!" onclick="enviadata();" /></label></p>

Proceso de datos en javascript + jqueryfunction enviadata(){$.post("php/accion_formulario2.php",{nombre: $("#nombre").val(), apellido: $("#apellido").val()},function(data){// 0 = Errorif(data == 0){$("#alerta").fadeIn();$("#alerta").html("ERROR :<br />Debe completar todos los campos del ejercicio 2.");}else{$("#alerta").fadeIn();$("#alerta").html(data);}});}function ocultar(){$("#alerta").fadeOut();$("#alerta").empty();}

Proceso de datos en PHP

$nombre = $_REQUEST['nombre'];$apellido = $_REQUEST['apellido'];

if(empty($nombre) or empty($apellido)){echo 0;

}else{echo "Las variables enviadas son Nombre = ".$nombre." Apellido

= ".$apellido." <a href=\"#\" onclick=\"ocultar();\">Cerrar Alerta</a>";}

Ejemplo funcionando

Ejemplo pagina web dinamica

• Ver documento ejemplo_modulo_3.php

Ejercicios

• Crear un formulario html que valide datos en php.• Crear un formulario html que valide datos en jquery y luego procese

informacion en php.• Crear una pagina web que cargue contenido en forma dinamica.