AJAXWiki Ajax
Réaliser un wiki
Un wiki est un système de gestion de contenu de site web qui rend les pages web modifiables par tous les visiteurs autorisés.
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);
?>
