Códice | Entradas sobre «php»

Mastermind en PHP

JavGuerra — Sat, 06 Aug 2022 00:00:00 GMT

Etiquetas: #web, #código, #php, #juego, #formularios

Este juego interactúa con el usuario y pasa parámetros mediante POST a través de un formulario. El reto es hacerlo de tal forma que esos parámetros sean recibidos y procesados en la misma página que los envió, por lo tanto, la página debe contener toda la operativa de los distintos escenarios posibles del juego: al iniciar el juego, tras una tirada, si se producen errores, si se termina el juego… Veamos cómo.

El juego

Mastermind es un juego simple. Se trata de adivinar un número de 4 dígitos distintos (no repetidos). Cada dígito tendrá un valor entre 0 y 9. A través de un formulario, introducimos los cuatro dígitos. Al enviar el formulario recibiremos la respuesta de cuantos dígitos hemos acertado, o si hemos acertado el número completo con los dígitos en su orden correcto.

Si un dígito está en su posición correcta dentro del número, se contabilizará como un «muerto». Con cuatro muertos ganamos el juego, es decir, habremos acertado el número.

Si un dígito forma parte del número de cuatro dígitos, pero su posición en él no es la correcta, se contabilizará como un «herido». Esto nos permitirá sospechar que vamos por buen camino, y podremos probar nuevas combinaciones.

Para enviar el formulario debemos completar las casillas con los cuatro dígitos.

Para iniciar otra partida, ya sea a mitad de jugada o tras haber ganado, es suficiente con recargar la página sin enviar el formulario.

Escenarios

Dado que tenemos un juego en una SPA (Simple Page Aplication), la lógica del juego tiene que estar contenida en ella al completo, y mediante condicionales, actuar de una forma u otra según sea el caso. Estos casos son:

La primera vez que accedemos a la página del juego.
La recepción de datos y comprobaciones tras una tirada.
Cuando el juego ha terminado: Se ha averiguado el número.
Enviar datos y comprobar si hay errores en el formulario.

Puedes ver el código del juego completo al final de esta entrada.

Veamos cada escenario y su correspondiente código. Obviaré en esta entrada los estilos CSS que son incluidos en el head de la página. Pero antes, vamos con el formulario.

Formulario

El formulario es simple. Emplea una serie de campos ocultos, que veremos después, para pasar la información recabada del formulario (los 4 dígitos) y de las tiradas anteriores en el juego. Su estructura será:

<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    // Campos ocultos
    // Campos de formulario (4 input)
    // Comprobaciones de error de cada campo input
    <input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Con <?php echo $_SERVER['PHP_SELF'];?> indico la dirección donde debo enviar (mediante POST) el resultado del formulario, en este caso la misma página (PHP_SELF), esté en la ruta que esté.

Con name="enviar" podré indicar si estoy enviando los datos del formulario. Empleando el botón submit tengo esa garantía, ya que es el medio de que dispongo (el botón) para hacer justamente el envío.

1. Empezando a jugar

Empiezo averiguando si he recibido algún dato del formulario. Si no es así es que estamos ante la primera tirada.

$enviado = isset($_POST['enviar']);
$muertos = 0;
$mostrarNum = true;

if ($enviado) {
    // Procesar los datos recibidos del formulario
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
    $numero = range(0, 9);
    shuffle($numero);
    $numero = array_slice($numero, 0, 4);
    $numero = implode($numero);
}

Con isset($_POST['enviar']) obtengo true si he recibido datos del formulario (el valor asociado al botón submit) o false en caso contrario. La variable $enviado contendrá ese valor booleano que determinará que rumbo tomará el programa. $_POST['enviar'] nos lo dirá si contiene el valor "Enviar" recibido del formulario (value="Enviar") o no.

Inicializo la variable $muertos que contendrá el número de dígitos acertados en su posición correcta. Al principio será 0, porque aún no hay aciertos. Usaré esta variable como condicional más adelante.

La variable $mostrarNum es un swich que me provee de una característica del juego, la de mostrar o no un interrogante en pantalla. Al pasar con el ratón sobre este interrogante puedo comprobar el número que estoy intentando acertar. Esta opción se implementó para hacer comprobaciones durante el desarrollo, pero ha quedado como una característica. Pon la variable en false si sientes que vas a tener la tentación de hacer trampas…

Esta ayuda se mostrará en el programa con la siguiente línea:

if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";

Con la comprobación if ($enviado), como decía, discrimino si debo procesar los datos recibidos del formulario o por el contrario debo inicializar el juego. El número de cuatro dígitos a averiguar es lo que necesito en este caso. Para obtenerlo al azar, empleo lo siguiente:

$numero = range(0, 9);
shuffle($numero);
$numero = array_slice($numero, 0, 4);
$numero = implode($numero);

En el arreglo $numero introduzco los dígitos del 0 al 9 con range(), y luego los mezclo (altero su posición en el arreglo) con shuffle(). Con array_slice() recorto el arreglo para que contenga sólo los cuatro primeros elementos, osea, los cuatro dígitos al azar. Finalmente, con implode() concateno esos cuatro elementos en uno, siendo ahora $numero una cadena de cuatro caracteres.

Podría haber obtenido un número al azar entre 0 y 9999 con rand() o incluso con mt_rand(), pero esto conllevaría conversiones de número a cadena, rellenado de 0 a la izquierda si el número obtenido al azar es menor que 1000, y comprobar que cada dígito sea distinto. Esta solución propuesta es más divertida e imaginativa, ¿verdad?

2. Recibiendo datos del formulario

Desde el formulario recibimos los siguientes valores:

El número que estamos intentando averiguar para poder hacer comprobaciones
Los cuatro dígitos que hemos introducido en el formulario.
El arreglo con las tiradas que hemos realizado hasta ahora. En la primera tirada no contendrá nada.

Veamos cómo recuperar y procesar los datos recibidos:

if ($enviado) {
    // Recuperar número
    if (isset($_POST['numero'])) $numero = $_POST['numero'];
    // Recuperar dígitos
    if (isset($_POST['d1'])) $d1 = $_POST['d1'];
    if (isset($_POST['d2'])) $d2 = $_POST['d2'];
    if (isset($_POST['d3'])) $d3 = $_POST['d3'];
    if (isset($_POST['d4'])) $d4 = $_POST['d4'];
    // Recuperar $tiradas[]
    if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

        $numEnviado = $d1 . $d2 . $d3 . $d4;
        
        // Comprobar datos entrantes
        $muertos = numMuertos($numero, $numEnviado);
        $heridos = numHeridos($numero, $numEnviado, $muertos);

        // Añadir tirada
        $tiradas[] = array($numEnviado, $muertos, $heridos);
    }
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
}

Si cierta variable está presente, obtengo su valor. Por ejemplo con:

if (isset($_POST['numero'])) $numero = $_POST['numero'];

Cuando he recuperado el resto de valores, hago una comprobación básica por cada uno de los 4 dígitos recibidos con la función validaEntero(). Esta función hace lo siguiente:

// Validar un número entero entre 0 y 9, ambos inclusive
function validaEntero($numero) {
    return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
}

Devuelve true o false si el dígito que le pasamos es un número entre 0 y 9 o no.

De esta forma, podemos usarlo para tratar y obtener el número enviado:

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {
        $numEnviado = $d1 . $d2 . $d3 . $d4;
        // Comprobar datos entrantes
        // Añadir tirada
    }

Si los cuatro dígitos validan, en la cadena $numEnviado guardo el número de cuatro dígitos que estoy probando en esta jugada.

Compruebo a continuación el total de muertos y heridos a partir de ese dato.

// Comprobar datos entrantes
$muertos = numMuertos($numero, $numEnviado);
$heridos = numHeridos($numero, $numEnviado, $muertos);

Las funciones numMuertos() y numHeridos() calcularán los aciertos:

// Calcular el número de muertos
function numMuertos($numero, $numEnviado) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
    }
    return $contador;
}        

// Calcular el número de heridos
function numHeridos($numero, $numEnviado, $muertos) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
    }
    return $contador - $muertos;
}

La función numMuertos() comparará los valores de cada posición de los caracteres de cada una de las dos cadenas, el número que intentamos averiguar y el numero que hemos enviado por el formulario. Con cada coincidencia,el $contador se incrementa en 1. La función devuelve el número de coincidencias exactas, osea, el número de muertos.

La función numHeridos() por otra parte, recorre los caracteres del número que hemos enviado y comprueba si están contenido en el número que debemos acertar. Si es así el $contador se incrementa en 1. La función devuelve la diferencia entre el número de heridos y el número de muertos, ya que los aciertos en esta función no discriminan si los valores coincidentes están en su posición correcta o no, y los contabiliza como heridos, cuando puede que realmente estos valores sean muertos, y estos ya estaban contabilizados en la variable $muertos.

Cuando tenemos los datos, ya podemos añadir el resultado a la lista de tiradas:

// Añadir tirada
$tiradas[] = array($numEnviado, $muertos, $heridos);

El arreglo $tiradas[] contendrá un arreglo por cada tirada que almacenará el número que enviamos, el numero de muertos y el número de heridos obtenido.

3. ¿El juego terminó?

Pero ¿habremos acertado el número? Vamos a comprobarlo.

if ($enviado && $muertos == 4) { 
    // Partida finalizada
    echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";
} else {
    // Seguir jugando
    if (isset($tiradas)) {
    foreach ($tiradas as $indice => $valor) {
        echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
        }
    }

// Formulario

}

Si tengo cuatro muertos, ¡he ganado!. habré acertado el número en una serie de intentos que muestro con count($tiradas). En caso contrario, sigo jugando.

Si hay tiradas if (isset($tiradas)) muestro los datos de cada una de ellas con un foreach: número introducido, muertos y heridos de cada tirada, y a continuación muestro el formulario para seguir intentándolo.

4. El formulario completo y sus comprobaciones

Aquí el código que iré desgranado y que va dentro de la comprobación anterior, en el else, en caso de que no acertara el número:

<h3>Introduce tu número:</h3>
<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

    <!-- Campos ocultos -->
    <?php
        echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

        if ($enviado && !empty($tiradas)) {
            foreach ($tiradas as $indice => $valor){
                echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
        }}
    ?>

    <!-- Dígito 1 -->
    <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 2 -->
    <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 3 -->
    <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 4 -->
    <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Enviar -->
    &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Ya expliqué, más arriba, los parámetros de form y el envío del formulario. Entendido esto, el formulario tiene tres cuestiones de interés.

Preparar los datos que se enviarán en el formulario, incluyendo los que llegaron a través del anterior formulario.
Recibir los datos en los cuatro campos input para ser enviados. En cada campo deberá estar el valor de cada dígito recibido del formulario anterior. Las características de HTML se ocupan de que los valores introducidos estén en rango antes de enviarse, pero aún así podemos recibir datos alterados por POST, luego:
Comprobar que los datos recibidos sean los correctos, y si no, reseñar el error.

4.1. Campos ocultos

En esta parte del formulario, completo los distintos campos ocultos con información necesaria para la siguiente tirada: el número a acertar, y cada uno de los arreglos de cada tirada anterior, conteniendo el número que enviamos en la tirada, el número de muertos y el número de heridos.

<!-- Campos ocultos -->
<?php
    echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

    if ($enviado && !empty($tiradas)) {
        foreach ($tiradas as $indice => $valor){
            echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
    }}
?>

Véase que cada tirada debe incluirse con sus correspondientes valores como input ocultos por separado en el cuerpo de la página, ya que no podemos pasar un arreglo como valor de un campo de un formulario. Afortunadamente, sí podemos recibir estas tiradas como un arreglo para tratarlas. Recuerda, como vimos antes:

// Recuperar $tiradas[]
if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

4.2. Recibir los datos de los input

El código para los cuatro campos input es el siguiente:

<!-- Dígito 1 -->
<input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
<?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 2 -->
<input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
<?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 3 -->
<input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
<?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 4 -->
<input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
<?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

Mediante este código, repetido en cada input (convenientemente modificado), muestro el valor de cada dígito recibido de la jugada anterior, si esta se produjo. Sino no muestro nada.

value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>"

4.3. Si hay error en los datos recibidos, resaltarlo

Para asegurarnos que los dígitos que recibimos del formulario anterior son correctos, es necesario comprobarlos de nuevo del lado del servidor (ahora con PHP), aunque ya lo hiciéramos con las funcionalidades de HTML. Esto garantiza que los datos no fueron alterados en el envío mediante, tal vez, una modificación de la fuente HTML a través de las herramientas del navegador.

if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n";

Con este código tras cada campo, señalaremos aquellos campos input que contengan un error, en este caso añadiendo una flecha (←) y pintándola de color rojo con la clase CSS alerta.

Completado el formulario, con sus campos ocultos y los datos de todos los input, -que son campos obligatorios y tienen rangos numéricos definidos-, ya podemos enviarlo (botón sent) a la misma página para ser procesados tal como se indicó en el punto 2 de esta entrada, y así hasta acertar el número o hasta que recarguemos la página, caso en el que empezaremos de cero, en el punto 1 de esta entrada.

El programa completo

El HTML con el código PHP completo es el siguiente:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Mastermind</title>
    <meta name="description" content="Mastermind" />
    <meta name="keywords" content="DWES, DAW, Juego, Tarea 2" />
    <meta name="author" content="Javier Guerra" />
    <meta name="license" content="CC-BY" />
    <meta name="date" content="2019-01-31" scheme="YYYY-MM-DD" />
    <style>
        html,body{padding:0;margin:0;width:100%;height:100%;font-family:sans-serif;font-weight:300;background-color:#efeffb}.contenedor{margin:25px auto;padding:10px 20px 20px;width:100%;max-width:100%;border-radius:10px;background-color:#FFF;-webkit-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);-moz-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10)}@media(min-width:1023px){.contenedor{padding:20px 30px 30px;width:67%}}@media(min-width:1215px){.contenedor{padding:30px 40px 40px;width:50%}}#numero{display:block;text-align:right;height:0}h1,h2{margin-top:0;margin-bottom:5px;color:#1883ba}h3{margin-top:10px;margin-bottom:0;color:#1883ba}p{margin-top:5px;margin-bottom:5px}hr{border:0;margin:0;height:1px;background-image:linear-gradient(to right,rgba(0,0,0,0.50),rgba(0,0,0,0))}.campo,.boton{margin-top:5px;padding:5px;font-weight:600;font-size:16px;border-radius:5px;border:2px solid #1883ba;color:#1883ba}.campo{width:64px}.boton{width:128px;text-decoration:none;color:#fff;background-color:#1883ba}.boton:hover{color:#1883ba;background-color:#efeffb}#autor{display:block;text-align:center;font-size:small;margin-bottom:25px}.alerta{color:red}
    </style>
</head>

<body>
    <div class="contenedor">

        <?php
        
        $enviado = isset($_POST['enviar']);
        $muertos = 0;
        $mostrarNum = true;
        
        // Calcular el número de muertos
        function numMuertos($numero, $numEnviado) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
            }
            return $contador;
        }        
        
        // Calcular el número de heridos
        function numHeridos($numero, $numEnviado, $muertos) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
            }
            return $contador - $muertos;
        }
        
        // Validar un número entero entre 0 y 9, ambos inclusive
        function validaEntero($numero) {
            return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
        }

         
        if ($enviado) {

            // Recuperar número
            if (isset($_POST['numero'])) $numero = $_POST['numero'];
            // Recuperar dígitos
            if (isset($_POST['d1'])) $d1 = $_POST['d1'];
            if (isset($_POST['d2'])) $d2 = $_POST['d2'];
            if (isset($_POST['d3'])) $d3 = $_POST['d3'];
            if (isset($_POST['d4'])) $d4 = $_POST['d4'];
            // Recuperar $tiradas[]
            if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

            if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

                $numEnviado = $d1 . $d2 . $d3 . $d4;
                
                // Comprobar datos entrantes
                $muertos = numMuertos($numero, $numEnviado);
                $heridos = numHeridos($numero, $numEnviado, $muertos);

                // Añadir tirada
                $tiradas[] = array($numEnviado, $muertos, $heridos);
            }

        } else {

            // Generar un número al azar de cuatro dígitos no repetidos
            $numero = range(0, 9);
            shuffle($numero);
            $numero = array_slice($numero, 0, 4);
            $numero = implode($numero);

        }
        

        if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";
        echo "\t\t" . "<!-- Encabezado -->\n";
        echo <<< CADENA
        <h1><svg width=24 height=24>
        <circle cx=6 cy=6 r=6 fill="red" />
        <circle cx=18 cy=6 r=6 fill="yellow" />
        <circle cx=6 cy=18 r=6 fill="yellow" />
        <circle cx=18 cy=18 r=6 fill="lawngreen" />
        </svg> Mastermind</h1>
        <h2>El juego de los muertos y heridos</h2>\n
         <!-- Jugadas -->
        <br />
        <hr />\n
CADENA;
        
        if ($enviado && $muertos == 4) { 
            
            // Partida finalizada
            echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";

        } else {

        // Seguir jugando

        if (isset($tiradas)) {
        foreach ($tiradas as $indice => $valor) {
            echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
            }
        }

        echo "\t\t<hr />\n\t\t<br />\n"
        ?>

        <!-- Formulario -->
        <h3>Introduce tu número:</h3>
        <form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

            <!-- Campos ocultos -->
            <?php
                echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

                if ($enviado && !empty($tiradas)) {
                    foreach ($tiradas as $indice => $valor){
                        echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
                }}
            ?>

            <!-- Dígito 1 -->
            <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 2 -->
            <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 3 -->
            <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 4 -->
            <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Enviar -->
            &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />

        </form>

        <?php } ?>

    </div>
    <span id="autor">2019 (CC-BY) Javier Guerra</span>
