Uso de formularios para leer datos del cliente

De WikiEducator
Saltar a: navegación, buscar



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

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), como son echo y print
  • Ambos dos son son instrucciones del lenguaje, ver la diferencia


Icon activity.jpg

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, en él tendremos cajas de texto donde el cliente podrá escribier contenido

FormularioPHP.png

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


Icon define.gif

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


Icon key points.gif

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.

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
...)
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 multiplaicar</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 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'] ?>