Formulari d'alta d'usuari

Formulari inicial d'alta d'usuari

Dins d'aquesta web trobarem el formulari per dona d'alta usuaris. L'aspecta serà aquest:

S'ha produït un error en crear la miniatura: Fitxer inexistent

En total hi haurà 19 camp a emplenar, a partir de la següent taula es pot veure quins són i de quin tipus

Nom del camp	Tipus de camp
Tipus de Document	Desplegable de selecció
Número Document	Text
Nom	Text
Cognoms	Text
Sexe	Desplegable de selecció
Data de naixement	Data
Correu electrònic	Email
Confirmació de correu electrònic	Email
Telèfon mòbil	Telèfon
Població	Desplegable de selecció
Codi Postal	Text
Adreça	Text
Periodicitat de cobrament	Botons d’opció
Acceptació de condicions	Casella de selecció
Acceptació de comunicacions	Casella de selecció
Contrasenya	Contrasenya
Confirmació de contrasenya	Contrasenya
Observacions	Àrea de text
Fitxer	Fitxer

Tots ells tenen en comú:

• Tots tenen un label, indicant el nom del campCompten amb un placeholder.
• En cas de la data i els desplegables de selecció, se’ls hi ha assignat el valor per defecte
• Tots tenen l’atribut required excepte l’acceptació de comunicacions i les observacions

Alguns elements en especial, tenen certes peculiaritats:

• En el text de les condicions, s’inclou l’enllaç a les condicions

El formulari serà de tipus POST i inclourà un tipus d'encoding, el qual permet pujar fitxers PDF. L'acció del formulari es un fitxer php que valida les dades segons certes condicions i les enregistra a la BBDD

<form action="../php/validacioDades.php" method="post" enctype="multipart/form-data">

A la part final del formulari comptarem amb dos botons, el primer per enviar el formulari i el segon per netejar les dades, que també dirigeix a l'usuari a l'inici del formulari

<!-- Botons -->
<input type="submit" value="Enviar">
<input type="reset" value="Netejar" onclick="window.location.href='#'">

S'ha produït un error en crear la miniatura: Fitxer inexistent

Validació de dades d’alta d’usuari i inserció de dades a la BBDD

Un cop s'envia el formulari, s'ha de passar per un procés de validació de dades segons certs criteris. Moltes de les verificacions es duen a terme amb les funcions desenvolupades prèviament, i per això les hem d'incorporar a un document (com si fos una biblioteca)

require_once "funcions.php"; // Fem un "copia i enganxa" del contingut del fitxer en el codi
// Únicament ho fem una vegada, en cas d'haver-hi més require iguals, s'ignoraran.

Per comptabilitzar els possibles errors que hi hagi durant les comprovacions, crearem una array. Aquesta emmagatzemarà cadenes de text indicant els errors, que cada verificació podrà personalitzar segons l'error detectat. Així, podrem tant comprovar si hi ha hagut errors per evitar l'inserció de dades, com mostrar els errors trobats a l'usuari

$errors = []; // S'inicïa una array d'errors, on es desaran tots els errors

Amb la següent taula es pot comprovar quines comprovacions es fan en cada camp i amb quines funcions

Camp	Comprovacions	Funcions utilitzades
Tipus de document	És buit	Funció campBuit
Número de document	És buit Número de document vàlids segons el tipus	Funció campBuit Funció validarDNI, validarNIE, validarPassaport, segons el tipus de document
Nom	És buit	Funció campBuit
Cognoms	És buit	Funció campBuit
Sexe	És buit	Funció campBuit
Data de naixement	És buit Major d’edat	Funció campBuit Funció esMajorEdat
Correu electrònic i verificació	És buit Els dos camps són iguals	Funció campBuit Comparació (==)
Telèfon	És buit Telèfon vàlid	Funció campBuit Funció validarTelefon
Població	És buit	Funció campBuit
Codi Postal	És buit Codi postal vàlid	Funció campBuit Funció codiPostalValid
Adreça	És buit	Funció campBuit
Periodicitat	És buit	Funció campBuit
Acceptació condicions	És buit	Funció isset de PHP
Contrasenya i verificació	És buit Els dos camps són iguals	Funció campBuit Comparació (==)
Fitxer PDF	És buit És un fitxer PDF	Funció isset de PHP Comparació (==)

Un cop fetes totes les verificacions, es comprovarà si l'array d'errors és buida (indicant que no hi ha hagut cap error). En cas que hi hagi hagut, recorrerem tota l'array i imprimirem les cadenes de text (que són els errors) per tal de que l'usuari pugui saber-ho

