J’ai besoin d’aide pour réaliser un site basé javascript / php,
Si vous pouvez répondre à mes questions, me donner des liens pour des tutos, j’en serais ravis
Je vous explique :
Je suis en apprentissage pour le javascript et je maîtrise le php.
Le problème, c’est que je ne sais pas quoi apprendre dans le javascript pour réaliser ce que je dois faire.
Je cherche à faire un site qui fonctionnerait ainsi :
le serveur exécute un script php avec recours à une base donnée
il l’envoie au client
le client possède une interface javascript qui renvoie des variables pour le script php lors d’un rafraîchissement de la page
le serveur exécute de nouveau le script php
etc…
Mes contraintes :
Chaque utilisateur du site doit être au courant des actions des autres utilisateurs, et ce à la seconde près.
Donc : la page doit être rafraichit le plus souvent possible. Il ne faut pourtant pas que ce soit trop lourd à charger.
Est-ce que j’ai un moyen de rafraîchir juste une partie de la page, comme par exemple une image, mais en exécutant un script php (pour enregistrer les modifications sur la base de donnée et pour pouvoir les renvoyer à chaque utilisateur) ?
Sinon, (et si oui d’ailleurs en fait ^^") connaissez vous des moyens techniques, des astuces pour que je puisse me rapprocher le plus possible de cela ?
N’hésitez pas à me demander des informations complémentaires,
Comment puis-je vérifier par avance qu’une donnée existe dans la base de donnée ?
Je veux dire sans prendre toutes les donnée qui ont les caractéristiques exactes de la donnée que je cherche pour ensuite compter combien elles sont (sâchant que s’il y en a 0, c’est que cette donnée n’existe pas, bien évidement).
Cette méthode est trop longue à mon goût, donc j’aimerais savoir s’il existe une commande pour demander directement à mysql si cette donnée existe.
L’AJAX sert souvent à cela (récupération et affichage d’informations récupérée auprès du serveur suite à action utilisateur).
Il te suffit de demander au moteur de ta base de données de récupérer l’enregistrement où chaque champ à la valeur que tu recherche : s’il te retourne une ligne c’est qu’il existe, sinon c’est qu’il n’existe pas.
(SELECT COUNT(*) FROM table WHERE champ1=‘valeurX’ AND champ2=‘valeurY’ AND champ3=‘valeurZ’)
Le fait qu’il y ait 2 ou 3 lignes (moi j’en compte 3) ne veut pas dire que cela plus lent à exécuter :-/
(Au lieu d’utiliser mysql_fetch_array() tu peux te servir de mysql_num_rows())
Si je comprends bien, AJAX va me permettre de récupérer des données précises sur le serveur pour pouvoir mettre à jour la page.
Et c’est avec DOM que je vais pouvoir rafraîchir les données concernées pour mettre à jour la dite-page.
Ce que j’ai du mal à comprendre, c’est où vont se situer mes instructions php avec ce système.
Si je résume (corrigez moi si je me trompe ça m’aidera sûrement ^^), on a :
(le client demande la page html) client ----> serveur ----> exécution php ----> serveur ----> (le client interagit avec la page) client ----> évènement javascript ----> requête XML (instructions php ? mais où ?) ----> réception des données ----> exécution de javascript et mise à jour de la page
Quand je lis le tutoriel AJAX je ne peux m’empêcher de me dire qu’il me manque des connaissances pour comprendre tout cela.
Lorsque j’effectue une requête XML, où doit se situer, dans mon code, mes requêtes php ?
Dans tous les exemples AJAX que j’ai rencontré, je n’en ai jamais vu avec du code php dedans et ils précisent toujours “on peut optionnelement rajouter des instructions php”.
Seulement je vois mal des requêtes php dans une fonction javascript / AJAX ?
En fait, si quelqu’un avait un exemple, aussi basic que possible, d’une utilisation de AJAX avec du php, ça m’aiderait beaucoup ^^
Des “requêtes PHP”, ça n’existe pas. Tu peux à la rigueur utiliser PHP pour construire le code d’une fonction JavaScript (si la page qu’ouvre le navigateur est générée par PHP).
Tu es d’accord que la “requête XML” est faite par le client/navigateur ?
Donc elle se trouve dans le code de ta/tes fonctions JavaScript.
Généralement ton code JavaScript “AJAX” est en 3 parties :
Récupération des données de l’utilisateur (souvent il s’agit d’accéder aux champs d’un formulaire).
Formatage des données à envoyer (sous forme JSON, XML, texte, …) et création de la requête HTTP (HEAD, GET ou POST) les envoyant.
Récupération de la réponse et modification de la page en conséquence : MAJ des champs, modification contenu d’un
, changement de page, etc…
Le script PHP (situé sur le serveur) ainsi appelé par JavaScript (différent de celui ayant été appelé pour créer la page, lors de la première requête de mon schéma) va recevoir les données et généralement les décoder avant de faire son traitement à lui (genre requête SQL « SELECT * FROM villes WHERE nom_ville LIKE ‘%saisie_utilisateur%’ ») et afficher via des echo une réponse (formattée comme bon te semble, selon la complexité des données : JSON, XML, texte, …) qui sera ainsi renvoyée au code JavaScript (qui attend cette dernière).
Il faut bien comprendre que L’AJAX c’est plusieurs technologies utilisées conjointement : pour la logique et les traitement on utilise PHP dans cet exemple mais on pourrait très bien utiliser un CGI en C ou en Perl, un Servlet Java, etc…
Edité le 17/06/2008 à 12:45
Ma page “page.php” va lancer une requête au serveur avec comme cible la page “traitement.php”.
Ensuite “traitement.php” va faire son job puis va renvoyer les informations à “page.php”.
C’est ça ?
Si c’est ça, alors c’est tout de suite beaucoup plus clair
C’est bien cela, à la nuance près que ça n’est pas “page.php” qui va lancer une requête vers “traitement.php” mais le code JavaScript contenu dans la version cliente de “page.php” (ce que le navigateur à reçu lorsque l’utilisateur a tapé “www.site.com/page.php” dans la barre d’adresse). Et de la même façon, c’est la version client de “traitement.php” qui va répondre au code JavaScript de la version cliente de “page.php”.
Si jamais quelqu’un a un exemple d’utilisation d’AJAX, avec le code source des deux pages concernés (vu que des exemples sans la page visée on en trouve à la pelle), je lui en serais vraiment reconnaissant. Un exemple vaut parfois mieux qu’un long discours ^.^
Bonne journée à toi Raynor, ainsi qu’à ceux qui sont passés sur ce topic.
Voici un petit exemple : La page affiche, sous forme de liste, plusieurs couple champ/valeur. Lorsqu’on clique sur le bouton supprimer la demande de suppression est envoyée au script “script/delete_entree.php” qui l’exécute et indique si ça c’est bien passé ou pas. Si oui alors on supprime le
à l’écran.
Page principale “page.php” :
<script type="text/javascript" src="scripts/add_and_remove-element.js"></script>
<script type="text/javascript" src="scripts/ajax_base.js"></script>
<script type="text/javascript"><!--
function deleteEntree(s_champ) {
var s_idLiEntree = 'entree_configuration_' + s_champ; // Lié à l'attribut "id=" du <li>
// Test de la méthode utilisée
if(!document.getElementById) return;
// Identification de l'élément
var o_liEntree = document.getElementById(s_idLiEntree);
if(!o_liEntree) return;
var s_oldBgColor = o_liEntree.style.backgroundColor;
o_liEntree.style.backgroundColor = 'red';
if(confirm('Etes-vous sûr de vouloir supprimer cette entrée (suppression immédiate) ?')) {
// Requête de suppression pour MySQL
var xmlhttp = getHTTPObject(); // Création de l'objet
if (xmlhttp) {
// On définit ce qui doit se passer quand la page répondra
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) { // 4 : état "complete"
if (xmlhttp.status == 200) { // 200 : code HTTP pour OK
// Traitement de la réponse.
//alert(xmlhttp.responseText);
if(xmlhttp.responseText == 'OK') {
// Suppression à l'affichage
Dom.remove(o_liEntree);
}
else {
alert('Erreur de suppression :\n' + xmlhttp.responseText);
}
}
else if (xmlhttp.status == 404) {
alert('Erreur 404');
}
}
}
xmlhttp.open('GET', 'script/delete_entree.php&champ=' + s_champ, true);
xmlhttp.send(null); // Effectue la requête
}
else {
alert('AJAX non pris en charge.');
}
}
else {
o_liEntree.style.backgroundColor = s_oldBgColor;
}
}
// -->
</script>
<ul>
<?php
foreach($configuration as $entree) {
echo ' <li id="entree_configuration_', $entree['champ'], '">
Champ <strong>', $entree['champ'], '</strong> = ', htmlspecialchars($entree['valeur']), ' /><a href="#" onClick="deleteEntree(\'', $entree['champ'], '\'); return false;" title="Supprimer lentrée">[X]</a>
</li>', "\n";
}
?>
</ul>
Script appelé par la méthode JavaScript deleteEntree() “script/delete_entree.php” :
<?php
$connection = //... Connexion à la base MySQL
$qry = mysql_query('DELETE FROM `table_configuration` WHERE `champ` = ' . $_GET['champ'] . ' LIMIT 1', $connection);
$delete_result = mysql_affected_rows($qry);
if($delete_result) { // Entier différent de 0
echo 'OK';
}
else { // O ou FALSE
if(is_int($delete_result)) { // Si 0
echo 'Champ "', $_GET['champ'], '" inexistant';
}
else { // FALSE
echo 'Erreur SQL : ', mysql_error();
}
}
?>
Fichier JavaScript Contenant des méthodes d’ajout/suppression d’élément au DOM “scripts/add_and_remove-element.js” :
/*
Dustin Diaz
"Add and Remove Elements with JavaScript (reprise)"
[www.dustindiaz.com...](http://www.dustindiaz.com/add-remove-elements-reprise/)
*/
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
Fichier JavaScript Contenant une méthode pour récupérer l’objet XMLHttpRequest (base de l’AJAX) quel que soit le navigateur “scripts/ajax_base.js” :
/****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ******
getHTTPObject()
Renvoie l'objet XMLHttpRequest (ou la valeur `false` si non supporté)
****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ******/
/*
Maurice Svay
"L'objet XMLHttpRequest"
[openweb.eu.org...](http://openweb.eu.org/articles/objet_xmlhttprequest/)
*/
function getHTTPObject()
{
var xmlhttp = false;
/* Compilation conditionnelle d'IE */
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
/* on essaie de créer l'objet si ce n'est pas déjà fait */
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
}
catch (e) {
xmlhttp = false;
}
}
if (xmlhttp) {
// On définit ce qui doit se passer quand la page répondra
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) { // 4 : état "complete"
if (xmlhttp.status == 200) { // 200 : code HTTP pour OK
// Traitement de la réponse.
//alert(xmlhttp.responseText); // Ici on affiche la réponse dans une boîte de dialogue.
}
else if (xmlhttp.status == 404) {
alert('erreur 404');
}
}
}
}
return xmlhttp;
}
/****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ******
****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ******/
(comment ça non ? 
)