Aprendiendo PHP, parte 16: Introducción a formularios (métodos GET y POST)

Bueno, al iniciar estas publicaciones dije que PHP recibe peticiones y devuelve respuestas, ahora bien, esas peticiones pueden venir por distintos métodos. Estos métodos pueden ser dos GET o POST, en la actualidad también existen otros más, pero sólo veremos los nombrados.

Ambos métodos tienen la capacidad de venir acompañados de datos, de variables, por ejemplo en los formularios los usuarios llenan los campos y esos valores son enviados al servidor empaquetados y con un nombre para hacer referencia.

 

Método GET

Hasta ahora todos los ejemplos que vimos, entre petición y respuesta fueron a través de este método, GET. Este método tiene la capacidad de recuperar valores por la url. Si tuviésemos una url como ésta:

https://localhost/proyecto/index.php

Podríamos pasarle variable a través de ? (signo de interrogación) variable1=valor&variable2=valor. Por ejemplo:

https://localhost/proyecto/index.php?fruta=manzana&color=rojo

Y luego recuperar esos valores desde PHP con:

<?php
 $fruta = $_GET['fruta'];
 $color = $_GET['color'];
 echo "La fruta es $fruta y es de color $color";
?>

Lo que nos devolverá por pantalla:

La fruta es manzana y es de color rojo

Como se ve en el ejemplo a través de la variable global $_GET podemos recuperar los valores que se pasan en la url.

Ahora, para probar cómo funciona esto a través de los formularios vamos a hacer lo siguiente. Vamos a crear un proyecto nuevo para buscar empleados por legajos.

Así que vamos a crear una carpeta dentro de htdocs llamada buscar_legajos. Y dentro de esa carpeta crearemos dos archivos .php, uno llamado index.php y otro empleados.php.

Por empezar, como aun no hemos trabajado con bases de datos, por tanto el archivo empleados.php será un array con una lista de empleados:

<?php
 $empleados = array(
    '10001' => array(
       'nombre' => 'Alejandro',
       'apellido' => 'Calvo',
       'sector' => 'Diseño'
    ),
    '10002' => array(
       'nombre' => 'Ignacio',
       'apellido' => 'Celestino',
       'sector' => 'Programación'
    ),
    '10003' => array(
       'nombre' => 'Marina',
       'apellido' => 'Oliver',
       'sector' => 'DB Master'
    )
);
?>

Y dentro del archivo index.php vamos a crear un formulario con un campo para ingresar el número de legajo:

<!DOCTYPE>
<html>
 <head>
    <title> Buscar empleados </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <form method="get" action="index.php">
       <label> Legajo: </label>
       <input type="text" name="legajo" required="required" />
       <input type="submit" value="Buscar" />
    </form>
 </body>
</html>

Bueno, por empezar tendremos un código html con un formulario y dentro un campo para ingresar el legajo y un botón que al pulsarlo buscará un empleado con ese legajo. El formulario tendrá dos atributos, el primero, method, es justamente la forma en que hará la petición. Mientras que el segundo, action, es adónde irá la petición, en nuestro caso es la misma página donde se encuentra el formulario, pero podría ser cualquier otra.

Ahora, antes de imprimir el html deberíamos crear un código php en la cabecera que verifique si se está haciendo una búsqueda y de así serlo mostrar el resultado de la búsqueda:

<?php
//Soporta caracteres especiales como tildes, eñes, etcétera.
header('Content-Type: text/html; charset=utf-8');
//Carga el array con la lista de los empleados.
require 'empleados.php';
//Esta variable verifica si se está realizando una búsqueda.
$legajo = (isset($_GET['legajo'])) ? $_GET['legajo'] : null;
//Esta variable guardará el resultado de la búsqueda.
$empleado = null;
//Si existe un legajo, es porque se está realizando una búsqueda.
if ($legajo) {
   //Limpiamos los espacios en blanco que pudo haber dejado el usuario.
   $legajo = trim($legajo);
   //Busca que exista un empleado con ese legajo.
   if (isset($empleados[$legajo])) {
      //Guarda la posición con los datos del empleado.
      $empleado = $empleados[$legajo];
   }
}
?>

Bien, ahora vamos a analizar el código porque puede resultar confuso al principio:

header('Content-Type: text/html; charset=utf-8');

Esta es la cabecera para definir el tipo de codificación, servirá por ejemplo para imprimir caracteres especiales con PHP.

require 'empleados.php';

Importamos el array con los datos de los empleados para realizar la búsqueda.

$legajo = (isset($_GET['legajo'])) ? $_GET['legajo'] : null;

Verificamos si existe una búsqueda a través de la variable ‘legajo’ a través de la función isset(), si existe esa variable, osea si el usuario envió el formulario. Para eso utilizamos un operador ternario. El operador ternario es un if:

(condicion) ? si se cumple : si no se cumple

Como se ve en el ejemplo dentro de la variable se guardará el resultado de la condición. Si existe la variable ‘legajo’ guardará el valor de la misma, sino la dejará en null.

$empleado = null;

Creará una variable que por defecto será null, luego de realizar la búsqueda si se encuentra al empleado lo guardará en esta variable.

if ($legajo) {
   $legajo = trim($legajo);
   if (isset($empleados[$legajo])) {
      $empleado = $empleados[$legajo];
   }
}

Preguntamos si el legajo existe, osea si se ha enviado el formulario y finalmente verificamos si en el array de empleados existe una posición con ese legajo y de cumplirse la condición guardará esa posición en la variable $empleado.

Bien, sólo nos falta imprimir el resultado de la búsqueda en el código html:

<div>
   <?php
      if ($legajo) {
         if ($empleado) {
            echo "Nombre: {$empleado['nombre']} {$empleado['apellido']} - Sector: {$empleado['sector']}";
         } else {
            echo 'No existe un empleado con ese legajo.';
         }
      }
   ?>
 </div>

Aquí preguntamos si existe un legajo ingresado por el usuario con la variable $legajo, y de ser así mostramos el resultado de la búsqueda con la variable $empleado, osea si encontró el empleado dentro de ésta estarán los datos del mismo y serán mostrados por pantalla.

Entonces el código de index.php quedaría así:

<?php
//Soporta caracteres especiales como tildes, eñes, etcétera.
header('Content-Type: text/html; charset=utf-8');
//Carga el array con la lista de los empleados.
require 'empleados.php';
//Esta variable verifica si se está realizando una búsqueda.
$legajo = (isset($_GET['legajo'])) ? $_GET['legajo'] : null;
//Esta variable guardará el resultado de la búsqueda.
$empleado = null;
//Si existe un legajo, es porque se está realizando una búsqueda.
if ($legajo) {
   //Limpiamos los espacios en blanco que pudo haber dejado el usuario.
   $legajo = trim($legajo);
   //Busca que exista un empleado con ese legajo.
   if (isset($empleados[$legajo])) {
      //Guarda la posición con los datos del empleado.
      $empleado = $empleados[$legajo];
   }
}
?>
<!DOCTYPE>
<html>
 <head>
    <title> Buscar empleados </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <form method="get" action="index.php">
       <label> Legajo: </label>
       <input type="text" name="legajo" required="required" value="<?php echo $legajo ?>" />
       <input type="submit" value="Buscar" />
    </form>
    <div>
       <?php
          if ($legajo) {
             if ($empleado) {
                echo "Nombre: {$empleado['nombre']} {$empleado['apellido']} - Sector: {$empleado['sector']}";
             } else {
                echo 'No existe un empleado con ese legajo.';
             }
          }
       ?>
    </div>
 </body>
</html>

Ya podemos probar nuestro código yendo a:

https://localhost/buscar_legajos/

Y probar ingresando los valores 10001, 10002 y 10003 que son los que devuelve resultados.

Descargar ejemplo

 

Método POST

Ahora bien, si te has fijado cuando enviamos el formulario la página se recarga con la url y el name y valor del campo que enviamos, algo con este aspecto:

https://localhost/buscar_legajos/?legajo=10001

Esto es muy útil para un buscador, ya que luego el usuario puede copiar la url y pasársela a otro usuario y así mostrarle el resultado. Pero si por ejemplo debemos usar otro tipo de formulario, por ejemplo un login, entones no es buena idea que los datos que envía el usuario queden el nombre de usuario y la contraseña en la url, esto implica un error de seguridad, por tanto nosotros necesitamos ocultar esos datos. Para ello debemos recurrir al método POST.

En este caso vamos a crear un nuevo proyecto dentro de htdocs llamado login, que obviamente no pegará en una base de datos (que veremos más adelante) sino en una simulación de datos de nombre de usuario y contraseña.

Y ahora dentro de login vamos crear dos archivos, uno llamado index.php y otro llamado datos_usuarios.php.

Dento de datos_usuarios.php simplemente vamos a crear dos contantes una llamada USUARIO y contra CONTRASENA:

<?php
   define('USUARIO', 'pepito');
   define('CONTRASENA', '1234');
?>

Y dentro de index.php vamos a copiar este código html:

<!DOCTYPE>
<html>
 <head>
    <title> Inicio se sesión </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <form method="post" action="index.php">
       <label> Nombre de usuario: </label>
       <br />
       <input type="text" name="usuario" required="required" />
       <br />
       <label> Contraseña: </label>
       <br />
       <input type="password" name="contrasena" required="required" />
       <br />
       <input type="submit" value="Ingresar" />
 </form>
 </body>
