Arxiu de l'autor: admin

Funció: escriu_a_fitxer usant (usant __DIR__)

Publicat el per

El directori on es crea el fitxer és on es troba el fitxer PHP actual (usant __DIR__)

<?php
function escriu_a_fitxer($nomFitxerRelatiu, $contingut, $afegir = false) {
    // Ruta completa del fitxer
    $ruta = __DIR__ . '/' . $nomFitxerRelatiu;

    // Mode d'obertura: 'a' per afegir, 'w' per sobreescriure
    $mode = $afegir ? 'a' : 'w';

    $fp = fopen($ruta, $mode);
    if (!$fp) {
        echo "Error: no s'ha pogut obrir el fitxer $ruta.";
        return false;
    }

    fwrite($fp, $contingut);
    fclose($fp);
    echo "Fitxer escrit correctament a: $ruta<br>";
    return true;
}
?>

Caràcters especials en LIKE (SQL) utils per mots encreuats

Publicat el per

Caràcters especials en LIKE (SQL)

  1. % → Comodí per qualsevol nombre de caràcters
    • Representa qualsevol seqüència de caràcters (inclosos zero caràcters).
    • Exemple:
      • "ca%" → Tots els mots que comencen per ca (casa, carrer, carta…).
      • "%na" → Tots els mots que acaben en na (mana, lluna…).
      • "%or%" → Tots els mots que contenen or en qualsevol posició (motor, porta…).
  1. _ → Comodí per a un sol caràcter
    • Representa exactament un caràcter qualsevol.
    • Exemple:
      • "c_t" → Tots els mots de tres lletres que comencen amb c i acaben amb t (cat, cot…).
      • "__a__" → Tots els mots de cinc lletres amb a com a tercera lletra (canal, coral…).
  1. [] → Coincideix amb un grup de caràcters especificats
    • Permet buscar caràcters concrets o un rang de caràcters en una posició.
    • Exemple:
      • "[aeiou]" → Troba paraules que contenen qualsevol vocal (animal, elefant, idea…).
      • "c[aeiou]t" → Tots els mots que comencen amb c, tenen una vocal, i acaben amb t (cat, cot, cut…).
      • "c[a-c]t" → Tots els mots que comencen amb c, tenen una lletra entre a i c, i acaben amb t (cat, cbt…).
  1. [^] → Exclou caràcters específics
    • Busca caràcters que no estiguin dins el rang especificat.
    • Exemple:
      • "c[^aeiou]t" → Tots els mots que comencen amb c, tenen una consonant, i acaben amb t (cat no coincideix, però crt sí).
      • "[a-f][^e]r" → Paraules que comencen amb una lletra entre a i f, no tenen e com a segona lletra, i acaben amb r.
  1. \ → Escapar caràcters especials
    • Si necessites buscar caràcters que són especials (com %, _, [, ]), pots escapar-los amb \.
    • Exemple:
      • "10\%" → Cerca literal 10% (sense interpretar % com a comodí).
      • "c\[o\]t" → Busca literal c[o]t.
  1. Combinar patrons:
    • Pots combinar aquests patrons per fer cerques més avançades.
    • Exemple:
      • "__a%t" → Totes les paraules amb almenys quatre lletres, que tinguin a com a tercera lletra i acabin amb t.
      • "a[_]%e" → Paraules que comencen amb a, tenen un segon caràcter qualsevol, i acaben amb e.

Altres patrons útils (NO només amb LIKE)

REGEXP (Expressions regulars, si la teva base de dades ho permet)

Per cerques més complexes, pots utilitzar REGEXP (MySQL, PostgreSQL…).

  • ^ → Coincideix al principi d’una cadena.
    • Exemple: REGEXP '^ca' → Paraules que comencen amb ca.
  • $ → Coincideix al final d’una cadena.
    • Exemple: REGEXP 'or$' → Paraules que acaben amb or.
  • | → Lògica OR.
    • Exemple: REGEXP 'ca|ma' → Paraules que contenen ca o ma.
  • .* → Qualsevol seqüència de caràcters (similar a % en LIKE).
    • Exemple: REGEXP '.*a.*e.*' → Paraules que contenen a i després e.

