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

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