AJAXWiki Ajax
Réaliser un wiki
Cet exercice demande une base de donnée "mabase", une table "articles" avec deux champs "idarticle" (type tiny int 10, unsigned, not null, auto_incement, primary key) et "texte" (type text) et trois fichiers: index.php, wiki.js et wiki.php.
Un double clic sur le texte qui apparait dans une cellule de tableau lance la fonction afficher() située dans wiki.js.
Wiki (index.php)
<?php
$base = "mabase"; $serveur = "localhost";
$user = "root"; $pass = "";
$table = "articles";
// ou bien: require "conf/conf.php";
mysql_connect($serveur, $user, $pass) or die(mysql_error());
mysql_select_db($base) or die(mysql_error);
$requette = "SELECT * FROM " . $table;
$resultat = mysql_query("$requette");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/javascript" src="wiki.js"></script>
<title>Exemple</title>
</head>
<body>
<table style="width:90%; margin-left:auto; margin-right: auto;">
<?php
if (!$resultat) { echo "La base est vide"; }
else {
while($ligne = mysql_fetch_array($resultat)) {
echo "<tr>";
echo "<td ondblclick=\"afficher(this, 'texte', " .$ligne["idarticle"] . ")\"> ".$ligne["texte"]."</td>";
echo "</tr>";
}
}
?></table></body></html>
<?php
$base = "mabase"; $serveur = "localhost";
$user = "root"; $pass = "";
$table = "articles";
// ou bien: require "conf/conf.php";
mysql_connect($serveur, $user, $pass) or die(mysql_error());
mysql_select_db($base) or die(mysql_error);
$requette = "SELECT * FROM " . $table;
$resultat = mysql_query("$requette");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/javascript" src="wiki.js"></script>
<title>Exemple</title>
</head>
<body>
<table style="width:90%; margin-left:auto; margin-right: auto;">
<?php
if (!$resultat) { echo "La base est vide"; }
else {
while($ligne = mysql_fetch_array($resultat)) {
echo "<tr>";
echo "<td ondblclick=\"afficher(this, 'texte', " .$ligne["idarticle"] . ")\"> ".$ligne["texte"]."</td>";
echo "</tr>";
}
}
?></table></body></html>
Contenu de wiki.js
function afficher(obj, colonnex, id)
{
// on crée un champ texte
champ = document.createElement("input");
// Test pour diff. nav.
// inner permet de spécifier que cela se passe entre deux balises
// obj.innerText : le texte contenu entre deux balises
// obj est le paramètre this de la fonction afficher (ds index.php.)
if (obj.innerText) { contenu = obj.innerText; }
else { contenu = obj.textContent; // c'est lui qui est utilisé
}
// le contenu du champ récupère le texte entre les deux balises
champ.value = contenu;
// on remplace le 1er objet (soit obj.innerText) par le contenu du champ
// le input deviens le premier nœud (this)
// replaceChild(nouvel enfant, ancien enfant)
obj.replaceChild(champ, obj.firstChild);
champ.select; // on positionne le curseur sur le champ
// au cas ou on double clic à nouveau
champ.ondblclick = function() {alert('Merci de ne pas insister!'); }
champ.onblur = function sortie() {
// inverse de afficher(), donc on récupère la valeure du champ dans contenu
contenu = champ.value;
//test pour récuperer les méthodes quelque soit les nav. ou os
var xhr=null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// createTextNode : pour créer un nouveau emplacement de texte
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { obj.replaceChild(document.createTextNode(contenu), obj.firstChild); }
};
//appel le fichier wiki.php via un get
xhr.open("GET", "wiki.php?nomcolonne="+colonnex+"&valeur="+contenu+"&id="+id, true);
// j'ai fini ma requête :
xhr.send(null);
delete champ;
};
}
function afficher(obj, colonnex, id)
{
// on crée un champ texte
champ = document.createElement("input");
// Test pour diff. nav.
// inner permet de spécifier que cela se passe entre deux balises
// obj.innerText : le texte contenu entre deux balises
// obj est le paramètre this de la fonction afficher (ds index.php.)
if (obj.innerText) { contenu = obj.innerText; }
else { contenu = obj.textContent; // c'est lui qui est utilisé
}
// le contenu du champ récupère le texte entre les deux balises
champ.value = contenu;
// on remplace le 1er objet (soit obj.innerText) par le contenu du champ
// le input deviens le premier nœud (this)
// replaceChild(nouvel enfant, ancien enfant)
obj.replaceChild(champ, obj.firstChild);
champ.select; // on positionne le curseur sur le champ
// au cas ou on double clic à nouveau
champ.ondblclick = function() {alert('Merci de ne pas insister!'); }
champ.onblur = function sortie() {
// inverse de afficher(), donc on récupère la valeure du champ dans contenu
contenu = champ.value;
//test pour récuperer les méthodes quelque soit les nav. ou os
var xhr=null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// createTextNode : pour créer un nouveau emplacement de texte
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { obj.replaceChild(document.createTextNode(contenu), obj.firstChild); }
};
//appel le fichier wiki.php via un get
xhr.open("GET", "wiki.php?nomcolonne="+colonnex+"&valeur="+contenu+"&id="+id, true);
// j'ai fini ma requête :
xhr.send(null);
delete champ;
};
}
Contenu de wiki.php
<?php
$base = "mabase"; $serveur = "localhost";
$user = "root"; $pass = "";
$table = "articles";
mysql_connect("$serveur","$user","$pass") or die("Connexion impossible: ".mysql_error());
mysql_select_db("$base");
$requete = "UPDATE ".$table." SET " . $_GET["nomcolonne"]."='".$_GET["valeur"]."' WHERE idarticle=".$_GET["id"];
mysql_query($requete);
?>
<?php
$base = "mabase"; $serveur = "localhost";
$user = "root"; $pass = "";
$table = "articles";
mysql_connect("$serveur","$user","$pass") or die("Connexion impossible: ".mysql_error());
mysql_select_db("$base");
$requete = "UPDATE ".$table." SET " . $_GET["nomcolonne"]."='".$_GET["valeur"]."' WHERE idarticle=".$_GET["id"];
mysql_query($requete);
?>
