Diferencia entre revisiones de «Plantilla:PHP/FormulariosConceptosGenerales»

De WikiEducator
Saltar a: navegación, buscar
(→‎Validando valores en el servidor)
 
(72 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
<div id=parrafo>
 
<div class="slide">
 
<div class="slide">
 
===Introducción===
 
===Introducción===
−
*Todos los lenguajes de programación tienen primitivas o incluso instrucciones propias  
+
*Tratamos de ver las instrucción que permitan aportar valores al programa.
−
*Ya vimos que un programa necesita interactuar con el usuario
+
*Todos los lenguajes de programación tienen primitivas o incluso instrucciones propias para este cometido
 +
*Un programa necesita '''''interactuar''''' con el usuario.
 +
Para ello debemos tener dos tipos de instrucciones como podemos ver en la imagen
 
#Leer valores del teclado
 
#Leer valores del teclado
 
#Mostrar resultados en pantalla
 
#Mostrar resultados en pantalla
−
[[Archivo:InteracutandoPrograma.png|300px]]
+
[[Archivo:InteracutandoPrograma.png|300px|center]]
 
</div>
 
</div>
  
 
<!--2 -->
 
<!--2 -->
 
<div class="slide">
 
<div class="slide">
−
*En el caso de PHP, hemos visto alguna primitiva para mostrar valores por pantalla (En realidad lo que hace es escribirlas al fichero html que entrega al cliente), como son '''''echo''''' y '''''print'''''
+
*En el caso de PHP, hemos visto alguna primitiva para mostrar valores por pantalla (En realidad lo que hace es escribirlas al fichero html que entrega al cliente).
−
*Ambos dos son son instrucciones del lenguaje, ver la diferencia
+
*Estas instrucciones son '''''echo''''' y '''''print'''''.
−
</div>
+
*Ambos dos son son instrucciones del lenguaje, como ya hemos visto en el tema anterior
  
−
<!--3 -->
+
===Cómo leer datos de usuario===
−
<div class="slide">
+
*Nos falta ver cómo podemos hacer que el cliente (a través del navegador) aporte valores al programa escribiéndolos por el teclado.
−
{{MRM_Actividad |Completa el siguiente programa
+
*Hay que partir de la situación en la que estamos desarrollando nuestra aplicación '''''Aplicación web'''''.
−
<source lang=php>
+
El script lo ejecuta  el servidor
−
<?php
+
(en nuestro caso el programa apache ejecutándose en un ordenador)
−
$n1=1;
+
cuando un cliente (un navegador en un equipo) solicita una página o recurso que tiene código php.
−
$n2=2;
+
*No puedo detener el programa esperando que el usuario aporte un valor. Esto no es posible en una programación web.
 +
{{Tip|Típico ejemplo que el programa me pide un nombre, y su ejecución espera a que introduzca el nombre y presione intro para continuar}}
 +
*Lo que la programación web nos va a permitir es  '''''enviar junto con la solicitud de la página, valores,(o parejas variable, valor) que aporte el usuario''''', mediante un formulario.
 +
*De alguna manera enviaremos parejas '''''variable, valor'''''.
 +
*El formulario será parte de la página del cliente, código '''''html'''''.
 +
[[image:FormularioPHP.png ‎|center]]
  
−
//Usando echo con múltiples parámetros
 
−
//Visualiza la suma, la resta, y la multiplicación
 
−
//Al ser varios parámetros usa las comas para separar uno de otro
 
−
echo "Usando echo <br/>";
 
−
 
−
//???????
 
−
//Usando print, solo puedo usar un parámetro, así que tenemos que concatenar (operador .)
 
−
//Recupera el valor que retorna print y visualizalo
 
−
echo "<br/> usuando print<br/>";
 
−
 
−
????????
 
−
?>
 
−
</source>
 
−
}}
 
−
</div>
 
−
 
−
<!--3 -->
 
−
<div class="slide">
 
−
===Cómo leer datos de usuario===
 
−
*Nos falta ver como podemos hacer que el cliente (a través del navegador) aporte valores al programa escribiéndolos por el teclado
 
−
*Para leer datos lo hacemos mediante un  formulario (hay más métodos, como leer un fichero ,bases de datos,  ...)
 
−
*El formulario será parte de la página del cliente.
 
−
[[image:formularioPHP.png]]
 
 
</div>
 
</div>
  
Línea 50: Línea 35:
 
<div class="slide">
 
<div class="slide">
 
;Leyendo del usuario
 
;Leyendo del usuario
−
*En él tendremos cajas de texto donde en el navegador el usuario podrá escribir contenido
+
*En el formulario tendremos elementos gráficos de entradas de valores  '''''(input)''''' donde, en el navegador, el usuario podrá escribir contenido(text, ...), o de alguna forma aportarlo (radio, select, ...)
 
*En los diferentes elementos de entrada de un formulario , como una texto, el usuario podrá escribir valores.
 
*En los diferentes elementos de entrada de un formulario , como una texto, el usuario podrá escribir valores.
−
*Al darle el botón enviar dichos valores irán al servidor, en seguida veremos como leerlo en el servidor
+
*Al darle el botón enviar (u otro elemento submit) '''''(submit del formulario)''',  dichos valores irán al servidor para ser leídos y usados en un script;
−
*Repasemos como crear formularios en el cliente y  lo que más nos interesa, como leerlos en el servidor
+
*Porteriormetne  veremos cómo leerlos en el servidor.
 +
*Repasemos cómo crear formularios en el cliente y  lo que más nos interesa, cómo leerlos en el servidor.
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
===Creando un formulario===
 
===Creando un formulario===
−
*Esta parte la veis el módulo de diseño de interfaces , no obstante comentaremos lo que aquí vamos a utilizar
+
*Esta parte la veis en el módulo de diseño de interfaces , no obstante comentaremos lo que aquí vamos a utilizar.
−
*Un formulario se establece con la etiqueta '''''form'''''
+
*Un formulario se establece con la etiqueta '''''form'''''.
 
;Etiqueta form
 
;Etiqueta form
  
−
{{MRM_Definicion|
+
{{MRM_Definicion|Title=Formularios vistos desde el servidor|
−
Para la programación servidor, entendemos por formulario una sección del código html que va a poder contener, además de otros elementos  varios objetos gráficos con los que el usuario va a poder interactuar e insertar valores para que éstos lleguen al servidor}}
+
Para la programación servidor, entendemos por formulario:
 +
Una sección del código html que va a poder contener,( además de otros elementos)
 +
  varios objetos gráficos con los que el usuario va a poder interactuar
 +
insertando valores para que éstos lleguen al servidor}}
 
</div>
 
</div>
  
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 +
 
===Atributos de la etiqueta===
 
===Atributos de la etiqueta===
−
*Etiqueta form con una serie de atributos, de los que nos interesan dos principalmente
+
*Etiqueta '''''form''''' con una serie de atributos, de los que '''ahora''' nos interesan dos principalmente:
−
#action especifica el fichero que se invocará al servidor. Este fichero contendrá el código php que queremos que se ejecute
+
#'''''action''''': especifica el fichero que se invocará al servidor. Este fichero contendrá el código php que queremos que se ejecute.
−
#method especifica el modo en el que se van a pasar los parámetros (valores introducidos a los diferentes objetos del formulario, o que tengan asignados por defecto).
+
#'''''method''''': especifica el modo en el que se van a pasar los parámetros (valores introducidos a los diferentes objetos del formulario, o que tengan asignados por defecto).
−
====GET o POST====
+
 
−
<source lang=html4strict>
+
====El action====
−
   <form action="mifichero.php" method="POST"
+
<br />
 +
{{MRM_Definicion|Title=Valor de action|
 +
Establece el nombre del recurso, script o página
 +
que se va a solictar al servidor
 +
cuando realicemos un click en el submit del formulario
 +
}}
 +
;Ejemplo
 +
 
 +
{{MRM_Actividad|Title=Haciendo un pin-pon|
 +
Haz un proyecto que contenga dos páginas '''''ping.php''''' y '''''pon.php'''''
 +
*Ambas tendrán un botón de tipo submit
 +
<source lang=html5>
 +
<input type=submit value='Ir a ...'>
 +
</source>
 +
*La página pin me llevaré a pon py la página '''''pon''''' me ha de llevar a '''''pin'''''
 +
{{plegable|hide|posible solución|
 +
<source lang=html5>
 +
<!--PIN.PHP-->
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
<form action="pon.php">
 +
    <input type="submit" value="Ir a pon">
 +
 
 +
</form>
 +
 
 +
</body>
 +
</html>
 +
<!-- PON.php -->
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
<form action="pin.php">
 +
    <input type="submit" value="Ir a pin">
 +
 
 +
</form>
 +
 
 +
</body>
 +
</html>
 +
</source>
 +
 
 +
}}
 +
}}
 +
 
 +
 
 +
====El method:  GET o POST====
 +
 
 +
<br />
 +
{{MRM_Definicion|Title=Valor de method|
 +
Establece la manera en la que van a enviar los datos al servidor
 +
Se enviarán todas las parejas variable-valor que haya en el formulario
 +
Estos datos se pueden enviar:
 +
  en la cabecera (método GET)
 +
  en el cuerpo del mensaje (método POST)
 +
}}
 +
 
 +
<source lang=html4strict style="width:50%">
 +
   <form action="datos.php" method="POST"
 +
    ......
 +
  </form>
 +
</source>
 +
<source lang=html4strict style="width:50%">
 +
  <form action="datos.php" method="GET"
 
     ......
 
     ......
 
   </form>
 
   </form>
 
</source>
 
</source>
 
</div>
 
</div>
−
*Por defecto los valores son pasados por GET
+
 
−
*Este método es fácil de ver pues se viauliza en el URL, apareciendo como parte de él separado por el signo interrogación con parejas Variable valor
+
*Este parámetro es opcional, si no se  especifica por defecto toma el valor  '''GET'''
 +
 
 +
*Cuando el método es '''GET''' las parejas se viaulizan en el URL, apareciendo como parte de él, separado por el signo interrogación con parejas '''variable=valor''', y separadas entre ellas, si hubiera varias, con el &
 +
 
 
{{MRM_Ejemplo|
 
{{MRM_Ejemplo|
 
; Método GET
 
; Método GET
−
*HTML en el cliente
+
*HTML en el cliente:
−
<source lang=html4strict>
+
*Vemos dos ''input'' de type text y con dos atributos asignados: '''''name''''' y '''''value''''':
−
<form action="mifichero.php" method="GET">
+
*1.- '''''name''''' es el que vamos a utilizar para recuperar el contenido del '''input''' en el servidor.
 +
{{Tip|El '''name''' es al servidor lo mismo que el '''id''' es al cliente, con id podéis acceder a los valores de los elementos con javascript, con el ''name'' lo haremos en php}}
 +
 
 +
*2.-  '''''value''''' es el valor. Este valor se sustituye por el contenido del '''input''' del formulario.
 +
<source lang=html5>
 +
<form action="datos.php" method="GET">
 
       Nombre
 
       Nombre
 
           <input type=text name = 'nombre' value='maría'>
 
           <input type=text name = 'nombre' value='maría'>
Línea 93: Línea 166:
 
   </form>
 
   </form>
 
</source>
 
</source>
−
;Al fisualizar en el navegador la páginas se verá
+
;Al visualizar en el navegador aparecerá la páginas siguiente
 +
Dos cajas de texto y el botón submit
 
[[Imagen:submitGET1.png]]
 
[[Imagen:submitGET1.png]]
−
 
+
;Al presionar '''submit''' si observamos el url va el signo '''''<nowiki>?</nowiki>''''' y luego las parejas '''''variable<nowiki>=</nowiki>valor''''' separadas entre ellas por '''''<nowiki>&</nowiki>'''''.
−
;Al presionar submit si observamos el url  
+
*Observamos como aparece el texto después de la url:
−
[[Imagen:submitGET2.png]]
+
<br />
 +
[[Imagen:form_maria_ruiz.png]]
 
}}
 
}}
 +
 +
  
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 
;Atributos  
 
;Atributos  
−
*En este caso estamos indicando que cuando se envíe el formulario, se intentará ejecutar un fichero llamado '''''mifichero.php'''''. La ubiación del fichero como no se especifica se supone en el mismo sitio donde estaba el fichero que actualmente está viendo el cliente.
+
*En este caso estamos indicando que cuando se envíe el formulario, se solicita al servidor un fichero (página, recurso o script)  llamado '''''datos.php'''''.
−
*También se especifica que los valores enviados con el formulario irán en el cuerpo de documento usando el protocolo http, y no en el URI con el signo ? cono ocurre si se especificara GET
+
*La ubicación del fichero, en este caso, como no se especifica, se busca en la misma ubicación donde está el fichero que actualmente está viendo el cliente.
 +
*No obstante se puede especificar una ruta absoluta en lugar de relativa
 +
<source lang=html5>
 +
<form action="http://localhost/pruebas/datos.php" method="GET">
 +
....
 +
</source>
 +
{{Tip| Tienes claro la diferencia entre ruta relativa y ruta absoluta?}}
 +
*También se especifica que los valores enviados con el formulario; irán en el cuerpo de documento usando el protocolo http, y no en el URI con el signo ? como sucede si se especificara GET.
 
</div>
 
</div>
−
 
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 
{{MRM_Puntos clave|
 
{{MRM_Puntos clave|
−
Tan inseguro es usar GET como POST. si queremos garantizar seguridad debemos usar https y no http}}
+
 
−
*Por supuesto hay más atributos, el id es importante para poder acceder a ese elemento con javascript; estos son los que nosotros debemos conocer para usar
+
Tan inseguro es usar '''''GET''''' como '''''POST'''''. si queremos garantizar seguridad debemos usar '''''https''''' en lugar de '''''http'''''
−
*También es interesante el atributo enctype que permite usar algún tipo de cifrado para enmascarar la información que se envía, pero insisto en  
+
;En el caso de GET
−
usar https si se quiere confidencialidad con un nivel aceptable de seguridad.
+
<source lang=html5>
 +
<form action="http://localhost/pruebas/datos.php" method="GET">
 +
....
 +
</source>
 +
 
 +
[[image:form_maria_ruiz.png]]
 +
<br />
 +
;En el caso de post
 +
<source lang=html5>
 +
<form action="http://localhost/pruebas/datos.php" method="POST">
 +
....
 +
</source>
 +
 
 +
Si vamos a las herramientas de diseño en el navegador, en la solapa de red o network, podemos ver:
 +
[[image:form_maria_ruiz_post.png]]
 +
 
 +
}}
 +
*Por supuesto hay más atributos, el id es importante para poder acceder a ese elemento con javascript.
 +
*Tanto '''''method''''' como '''''action''''' son necesarios para la programación web.
 +
*Hay mas atributos, es importante el atributo''''' enctype''''' que permite usar algún tipo de cifrado para enmascarar la información que se envía, y poder especificar también si en el formulario se van a enviar grandes cantidades de bytes, como imágenes u otro tipo de  ficheros.
 +
{{Tip| Usar https si se quiere confidencialidad con un nivel aceptable de seguridad.}}
 +
*Este atributo es importante cuando en lugar de input de tipo texto '''''<input type=text>''''' enviemos ficheros '''''<input type=file>''''' u otros contenidos diferentes.
 
</div>
 
</div>
  
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 +
 
====Elementos dentro del formulario====
 
====Elementos dentro del formulario====
−
*Dentro del formulario debemos poder recoger información que el cliente nos facilite
+
*Dentro del formulario debemos poder recoger información que el cliente nos facilite.
−
*Al menos deberíamos de conocer dos elementos '''''input''''' y '''''button''''' o bien '''''submit'''''
+
*Al menos deberíamos de conocer dos elementos '''''input''''' y '''''button''''' o bien '''''submit'''''.
−
*El input representa una caja de texto
+
*El input representa una caja de texto.
 
*El submit es un botón que tiene automatizada la acción de enviar el formulario al hacer click sobre él.
 
*El submit es un botón que tiene automatizada la acción de enviar el formulario al hacer click sobre él.
 
</div>
 
</div>
Línea 127: Línea 232:
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
−
:Creando formularios
+
 
−
Es interesante ojear esta sencilla página que te informa de como hacer formularios  
+
===Creando formularios===
−
  http://www.aulaclic.es/html/t_8_1.htm
+
Es interesante ojear esta página que te informa de cómo hacer formularios usando html5.
−
*Elemento input, en él especificaremos los siguientes atributos
+
  https://developer.mozilla.org/es/docs/Learn/Forms
 +
;Elemento '''''input'''''
 +
*Como ya hemos comentado, es un elemento de entrada de texto que se rellena en la página web que tiene el cliente, y se envía al servidor donde se puede recuperar esta información para el script  a ejecutar (se recuperará durante la ejecución).
 +
;Atributos importantes de un <input type=text>
 
;type
 
;type
−
:indicaremos el tipo de elemento de entrada (text, password, email, checkbox...)
+
:Indicaremos el tipo de elemento de entrada (text, password, email, checkbox...).
 
:Aquí podemos ver una lista de posibles valores, tened en cuenta que con html5 se introdujeron 13 nuevos tipos.
 
:Aquí podemos ver una lista de posibles valores, tened en cuenta que con html5 se introdujeron 13 nuevos tipos.
 
   http://www.w3schools.com/tags/att_input_type.asp
 
   http://www.w3schools.com/tags/att_input_type.asp
Línea 140: Línea 248:
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
−
;Atributos
+
;atributo type=hidden.
−
:También es interesante el tipo hidden (especialmente usado para pasar valores del cliente al servidor de forma transparente para el usuario.
+
:También es interesante el valor '''''hidden''''' para el '''type''' de un '''''input'''''(especialmente usado para pasar valores del cliente al servidor de forma transparente para el usuario).
 
;name
 
;name
−
:indicaremos el nombre asociado a este input.
+
:El valor de este atributo especifica el nombre asociado a este '''input'''.
−
:Con este identificador podremos en el servidor recuperar la información.
+
:Es este valor el que necesitamos para recuperar la información del '''''input''''' en el servidor.
 
</div>
 
</div>
  
Línea 150: Línea 258:
 
<div class="slide">
 
<div class="slide">
 
;value
 
;value
−
:Es el valor que tiene el input. Si queremos que por defecto tenga un valor
+
:Es el valor que tiene el '''''input'''''. Si queremos que por defecto tenga un valor.
−
*Dentro del form necesitaremos al menos un input y un submit
+
*Este valor es sustituido por el contenido del '''input''' cuando se envía al servidor.
−
*EJ. en el emisor tenemos
+
*Dentro del '''''form''''' necesitaremos al menos un '''input''' y un '''submit'''.
 +
*Veamos el siguiente ejemplo. En el cliente tenemos el siguiente formulario
  
 
<source lang=html4strict>
 
<source lang=html4strict>
Línea 176: Línea 285:
 
*Y obtenemos la siguiente imagen
 
*Y obtenemos la siguiente imagen
 
[[imagen:formulario.png]]
 
[[imagen:formulario.png]]
−
#Al presionar el botón de enviar se envía la página al servidor
+
#Al presionar el botón de enviar se envía la página al servidor.
−
#La página que especificamos en el botón ''action'' la gestiona ''tabla.php'' en este caso
+
#La página o script la especificamos en el atributo '''''action''''' del elemento '''''form'''''; la gestiona ''tabla.php'' en este caso.
−
#En el servidor para recuperar el valor utilizaremos la variable ''supergobal''
+
#En el servidor para recuperar el valor utilizaremos la variable '''supergobal'''(Lo veremos más adelante).
−
#una tabla es una estructura indexada por índices
+
#Esta superglobal puede ser '''''$_GET''''' '''''$_POST'''' o '''''$_REQUEST'''''.
−
#leeremos el índice nombre de variable de la tabla
+
#Una tabla es una estructura indexada por índices.
−
#$_GET o $_POST dependiendo de el método de envío
+
#Leeremos el índice nombre de variable de esta estructura superglobal.
 +
#$_GET o $_POST dependiendo de el método de envío, o $_REQUEST sirve para ambas (no recomendado).
 
<source lang=php>
 
<source lang=php>
 
  Valor numérico introducido: <?php echo $_GET['numero'] ?>
 
  Valor numérico introducido: <?php echo $_GET['numero'] ?>
Línea 191: Línea 301:
  
 
===Obtener datos de un formulario===
 
===Obtener datos de un formulario===
−
*Una vez que estamos en el servidor, los datos son pasados del cliente al servidor usando las variables superglobales o matrices $_POST $_GET, $REQUEST
+
*Una vez que estamos en el servidor, los datos son pasados del cliente al servidor usando las variables superglobales o matrices '''$_POST''' '''$_GET''', '''$_REQUEST'''.
 
*Dependerá del modo en el que pasemos los datos del formularios desde el cliente  
 
*Dependerá del modo en el que pasemos los datos del formularios desde el cliente  
 
  atributo '''''method''''' del '''form'''
 
  atributo '''''method''''' del '''form'''
−
*Para leer el datos indexaremos la matriz por el valor del atributo '''''name''''' de '''''input''''' correspondiente
+
*Para leer el datos indexaremos la matriz por el valor del atributo '''''name''''' de '''''input''''' correspondiente.
 
*Por ejemplo en el cliente tenemos
 
*Por ejemplo en el cliente tenemos
 
</div>
 
</div>
Línea 217: Línea 327:
 
</source>
 
</source>
 
</div>
 
</div>
−
 
+
{{Tip| No se recomienda por temas de seguridad leer de la superglobal $_REQUEST}}
 +
{{Nota|
 +
Nota:
 +
Las variables en $_REQUEST se proporcionan al script a través de los mecanismos
 +
de entrada GET, POST, y COOKIE y por lo tanto pueden ser manipulados por el usuario
 +
remoto y no debe confiar en el contenido...}}
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
  
−
;Verficando si una variable existe (aunque tenga valor null).
+
;Verificando si una variable existe
−
*Es especialmente importante en muchas ocasiones ver si una variable tiene o no valor
+
*Este tema es muy interesante en php.
−
*No sabemos si el usuario a insertado o no valor en el campo de texto
+
*Observar que el hecho de que aparezca una variable no implica que la variable exista.
−
*Para ello usaremos la función ya conocida '''''isset($variable)''''', donde $variable es la variable que queremos ver si tiene valor
+
*Esto en php puede crear una confusión por su naturaleza dinámica.
 +
*Si en el código aparece esta línea
 +
<source lang=php>
 +
$edad;
 
</source>
 
</source>
 +
{{MRM_Pregunta|
 +
'''''¿A partir de esa línea la variable existe?'''''
 +
*La respuesta es que existe pero tiene un valor null
 +
'''''¿A partir de esa línea la variable ha sido declarada?'''''
 +
*En realidad la respuesta es si, como null
 +
'''''¿Tiene algún valor?'''''
 +
*La respuesta es que tiene el valor null
 +
}}
 +
<br />
 +
*Esto puede crear confusiones que debemos aclarar. '''''null''''', cuando una variable tiene valor null vamos a considerar que no tiene valor, o que no ha sido delcarada.
 +
*Para comprobar probamos el siguiente código
 +
<source lang=php>
 +
<?php
 +
$variable; //Declaramos una variable de tipo null
 +
 +
if (isset($variable))
 +
    echo "OK isset -$variable- <br />";
 +
else
 +
    echo "NO OK isset -$variable- <br />";
 +
 +
if (empty($variable))
 +
    echo "OK empty La variable -$variable- <br />";
 +
else
 +
    echo "NO OK empty La variable -$variable- <br />";
 +
 +
if (is_null($variable))
 +
    echo "OK is_null  La variable -$variable- <br />";
 +
else
 +
    echo "NO OK is_null  La variable -$variable- <br />";
 +
?>
 +
</source>
 +
 +
*Probemos a modificar el valor de  $variable por los siguientes valores
 +
<source lang=php>
 +
$varialbe = null;
 +
</source>
 +
<source lang=php>
 +
$varialbe ="";
 +
</source>
 +
<source lang=php>
 +
$varialbe =0;
 +
</source>
 +
<source lang=php>
 +
$varialbe = true;
 +
</source>
 +
<source lang=php>
 +
$varialbe = false;
 +
</source>
 +
*A partir de ello podemos concluir y entender lo que hacen las funciones
 +
 +
<source lang =php>
 +
//isset — Determina si una variable está definida y no es NULL
 +
isset($var):bool
 +
//is_null — Comprueba si una variable es NULL
 +
is_null($var):boll
 +
empty()
 +
 +
</source>
 +
 +
*hay que tener cuidado con el concepto de una variable vacía
 +
*En php los siguientes valores asignados a una variable se considerarán valores vacíos
 +
*"" //Una cadena vacía
 +
*0  //El valor 0 como entero o como float
 +
*0.0
 +
*"0"//La cadena de caracteres formada por el carácter 0
 +
*NULL //El valor null
 +
*FALSE //El valor booleano false
 +
{{MRM_Actividad|Title=Probando el valor leído de un formulario|
 +
*Realiza una aplicación que leas el valor introducido en una caja de texto
 +
*Has de informar si no ha insertado ningún valor que lo inserte
 +
*Si lo ha insertado lo visualizarás
 +
{{Plegable|hide|Posible solución|
 +
<source lang=php>
 +
<?php
 +
if (isset($_POST['enviar'])) {
 +
    $valor = $_POST['valor'];
 +
    if ((empty($valor)) && ($valor != "0"))
 +
        $msj = "Debes de aportar un valor válido<br />";
 +
    else
 +
        $msj = "Has insertado el valor -$valor-<br />";
 +
}
 +
 +
//Otra manera más sencillo de escribir lo mismo
 +
/*
 +
if (isset($_POST['enviar'])) {
 +
    $valor = $_POST['valor'];
 +
    if ($valor=="")
 +
        $msj .= "Debes de aportar un valor válido<br />";
 +
    else
 +
        $msj .= "Has insertado el valor -$valor-<br />";
 +
}
 +
*/
 +
 +
 +
?>
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
<?php echo $msj ?>
 +
<fieldset>
 +
    <form action="form1.php" method="POST">
 +
        <legend>Inserta Datos</legend>
 +
        <input type="text" name="valor" id="">
 +
        <input type="submit" name="enviar" value="Enviar">
 +
    </form>
 +
</fieldset>
 +
</body>
 +
</html>
 +
 +
</source>
 +
}}
 +
}}
 +
 +
*Podemos revisar el siguiente código como corlario
 +
<source lang=php>
 +
 +
<?php
 +
echo "<h3>Probamos la función is_null</h3>";
 +
echo "<hr />";
 +
 +
$a;
 +
echo is_null($a)? "SI. <b>\$a </b>, es nulo <br>\n": "NO <b>\$a</b> no es nulo<br>\n"; //SI
 +
$a=null;
 +
echo is_null($a)? "SI. <b>\$a=null</b>, \$a es nulo <br>\n": "NO <b>\$a=null \$a</b> no es nulo<br>\n";//SI
 +
$a=5;
 +
echo is_null($a)? "SI. <b>\$a=5</b>, \$a es nulo <br>\n": "NO <b>\$a=5</b> \$a no es nulo<br>\n";//NO
 +
$a="";
 +
echo is_null($a)? "SI. <b>\$a=\"\"</b>, \$a es nulo <br>\n": "NO <b>\$a=\"\"</b> \$a no es nulo<br>\n";//NO
 +
$a=false;
 +
echo is_null($a)? "SI. <b>\$a=false</b>, \$a es nulo <br>\n": "NO <b>\$a=false</b> \$a no es nulo<br>\n";//NO
 +
$a=0;
 +
echo is_null($a)? "SI. <b>\$a=0</b>,  \$a es nulo <br>\n": "NO <b>\$a=0</b> \$a no es nulo<br>\n";//NO
 +
unset($a); //Eliminamos la variable
 +
 +
echo "<h3>Probamos la función isset</h3>";
 +
echo "<hr />";
 +
 +
$a;
 +
echo isset($a)? "SI <b>\$a</b> está definido <br>\n": "NO <b>\$a</b> no está definido<br>\n"; //NO
 +
$a=null;
 +
echo isset($a)? "SI <b>\$a=null</b> \$a está definido<br>\n": "NO <b>\$a=null</b> \$a no está definido<br>\n";//NO
 +
$a=5;
 +
echo isset($a)? "SI <b>\$a=5</b> \$a está definido<br>\n": "NO <b>\$a=5</b> \$a no está definido<br>\n";//SI
 +
$a="";
 +
echo isset($a)? "SI <b>\$a=\"\"</b> \$a está definido<br>\n": "NO <b>\$a=\"\"</b> \$a no está definido<br>\n";//SI
 +
$a=false;
 +
echo isset($a)? "SI <b>\$a=false</b> \$a está definido<br>\n": "NO <b>\$a=false</b> \$a no está definido<br>\n";//SI
 +
$a=0;
 +
echo isset($a)? "SI <b>\$a=0</b>  \$a está definido <br>\n": "NO <b>\$a=0</b> \$a no está definido<br>\n";//SI
 +
unset($a); //Eliminamos la variable
 +
 +
 +
echo "<h3>Probamos la función empty</h3>";
 +
echo "<hr />";
 +
$a;
 +
echo empty($a)? "SI <b>\$a</b> está vacío <br>\n": "NO \$a</b> no es nulo<br>\n"; //SI
 +
$a=null;
 +
echo empty($a)? "SI <b>\$a=null</b> \$a está vacío<br>\n": "NO <b>  \$a=null</b> \$a no está vacío<br>\n";//SI
 +
$a=5;
 +
echo empty($a)? "SI <b>\$a=5</b> \$a está vacío<br>\n": "NO <b>\$a=5</b> \$a no está vacío<br>\n";//NO
 +
$a="";
 +
echo empty($a)? "SI <b>\$a=\"\"</b> \$a está vacío<br>\n": "NO <b>\$a=\"\"</b> \$a no está vacío<br>\n";//SI
 +
$a=false;
 +
echo empty($a)? "SI <b>\$a=false</b> \$a está vacío<br>\n": "NO <b>\$a=false</b> \$a no está vacío<br>\n";//SI
 +
$a=0;
 +
echo empty($a)? "SI <b>\$a=0</b>  \$a está vacío<br>\n": "NO <b>\$a=0</b> \$a no está vacío<br>\n";//SI
 +
</source>
 +
*Podemos observar la siguiente salida
 +
[[Archivo:salida_valores_nulos_php.png]]<br />
 +
 +
{{MRM_Puntos clave|Title= isset($variable) emtpy($variable) is_null($variable)|
 +
<source lang=php>
 +
isset($variable)
 +
Esta función devuelve true si $variable existe y no tiene valor null
 +
</source>
 +
<hr />
 +
<source lang=php>
 +
is_null($variable)
 +
Esta función devuelve true si $variable tiene valor null o no existe
 +
</source>
 +
<hr />
 +
{{Tip| '''''isset''''' y '''''is_null''''' son complementarias. }}
 +
 +
<source lang=php>
 +
empty($variable)
 +
Esta función devuelve true si $variable tiene un valor vacío
 +
</source>
 +
{{Tip| '''''Cuidado con los valores siguientes'''''.
 +
# El ''string'' '''""''',
 +
# El ''entero'' '''0'''
 +
# El ''booleano'' '''false'''
 +
'''se consideran valores vacíos en esta función'''.}}
 +
}}
 
</div>
 
</div>
  
Línea 231: Línea 548:
 
<div class="slide">
 
<div class="slide">
  
−
*A continuación vamos a realizar una serie de prácticas con formularios
+
===Validando valores en el servidor===
 +
*Indistintamente de que se validen valores en el cliente, es muy importante validarlos en el servidor
 +
*En php tenemos funciones para validar el tipo de un valor
 +
*Para ello podemos ir al repertorio dónde tenemos todas las funciones para manipular variables
 +
http://php.net/manual/es/ref.var.php
 +
*Cuando leemos un valor de un formulario, siempre lo vamos a leer como una cadena de caracteres, pero podremos verificar algunos valores por conversión implícita
 +
{{MRM_Ejemplo|Title=Algunas conversiones|
 +
* "754" y miramos a ver si es un número, nos va a decir que sí
 +
*"false" o "true" si miramos a ver si es booleano, nos va a decir que no
 +
* "754" y miramos a ver si es un string, nos va a decir que sí
 +
}}
 +
{{MRM_Actividad|Title=Validando valores|
 +
;Haz un programa que podamos ver si un número es entero, float o string
 +
}}
 +
 
 
{{MRM_Actividad|
 
{{MRM_Actividad|
 
Haz un formulario en el que insertemos un número y el servidor web nos visualice la tabla de multiplicar
 
Haz un formulario en el que insertemos un número y el servidor web nos visualice la tabla de multiplicar
 
*Comprobaremos previamente que la variable exista y tenga un valor numérico
 
*Comprobaremos previamente que la variable exista y tenga un valor numérico
−
#'''''isset($variable)''''' , Para ver que exista la variable
+
#'''''isset($variable)''''' , Para ver que exista la variable y no tiene un valor nul
−
#'''''is_null($variable)''''' me dice si la variable es nula ojo puede tener el valor null y no ser nula
+
#'''''is_null($variable)''''' Puedes usarla en lugar de la anterior,  recuerda que son complementarias
 +
<source lang=php>
 +
isset($variable) es igual a !is_null($variable)
 +
is_null($variable) es igual a !isset($variable)
 +
 +
</source>
 
#'''''is_numeric($variable)''''' me dice si el valor de la variable es numércio}}
 
#'''''is_numeric($variable)''''' me dice si el valor de la variable es numércio}}
 
<source lang=php>
 
<source lang=php>
Línea 261: Línea 597:
 
*Dirección de correo electrónico.
 
*Dirección de correo electrónico.
 
*Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO (select)
 
*Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO (select)
−
}}
+
<!--
−
</div>
+
{{Plegable|hide|Posible solución index.php|
−
{{MRM_Actividad|Title=Juego de adivinar números|
+
-->
−
*Haz un programa que tu piensas un número de 0 al 1024 y el programa te lo adivina
+
 
−
*El programa te preguntará si es mayor menor o acertado
+
−
*Deberá de adivinarlo en un máximo de 10 intentos}}
+
 
<source lang=php>
 
<source lang=php>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
Línea 276: Línea 610:
 
     </head>
 
     </head>
 
     <body>
 
     <body>
−
         <h1>Juego de adivinar un  número </h1>
+
         <fieldset style="width:60%">
−
        <h3>Tú piensas un número de 1 al 1024 y yo lo adivino en 10 intentos .... (o menos)</h3>
+
            <legend>Datos personales</legend>
−
        <hr />
+
            <form action="datos.php" method="POST">
−
        <?php if (!isset($_POST[empezar])): ?>
+
                <label for="">Nombre</label>
−
            <form action ="." method="POST">
+
                <input type="text" name="nombre" id="">
−
                 <b>Haz click para empezar</b>
+
                <label for="">Apellido</label>
−
                 <input type=submit name ="empezar" value="empezar" />
+
                <input type="text" name="apellido" id="">
 +
                <br />
 +
                <label for="">Direccion</label>
 +
                <input type="text" name="direccion" id="">
 +
                <br>
 +
                <label for="">
 +
                    Fecha Nacimiento
 +
                </label><input type="date" name="fNac" id="">
 +
                <br>
 +
                <label for="">Edad</label>
 +
                <input type="text" name="edad" id="">
 +
                <br />
 +
 
 +
                <b>Idiomas</b><br />
 +
                <input type="checkbox" name="idiomas[]" value="castellano" id="">
 +
                <label for="">Castellano</label>
 +
                <br>
 +
 
 +
                <input type="checkbox" name="idiomas[]" value="rumano" id="">
 +
                <label for="">Rumano</label>
 +
                <br>
 +
 
 +
 
 +
                <input type="checkbox" name="idiomas[]" value="inglés" id="">
 +
                <label for="">Inglés</label>
 +
                <br>
 +
                <input type="checkbox" name="idiomas[]" value="francés" id="">
 +
                <label for="">Francés</label>
 +
                <br>
 +
                 <b>Género</b><br />
 +
                 <input type="radio" name="genero" value="masculino" id="">Masculino<br />
 +
                <input type="radio" name="genero" value="femenino" id="">Femenino<br />
 +
                <input type="radio" name="genero" value="no_aporta" id="">No quiero aportar<br />
 +
 
 +
                <label for="">Dirección de correo</label>
 +
                <input type="email" name="email" id=""><br /><br />
 +
                Estudios
 +
                <select name="estudios">
 +
 
 +
 
 +
                    <option value="eso">ESO</option><br />
 +
                    <option value="bach" >BACH</option><br />
 +
                    <option value="cicloFormativo">Ciclo Formativo</option><br />
 +
                    <option value="gradoUniversitario">Grado Universitario</option><br />
 +
                </select>
 +
                <hr />
 +
                <input type="submit" value="Enviar">
 +
 
 
             </form>
 
             </form>
 +
        </fieldset>
  
−
            <?php
+
    </body>
−
        else:
+
</html>
−
            echo "<form action ='.' method='POST'>";
+
</source>
−
            $intento = $_POST['intento'];
+
−
            $intento++;
+
−
            $min = is_null($_POST['min']) ? 0 : $_POST['min'];
+
−
            $max = is_null($_POST['max']) ? 1024 : $_POST['max'];
+
−
            $estado = $_POST['valor'];
+
−
            $num = $min+ round(($max - $min ) / 2);
+
−
            switch ($estado) {
+
−
                case 'mayor':
+
−
                    $min = $num + 1;
+
−
                    break;
+
−
                case 'menor':
+
−
                    $max = $num - 1;
+
−
                    break;
+
−
                case 'acertado':
+
−
                    break;
+
−
            }
+
−
            $num = $min+round(($max - $min ) / 2);
+
−
            echo "Intento número  $intento,  El número es $num <br />";
+
−
            echo "<input type='hidden' name='intento' value =$intento />";
+
−
            echo "<input type='hidden' name='min' value =$min  />";
+
−
            echo "<input type='hidden' name='max' value =$max />";
+
−
            ?>
+
−
            <input type="radio" name="valor" value = mayor>Mayor <br />
+
−
            <input type="radio" name="valor" value = menor>Menor <br />
+
−
            <input type="radio" name="valor" value = igual>Acertaste <br />
+
−
            <br />
+
−
            <input type=submit name ="empezar" value="Evaluar" />
+
  
−
        </form>
+
}}
−
    <?php endif ?>
+
*Observa las diferentes forma de poder leer valores filtrando y evitando o no ataques XSS
 +
{{Plegable|hide|Posible solución: datos.php|
 +
<source lang=php>
 +
<?php
  
 +
//Primero leemos las variables
 +
$n3 = filter_input(INPUT_POST, 'nombre');
 +
$n1 = htmlspecialchars($_POST['nombre']);
 +
$n2 = strip_tags($_POST['nombre'], "<b>");
  
−
</body>
+
 
 +
$n4 = $_POST['nombre'];
 +
 
 +
 
 +
$idiomas1 = $_POST['idiomas'];
 +
var_dump($idiomas1);
 +
 
 +
 
 +
$nombre = filter_input(INPUT_POST, 'nombre', FILTER_SANITIZE_STRING);
 +
 
 +
$apellidos = filter_input(INPUT_POST, 'apellido', FILTER_SANITIZE_STRING);
 +
$edad = filter_input(INPUT_POST, 'edad', FILTER_VALIDATE_INT);
 +
$direccion = filter_input(INPUT_POST, 'direccion', FILTER_SANITIZE_STRING);
 +
$fNac = filter_input(INPUT_POST, 'fNac', FILTER_SANITIZE_STRING);
 +
$idiomas = filter_input(INPUT_POST, 'idiomas', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
 +
$genero = filter_input(INPUT_POST, 'genero');
 +
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
 +
$estudios = filter_input(INPUT_POST, 'estudios');
 +
 
 +
//
 +
$mis_idiomas = print_r($idiomas, true);
 +
 
 +
 
 +
//Mostramos los valores como una ficha
 +
?>
 +
<!doctype html>
 +
<html lang="en">
 +
    <head>
 +
        <meta charset="UTF-8">
 +
        <title>Document</title>
 +
    </head>
 +
    <body>
 +
        <h1>Datos personales de ficha</h1>
 +
        <hr />
 +
        <fieldset style="width:60%; background: azure">
 +
            <h3>Nombre  con htmlspecialchar<span style="color:red"><?= $n1 ?></span></h3>
 +
            <h3>Nombre  con strip_tag<span style="color:red"><?= $n2 ?></span></h3>
 +
            <h3>Nombre <span style="color:red"><?= $nombre ?></span></h3>
 +
            <h3>Nombre con filter sin sanitizar<span style="color:red"><?= $n3 ?></span></h3>
 +
            <h3>Nombre directo de $_POSt<span style="color:red"><?= $n3 ?></span></h3>
 +
            <h3>Apellidos <span style="color:red"><?= $apellidos ?></span></h3>
 +
            <h3>Edad <span style="color:red"><?= $edad ?></span></h3>
 +
            <h3>Fecha de nacimiento <span style="color:red"><?= $fNac ?></span></h3>
 +
            <h3>Idioma <span style="color:red"><?= $mis_idiomas ?></span></h3>
 +
            <h3>Género <span style="color:red"><?= $genero ?></span></h3>
 +
            <h3>Correo <span style="color:red"><?= $email ?></span></h3>
 +
            <h3>Estudios <span style="color:red"><?= $estudios ?></span></h3>
 +
        </fieldset>
 +
 
 +
 
 +
 
 +
    </body>
 
</html>
 
</html>
 +
  
 
</source>
 
</source>
 +
 +
}}
 +
 +
</div>
 +
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 
;Filtrando valores
 
;Filtrando valores
−
*Independientemente de que el se validen/verifiquen valores en el cliente, conviente verificarlo siempre en el servidor
+
*Independientemente de que el se validen/verifiquen valores en el cliente, '''''es obligatorio''''' verificarlo siempre en el servidor.
−
*Para ello podemos usar la función filter http://php.net/manual/es/function.filter-var.php.
+
*En otro capítulo veremos temas de seguridad  en los datos, pero para ver lo peligroso que puede ser, podría ser que el usuario escribiera un script en una caja de texto. Esto en principio no deberíamos de permitirlo.
 +
*miramos el siguiente código sencillo
 +
<source lang=php>
 +
<?php
 +
$nombre =$_GET['nombre'];
 +
?>
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport"
 +
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
    <title>Document</title>
 +
</head>
 +
<body>
 +
<form action="seguridad1.php">
 +
    <input type="text" name="nombre" id="">
 +
    <input type="submit" name="enviar" id="">
 +
    <?php echo $nombre ?>
 +
</form>
 +
</body>
 +
</html>
 +
</source>
 +
*Ahora observamos lo que ocurre ejecutando esto en chrome y firefox escribiendo en la caja de texto
 +
<script>alert "Cudado!!! esto podría ser peor!!!</source>
 +
;Escribimos en chrome:
 +
[[Archivo:seguridad1_chrome_cliente.png]]
 +
;Vemos como '''''chrome''''' corta lo que considera un posible ataque '''''xss''''':
 +
[[Archivo:seguridad1_chrome_servidor.png]]
 +
;Escribimos el código en firefox
 +
[[Archivo:seguridad1_firefox.png]]
 +
;Vemos como en firefox sí que se puede ejecutar XSS
 +
[[Archivo:seguridad1_firefox_servidor.png]]
 +
 
 +
{{Tip|
 +
'''''Cross Site-Scripting'''''  '''XSS''' Ataques que consisten en ejecutar código de script en el cliente.
 +
*El Objetivo es obtener valores de cookies, variables de sesión o redireccionar a otras url}}
 +
*Hay mucha formas de evitar esto, como htmlpurifier http://htmlpurifier.org/ que analizaremos cuando veamos seguridad en la web.
 +
*De momento nos limitaremos (que ya es una buena forma de garantizar contenido correcto y evitar problemas)a usar funcions del tipo filter http://php.net/manual/es/function.filter-var.php.
 
Tenemos la opción de filtar_var() y filter_input().
 
Tenemos la opción de filtar_var() y filter_input().
 
;filter_var($variable, $filtro)
 
;filter_var($variable, $filtro)
−
#$variable . Es la variable a filtar
+
#$variable . Es la variable a filtar. Correspondería al valor del '''name''' del '''input''' que queremos recuperar.
−
#$filtro. Es el tipo de filtro que se quiere aplicar. Para ver los tipos de filtros, consultamos a la página web http://php.net/manual/es/filter.filters.validate.php
+
#$filtro. Es el tipo de filtro que se quiere aplicar. Para ver los tipos de filtros, consultamos a la página web http://php.net/manual/es/filter.filters.validate.php.
 
</div>
 
</div>
  
Línea 340: Línea 798:
 
;filter_input($tipo_entrada. $variable, $filtro)
 
;filter_input($tipo_entrada. $variable, $filtro)
 
#$tipo_entrada: Uno de los siguientes: INPUT_GET, INPUT_POST, INPUT_COOKIE, INPUT_SERVER o INPUT_ENV.
 
#$tipo_entrada: Uno de los siguientes: INPUT_GET, INPUT_POST, INPUT_COOKIE, INPUT_SERVER o INPUT_ENV.
−
#$variable: como en el caso anterior
+
#$variable: como en el caso anterior.
−
#$filtro: como en el caso anterior
+
#$filtro: como en el caso anterior.
 
*Ambas funciones retornan el valor de la variable requerida, o false si el filtro falla o null, si la variable no tenía valor.
 
*Ambas funciones retornan el valor de la variable requerida, o false si el filtro falla o null, si la variable no tenía valor.
 
</div>
 
</div>
Línea 351: Línea 809:
 
Filtra los valores en un formulario y verifica el tipo de la variable introducido}}
 
Filtra los valores en un formulario y verifica el tipo de la variable introducido}}
  
−
*Hagamos los siguientes ejercicios  
+
*Podemos buscar ejercicios de formularios en la lista ya dada en el tema anterior:
−
http://www.tecn.upf.es/~ocelma/cpom/practicas/
+
http://www.tecn.upf.es/~ocelma/cpom/practicas/
 
</div>
 
</div>
  
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">
 +
</div>

Última revisión de 17:18 20 nov 2023

Introducción

  • Tratamos de ver las instrucción que permitan aportar valores al programa.
  • Todos los lenguajes de programación tienen primitivas o incluso instrucciones propias para este cometido
  • Un programa necesita interactuar con el usuario.

Para ello debemos tener dos tipos de instrucciones como podemos ver en la imagen

  1. Leer valores del teclado
  2. Mostrar resultados en pantalla
InteracutandoPrograma.png
  • En el caso de PHP, hemos visto alguna primitiva para mostrar valores por pantalla (En realidad lo que hace es escribirlas al fichero html que entrega al cliente).
  • Estas instrucciones son echo y print.
  • Ambos dos son son instrucciones del lenguaje, como ya hemos visto en el tema anterior

Cómo leer datos de usuario

  • Nos falta ver cómo podemos hacer que el cliente (a través del navegador) aporte valores al programa escribiéndolos por el teclado.
  • Hay que partir de la situación en la que estamos desarrollando nuestra aplicación Aplicación web. 
El script lo ejecuta  el servidor 
(en nuestro caso el programa apache ejecutándose en un ordenador)
cuando un cliente (un navegador en un equipo) solicita una página o recurso que tiene código php.
  • No puedo detener el programa esperando que el usuario aporte un valor. Esto no es posible en una programación web.
Icon present.gif
Tip: Típico ejemplo que el programa me pide un nombre, y su ejecución espera a que introduzca el nombre y presione intro para continuar


  • Lo que la programación web nos va a permitir es enviar junto con la solicitud de la página, valores,(o parejas variable, valor) que aporte el usuario, mediante un formulario.
  • De alguna manera enviaremos parejas variable, valor.
  • El formulario será parte de la página del cliente, código html.
FormularioPHP.png
Leyendo del usuario
  • En el formulario tendremos elementos gráficos de entradas de valores (input) donde, en el navegador, el usuario podrá escribir contenido(text, ...), o de alguna forma aportarlo (radio, select, ...)
  • En los diferentes elementos de entrada de un formulario , como una texto, el usuario podrá escribir valores.
  • Al darle el botón enviar (u otro elemento submit) (submit del formulario), dichos valores irán al servidor para ser leídos y usados en un script;
  • Porteriormetne veremos cómo leerlos en el servidor.
  • Repasemos cómo crear formularios en el cliente y lo que más nos interesa, cómo leerlos en el servidor.

Creando un formulario

  • Esta parte la veis en el módulo de diseño de interfaces , no obstante comentaremos lo que aquí vamos a utilizar.
  • Un formulario se establece con la etiqueta form.
Etiqueta form



Icon define.gif
Formularios vistos desde el servidor

Para la programación servidor, entendemos por formulario: 

Una sección del código html que va a poder contener,( además de otros elementos)
varios objetos gráficos con los que el usuario va a poder interactuar
insertando valores para que éstos lleguen al servidor


Atributos de la etiqueta

  • Etiqueta form con una serie de atributos, de los que ahora nos interesan dos principalmente:
  1. action: especifica el fichero que se invocará al servidor. Este fichero contendrá el código php que queremos que se ejecute.
  2. method: especifica el modo en el que se van a pasar los parámetros (valores introducidos a los diferentes objetos del formulario, o que tengan asignados por defecto).

El action



Icon define.gif
Valor de action
Establece el nombre del recurso, script o página
que se va a solictar al servidor 
cuando realicemos un click en el submit del formulario


Ejemplo



Icon activity.jpg
Haciendo un pin-pon

Haz un proyecto que contenga dos páginas ping.php y pon.php

  • Ambas tendrán un botón de tipo submit 
<input type=submit value='Ir a ...'>
  • La página pin me llevaré a pon py la página pon me ha de llevar a pin




El method: GET o POST



Icon define.gif
Valor de method
Establece la manera en la que van a enviar los datos al servidor
Se enviarán todas las parejas variable-valor que haya en el formulario
Estos datos se pueden enviar:
  en la cabecera (método GET)
  en el cuerpo del mensaje (método POST)



   <form action="datos.php" method="POST"
    ......
   </form>
   <form action="datos.php" method="GET"
    ......
   </form>
  • Este parámetro es opcional, si no se especifica por defecto toma el valor GET
  • Cuando el método es GET las parejas se viaulizan en el URL, apareciendo como parte de él, separado por el signo interrogación con parejas variable=valor, y separadas entre ellas, si hubiera varias, con el &



Icon casestudy.gif
Ejemplo
Método GET
  • HTML en el cliente:
  • Vemos dos input de type text y con dos atributos asignados: name y value:
  • 1.- name es el que vamos a utilizar para recuperar el contenido del input en el servidor.
Icon present.gif
Tip: El name es al servidor lo mismo que el id es al cliente, con id podéis acceder a los valores de los elementos con javascript, con el name lo haremos en php


  • 2.- value es el valor. Este valor se sustituye por el contenido del input del formulario. 
<form action="datos.php" method="GET">
      Nombre
          <input type=text name = 'nombre' value='maría'>
      Apellido
           <input type=text name = 'apellido' value='Ruiz'>
       <br />
       <input type=submit value=enviar>
   </form>
Al visualizar en el navegador aparecerá la páginas siguiente 
Dos cajas de texto y el botón submit

SubmitGET1.png

Al presionar submit si observamos el url va el signo ? y luego las parejas variable=valor separadas entre ellas por &.
  • Observamos como aparece el texto después de la url:


Form maria ruiz.png




Atributos
  • En este caso estamos indicando que cuando se envíe el formulario, se solicita al servidor un fichero (página, recurso o script) llamado datos.php.
  • La ubicación del fichero, en este caso, como no se especifica, se busca en la misma ubicación donde está el fichero que actualmente está viendo el cliente.
  • No obstante se puede especificar una ruta absoluta en lugar de relativa 
<form action="http://localhost/pruebas/datos.php" method="GET">
 ....
Icon present.gif
Tip: Tienes claro la diferencia entre ruta relativa y ruta absoluta?


  • También se especifica que los valores enviados con el formulario; irán en el cuerpo de documento usando el protocolo http, y no en el URI con el signo ? como sucede si se especificara GET.


Icon key points.gif

Puntos clave


Tan inseguro es usar GET como POST. si queremos garantizar seguridad debemos usar https en lugar de http

En el caso de GET 
<form action="http://localhost/pruebas/datos.php" method="GET">
 ....

Form maria ruiz.png

En el caso de post 
<form action="http://localhost/pruebas/datos.php" method="POST">
 ....

Si vamos a las herramientas de diseño en el navegador, en la solapa de red o network, podemos ver: Form maria ruiz post.png


  • Por supuesto hay más atributos, el id es importante para poder acceder a ese elemento con javascript.
  • Tanto method como action son necesarios para la programación web.
  • Hay mas atributos, es importante el atributo enctype que permite usar algún tipo de cifrado para enmascarar la información que se envía, y poder especificar también si en el formulario se van a enviar grandes cantidades de bytes, como imágenes u otro tipo de ficheros.
Icon present.gif
Tip: Usar https si se quiere confidencialidad con un nivel aceptable de seguridad.


  • Este atributo es importante cuando en lugar de input de tipo texto <input type=text> enviemos ficheros <input type=file> u otros contenidos diferentes.

Elementos dentro del formulario

  • Dentro del formulario debemos poder recoger información que el cliente nos facilite.
  • Al menos deberíamos de conocer dos elementos input y button o bien submit.
  • El input representa una caja de texto.
  • El submit es un botón que tiene automatizada la acción de enviar el formulario al hacer click sobre él.

Creando formularios

Es interesante ojear esta página que te informa de cómo hacer formularios usando html5. 

https://developer.mozilla.org/es/docs/Learn/Forms
Elemento input
  • Como ya hemos comentado, es un elemento de entrada de texto que se rellena en la página web que tiene el cliente, y se envía al servidor donde se puede recuperar esta información para el script a ejecutar (se recuperará durante la ejecución).
Atributos importantes de un <input type=text>
type
Indicaremos el tipo de elemento de entrada (text, password, email, checkbox...).
Aquí podemos ver una lista de posibles valores, tened en cuenta que con html5 se introdujeron 13 nuevos tipos. 
 http://www.w3schools.com/tags/att_input_type.asp
...)
atributo type=hidden.
También es interesante el valor hidden para el type de un input(especialmente usado para pasar valores del cliente al servidor de forma transparente para el usuario).
name
El valor de este atributo especifica el nombre asociado a este input.
Es este valor el que necesitamos para recuperar la información del input en el servidor.
value
Es el valor que tiene el input. Si queremos que por defecto tenga un valor.
  • Este valor es sustituido por el contenido del input cuando se envía al servidor.
  • Dentro del form necesitaremos al menos un input y un submit.
  • Veamos el siguiente ejemplo. En el cliente tenemos el siguiente formulario 
