Embed Size (px)
Citation preview
RAPPORT DE STAGE
Tutrice : Mme. Hellard Réalisé par Bastian Dantant
Du 22 mai au 27 juin 2017
DANTANT Bastian
RAPPORT DE STAGE
1
Je tiens à remercier Mme Plaza, maire de Merey et le conseil municipal de la mairie de Merey
pour leur gentillesse et leur accueil ainsi que leur disponibilité au cours de ce stage et je leur témoigne
ma gratitude pour m’avoir accepté pour ce stage, mon camarade et moi-même.
Je tiens également à remercier M. Plaza et Mme Hellard pour nous avoir offert la possibilité de
réaliser ce stage et de nous avoir encadrés durant ces 5 semaines de stages.
Merci pour cette expérience enrichissante que j’ai vécu pendant ces cinq semaines. Elle m’a
permis de rechercher des solutions pas moi-même afin d’avancer dans mon projet.
DANTANT Bastian
RAPPORT DE STAGE
2
Table des matières .................................................................................... 3
1.1 Fiche d’identité de la mairie .................................................................................................... 3
1.2 Organigramme ......................................................................................................................... 3
1.2 Le matériel ............................................................................................................................... 3
1.4 Situation géographique ........................................................................................................... 4
................................................................................. 5
2.1. Notre rôle ................................................................................................................................ 5
2.2 Les besoins .............................................................................................................................. 5
2.3 Les contraintes ........................................................................................................................ 5
2.4 Les moyens mis à disposition .................................................................................................. 5
............................................................................................................... 6
3.1 Phase d’étude et de recherches de solutions ......................................................................... 6
3.2 Choix de solution ..................................................................................................................... 6
3.3 Activités réalisées .................................................................................................................... 7
3.4 Planning de réalisation ............................................................................................................ 8
3.5 Présentation des outils utilisés ................................................................................................ 8
.................................................................................................. 10
4.1 Choix du thème ..................................................................................................................... 10
4.2 Arborescence des menus ...................................................................................................... 13
4.3 Le pied de page...................................................................................................................... 17
..................................................................................................... 20
5.1 Production du projet ............................................................................................................. 20
5.2 Phase de tests ........................................................................................................................ 20
................................................................................................................ 21
6.1 Apports du stage ................................................................................................................... 21
6.2 Conclusion ............................................................................................................................. 21
DANTANT Bastian
RAPPORT DE STAGE
3
PLAZA Nathalie
Maire
ALBERT Brigitte
Conseillère
BOUREL Xavier
Conseiller
DARRET Daniel
Conseiller
DELABRE Anne-Marie
Conseillère
DENIS Franck
Conseiller
LEDRU Nelly
Conseillère
L'HERBIER Louis Arnauld
Conseiller
ETINAULT Ivan
1er Adjoint
PINEL Monique
3ème Adjoint
METROT Pierre
2ème Adjoint
1.1 Fiche d’identité de la mairie
La mairie de Merey est une collectivité territoriale située à Merey, qui est une commune dans le
département de l’Eure en Normandie et appartient à la Seine Normandie d’Agglomération. Spécialisée
dans le secteur d’activité de l’administration publique générale. Son effectif est de 11 conseillers
municipaux, dont le maire et les trois adjoints parmi les conseillers, ce qui en fait une TPE (très petite
entreprise).
Madame Plaza a été élue le 21 mai suite à la démission de maire, comme le montre l'extrait de presse
suivant :
1.2 Organigramme
1.2 Le matériel
La mairie de Merey possède uniquement un ordinateur, une imprimante et une connexion wifi qui
sont mis à disposition de la secrétaire. Voici la configuration et les logiciels installés :
PC Portable HP ProBook
Logiciel : Progiciel HORIZON ONLINE (Compta, Population, Elections, …) JVS Mairistem
Pack Office (Word, XLS,…)
DANTANT Bastian
RAPPORT DE STAGE
4
1.4 Situation géographique
Merey se situe dans le département de l’Eure en Normandie et est un arrondissement d’Evreux.
La mairie est située au 9 rue de Pacy à Merey.
Merey est une commune d’environ 350 habitants avec une superficie de 8.66 km².
DANTANT Bastian
RAPPORT DE STAGE
5
2.1. Notre rôle
Lors de ce projet mon camarade Cyril Schneidenbach et moi-même avons été placés en tant que
prestataires externes intervenant pour la mairie de Merey afin de réaliser le site internet de la
commune.
2.2 Les besoins
Les besoins de notre client étaient d’obtenir un site internet présentant la mairie pour répondre aux
attentes des citoyens de Merey. Le but de ce site internet est de donner la possibilité aux habitants de
Merey d’avoir accès à toutes les informations concernant leur commune, comme par exemple
connaitre les horaires d’ouvertures de la mairie, voir les activités proposées au sein de la commune, et
d’autres informations qui peuvent être utiles.
2.3 Les contraintes
Les contraintes qui nous ont été fixées étaient de :
Réaliser un site internet dynamique sous 5 semaines (du 22 mai au 27 juin 2017) en utilisant
le CMS (« système de gestion de contenu ») Wordpress.
Réaliser le site sous les teintes du blason à savoir le rouge, vert, bleu, jaune.
Rendre le bandeau du site dynamique (pour que les images changent régulièrement).
Mettre en place un formulaire de contact.
Mettre en place un menu avec ses sous menus.
Réaliser toutes les fonctionnalités d’un site internet basique.
2.4 Les moyens mis à disposition
Afin de réaliser notre projet nous avons eu à notre disposition un compte premium Wordpress ainsi
que l’hébergeur OVH pour mener à bien notre mission. Pour les recherches externes nous avons utilisé
Google Chrome. Pour ma part je devais réaliser la partie graphique, j’ai utilisé le logiciel Gimp. Etant
considéré comme prestataire externe nous sommes restés au lycée pendant toute la durée du stage
afin de pouvoir travailler dans de bonnes conditions et nous avons donc utilisé notre ordinateur reçu
au début d’année. Nous avions également une imprimante à disposition ainsi qu’un réseau local. Un
nom de domaine a été défini pour le site internet de la mairie (merey27.fr).
De plus nous avons réalisé un journal pour que notre tutrice Mme Hellard puisse suivre l’avancement
de notre travail et pour nous donner des points de repère.
DANTANT Bastian
RAPPORT DE STAGE
6
3.1 Phase d’étude et de recherche de solutions
Avant de commencer notre stage, mon camarade et moi-même avons été en contact avec l’équipe de
la mairie, à savoir la maire Nathalie PLAZA ainsi que le 1er adjoint Ivan ETINAULT, qui nous ont donné
un cahier des charges avec toutes les attentes du futur site internet.
Suite à cela mon camarade et moi-même devions réaliser des fiches techniques. Cyril a réalisé une
documentation sur les fonctionnalités du futur site internet et j’ai réalisé la charte graphique du futur
site de la mairie.
Afin de répondre aux attentes nous avons programmé une réunion une fois par semaine pour rendre
compte du travail réalisé. Ainsi avec les retours donnés, nous étions en mesure de réaliser les
modifications demandées.
3.2 Choix d'une solution
Après plusieurs réunions et donc plusieurs thèmes proposés nous avons choisi avec nos tuteurs de
stage le thème Baskerville. Une fois le choix du thème fait, nous avons commencé à travailler de façon
plus poussée, à savoir réaliser la partie graphique et les fonctionnalités de ce dernier.
DANTANT Bastian
RAPPORT DE STAGE
7
3.3 Activités réalisées
1– Réalisation des documentations techniques
Notre première mission était de finaliser le besoin de notre client dans une documentation technique :
Une charte graphique pour planifier les couleurs, le logo et l’aspect du site internet.
Une documentation technique sur les fonctionnalités du site internet qui regroupent le menu,
les sous-menus, la place des widgets, l’entête et le bas de page.
2 – Prise en main de l’outil sélectionné (Wordpress)
Avant de commencer à travailler sur notre projet nous avons dû prendre la main sur Wordpress, nous
avons testé plusieurs thèmes autres que le site proposé et nous avons fait quelques modifications pour
comprendre le fonctionnement de Wordpress.
3 – Recherche du thème associé à la demande
Une fois la prise en main de l’outil sélectionné nous devions rechercher et sélectionner plusieurs
thèmes que nous avons modifiés suivant ce qui était graphiquement demandé.
4 – Réalisation de la solution retenue
Suite aux nombreuses réunions effectuées nous avons retenu un thème, le Baskerville. Suite à cela
nous étions en mesure de travailler sur la solution en y appliquant ce qui a été demandé.
5 – Correction et modification de la solution
Après chaque modification du site nous devions vérifier si ces dernières fonctionnaient pour les
corriger si nécessaire. Pour cela nous avions accès à la page d’administrateur pour les modifications et
corrections puis nous allions voir sur le site qui était hébergé sous OVH.
6 – Mise au point
Une fois par semaine nous avions rendez-vous à la mairie de Merey pour présenter le travail réalisé et
récupérer des informations, modifier ce qui ne correspondait pas aux attentes de Mme PLAZA et M.
ETINAULT.
DANTANT Bastian
RAPPORT DE STAGE
8
3.4 Planning de réalisation
Semaine Jour Tâche 1 Tâche 2 Tâche 3 Tâche 4 Tâche 5 Tâche 6
Semaine 1 (22 – 26 Mai)
22
23
24
25
26
Semaine 2 (29 Mai – 2 Juin)
29
30
31
1
2
Semaine 3 (5 – 9 Juin)
5
6
7
8
9
Semaine 4 (12 – 16 Juin)
12
13
14
15
16
Semaine 5 (19 – 23 Juin)
19
20
21
22
23
Semaine 6 (26 – 27 Juin)
26
27
3.5 Présentation des outils utilisés
Pour pouvoir travailler sur le site internet nous avons utilisé un CMS (« système de
gestion de contenu »). Il s'agit d'un programme informatique utilisant une base de données et
permettant de gérer de A et Z l'apparence et le contenu d'un site web. Ici nous avons utilisé Wordpress
pour la réalisation du site internet.
DANTANT Bastian
RAPPORT DE STAGE
9
Pour la modification des photos et images qui devaient être postés sur le site j’ai utilisé
le logiciel Gimp qui est un logiciel de traitement d’image. Grâce à ce logiciel j’ai pu notamment réaliser
la bannière ainsi que toutes les images postées sur le site que je devais redimensionner.
Pour pouvoir héberger notre site internet et ainsi lui donner un nom de
domaine nous avons utilisé OVH comme hébergeur.
Lorsque nous étions bloqués sur une fonctionnalité de Worpress nous allions sur
Google Chrome et nous recherchions notre problème afin de le résoudre. Nous avons beaucoup
échangé par mail avec le client et nos tuteurs pour communiquer, recevoir les modifications et le
contenu de certaines pages du site internet.
Afin de réaliser notre journal de bord nous avons utilisé le tableur Excel, que notre
tutrice Mme.Hellard nous avait fourni. Cela nous permettait de nous retrouver dans nos tâches et nous
aider pour la réalisation du compte rendu du stage.
Afin de réaliser la charte graphique, le compte rendu du stage ainsi que la
documentation d’aide à l’utilisation de Wordpress nous avons utilisé le logiciel de traitement de texte
Word.
DANTANT Bastian
RAPPORT DE STAGE
10
4.1 Choix du thème
Pour commencer la réalisation de notre projet nous avons dû réaliser une charte graphique, qui
rassemblait donc toutes les informations graphiques qui sont présentes sur le site à savoir la police de
caractère ainsi que ses couleurs, les couleurs du site que ce soit le menu ou les sous-menus, l’entête
et le bas de page. Il nous fallait également une documentation technique qui rassemblait toutes les
fonctionnalités du site internet.
Une fois la documentation effectuée nous avons commencé par réaliser des tests en utilisant les
différents thèmes présents sur WordPress, nous en avons retenu quelques-uns et finalement c’est le
thème Baskerville qui fut retenu.
Nous avons fait plusieurs ébauches de ce thème avec les couleurs que nous avions définies lors de la
première réunion.
Voici la 1ère version de ce thème présentée au client :
Les défauts constatés sur cette version sont les suivants :
Manque de photo pour l’en-tête
Menu manquant (accueil et contact)
Logo trop petit et mal placé
Absence de titre
Couleurs inappropriées
Etant donné que cela ne correspondait pas aux attentes nous avons dû modifier cela.
DANTANT Bastian
RAPPORT DE STAGE
11
Nous avons donc gardé le même thème mais avec les modifications recommandées à savoir toute la
partie graphique et quelques fonctionnalités à ajouter.
Cette nouvelle version du site fut celle que nous avons retenue par la suite et qui aura subi quelques
modifications graphiques mineures (placement du blason, couleur) et fonctionnelles (nom des menus,
ajout de widget).
Voici donc la version finale qui a reçu peu de modifications par la suite.
DANTANT Bastian
RAPPORT DE STAGE
12
Afin de rendre le site plus dynamique il nous a été demandé de rentre l’en-tête du site sous forme de
diaporama ou du moins avoir un en-tête différent de façon aléatoire. Pour cela j’ai réalisé 5 en-têtes
avec des photos de Merey fournis par le mari de Mme. PLAZA.
Pour les rendre dynamique nous n’avions qu’à activer une fonctionnalité de WordPress.
Avec un simple clic nous pouvons rendre de façon aléatoire l’ordre d’apparition des images d’en-tête,
il suffit juste d’importer des images (dans les bonnes dimensions de préférence) et ensuite de cliquer
sur le bouton « En-têtes chargés aléatoires », les images chargeront donc aléatoirement à chaque fois
que la page sera chargée, en cliquant sur un autre onglet ou en rechargeant la page.
DANTANT Bastian
RAPPORT DE STAGE
13
4.2 Arborescence des menus
Passons désormais à la réalisation des menus et sous-menus. Nous avions à réaliser 6 menus, les voici :
Afin de créer les menus il suffit de se rendre en mode administrateur sur le site internet et de se diriger
vers l’onglet « Menus » et d’ajouter un menu à l’aide du bouton
DANTANT Bastian
RAPPORT DE STAGE
14
Le menu « Menus » propose alors de personnaliser son/ses menu(s) en ajoutant une page on en
réorganisant son/ses menu(s) via le bouton ou l’option .
DANTANT Bastian
RAPPORT DE STAGE
15
Lorsque l’on place une page sous une autre en la décalant vers la droite, la page sera considérée
comme étant un sous-menu comme ceci :
Pour la réalisation de chacune des pages cela se fait quasiment automatiquement. Nous avons accès
en mode administrateur à la création des pages ainsi qu’à l’administration de ces dernières.
Afin d’ajouter une page il suffit de se rendre dans l’onglet « Page » et de cliquer sur
Pour en modifier le contenu il suffit de se rendre sur une page et une interface semblable à un logiciel
de traitement de texte s’ouvrira.
DANTANT Bastian
RAPPORT DE STAGE
16
On peut également modifier le contenu de sa page en html et css :
Ici le code concerne la police de caractère, sa taille, son format et son style, ensuite pour le <td
class= »tg-031e » nous retrouvons l’importation d’image (qui est aussi réalisable dans le mode Visuel)
DANTANT Bastian
RAPPORT DE STAGE
17
4.3 Le pied de page
Ensuite nous devions nous pencher sur la réalisation du footer (« pied de page » ou « bas de page »),
cette partie du site internet est nécessaire, elle permet d’y placer des liens, des images ou des widgets.
Le footer est composé de trois emplacements de widget, on peut placer une barre de recherche (pour
recherche un article ou une page sur le site), des liens utiles qui nous redirigent vers le site en question,
et des images cliquables qui nous redirigent également sur le site en question.
Pour ajouter un footer il suffit de se rendre ici :
Et en cliquant sur le « Footer A » par exemple, on peut le personnaliser de cette façon :
DANTANT Bastian
RAPPORT DE STAGE
18
Ou nous pouvons coder cette partie-là pour y ajouter des liens qui nous redirigeront sur un autre onglet
vers le site en question.
Suite à cela il nous fallait ajouter également des widgets mais dans la « sidebar », pour cela il suffit de
se rendre dans le même onglet des Widgets mais de cliquer sur
La personnalisation est la même que pour le footer :
DANTANT Bastian
RAPPORT DE STAGE
19
Le résultat final de la sidebar donne ceci :
DANTANT Bastian
RAPPORT DE STAGE
20
5.1 Production du projet
Le site est actuellement en ligne mais il est incomplet au niveau des informations. La partie
développement du projet a été terminée sans difficulté étant donné la simplicité d’utilisation du CMS
WordPress. Mais nous n’avons pas eu à ce jour tous les éléments pour alimenter l’ensemble des
fonctionnalités du site.
La réalisation globale du site internet s’est terminée dans les temps, le site est opérationnel et peut
être accessible à tous, il suffit de taper les mots clés adéquates à savoir « Merey » par exemple ou de
posséder l’URL du site à savoir « merey27.fr ».
Nous n’avons pas rencontré de problème majeur, si nous avions un problème nous demandions à nos
camarades qui étaient avec nous au lycée ou nous regardions sur internet afin de les résoudre. Le seul
problème rencontré est le retard que nous avons pris au vu du manque d’informations pour compléter
les pages du site internet.
5.2 Phase de tests
Lorsque nous réalisions une modification sur le site qu’elle soit visuelle ou non nous utilisions toujours
une page d’administration et une page « normale » d’ouverte pour observer les modifications, les
erreurs.
Lorsque quelque chose ne fonctionnait pas soit elle ne s’affichait pas soit elle ne s’affichait pas comme
nous le voulions mais aucun message d’erreur ne s’affichait, c’est un point faible de WordPress.
DANTANT Bastian
RAPPORT DE STAGE
21
6.1 Apports du stage
D’un point de vue professionnel, ce stage m’a apporté une première expérience professionnelle de
longue durée et il s’agissait de mon premier stage en informatique ce qui m’a permis de découvrir un
peu plus le monde de l’entreprise.
D’un point de vue personnel il m’a permis de mettre en pratique mes connaissances acquises lors de
ma première année de BTS SIO en développement web. Il m’a apporté une plus grande autonomie et
m’a permis de travailler en équipe pour réaliser un projet, ce qui se rapproche des PPE réalisés en
classe.
6.2 Conclusion
La réalisation de ce stage en entreprise a été une expérience bénéfique, me permettant de m’impliquer
au sein d’une équipe sur une assez longue durée. Il m’a permis d’apprécier le développement web, ce
qui m’avait un peu découragé à cause de mes lacunes dans le langage PHP.
La durée de 5 semaines m’a permis de me consacrer sur un projet de son étude jusqu’à sa mise en
production. Il est agréable de voir l'aboutissement du projet et la satisfaction du "client", à savoir les
demandeurs du site.
Ce stage a eu un objectif réel contrairement aux projets scolaires, puisque le projet servira à la mairie
de Merey, ce qui a été une motivation supplémentaire.