Dbeaver. Executar SQL

Publicat el per 
SELECT * FROM `english_castilian` WHERE `tipus` LIKE '%*iv%' ORDER BY `catala` ASC;

Executa: SELECT * FROM `english_castilian` WHERE `tipus` LIKE ‘%*iv%’ ORDER BY `catala` ASC premen la fletxa a l’esquerra del SQL

les superglobals com $_SESSION són exclusives de PHP

Publicat el per
Respon

Exemples típics de superglobals en PHP:

$_SESSION

$_GET

$_POST

$_COOKIE

$_FILES

$_SERVER

$_REQUEST

$_ENV

$GLOBALS

Aquestes no existeixen com a tals en altres llenguatges com Python, JavaScript, Ruby o Java. Resum:

Però la idea de «sessions» és comuna a molts llenguatges — simplement s’implementa diferent.

Sí, $_SESSION és exclusiu de PHP.

$_SESSION['resposta'] no és una pila ni una cua

Ara mateix, la variable $_SESSION['resposta'] és simplement una cadena de text (string), no una estructura de dades com una pila (stack) o una cua (queue). Això vol dir que quan tu fas:

$_SESSION['resposta'] .= $fila['catala'] . " - " . $fila['castella'] . "\n\n";

Només estàs afegint text al final d’una cadena, i no tens accés directe a la línia n com si fos un array o una estructura indexada.

Com podries accedir a una línia específica?

Si vols accedir, per exemple, a la línia 3 de la resposta, primer has de convertir la cadena en un array de línies amb explode("\n", ...), així:

$linies = explode("\n", $_SESSION['resposta']);
$linia3 = $linies[2]; // Recorda que comença a comptar des de 0

$_SESSION[‘exemple’] en principi no implica un array, o text formatat sinó simplement una forma d’emmagatzemar dades al navegador.

Variable de sessióPot ser
string, int, bool, float✅ Senzill
array✅ Molt comú
object✅ Però amb precaució
null✅ També possible
resource❌ No es pot serialitzar (no serveix)

Conversió de array → string

✅ Funció: implode()

$array = ['poma', 'plàtan', 'taronja'];
$string = implode(", ", $array);
echo $string; // Sortida: "poma, plàtan, taronja"

Conversió de string → array

✅ Funció: explode()

$string = "poma, plàtan, taronja";
$array = explode(", ", $string);
print_r($array);
// Sortida:
// Array ( [0] => poma [1] => plàtan [2] => taronja )

Camps de les taules de Polidic. Editar Registre

Publicat el per

id
catala
pron
tipus
c_a_t
qualificador
castella
ajuda
data_creacio
data_modif
found
num_alea
encert
nota
estrelles
aux

==============editar registre=================

  1. Obtenció del registre per editar:
    • Si l’usuari accedeix al formulari amb un paràmetre id (per exemple, editar.php?id=1), es realitza una consulta preparada per obtenir totes les dades del registre corresponent.

edit.php

<?php
// Configuració de la connexió a la base de dades
$servername = "localhost";
$username = "root"; // Substitueix pel teu usuari
$password = "";     // Substitueix per la teva contrasenya
$dbname = "word";   // Nom de la base de dades

// Crear connexió
$conn = new mysqli($servername, $username, $password, $dbname);

// Comprovar la connexió
if ($conn->connect_error) {
    die("Error de connexió: " . $conn->connect_error);
}

// Variables per emmagatzemar les dades del registre
$id = "";
$update_success = false;

// Inicialitzar variables per cada camp de la taula
$data = [
    'catala' => '',
    'pron' => '',
    'tipus' => '',
    'c_a_t' => '',
    'qualificador' => '',
    'castella' => '',
    'ajuda' => '',
    'data_creacio' => '',
    'data_modi' => '',
    'found' => 0,
    'num_alea' => 0,
    'encert' => 0,
    'nota' => '',
    'estrelles' => 0,
    'aux' => ''
];

// Si s'envia el formulari per POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Validar i obtenir l'ID del registre
    $id = intval($_POST['id']); // Assegurar que l'ID sigui un enter

    // Obtenir i sanejar les dades del formulari
    foreach ($data as $key => &$value) {
        if (isset($_POST[$key])) {
            $value = $conn->real_escape_string(trim($_POST[$key]));
        }
    }

    // Actualitzar el registre amb una consulta preparada
    $sql = "UPDATE diccionari SET 
                catala = ?, pron = ?, tipus = ?, c_a_t = ?, qualificador = ?, 
                castella = ?, ajuda = ?, data_creacio = ?, data_modi = ?, 
                found = ?, num_alea = ?, encert = ?, nota = ?, estrelles = ?, aux = ? 
            WHERE id = ?";
    $stmt = $conn->prepare($sql);

    if ($stmt) {
        // Vincular tots els paràmetres
        $stmt->bind_param(
            "ssssssssiisissii", // Tipus de dades: cadenes (s), enters (i)
            $data['catala'], $data['pron'], $data['tipus'], $data['c_a_t'], $data['qualificador'],
            $data['castella'], $data['ajuda'], $data['data_creacio'], $data['data_modi'],
            $data['found'], $data['num_alea'], $data['encert'], $data['nota'], $data['estrelles'], $data['aux'],
            $id
        );

        if ($stmt->execute()) {
            $update_success = true; // Indicar que l'actualització ha estat exitosa
        } else {
            echo "Error en l'actualització: " . $stmt->error;
        }
        $stmt->close();
    } else {
        echo "Error en preparar la consulta: " . $conn->error;
    }
}

// Obtenir el registre seleccionat per ID (si s'especifica)
if (isset($_GET['id'])) {
    $id = intval($_GET['id']); // Assegurar que l'ID sigui un enter

    // Consulta per obtenir les dades del registre
    $sql = "SELECT id, catala, pron, tipus, c_a_t, qualificador, castella, ajuda, 
                   data_creacio, data_modi, found, num_alea, encert, nota, estrelles, aux 
            FROM diccionari WHERE id = ?";
    $stmt = $conn->prepare($sql);

    if ($stmt) {
        $stmt->bind_param("i", $id); // "i" = enter
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows > 0) {
            $stmt->bind_result(
                $id, $data['catala'], $data['pron'], $data['tipus'], $data['c_a_t'], $data['qualificador'],
                $data['castella'], $data['ajuda'], $data['data_creacio'], $data['data_modi'],
                $data['found'], $data['num_alea'], $data['encert'], $data['nota'], $data['estrelles'], $data['aux']
            );
            $stmt->fetch(); // Emplenar les variables amb les dades del registre
        } else {
            echo "No s'ha trobat cap registre amb l'ID especificat.";
        }
        $stmt->close();
    } else {
        echo "Error en preparar la consulta: " . $conn->error;
    }
}

// Tancar la connexió
$conn->close();
?>

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Registre</title>
</head>
<body>
    <h1>Editar Registre</h1>

    <?php if ($update_success): ?>
        <p style="color:green;">Registre actualitzat correctament.</p>
    <?php endif; ?>

    <!-- Formulari per editar el registre -->
    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <input type="hidden" name="id" value="<?php echo htmlspecialchars($id); ?>">

        <label for="catala">Català:</label><br>
        <input type="text" id="catala" name="catala" value="<?php echo htmlspecialchars($data['catala']); ?>" required><br><br>

        <label for="pron">pronunciació:</label><br>
        <input type="text" id="pron" name="pron" value="<?php echo htmlspecialchars($data['pron']); ?>"><br><br>

        <label for="tipus">Tipus:</label><br>
        <input type="text" id="tipus" name="tipus" value="<?php echo htmlspecialchars($data['tipus']); ?>"><br><br>

        <label for="c_a_t">Categoria:</label><br>
        <input type="text" id="c_a_t" name="c_a_t" value="<?php echo htmlspecialchars($data['c_a_t']); ?>"><br><br>

        <label for="qualificador">Qualificador:</label><br>
        <input type="text" id="qualificador" name="qualificador" value="<?php echo htmlspecialchars($data['qualificador']); ?>"><br><br>

        <label for="castella">Castellà:</label><br>
        <input type="text" id="castella" name="castella" value="<?php echo htmlspecialchars($data['castella']); ?>"><br><br>

        <label for="ajuda">Ajuda:</label><br>
        <textarea id="ajuda" name="ajuda" rows="4" cols="50"><?php echo htmlspecialchars($data['ajuda']); ?></textarea><br><br>

        <label for="data_creacio">Data de creació:</label><br>
        <input type="date" id="data_creacio" name="data_creacio" value="<?php echo htmlspecialchars($data['data_creacio']); ?>"><br><br>

        <label for="data_modi">Data de modificació:</label><br>
        <input type="date" id="data_modi" name="data_modi" value="<?php echo htmlspecialchars($data['data_modi']); ?>"><br><br>

        <label for="found">Freqüència/Trobada:</label><br>
        <input type="number" id="found" name="found" value="<?php echo htmlspecialchars($data['found']); ?>"><br><br>

        <label for="num_alea">Número aleatori:</label><br>
        <input type="number" id="num_alea" name="num_alea" value="<?php echo htmlspecialchars($data['num_alea']); ?>"><br><br>

        <label for="encert">Encerts:</label><br>
        <input type="number" id="encert" name="encert" value="<?php echo htmlspecialchars($data['encert']); ?>"><br><br>

        <label for="nota">Notes:</label><br>
        <textarea id="nota" name="nota" rows="4" cols="50"><?php echo htmlspecialchars($data['nota']); ?></textarea><br><br>

        <label for="estrelles">Nombre d'estrelles:</label><br>
        <input type="number" id="estrelles" name="estrelles" value="<?php echo htmlspecialchars($data['estrelles']); ?>"><br><br>

        <label for="aux">Camp auxiliar:</label><br>
        <input type="text" id="aux" name="aux" value="<?php echo htmlspecialchars($data['aux']); ?>"><br><br>

        <button type="submit">Actualitzar</button>
    </form>

    <!-- Enllaç per tornar a la pàgina principal (opcional) -->
    <p><a href="index.php">Tornar al llistat</a></p>
</body>
</html>

AJAX – JSON

Publicat el per

ajax.js

$(document).ready(function () {
   // Obtenir el valor inicial del diccionari
   var diccionariAValor = $("#dicionari_A").data("diccionari"); // Canviem el nom de la variable
   console.log("Valor inicial del diccionari:", diccionariAValor);
//-------------------------
    // Actualitzar la base de dades quan es modifica el camp #bd_A
    $("#bd_A").on("keyup", function () {
        // No permetem que el valor de la bd canviï
        console.log("El valor de la base dades roman constant:", bdValor);
    });
    //-----------------------------------------
   // Actualitzar el diccionari cada cop que es prem una tecla a l'entrada #dicionari_A
   $("#dicionari_A").on("keyup", function () {
       // No permetem que el valor del diccionari canviï
       console.log("El valor del diccionari roman constant:", diccionariAValor);
   });
   // Obtenir el valor inicial de la base de dades
   var bdValor = $("#bd_A").data("bd");
   console.log("Valor inicial de la base de dades:", bdValor);
//----------------------------------------------------------------



   //alert('linia 24');
   //-----------------------------------------
   $("#cercar").on("keyup", function () {
       console.log("Valor inicial del diccionari mut:", diccionariAValor); // Actualitzem aquí també
       var paraula = $(this).val();
       console.log("Tecla premuda: " + paraula);

       if (paraula.length > 0) {
           //--- comprova dades abans de sortir
           console.log("? Dades enviades a cercar_AJ.php:", {
            cercar: paraula,
            diccionari: diccionariAValor,
            bd: bdValor // ? Afegit per veure si la BD s'envia
        });
           //-----------------------------------------
           $.ajax({
               url: "cercar_AJ.php",
               type: "POST",
               data: { 
                   cercar: paraula, 
                   diccionari: diccionariAValor // Enviar també el diccionari amb el nou nom
               },
               success: function (resposta) {
                   console.log("Resposta AJAX rebuda");
                   var resultats = JSON.parse(resposta);
                   var htmlResultats = resultats.map(function (item) {
                       return "<li class='resultat'>" + item + "</li>";
                   }).join("");
                   $("#resultats_autocompletar").html(htmlResultats);
               },
               error: function () {
                   console.error("Error en la crida AJAX.");
               }
           });
       } else {
           $("#resultats_autocompletar").html(""); // Esborra els resultats si no hi ha text
       }
   });

   // Afegir esdeveniment de clic per als elements de resultat
   $(document).on("click", ".resultat", function () {
       var paraulaSeleccionada = $(this).text();
       console.log("Paraula seleccionada: " + paraulaSeleccionada);
       $("#cercar").val(paraulaSeleccionada);
   });
});