<!DOCTYPE html>
<html>
    <head>
        <title>Tabla de multiplacar</title>
    </head>
    <body>
        <form action="tabla.php" method="GET">
            Inserta un numero <br>
            <input type="text" name="numero"/>
            <br/>
            <input TYPE="submit" VALUE="Enviar"/> 
        </form>
    </body>
</html>
  • Y obtenemos la siguiente imagen

Formulario.png

  1. Al presionar el botón de enviar se envía la página al servidor.
  2. La página o script la especificamos en el atributo action del elemento form; la gestiona tabla.php en este caso.
  3. En el servidor para recuperar el valor utilizaremos la variable supergobal(Lo veremos más adelante).
  4. Esta superglobal puede ser $_GET $_POST' o $_REQUEST.
  5. Una tabla es una estructura indexada por índices.
  6. Leeremos el índice nombre de variable de esta estructura superglobal.
  7. $_GET o $_POST dependiendo de el método de envío, o $_REQUEST sirve para ambas (no recomendado). 
 Valor numérico introducido: <?php echo $_GET['numero'] ?>

Obtener datos de un formulario

  • Una vez que estamos en el servidor, los datos son pasados del cliente al servidor usando las variables superglobales o matrices $_POST $_GET, $_REQUEST.
  • Dependerá del modo en el que pasemos los datos del formularios desde el cliente 
