Diferencia entre revisiones de «Plantilla:PHP/FormulariosConceptosGenerales»

De WikiEducator
Saltar a: navegación, buscar
Línea 82: Línea 82:
 
{{MRM_Ejemplo|
 
{{MRM_Ejemplo|
 
; Método GET
 
; Método GET
*HTML en el cliente
+
*HTML en el cliente:
 +
*Vemos dos input de type name y con dos atributos asignados
 +
# '''''name''''' es el que vamos a utlizar para recuperar el contenido del input en el servidor
 +
# '''''value''''' es el valor. Este valor se sustituye por el contenido del input del formulario
 
<source lang=html4strict>
 
<source lang=html4strict>
 
<form action="mifichero.php" method="GET">
 
<form action="mifichero.php" method="GET">
Línea 94: Línea 97:
 
</source>
 
</source>
 
;Al fisualizar en el navegador la páginas se verá
 
;Al fisualizar en el navegador la páginas se verá
 +
*Vemos las dos cajas de texto y el botón submit
 
[[Imagen:submitGET1.png]]
 
[[Imagen:submitGET1.png]]
  
;Al presionar submit si observamos el url  
+
;Al presionar submit si observamos el url va el signo '''''?''''' y luego las parejas '''''variable=valor''''' separadas entre ellas por '''''&'''''
 +
*Observamos como después de la url  
 
[[Imagen:submitGET2.png]]
 
[[Imagen:submitGET2.png]]
 
}}
 
}}
Línea 103: Línea 108:
 
<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 intentará ejecutar un fichero llamado '''''mifichero.php'''''. La ubicació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
 
*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
 
</div>
 
</div>
Línea 112: Línea 117:
 
Tan inseguro es usar GET como POST. si queremos garantizar seguridad debemos usar https y no http}}
 
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
 
*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  
+
*También es interesante el atributo0''''' 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.
usar https si se quiere confidencialidad con un nivel aceptable de seguridad.
+
*Este atrubuto es importante cuando en lugar de input de texto enviemos ficheros u otros contenidos diferentes.
 
</div>
 
</div>
  
Línea 221: Línea 226:
 
<div class="slide">
 
<div class="slide">
  
;Verficando si una variable existe (aunque tenga valor null).
+
;Verificando si una variable existe (aunque tenga valor null).
 
*Es especialmente importante en muchas ocasiones ver si una variable tiene o no valor
 
*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
 
*No sabemos si el usuario a insertado o no valor en el campo de texto
Línea 263: Línea 268:
 
}}
 
}}
 
</div>
 
</div>
{{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>
 
<!DOCTYPE html>
 
  
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title></title>
 
    </head>
 
    <body>
 
        <h1>Juego de adivinar un  número </h1>
 
        <h3>Tú piensas un número de 1 al 1024 y yo lo adivino en 10 intentos .... (o menos)</h3>
 
        <hr />
 
        <?php if (!isset($_POST[empezar])): ?>
 
            <form action ="." method="POST">
 
                <b>Haz click para empezar</b>
 
                <input type=submit name ="empezar" value="empezar" />
 
            </form>
 
 
            <?php
 
        else:
 
            echo "<form action ='.' method='POST'>";
 
            $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 ?>
 
 
 
</body>
 
</html>
 
 
</source>
 
 
<!--3 -->
 
<!--3 -->
 
<div class="slide">
 
<div class="slide">

Revisión de 07:00 4 nov 2016

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 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/>";
 
????????
?>



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.

FormularioPHP.png

Leyendo del usuario
  • En él tendremos cajas de texto donde en el navegador el usuario podrá escribir contenido
  • 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
  • Repasemos como crear formularios en el cliente y lo que más nos interesa, como leerlos en el servidor

Creando un formulario

  • Esta parte la veis 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
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 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).

GET o POST

   <form action="mifichero.php" method="POST"
    ......
   </form>
  • 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


Icon casestudy.gif
Ejemplo
{{{1}}}


Atributos
  • En este caso estamos indicando que cuando se envíe el formulario, se intentará ejecutar un fichero llamado mifichero.php. La ubicació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 atributo0 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.
  • Este atrubuto es importante cuando en lugar de input de texto enviemos ficheros 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 sencilla página que te informa de como hacer formularios

http://www.aulaclic.es/html/t_8_1.htm
  • Elemento input, en él especificaremos 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
...)
Atributos
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

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


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
  2. is_null($variable) me dice si la variable es nula ojo puede tener el valor null y no ser nula
  3. 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)



Filtrando valores

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.



Icon activity.jpg
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/