exemple simulat de com podries posar un retorn en format JSON (no «JONSON») en el teu codi PHP

<?php
// cercar.php
session_start(); // Inicia la sessió per utilitzar $_SESSION
$host = "localhost";
$user = "root";       // Actualitza aquest valor segons sigui necessari
$pass = "******8!"; // Assegura't de protegir aquest valor
$bd = $_SESSION['bd']; // Nom de la base de dades obtingut de la sessió

// Només assigna a $dbname després d'assignar $bd
$dbname = $bd;

// Crear connexió
$conn = new mysqli($host, $user, $pass, $dbname);

// Comprovar la connexió
if ($conn->connect_error) {
    // Retorna un JSON en cas d'error
    $response = array("status" => "error", "message" => "Error de connexió: " . $conn->connect_error);
    echo json_encode($response);
    die();
}

// Si la connexió és reeixida, envia una resposta JSON
$response = array("status" => "success", "message" => "Connexió reeixida!");
echo json_encode($response);
?>

SQL consulta preparada & Consulta directa ($conn->query)

Publicat el per

Mètode 2: Consulta directa ($conn->query)

$sql = "INSERT INTO $taula (catala, castella) VALUES ('$registre_nou', 'registre nou, completar registre')";
$result = $conn->query($sql);
$respostes = array();

Pros:

  1. Simplicitat :
    • És més curt i fàcil d’escriure, especialment per a desenvolupadors novells o per a casos senzills on no hi ha riscos evidents.
  2. No requereix configuració addicional:
    • Funciona directament amb extensions bàsiques com mysqli sense necessitat de configurar PDO.

Contres:

  1. Vulnerabilitat a injeccions SQL :
    • Com que les variables ($registre_nou) s’insereixen directament a la cadena SQL, un usuari malintencionat podria introduir codi SQL per manipular la consulta. Per exemple:phpCopiar1$registre_nou = «‘; DROP TABLE users; –«;Això podria resultar en una consulta perillosa com:sqlCopiar1INSERTINTO taula (catala, castella) VALUES (»; DROPTABLE users; –‘, ‘registre nou, completar registre’);
  2. Manca de maneig de caràcters especials:
    • Si $registre_nou conté caràcters especials (com ' o \), provocarà errors sintàctics o comportaments inesperats.
  3. Menys flexible:
    • No permet reutilitzar la consulta amb diferents valors sense reconstruir-la completament.
  4. Gestió d’errors limitada:
    • Sense un bloc try-catch, és més difícil detectar i gestionar errors de manera adequada.
  5. Dependència de l’extensió mysqli⁣:
    • Si més tard decideixes canviar a una altra base de dades (com PostgreSQL), hauràs de reescriure tot el codi relacionat amb mysqli.

Mètode 1: Consulta preparada (prepared statement)

$sql = "INSERT INTO $taula (catala, castella) VALUES (:catala, :castella)";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':catala', $registre_nou, PDO::PARAM_STR);
$stmt->bindValue(':castella', 'registre nou, completar registre', PDO::PARAM_STR);
$stmt->execute();
echo "Registre inserit correctament.";

Pros:

0 Seguretat contra injeccions SQL 

$stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (:username, :password)");
$stmt->bindParam(':username', $username);
$stmt->bindParam(':password', $password);

En aquest cas, encara que $username contingui '; DROP TABLE users; --, no es podrà executar com a part de la consulta SQL.

  1. Maneig de caràcters especials :
    • Les consultes preparades escapen automàticament caràcters especials (com cometes simples ' o barres invertides \), prevenint errors sintàctics.
  2. Flexibilitat /Reutilització de consultes
    • Pots utilitzar el mateix patró de consulta preparada per inserir múltiples registres canviant només els valors dels paràmetres.
$stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (:username, :password)");
foreach ($users as $user) {
    $stmt->execute($user);
}

3. Millor gestió d’errors:

  • Amb PDO, pots capturar excepcions (PDOException) i gestionar-les de manera estructurada (per exemple, mitjançant blocs try-catch).
try {
    $stmt->execute();
} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
}

4.Compatibilitat amb bases de dades múltiples:

  • PDO és una interfície genèrica que treballa amb diferents sistemes de gestió de bases de dades (MySQL, PostgreSQL, SQLite, etc.).

Contres:

  1. Més complexitat inicial :
    • Requereix més línies de codi i una comprensió bàsica de les consultes preparades i els lligams de paràmetres.
  2. Dependència de PDO :
    • Necessites configurar una connexió PDO per utilitzar consultes preparades, cosa que pot ser un pas addicional si estàs acostumat a usar extensions més antigues com mysqli.

Script AJAX

Publicat el per

AJAX utilitzat a /0capsa_dic/index.php

$(document).ready(function () {
    // Quan el DOM estigui completament carregat, s'executa aquesta funció.
    $("#cercar").on("keyup", function () {
        // Associem un esdeveniment 'keyup' al camp de text amb ID 'cercar'.
        var paraula = $(this).val(); // Obtenim el valor actual del camp de text.
        console.log("Tecla premuda: " + paraula); // Mostrem el valor a la consola per depuració.

        if (paraula.length > 0) {
            // Si hi ha text al camp de cerca (longitud major que 0), fem una crida AJAX.
            $.ajax({
                url: "cercar.php", // URL del script del servidor que processarà la sol·licitud.
                type: "POST", // Mètode HTTP utilitzat per enviar les dades.
                data: { cercar: paraula }, // Dades enviades al servidor (la paraula buscada).
                success: function (resposta) {
                    // Funció que s'executa si la crida AJAX té èxit.
                    console.log("Resposta AJAX rebuda"); // Missatge de depuració.
                    var resultats = JSON.parse(resposta); // Convertim la resposta JSON a un array JavaScript.
                    var htmlResultats = resultats.map(function (item) {
                        // Creem elements HTML (<li>) per a cada resultat.
                        return "<li class='resultat'>" + item + "</li>";
                    }).join(""); // Unim els elements en una cadena HTML.
                    $("#resultats_autocompletar").html(htmlResultats); // Inserim els resultats al contenidor.
                },
                error: function () {
                    // Funció que s'executa si hi ha un error en la crida AJAX.
                    console.error("Error en la crida AJAX."); // Missatge d'error a la consola.
                }
            });
        } else {
            // Si el camp de cerca està buit, esborrem els resultats previs.
            $("#resultats_autocompletar").html("");
        }
    });

    // Afegim un esdeveniment de clic per als elements de la llista de resultats.
    $(document).on("click", ".resultat", function () {
        var paraulaSeleccionada = $(this).text(); // Obtenim el text de l'element clicat.
        console.log("Paraula seleccionada: " + paraulaSeleccionada); // Mostrem el text a la consola.
        $("#cercar").val(paraulaSeleccionada); // Col·loquem el text seleccionat al camp de cerca.
    });
});