atributo method del form
  • Para leer el datos indexaremos la matriz por el valor del atributo name de input correspondiente.
  • Por ejemplo en el cliente tenemos 
....
<form method=POST action ="resuelve.php">
....
 <input type=text name=nombre>
...
</form>
  • En el servidor el servidor el fichero resuelve.php 
....
$nombre = $_POST['nombre'];
....
//También podríamos $_REQUEST['nombre'];
Icon present.gif
Tip: No se recomienda por temas de seguridad leer de la superglobal $_REQUEST


(Comment.gif: 

Nota:
Las variables en $_REQUEST se proporcionan al script a través de los mecanismos
de entrada GET, POST, y COOKIE y por lo tanto pueden ser manipulados por el usuario
remoto y no debe confiar en el contenido...)


Verificando si una variable existe
  • Este tema es muy interesante en php.
  • Observar que el hecho de que aparezca una variable no implica que la variable exista.
  • Esto en php puede crear una confusión por su naturaleza dinámica.
  • Si en el código aparece esta línea 
$edad;



Icon qmark.gif
Pregunta

¿A partir de esa línea la variable existe?

  • La respuesta es que existe pero tiene un valor null

¿A partir de esa línea la variable ha sido declarada?

  • En realidad la respuesta es si, como null

¿Tiene algún valor?

  • La respuesta es que tiene el valor null



  • Esto puede crear confusiones que debemos aclarar. null, cuando una variable tiene valor null vamos a considerar que no tiene valor, o que no ha sido delcarada.
  • Para comprobar probamos el siguiente código 
