Arxiu de l'autor: admin

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
?>

autocompletar 2

Publicat el per

estructura

/autocompletar 2 sense BD
│── style.css               (Estils per al formulari i els resultats)
│   
│── /js
│   ├── javascripts.js      (Logica JavaScript per l'autocompletat)
│
│── index.html              (Pàgina principal amb el formulari)
│── cercar.php              (No el necessites en aquest cas ja que és una simulació, 
│── Bd_conexions 
│   ├── conexio_diccionari_bd.php   (Simulació de la connexió amb la base de dades)


/autocompletar 2 sense 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>
    <script src="js/scripts.js" defer></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>

</body>
</html>

script/javascripts.js (Logica del JavaScript per l’autocompletat)

// Funció que mostra els resultats d'autocompletar
function mostrarAutocompletar() {
    const cercarInput = document.getElementById("cercar");
    const cercarValue = cercarInput.value.trim();

    if (cercarValue.length > 0) {
        // Simulació de dades d'autocompletar
        const resultats = ['hola', 'adéu', 'bon dia', 'bon vespre', 'gràcies'];

        // Filtrar resultats basat en l'input de cerca
        const resultatsFiltrats = resultats.filter(paraula => 
            paraula.toLowerCase().includes(cercarValue.toLowerCase())
        );

        // Mostrar els resultats
        const ul = document.getElementById("resultats_autocompletar");
        ul.innerHTML = '';  // Neteja els resultats anteriors

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

        // Mostrar l'ul si hi ha resultats
        document.getElementById("resultats_autocompletar_container").style.display = "block";
    } else {
        // Si l'input està buit, amaga els resultats
        document.getElementById("resultats_autocompletar_container").style.display = "none";
    }
}

// Funció que selecciona una paraula i la posa a l'input
function seleccionar(paraula) {
    document.getElementById("cercar").value = paraula; // Posa el valor seleccionat
    document.getElementById("resultats_autocompletar_container").style.display = "none"; // Amaga els resultats
    document.getElementById("cercaForm").submit(); // Envia el formulari
}

Fitxer styles.css (Estils per al formulari i els resultats)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#cercar {
    width: 60%;
    padding: 10px;
    font-size: 16px;
    margin-right: 10px;
}

button {
    padding: 10px;
    font-size: 16px;
}

#resultats_autocompletar_container {
    position: relative;
    max-width: 60%;
    margin: 0 auto;
}

#resultats_autocompletar {
    background-color: white;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

#resultats_autocompletar li {
    padding: 10px;
    cursor: pointer;
}

#resultats_autocompletar li:hover {
    background-color: #f0f0f0;
}

Fitxer BD_conexions/conexio_diccionari_bd.php (Simulació de connexió amb la base de dades)

<?php
// Simulació d'una base de dades amb paraules per buscar
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $cercar = isset($_POST['cercar']) ? $_POST['cercar'] : '';
    
    // Dades de prova per simular resultats de cerca
    $resultats = ['hola', 'adéu', 'bon dia', 'bon vespre', 'gràcies'];

    // Filtrar resultats segons la cerca
    $resultats_filtrats = array_filter($resultats, function($paraula) use ($cercar) {
        return stripos($paraula, $cercar) !== false;
    });

    // Retornar els resultats en format HTML
    foreach ($resultats_filtrats as $resultat) {
        echo "<li onclick=\"seleccionar('$resultat')\">$resultat</li>";
    }
}
?>

Explicació dels fitxers:

  1. index.php: Aquest és el fitxer principal que conté el formulari de cerca i els resultats d’autocompletar. S’hi ha afegit una secció on es mostren els resultats filtrats a mesura que l’usuari escriu.
  2. scripts.js: Aquest script maneja la lògica de l’autocompletar. Utilitza la funció mostrarAutocompletar() per filtrar i mostrar els resultats quan l’usuari escriu alguna cosa, i seleccionar() per omplir el camp de cerca amb la paraula seleccionada.
  3. styles.css: Aquest fitxer conté els estils bàsics per al disseny del formulari i els resultats d’autocompletar. Els estils estan dissenyats per tenir una caixa de cerca amb un estil net i mostrar els resultats de cerca de manera interactiva.
  4. conexio_diccionari_bd.php: Simula una base de dades que retorna resultats segons el terme de cerca que s’envia per AJAX. Per ara, només simula una cerca de paraules en un array predefinit.

Com provar-ho:

Prova a seleccionar un resultat i veuràs com es completa l’input i es realitza el submit del formulari (simulant una cerca real).

Coloca aquests fitxers en el teu servidor local (XAMPP, WAMP, etc.).

Obre index.php en el navegador. Quan escriguis a l’input de cerca, es mostraran els resultats d’autocompletar sota el camp de cerca.

Autocompletar

Publicat el per

flux

Usuari tecleja → onkeyup= cercar_bd(); → AJAX envia ‘cercar’ → PHP te dades+cercar, processa i retorna #resultats → JavaScript mostra el resultat

Tot el procés de consulta es fa de manera asincrònica a través d’AJAX, la qual cosa permet que la pàgina no es recarregui completament i els resultats es mostrin dinàmicament sense interrupcions. Això fa que l’experiència de l’usuari sigui més fluida.

Estructura

/autocompletar
│── /css
│   ├── style.css
│── /js
│   ├── script.js
│── index.html
│── cercar.php
│── db_config.php

cercar.php


if (isset($_POST['cercar'])) {
    $paraula = $conn->real_escape_string($_POST['cercar']);
    error_log("Paraula rebuda: " . $paraula); // Registra la paraula rebuda per la crida AJAX

    $sql = "SELECT catala FROM catala_iec WHERE catala LIKE '$paraula%' LIMIT 5";
    $result = $conn->query($sql);

    $respostes = array();
    
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $respostes[] = htmlspecialchars($row['catala']);
        }
    } else {
        $respostes[] = "No s'han trobat resultats.";
    }
    
    // Retornem les dades en format JSON
    echo json_encode($respostes);
    error_log("Resposta JSON enviada: " . json_encode($respostes)); // Registra la resposta enviada en format JSON
}

$conn->close();
?>



index.html

<!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>Autocompletar</title>
    <link rel="stylesheet" href="styles.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>

    <h1>Cercador & autocompletat</h1>

    <!-- Formulari de cerca -->
    <form id="cercaForm" method="POST" action="cercar.php">
        <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>

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;
}

js/script.js (AJAX per a la cerca)

$(document).ready(function () {
    $("#cercar").on("keyup", function () {
        var paraula = $(this).val();
        console.log("Tecla premuda: " + paraula);

        if (paraula.length > 0) {
            $.ajax({
                url: "cercar.php",
                type: "POST",
                data: { cercar: paraula },
                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);
    });
});

db_config.php

<?php
$host = "localhost";
$user = "root";       // Canvia-ho si cal
$pass = "beseit00";           // Canvia-ho si cal
$dbname = "polidic_cat"; // Nom de la teva BD

$conn = new mysqli($host, $user, $pass, $dbname);

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