En un concepto anterior habíamos visto como crear un archivo gráfico en forma dinámica y el envío del mismo al navegador que lo solicitó. Ahora veremos como crear el archivo de la imagen y su posterior incorporación en una página HTML.
Continuaremos con el problema del código de verificación, pero ahora lo incorporaremos en un formulario donde el operador debe tipear el número que está viendo. En una tercera página verificaremos si ingresó el mismo valor que se generó en forma aleatoria.
La primera página "pagina1.html" es el formulario (es un archivo HTML sin PHP):
<html>
<head>
<title>Problema</title>
</head>
<body>
<form action="pagina3.php" method="post">
Dígitos verificadores:<img src="pagina2.php">
<br>
Ingrese valor:
<input type="text" name="numero">
<br>
<input type="submit" value="Verificar">
</form>
</body>
</html>
Tengamos en cuenta que ésta es la página que se solicita inicialmente. Dentro de esta página, se incorpora una etiqueta HTML img para agregar una imagen a la página, pero la misma no es un archivo estático sino un archivo PHP que genera la imagen:
Dígitos verificadores:<img src="pagina2.php">
Tengamos en cuenta que la página que procesa el valor ingresado y el valor generado en forma aleatoria es la tercera página:
<form action="pagina3.php" method="post">
El segundo archivo "pagina2.php" es la imagen propiamente dicha:
<?php
$ancho=100;
$alto=30;
$imagen=imageCreate($ancho,$alto);
$amarillo=ImageColorAllocate($imagen,255,255,0);
ImageFill($imagen,0,0,$amarillo);
$rojo=ImageColorAllocate($imagen,255,0,0);
$valoraleatorio=rand(100000,999999);
session_start();
$_SESSION['numeroaleatorio']=$valoraleatorio;
ImageString($imagen,5,25,5,$valoraleatorio,$rojo);
for($c=0;$c<=5;$c++)
{
$x1=rand(0,$ancho);
$y1=rand(0,$alto);
$x2=rand(0,$ancho);
$y2=rand(0,$alto);
ImageLine($imagen,$x1,$y1,$x2,$y2,$rojo);
}
Header ("Content-type: image/jpeg");
ImageJPEG ($imagen);
ImageDestroy($imagen);
?>
El algoritmo es el mismo visto en un concepto anterior, la única salvedad es que necesitamos almacenar en una variable de sesión, el número aleatorio para poder compararlo en la página que procesa el formulario:
session_start(); $_SESSION['numeroaleatorio']=$valoraleatorio;
Por último el tercer archivo "pagina3.php":
<?php
session_start();
?>
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
if ($_SESSION['numeroaleatorio'] == $_REQUEST['numero'])
echo "Ingresó el valor correcto";
else
echo "Incorrecto";
?>
</body>
</html>
Lo primero que hacemos es llamar a la función que rescata las variables de sesión:
<?php session_start(); ?>
Disponemos un if para verificar si el valor ingresado en el formulario es el mismo que el valor almacenado en la variable de sesión:
if ($_SESSION['numeroaleatorio'] == $_REQUEST['numero'])
echo "Ingresó el valor correcto";
else
echo "Incorrecto";
Copiar el contenido de este cuadro de texto al VS Code y almacenarlo en la carpeta c:\xampp\htdocs con un nombre con extensión php.
luego abrir el navegador (Chrome, FireFox, IExplorer etc.) y en la barra de direcciones tipear:
http://localhost/pagina1.php (o el nombre del
archivo que le dió)
Confeccionar un formulario que pida ingresar la dirección de un sitio de internet y mediante un control de tipo select permita dar un puntaje a la misma (cargar los valores de 0 a 5). Luego, en la segunda página, imprimir el nombre del sitio y un gráfico creado en forma dinámica con el puntaje obtenido (hacer un círculo por cada punto).
Un poco de ayuda para este problema:
En el archivo "pagina2.php" debemos disponer la etiqueta HTML img para mostrar la imagen y debemos pasar a este archivo el valor que nos llegó del formulario, es decir, el puntaje seleccionado:
<html> <head> <title>Problema</title> </head> <body> <?php echo "La direccion: $_REQUEST[direccion] tiene"; ?> <img src="pagina3.php?puntos=<?php echo $_REQUEST['puntos'];?>"> </body> </html>
Por último, queda como actividad, dibujar tantos círculos como indica el parámetro puntos:
Recordemos que para recuperar el parámetro puntos lo accedemos mediante el vector asociativo $_REQUEST:
REQUEST['puntos']
Para dibujar los círculos rellenos debemos emplear la función:
imagefilledellipse ( <manejador de imagen>, <centro en x>,
<centro en y>, <ancho del elipse>,
<alto del elipse>,<manejador de color>)