Diferencia entre revisiones de «Usuario:ManuelRomero/php/formularios/concepto»
De WikiEducator
< Usuario:ManuelRomero | php | formularios
(→Obtener datos de un formulario) |
|||
(8 revisiones intermedias por el mismo usuario no mostrado) | |||
Línea 1: | Línea 1: | ||
− | {{:Usuario:ManuelRomero/ | + | {{:Usuario:ManuelRomero/dwes/B2T1/nav}} |
+ | <!--__NOEDITSECTION__--> | ||
+ | {|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:1px; border-color:#0066FF;" | ||
+ | | width="100%" valign="top" style="padding: 0; margin:0px;" | | ||
+ | <span style="background:#FFFF99"> | ||
+ | </span> | ||
+ | [[Imagen:DWES_TituloTema3.gif|center]] | ||
+ | |} | ||
__NOTOC__ | __NOTOC__ | ||
Línea 51: | Línea 58: | ||
*Nos falta ver como podemos hacer que el cliente aporte valores al programa escribiéndolos por el teclado | *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, ...) | *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 | + | *El formulario será parte de la página del cliente. |
[[image:formularioPHP.png]] | [[image:formularioPHP.png]] | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | ;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 | *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 | *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 | *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 | ||
</div> | </div> | ||
+ | <div class="slide"> | ||
===Creando un formulario=== | ===Creando un formulario=== | ||
*Esta parte la veis con Juanda, no obstante comentaremos lo que aquí vamos a utilizar | *Esta parte la veis con Juanda, no obstante comentaremos lo que aquí vamos a utilizar | ||
Línea 63: | Línea 77: | ||
{{Definicion| | {{Definicion| | ||
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 e insertar valores para que éstos lleguen al servidor}} | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <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 nos interesan dos principalmente | ||
Línea 72: | Línea 90: | ||
</form> | </form> | ||
</source> | </source> | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | ;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 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 | *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> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
{{Puntos clave| | {{Puntos clave| | ||
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 usar https si se quiere confidencialidad con un nivel aceptable de seguridad. | + | *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. | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
====Elementos dentro del formulario==== | ====Elementos dentro del formulario==== | ||
*Dentro del forumulario debemos poder recoger información que el cliente nos facilite | *Dentro del forumulario debemos poder recoger información que el cliente nos facilite | ||
Línea 83: | Línea 115: | ||
*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> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | :Creando formularios | ||
Es interesante ojear esta sencilla página que te informa de como hacer formularios | Es interesante ojear esta sencilla página que te informa de como hacer formularios | ||
http://www.aulaclic.es/html/t_8_1.htm | http://www.aulaclic.es/html/t_8_1.htm | ||
Línea 91: | Línea 128: | ||
http://www.w3schools.com/tags/att_input_type.asp | http://www.w3schools.com/tags/att_input_type.asp | ||
...) | ...) | ||
− | + | </div> | |
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | ;Atrigutos | ||
+ | :También es interesante el tipo hidden (especialmente usado para pasar valores del cliente al servidor de forma transparente para el usuario. | ||
;name | ;name | ||
:indicaremos el nombre asociado a este input. | :indicaremos el nombre asociado a este input. | ||
:Con este identificador podremos en el servidor recuperar la información. | :Con este identificador podremos en el servidor recuperar la información. | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <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 | ||
Línea 103: | Línea 148: | ||
<source lang=html4strict> | <source lang=html4strict> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
− | |||
<html> | <html> | ||
<head> | <head> | ||
Línea 118: | Línea 162: | ||
</html> | </html> | ||
</source> | </source> | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
*Y obtenemos la siguiente imagen | *Y obtenemos la siguiente imagen | ||
[[imagen:formulario.png]] | [[imagen:formulario.png]] | ||
Línea 129: | Línea 177: | ||
Valor numérico introducido: <?php echo $_GET['numero'] ?> | Valor numérico introducido: <?php echo $_GET['numero'] ?> | ||
</source> | </source> | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
===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 | ||
Línea 135: | Línea 188: | ||
*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> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
<source lang=php> | <source lang=php> | ||
Línea 151: | Línea 208: | ||
//También podríamos $_REQUEST['nombre']; | //También podríamos $_REQUEST['nombre']; | ||
</source> | </source> | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
;Verficando si una variable existe (aunque tenga valor null). | ;Verficando 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 | ||
Línea 156: | Línea 218: | ||
*Para ello usaremos la función ya conocida '''''isset($variable)''''', donde $variable es la variable que queremos ver si tiene valor | *Para ello usaremos la función ya conocida '''''isset($variable)''''', donde $variable es la variable que queremos ver si tiene valor | ||
</source> | </source> | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
*A continuación vamos a realizar una serie de prácticas con formularios | *A continuación vamos a realizar una serie de prácticas con formularios | ||
Línea 170: | Línea 236: | ||
if (is_null($nombre)) //Me dará falso | if (is_null($nombre)) //Me dará falso | ||
</source> | </source> | ||
− | + | </div> | |
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
+ | *A continuación vamos a ver como usar y leer datos de un formulario. | ||
{{Actividad| | {{Actividad| | ||
Realiza un formulario donde pidamos al usuario datos para confeccionar una ficha | Realiza un formulario donde pidamos al usuario datos para confeccionar una ficha | ||
Línea 182: | Línea 252: | ||
*Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO | *Estudios realizados entre ESO, BACHILLER, CICLO FORMATIVO, GRADO UNIVERSITARIO | ||
}} | }} | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <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, conviente verificarlo siempre en el servidor | ||
Línea 189: | Línea 263: | ||
#$variable . Es la variable a filtar | #$variable . Es la variable a filtar | ||
#$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> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
;filter_input($tipo_entrada. $variable, $filtro) | ;filter_input($tipo_entrada. $variable, $filtro) | ||
Línea 195: | Línea 273: | ||
#$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> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
{{Actividad| | {{Actividad| | ||
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}} | ||
Línea 200: | Línea 283: | ||
*Hagamos los siguientes ejercicios | *Hagamos los siguientes ejercicios | ||
http://www.tecn.upf.es/~ocelma/cpom/practicas/ | http://www.tecn.upf.es/~ocelma/cpom/practicas/ | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
===Redirigiendo páginas=== | ===Redirigiendo páginas=== | ||
Línea 206: | Línea 293: | ||
*Pensemos en como podemos pasar ese nombre a la página | *Pensemos en como podemos pasar ese nombre a la página | ||
[[Imagen:pasandoOcultos.png]] | [[Imagen:pasandoOcultos.png]] | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
*Analicemos las maneras de hacerlo, pero previamente veamos una muy interesante función | *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 | *La usaremos mucho mucho, y sirve para invocar a otras páginas en un momento dado | ||
Línea 211: | Línea 303: | ||
header() se usa enviar encabezados HTTP sin formato. | 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. | 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. | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
− | *Es muy importante saber | + | *Es muy importante saber que '''''header()''''' debe ser llamado antes de mostrar nada por pantalla |
*Aquí se puede acceder a la referencia oficial. | *Aquí se puede acceder a la referencia oficial. | ||
http://es.php.net/manual/es/function.header.php | http://es.php.net/manual/es/function.header.php | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
*Por ahora la usaremos de dos maneras para un mismo cometido | *Por ahora la usaremos de dos maneras para un mismo cometido | ||
;Cargar una página inmediatamente | ;Cargar una página inmediatamente | ||
Línea 222: | Línea 322: | ||
*Ahora estamos en condiciones de probarlas con el ejemplo anterior. | *Ahora estamos en condiciones de probarlas con el ejemplo anterior. | ||
*Es muy importante entender las acciones que se van haciendo | *Es muy importante entender las acciones que se van haciendo | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ===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 | ||
+ | [[Archivo:appUnaPagina.png]] | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
+ | *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}} | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ===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}} | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | *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) | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | ;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 | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> | ||
+ | |||
+ | [[image:llamadasPagina.png]] | ||
+ | *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 | ||
+ | <source lang=html5> | ||
+ | <input type="hidden" name="valorocultoarescatar" value="$variable"> | ||
+ | </source> | ||
+ | {{Actividad|Implementa el programa anterior y verifica su funcionamiento}} | ||
+ | </div> | ||
+ | |||
+ | <!--3 --> | ||
+ | <div class="slide"> |
Última revisión de 20:02 7 oct 2016
|