martes, 7 de octubre de 2014

PHP (04) Lectura de datos desde WEB (08) Imágenes como submits

Muchas veces no querremos tener un botón como un submit, ni tan siquiera dándole, estilos css, si no que necesitamos un botón para que esto ocurra.
Afortunadamente, html tiene una opción para este tipo de eventos y es que dentro de los tipos de inputs existe el input tipo imagen.
Para poder utilizarlo se hace de la siguiente forma:
<input type="image" src="img/7.jpg" value="enviar">

Podemos observar que el type es una imagen y que aparece un atributo src donde se coloca la url de la misma, también se le pueden colocar atributos width, height, class, id... dándonos un resultado muy agradable.

Pero supongamos que necesitamos un pequeño formulario con diversas opciones, como por ejemplo para traducir una web. (Aunque abordaremos este caso a través de sesiones más adelante, ya podemos ir viendo como vamos a trabajar, de hecho este sistema junto con la creación de web a traves de funciones, sirve para poder hacer una web con una única página a diferentes idiomas.)

Lo primero que necesitamos es crear un directorio e introducir nuestras imágenes, una vez tenemos esto, vamos a dar la opción de que el usuario pueda escoger entre inglés y español, poniendo unas banderitas, que queda mucho mejor que con palabras.

En este caso vamos a hacerlo según el siguiente código (una vez más insisto en que la inclusión del css en el código es por motivos didácticos y que debe de estar en un archivo externo):
<html>
<head>
 <style type="text/css">
  #idioma1{
   background-image: url(img/7.jpg);
   width: 38px; 
   height: 23px; 
   border-width: 0;
   color: rgba(0, 0, 0, 0.0);
  }
  #idioma2{
   background-image: url(img/23.jpg);
   width: 38px; 
   height: 23px; 
   border-width: 0;
   color: rgba(0, 0, 0, 0.0);
  }
 </style>
</head>
<body>
 <form method="post" action="miphp.php" >
  Elija idioma:
  <input id="idioma1" type="submit" name="idioma" value="spanish">
  <input id="idioma2" type="submit" name="idioma" value="english">
 </form>
</body>
</html>

Aquí hay muchas cosas extrañas, pero empecemos por el formulario, donde hay dos submit, que recogen los dos tipos de idiomas en sus values.
Como se puede observar, cada uno de los dos tiene una id diferente, que nos va a servir para el css en el cual anulamos todos los estilos del botón:
  • añadimos una imagen de background por medio de la url (está será la imagen que veremos)
  • le añadimos un tamaño, en este caso el tamaño de la banderita para que se vea correctamente
  • anulamos el borde del botón para que el límite de la bandera sea el del botón
  • añadimos un color rgba donde la transparencia es total para que no aparezca absolutamente nada de nuestros valores.
En este momento, cada vez que pulsemos en una de las banderas serán diferentes submits dentro del mismo formulario, pasando valores distintos.

De momento tan solo hemos estado en la parte del cliente, pero ahora vamos a ver que ocurre cuando se envian los datos a nuestro archivo php:
<html>
<head>
</head>
<body>
 <?php
  $idioma ='';
  if (isset($_REQUEST['idioma'])){
   $idioma=$_REQUEST['idioma'];
  }
  echo '<h2>Respuesta de PHP</h2>';
  if ($idioma == 'english'){
   echo '<h2>Hello!!!</h2>';
   echo 'Here you enter your code and function calls';
  } else if ($idioma == 'spanish'){
   echo '<h2>Hola!!!</h2>';
   echo 'Aquí debe introducir su código y llamadas a funciones';
  }
 ?>
</body>
</html>

Lo primero que hacemos es guardar en una variable la respuesta de nuestra petición y una vez hecho esto se compara con cual de las dos peticiones es la correcta, ejecutando un código u otro, pudiendo tener la web ahí traducida o llamar a las distintas funciones.

Si esto lo combinamos con las sesiones (las veremos pronto) se pueden hacer sitios webs en diferentes idiomas, pero el concepto de este articulo es poder utilizar imágenes como botones y que estos funcionen, incluso mostrando diferentes opciones, según el botón pulsado.

No hay comentarios:

Publicar un comentario