Unidad 8. Ejercicio: Formularios. Recibir datos de una imagen

En este ejercicio practicaremos cómo recibir las coordenadas de una imagen insertada en un campo de un formulario. Para realizar este ejercicio vamos a crear dos nuevos archivos form_imagen2.html y recibir_imagen2.php

Ejercicio 2: Recibir datos de una imagen

Para ver el funcionamiento final los programas que vamos a crear haz clic en este enlace http://www.aulawiki.info/curso_html/form_imagen2.html.
El programa form_imagen2.html presenta una imagen del logo de aulaClic y pide hacer clic sobre ella, como muestra esta imagen:
Al hacer clic en la imagen se llama al programa recibir_imagen2.php, este programa recibe las coordenadas (x,y) del punto donde se ha hecho clic, y con unos sencillos cálculos determina en que parte de la imagen se ha hecho clic (ratón, sombrero, palabra aula o palabra Clic). El resultado se muestra de esta forma:
Ahora vamos a ver el código de estos dos archivos. Desde el editor Brackets abre un archivo nuevo y copia el siguiente código. Guarda el archivo con el nombre form_imagen2.html, en la carpeta ejercicios/cursos-aulaclic que ya habíamos creado en ejercicios anteriores.
```
<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title> Formularios</title>
</head>
<body>
<h3>aulaClic. Formularios</h3>
<div >
    <form action="php/recibir_imagen2.php" method="post">
        <p> <input type="text" name="nombre" placeholder="Escribe tu nombre" required size="20" autofocus > </p>
        <p>Haga clic en una parte de la imagen:</p>
        <p> <input type="image" name="imagen" src="graficos/logo_aulaclic.svg" width="120"/> </p>
        <p> <input type="reset" value="Borrar" /> </p>
    </form>
</div>
</body>
</html>
```
La imagen logo_aulaclic.svg está en la carpeta de ejercicios/unidad-8/cursos-aulaclic/graficos.

Observa que este formulario no tiene un botón para enviarlo, en su lugar hemos puesto una etiqueta input type="image", al hacer clic en la imagen se enviará el formulario. Además se enviarán las coordenadas (x,y) del punto de la imagen donde hayamos hecho clic con el ratón. En el atributo action vemos que se arrancara el programa PHP: recibir_imagen2.php, que vemos a continuación

Abre un archivo nuevo y copia el siguiente código. Guarda el archivo con el nombre recibir_imagen2.php, en la carpeta ejercicios/cursos-aulaclic/php.

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Recibir datos </title>
    </head>

<body>
    <h3>Recibir datos del formulario.</h3>
    <p>
    <?php
    $alfanum = "/^[a-zA-Z\s]+$/";
    $numeros = "/^[[:digit:]]+$/";
    if (isset($_POST["nombre"])) {
      if  (!preg_match($alfanum, $_POST["nombre"])) {
          print "<p>Debes escribir tu nombre solo con letras.</p>";
      } 
      else { // nombre correcto 
        if  (!preg_match($numeros, $_POST["imagen_x"])) {
          print "<p>imagen_x erroneo: </p>";
        }
       else
         if  (!preg_match($numeros, $_POST["imagen_y"]))  {
            print "<p>imagen_y erroneo: </p>";
       }
       else {
          $x=$_POST['imagen_x'];
          $y=$_POST['imagen_y'];
          if ($x <= 0 || $y <= 0) {
            echo "Haz clic en la imagen.";
          }
         else {
             echo $_POST['nombre'];
             echo " has hecho clic ";
            if ($x < 30) {
               echo "en el ratón.";
            }
           else
              if ($x < 75) {
                 echo "en el sombrero.";
              } else  
                  if ($y < 30) {
                     echo "en la palabra <b>aula</b>.";
                  }
                  else {
                       echo "en la palabra <b>Clic</b>.";
                  }
                  echo "<br/><br/> Coordenadas $x, $y"; 
               }
            }
         }
    }
    ?>
  </p>
  <p><button type="button" onclick="location='../form_imagen2.html'">Volver</button></p>
  </body>
 </html>

Este programa recibe los datos del formulario, en este caso el campo nombre y las coordenadas (x,y).

Debemos saber que el programa recibe los datos del formulario utilizando $_GET o $_POST, según se utilice el método GET o POST,

Para entender el código puedes ver este vídeo que explica una versión muy parecida de este programa:

Básicamente lo que hace el programa es comprobar que en el campo nombre sólo hay letras y que las coordenadas (x,y) son números, luego según la posición de las coordenadas determina en que parte de la imagen se ha hecho clic.

Para probar este ejercicio, puesto que recibir_imagen2.php es un programa en lenguaje PHP se debe ejecutar en un servidor web, si no dispones de uno y tienes conocimientos de informática puedes instalarte uno gratuito en tu ordenador con utilidades como WAMP y XAMP. En otro caso puedes probar este código desde este enlace http://www.aulawiki.info/curso_html/form_imagen2.html.
También hay sitios web que ofrecen alojamiento gratuito como 000webhost pero conviene leer bien las condiciones de uso porque suelen incluid publicidad y otras limitaciones, aunque para hacer pruebas son bastante útilies.

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies