Documentació de l'apliació principal de la pràctica 4.2

Documentació de funcionalitats

Per ampliar el nivell de detalls d'algunes de les funcionalitats del codi, es pot consultar la documentació de funcionalitats.

Documentació del codi

Primer de tot, inclourem la connexio d'escriptura a la BD i definirem la zona horaria del servidor

// Connexió a la BD i zona horària
require_once "./connexioBD/connexioRW.php";
date_default_timezone_set('Europe/Madrid');

Seguidament, definirem els idiomes permesos, per evitar injeccions SQL o possibles atacs, millorant la seguretat del codi. La llista d'idiomes serà una array emmagatzemada a la variable $idiomes_permesos, que farem servir més endavant per fer comparacions segons el valor de la galeta

$idiomes_permesos = ['ca', 'es', 'en', 'fr']; // Idiomes permessos
// ca = Català
// es = Español
// en = English
// fr = Francais

El següent pas serà crear la galeta i gestionar l'entrada de dades a la BD.

// Creació de la galeta i inserció de dades a partir del formulari de selecció d'idioma
if (isset($_POST['idioma'])) {
    $idioma_seleccionat = $_POST['idioma'];
    $nomUsuari = $_POST['nom_usuari'];

    if (in_array($idioma_seleccionat, $idiomes_permesos)) {

        // Creació de la cookie
        setcookie('idioma_preferit', $idioma_seleccionat, time() + (2592000), "/");

        // REGISTRE A BD
        try {
            $stmt = $pdo->prepare("INSERT INTO canvis_idioma (idioma, data_canvi, ip_client, nom_usuari)
                VALUES (:idioma_seleccionat, NOW(), :ip, :nom_usuari)");
            $stmt->bindParam(':idioma_seleccionat', $idioma_seleccionat);
            $stmt->bindParam(':ip', $_SERVER['REMOTE_ADDR']);
            $stmt->bindParam(':nom_usuari', $nomUsuari);
            $stmt->execute();

        } catch (PDOException $e) {
            echo "No es poden inserir les dades. Motiu: " . $e->getMessage();
        }

        header("Location: index.php");
        exit;
    } else {
        echo "Idioma no permès";
    }
}

A continuacio definirem l'esborrament de la cookie

// Esborrar la cookie
if (isset($_POST['esborrar'])) {
    setcookie('idioma_preferit', '', time() - 3600, "/");
    header("Location: index.php");
    exit;
}

El següent pas serà definir l'idioma de la pàgina. Primerament sempre definirem que l'idioma per defecte serà el català, però en cas que existeixi la galeta creada anteriorment i tingui un idioma permès, canviarem aquest idioma per l'emmagatzemat a la galeta

$idioma = 'ca'; // Idioma per defecte

// En cas que hi hagi una cookie i el valor de la cookie estigui dins dels permessos  canviem el idioma pel l'emmagatzemat en la cookie
if (isset($_COOKIE['idioma_preferit']) && in_array($_COOKIE['idioma_preferit'], $idiomes_permesos)) {
    $idioma = $_COOKIE['idioma_preferit']; // Assignem l'idioma per l'emmagatzemat en la cookie
}

Per gestionar l'esborrament dels registres de canvi d'idioma, farem servir una consulta SQL

// Borrar tots els registres de la taula
if (isset($_POST['borrar_tot'])) {
    try {
        $stmt = $pdo->prepare("DELETE FROM canvis_idioma");
        $stmt->execute();
    } catch (PDOException $e) {
        echo "<p>Error al eliminar els registres: " . htmlspecialchars($e->getMessage()) . "</p>";
    }
}

Per últim, per mostrar cada text en els seus idiomes, s'ha creat una array amb 4 vectors, un per cada idioma (ca, es ,en, fr). Cada vector és una altra array en sí. Cada array de cada idioma inclou un vector que identifica què és (text del títol, del botó, de l'etiqueta) i el text en el seu idioma.

