Uso de formularios para leer datos del cliente

Introducción

• Todos los lenguajes de programación tienen primitivas o incluso instrucciones propias
• Ya vimos que un programa necesita interactuar con el usuario

1. Leer valores del teclado
2. Mostrar resultados en pantalla

• 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
• Ambos dos son son instrucciones del lenguaje, ver la diferencia

Actividad

Completa el siguiente programa <?php $n1=1; $n2=2;   //Usando echo con múltiples parámetros //Visualiza la suma, la resta, y la multiplicacion //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/>";   ???????? ?>

Cómo leer datos de usuario

• Nos falta ver como podemos hacer que el cliente 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.

Leyendo del usuario

• En él tendremos cajas de texto donde el cliente podrá escribir contenido
• En la caja de texto el usuario escribirá el valor
• Al darle el botón enviar dicho valor irá al servidor, en seguida veremos como leerlo en el servidor
• A continuación vamos a ver de modo básico como crear formularios en el cliente y a continuación que es lo que nos interesa, como leerlos

Creando un formulario

• Esta parte la veis con Juanda, no obstante comentaremos lo que aquí vamos a utilizar

Etiqueta form

Esta etiqueta establece un formularios.

Definición

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

Atributos de la etiqueta

• Etiqueta form con una serie de atributos de los que nos interesan dos principalmente

1. action especifica el fichero que se ejecutará cuando se envíe el formulario
2. method especifica el modo en el que se van a pasar los parámetros (valores introducidos a los difernetes objetos del formulario, o que tengan asignados por defecto).

   <form action="mifichero.php" method="POST"
    ......
   </form>

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.
• 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

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
• 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

usar https si se quiere confidencialidad con un nivel aceptable de seguridad.

Elementos dentro del formulario

• Dentro del forumulario 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 sencilla página que te informa de como hacer formularios

http://www.aulaclic.es/html/t_8_1.htm

• Elemento input, en él especifiaremos los siguientes atributos

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
...)

Atrigutos

También es interesante el tipo hidden (especialmente usado para pasar valores del cliente al servidor de forma transparente para el usuario.

name

indicaremos el nombre asociado a este input.

Con este identificador podremos en el servidor recuperar la información.

value

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
• EJ. en el emisor tenemos

<!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

1. Al presionar el botón de enviar se envía la página al servidor
2. La página que especificamos en el botón action la gestiona tabla.php en este caso
3. En el servidor para recuperar el valor utilizaremos la tabla supergobal
4. una tabla es una estructura indexada por índices
5. leeremos el índice nombre de variable de la tabla
6. $_GET o $_POST dependiendo de el método de envío

 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'];

Verficando si una variable existe (aunque tenga valor null).

• Es especialmente importante en muchas ocasiones ver si una variable tiene o no valor
• No sabemos si el usuario a insertado o no valor en el campo de texto
• Para ello usaremos la función ya conocida isset($variable), donde $variable es la variable que queremos ver si tiene valor

</source>

• A continuación vamos a realizar una serie de prácticas con formularios

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 isset($variable) , Para ver que exista la variable is_null($variable) me dice si la variable es nula ojo puede tener el valor null y no ser nula 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.

Actividad

Realiza un formulario donde pidamos al usuario datos para confeccionar una ficha Nombre Apellidos dirreccion Idiomas que habla de entre 4 idiomas Si es hombre, mujer o no quiere informar de ello Dirección de correo electrónico. Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO

Filtrando valores

• Independientemente de que el se validen/verifiquen valores en el cliente, conviente verificarlo siempre en el servidor
• Para ello podemos usar la función filter http://php.net/manual/es/function.filter-var.php.

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

filter_var($variable, $filtro)

1. $variable . Es la variable a filtar
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.

Actividad

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

• Hagamos los siguientes ejercicios

http://www.tecn.upf.es/~ocelma/cpom/practicas/

Redirigiendo páginas

• Imagninemos que queremos hacer una página donde pidamos al usuario nombre y password
• El password va a ser 12345. Si el password es correcto iremos a otra página en la que le queremos dar la bienvenida con el nombre que introdujo
• Pensemos en como podemos pasar ese nombre a la página

• Analicemos las maneras de hacerlo, pero previamente veamos una muy interesante función
• La usaremos mucho mucho, y sirve para invocar a otras páginas en un momento dado

header(....);

header() se usa enviar encabezados HTTP sin formato. En esas cabeceras es cuando invocamos a una determinada url que qeremos cargar, así que es ahí donde podemos hacer referencia a la página que queremos ver.

• Es muy importante saber que header() debe ser llamado antes de mostrar nada por pantalla
• Aquí se puede acceder a la referencia oficial.

http://es.php.net/manual/es/function.header.php

• Por ahora la usaremos de dos maneras para un mismo cometido

Cargar una página inmediatamente

header("Location:URL_de_la_página");

Cargar una página con un tiempo de demora (por ejemplo para leer un mensaje)

header ("Refresh:5; url=URL_de_la_pagina");

• Ahora estamos en condiciones de probarlas con el ejemplo anterior.
• Es muy importante entender las acciones que se van haciendo

Referenciando la propia página

• A veces puede ser que en la propia página tengamos el código que queremos que se ejecute cuando hacemos un click en el botón submit.
• Esto simplifica el número de páginas que tenemos en nuestro desarrollo
• En este caso tenemos la siguiente situación

• En la imagen vemos una forma de proceder
• Creamos una página web
• Dentro de la página tenemos que ver si es la primera vez que se carga la página o no
• Otra forma de verlo es si se ha cargado la página porque hemos puesto el url en el navegador, o porque hemos hecho click en el botón submit del formulario
• Dentro del código esto lo podemos saber interrogando si existe la variable $_POST['enviar']

Actividad

Haz una página de bienvenida que muestre los datos de usuario y pass al acceder al sistema Se tiene que hacer en una única página

Pasando información de una página a otra

• La programación web utiliza el protocolo http para la transferecina de los datos
• http es un protocolo sin estado

Puntos clave

La programación web está basada en el protocolo http El protocolo http es un protocolo sin estado

• Cada vez que cargamos una página o hay una solicitud el servidor web entrega al cliente la página ejecutada
• En caso de que la página ejecutada tenga código php (extensión del fichero), el servidor web ejecuta dicho código y entrega como parte de la página el resultado de la ejecución
• El servidor no tiene en cuenta a quién entrega la página, no sabe si es la primera vez que te entrega la página o la enésima vez que lo hace
• Si quiere mantener informaciónentre diferentes páginas, he de gestionarlo en programación
• Una manera ya le hemos visto usando la función de cabecera

header (Location:url?variable1=valor&variable2=valor)

Usando campos ocultos

• Otra manera es usando campos ocultos
• Veamos su funcionamiento
• Hay situaciones donde queremos recopilar además de la información que el usuario rellena, algún dato más.
• Supongamos que queremos saber las veces que una página se invoca a sí mismo
• Cualquiera pensaría en crear una variable, y cada vez que llamemos a la página incrementar en una unidad

• Cada vez que llamemos a la página siempre que el usuario se haya identificado vamos a especificar las veces que ha invocado a la página.
• Para ello necesitamos enviar a la página del servidor la información de las veces que se ha invocado a la página

<input type="hidden" name="valorocultoarescatar" value="$variable">

Actividad

Implementa el programa anterior y verifica su funcionamiento