<?php
$variable; //Declaramos una variable de tipo null
 
if (isset($variable))
    echo "OK isset -$variable- <br />";
else
    echo "NO OK isset -$variable- <br />";
 
if (empty($variable))
    echo "OK empty La variable -$variable- <br />";
else
    echo "NO OK empty La variable -$variable- <br />";
 
if (is_null($variable))
    echo "OK is_null  La variable -$variable- <br />";
else
    echo "NO OK is_null  La variable -$variable- <br />";
?>
  • Probemos a modificar el valor de $variable por los siguientes valores 
$varialbe = null;
$varialbe ="";
$varialbe =0;
$varialbe = true;
$varialbe = false;
  • A partir de ello podemos concluir y entender lo que hacen las funciones 
//isset — Determina si una variable está definida y no es NULL
 isset($var):bool
//is_null — Comprueba si una variable es NULL
 is_null($var):boll
 empty()
  • hay que tener cuidado con el concepto de una variable vacía
  • En php los siguientes valores asignados a una variable se considerarán valores vacíos
  • "" //Una cadena vacía
  • 0 //El valor 0 como entero o como float
  • 0.0
  • "0"//La cadena de caracteres formada por el carácter 0
  • NULL //El valor null
  • FALSE //El valor booleano false


Icon activity.jpg
Probando el valor leído de un formulario
  • Realiza una aplicación que leas el valor introducido en una caja de texto
  • Has de informar si no ha insertado ningún valor que lo inserte
  • Si lo ha insertado lo visualizarás




  • Podemos revisar el siguiente código como corlario 
