Modulo 3 - HTML, JQUERY y PHP
Click here to load reader
-
Upload
-xzombiedev -
Category
Education
-
view
2.150 -
download
2
description
Transcript of Modulo 3 - HTML, JQUERY y PHP
![Page 2: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/2.jpg)
Indice
• Formulario HTML• Paso de datos HTML + PHP• Paso de datos HTML + Jquery – PHP• Ejemplo pagina web dinamica.• Ejercicios.
![Page 3: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/3.jpg)
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.
![Page 4: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/4.jpg)
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>
![Page 5: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/5.jpg)
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>";}?>
![Page 6: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/6.jpg)
Ejemplo funcionando
![Page 7: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/7.jpg)
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>
![Page 8: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/8.jpg)
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();}
![Page 9: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/9.jpg)
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>";}
![Page 10: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/10.jpg)
Ejemplo funcionando
![Page 11: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/11.jpg)
Ejemplo pagina web dinamica
• Ver documento ejemplo_modulo_3.php
![Page 12: Modulo 3 - HTML, JQUERY y PHP](https://reader037.fdocumento.com/reader037/viewer/2022100415/557b49d0d8b42a0d388b4e27/html5/thumbnails/12.jpg)
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.