No es un bug, es una característica no documentada

viernes, 6 de febrero de 2015

Lenguajes de marcas. Formularios HTML5+PHP+BD

13:35 Posted by Inazio , No comments
Sintaxis:

<form action="formulario.php " method=" ">
     <input ...>
     <input type="submit">
</form>

En el action, pasaremos los datos del formulario a formulario.php, pero tenemos dos modos de realizar el método:

  • get -  Se verá en la URL. Habrá que usar la variable $_GET
  • post - Viaja enmascarado. Hay que usar $_POST


NOTA:
br, hr, img, input, link y meta, entre otras etiquetas, no hace falta cerrarlos en HTML5

Vamos a usar el NetBeans para esta práctica. Creamos un proyecto en PHP remoto (tal y como explicaba en la entrada anterior (ver aquí) de nombre, por ejemplo, formulario en mi caso.

Necesitaremos dos archivos, index.php y tratarFormulario.php.

Hacemos primero una sencilla prueba, escribimos en index.php el código para generar un simple bóton y un cuadro de texto, tal que así:


Y veremos en el navegador esto:

Cuando pulsemos enviar nos llamará a tratarFormulario. Si miramos atentamente a la URL...


¿Veis? Podemos ver lo que contiene el campo nombre. Por eso se dice que el método GET es inseguro, por ejemplo permitiría realizar un ataque de SQL inyection.
Eso lo solucionaremos usando método post.

En este ejemplo trabajaremos con get, posteriormente realizaré pruebas con código usando post.

En tratarFormulario.php escribimos lo siguiente:


Lo que hacemos en la línea 8 es mostrar por pantalla un Hola y el texto capturado del formulario de index.php


Podemos hacer varias cosas con los cuadros de texto y los botones. Por ejemplo, si queremos insertar un valor por defecto, usaremos el parámetro value. Ej:

<input type="text" name="nombre" value="Escribe aquí...">
<input type="submit" value="Ok">

Si queremos limitar el número de caracteres que pueden escrbir en las cajas, usaremos el parámetro maxlength:

<input type="text" name="nombre" value="Escribe aquí..." maxlength="5">


Tambien tenemos distintos tipos de input. Por ejemplo, para la fecha, o para indicar código hexadecimal de un color:

<input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">

<input type="color" name="color">

El código php en el value es para mostrar el día actual

Vamos a hacer una calculadora, a ver como queda:

Código en index.php:

<form action="tratarFormulario.php" method="get">
     <p>Calculadora</p>
     <input type="text" name="uno">
     <p>+</p>
     <input type="text" name="dos">
     <input type="submit" value="Ok">

</form>

Código en tratarFormulario.php:

<?php
     echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
     $resultado=$_GET['uno']+$_GET['dos'];
     echo ' es '.$resultado;

?>

De modo que el código completo, hasta el momento, sería la siguiente:

index.php

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
   
    <body>
        <form action="tratarFormulario.php" method="get">
            <p>Nombre</p>
            <input type="text" name="nombre" value="nombre..." maxlength="5">
            <input type="text" name="apellido" value="apellidos...">
            <input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">
            <input type="color" name="color">
           
            <p>Calculadora</p>
            <input type="text" name="uno">
            <p>+</p>
            <input type="text" name="dos">
            <input type="submit" value="Ok">
        </form>
       
    </body>

</html>

tratarFormulario.php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
        <?php
            echo 'Hola '.$_GET['nombre'].' '.$_GET['apellido'];
            echo 'Día seleccionado: '.$_GET['fecha'];
            echo ' ';
            echo 'Color '.$_GET['color'];
            echo '<br>';
            echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
            $resultado=$_GET['uno']+$_GET['dos'];
            echo ' es '.$resultado;
        ?>
    <body>
       
    </body>

</html>

Visualizando lo siguiente:

index.php

tratarFormulario.php


Ahora vamos a hacer una conexión al servidor a través de formularios.

Creamos un nuevo documento, introducirEnPHP.php.

En index.php, el código a escribir será el siguiente:


y en introducirEnPHP.php


Y comprobamos que nos da el mensaje de la consulta correcta


Los códigos completos de las prácticas de hoy son:

index.php

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
   
    <body>
        <form action="tratarFormulario.php" method="get">
            <p>Nombre</p>
            <input type="text" name="nombre" value="nombre..." maxlength="5">
            <input type="text" name="apellido" value="apellidos...">
            <input type="date" name="fecha" value="<?php echo date("Y-m-d");?>">
            <input type="color" name="color">
           
            <p>Calculadora</p>
            <input type="text" name="uno">
            <p>+</p>
            <input type="text" name="dos">
            <input type="submit" value="Ok">
        </form>
        <br><br>
        <form action="introducirEnPHP.php" method="get">
            Nombre:<input type="text" name="nombre" value="nombre.....">
            Edad: <input type="text" name="edad">
            <input type="submit">
        </form>
    </body>

</html>

tratarFormulario.php

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>::Formularios::</title>
    </head>
        <?php
            echo 'Hola '.$_GET['nombre'].' '.$_GET['apellido'];
            echo 'Día seleccionado: '.$_GET['fecha'];
            echo ' ';
            echo 'Color '.$_GET['color'];
            echo '<br>';
            echo 'La suma de '.$_GET['uno'].' y '.$_GET['dos'];
            $resultado=$_GET['uno']+$_GET['dos'];
            echo ' es '.$resultado;
        ?>
    <body>
       
    </body>
</html>


IntroducirEnPHP.php

<?php
    $servidor="localhost";
    $usuario="dam1";
    $password="dam1123";
    $bd="dam1_inazio";
       
    $conector=mysqli_connect($servidor,$usuario,$password,$bd);
       
    if (mysqli_connect_errno($conector)){
        echo "Fallo al conectar a MySQL:" . mysqli_connect_error();
    }
    else{
        echo "Conexión correcta";
        $nombre=$_GET['nombre'];
        $edad=$_GET['edad'];
        $consulta="INSERT INTO usuario VALUES (null,'$nombre',$edad)";
        if (mysqli_query($conector,$consulta))   {
            echo 'Consulta correcta';
        }
        else{
            echo 'Error en la consulta';
        }
    }

?>



0 comentarios:

Publicar un comentario