// Traduccions i textos
$traduccions = [
    'ca' => [
        'titol' => 'Preferències d’idioma',
        'benvinguda' => 'Benvingut! Seleccioneu el vostre idioma preferit:',
        'formulari_label' => 'Seleccioneu un idioma:',
        'label_nom_usuari' => "Nom d'usuari:",
        'boto' => 'Desar preferència',
        'historial' => "Darrers 5 canvis d'idioma:",
        'esborrar' => 'Esborrar preferències',
        
        'idiomaCat' =>  'Català',
        'idiomaEsp' =>  'Castellà',
        'idiomaAng' => 'Anglès',
        'idiomaFra' => 'Francès',

        'borrarRegistres' => "Esborrar tots els registres",

        'estadistiques' => "Estadístiques",

        'ultimIdioma' => "Últim canvi d'idioma:",

        'idiomaMesUsat' => "Idioma més usat: ",

        'totalCanvis' => "Total de canvis realitzats: "
    ],
    'es' => [
        'titol' => 'Preferencias de idioma',
        'benvinguda' => 'Bienvenido. Selecciona tu idioma preferido:',
        'formulari_label' => 'Selecciona un idioma:',
        'label_nom_usuari' => "Nombre de usuario :",
        'boto' => 'Guardar preferencia',
        'historial' => 'Últimos 5 cambios de idioma:',
        'esborrar' => 'Borrar preferencias',
        
        'idiomaCat' =>  'Catalan',
        'idiomaEsp' =>  'Castellano',
        'idiomaAng' => 'Inglés',
        'idiomaFra' => 'Francés',

        'borrarRegistres' => "Borrar todos los registros",

        'estadistiques' => "Estadísticas",

        'ultimIdioma' => "Último cambio de idioma:",

        'idiomaMesUsat' => "Idioma más usado: ",

        'totalCanvis' => "Total de cambios realizados: "
    ],
    'en' => [
        'titol' => 'Language preferences',
        'benvinguda' => 'Welcome! Select your preferred language:',
        'formulari_label' => 'Select a language:',
        'label_nom_usuari' => "Username:",
        'boto' => 'Save preferences',
        'historial' => 'Last 5 language changes:',
        'esborrar' => 'Delete preferences',
        
        'idiomaCat' =>  'Catalan',
        'idiomaEsp' =>  'Spanish',
        'idiomaAng' => 'English',
        'idiomaFra' => 'French',

        'borrarRegistres' => "Delete all records",

        'estadistiques' => "Statistics",

        'ultimIdioma' => "Last change of language:",

        'idiomaMesUsat' => "Most used language: ",

        'totalCanvis' => "Total changes made: "
    ],
    'fr' => [
    'titol' => 'Préférences de langue',
    'benvinguda' => 'Bienvenue ! Sélectionnez votre langue préférée:',
    'formulari_label' => 'Sélectionnez une langue:',
    'label_nom_usuari' => "Nom d'utilisateur:",
    'boto' => 'Enregistrer la préférence',
    'historial' => 'Derniers 5 changements de langue:',
    'esborrar' => 'Supprimer les préférences',

    'idiomaCat' => 'Catalan',
    'idiomaEsp' => 'Espagnol',
    'idiomaAng' => 'Anglais',
    'idiomaFra' => 'Français',

    'borrarRegistres' => "Supprimer tous les enregistrements",

    'estadistiques' => "Statistiques",

    'ultimIdioma' => "Dernier changement de langue:",

    'idiomaMesUsat' => "langue la plus utilisée: ",

    'totalCanvis' => "Modifications totales apportées: "
    ],

];

Un cop determinat l'idioma actiu (a partir de la cookie o del valor per defecte), els textos s'assignen a variables que posteriorment s'imprimeixen a la vista HTML. Segons l'idioma seleccionat, s'agafarà el vector d'una array o d'una altre, mitjançant la variable $idioma.

$titol = htmlspecialchars($traduccions[$idioma]['titol']);
$benvinguda = htmlspecialchars($traduccions[$idioma]['benvinguda']);
$label = htmlspecialchars($traduccions[$idioma]['formulari_label']);
$boto = htmlspecialchars($traduccions[$idioma]['boto']);
$esborrar = htmlspecialchars($traduccions[$idioma]['esborrar']);
$historial = htmlspecialchars($traduccions[$idioma]['historial']);