<?php
echo "<h3>Probamos la función is_null</h3>";
echo "<hr />";
 
$a;
echo is_null($a)? "SI. <b>\$a </b>, es nulo <br>\n": "NO <b>\$a</b> no es nulo<br>\n"; //SI
$a=null;
echo is_null($a)? "SI. <b>\$a=null</b>, \$a es nulo <br>\n": "NO <b>\$a=null \$a</b> no es nulo<br>\n";//SI
$a=5;
echo is_null($a)? "SI. <b>\$a=5</b>, \$a es nulo <br>\n": "NO <b>\$a=5</b> \$a no es nulo<br>\n";//NO
$a="";
echo is_null($a)? "SI. <b>\$a=\"\"</b>, \$a es nulo <br>\n": "NO <b>\$a=\"\"</b> \$a no es nulo<br>\n";//NO
$a=false;
echo is_null($a)? "SI. <b>\$a=false</b>, \$a es nulo <br>\n": "NO <b>\$a=false</b> \$a no es nulo<br>\n";//NO
$a=0;
echo is_null($a)? "SI. <b>\$a=0</b>,  \$a es nulo <br>\n": "NO <b>\$a=0</b> \$a no es nulo<br>\n";//NO
unset($a); //Eliminamos la variable
 
echo "<h3>Probamos la función isset</h3>";
echo "<hr />";
 
