site-accueil-insa

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

Nom	Type	AUTO_INCREMENT	NULL
session	int(11)	X
state	int(11)
time_begin	int(11)

ici il y a les session car il y a la session du matin et la session de l’après midi, cette table permet de savoir quelle session à été lancé, et le temps(unix) à laquelle la session à été lancé si elle l’a été.

ville_epreuve

Nom	Type	AUTO_INCREMENT	NULL
id	int(11)	X
indice	text
reponse	varchar(50)
photo	varchar(20)		X

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/”

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

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=pkpeach et team.php?id=pkpeach il faut donc modifier les lien avec le nom des équipes (ligne 16 et 42), 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 !!