1. Introduction
Aujourd'hui, de nombreuses applications Web, telles que Backpack, Blinksale et Gmail, intègrent la technologie de base de données à AJAX. Cette intégration a un impact énorme sur les applications Web et l'expérience utilisateur en fournissant une technologie puissante pour communiquer avec la base de données sans actualiser le navigateur, ce qui signifie que les données peuvent être transférées en temps réel pendant que l'utilisateur poursuit d'autres interactions.
Cet article se concentrera sur le mécanisme d'intégration technologique ci-dessus. Le code source de référence complet est également fourni. Cet exemple est une simple application de journalisation des tâches dans laquelle chaque titre de poste contient un titre, une description et une date, permettant aux utilisateurs d'ajouter, de modifier et de supprimer des titres de poste. Toutes ces opérations constituent les opérations de base que vous effectuez lorsque vous travaillez avec des données d'enregistrement de base de données, mais cette application va encore plus loin. Un titre de poste peut être transformé en un formulaire modifiable - il sera enregistré ou supprimé de la base de données et affiché dans son nouvel état sans actualiser le navigateur ni interrompre le fonctionnement de l'utilisateur.
Dans cet article, je suppose que vous avez une compréhension de base d'AJAX, MySQL et PHP, ou d'un langage similaire côté serveur. Si vous n'avez pas encore créé d'objet XML HTTP Request, vous pouvez d'abord vous référer à mon article "Comment utiliser AJAX". Ensuite, parlons d’abord du problème de la base de données.
2. Créer la base de données
La première chose à faire est de créer des tables de base de données pour stocker les données de ces postes. J'ai créé une table MySQL appelée informit_ajax - elle contient des champs ID, titre, description et date - ce sont toutes des variables qui apparaîtront à plusieurs reprises dans cet article. Voici le code pour créer la table :
CREATE TABLE ′informit_ajax′ (
′id′ int(11) NON NULL auto_increment,
'date' datetime NON NULL par défaut '0000-00-00 00:00:00',
texte long 'description' NON NULL,
′title′ varchar(100) NOT NULL par défaut '',
CLÉ PRIMAIRE (′id′)
) TYPE=MyISAM;
Vous pouvez exécuter ce code en utilisant n'importe quel outil de requête MySQL ou langage utilisé pour développer l'application. Une fois la base de données préparée, l'étape suivante consiste à créer les fichiers frontaux qui envoient des requêtes au backend PHP.
3. Faites une demande
Le fichier HTML d'index est ici un simple espace réservé aux données - il sera analysé à partir de la base de données. Ce fichier contient des références aux fichiers JavaScript et CSS ; il contient également un gestionnaire de chargement qui effectue la première requête et trois balises div :
Mise en page - utilisée pour centrer le
chargement du contenu de la page - charge les messages pendant le chargement des données demandées, qui seront reçues par le Objet HTTPRequest
· messages utilisés pour afficher chaque donnée de travail analysée
<head>
＜title＞Comment intégrer une base de données avec AJAX＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/tête＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="layout" align="center">
＜identifiant div="posts"＞＜/div＞
＜p＞＜input type="button" value="ajouter un message" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜identifiant div="chargement"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
La première requête est générée lors du chargement de la page. Cette requête envoie une requête get à une classe PHP que nous créerons plus tard ; mais nous devons d'abord créer des méthodes d'analyse pour la réponse à la requête. Le fichier de requête JavaScript gère tout le travail de base, tel que la création d'objets, l'envoi de requêtes et la vérification de l'état de préparation. Lorsqu'une réponse est reçue de l'objet Request, j'utilise ce fichier de tâches JavaScript pour gérer la génération HTML de ces tâches. La méthode onResponse est assez puissante car elle gère la génération de pages HTML pour chaque titre de poste dans les versions texte et formulaire, et les place dans leurs propres balises div personnalisées ; de cette façon, nous pouvons facilement les générer lors de l'interaction de l'utilisateur. De cette façon, nous pouvons basculer entre les versions texte et formulaire de chaque message – cela peut être accompli en cliquant sur un lien « modifier ce message ». Voici le code de la page HTML créée pour chaque poste. Vous pouvez voir l'implémentation complète de la méthode dans le fichier source de téléchargement correspondant de cet article.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div class='titre' id='titre_"+ i +"'＞"+ _titre +"＜/div＞"
+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div＞"
+ "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div＞"
+ "＜a href="javascript:toggle('"+ i +"');"＞éditer ce message＜/a＞＜br/＞"
+ "＜/div＞"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞"
+ "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div ＞"
+ "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'＞"+ _description +"＜/ zone de texte＞＜/div＞"
+ "＜div classe='date'＞"+ _date +"＜/div＞"
+ "＜input type='button' name='cancel' value='cancel' onclick="javascript:toggle('"+ i +"');"＞"
+ "＜input type='button' name='delete' value='supprimer ce message' onclick="javascript:deletePost("+ _id +");"＞"
+ "<input type='button' name='submit' value='save this post' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";
La version texte de chaque message affiche simplement le titre, la description et la date ainsi qu'un lien "modifier ce message". La version formulaire de chaque message comporte trois boutons :
·"annuler Bouton " - revient simplement le statut de la publication à la version texte.
· Bouton "supprimer cette publication" - envoie l'ID de la publication actuelle à l'objet PHP pour la supprimer de la base de données.
· Bouton "enregistrer cette publication" - permet à l'utilisateur de Le travail nouveau ou modifié est enregistré sur le serveur.
Les méthodes de base pour gérer la communication des demandes côté serveur sont les méthodes onResponse, saveNewPost, deletePost et getPost. Il existe également des méthodes getter et setter qui stockent l'index du travail en cours d'exécution ; . La méthode fournit la valeur d'index actuelle à ces méthodes principales afin que la position correcte puisse être mise à jour avec les informations correctes basées sur cet index. Voici un bref résumé pour chaque méthode principale (à l'exclusion de onResponse, puisque nous avons déjà examiné ses fonctionnalités). . Description et exemple de code :
· La méthode saveNewPost suivante enregistre la nouvelle publication en collectant et en envoyant les valeurs d'entrée du formulaire à un objet PHP et définit la méthode getPost comme méthode de rappel onreadystatechange :
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· La méthode getPost ci-dessous est une méthode de rappel - elle est responsable de la mise à jour d'une seule publication lorsqu'une réponse est reçue de l'objet PHP :
function getPost(){
si (checkReadyState (requête)) {
var réponse = request.responseXML.documentElement;
var _title = réponse.getElementsByTagName('title')[getIndex()].firstChild.data;
var _description = réponse.getElementsByTagName('description')[getIndex()].firstChild.data;
var _date = réponse.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("description_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
basculer(getIndex());
}
}
· La méthode deletePost ci-dessous envoie l'index actuel sous forme de requête à l'objet PHP, qui supprimera finalement l'enregistrement dans la base de données et répondra avec une position mise à jour :
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
Étonnamment, la partie la plus compliquée est passée. Analysons la partie la plus critique : l'interaction avec la base de données.
4. Interagir avec la base de données
Afin d'interagir avec la base de données, vous devez créer des méthodes pour récupérer, insérer, remplacer et supprimer des positions. J'ai choisi de créer une classe de publication avec des méthodes get, save et delete pour gérer ces interactions. Cette classe possède également une référence au fichier de connexion à la base de données (utilisé pour se connecter à la base de données). Vous devez remplacer le nom de connexion, le mot de passe et le nom de la base de données par vos propres informations de base de données.
DÉFINIR ('DB_USER', 'NOM UTILISATEUR');
DÉFINIR ('DB_PASSWORD', 'PASSWORD');
DEFINE ('DB_HOST', 'localhost');
DÉFINIR ('DB_NAME', 'DATABASE');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Impossible de se connecter à MySQL : ' . mysql_error() );
La référence au fichier de connexion et le nom de la base de données sont dans le constructeur de cette classe. Votre constructeur devrait ressembler au code suivant :
function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
}
La méthode dbConnect suivante est responsable de la création de la connexion - en transmettant les informations de connexion à la base de données ; cette méthode est réutilisée dans toutes les méthodes principales avant d'interroger la base de données :
function dbConnect(){
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
La méthode get suivante parcourt la table de la base de données, crée une chaîne XML basée sur la ligne de la base de données et renvoie la chaîne au demandeur :
function get(){
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY id";
$result = mysql_db_query (DB_NAME, $query, LINK) ;
$xml = "＜?xml version="1.0" encodage="ISO-8859-1" ?＞n";
$xml .= "＜messages＞n";
while($row = mysql_fetch_array($result)) {
$xml .= "＜poster＞n";
$xml .= "＜id＞" . $row['id'] . "＜/id＞n";
$xml .= "＜date＞" . $row['date'] '＜/date＞n";
$xml .= "＜titre＞＜![CDATA[" . $row['titre'] "]]＞＜/titre＞n";
$xml .= "＜description＞＜![CDATA[" . $row['description'] "]]＞＜/description＞n";
$xml .= "＜/post＞n";
}
$xml .= "＜/posts＞";
mysql_close();
header("Content-Type: application/xml; charset=UTF-8");
écho $xml;
}
La méthode de sauvegarde suivante atteint deux objectifs en gérant les positions de mise à jour et d'insertion :
function save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
$result = @mysql_query ($query);
si (mysql_num_rows($result) > 0)
{
$query = "UPDATE $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
$result = @mysql_query($query);
}
autre
{
$query = "INSÉRER DANS $this->table (titre, description, date) VALEURS ("$titre", "$description", MAINTENANT())";
$result = @mysql_query($query);
}
mysql_close();
$this->get();
}
La méthode delete ci-dessous est responsable de la suppression d'un emplacement en fonction de l'ID passé en paramètre. Appelez ensuite la méthode get pour renvoyer les nouvelles données dans le fichier de requête :
function delete($id){
$this->dbConnect();
$query = "DELETE FROM $this->table WHERE id='$id'";
$result = @mysql_query($query);
mysql_close();
$this->get();
}
5. Application complète
Afin d'intégrer les parties ci-dessus ensemble, un fichier simple doit être créé pour servir de pont de communication entre les requêtes HTTP XML et les objets PHP. À ce stade, la page crée non seulement des objets PHP, mais reçoit également des requêtes et transmet des variables à des méthodes générées dynamiquement - dans ce cas, obtenir, enregistrer ou supprimer. Un exemple de requête ci-dessous inclut une méthode $ et les variables fiables $id, $title et $description.
require_once("../classes/Post.class.php");
$post = nouveau message();
$post->$method($id, $title, $description);
Nous discuterons plus en détail de ces techniques dans le futur. Le développement Web d'aujourd'hui semble à nouveau jeune et dynamique, et nous avons la chance de faire partie de cette nouvelle ère technologique.