$a;
echo isset($a)? "SI <b>\$a</b> está definido <br>\n": "NO <b>\$a</b> no está definido<br>\n"; //NO
$a=null;
echo isset($a)? "SI <b>\$a=null</b> \$a está definido<br>\n": "NO <b>\$a=null</b> \$a no está definido<br>\n";//NO
$a=5;
echo isset($a)? "SI <b>\$a=5</b> \$a está definido<br>\n": "NO <b>\$a=5</b> \$a no está definido<br>\n";//SI
$a="";
echo isset($a)? "SI <b>\$a=\"\"</b> \$a está definido<br>\n": "NO <b>\$a=\"\"</b> \$a no está definido<br>\n";//SI
$a=false;
echo isset($a)? "SI <b>\$a=false</b> \$a está definido<br>\n": "NO <b>\$a=false</b> \$a no está definido<br>\n";//SI
$a=0;
echo isset($a)? "SI <b>\$a=0</b>  \$a está definido <br>\n": "NO <b>\$a=0</b> \$a no está definido<br>\n";//SI
unset($a); //Eliminamos la variable
 
 
echo "<h3>Probamos la función empty</h3>";
echo "<hr />";
$a;
echo empty($a)? "SI <b>\$a</b> está vacío <br>\n": "NO \$a</b> no es nulo<br>\n"; //SI
$a=null;
echo empty($a)? "SI <b>\$a=null</b> \$a está vacío<br>\n": "NO <b>  \$a=null</b> \$a no está vacío<br>\n";//SI
$a=5;
echo empty($a)? "SI <b>\$a=5</b> \$a está vacío<br>\n": "NO <b>\$a=5</b> \$a no está vacío<br>\n";//NO
$a="";
echo empty($a)? "SI <b>\$a=\"\"</b> \$a está vacío<br>\n": "NO <b>\$a=\"\"</b> \$a no está vacío<br>\n";//SI
$a=false;
echo empty($a)? "SI <b>\$a=false</b> \$a está vacío<br>\n": "NO <b>\$a=false</b> \$a no está vacío<br>\n";//SI
$a=0;
echo empty($a)? "SI <b>\$a=0</b>  \$a está vacío<br>\n": "NO <b>\$a=0</b> \$a no está vacío<br>\n";//SI
  • Podemos observar la siguiente salida