AJAX pot acceptar més d’una entrada

Publicat el per

Modificació de l’AJAX per passar més paràmetres Afegirem bd i taula als dades enviades a PHP.

$(document).ready(function () {
    // Quan el DOM estigui completament carregat, s'executa aquesta funció.
    $("#cercar").on("keyup", function () {
        // Associem un esdeveniment 'keyup' al camp de text amb ID 'cercar'.
        var paraula = $(this).val(); // Obtenim el valor actual del camp de text.
        var bd = "nom_de_la_base_de_dades";  // Nom de la base de dades (pot ser dinàmic).
        var taula = "nom_de_la_taula";      // Nom de la taula (pot ser dinàmic).

        console.log("Tecla premuda: " + paraula); // Mostrem el valor a la consola per depuració.

        if (paraula.length > 0) {
            // Si hi ha text al camp de cerca (longitud major que 0), fem una crida AJAX.
            $.ajax({
                url: "cercar.php", // URL del script del servidor que processarà la sol·licitud.
                type: "POST", // Mètode HTTP utilitzat per enviar les dades.
                data: { 
                    cercar: paraula, // Paraula buscada.
                    bd: bd,          // Nom de la base de dades.
                    taula: taula     // Nom de la taula.
                },
                success: function (resposta) {
                    // Funció que s'executa si la crida AJAX té èxit.
                    console.log("Resposta AJAX rebuda"); // Missatge de depuració.
                    var resultats = JSON.parse(resposta); // Convertim la resposta JSON a un array JavaScript.
                    var htmlResultats = resultats.map(function (item) {
                        // Creem elements HTML (<li>) per a cada resultat.
                        return "<li class='resultat'>" + item + "</li>";
                    }).join(""); // Unim els elements en una cadena HTML.
                    $("#resultats_autocompletar").html(htmlResultats); // Inserim els resultats al contenidor.
                },
                error: function () {
                    // Funció que s'executa si hi ha un error en la crida AJAX.
                    console.error("Error en la crida AJAX."); // Missatge d'error a la consola.
                }
            });
        } else {
            // Si el camp de cerca està buit, esborrem els resultats previs.
            $("#resultats_autocompletar").html("");
        }
    });

    // Afegim un esdeveniment de clic per als elements de la llista de resultats.
    $(document).on("click", ".resultat", function () {
        var paraulaSeleccionada = $(this).text(); // Obtenim el text de l'element clicat.
        console.log("Paraula seleccionada: " + paraulaSeleccionada); // Mostrem el text a la consola.
        $("#cercar").val(paraulaSeleccionada); // Col·loquem el text seleccionat al camp de cerca.
    });
});

cercar.php

<?php
header('Content-Type: application/json'); // Indiquem que la resposta serà en format JSON.
session_start(); // Iniciem la sessió (si és necessari per altres funcions).

if (isset($_POST['cercar'], $_POST['bd'], $_POST['taula'])) {
    // Comprovem que s'hagin rebut tots els paràmetres necessaris.
    $cercar = $_POST['cercar']; // Text introduït per l'usuari.
    $bd = $_POST['bd'];         // Nom de la base de dades.
    $taula = $_POST['taula'];   // Nom de la taula.

    // Conexió a la base de dades (ajusta les credencials segons el teu entorn).
    $conn = new mysqli("localhost", "usuari", "contrasenya", $bd);

    if ($conn->connect_error) {
        // Si hi ha un error de connexió, retornem un missatge d'error en format JSON.
        die(json_encode(["error" => "Error de connexió: " . $conn->connect_error]));
    }

    // Evitem injeccions SQL utilitzant prepared statements.
    $stmt = $conn->prepare("SELECT camp FROM $taula WHERE camp LIKE ?"); // Consulta SQL.
    $cercar = "%$cercar%";  // Cerca parcial (exemple: '%text%').
    $stmt->bind_param("s", $cercar); // Lliguem el paràmetre de cerca.
    $stmt->execute(); // Executem la consulta.
    $result = $stmt->get_result(); // Obtenim el resultat.

    $resultats = []; // Array per emmagatzemar els resultats.
    while ($row = $result->fetch_assoc()) {
        // Recorrem els resultats i afegim cada valor al array.
        $resultats[] = $row['camp'];
    }

    echo json_encode($resultats); // Retornem els resultats en format JSON.

    $stmt->close(); // Tanquem la sentència preparada.
    $conn->close(); // Tanquem la connexió a la base de dades.
} else {
    // Si falten paràmetres, retornem un missatge d'error en format JSON.
    echo json_encode(["error" => "Falten paràmetres"]);
}
?>

