Aller au contenu

Base de données AJAX

Introduction

Dans cet article, nous explorerons comment utiliser PHP, Ajax et les bases de données pour créer des pages web dynamiques qui améliorent l'expérience utilisateur et l'engagement.

Qu'est-ce que PHP ?

PHP est un langage de script côté serveur utilisé pour développer des applications web. PHP est facile à apprendre et compatible avec divers systèmes d'exploitation tels que Linux, macOS et Windows. PHP a une large gamme d'applications, allant du développement de pages web à la création d'applications de bureau autonomes.

Qu'est-ce que Ajax ?

Ajax est une technique utilisée dans le développement web qui permet de mettre à jour les pages web de manière asynchrone sans avoir besoin de recharger la page entière. Ajax permet de créer des pages web dynamiques capables de répondre aux saisies de l'utilisateur en temps réel.

Qu'est-ce qu'une base de données ?

Une base de données est un ensemble structuré de données qui peut être consulté, géré et mis à jour. Les bases de données sont utilisées dans le développement web pour stocker des données qui peuvent être interrogées et manipulées afin de fournir du contenu dynamique aux utilisateurs.

Utilisation de PHP, Ajax et des bases de données pour créer des pages web dynamiques

PHP, Ajax et les bases de données peuvent être utilisés ensemble pour créer des pages web dynamiques offrant une riche expérience utilisateur. Pour y parvenir, vous devez suivre les étapes suivantes :

  1. Établir une connexion à la base de données à l'aide de PHP
  2. Récupérer les données de la base de données à l'aide de PHP
  3. Créer un script côté serveur pour gérer la requête Ajax
  4. Utiliser Ajax pour mettre à jour la page web avec les données récupérées

Établissement d'une connexion à la base de données

Pour établir une connexion à la base de données, vous devez utiliser le constructeur de la classe mysqli de PHP. Ce constructeur prend en arguments le nom d'hôte de la base de données, le nom d'utilisateur, le mot de passe et le nom de la base de données. Une fois la connexion établie, vous pouvez exécuter des requêtes SQL pour manipuler les données dans la base de données. Pour des raisons de sécurité, validez et nettoyez toujours les entrées utilisateur.

php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

Récupération des données de la base de données

Pour récupérer des données de la base de données, vous devez utiliser des requêtes SQL. Les requêtes SQL peuvent être exécutées à l'aide de la méthode $conn->query() en PHP. Le résultat de la requête est renvoyé sous forme de jeu de résultats qui peut être parcouru pour récupérer les lignes de données individuelles.

php
$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);
if (!$result) {
    die("Query failed: " . $conn->error);
}
while ($row = $result->fetch_assoc()) {
    echo $row["name"] . "<br>";
}

Création du gestionnaire côté serveur (connect.php)

La requête Ajax dans le code côté client appelle connect.php. Ce fichier doit combiner la connexion à la base de données, l'exécution des requêtes et la logique de sortie en un seul script fonctionnel. Il gère également les erreurs potentielles de manière élégante.

php
<?php
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);

if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo $row["name"] . "<br>";
    }
} else {
    echo "Error: " . $conn->error;
}
$conn->close();
?>

Utilisation d'Ajax pour mettre à jour la page web

Une fois les données récupérées de la base de données, vous pouvez utiliser Ajax pour mettre à jour la page web avec ces données. Ajax vous permet de mettre à jour une partie de la page web sans avoir à recharger la page entière. Pour y parvenir, vous devez créer un objet XMLHttpRequest en JavaScript et envoyer une requête à un script côté serveur (par exemple, connect.php). Une fois que le serveur renvoie la réponse, vous pouvez mettre à jour la page web avec les données récupérées.

html
<div id="data-container">Loading...</div>
<button onclick="loadData()">Load Data</button>
javascript
function loadData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'connect.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            document.getElementById('data-container').innerHTML = xhr.responseText;
        } else {
            document.getElementById('data-container').innerHTML = 'Error loading data.';
        }
    };
    xhr.onerror = function() {
        document.getElementById('data-container').innerHTML = 'Network error.';
    };
    xhr.send();
}

Conclusion

PHP, Ajax et les bases de données fonctionnent ensemble pour créer des applications web dynamiques et interactives. En suivant les étapes ci-dessus, vous pouvez créer des pages réactives qui mettent à jour le contenu sans rechargement.

Pratique

À quoi sert AJAX dans PHP ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.