Salida valores nulos php.png



Icon key points.gif

isset($variable) emtpy($variable) is_null($variable) 

isset($variable)
Esta función devuelve true si $variable existe y no tiene valor null
is_null($variable)
Esta función devuelve true si $variable tiene valor null o no existe
Icon present.gif
Tip: isset y is_null son complementarias. 


empty($variable)
Esta función devuelve true si $variable tiene un valor vacío
Icon present.gif
Tip: Cuidado con los valores siguientes.
  1. El string "",
  2. El entero 0
  3. El booleano false

se consideran valores vacíos en esta función.



Validando valores en el servidor

  • Indistintamente de que se validen valores en el cliente, es muy importante validarlos en el servidor
  • En php tenemos funciones para validar el tipo de un valor
  • Para ello podemos ir al repertorio dónde tenemos todas las funciones para manipular variables 
http://php.net/manual/es/ref.var.php
  • Cuando leemos un valor de un formulario, siempre lo vamos a leer como una cadena de caracteres, pero podremos verificar algunos valores por conversión implícita


Icon casestudy.gif
Algunas conversiones
  • "754" y miramos a ver si es un número, nos va a decir que sí
  • "false" o "true" si miramos a ver si es booleano, nos va a decir que no
  • "754" y miramos a ver si es un string, nos va a decir que sí