</html>

Por empezar este formulario lo enviaremos mediante el método POST, en este caso, cuando la página se recargue con las variables usuario y contrasena y sus valores, estos datos estarán ocultos en la cabecera de la página y no se verán en la url, lo cual lo hace más seguro al proteger estos datos.

Ahora sólo nos falta agregar la cabecera PHP, para que cuando se envíe el formulario se verifique si el nombre de usuario y la contraseña son correctos:

<?php
//Importamos los datos de usuario con el nombre y la contraseña.
require_once 'datos_usuarios.php';
//Verifica si la petición viene por POST, osea si el usuario envió el formulario.
$por_post = ($_SERVER['REQUEST_METHOD'] == 'POST');
if ($por_post) {
   //Recupera los valores de los datos enviados por el usuario.
   $usuario = $_POST['usuario'];
   $contrasena = $_POST['contrasena'];
   //Verica si los datos ingresados corresponden al nombre de usuario y la contraseña.
   if ($usuario == USUARIO and $contrasena == CONTRASENA) {
      $login_correcto = true;
   } else {
      $login_correcto = false;
   }
}
?>

Ok, vamos a analizar el código:

require_once 'datos_usuarios.php';

Importamos el archivo donde está el nombre de usuario y la contraseña, para simular que lo está buscando de una base de datos, nada  complejo.

$por_post = ($_SERVER['REQUEST_METHOD'] == 'POST');

Esta línea nos permitirá saber si la petición del usuario ha venido por POST, lo cual significa que el usuario ha enviado el formulario. La variable globlal $_SERVER es un array que nos provee de información importante, si querés saber más a fondo de ésta, puede chequear el manual. En este caso, a través del índice ‘REQUEST_METHOD’ nosotros podemos saber si la petición ha venido por GET o por POST. Por tanto dentro de la variable $por_post se guardará true si se está intentando loguear o no el usuario.

$usuario = $_POST['usuario'];
$contrasena = $_POST['contrasena'];

Aquí simplemente guardamos en variables los valores que llegaron del usuario.

if ($usuario == USUARIO and $contrasena == CONTRASENA) {
   $login_correcto = true;
} else {
   $login_correcto = false;
}

Y aquí verificamos si los datos coinciden con el usuario y la contraseña, si es correcto guardará dentro de la variable $login_correcto true, sino será false.

Finalmente el código quedará así:

<?php
//Importamos los datos de usuario con el nombre y la contraseña.
require_once 'datos_usuarios.php';
//Verifica si la petición viene por POST, osea si el usuario envió el formulario.
$por_post = ($_SERVER['REQUEST_METHOD'] == 'POST');
if ($por_post) {
   //Recupera los valores de los datos enviados por el usuario.
   $usuario = $_POST['usuario'];
   $contrasena = $_POST['contrasena'];
   //Verica si los datos ingresados corresponden al nombre de usuario y la contraseña.
   if ($usuario == USUARIO and $contrasena == CONTRASENA) {
      $login_correcto = true;
   } else {
      $login_correcto = false;
   }
}
?>
<!DOCTYPE>
<html>
 <head>
    <title> Inicio se sesión </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <?php if ($por_post and $login_correcto): //Verifica si el usuario envió el formulario y el login es correcto. ?>
       <div> Bienvenido/a. </div>
    <?php else: ?>
       <form method="post" action="index.php">
          <label> Nombre de usuario: </label>
          <br />
          <input type="text" name="usuario" required="required" />
          <br />
          <label> Contraseña: </label>
          <br />
          <input type="password" name="contrasena" required="required" />
          <br />
          <input type="submit" value="Ingresar" />
          <?php if ($por_post and !$login_correcto): //Verifica si el usuario envió el formulario y el login es incorrecto. ?>
             <div> El usuario o la contraseña son incorrectos. </div>
          <?php endif; ?>
       </form>
    <?php endif; ?>
 </body>
</html>

Por empezar usaremos los condicionales de tipo tag, que son muy útiles para mezclar PHP con HTML. Habrá un condicional que verificará si el usuario ha enviado el usuario y si el nombre de usuario y la contraseña son correctos:

<?php if ($por_post and $login_correcto): ?>

De ser así mostrará un mensaje por pantalla:

<div> Bienvenido/a. </div>

De lo contrario mostrará el formulario y dentro del mismo que verificará si se ha enviado el formulario pero el nombre de usuario y la contraseña son incorrectos:

<?php if ($por_post and !$login_correcto): ?>

Descargar ejemplo

 

Anterior: Aprendiendo PHP, parte 15: Importar archivos

Siguiente: Aprendiendo PHP, parte 17: Elementos de formulario