Discussion :

[AutoDiDev]

Bonjour

Je me permets de poser ici une question liée à un projet que je souhaite entreprendre.
Il s'agit d'un site configurateur d'équipement pour un jeu vidéo, un exemple ici

Je cherche à comprendre le fonctionnement "de fond" afin de pouvoir développer mon site.

Donc j'ai mon modèle de donnée (Base de donnée MySQL) qui contiendra l'ensemble de mes données sur les pièces d'équipements.
J'utiliserais côté serveur le langage PHP pour récupérer ces données, les traiter, et générer la page HTML qui sera affiché côté client (et bien sur CSS pour mettre en forme cette page).

Ensuite, je souhaite "configurer" chaque pièce d'équipement de mon armure, et c'est là qu'entre en jeu JS (peut importe après que ce soit JQuery, Angular ou autre, pour le moment je cherche à comprendre le fond).

Comme on peut le voir sur le site que j'ai cité plus haut, si je clique sur un carré (qui représente un type d'équipement tel que des gants), j'ai une fenetre qui apparaît et qui liste tous les objets de ce type là, donc je suppose que cela fonctionne comme ça:

1. Clique sur bouton, action en javascript qui déclenche une requête
2. Envoi de requête au serveur demandant la liste des objets de type "gant"
3. traitement de la requête en php
4. Récupération des données sur BdD
5. traitement des données en Php
6. renvoi côté client de la liste

Je choisi un objet dans la liste, et là, la magie veut que notre objet choisit apparaisse sur notre équipement (le premier carré sur lequel on a cliqué au début).
Ma question ce situe à ce niveau là. Comment faire pour dire: "Je choisis cet objet, il doit apparaître sur ma page principale" ?

Comme vous pouvez le voir il s'agit vraiment d'une question "de fond" sur la compréhension même de l'interactivité possible entre 2 pages différentes grâce à JS.

Désolé si la question vous paraît extrêmement simpliste, et si c'est le cas j'espère que vous pourrez prendre le temps de fournir une réponse à ma question.
Merci par avance pour l'aide que vous pourrez m'apporter

Cordialement,
AutoDiDev

[SylvainPV]

Pas sûr d'avoir compris la question, mais s'il s'agit de comment serveur et client communiquent, il s'agit tout simplement des requêtes HTTP. Tu peux glisser des infos directement dans l'URL (exemple: monconfigurateur.com/pickItem?perso=archer&itemType=gant), ou alors dans les paramètres et headers data de la requête (c'est ce qui est fait quand tu soumets un formulaire par exemple).

Pour effectuer une requête HTTP, le plus simple est de changer de page, avec une balise <a>, un formulaire ou en JavaScript avec window.location.href="/nouvellePage";. L'autre manière de faire est AJAX : JavaScript peut envoyer une requête HTTP et traiter la réponse de manière asynchrone sans que le navigateur ne change de page. Pour l'utilisateur, c'est complètement transparent, c'est pourquoi c'est la méthode que je te conseille d'employer dans ton cas car l'expérience utilisateur sera grandement améliorée. Personne n'a envie que la page se recharge à chaque fois qu'on sélectionne un item.

Toutefois, utiliser AJAX est un poil plus complexe, je te redirigerai donc vers les différents tutos et FAQ AJAX :
http://ajax.developpez.com/cours/
http://javascript.developpez.com/faq...ipt/?page=Ajax

[thelvin]

Euh... L'exemple donné ne contient qu'une seule page. Il n'y a pas de communication entre pages.

C'est sûrement possible, en principe quand une page en ouvre une autre, elle a accès en JavaScript à son contenu... Mais les fenêtres multiples plus personne n'en veut, et donc il n'y a pas besoin de faire ça, et le site que tu nous montres ne le fait pas.

[AutoDiDev]

Bonsoir à nouveau,

Tout d'abord, merci pour vos réponses rapide

@Thevlin:

Ma demande porte sur quelque chose qui n'apparait pas d'emblée sur le lien, mais qui est liée à l'utilisation du site. Voilà ce que je demande:

Quand on utilise le site cité précédemment, on arrive sur la page vierge, étape 1: Cliquer sur une partie du corps à équiper.


Nous cliquons sur un des carré correspondant à une pièce d'équipement (Torse, Main, Pieds, Epaule). A partir de ce clique, une fenêtre apparaît en "surcouche" du site. Cette fenêtre n'est rien d'autre qu'un tableau de donnée récupéré de la BdD et envoyé au client (quand je regarde le fichier itemsearch.php qui revient en réponse à la requête lancé lors du clique d'ouverture, je récupère un fichier ou les données sont stockées en JSON il me semble...mais pas sûr.

J'arrive donc à l'étape 2: le choix de mon item pour mon carré "Torse"


Etape 3: choix de l'item
Parmi la liste des objets qu'il est possible d'équiper (retour de la requête à la DB, traitement PHP, transfert en JSON, traitement avec JS et afficahge en HTML), je clique sur un item. Dès que j'ai cliqué sur cet item, la liste de sélection (le tableau affiché en surcouche) se ferme, et l'item sélectionné dans le premier carré sur lequel j'ai cliqué à l'étape 1:


@SylvainPV

Ok, globalement j'ai saisis le fait que AJAX me permettra de recharger une partie de ma page principale uniquement, ca éviter l'effet visuel d'un rafraichissement de page (touche F5).

En revanche, je ne comprends pas comment mon carré "Torse" vient contenir l'item que j'ai sélectionné, c'est AJAX qui le permet ?

Désolé pour la manière simpliste dont je m'exprime, mais j'espère que vous arriverez à me comprendre.

Cordialement,
AutoDiDev

[Golgotha]

Bonsoir.

Oui, en effet il n'y à pas deux pages, mais une seule page avec des div qui sont caché et montré celons l'action.

J'ai décortiqué un peu le site exemple, et c'est plutôt bien fait, ce n'est pas du travail d'amateur :
Il y a un plugin maison jQuery dans ui.js qui ajoute la fonction "itemContainer" à un objet jQuery, ce qui lui permet au Click sur un item d'appeler cette fonction avec les paramètres qui vont bien, et la case se met à jour.

Mais rien de bien magique sinon, ce n'est juste qu'il refait le code HTML de la div en question avec du javascript (et jQuery) au click sur l'item de la popin.

[AutoDiDev]

Bonsoir,

Merci Golgotha pour ces informations !!
Alors dans la continuité de ma question, est ce que vous pensez qu'il est possible d'avoir un résultat équivalent à celui que vous avez vu, en utilisant les fonctions JQuery "classique" ?

[Golgotha]

Oui, et même avec du javascript pure.
Après c'est juste de l'organisation et l'utilisation d'outils.

Ce qu'il faut comprendre c'est que l'action du clique sur l'item, va entraîner un modification de l'html par une fonction javascript. Ce n'est pas plus compliqué que ça.