Icon activity.jpg
Validando valores
Haz un programa que podamos ver si un número es entero, float o string





Icon activity.jpg
Actividad

Haz un formulario en el que insertemos un número y el servidor web nos visualice la tabla de multiplicar

  • Comprobaremos previamente que la variable exista y tenga un valor numérico
  1. isset($variable) , Para ver que exista la variable y no tiene un valor nul
  2. is_null($variable) Puedes usarla en lugar de la anterior, recuerda que son complementarias 
isset($variable) es igual a !is_null($variable)
is_null($variable) es igual a !isset($variable)
  1. is_numeric($variable) me dice si el valor de la variable es numércio 


$nombre = ""; //nombre tendrá el valor nulo pero es de tipo null
if ($nombre==null) //Me dará verdad
    ......
if (is_null($nombre)) //Me dará falso
  • A continuación vamos a ver como usar y leer datos de un formulario.


Icon activity.jpg
Formulario

Realiza un formulario donde pidamos al usuario datos para confeccionar una ficha

  • Nombre
  • Apellidos
  • Dirección
  • Fecha de nacimiento
  • Edad
  • Idiomas que habla de entre 4 idiomas (Checkbox)
  • Si es hombre, mujer o no quiere informar de ello (radio)
  • Dirección de correo electrónico.
  • Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO (select) 
<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <fieldset style="width:60%">
            <legend>Datos personales</legend>
            <form action="datos.php" method="POST">
                <label for="">Nombre</label>
                <input type="text" name="nombre" id="">
                <label for="">Apellido</label>
                <input type="text" name="apellido" id="">
                <br />
                <label for="">Direccion</label>
                <input type="text" name="direccion" id="">
                <br>
                <label for="">
                    Fecha Nacimiento
                </label><input type="date" name="fNac" id="">
                <br>
                <label for="">Edad</label>
                <input type="text" name="edad" id="">
                <br />
 
                <b>Idiomas</b><br />
                <input type="checkbox" name="idiomas[]" value="castellano" id="">
                <label for="">Castellano</label>
                <br>
 
                <input type="checkbox" name="idiomas[]" value="rumano" id="">
                <label for="">Rumano</label>
                <br>
 
 
                <input type="checkbox" name="idiomas[]" value="inglés" id="">
                <label for="">Inglés</label>
                <br>
                <input type="checkbox" name="idiomas[]" value="francés" id="">
                <label for="">Francés</label>
                <br>
                <b>Género</b><br />
                <input type="radio" name="genero" value="masculino" id="">Masculino<br />
                <input type="radio" name="genero" value="femenino" id="">Femenino<br />
                <input type="radio" name="genero" value="no_aporta" id="">No quiero aportar<br />
 
                <label for="">Dirección de correo</label>
                <input type="email" name="email" id=""><br /><br />
                Estudios
                <select name="estudios">
 
 
                    <option value="eso">ESO</option><br />
                    <option value="bach" >BACH</option><br />
                    <option value="cicloFormativo">Ciclo Formativo</option><br />
                    <option value="gradoUniversitario">Grado Universitario</option><br />
                </select>
                <hr />
                <input type="submit" value="Enviar">
 
            </form>
        </fieldset>
 
    </body>
</html>



  • Observa las diferentes forma de poder leer valores filtrando y evitando o no ataques XSS
Filtrando valores
  • Independientemente de que el se validen/verifiquen valores en el cliente, es obligatorio verificarlo siempre en el servidor.
  • En otro capítulo veremos temas de seguridad en los datos, pero para ver lo peligroso que puede ser, podría ser que el usuario escribiera un script en una caja de texto. Esto en principio no deberíamos de permitirlo.
  • miramos el siguiente código sencillo 
<?php
$nombre =$_GET['nombre'];
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="seguridad1.php">
    <input type="text" name="nombre" id="">
    <input type="submit" name="enviar" id="">
    <?php echo $nombre ?>
</form>
</body>
</html>
  • Ahora observamos lo que ocurre ejecutando esto en chrome y firefox escribiendo en la caja de texto 
<script>alert "Cudado!!! esto podría ser peor!!!</source>
Escribimos en chrome

Seguridad1 chrome cliente.png

Vemos como chrome corta lo que considera un posible ataque xss

Seguridad1 chrome servidor.png

Escribimos el código en firefox

Seguridad1 firefox.png

Vemos como en firefox sí que se puede ejecutar XSS

Seguridad1 firefox servidor.png

Icon present.gif
Tip:

Cross Site-Scripting XSS Ataques que consisten en ejecutar código de script en el cliente.

  • El Objetivo es obtener valores de cookies, variables de sesión o redireccionar a otras url


Tenemos la opción de filtar_var() y filter_input().

filter_var($variable, $filtro)
  1. $variable . Es la variable a filtar. Correspondería al valor del name del input que queremos recuperar.
  2. $filtro. Es el tipo de filtro que se quiere aplicar. Para ver los tipos de filtros, consultamos a la página web http://php.net/manual/es/filter.filters.validate.php.
filter_input($tipo_entrada. $variable, $filtro)
  1. $tipo_entrada: Uno de los siguientes: INPUT_GET, INPUT_POST, INPUT_COOKIE, INPUT_SERVER o INPUT_ENV.
  2. $variable: como en el caso anterior.
  3. $filtro: como en el caso anterior.
  • Ambas funciones retornan el valor de la variable requerida, o false si el filtro falla o null, si la variable no tenía valor.



Icon activity.jpg
Actividad

Filtra los valores en un formulario y verifica el tipo de la variable introducido



  • Podemos buscar ejercicios de formularios en la lista ya dada en el tema anterior: 
http://www.tecn.upf.es/~ocelma/cpom/practicas/
Obtenido de «https://es.wikieducator.org/index.php?title=Plantilla:PHP/FormulariosConceptosGenerales&oldid=30759»