24 KiB
Objectif du site et notes générales
Ce site web est fait pour les PPAs qui arrivent à l’INSA et en particulier pour la semaine d’accueil. Il a été fondé par Arnaud Vergnet. Sur le site, on doit retrouver toutes les informations nécessaires liées à la semaine d’accueil. Le site est fait à une fin humoristique. Il sert à guider les PPAs mais également à les amuser avant leur rentrée.
Des connaissances en HTML et CSS sont requises mais peuvent être plus ou moin apprises sur le tas, la page de la com_ville en revanche demande des connaissances en php(voir avec Baptiste Rébillard pour le fonctionnemet ou dans la section "pages" qui arrivera plus tard dans ce readme).
Le site est originelement celui de Arnaud Vergnet, mais en 2022 Baptiste Rébillard et Guillaume Joffre ont entrepris de le modifier de fond en comble (Baptiste le back et Guillaume le front). Donc si vous avez des questions le site on le connait par coeur !
Ce readme est également rédigé par Baptiste Rébillard il faudra donc le mettre à jour mais s'il n'est pas assez compréhensible il ne faut pas hésiter à me poser des questions.
PS : je suis éclaté en orthographe donc je m'excuse... Donc ce document va sûrement vous arracher les yeux mais il a le mérite d'exister !
Structure
Les vues et script (pages vues par l'utilisateur) sont dans le main folder (./).
les vues et script d'administrations sont dans le dossier admin (/admin).
le dossier phpCAS-1.3.6 sert à stocker les script qui permettent le bon fonctionnement des script de connexion géré par le CSN de l'insa.
le dossier structure contient la structure générale des pages (template, menu et footer)
le dossier assets contient plusieurs dossiers :
- css : contient les fichiers css de TOUT le site sauf des pages d'administrations, dans le sous dossier page chaque feuille de style est importé dans la vue correspondate (ex: la page index.php appelle assets/page/index.css voir le fichier structure/template.php pour plus de détails)
- fonts : contient la police mario que nous avons fait mais tu peux être modifié selon le theme de la semaine d'accueil, contient le script color.php qui permet de générer des textes avec des couleurs aléatoire avec la fonciton colored_text si on importe dans la vue ce script (peut également être supprimé selon le theme de la semaine), cursor.php sert à faire suivre une image selon la souris (ici juste pour troller sur la page index donc peut être supprimé).
- img : contient toutes les images du sites.
- pdf : contient les pdf que les PPAs peuvent télécharger => à mettre à jour !
un dossier inexistant dans le repo (gitetud) est nécessaire au fonctionnement, mais n'est pas indiqué pour des raisons de sécurité : un dossier script (/script) contenant le script de connexion à la base de données, voir avec le précédent développeur !
Pour ce qui est de la structure générale,
Il est important de comprendre que les principales modifications sont à faire sur les vues, les fichier css dans assets/css/page correspondant, le menu via le fichier /structure/menu.php avec son fichier css correspondant : assets/css/menus.css, le template via le fichier structure/templace.php et son fichier correspondant assets/css/templace.css.
Pour approfondir il faut mettre à jour les scripts de fonctionnement de la com_ville et bien les tester ! (si tu ne t'en sent pas capable surtout délégue ce travail à la com ville qui reviendra alors au bon vieu papier/stylo).
Structure - base de données
Pour commencer, il est peut être utilile de mentionner le fait que toutes les tables commenceant par "matomo_" servent à matomo et ne doivent pas être modifié.
admin
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(11) | X | |
| pseudo | varchar(50) | ||
| perm | int(11) |
le pseudo est l'identifiant INSA, les perms sont entre 0 et 3 :
- 0 pour GDA
- 1 pour Ville
- 2 pour Bureau
- 3 pour Admin (voir plus loin dans la section admin pour le détail).
enigma
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(11) | X | |
| answer | varchar(50) | ||
| point | int(11) | ||
| team | tinyint(1) | X |
En principe il n'y a qu'une seule ligne dans cette table : id = 1; answer = réponse de l'énigme de la plaquette; point = nombre de points à attribuer à l'équipe gagnante; team = NULL (par défaut mais va changer automatiquement quand une équipe aura gagné)
mots_croise
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(11) | ||
| name | varchar(30) | ||
| team | tinyint(11) | X |
on doit tout entrer manuellement dans la base de données en revanche le formulaire du mot croisé va se construire automatiquement sans rien faire au fur et a mesure qu'on y ajotue des nom à deviner.
id correspont donc au numéro du mot à trouver, name au mot à trouver, et team reste à NULL tout le temps et ne servirait que si on modifiai le php pour ajouter des points de manière différente.
planning_insa
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(20) | X | |
| day | int(11) | ||
| title | varchar(60) | ||
| description | text | ||
| color | varchar(30) | ||
| order_start | int(11) | ||
| length | float | ||
| num_planning | int(11) |
il n'y a globalement pas grand chose à comprendre à part qu'ici la taille (length) est en vh et non en heure. Tout est modifiable via le panel admin (voir la section "admin" plus bas dans ce readme).
planning_tmp_dl
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| planning | text |
permet d'enregistrer l'ics pour le téléchargement voir la section "planning" à propos du script php2ics.
Par défaut il faut avoir une seule ligne vide, le script se chargera de la modifier à chaque fois.
scores
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | bigint(20) | X | |
| texte | text | ||
| points | int(11) | ||
| team | tinyint(1) | ||
| id_staff | text |
ville_epreuve
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(11) | X | |
| indice | text | ||
| reponse | varchar(50) | ||
| photo | varchar(20) | X | |
| id_equipe | int(11) | X | |
| est_finale | BOOLEAN | ||
| ordre | int(11) | ||
| est_trouvee | BOOLEAN |
ici il va falloir mettre chaque épreuve à la main, indice correspond à ce qui va etre affiché aux PPA à chaque étape, la réponse à ce que doivent deviner les PPA, et éventuellement une photos pour les aider qui se trouve dans "assets/img/ville/" Le champ "id_equipe" est une clé étrangère faisant reférence à la taple ville_equipe. Cette clé est utile si l'on veut mettre des indices différents pour chaque équipe (NULL si universel). Le bouléen "est_finale" va servir à mettre fin au chronomètre si l'équipe trouve la réponse de l'énigme. L'entier "ordre" est simplement là pour spécifier la position dans laquelle l'énigme va apparaître dans le parcours de l'équipe.
Le bouléen "est_trouvee" va simplement indiquer si une épreuve est complétée ou non
ville_equipe
| Nom | Type | AUTO_INCREMENT | NULL |
|---|---|---|---|
| id | int(11) | X | |
| nom | varchar(50) | ||
| begin | int(11) | ||
| temps | text | X |
les identifiants des équipes ne doivent pas bouger, les noms c'est juste pour l'affichage utilisateur et le "begin" est l'étape à laquelle démarre l'équipe, car ils ne démarrent pas tous à la même épreuve ! la colonne temps permet d'enregistrer les temps à chaque étape (en temps unix évidemment).
Pages
globals.php
Dans toutes ces pages, vous retrouverez plusieurs fois les noms des teams. Pour les changer de manière globale, modifiez les valeurs de $TEAM1 et $TEAM2 dans assets/scripts/globals.php
le fichier globals.php contient aussi la carte du site pour build dynamiquement le menu des liens/
anim.php
Page sans complexité, juste du contenu, demander le contenu auprès de la com'anim.
blouse.php
Page sans complexité, juste du contenu, copier le contenu de la plaquette.
chansons.php
Quasi aucune modif, pour ajouter des musiques en revanche :
music("nom de la musique", "lien de l'embed");
les lien embed ressemblent à ça : https://www.youtube.com/embed/_YXjuDdcH3g
clubs.php
Page sans complexité, quasi aucune modification car on pompe la page de l'amicale pour les clubs. Si c'est pas à jour, pas de ma faute (en vrai au moment ou j'écris ça je suis aussi resp du site de l'amicale donc c'est plus compéltement vrai).
com_page.php
Page permettant d'éviter d'avoir les pages parrainage, anim et com_ville dans le menu afin d'éviter de surcharger le menu => à retirer selon la lisibilité du menu.
com_ville.php
Ici c'est assez compliqué à expliquer et il va falloir des notions en php. Il faut analyser le code php et la structure de la base de données un peu plus haut dans le readme ! Sinon il faut demander au concepteur et dev du programme : Baptiste Rébillard.
coms.php
Permet de réferencer tout les contact, pour éviter de copier coller la structure des box, j'ai automatisé avec un petit peu de php :
- Pour ce qui est du bureau, :
$fonction = ["Président", "Vice présidente", "Trésorier", "Secrétaire"]; //contient la liste des fonctions dans l'ordre
$prenom = ["Maxence", "Sarah", "Paul", "Ilona"]; //contient la liste des prénom liés aux fonctions dans le même ordre
$nom = ["Papion", "Martin", "Alnet", "Gerard"]; // contient la liste des nom liés aux fonctions dans le même ordre
$mail = ["maxence@mail.com", "sarah@mail.com", "paul@mail.com", "ilona@mail.com"]; //contient la liste des mails de contact liés aux fonctions dans le même ordre
- Pour ce qui est des coms, pour chaque com il faudra copier-coller cette ligne :
respo(
"nom de la com",
["prenom"],
["nom"],
["mail"]);
s'ils y a plusieurs personnes dans la com :
respo(
"nom de la com",
["prenom1", "prenom2", "prenom3"],
["nom1", "nom2", "nom3"],
["mail1", "mail2", "mail3"]);
construction.php
Page à utiliser si jamais tu n'a pas finit le site mais tu veux mettre une première version en ligne, alors dans chaque page pas finit tu ajoutera la ligne suivante :
header('Location: construction.php);
cette ligne va en gros rediriger l'utilisateur sur la page construction. Il faut évidemment modifier le contenu de cette page selon le message que tu veux transmettre, exemple : "Page en construction, revenez plus tard"
downloads.php
Page sans complexité, juste du contenu, Il faut mettre les fichier à télécharger dans le dossier "assets/pdf" et ensuite mettre en forme la page avec les petit lien de téléchargement tout mignon.
enigma.php
Page qui permet de rentrer la réponse à l'énigme de la com plaquette mouhahaha ! Actuellement pour accèder à cette page j'ai caché un lien sur la page d'index, il faudrait le cacher ailleur dans l'idée car les PPA doivent le trouver !
Au niveau des modifications, tu peux changer le nom des équipes dans le script php à la ligne 17 et 19 et à la ligne 66 et 67 dans le formulaire html ainsi qu'a la ligne 74 et 76 au niveau des messages.
error.php
Page sans complexité, une erreur 404 plus ou moin donc mettre une image drôle ou un ptit message rigolo.
game.php
Jeu rajouté tardivement développé par le club info, spécifique à la semaine d'accueil 2022 => tu peux la retirer et essaye de voir avec le club info pour éventuellement les chauffer à en faire un nouveau sur le nouveau thème !
index.php
Page d'accueil, sans complexité, juste du contenu et des liens, actuellement le lien vers la page enigma y est caché en cliquant sur INSA BROS => à changer pour pas que ce soit prévisible.
info.php
-
Contact : Lien vers les groupes facebook à update, lien vers l'instagram à update, contact du prez, vice prez et également des développeurs du site.
-
Crédit : N'oublie pas de mentionner tout les anciens dev, c'est un peu la salle des trophées !
-
Vie privée : Petit rappel pour les soucieux de la vie privée par rapport à Matomo (on en reparle dans la section "admin")
lydia.php
Page sans complexité, juste du contenu, modifier un peu chaque année.
map.php
Alors ici je vais pas dire que c'est simple. tout les fichiers relative à la map 3D et 2D sont dans assets/map, pour modifier la map3D il faut décompiler le fichier map3D.glb, pour modifier la map2D il faut simplement l'ouvrir avec un logiciel de modification de SVG ou ton éditeur de texte mais good luck ! pour modifier les nom des bâtiments et leurs description : il faut aller dans le fichier ajax.php.
En dehors de ce sombre dossier, c'est à dire à proprement parlé dans le fichier map.php, on gère simplement le changement le basculement entre la map2D et la map3D.
parrainage.php
Page sans complexité, juste du contenu, demander le contenu auprès de la com'parrainage.
photos.php
J'ai pas fait ce script donc contente toi de modifier le design, sinon y'a un moment on appelle le script de connexion du CAS donc tu peux commenter ces lignes le temps de coder car ça marchera pas en local sur ton pc. Toutes les images sont dans le dossier photos_folders/photos, pense donc à demander au précédent développeur les code du serveur si tu veux comprendre. Ce sera également à toi de rajouter les photos de la semaine d'accueil après la rentrée dans le dossier photos_folder/photos et les thumbs (qui sont les même photos mais moin lourde, en gros un aperçu pour afficher la galerie sans faire crash le serveur ^^).
planning.php
Alors ici on va bien rigoler. Par quoi commencer ? Pour ce qui est des modifs :
les noms des équipes ou planning un peu partout car il peut y avoir plusieurs plannings mais on y reviendra sur la section "admin / planning"
Il y a deux affichages et je te conseille de rien changer sur cette page si tu n'est pas trés à l'aise. En gros tu as l'affichage téléphone et l'affichage PC, tout deux mène à un planning conçu par Baptiste Rébillard et au niveau du design mis en forma par Guillaume Joffre.
Cette page peux gérer une infinité de planning via un argument GET en php : le lien "planning.php?planning=2" correspond au 2ème planning par exemple => voir plus tard dans la section "admin / planning"
On peux également télécharger les plannings grace au script php2ics codé par Baptiste Rébillard et qui se situe dans assets/script/php2ics.php, le script dans le même dossier nommé planning_tmp.php est lui aussi indispensable pour le téléchargement des plannings ! Si tu a une quelconque question contacte moi sur github : https://github.com/baptistereb ! Sinon tu peux lire la doc du repo github : https://github.com/baptistereb/php2ics !
Attention !!!! IL FAUT ABSOLUMENT MODIFIER LE FICHIER PHP2ICS.PHP !!!! A la ligne 105 il faut mettre la date du premier jour de la semaine d'accueil car c'est là dessus qu'on calibre le téléchargement des plannings ! (si ça work pas on connait la chansons => demander à Baptiste Rébillard).
prevs.php
Page sans compléxité, tu peux ajouter d'autres vidéos youtube ou en retirer, modifier le texte en accord avec la com'prev !
stats.php
Page qui permet de voir le nombre de points de chaque équipe, Il faut juste modifier les noms des équipes car tout va être gérer via l'espace admin ensuite, on verra donc plus tard dans la section "admin / stats".
team.php
Il y a deux sections via 2 liens : team.php?id=team1 et team.php?id=team1 ( pas besoin de modifier les lien avec le nom des équipes si vous avez déjà update les variables globales TEAM1 et TEAEM2 dans assets/scripts/globals.php), sinon il va falloir harceler le prez et vice prez pour avoir les petits messages encourageant pour les équipes, si ça prend un peu de temps n'oublie pas que tu peux utiliser la page "construction.php" expliqué un peu plus haut dans ce readme.
vacances.php
Bon alors là il va falloir fabriquer de toute pièce un mot croisé ou quelque chose dans le genre, sachant que le systeme de réponse devra être modifié via la base de données (voir la structure de la base de données donc). Pense aussi à modifier les noms des équipes. Il faut également penser à choisir le bon nombre de points à octroyer à l'équipe gagnante car tout est automatique !
BONUS : robots.txt
Permet de faire correctement fonctionner les robots des moteurs de recherches : https://developers.google.com/search/docs/advanced/robots/intro?hl=fr
admin
Un peu de sécurité !
Pour commencer entrons dans le sujet, interdiction de créer son propre systeme de connexion à l'espace admin d'après les régles sur serveur pour des raisons de sécurités ! On utilise donc le systeme de connexion de l'INSA : le CAS ! Il faut donc le dossier phpCAS-1.3.6 dans la racine du site(ne rien modifier dedans). Pour travailler en local on peut essayer de court-circuiter ce systeme (par exemple pour travailler en local car le CAS ne fonctionnera pas quand tu code sur ton piti pc ^^). Pour ce faire, on rajoute au début de admin/index.php (et on n'oubliera pas de retirer pour la mise en prod évidemment...) cette petite ligne (on fera attention de le mettre après la ligne 'include "script.php";') :
$_SESSION['id'] = 1;
Niveau structure
Alors ici on a tout mis en bordel mais on essaie de tout séparer du reste du site ! Tout est dans le dossier admin/ le fichier admin.css gére le design de toute les page, de toute façon on va pas se casser la tête sur le font c'est que pour quelques personnes ! le fichier com_ville.css gére le design de la section com_ville car y'a des petites spécificités qu'on verra plus tard.
le fichier deco.php permet la deconnexion, le fichier script gére l'accès à la base de données et le menu de l'espace admin...
les couleurs au niveau du menu permettent de comprendre le niveau d'accès requis : en vert les pages accessibles aux "GDA", en bleu les pages accessibles aux "Ville", en jaune les pages accessibles aux "Bureau", en rouge les pages accessibles aux "Admin". Evidemment les admins on acces à tout, le bureau à leur pages + ville + GDA, ... (logique d'inclusion les math 0 tmtc).
index.php
Permet la connexion et affiche l'identifiant sous lequel on est connecté avec l'accès !
stats.php
Permet d'ajouter des points aux équipes, Pour ajouter rien de plus simple, on met le texte qui correspond à la justification des points, le nombre de points et l'équipe puis on clique sur "ajouter".
Au niveau des droits, tout les grades ont accès à cette pages, en revanche seul le grade admin peut tout supprimer au niveau de la colonne "action". Les GDA et autres ne peuvent supprimer que les points que eux ont enregistré, ça permet d'éviter les prblèmes si quelqu'un pête un plomb.
Dans le tableau on peut voir la colone "STAFF" qui correspond à l'identifiant insa du staff qui a ajouté les points. Pour ce qui est de l'enigme et des mots croisées, s'ils ajoutent des points (et c'est automatique), alors le staff est indiqué comme "UNDEFINED" en rouge, ne pas paniquer c'est juste pour dire que c'est le systeme et non un humain qui a enregistrer les points.
planning.php
Au niveau du planning, C'est assez compliqué à expliquer.
on ajoute chaque créaneaux horaire de la façon qui suit :
- jour de la semaine (logique jusque là)
- titre : texte affiché sur le planning
- description : texte qui s'affiche quand on clique sur l'évenement sur la planning
- couleur : champs non obligatoire(voir juste en dessous) qui vous permet de choisir la couleur.
- couleur hexa : si ce champs est rempli, alors le champs couleur est ignoré, ça vous permet de copier coller les couleurs du tableau en dessous.
- opacité : eh oui car les couleurs peuvent être plus ou moin opaque (on s'est cassé la tête), de base à 100%, si à 0 alors transparent. Petit point à ce niveau là il faut donc comprendre que le planning est construit grâce à l'odre d'apparition et la taille en heure d'un évenement et non avec une heure de début et de fin.
- ordre d'apparition : le premier creaneau à 1 puis 2 ... En gros c'est l'odre d'apparition.
- Taille (en heure) : 1h30 équivaut donc à 1.5h attention
- Numéro du planning : comme expliqué dans la section planning.php plus haut, on peut avoir une infinité de planning avec ce systeme, si vous n'avez qu'un planning on met donc que planning 1 par exemple.
- On clique enfin sur ajouter
Subtilité :
- id si edit : si on met un identifiant, alors les informations du formulaire servent à mettre à jour l'évenement donc l'identifiant y est indiqué (les identifiants sont dans le tableau en dessous à la colonne "ID (db)").
Pour plus de visibilité on peut séléctionner le planning affiché .
gestion_des_acces.php
Pour ajouter des perm à quelqu'un on y indique son identifiant INSA, on lui met les perm puis on clique sur "Creer l'acces", dès lors le compte est opérationnel et il peut se logger avec ses identifiant insa en se rendant sur https://etud.insa-toulouse.fr/~accueil_insa/admin/
Le compte dont l'identifiant est 1 n'est pas modifiable pour des raisons de sécurité. On peut en revanche supprimer tout les autres accès si on est admin (car cette page n'est accessible que par les admins).
en cliquant dans la colonne perm on peut modifier les perms suivant cette logique : GDA > Ville > Bureau > Admin > GDA ...
enigme.php
Ici on peut mettre à jour la réponse à l'énigme de la plaquette, ainsi que son nombre de points et le gagnants s'il y a une erreur ! A noter qu'un seul champs est requis il faut ensuite cliquer sur "Mettre à jour"
matomo
Demander les mots de passes auprès du précédent développeur, permet de superviser les statistiques du site et d'analyser le comportement des utilisateurs !
configurations
Dans le serveur il y a deux dossiers en plus :
- photos_folder/ : contient les photos et thumbs pour les téléchargements sur la page photos.php (voir plus haute dans le readme).
- script/ : contient un fichier de connexion à la base de données ainsi que le mot de passe de la base de données.
Ces fichiers sont à récupérer auprès du précédent développeur qui vous donneras également les accès à la machines ainsi qu'au repo.
Have Fun !!