$cat = htmlspecialchars($traduccions[$idioma]['idiomaCat']); // Català | Catalán | Catalan | Catalan.          
$esp = htmlspecialchars($traduccions[$idioma]['idiomaEsp']); // Castellà | Castellano | Spanish | Espagnol.    
$ang = htmlspecialchars($traduccions[$idioma]['idiomaAng']); // Anglès | Inglés | English | Anglais.           
$fra = htmlspecialchars($traduccions[$idioma]['idiomaFra']); // Francès | Francés | French | Français          

$labelNomUsuari = $traduccions[$idioma]['label_nom_usuari'];

$borrarRegistres = htmlspecialchars($traduccions[$idioma]['borrarRegistres']);

$titolEstadistiques = htmlspecialchars($traduccions[$idioma]['estadistiques']);

$titolIdiomaMesUsat = htmlspecialchars($traduccions[$idioma]['idiomaMesUsat']);

$titolTotalCanvis = htmlspecialchars($traduccions[$idioma]['totalCanvis']);

$titolUltimIdioma = htmlspecialchars($traduccions[$idioma]['ultimIdioma']); 

A partir d'aquí, ja hem definit tots els elements que es mostraran a la pàgina inicial i podem començar amb el desenvolupament del codi HTML

Primer, desenvoluparem el formulari de canvi d'idioma, el qual constarà d'una casella de selecció amb els 4 idiomes, els quals els seus valors seran l'acurtament (ca, es ... ) per cumplir amb la nomenclatura dels idiomes permesos i les arrays de traduccions i un botó per esborrar les preferències (la galeta), a més el botó d'enviament del formulari

<h1><?php echo $titol; ?></h1> 
            <p><?php echo $benvinguda; ?></p> 

            <form method="POST" action="">
                <label><?php echo $label; ?></label><br> 

                <select name="idioma">
                    <option value="ca" <?php if ($idioma === 'ca') echo 'selected'; ?>>Català</option>
                    <option value="es" <?php if ($idioma === 'es') echo 'selected'; ?>>Castellano</option>
                    <option value="en" <?php if ($idioma === 'en') echo 'selected'; ?>>English</option>
                    <option value="fr" <?php if ($idioma === 'fr') echo 'selected'; ?>>Français</option>
                </select>

                <br><br>
                <label for="nom_usuari"><?php echo $labelNomUsuari?></label><br> 
                <input type="text" id="nom_usuari" name="nom_usuari">
                <br><br>


                <center><button type="submit"><?php echo $boto; ?></button></center> 
            </form>


            <form method="POST" action="">
                <center><button name="esborrar" type="submit">
                    <?php echo $esborrar; ?>
                </button></center>
            </form>

El resultat és el següent:

Seguidament, mostrarem l'historial de canvis, el qual es realitza mitjançant una consulta SQL. A més, ja que la consulta retorna l'idioma acurtat, el passem a l'idioma "sencer" (ca -> Català) i transformem el nom de l'idioma segons l'idioma actual (Castellà -> Spanish (en anglès). L'historial de canvis inclou:

• Idioma al que s'ha canviat
• Data en la que s'ha realitzat el canvi
• Direcció IP des de la que s'ha fet el canvi
• Nom d'usuari que ha realitzat el canvi (si és que n'hi ha)

<h2><?php echo $historial; ?></h2>

