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.

[AutoDiDev]

D'accord, bon donc même si ca me prends du temps, il est possible que j'y arrive...ou pas

J'aurais 2 autres questions toujours concernant ce site et concernant le fonctionnement de JS.

Première question directement lié aux précédentes. Si vous avez joué un peu avec le site, vous avez pu voir que l'on peut appliquer des modifications à l'item. On peut "fixer" sur une pièce d'équipement des pierres. En terme de développement, attribuer une pierre à un objet est équivalent au fait d 'attribuer un item particulier à une partie du corps du personnage ? Je pense que oui, mais je souhaite confirmation pour pas me louper dès le début

Enfin, ma deuxième question concerne quelque chose de particulier:

Si l'on va sur le site "de base", c'est à dire cette url: http://aion.aspirine.su/ toutes les cases sont vides.
En revanche, si l'on va sur un lien particulier (que l'on trouve en utilisant le bouton "share" en bas à droite), on retrouver une "sauvegarde" d'une liste d'item sélectionné auparavant :http://aion.aspirine.su/#!BaA65Lx

Est ce que c'est une fonction de Javascript qui permet ça ?


Voilà, une fois que vous aurez pu m'éclairer là dessus, je pourrais passer le sujet en résolu, car vous m'aurez sacrément aider à y voir plus clair


Cordialement,
AutoDiDev

[Golgotha]

Comme je le disais plus haut, le site est réalisé par un développeur très expérimenté.

Je vais commencer par la deuxième question, le "hash" (!BaA65Lx ) est réalisé à partir d'une fonction javascript. Le développeur à réussi à condenser toutes les informations du personnage dans un format relativement petit, et je dois dire que je suis même étonné par la complexité de l'algorithme mise en place pour faire cela, c'est sûr que c'est "beau" mais ça demande pas mal de temps, alors qu'une sauvegarde plus conventionnel des infos du personnage aurait pu être faite.. C'est là qu'on voie que le développeur maîtrise sont art.

Pour répondre à la deuxième question, il faut commencer par comprendre que le développeur à construit sont application web en deux temps :
Premièrement il y a la partie "model" du site web, c'est à dire que une partie de son code consiste à modéliser ce qu'il va afficher, c'est à dire : le personnage.
Tout cela est contenu dans le fichier calc.js qui contient l'objet Calc en javascript. Cet Objet Calc, possède tout un tas de fonction comme par exemple loadHashData qui
prends en paramètre un hash (comme par exemple "!BaA65Lx") et qui va s'occuper de re-remplire les propriétés de l'objet Calc, comme il faut.

Deuxièmement il y à la partie affichage, situé dans le fichier ui.js (quoi qu'il y à aussi de l'affichage dans calc.js...) Pour faire court, un action sur l'interface (le site web)
va affecter l'objet Calc en javascript, qui va faire l'action en question, puis répercuter ces changements sur l'interface à l'aide de l'objet UI dans ui.js

Donc il faut bien avoir à l'idée ces deux concepts avant de commencer un projet similaire, d'une part un Objet javascript et d'autre part l'affichage de cet objet.

Pour en revenir à ta question, "fixer" sur une pièce d'équipement des pierres : va être traité par un fonction de l'objet Calc, puis répercuté si il y à lieu sur l'affichage.
En l’occurrence, cela va appeler la fonction setEnchantValue de l'objet Calc, puis appeler la fonction refreshItem qui elle même appel itemContainer

[AutoDiDev]

Ok, et bien ça fait pas mal d'infos tout ça ! Merci beaucoup, ça fait plaisir de trouver des réponses claires et précises

Après, avec tout ce que tu viens de me dire, je sais pas du tout si les tutos JS que j'ai croisé suffiront, c'est le début d'un grand périple.

Merci à tout ceux qui ont pris le temps de répondre à mes questions !
Y'a plus qu'à comme on dit