Què hem fet?

  1. Passar $cercar, $bd i $taula des d’AJAX a cercar.php.
  2. Utilitzar $bd i $taula a la consulta SQL perquè la cerca sigui més flexible.
  3. Afegir seguretat amb mysqli_prepare per evitar SQL Injection.
  4. Enviar la resposta com JSON, que AJAX pot interpretar fàcilment.

Autocompletar 3

Publicat el per
Respon

Estructura

/autocompletar3 amb BD
│── style.css
│   
│── /js
│   ├── javascripts.js
│── index.html
│── cercar.php
│── Bd_conexions 
    ├── conexio_diccionari_bd.php

index.php

<?php
// Simulació de sessió i configuracions bàsiques
session_start();
?>

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Eines Lingüístiques</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>

    <h1>Cercador amb autocompletat</h1>

    <!-- Formulari de cerca -->
    <form id="cercaForm" method="POST" action="#">
        <div class="search-container">
            <input 
                type="text" 
                id="cercar"
                name="cercar" 
                onkeyup="mostrarAutocompletar()" 
                placeholder="Cerca..." 
                autofocus
            >
            <button type="submit">Cercar</button>
        </div>
    </form>

    <!-- Contenidor de l'autocompletat -->
    <div id="resultats_autocompletar_container">
        <ul id="resultats_autocompletar">
            <!-- Resultats dinàmics via JavaScript -->
        </ul>
    </div>
   
    <script src="js/scripts.js" defer></script>
</body>
</html>

script/javascripts.js 

// Funció per mostrar resultats d'autocompletar

function mostrarAutocompletar() {
    const cercarInput = document.getElementById("cercar");
    const cercarValue = cercarInput.value.trim();
  
    if (cercarValue.length > 0) {
        //alert("linia 8 arriba pero no entra php. Longitud de cercarValue: " + cercarValue.length);
        fetch("BD_conexions/conexio_diccionari_bd.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: "cercar=" + encodeURIComponent(cercarValue)
        })
        .then(response => response.json())
        .then(resultats => {
            const ul = document.getElementById("resultats_autocompletar");
            ul.innerHTML = '';  // Neteja els resultats anteriors

            resultats.forEach(paraula => {
                const li = document.createElement("li");
                li.textContent = paraula;
                li.onclick = function() { seleccionar(paraula); };
                ul.appendChild(li);
            });

            document.getElementById("resultats_autocompletar_container").style.display = resultats.length > 0 ? "block" : "none";
        })
        .catch(error => console.error("Error en l'autocompletat:", error));
    } else {
        document.getElementById("resultats_autocompletar_container").style.display = "none";
    }
}

// Funció per seleccionar una paraula i posar-la al cercador
function seleccionar(paraula) {
    document.getElementById("cercar").value = paraula;
    document.getElementById("resultats_autocompletar_container").style.display = "none";
}

Estils-styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}

input {
    padding: 10px;
    width: 300px;
    font-size: 16px;
    margin-bottom: 10px;
}

#resultats {
    margin-top: 20px;
    border: 1px solid #ddd;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 10px;
}

conexio_diccionari_db.php

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

header("Content-Type: application/json"); // Assegura que s'envia JSON

// Simulació de resultats per a la prova
echo json_encode(["hola", "adéu", "bon dia", "bon vespre", "gràcies"]);
exit(); // Assegura't que no s'envia més contingut després del JSON
?>