Interfacer Flash, PHP et MySQL ?

Origine:

Voulant me lancer une bonne fois pour toutes dans le monde fascinant des bases de données, mais si possible en m'amusant, il me fallait une idée, à l'origine de celle-ci le site Mr Picasso Head , le concept était séduisant et sans aller forcement aussi loin dans les fonctionnalités, le défi semblait être à ma hauteur. Je résolus donc de simplifier au maximum, car après tous c'est mon premier site en Flash PHP MySQL, et puis si je voulais être intelligible autant ne pas créer une usine à gaz.... Le Tangram s'est alors imposé naturellement: un nombre connu (et relativement faible) de pièces et des commandes simples (bouger, tourner et retourner) pour une (quasi) infinité de combinaisons.

Structure globale:

Une fois le projet défini, il fallut ensuite s'attacher à définir l'architecture du site. Je voulais faire le site en PHP car je ne connaissais aucun langage serveur, mais celui-ci avait l'avantage d'être disponible chez tous les hébergeurs, et de posséder une syntaxe très proche de l'actionscript dont je suis familier. Pour la partie HTML, je me suis fixé sur l'XHTML 1 transitionel qui impose une syntaxe rigoureuse (ce qui est plutôt une bonne habitude à prendre) tout en permettant target="_blank", c'est-à-dire des liens permettant de sortir du site. Le XHTML incite également à séparer le fond de la forme, la mise en page étant assurée en CSS par une feuille de style séparé. Flash m'imposa l'encoding (ou charset) des pages, car il fonctionne en UTF-8, j'aurais put faire ma page en ISO-8859-1 mais j'aurais alors du transcrire, à l'aide d'utf8_encode() / utf8_decode(), tous les échanges entre ma base de données et mon affichage HTML d'une part et Flash d'autres part.

Structure MySQL:

Je m'attelais ensuite à réfléchir à la base de données, celle-ci serait composée de pas moins de 33 champs et en voici la structure (exporté avec phpMyAdmin):

-> Les 5 premiers champs servent à l'identification des Tangrams:

-> Les 28 suivants servent à positionner les 7 pièces:

function.php

Il est utile quand on crée un site en php de regrouper toutes les fonctions et déclarations de variables communes à toutes les pages dans un même fichier puis de l'inclure dans chaque page, cela facilite la maintenance puisque si on veut modifier le menu pour ajouter une page supplémentaire, la modification de cet unique fichier se répercute naturellement sur toutes les pages ou il est inclus.

légende: les parties PHP et les parties HTML

tangram.css

La feuille de style n'a rien d'extraordinaire, je commence par supprimer tous les paddings et margins, car IE et FF ne les géres pas de la même manière (pour éviter toutes surprises, je prefere remettre les compteurs à zéro), après je redefinis les balises communes à toutes les pages, et enfin distingue les différentes parties...

Notez l'astuce du style du menu qui permet, en conjonction avec monheader($onglet) de fonction.php qui écrit le nom de la page comme ID du body, de sélectionner un style diffèrent pour le lien de la page ou l'on se trouve.

insert.php et tangram_make.fla

Après avoir créé ma structure, ainsi que ma base de données, je m'attelais enfin au travail le plus intéressant : le Flash permettant de manipuler et créer de nouvelles figures. Le fichier fla est disponible au téléchargement ici (clic droit puis enregistrer la cible sous...).Le fichier PHP d'insertion des données est très simple, il se contente de récupérer les données $_POST envoyé par Flash, supprime certains caractères pour éviter les problèmes de base de données ou de javascript, puis construit la requête d'insertion en oubliant pas d'y ajouter la date...

jouer.php, tangram_view.fla et tangram_play.fla

Les deux fichiers Flash sont diponibles ici: tangram_view.fla et tangram_play.fla (clic droit puis enregistrer la cible sous...).
La source du fichier jouer.php est détaillée ci-dessous:

liens.php et liens.xml

Pour compléter cette introduction à PHP, Flash et MySQL, je rajoute ici un petit script de transformation de XML en XHTML. Vous pouvez trouver ici le XML source, et voici le code de liens.php:

Si vous avez d'autres questions, vous pouvez les poser ici sur le post dédié du Forum de hardware.fr