Sévéno

Sébastien

Rapport de stage

Projet Site Web

CEPE

Sommaire 1. Remerciements

2. Présentation du CEPE

3. Introduction du Projet

4. Étude du projet

5. Développement du projet

1. Base de données

2. Structure du projet

3. Paramètres du site

4. Menu

6. Achèvement du projet

7. Bilan du stage

RemerciementsJe souhaiterai avant tout remercier Mr Carzon et Mr Allary, respectivement

Président et Vice-Président, de nous avoir accordé leur confiance en nous confiant laréalisation du site web de leur association d'escalade CEPE, Club d'Escalade des Portes del'Eure. Je remercie également la Directrice de notre établissement d'avoir suggéré moncollègue Dorian et moi-même pour ce projet lors de la proposition de stage de Mr Carzonet Mr Allary. Enfin, je remercie Dorian Tasse, mon collègue de stage, mon camarade declasse, mais également mon ami de tous les jours sans qui ce projet n'aurait pas pu alleraussi loin. Grâce à son aide précieuse et son travail sur la réalisation de la partie interfaced'administration, nous avons pu mener à son terme ce développement.

Présentation de la CEPELe CEPE (Club d’Escalade des Portes de l’Eure) de Vernon est une association sportiveproposant la pratique de l’escalade. Il a été créé en 1995 et compte aujourd’hui plus d’unecentaine de licenciés.Les entraînements se déroulent au gymnase du Lycée Georges Dumézil à Vernon, etl’entrée se situe dans la rue de la Guitoune qui était l’entrée de l’ancienne piscinemunicipale.L’association est composée de la façon suivante :

Président :Arnaud CARZON

Trésorière :Aurélia HERVAUX

Secrétaire :Philippe MOREL

Compétition:Flavien

LOMBARD

Manifestation,sorties :Gilles

KEARNEIS

Ecole Escalade:Laura

BENAZET

CréneauAdulte :

Bruno GIQUEL

Administratif, Sécu,Communication :Thibaut ALLARY

Compétition:Flavien

LOMBARD

Manifestation,sorties :Gilles

KEARNEIS

Étude du projet

Le Besoin

Actuellement membre de la FFCAM, Fédération Française des Clubs Alpins et deMontagne, la CEPE souhaiterait devenir indépendant du site web de la FFCAM ce quipermettrait un meilleur contrôle des informations et moins de limitation quant à lapublication ou la modification du site. Le nouveau site devait donc être basé sur le siteprécédent (cafvernon.ffcam.fr). Les demandeurs souhaitaient pouvoir modifier le contenudu site plus simplement, une interface d'administration et un site dynamique étaient doncobligatoires.

Nous avons donc décidé que mon collègue se chargerait de la base de données et del'ensemble de la partie administration, et que je me chargerai de la partie graphique etgénération dynamique des pages depuis la base de données.

Afin de marquer l'indépendance du nouveau site et du changement du nom du club, il

fallait également concevoir un nouveau logo dans plusieurs formats. Il n'est pas définitif etpeut encore évoluer.

Outils Utilisés

Afin de mener à bien ce projet, nous avons utilisé plusieurs outils, facilitant ainsi le travail.Mon collègue et moi n'utilisions pas les même outils, mais cela n'a pas posé de problèmeétant donné que même si les outils sont différents, leur finalité est la même, ils sont doncinter-compatibles, seul leur ergonomie change et dépend des préférences d'utilisation.

Éditeur de code :

Sublim Text 3 :

Il permet l'édition du code avec une coloration syntaxique plus performante que d'autreséditeurs, il est plutôt orienté développement Web.

Serveur XAMPP est un programme destiné à fournir différents serveurs sur la machine dedéveloppement afin de simuler et d'afficher le site pendant ses modifications.

Afin de tester le site en condition réelle, nous avons également utilisé un serveur distant,un Raspberry Pi, permettant de mesurer les utilisations de ressources du site, et de vérifierson fonctionnement lors de la fusion des différents modules.

Pour envoyer les fichiers et gérer ce serveur à distance, j'ai utilisé FileZilla et Putty.

FileZilla, Gestionnaire de fichiers FTP/SSH

Putty, client SSH pour Windows