</body>

</html>

Enlaces

Modo oscuro en Laravel

JavGuerra — Tue, 16 Aug 2022 00:00:00 GMT

Etiquetas: #laravel, #php, #tema, #css, #javascript, #alpine.js, #tailwind

Basándome en Laravel Jetstream con Livewire, que también incluye Alpine.js y TailwindCSS, en esta entrada muestro como implementar el modo oscuro en nuestras aplicaciones.

El modo oscuro

Cada vez es más frecuente que las aplicaciones se desarrollen pensando en implementar un modo oscuro (dark mode) que permita descasar la vista del usuario con colores más apagados. La posibilidad de implementar estos modos con los frameworks de CSS como Tailwindcss han ayudado a que esto sea así.

Básicamente, el modo oscuro de Tailwindcss consiste en implementar clases con el prefijo dark: delante. Ej.:

<div class="bg-white dark:bg-black">

Esto cambiará el fondo de nuestra página si el modo oscuro está activo.

Para activarlo, es suficiente con indicarlo añadiendo la clase dark en la etiqueta <html>:

<html class="dark">

Mediante JavaScript podemos añadir o quitar esta clase y conseguir así que nuestra aplicación cambie el fondo del ejemplo anterior:

document.documentElement.classList.add('dark');
document.documentElement.classList.remove('dark')

El document.documentElement hace referencia al elemento raíz del documento, en este caso, la etiqueta <html>.

Pasos

Para poder mostrar el modo correctamente y cambiar de modo de forma interactiva, debemos configurar Tailwind en Laravel, necesitaremos un interruptor (switch) en nuestra aplicación, y querremos también guardar nuestra opción del tema elegido para que se muestre correctamente la próxima vez que accedamos a la aplicación. para esto último me voy a servir de local.Storage. Esto implica lo siguiente:

Indicar a Tailwind que debe usar el cambio de modo oscuro manual.
Comprobar el modo correspondiente al inicio en local.Storage.
Guardar el tema la primera vez comprobando el modo del sistema al inicio.
Mostrar los botones para cambiar de modo.
Cambiar entre modo claro y modo oscuro y viceversa.

Indicar a Tailwind que debe usar el cambio de modo oscuro manual

Por defecto, Tailwindcss en Laravel está preparado para implementar el tema de las preferencias de modo en el sistema operativo. Si quiero cambiar de modo manualmente (switch) en lugar de depender de la preferencia del sistema, debo indicarlo en el fichero tailwind.config.js mediante darkMode: 'class':

module.exports = {
  darkMode: 'class',
  // ...
}

Ahora, en vez de escuchar las preferencias de prefers-color-scheme del CSS, Tailwind usará el modo oscuro sólo si este está indicado en ` sin tomar en cuenta las preferencias del sistema.

Comprobar el modo correspondiente al inicio en local.Storage

Cuando elegimos uno de los dos modos, ya sea el modo claro o el modo oscuro para nuestra aplicación, podemos guardarlo en local.Storage para así recuperarlo la siguiente vez que abramos nuestra aplicación. Podemos guardar true o 1 para indicar que el modo oscuro está activo o bien false o 0 para indicar lo contrario. En mi caso usaré 1 y 0.

En el siguiente código en javascript compruebo el valor de localStorage.dark, y en función de su contenido, añado o quito la clase darka la etiqueta <html>.

if (localStorage.dark == 1) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}

Tener este dato guardado nos permite, además de cambiar de modo, mostrar el icono correcto para intercambiar de modo. Pongamos que usamos un icono de media Luna para indicar el cambio al modo oscuro y un icono de Sol para indicar el cambio al modo claro. Si iniciamos la aplicación en modo oscuro, el icono a mostrar debe ser el Sol, y al contrario si iniciamos en el modo claro.

El lugar adecuado para este código es el fichero en la ruta /resources/js/app.js que es llamado desde el fichero en la ruta /resources/views/layouts/app.blade.phppero dejándolo en app.jsse produce un molesto efecto de pestañeo (flicker) que nos muestra primero la página en modo claro, y seguidamente hace el cambio al modo oscuro. Así pues, lo incluyo en el fichero app.blade.phpen el head debajo del title pero antes de los links, de la siguiente forma:

<script>
    if (localStorage.dark == 1) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
</script>

Guardar el tema la primera vez comprobando el modo del sistema al inicio

La primera vez que abrimos nuestra aplicación no tenemos guardado ningún valor en local.Storage, así que conviene guardar el valor en función de algún criterio. Por defecto podría indicar que le modo oscuro está desactivado, pero ya que tengo la opción de conocer cuál es el tema del sistema operativo, ¿por qué no aprovecharlo? el siguiente código completa esta opción:

<script>
    if (localStorage.dark == 1 || (!('dark' in localStorage)
    && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        localStorage.dark = 1;
        document.documentElement.classList.add('dark');
    } else {
        localStorage.dark = 0;
        document.documentElement.classList.remove('dark');
    }
</script>

Si existe el valor dark en local.Storage, o si no existe pero las preferencias del sistema prefers-color-scheme indican que tenemos activado el modo oscuro, entonces guardo en local.Storage el valor de dark = 1 y añado la clase dark a la etiqueta <html>. En caso contrario, guardo el valor dark = 0 en local.Storage y quito la clase dark de la etiqueta <html> ya que no tendremos activo el modo oscuro previamente, ni en local.Storage ni en el sistema operativo.

Mostrar los botones para cambiar de modo

En esta parte vamos a ver cómo usar Alpine.js para mostrar u ocultar un botón en vez de otro. el siguiente código debemos incluirlo en el fichero en la ruta /resources/views/navigation-menu-blade.php que contiene el menú en la parte superior del tema de la aplicación que trae por defecto Laravel Jetstream. Debemos incluirlo además dos veces, una para el modo responsive y otra para el modo normal.

<!-- Selector de tema oscuro -->
<div class="mr-2">
    <svg id="moon" class="setMode h-4 w-4 text-gray-400 hover:text-gray-500 cursor-pointer" fill="none" @click="toggle" :class="{'block': !show, 'hidden': show}" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
    <svg id="sun" class="setMode h-5 w-5 text-yellow-200 hover:text-yellow-300 cursor-pointer" fill="none" @click="toggle" :class="{'hidden': !show, 'block': show}" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
</div>

el <div> contiene dos SVG que corresponden a los iconos de la Luna y el Sol, pero incluyen algunas etiquetas de Alpine.js.

Con :class="{'block': !show, 'hidden': show} se mostrará u ocultará el SVG en función del valor de la variable show. Para definir su valor inicial, en la etiqueta <nav> de la línea 1, incluyo:

x-data="{ open: false, show: localStorage.dark == 1 ? true: false, toggle() { this.show = !this.show } }"

Con x-data inicializo variables. Lo hago pasando un objeto JavaScript con algunos valores. En este caso, el open: false del principio ya estaba ahí, pues laravel lo usa para desplegar o no el menú de usuario. Veamos el resto.

Con show: localStorage.dark == 1 ? true: false indico el valor de show en función de lo que indica local.Storage. Si local.Storage es 1 entonces show será true, y se mostrará el icono del Sol, según indica {'hidden': !show, 'block': show} del segundo SVG, ('hidden' false, 'block' true).

Para saber más sobre la directiva :class, consultar: x-bind en Tailwind.js.

Con la directiva @click="toggle" llamo a la función toggle() { this.show = !this.show } definida en el x-data cuando se hace clic sobre el icono. Esto sólo cambiará el icono haciendo que la variable show alterne su valor entre true y false.

Cambiar entre modo claro y modo oscuro y viceversa

Hemos visto cómo cambiar entre el icono para el modo claro y oscuro y viceversa, pero lo que queremos es que se cambie también el modo en toda la aplicación. Para ello debemos gestionar eventos asociados a los iconos de tal forma que al hacer clic en ellos no sólo cambien el icono sino que añadan o quiten la etiqueta dark del <html> y de esta forma hacer el cambio de modo efectivo. para conseguirlo, incluyo el siguiente código en el fichero en la ruta /resources/js/app.js:

document.querySelectorAll(".setMode").forEach(item =>
item.addEventListener("click", () => {
        if (localStorage.dark == 1) {
            localStorage.dark = 0;
            document.documentElement.classList.remove('dark');
        } else {
            localStorage.dark = 1;
            document.documentElement.classList.add('dark');
        }
    })
)

Con querySelectorAll(".setMode") busco todas las clases setMode en la página. De esta forma localizo a todos los SVG que están implicados con los iconos de cambio de modo (ver que cada SVG incluye class="setMode ...), y a cada uno de ellos le añado un evento click de tal forma que, al hacer clic sobre estos iconos, realice la siguiente comprobación: Si el valor de localStorage.dark == 1 guardar el valor 0 en local.Storage y quitar el modo oscuro con document.documentElement.classList.remove('dark'). en caso contrario, guardar el valor 1 en local.Storage y poner el modo oscuro con document.documentElement.classList.add('dark').

Guarda todo y no olvides ejecutar npm run dev desde el terminal para que los cambios funciones correctamente.

Enlaces

Docker LAMP

JavGuerra — Wed, 11 Sep 2024 00:00:00 GMT

Etiquetas: #bbdd, #mysql, #php, #docker, #servidor, #apache, #programación, #internet

Entre las herramientas de desarrollo web más comunes no falta el entorno de ejecución. Se hace lento desplegar los cambios al servidor con cada modificación del código que queremos probar. Para evitar esto se creó LAMP, que es una combinación de Linux, Apache, MySQL (o MariaDB) y PHP que permite que se puedan ejecutar aplicaciones web en local. Este artículo pretende mostrar cómo se puede instalar y ejecutar este entorno de desarrollo web en un sistema Linux usando Docker.

La principal ventaja de usar Docker es la de poder contar en el desarrollo con una infraestructura análoga a la del despliegue, con el mismo versionado y configuraciones de los servicios.

Los contenedores son unidades ligeras y portátiles que empaquetan el código y todas sus dependencias para ejecutarse de forma independiente en cualquier sistema que soporte Docker.

El lector debe conocer Docker para seguir correctamente este artículo, no obstante, siguiendo los pasos indicados aquí se podrá levantar un entorno de desarrollo web LAMP en un sistema Linux sin mayor inconveniente.

Instalación de Docker y Docker Compose

Será necesario tener instalado Docker en el sistema para poder ejecutar el entorno de desarrollo web.

Junto con Docker, vamos a instalar Docker Compose, una herramienta que permite ejecutar varios servicios de Docker a la vez.

Una vez tengamos ambos instalados, necesitaremos crear un fichero de configuración llamado docker-compose.yml que contendrá la configuración de los servicios que se va a desplegar, y accesoriamente, un fichero Dockerfile que contendrá las configuraciones comple,entarias necesarias.

Por último, veremos como ejecutar y parar el entorno de desarrollo web.

Docker

Para instalar Docker, necesitaremos cumplir con algunas dependencias:

sudo apt install apt-transport-https ca-certificates curl gnupg lsb-release software-properties-common

Podemos seguir la documentación oficial o usar el meta-paquete docker-ce, la última versión de Docker:

sudo apt-get install docker-io

Posteriormente se añade nuestro usuario al grupo docker. Esto nos permitirá ejecutar comandos de Docker sin necesidad de tener permisos de superusuario:

sudo usermod -aG docker $USER

Una vez instalado, se puede comprobar que se está ejecutando Docker usando el siguiente comando:

docker --version

Docker Compose

Para instalar Docker Compose se puede usar el siguiente comando:

sudo apt install docker-compose

Luego se puede comprobar que se está ejecutando Docker Compose usando el siguiente comando:

docker-compose --version

Ya tenemos todo lo necesario para instalar el entorno de desarrollo web LAMP.

Stack LAMP con Docker

Para facilitar su despliegue, uso un fichero llamado docker-compose.yml que contiene la configuración de los servicios que se va a desplegar.

Contenido del fichero docker-compose.yml

Mediante el siguiente fichero se configuran y lanzan los diferentes contenedores, volúmenes y redes del entorno para tres servicios: www, db y phpmyadmin.

version: "3.1"
services:
    www:
        build: .
        ports: 
            - 8081:80
        volumes:
            - www:/var/www/html
        depends_on:
            - db
        networks:
            - default
    db:
        image: mysql
        ports: 
            - 3306:3306
        command: --default-authentication-plugin=mysql_native_password
        environment:
            MYSQL_ROOT_PASSWORD: example 
        volumes:
            - ./dump:/docker-entrypoint-initdb.d
            - ./conf:/etc/mysql/conf.d
            - persistent:/var/lib/mysql
        networks:
            - default
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        depends_on: 
            - db
        ports:
            - 8080:80
volumes:
    persistent:

Este fichero está escrito en formato YAML, que es un lenguaje de marcado de datos, que permite definir la estructura de un fichero de configuración de forma legible y fácil de entender. Como en Python, los espacios son importantes aquí.

El contenedor www será el encargado de gestionar el servidor web, y PHP. Por su parte, el contenedor db se ocupará de la base de datos MySQL y phpmyadmin lo hará del entorno de administración de la BBDD.

Por cada servicio, se detallan algunos valores de configuración, como los puertos o las claves de acceso. En el caso de www es destacable que se hace uso de un fichero dockerfile externo con:

build: .

El volumen (volumes) almacena y gestiona datos persistentes generados por los contenedores, permitiendo que los datos cruciales de la aplicación no se pierdan durante operaciones rutinarias, estando disponibles aunque los contenedores dejen de estar operativos, compartiendo los datos entre uno o varios contenedores.

Las redes (networks) permiten la comunicación entre contenedores y con el mundo exterior, facilitando la conexión entre contenedores en la misma red o con servicios externos, y proporcionando un entorno aislado para la red de contenedores.

Contenido del fichero Dockerfile

Para su completo despliegue, el servicio www hace uso de un fichero Dockerfile que añade las configuraciones necesarias para obtener PHP, MySQL y varios compresores:

FROM php:8.0.0-apache
ARG DEBIAN_FRONTEND=noninteractive
RUN docker-php-ext-install mysqli
RUN apt-get update \
    && apt-get install -y libzip-dev \
    && apt-get install -y zlib1g-dev \
    && rm -rf /var/lib/apt/lists/* \
    && docker-php-ext-install zip
RUN a2enmod rewrite

Lo guardo con el nombre Dockerfile. Tanto el fichero docker-compose.yml como el Dockerfile han de estar en la misma ruta.

Ejecución del entorno de desarrollo web

Para poder probar su correcto funcionamiento uso:

docker-compose up -d

Esto levantará los contenedores. Si todo ha ido bien, se habrán descargado las imágenes correspondientes y lanzado los contenedores necesarios para disponer del entorno. Se puede obtener un listado de los contenedores levantados con:

docker-compose ps

Para probar su correcto funcionamiento, podemos copiar aquello que deseemos mostrar en el navegador a la carpeta www en la carpeta actual donde están los dos scripts, o bien podemos crear un fichero index.php con sólo el código siguiente:

<?php phpinfo( ); ?>

Ahora debemos acceder al contenido mediante el navegador con la ruta:

localhost 8001

8001 es el puerto descrito en el fichero docker-compose.yml para el servidor web, pero podemos cambiarlo en el mismo fichero.

Una vez ejecutado, si podemos ver la información en el navegador, es que Apache y PHP están funcionando adecuadamente.

Para comprobar si MySQL y PHPMyAdmin están activos, accedemos a la misma dirección localhost pero por el puerto 8080:

localhost:8080

Para acceder podemos usar root como usuario y example como contraseña.

Cuando terminemos, podemos detener los contenedores mediante:

docker-compose stop

Usando Docker LAMP en nuestros desarrollos

Ahora podemos levantar y detener los contenedores mediante simples comandos y ubicar estos script y el contenido que estemos desarrollando en la carpeta www de la misma manera que lo hicimos antes, y podemos mover toda esta estructura de ficheros a donde nos resulte más conveniente, o configurar el fichero docker-compose.yml para que sepa encontrar la carpeta www allá donde se ubique.

BONUS: Portainer

Para una gestión más cómoda de los contenedores y su monitorización, se puede usar Portainer, un front end web local que se levanta como un contenedor más mediante:

sudo docker run -itd -p 9443:9443 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v /docker/portainer:/data portainer/portainer-ce

Es posible acceder a él mediante la dirección localhost y el puerto 9443:

localhost:9443

Mediante este entorno se puede hacer una gestión de los contenedores y su monitorización, como se ve en la imagen.

Saber más

Apuntes TIC

JavGuerra — Thu, 12 Jan 2023 00:00:00 GMT

Etiquetas: #código, #php, #java, #bbdd

Incluyo en este repositorio mis apuntes sobre mis materias de estudio tanto de DAW como autodidactas. También incluyo materiales realizados para formaciones impartidas.

Nota: Esta entrada se actualizará cuando se produzcan novedades.

Apuntes

BBDD
- relacional
Infraestructura
- servidores (varios)
Programación
- JAVA
- PHP
- varios

Repositorio

Apuntes TIC