<ul>
<?php 
$stmt = $pdo->prepare("SELECT 
idioma, 
data_canvi, 
ip_client,
nom_usuari 
FROM canvis_idioma ORDER BY id DESC LIMIT 5");

$stmt->execute();
$historial = $stmt->fetchAll();

// Imprimim tots els canvis d'idiomes trobats a la consulta
foreach ($historial as $reg): ?> 
     <li><center>
          <?php
               // Convertim el codi d’idioma a text. Enlloc d'imprimir "ca" o "es", imprimim l'idioma sencer, en l'idioma corresponent 
               switch ($reg['idioma']) {
                      case "ca":
                            $idioma_text = $cat; // Català | Catalán | Catalan | Catalan.          Retorna l'idioma "Català" escrit segons l'idioma de l'aplicació
                             break;
                      case "es":
                             $idioma_text = $esp; // Castellà | Castellano | Spanish | Espagnol.    Retorna l'idioma "Castellà" escrit segons l'idioma de l'aplicació
                             break;
                      case "en":
                             $idioma_text = $ang; // Anglès | Inglés | English | Anglais.           Retorna l'idioma "Català" escrit segons l'idioma de l'aplicació
                             break;
                      case "fr":
                             $idioma_text = $fra; // Francès | Francés | French | Français          Retorna l'idioma "Francès" escrit segons l'idioma de l'aplicació
                             break; 
                      default:
                             $idioma_text = $reg['idioma']; // ca, es, en, fr
               }

               // Imprimim l'idioma
               echo htmlspecialchars($idioma_text)
               . " — " // Separador
               // Imprimim la data en la qual s'ha fet el canvi
               . htmlspecialchars($reg['data_canvi'])
               . " — " // Separador
               // Imprimim la IP del client
               . htmlspecialchars($reg['ip_client']);
               // Imprimim el nom d'usuari
               if ($reg['nom_usuari']){
                    echo " — " // Separador
                    . htmlspecialchars($reg['nom_usuari']);
               }
                        
           ?>
      </li></center>
 <?php endforeach; ?>

</ul>

A part, afegim un botó per eliminar tots aquests registres

<form method="POST" action="">
        <center><button name="borrar_tot" type="submit">
              <?php echo $borrarRegistres ?>
        </button></center>
</form>

El resultat amb alguns registres és el següent:

El pròxim pas és mostrar les estadístiques de l'aplicació, que són:

• L'idioma més usat
• Total de canvis d'idioma (Qualsevol usuari i qualsevol data)
• Data de l'últim canvi d'idioma realitzat

Per obtenir l'idioma mes usat es fa una consulta SQL i, a l'igual que amb la mostra de l'historial, transformem el nom de l'idioma al nom sencer i segons l'idioma actual

// Obtenir l'idioma més usat
            $stmt = $pdo->prepare("
                SELECT idioma, COUNT(*) AS total
                FROM canvis_idioma
                GROUP BY idioma
                ORDER BY total DESC
                LIMIT 1
            ");
            $stmt->execute();
            $idiomaMesUsat = $stmt->fetch(PDO::FETCH_ASSOC);

            // Convertim el codi d'idioma a text utilitzant les traduccions actuals
                switch ($idiomaMesUsat['idioma']) {
                    case "ca": // En cas que l'idioma retornat sigui "ca"
                        $idioma_text_mes_usat = $cat; // Català | Catalán | Catalan | Catalan.          Retorna l'idioma "Català" escrit segons l'idioma de l'aplicació
                        break;
                    case "es": 
                        $idioma_text_mes_usat = $esp; // Castellà | Castellano | Spanish | Espagnol.    Retorna l'idioma "Castellà" escrit segons l'idioma de l'aplicació
                        break;
                    case "en": 
                        $idioma_text_mes_usat = $ang; // Anglès | Inglés | English | Anglais.           Retorna l'idioma "Català" escrit segons l'idioma de l'aplicació
                        break;
                    case "fr": 
                        $idioma_text_mes_usat = $fra; // Francès | Francés | French | Français          Retorna l'idioma "Francès" escrit segons l'idioma de l'aplicació
                        break;
                    default: 
                        $idioma_text_mes_usat = $idiomaMesUsat['idioma'];
                }
            
            ?>

            <h2><?php echo $titolIdiomaMesUsat . htmlspecialchars($idioma_text_mes_usat) ?></h2>

Per obtenir el total de canvis d'idioma també es fa servir una consulta SQL més senzilla, que compta tots els registres de la BD

<!--Obtenir el total de canvis d'idioma-->
<?php
$stmt = $pdo->prepare("SELECT COUNT(*) AS total FROM canvis_idioma");
$stmt->execute();
$totalCanvis = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<h2><?php echo $titolTotalCanvis . htmlspecialchars($totalCanvis['total']);?></h2>

Per acabar, per obtenir la data de l'últim canvi d'idioma també realitzem una consulta SQL

<?php
$stmtUltim = $pdo->prepare("
SELECT data_canvi 
FROM canvis_idioma 
ORDER BY id DESC 
LIMIT 1
");

$stmtUltim->execute();
$ultimCanvi = $stmtUltim->fetchColumn();
?>

<h2><?php echo $titolUltimIdioma ?>
<?php echo htmlspecialchars($ultimCanvi); ?>
</h2>

El resultat de la mostra d'estadístiques és el següent: