Développement côté serveur / Immersailles

DUT INFO 2 -- 2020-2021 -- TP

Avancement des séances de TD :

A chaque séance

• Commentez votre code
• Vérifiez que votre code HTML est conforme aux standards du W3C (validateur en ligne)
• Dès qu'il y a un module fonctionnel, commitez votre code ! Avec des commentaires clairs et courts !
• En fin de séance, commitez/pushez votre code

Séance 1 - Dév. statique front office

• Suivez le TP GIT
• Créez votre dépôt GIT, partagez-le avec moi (via mon adresse email UGE)
• Réalisez le dév. statique (html, css) de la page sur la base de la maquette fournie
• Dans la page "En savoir plus" (accessible en footer), ajoutez le lien vers votre dépôt GIT partagé

Séance 2 - BDD + timeline + dév. back office

• Concevez la BDD (mysql).
• Intégrer une timeline
• Commencez la partie dynamique du backoffice par la connexion

Séance 3 - Dév. objet php + dév. back office

• Intégrer des classes php pour les objets à manipuler dans le cadre du projet
• Poursuivre le développement des fonctionnalités du back office

Séance 4 - Gestion cartographie

• Gérer l'ajout de map : dépose du PNG dans /admin/upload/, reconnaissance/affectation dans le back office au niveau de la gestion d'un niveau, prise en compte, déplacement du fichier dans /images/plans/
• Intégrer le système de cartographie en front et back office (voir la lib à intégrer/utiliser)
• Utiliser ce plan comme exemple à intégrer (télécharger, 15 Mo)
• Utiliser ce logo comme marker à intégrer (télécharger)

Séance 5 - Données sur les "objets historiques" (OH)

• Il existe plusieurs types d'OH : personnage, mobilier, ... (on ne s'occupera ici que des personnages)
• Un même OH peut se retrouver sur n cartes. On créé une seule fiche par OH pour éviter les doublons.

• Créer un OH, choisir un type ("personnage") et lui donner juste un label (ex: "Louis XIV")
• Lier (edit) l'OH à un élément wikidata (ex pour Louis XIV: https://www.wikidata.org/wiki/Q7742)
• Attribuer n liens externes vers des ressources (n<10) en attribuant un label au lien

• Aller sur la fiche wikipédia de Louis XIV
• Dans le menu de gauche, dans "Outils", cliquez sur le lien "Elément Wikidata"
• Cette page recense toutes les données "wikidata" de Louis XIV
• L'ID wikidata est facilement visible dans l'url ou le titre de la page : Q7742
• Ainsi, c'est cet ID qu'il faudra entrer en base de données dans Immersailles pour l'objet historique Louis XIV.
• Pour obtenir facilement au format json les données ouvertes d'un élément wikidata, il suffit d'utiliser cette requête : https://www.wikidata.org/wiki/Special:EntityData/Q7742.json
• "Amusez-vous" à parcourir le json pour y repérer l'emplacement des propriétés à importer
• Pour importer ces données dans un script php, il suffit d'utiliser la fonction file_get_contents sur l'url ci-dessus.
• Ensuite, le format json importé peut être facilement importé via la fonction php json_decode, qui permet de transformer le format json en objet qu'il suffit de parcourir.
• Il suffit ensuite de parcourir l'objet résultat pour afficher/importer ce que l'on souhaite. Les infos qui nous intéressent sont dans $objet->entities->Q7742->claims
• Exemple concret n° 1 : comment récupérer l'image d'illustration de Louis XIV ?
   
  • Je retourne sur la page de l'élément wikidata : https://www.wikidata.org/wiki/Q7742
  • Je parcours la page pour voir les types d'informations disponibles (statements). Je vois que le 2e statement concerne la propriété "image" et qu'il a pour valeur "P18" (regarder l'url du lien "image").
  • Ainsi, pour récupérer la valeur de la 1ère image d'illustration de Louis XIV, il suffit de récupérer la valeur dans $objet->entities->Q7742->claims->P18
  • Je retourne dans le json de l'élément wikidata pour parcourir l'arborescence disponible et voir où récupérer la valeur de l'image...
  • Je vois qu'il faut que je fasse un $objet->entities->Q7742->claims->P18[0]->mainsnak->datavalue->value
  • J'obtiens ça comme valeur $img = "Louis XIV of France.jpg";
     
  • Pour retrouver l'url complète de l'image sur le serveur de wikicommons, il y a ensuite une petite manip à faire :
  • Transformer les espaces en "_", ce qui donne :
    $img = "Louis_XIV_of_France.jpg";
     
  • Puis calculer le md5 du nom du fichier, ce qui donne :
    $md5 = "5f899bed7bfaf3ac3746e5f2d405cbac";
     
  • Comme vous allez le constater ci-dessous, les 2 premiers caractères du md5 sont ensuite utilisés dans l'url de l'image.
  • Et vous verrez également que le nommage de l'url de l'image permet de régler la taille souhaitée.
     
  • L'url de l'image est :
    https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Louis_XIV_of_France.jpg/800px-Louis_XIV_of_France.jpg
    
    Et la miniature :
    https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Louis_XIV_of_France.jpg/220px-Louis_XIV_of_France.jpg
     
• En dehors des problématiques d'images à retrouver sur le serveur wikicommons, il suffira de reproduire et d'adapter ce principe si l'on veut afficher dynamiquement, depuis wikidata, le nom, le sexe, la date de naissance/mort, ... d'un objet historique d'Immersailles.

Séance 6 - Placement des "OH" sur les cartes

• Dans/depuis la fiche d'un OH, pouvoir le placer sur n carte : gérer l'ajout, déplacement, suppression du marker associé à l'OH

Séance 7 & 8 - Finitions

• Finalisation du front et du back
• Tests sécurité

Fonctionnalités :

Fonctionnalités attendues du front office (/) :

• Site public (pas besoin de connexion)
• Timeline dynamique (10 dates maxi) pour changer d'époque
• Level line pour changer de niveau à une date donnée
• Système cartographique pour la carte donnée
• En savoir plus sur les markers positionnés sur la carte : import opendata + liens externes

Fonctionnalités attendues du back office (/admin/) :

• Contributeurs : gérer les markers
• Administrateurs : idem contributeurs + gérer les utilisateurs, années, niveaux/cartes

• Se connecter, se déconnecter (pas besoin d'inscription)
• Récupérer son mot de passe, par envoi d'un email (attention à la sécurité !)
• Gérer les objets historiques via les données ouvertes
• Gérer les marqueurs liés aux objets historiques

• Gérer les utilisateurs (add, edit, suivi des connexions, modifier le type, génération mot de passe)
• Gestion des "époques"/dates (add, edit, delete)
• Gestion des niveaux associés à une "époque" (add, edit, delete) avec gestion du plan associé par upload FTP

Livrable de fin de S3