Pour la rédaction des différents documents, j'ai utilisé LibreOffice.

Pour les différentes recherches lors de questionnement quant aux erreurs de code j'aiutilisé

https://stackoverflow.com/

Ainsi que les documentations officielles des différents langages.

Exemple de questionnement pour lequel j'ai trouvé une solution sur ce site :

Développement du projet

Base de données

Voici le Model Conceptuel de Données de la base de données réalisé par mon collègueDorian.

L’entité information va contenir les informations présentes sur toutes les pages du site,ex : l’appellation du club.

L’entité onglet contient le nom et la position des différents onglets, et est reliée à l’entitésous-onglet qui donne le label et la position des différentes pages de l’onglet, l’entité pagequi lui est reliée va contenir toutes les informations de la page ex : texte, nom de la page,bannière.

L’entité bénévole contient toutes les informations sur les bénévoles.

L’entité contact sert à stocker les données de contact (sur le site une page permet decontacter le club et pour cela il faut remplir différents champ de données).

L’entité newsletter permet de savoir si une newsletter a été envoyée ou pas.

L’entité couleur permet de changer les couleurs du site et de définir les trois tonspossibles pour celles-ci : foncé, moyen et clair.

Structure du projet

Voici la structure du projet, les ressources de typeimage, script, feuilles de styles ou autres médiassont stocké dans un répertoire res.Les fichier de la page sont dans un répertoire php.Les fichier contentant les différente fonctions detraitement avec la base de données sont stockésdans db.Les fichier ne sont pas définitifs et desmodifications seront apportées après la rédactionde ce rapport.

Paramètres du site

Voici la liste des paramètres du site permettant de le rendre modulable.

La première étape était de construire une base de site dynamique, permettant d'afficherles informations telles que le titre de la page ou les différentes informations qui sontstockées dans la base de données. Les informations sont donc modifiables simplementdepuis la base de données sans modification du code. Plusieurs fonctions php ont doncété créées pour retourner ces informations depuis la base de données. Des informationspouvaient donc êtres ajoutées par la suite et appelées dans la page par un simple echophp.

Exemple de la fonction getInfos() qui retourne un tableau de valeurs par paires :

" Nom de l'information " => " Valeur de l'information "

" pageTitle " => " CEPE Escalade "

Et voici leur utilisation sur une page d'affichage :

Pour simplifier la modification des informations affichées telles que le titre de la page oule sous titre, lorsque l'utilisateur est authentifié comme administrateur du site, un doubleclic sur un élément du site permet de le modifier à la volée et de voir le résultatinstantanément. Ce système à été assez long à concevoir mais est adaptable à presquetoutes les informations affichées.

Exemple du Titre avant modification

Le double clic active le mode édition :

On peut ensuite modifier le titre à la volée :

Une pression sur la touche Entrée et la modification est enregistrée.

Le menu

Le menu du site est également entièrement généré dynamiquement depuis la base dedonnées permettant de le modifier par la suite :

Table des Onglets :

Table des sous onglets

Pour permettre une navigation ergonomique, le menu se réduit avec plusieurs animationslorsque l'utilisateur fait défiler la page. Le menu devient donc persistant sur la partiesupérieure de l'écran. La navigation vers les différentes pages reste donc simple.

Démonstration :

Achèvement du ProjetLe projet n'est actuellement pas terminé car certaines fonctionnalités sont encore

manquantes comme un calendrier des événements sur la page d'accueil. Cependant lesfonctionnalités développées sont fonctionnelles et constituent pour l'instant un site quiaffiche basiquement différentes pages.

Les fonctionnalités telles que la création et gestion des événements et leur affichage dansun calendrier sont encore a développer.

La base structurelle du site étant faite, le développement de ces fonctionnalités nedevraient pas poser de problème et prendre trop de temps.

Bilan du stageCe stage, pour ma part, m'a permis de découvrir un projet de développement en

conditions réelles, avec des interlocuteurs et de réelles attentes, ajoutant un peu depression et motivant pour la réalisation du projet. Le travail avec un coéquipier étaitégalement agréable, il a permis de s'entraider et de réfléchir au mieux aux solutions quel'on a jugé être les meilleures.