if (count($errors) > 0) { // Si la quantitat d'errors a l'array és més gran que 0
        echo "<h2>No s'ha pogut processar el registre. S'han trobat errors:</h2>";
        foreach ($errors as $error) { // Per cada error dins de l'array d'error
            echo htmlspecialchars($error); // S'imprimeix l'error
            echo '<br>';
        }
// S'ha acabat

En cas d'haber-hi errors, es podria veure de la següent forma:

S'ha produït un error en crear la miniatura: Fitxer inexistent

En cas contrari, es podrà procedir amb la inserció de dades. El primer serà connectar-se amb una connexió de lectura i escriptura.

require_once "connexioRW.php";// Fem un "copia i enganxa" de la connexió de lectura i escriptura en el codi

Seguidament, prepararem la inserció, on després assignarem les variables rebudes del formulari

$stmt = $conn->prepare("

               INSERT INTO $nomTaula (
               tipusDocument, numeroDocument, nom, cognoms, sexe, dataNaixement,
               email, telf, poblacio, codiPostal, adreca, periodicitat,
               rebreComunicacions, contrasenya, hash, observacions, arxiu
           ) VALUES (
               :tipusDocument, :numeroDocument, :nom, :cognoms, :sexe, :dataNaixement,
               :email, :telf, :poblacio, :codiPostal, :adreca, :periodicitat,
               :rebreComunicacions, :contrasenya, :hash, :observacions, :arxiu
           )"

I assignarem cada variable amb el seu paràmetre enllaçat

// Bind dels paràmetres

           $stmt->bindParam(':tipusDocument', $_POST["tipus_document"]);
           $stmt->bindParam(':numeroDocument', $_POST["numero_document"]);
           $stmt->bindParam(':nom', $_POST["nom"]);
           $stmt->bindParam(':cognoms', $_POST["cognoms"]);
           $stmt->bindParam(':sexe', $_POST["sexe"]);
           $stmt->bindParam(':dataNaixement', $_POST["data_naixement"]);
           $stmt->bindParam(':email', $_POST["email"]);
           $stmt->bindParam(':telf', $_POST["telefon"]);
           $stmt->bindParam(':poblacio', $_POST["poblacio"]);
           $stmt->bindParam(':codiPostal', $_POST["codi_postal"]);
           $stmt->bindParam(':adreca', $_POST["adreca"]);
           $stmt->bindParam(':periodicitat', $_POST["periodicitat"]);

           // Camps opcionals (checkbox)
           if (!isset($_POST["accepto_comunicacions"])){ // Si "accepto_comunicacions" NO està marcat
               $rebreComunicacions = "No";
           } else { // Si "accepto_comunicacions" ESTÀ marcat
               $rebreComunicacions = "Si";
           }

           $stmt->bindParam(':rebreComunicacions', $rebreComunicacions);

           $stmt->bindParam(':contrasenya', $_POST["contrasenya"]);
           
           // Hash de contrasenya
           $hashContrasenya = password_hash($_POST["contrasenya"], PASSWORD_DEFAULT); // Creem un hash a partir de la contrasenya
           $stmt->bindParam(':hash', $hashContrasenya);

           $stmt->bindParam(':observacions', $_POST["observacions"]);

           $fitxerContingut = file_get_contents($_FILES['fitxer']['tmp_name']); // Afafem el contingut binari del fitxer
           $stmt->bindParam(':arxiu', $fitxerContingut, PDO::PARAM_LOB); // Dins del camp arxiu, inserim el contingut binari, indicant que és un binari amb PARAM_LOB

           $stmt->execute();

A més a més, el PDF no només s'ha de desar a la BBDD, sinó també a un directori del servidor. Aquest procés està definit a l’apartat “Emmagatzematge de PDF al servidor”

Per últim, definirem el missatge d'èxit

// Definim les variables necessàries pel missatge final
$nom = $_POST["nom"];
$cognoms = $_POST["cognoms"];
$hora = date("H:i");
$data = date("d/m/Y");

echo "<p class='result-message'>Sr/a $nom $cognoms, les seves dades han estat enregistrades correctament a les $hora hores del $data</p>";

Per assegurar que la data i la hora és la correcte, indicarem a PHP quina és la nostra zona horària al principi del codi

date_default_timezone_set('Europe/Madrid'); // Definim la zona horària

En cas que hi hagi algun error, saltarà el catch, on comprovarà el codi d’error obtingut. En cas de ser 23000, voldrà dir que el número de document ja existeix a la BBDD i mostrarà un missatge informant-ho, i en cas de ser qualsevol altre, indicarà el missatge genèric de PHP. Degut a que és probable que l’error del número de document surti en diverses situacions, es crea un missatge específic per aquest error, mentre que la resta d’errors tenen una probabilitat molt baixa d’aparèixer.

catch (PDOException $e) { // En cas que hi hagi hagut algun error en inserir les dades
      if ($e->getCode() == 23000) { // Si l'error és que el número de document ja existeix (Camp UNIQUE a la taula)
                echo "<p class='result-message' style='color:red;'>❌ El número de document ja està registrat.</p>";
      } else {
                // Altres errors
                echo "<p class='result-message' style='color:red;'>❌ Error en inserir les dades: " . htmlspecialchars($e->getMessage()) . "</p>";
            }

El resultat d’inserir un Nº de document ja existeix és el següent:

S'ha produït un error en crear la miniatura: Fitxer inexistent

En complementació, s’afageix que en cas que s’accedeixi sense haver enviat cap dada des d’un formulari a la pàgina, es redirigeixi al formulari inicial

if ($_SERVER["REQUEST_METHOD"] == "POST") {
      ...
} else {
    // En cas d'accedir a la pàgina sense haver enviat cap formulari
    header("Location: ../formularis/altaUsuari.html"); // Es redirigeix a la pàgina altaUsuari.html
    exit;

Memòria de les dades introduïdes

En el moment que l’usuari comet algun error i l’alta no es pot produir, aquest té l’opció de tornar al formulari i mantenir els valors introduits sense haver-ho de tornar a fer.

Això ho aconseguim fent el següent flux:

1. Formulari inicial envia les dades a la validacio de dades
2. La validacio de dades guarda aquests valors en un formulari ocult
3. En el moment de prémer "tornar el formulari", la validació de dades crida a un formulari idèntic a l'inicial però fet en PHP
4. La validació de dades envia els valors del formulari ocult al formulari d'alta en PHP
5. El formulari d'alta en PHP estableix els valors predefinits dels camps segons els valors enviats anteriorment

El formulari ocult que es troba dins de la validació de dades és el següent, el qual recull tots els camps del formulari inicial (menys el PDF ja que no és possible):

<!-- Definim un formulari ocult, on agafa les dades enviades per altaUsuari i les desa per poder "recordar-les" -->
<form method="POST" action="../formularis/altaUsuari.php">

    <input type="hidden" name="tipus_document_retorn"
       value="<?= htmlspecialchars($_POST['tipus_document']) ?>">

    <input type="hidden" name="numero_document_retorn"
           value="<?= htmlspecialchars($_POST['numero_document']) ?>">

    <input type="hidden" name="nom_retorn"
           value="<?= htmlspecialchars($_POST['nom']) ?>">

    <input type="hidden" name="cognoms_retorn"
           value="<?= htmlspecialchars($_POST['cognoms']) ?>">

    <input type="hidden" name="sexe_retorn"
       value="<?= htmlspecialchars($_POST['sexe']) ?>">

    <input type="hidden" name="data_naixement_retorn"
       value="<?= htmlspecialchars($_POST['data_naixement']) ?>">

    <input type="hidden" name="email_retorn"
           value="<?= htmlspecialchars($_POST['email']) ?>">

    <input type="hidden" name="email_confirm_retorn"
           value="<?= htmlspecialchars($_POST['email_confirm']) ?>">

    <input type="hidden" name="telefon_retorn"
           value="<?= htmlspecialchars($_POST['telefon']) ?>">

    <input type="hidden" name="poblacio_retorn"
       value="<?= htmlspecialchars($_POST['poblacio']) ?>">

    <input type="hidden" name="codi_postal_retorn"
           value="<?= htmlspecialchars($_POST['codi_postal']) ?>">

    <input type="hidden" name="adreca_retorn"
           value="<?= htmlspecialchars($_POST['adreca']) ?>">

    <input type="hidden" name="periodicitat_retorn" 
       value="<?= htmlspecialchars($_POST['periodicitat'])?>">

    <input type="hidden" name="accepto_condicions_retorn"
           value="<?= isset($_POST['accepto_condicions'])?>">
    <input type="hidden" name="accepto_comunicacions_retorn"
           value="<?= isset($_POST['accepto_comunicacions'])?>">

    <input type="hidden" name="contrasenya_retorn"
           value="<?= htmlspecialchars($_POST['contrasenya']) ?>">

    <input type="hidden" name="contrasenya_confirmar_retorn"
           value="<?= htmlspecialchars($_POST['contrasenya_confirm']) ?>">
    
    <input type="hidden" name="observacions_retorn"
       value="<?= htmlspecialchars($_POST['observacions']) ?>">


    <a href="#" onclick="this.closest('form').submit();" class="styled-button">
        <i class="fa-solid fa-arrow-left"></i> Tornar al formulari
    </a>

</form>

El formulari d'alta en PHP verifica si han entrat dades per un formulari i actualitza els valors dels camps en funció dels valors introduits.

Per això primer es verifica si s’ha rebut dades i s’assigna a unes variables els valors inicials dels camps, i en cas contrari, el seu valor estarà buit

if ($_SERVER["REQUEST_METHOD"] == "POST") { // En cas que accedim al formulari mitjançant un retorn
    $tipus_document = $_POST["tipus_document_retorn"];
    $numero_document = $_POST["numero_document_retorn"];
    $nom = $_POST["nom_retorn"];
    $cognom = $_POST["cognoms_retorn"];
    $sexe = $_POST["sexe_retorn"];
    $data_naixement = $_POST["data_naixement_retorn"];
    $email = $_POST["email_retorn"];
    $email_confirm = $_POST["email_confirm_retorn"];
    $telefon = $_POST["telefon_retorn"];
    $poblacio = $_POST["poblacio_retorn"];
    $codi_postal = $_POST["codi_postal_retorn"];
    $adreca = $_POST["adreca_retorn"];
    $periodicitat = $_POST['periodicitat_retorn'];
    $accepto_condicions = (isset($_POST['accepto_condicions_retorn'])) ? 'checked' : '';
    $accepto_comunicacions = (isset($_POST['accepto_comunicacions_retorn'])) ? 'checked' : '';
    $contrasenya = $_POST["contrasenya_retorn"];
    $contrasenya_confirm = $_POST["contrasenya_confirmar_retorn"];
} else {// En cas d'accedir per primera vegada (o fer F5)
    $tipus_document = "";
    $nom = "";
    $cognom = "";
    $sexe = "";
    $data_naixement = "2000-01-01";
    $email = "";
    $email_confirm = "";
    $telefon = "";
    $poblacio = "";
    $codi_postal = "";
    $adreca = "";
    $periodicitat = "Anual";
    $contrasenya = "";
    $contrasenya_confirm = "";
    $tipus_document = "";
    $numero_document = "";
    $nom = "";
    $cognom = "";
    $sexe = "";
    $data_naixement = "2000-01-01";
    $email = "";
    $email_confirm = "";
    $telefon = "";
    $poblacio = "";
    $codi_postal= "";
    $adreca = "";
    $accepto_condicions = "";;
    $accepto_comunicacions = "";;
    $contrasenya = "";;
    $contrasenya_confirm = "";
}

Així, per cada camp es podrà assignar el valor introduit inicialment de nou en el formulari de retorn.

Per exemple al tipus de document es fa tres condicions:

• Si la variable $tipus_document és NIF, afegirem l’etiqueta HTML “selected” dins de l’opció NIF, si no, no afegirem res.
• Si la variable $tipus_document és NIE, afegirem l’etiqueta HTML “selected” dins de l’opció NIE si no, no afegirem res.
• Si la variable $tipus_document és Passaport, afegirem l’etiqueta HTML “selected” dins de l’opció Passaport si no, no afegirem res.

<!-- 1. Tipus de document -->
<label for="tipus_document">1. Tipus de document:</label>
<select id="tipus_document" name="tipus_document" required>
        <option value="">-- Selecciona --</option>
        <option value="NIF" <?= ($tipus_document === "NIF") ? "selected" : "" ?>>NIF</option>
        <option value="NIE" <?= ($tipus_document === "NIE") ? "selected" : "" ?>>NIE</option>
        <option value="Passaport" <?= ($tipus_document === "Passaport") ? "selected" : "" ?>>Passaport</option>
</select>

En cas de ser entrades de text, únicament afegim l’etiqueta HTML “value”, la qual introdueix directament el valor especificat al formulari, amb el valor de la variable del camp. Així, si ha rebut dades, aquella variable tindrà el valor i l’etiqueta “value” l’introduirà directament al formulari. En cas contrari, com el valor de la variable serà buit, el camp també ho estarà

<!-- 3. Nom -->
<label for="nom">3. Nom:</label>
<input type="text" id="nom" name="nom" placeholder="Introdueix el teu nom" value="<?= htmlspecialchars($nom) ?>" required>

Aquest procés es realitza amb tots els camps, excepte amb el PDF.