Mostra la font per a Documentació de l'apliació principal de la pràctica 4.2

== 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'])) {
 <nowiki> </nowiki>   setcookie('idioma_preferit', <nowiki>''</nowiki>, time() - 3600, "/");
 <nowiki> </nowiki>   header("Location: index.php");
 <nowiki> </nowiki>   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 "<nowiki><p>Error al eliminar els registres: " . htmlspecialchars($e->getMessage()) . "</p></nowiki>";
     }
 }
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
 <nowiki><h1><?php echo $titol; ?></h1></nowiki> <!-- Imprimim el títol segons l'idioma -->
             <nowiki><p><?php echo $benvinguda; ?></p></nowiki> <!-- Imprimim el missatge de benvinguda segons l'idioma -->
 
             <form method="POST" action="">
                 <nowiki><label><?php echo $label; ?></label></nowiki><nowiki><br></nowiki> <!-- Imprimim l'etiqueta segons l'idioma -->
 
                 <select name="idioma">
                    <!-- Depenent de l'idioma seleccionat, afegirem l'etiqueta HTML "selected" a la seva opció. Així al refrescar la pàgina sortirà aquella opció ja seleccionada -->
                     <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>
 
                 <nowiki><br></nowiki><nowiki><br></nowiki>
                 <nowiki><label for="nom_usuari"><?php echo $labelNomUsuari?></label></nowiki><nowiki><br></nowiki> <!-- Nom d'usuari (no obligatori) que ha realitzat el canvi -->
                 <input type="text" id="nom_usuari" name="nom_usuari">
                 <nowiki><br></nowiki><nowiki><br></nowiki>
 
 
                 <nowiki><center><button type="submit"><?php echo $boto; ?></button></nowiki><nowiki></center></nowiki> <!-- Amb echo $boto imprimim el text segons l'idioma que toca -->
             </form>
 
             <!-- Botó per esborrar les preferències (les galetes) -->
 
             <form method="POST" action="">
                 <nowiki><center><button name="esborrar" type="submit"></nowiki>
                     <?php echo $esborrar; ?>
                 <nowiki></button></nowiki><nowiki></center></nowiki>
             </form>
El resultat és el següent:
[[Fitxer:Pràctica 4.2 Foto Formulari Inicial.png|center|miniatura|500x500px]]
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)
<!-- Mostrar historial de canvis -->
 <nowiki><h2><?php echo $historial; ?></h2></nowiki>
 
 <nowiki><ul></nowiki>
 <?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): ?> <!-- Per cada idioma dins de la consulta -->
      <nowiki><li><center></nowiki>
           <?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']);
                }
                         
            ?>
       <nowiki></li></nowiki><nowiki></center></nowiki>
  <?php endforeach; ?>
 
 <nowiki></ul></nowiki>
A part, afegim un botó per eliminar tots aquests registres
<!-- Botó per esborrar tots els canvis d'idioma -->
 <form method="POST" action="">
         <nowiki><center><button name="borrar_tot" type="submit"></nowiki>
               <?php echo $borrarRegistres ?>
         <nowiki></button></nowiki><nowiki></center></nowiki>
 </form>
El resultat amb alguns registres és el següent:
[[Fitxer:Pràctica 4.2 Resultat Historial Canvis.png|center|miniatura|500x500px]]
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<pre>
// 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>
</pre>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<pre>
<!--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>
</pre>Per acabar, per obtenir la data de l'últim canvi d'idioma també realitzem una consulta SQL
<!-- Obtenir l'últim canvi d'idioma -->
 <?php
 $stmtUltim = $pdo->prepare("
 SELECT data_canvi 
 FROM canvis_idioma 
 ORDER BY id DESC 
 LIMIT 1
 ");
 
 $stmtUltim->execute();
 $ultimCanvi = $stmtUltim->fetchColumn();
 ?>
 
 <nowiki><h2><?php echo $titolUltimIdioma ?></nowiki>
 <?php echo htmlspecialchars($ultimCanvi); ?>
 <nowiki></h2></nowiki>
El resultat de la mostra d'estadístiques és el següent:
[[Fitxer:Pràctica 4.2 Mostra Estadístiques.png|center|miniatura|500x500px]]