78
Stage de fin d’études de Licence Informatique du 18 Mars au 7 Juin 2013 Cercle Mixte de la Gendarmerie de Besançon UFR Sciences et Techniques Université de Franche-Comté 2013 Rapport de stage Développement d’un site Web et d’une application de gestion d’un hôtel Samuel BUCHER Projet encadré par Laurent PHILLIPE

Développement d'un site web et d'une application de gestion d'un

Embed Size (px)

Citation preview

Page 1: Développement d'un site web et d'une application de gestion d'un

Stage de fin d’études de Licence Informatique du 18 Mars au 7 Juin 2013

Cercle Mixte

de la Gendarmerie

de Besançon

UFR Sciences et Techniques

Université de Franche-Comté

2013

Rapport de stage Développement d’un site Web et

d’une application de gestion d’un hôtel

Samuel BUCHER

Projet encadré par Laurent PHILLIPE

Page 2: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

2

Remerciements

Je tiens à remercier particulièrement les personnes suivantes, pour l’expérience

enrichissante et captivante qu’elles m’ont fait vivre durant mon stage au sein du Cercle

Mixte :

Major POILLET Bertrand, directeur du Cercle Mixte, pour son accueil et la

confiance qu’il m’a accordée dès mon arrivée,

M. HUGUENOT Yves, apprenti en Réseaux, de m’avoir consacré une grande partie

de son temps, pour répondre à mes interrogations, et me permettre d’avancer au mieux

dans toutes mes missions ainsi que l’élaboration de mon rapport,

M. MARLIER Benjamin, stagiaire en réseau, qui m'a apporté de l'aide sur

quelques points techniques en réseau.

Toute l’équipe du Cercle Mixte pour son accueil, qui m’a permis de travailler dans

la bonne humeur, et qui a su exprimer ses besoins dans les différents projets que j’ai pu

développer tout au long des trois mois de stage.

Je remercie également M. Laurent PHILLIPE, qui a tenu le rôle d’encadrant

durant le stage. Il a su m’aider et me conseiller dans la mise au point de ce présent

rapport ainsi que de ma soutenance.

Page 3: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

3

Sommaire

Remerciements ............................................................................................................................. 2

Introduction ................................................................................................................................. 6

1. Présentation de l’entreprise et de ses besoins .......................................................... 8

1) Le cercle mixte de la gendarmerie ........................................................................ 8

a. Définition ....................................................................................................................... 8

b. Le cercle mixte de Besançon ............................................................................... 9

2) Les projets ................................................................................................................... 10

a. Création d’un site Web ............................................................................................. 10

b. Application Web consacré la gestion de l’hôtel ............................................ 13

2. Etudes et analyses des projets .................................................................................. 15

1) Analyses liées au développement du site web ................................................... 15

a. Cheminement nominale d’une inscription ............................................................. 15

b. Les actions possibles ............................................................................................. 16

c. Structure de la base de données .......................................................................... 17

2) Analyses liées à l’application de gestion de l’hôtel ........................................... 18

a. Structure de la base de données .......................................................................... 18

b. Les possibilités des utilisateurs ....................................................................... 20

c. Cheminement de la création d’une nouvelle réservation ................................. 21

3. Réalisation et développement .................................................................................... 22

1) Un site Web Attrayant ........................................................................................... 22

a. Design ............................................................................................................................ 22

b. Une interface standard ....................................................................................... 24

c. Les interfaces réservées aux personnel du Cercle ......................................... 26

2) L’application hôtel ...................................................................................................... 30

a. Le design ...................................................................................................................... 30

b. Les interfaces d’initialisations et de modifications des informations

portant sur l’hôtel ........................................................................................................................... 31

c. L’interface principale ............................................................................................... 32

d. Besoins supplémentaires ..................................................................................... 35

4. Autres missions confiées ............................................................................................ 37

Page 4: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

4

1) Programme java de tri de photos ......................................................................... 37

a. Etude des besoins ..................................................................................................... 37

b. Développement ....................................................................................................... 38

2) Restructuration du réseau...................................................................................... 39

a. Etat des lieux ............................................................................................................. 39

b. Actions ....................................................................................................................... 41

3) Développement d'un script de génération de compte rendu ....................... 42

a. Analyses des besoins ................................................................................................ 42

b. Réalisation avec Google Drive ............................................................................ 43

5. Bilan technique et humain ........................................................................................... 44

1) Les difficultés rencontrées ................................................................................... 44

a. Application Hôtel ....................................................................................................... 44

b. Le site Web ............................................................................................................. 46

c. L’application java de tri de photo ......................................................................... 48

d. Le script sous Google Script .............................................................................. 49

2) Bilan ............................................................................................................................... 49

a. Les apports liés au développement ...................................................................... 49

b. Les apports en réseaux ........................................................................................ 51

c. Plan humain ................................................................................................................... 51

d. Stage en rapport avec mon projet professionnel ........................................ 52

Conclusion .................................................................................................................................... 53

Annexes ........................................................................................................................................ 55

1. Diagramme de cas d'utilisation des utilisateurs du site Web ............................. 55

2. Contenu des pages du Site Web pour le restaurant ........................................... 56

3. Contenu des pages du Site Web pour l'hôtel........................................................ 58

4. Plan d'accès du Cercle Mixte ..................................................................................... 59

5. Pages dédiées à la gestion des utilisateurs du site Web .................................. 60

6. Pages dédiées à la gestion des qualités des utilisateurs .................................... 61

7. Pages de gestion des pièces ....................................................................................... 63

8. Gestion du message d'accueil du site Web ........................................................... 65

9. Intégration d'une Newsletter ................................................................................... 66

Page 5: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

5

10. Diagramme de cas d'utilisation pour l'application de gestion de l'hôtel ..... 67

11. Application l’hôtel : le planning .................................................................................. 68

12. Application hôtel : gestion appareils / conforts / lits ....................................... 69

13. Application hôtel : modification des chambres ..................................................... 71

14. Application hôtel : gestion des clients .................................................................... 72

15. Représentation du Réseau du Cercle Mixte .......................................................... 73

16. Baie de brassage du Cercle Mixte ............................................................................ 75

17. Déroulement du stage .................................................................................................. 76

Bibliographie ............................................................................................................................... 77

Résumé .......................................................................................................................................... 78

Summary ...................................................................................................................................... 78

Page 6: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

6

Introduction

Durant cette 3ième année de Licence Informatique, il nous a été demandé de nous

intégrer à l’entreprise de notre choix, afin de compléter notre formation par une mise

en pratique de mes acquis. J’ai pour ma part, après de multiples recherches dans les

environs de Montbéliard et de Besançon, choisi de réaliser mon stage au Cercle Mixte de

la Gendarmerie à Besançon. Il s'est déroulé du 18 Mars au 7 Juin 2013, sur une période

de 12 semaines. J’ai pu découvrir cet établissement par le biais de connaissances, qui

m’ont alors indiqué qu’ils recherchaient des stagiaires en informatique.

J’ai pu prendre connaissance des travaux en développement web qui pourraient

être réalisés, tel qu’un site Web qui diffuse toutes les informations pratiques

concernant le Cercle Mixte, ainsi qu’une application Web dédiée à la gestion des

chambres mises à la disposition des clients.

Les raisons qui m’ont poussé à choisir ce stage plutôt qu’un autre, sont simples, je

souhaite dès l’année prochaine m’orienter sur une formation dédiée au Web. J’ai pu

découvrir par le biais de la Licence Informatique les langages du Web. J’ai été attiré

par ce domaine, et je souhaite y approfondir mes connaissances. Ce stage me permettra

de vérifier également mon intérêt pour ce domaine.

Les objectifs du stage sont multiples, puisqu’il s’agit de développer le site Web et

l’application de Gestion de l’hôtel en partant de zéro. Ces deux projets doivent être

fonctionnels d’ici la fin du stage. Il est de plus nécessaire de former une fois ces

applications conçues, le personnel pour l’utilisation et/ou mises à jour de ces nouveaux

outils. Il ne s’agit pas simplement de développer, mais d’être à l’écoute des besoins des

différents utilisateurs, afin de réaliser des produits adaptés aux exigences de ceux-ci.

Je me fixe l’objectif de réaliser intégralement ces projets (analyse, conception,

développement…), afin de canaliser tous mes acquis, et de me permettre la découverte

de nouveaux intérêts dans le domaine du Web (le Webdesign par exemple…).

Ce rapport est constitué de plusieurs parties :

La première partie présente l’entreprise, et définit ses besoins. Il s’agit de

définir les cahiers des charges des différents produits à développer.

La deuxième est axée sur l’étude et l’analyse de ces deux projets, afin de

comprendre les raisonnements que j’ai pu suivre, malgré les contraintes présentes.

La troisième portera à proprement dit sur les développements, à savoir comment

j’ai pu implémenter.

Page 7: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

7

Le poste que j’ai occupé m’a impliqué dans d'autres mini-projets. Dans la

quatrième partie, je vous présente quels ont été les autres activités, auxquelles j’ai pu

me consacrer.

Pour finir, il m'est indispensable de réaliser un bilan de ce stage. Je relate les

compétences acquises grâce à cette expérience, et surtout je présente un bilan

montrant en quoi ce stage à permis de répondre à toutes mes questions concernant mon

projet professionnel.

Page 8: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

8

Pour commencer, je présente l’établissement dans lequel j’ai pu effectué mon

stage. Les projets que j’ai pu accomplir sont en relation avec les besoins du Cercle

Mixte. J'introduis donc par la suite les cahiers des charges à suivre pour le

développement des deux projets Web.

1. Présentation de l’entreprise et de ses besoins

1) Le cercle mixte de la gendarmerie

a. Définition

i. Qu’est-ce qu’un cercle mixte ?

Un Cercle Mixte dans la gendarmerie est un établissement public à caractère

administratif (EPA) placé sous la tutelle du ministère de la défense. Ces établissements

disposent chacun de leurs propres statuts et règlement intérieur. Ils possèdent une

certaine autonomie vis-à-vis du ministère de la défense tant administrative que

financière. Ils ont principalement une vocation sociale ou culturelle, mais dans tous les

cas, doivent remplir une mission d’intérêt général autre qu’industrielle et administrative.

Les personnels sont généralement des agents publics, tels que des fonctionnaires de la

fonction publique ou encore des agents non titulaires en CDD ou en CDI, relevant de

statuts particuliers.

ii. Où en trouve-t-on ?

Les Cercles sont répartis selon 5 régions : Île-de-France, Nord-est, Nord-Ouest,

Sud-ouest et pour finir le Sud-est. Voici le découpage présenté en figure 1 ci-dessous.

Figure 1 : Cartes des Cercles et Mess

Page 9: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

9

b. Le cercle mixte de Besançon

i. Présentation

Le Cercle Mixte de la gendarmerie de Besançon a été fondé en 1982.

Il y est organisé des activités sociales, culturelles ou de loisirs permettant

notamment de mettre à la disposition de ses membres des salles de restauration

(activité liée au Mess), des salles de consommation (activité liée au Bar) ou encore des

chambres (activité Hôtellerie).

Le Cercle de Besançon dispose en plus du Bar, du Mess et de l’hôtellerie, d’une

autre activité qui lui est propre : un comptoir de ventes. Ce service propose à ses

adhérents des tenues complètes et tous les accessoires dont peuvent avoir besoin les

gendarmes ou les militaires. Le Cercle Mixte répond ainsi à sa principale vocation :

remplir des fonctions d’intérêt général.

L’activité principale du Cercle aujourd’hui est la restauration. Chaque jour, le

restaurant réalise de 150 à 300 couverts, ce qui est sa capacité maximale (mais peut

être élargie à 500 couverts lors de grands événements).

Le Cercle Mixte de Besançon est un des établissements les plus rentables de

France, grâce à ses multiples activités. Ceci lui permet de se développer constamment,

dans le souci d’une grande qualité de services.

ii. Organigramme

Le Cercle Mixte de Besançon est dirigé par le Major POILLET Bertrand et géré

par FALLAIS Patrice, et le Marechal des logis Chef VALLET LAURENT.

Une vingtaine de personnes travaillent sous leurs ordres et permettent ainsi de

faire fonctionner les différents services qui composent le Cercle. Le personnel est

essentiellement constitué de gendarmes, mais également de civils qui sont embauchés

sous contrat.

Voici les organigrammes présentant la hiérarchie complète du Cercle Mixte en

figure 2 et 3 ci-dessous.

Page 10: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

10

Figure 2 : Organigramme du Cercle Gestion & Comptabilité

Figure 3 : Organigramme du Cercle Service & Cuisines

2) Les projets

Deux projets m’ont été affectés. Ils sont tout deux liés au Web : l’élaboration

d’un site Web et d’une application Web destinée à la gestion d’un hôtel. Je vais vous

présenter ces deux projets, en lien avec les besoins réels du Cercle Mixte.

a. Création d’un site Web

Le site Web est aujourd’hui un moyen de communication efficace. Nous allons

étudier les besoins du Cercle Mixte concernant le Site Web.

Directeur

Major POILLET

Apprenti Réseaux

M. HUGUENOT

Stagiaire Developpement

M. BUCHER

Stagiaire

Réseaux

M. MARLIER

Gérant d'activité

M. FALLAIS

Directeur adjoint

Marechal des logis / Chef VALLET

Secrétaire

Mme HAROU

Secrétaire

GAV BECHTELLAH

Apprentie Comptable

Mme BAGUE

Service

Barman

M. HUOT SOUDAIN

Serveurs

GAV HUET

GAV MERLES

GAV CONFIAC

GAV HAMABI

Cuisine

Chef Cuisine

M. ARDEMENT

Cuisiniers

M. STRABACH

GAV TRAVERS

GAV ARTIGUES

Apprenti

M. ROUGEOT

Page 11: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

11

i. Les besoins

Les membres du Cercle souhaitent pouvoir accéder aux informations pratiques

facilement depuis internet. Il s’agit donc de répondre à cette demande, en créant un

site Web, sur lequel diverses informations apparaîtront. Les clients demandent de

pouvoir télécharger les menus du Mess pour le mois en cours, ou les mois suivants si ils

sont disponibles, et ce depuis chez eux. Ils désirent également pouvoir visualiser toutes

les informations liées aux chambres d’hôtel (leur prix, une description…), au restaurant

(les différentes salles qui le compose…), les tarifs des différentes prestations et

surtout les jours de fermeture du Cercle. Les jours de fermetures sont assez

aléatoires, puisque le Cercle Mixte de Besançon peut être ouvert les jours fériés, et

inversement.

Par rapport à ces besoins, il s’agit de concevoir un site Web qui soit facile

d’accès, disposant d’une interface intuitive, qui permettra à n’importe quel client de s’y

retrouver. Le but premier de l’élaboration de ce site Web est de communiquer avec les

clients, pour leur mettre à disposition une multitude de services. Le site Web pourra

également être une passerelle vers des services intranet pour le personnel, tel qu’une

redirection vers le planning du personnel, vers l’application de gestion du planning de

l’hôtel (qui est le deuxième projet de ce stage) ou encore vers une interface de gestion

des températures des différents dispositifs réfrigérants.

ii. Cahier des charges

Les besoins des clients du Cercle et du personnel sont maintenant connus, il s’agit

de délimiter le sujet avant toute analyse portant sur le site Web : par un cahier des

charges.

J’ai été amené à discuter avec les différents responsables, afin de structurer ce

projet. Ce site Web une fois son élaboration terminée, devra être stocké sur le domaine

free.fr. Free nous propose deux façons de stocker une base de donnée : via un serveur

PostgreSQL ou MySQL. Après discussion, nous avons adopté l’utilisation du serveur

MySQL pour de multiples raisons. Il m'est plus aisé de développer la Base de données

via l’interface PhpMyAdmin, avec laquelle j’ai déjà été amené à travailler. De plus, mes

responsables préfèrent l’utilisation de ce serveur MySQL, parce qu’ils ont l’habitude de

cette interface, et que en cas de problèmes, ils seraient capables d’intervenir sur un tel

serveur. Concernant le langage de programmation, il a été décidé de coder ce site web

en PHP.

Avant de lister le contenu que doit proposer le site Web, il m’a été demandé de

gérer l’accès du site Web de façon particulière. En effet, celui-ci ne doit en aucun cas

diffuser des informations à des personnes non membres du Cercle Mixte. Pourquoi ce

Page 12: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

12

choix ? Le cercle mixte de Besançon est un EPA (Etablissement Public à caractère

Administratif). Cet établissement est réservé à certaines personnes. Il offre ses

services exclusivement à ses membres. Pour être en adéquation avec la loi, le site Web

ne doit sous aucun prétexte divulguer des informations au public. Son accès est donc

règlementé aux seules personnes définies.

Concrètement, il sera mis en place comme mes responsables le souhaitent, un

formulaire d’inscription où les visiteurs pourront décrire leur nom, prénom, numéro de

téléphone, adresse ainsi que leur situation (gendarme, militaire…). Une fois leur

inscription réalisée, elle est soumise à vérification par un des administrateurs du site

Web. Il est demandé qu’un email automatique soit émis lors de l’inscription d’une

personne sur le site Web destiné aux administrateurs (afin de les prévenir d’une

nouvelle inscription instantanément). De même un email destiné au nouvel utilisateur est

souhaité pour confirmer la validation de son inscription.

Maintenant que nous avons relaté les différentes contraintes concernant l’accès

du site Web, il s’agit de savoir ce que le site Web diffusera. Par rapport aux

différentes demandes des membres du Cercle Mixte, le site diffuse les différentes

informations, qui sont liées aux multiples activités du cercle mixte (ici l’hôtel et

l’activité restauration), que vous retrouverez dans l’organigramme ci-dessous :

Figure 4 : Informations que le site Web diffuse

Différentes catégories de personnes ont accès au site Web. Les informations

décrites ci-dessus sont accessibles pour tous les utilisateurs. Les différents statuts à

inclure sont les administrateurs (qui pourront administrer le site Web, et qui peuvent

gérer entièrement son contenu), les employés du cercle mixte (pour lesquels, le site

propose un lien vers l’intranet facilitant l’accès au planning du personnel, planning de

gestion de l’hôtel et le planning de gestion des sondes de température), et pour finir les

Restaurant

• Menus (sur lequel figurent les jours

d'ouverture du cercle)

• Tarification

• Présentation des salles de restauration

Hotel

• Présentation des chambres (tarif,

description, équipements...)

Informations diverses

• Contact du Cercle (Téléphone, fax, mail,

adresse)

• Plan d'accès

Page 13: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

13

utilisateurs de bases, qui sont les clients (qui ont juste besoin d’un accès aux

informations pratiques liées aux activités du Cercle).

La gestion de l’ensemble des utilisateurs est réalisée par les administrateurs. Il

est donc préconisé de créer une interface permettant la modification ou la suppression

aisée de tous les utilisateurs inscrits (ou en cours de validation d'inscription) sur le site

Web.

Les informations qui sont mises en ligne, à savoir les informations citées sur la

figure 4 ci-dessus, devront être modifiables facilement par un administrateur. La mise

en ligne de fichiers, pouvant être des photos de chambres d’hôtel, ou de salles de

restauration, ou encore de fichiers PDF illustrant les tarifs ou les menus, devra se faire

facilement et depuis n’importe quel ordinateur. La notion d’administration des données

contenues dans le site Web fait ressortir la notion de site Web dynamique. Chaque

utilisateur se connectant sur ce site ne rencontrera pas forcément le même contenu à

chaque visite.

b. Application Web consacré la gestion de l’hôtel

Après quelques semaines de stage, mes responsables ont eu l’idée de me donner

un deuxième projet : concevoir et développer une application Web destinée à la gestion

des chambres pour l’hôtel.

i. L’application existante : Chr Office

Le Cercle Mixte disposait il y a encore quelque temps d’une application

propriétaire, qui leur permettait de gérer le planning d’occupation de leurs chambres :

Chr-Office. Il s’agit d’une application payante destinée à la gestion de tout un

établissement, comme la gestion de l’hôtel, en passant par celle du restaurant, de la

cave, des cuisines, du bar, des fournisseurs, des salariés, des menus, de la salle… Ce

Logiciel s’adresse aux Hôteliers Restaurateurs.

Figure 5 : Logo Chr Office

Cette application est utilisée par le Cercle Mixte pour gérer exclusivement les

occupations des chambres de l’hôtel. Les autres services (restaurant, cuisines..) ne sont

pas utilisés sur ce logiciel. Le Cercle utilise actuellement cette application en version

trial. Il s’agit d’une application assez onéreuse pour la seule utilisation qu’elle subit.

Page 14: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

14

Cette application est installée sur le serveur. Elle est utilisée depuis les postes

reliés au réseau du Cercle Mixte. Cette application développée d’après mes

investigations en Visual Basic, est agréable à utiliser par son design attrayant.

ii. Une nouvelle application

Le Cercle Mixte disposait avant mon arrivée de cette application, qui a jusqu’alors

bien fonctionnée. Toutefois, mes responsables ont choisi de remplacer l’application

existante par une autre application.

Les raisons de cette migration sont simples. L’application Chr Office est une

application lourde. Les nombreux écrans figés engendrés ou créés par l’utilisation de ce

logiciel sur les postes de Cercle Mixte sont devenus une hantise. Cette application

propriétaire développée en Visual Basic sera remplacée par une nouvelle application

Web.

Mes responsables souhaitent que cette application soit développée en PHP, en

utilisant une base de données MySQL, pour la rendre légère, réactive et évolutive. Les

raisons de ce choix sont simples. Cette nouvelle application Web peut être lancée sur

n’importe quel ordinateur sans la moindre installation. En effet, seul un navigateur Web

est nécessaire. De plus, cette nouvelle application doit être accessible depuis n’importe

quel appareil (tablette, Smartphone..) et même depuis l’extérieur. Cette application est

stockée sur le serveur du Cercle Mixte. Une redirection de port sera à définir, afin

d’autoriser le personnel à y accéder depuis l’extérieur du réseau. De plus, le

développement d’une base de données en MySQL s’est avéré plus approprié. Mes

responsables souhaitent pouvoir en cas de force majeur avoir accès aux données. Le

précédant logiciel Chr Office ne leur laissaient pas le choix. C’est pourquoi la nouvelle

application devra être développée en utilisant une base de données MySQL, qui peut

être visible et modifiable à souhait par le biais de l’interface PhpMyAdmin.

L’application Chr Office disposait d’une interface design, garnie d’animations, qui

n’arrangeaient pas ses problèmes de rapidité d’exécution. La nouvelle application doit

être développée de manière à diminuer les temps d’exécution, et ce sur n’importe quel

navigateur.

Le cahier des charges est simple : concevoir et développer une application Web

en remplacement de l’application existante. La nouvelle application doit donc reprendre

toutes les fonctionnalités de l’ancienne application, en apportant toutefois quelques

modifications. Elle doit afficher toutes les occupations des chambres via un planning.

C’est à partir de ce planning que des occupations peuvent être ajoutées aux chambres.

Elle doit permettre l’ajout d’occupations de plusieurs types aux chambres de l’hôtel

comme :

Page 15: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

15

- Les réservations (par un client, pour une période indiquée)

- Les périodes de travaux (durant laquelle la chambre reste indisponible)

Egalement, il sera possible d’ajouter des périodes de fermetures de

l’établissement (durant laquelle les chambres seront toutes indisponibles), d’ajouter des

jours fériés (avec la possibilité d’autoriser ou non les réservations pour ce jour

particulier). Il sera apprécié que des informations liées aux chambres soient

directement affichées sur le planning. Ainsi, lors d’une réservation par téléphone, le

personnel peut ainsi décrire le contenu des chambres disponibles facilement (ce qui

n’était pas géré par Chr Office). Tout comme l’ancienne application, les réservations

peuvent suivre des évolutions (en attente, payée, client arrivé…). L’évolution d’une

réservation doit être modifiable en quelques clics.

Toute la gestion des chambres (composition, appareils disponibles…), occupations

(travaux, réservations…), des événements (périodes de fermetures, jours fériés), des

clients et utilisateurs doit se faire de manière aisée. L’interface doit être simple, et

permettre même avec une seule main de créer une réservation.

Il est souhaité par mes responsables d'y intégrer des nouveaux services :

- L’export en PDF du planning de l’hôtel

- L’export en SQL de toute la base de données (en un fichier SQL),

directement depuis l’application, sans passer par PhpMyAdmin.

D’autres fonctionnalités seront apportées à cette application durant les

développements, ou lorsque l’application sera en ligne. Il s’agit d’effectuer un travail de

véritable développeur. Etre à l’écoute, analyser, et intégrer les évolutions constantes à

l’application, dont le cahier des charges est en évolution permanente, fait parti des

qualités à adopter.

2. Etudes et analyses des projets

Maintenant que nous avons déterminé le cahier des charges à suivre pour les deux

projets, nous allons les analyser pour savoir comment les concevoir.

1) Analyses liées au développement du site web

Analysons le premier projet de développement. Nous déterminons dans un

premier temps la structure de données à adopter pour représenter au mieux toutes les

informations dont le site Web à besoin, par rapport aux attentes de mes responsables.

a. Cheminement nominale d’une inscription

Le cercle Mixte de la gendarmerie de Besançon est un organisme particulier : un

établissement public à caractère administratif (EPA). Cet établissement à but non

Page 16: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

16

lucratif, n'a pas le droit de faire de publicité, vis à vis de la législation. Le site Web que

je développe ne sera pas accessible par tout le monde. Il est nécessaire de

s'authentifier pour avoir accès au contenu du site Web. Les utilisateurs de ce site

doivent s'inscrire par le biais d'un formulaire d'inscription où ils renseignent

différentes informations nécessaires vis-à-vis du cercle (exemple : nom, prénom, statut,

adresse mail, adresse, téléphone, grade...). Les administrateurs doivent par le biais des

informations saisies, admettre ou non l'utilisateur.

Lors de différentes étapes, des mails doivent être envoyés pour confirmer

certaines actions. Par exemple il est souhaité que lorsque l'utilisateur soumet son

inscription, un mail lui soit envoyé, pour lui confirmer sa demande. Il est également

envoyé un mail aux administrateurs, pour leur indiquer une nouvelle inscription, qui est à

valider. Lorsqu'un administrateur valide une inscription, pour autoriser l'utilisateur à se

connecter au site Web, un mail lui est envoyé, lui informant que son accès au site Web

est établit. Si l'administrateur ne valide pas l'inscription, ou qu'il supprime un compte

utilisateur, l'utilisateur est prévu par mail de la perte de ses identifiants. La mise en

place de ces mails automatiques nécessite la configuration du serveur SMTP, en le

spécifiant dans le fichier de configuration de PHP : php.ini. Il faut ainsi définir le

serveur SMTP pour l'envoi (ici smtp.free.fr), le port (ici 25, pour un accès non sécurisé

au serveur d'envoi), et l'adresse mail (ici [email protected]).

Les informations saisies pour identifier un utilisateur doivent être stockées dans

la base de données, afin de pouvoir retrouver, dans n'importe quelles circonstances, les

informations le concernant.

b. Les actions possibles

Définissons dès maintenant les droits et utilisations possibles du site web pour

tous les types d'utilisateurs.

Mes responsables souhaitent intégrer la gestion de 3 types d'utilisateurs : les

utilisateurs standard (ou visiteurs), le personnel du Cercle Mixte et les administrateurs.

La figure 6 illustre la hiérarchie

que je décris ci-après. Les

administrateurs possèdent tous les

droits d'utilisation du personnel du

Cercle Mixte, avec en plus toute la

partie de gestion et d'administration du

site Web. Le personnel reçoit tous les

droits des utilisateurs standards, avec

Administrateurs

Personnel du Cercle Mixte

Utilisateurs standard (ou visiteurs)

Figure 6 : Hiérarchie des utilisateurs

Page 17: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

17

en plus un lien vers différents services intranet (accès au planning de gestion du

personnel ou de l'hôtel). Les utilisateurs standards possèdent exclusivement des droits

de consultations, concernant le contenu du site Web. Dans le diagramme des cas

d'utilisations figurant en annexe n°1, il est présenté toutes les possibilités liées à

chacun des utilisateurs.

c. Structure de la base de données

Comme on a pu le constater dans la sous-partie précédente, la base de données

doit détailler toutes les informations liées aux utilisateurs, afin de pouvoir les identifier

au maximum.

Tous les utilisateurs doivent renseigner les mêmes informations, afin de les

identifier au maximum. La structure de la base de données évite les doublons, et surtout

permet de changer le type des utilisateurs aisément.

Au delà de cette gestion des utilisateurs, plusieurs informations concernant le

cercle mixte doivent être structurées. Ainsi, il est souhaité de stocker toutes les

informations liées aux activités suivantes :

- hôtellerie, où toutes les informations concernant les chambres seront

accessibles, telles que le prix de la nuitée, les différents conforts, appareils, ou type de

lits disponibles dans chacune d'elles, en évitant des redondances d'informations.

- restauration, où toutes les informations concernant les salles disponibles à

la clientèle (nombre de couverts, description), ainsi que les menus (où figurent

également les jours de fermetures du restaurant) sont mis en ligne.

- comptoir des ventes, où il est possible d'insérer une sélection de produits

disponibles à la vente (prix, description, confinement...). Cette activité n'était pas

prévue au départ, mais après avoir mis en ligne un produit fini, mes responsables ont

souhaité couvrir la diffusion d'informations à leurs membres pour cette activité.

En plus de la description de ses activités, le site web du cercle mixte est amené à

divulguer toutes ses informations pratiques. Les contacts par téléphone, fax, mail ou

autre sont ainsi renseignés dans la base de données.

Toutes ces informations stockées sur la base de données, doivent être

modifiables à souhait par les administrateurs, par le biais de formulaires. La figure 7

donne la structure de la base de données choisie.

Page 18: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

18

Figure 7 : Schéma relationnel de la base de données du site Web

2) Analyses liées à l’application de gestion de l’hôtel

Intéressons nous à la base de données sur laquelle est stockée toutes les

informations liées à la gestion des chambres d'hôtel.

a. Structure de la base de données

La base de données est le cœur de cette application. Elle doit pouvoir contenir

toutes les informations relatives aux chambres :

- Le Numéro et l’étage

- Le prix

- Les commentaires particuliers à une chambre (comme par exemple accès

handicapé…)

- Les lits disponibles (lits simples, doubles, électriques ou non)

- Les conforts installés (WC, baignoire, douche…)

- Les appareils mis à disposition (décodeur TV, TV grand écran, TV petit écran,

cafetière…)

Il m’a été demandé d’intégrer la liste des appareils, des conforts et des lits

installés dans chacune des chambres, pour faciliter la prise d’informations de la part des

employés.

Page 19: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

19

Egalement, elle doit stocker les informations permettant d’identifier les clients :

- Nom,

- Prénom,

- Téléphone,

- Leur statut (tel que M. ou Mme ou Mademoiselle ou Major, Lieutenant…)

- Leur fréquence (si le client est VIP, Habitué, Normal…)

Je considère que les utilisateurs de l’application peuvent être également des

clients. Ainsi, ils peuvent s’ils le souhaitent réserver une chambre pour eux même. Parmi

ces utilisateurs, on distingue les administrateurs des simples utilisateurs. Les

administrateurs disposent d’un droit privilégié sur les données de la base.

Au point de vue occupation, je considère qu’une chambre est occupée pour

différentes raisons :

- Pour travaux (La chambre est occupée. Il est nécessaire d’associer un motif

pour ce type d’occupation)

- Pour réservation (L’occupation est dans ce cas liée à un client). La réservation

est également associée à un statut (comme « en attente », « arrivé »,

« payé »…)

- Pour fermeture (dans le cas où tout l’établissement est fermé, suite à une

période de vacances ou à l’occasion d’un jour férié).

La figure 8 donne la structure de la base de données associée à cette application.

Page 20: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

20

Figure 8 : Schéma relationnel de l'application hôtel

Ce schéma relationnel illustre une base de données structurée, qui peut être

modifiable à souhait depuis des formulaires.

b. Les possibilités des utilisateurs

Il est important de délimiter dès maintenant tous les cas d’utilisations de

l’application pour les différents acteurs qui sont en interaction avec celle-ci. Les

utilisateurs de l’application se distinguent en 2 catégories :

- Les utilisateurs (les employés du Cercle Mixte)

- Les administrateurs (quelques employés du Cercle).

Les clients, bien qu’ils soient des acteurs importants dans les réservations ne

sont en aucun cas habilités à s'introduire sur cette application.

Avant de définir tous les cas d’utilisations, il est à noter que les utilisateurs sont

obligés de passer par une étape d’identification, pour garantir l’accès aux seules

personnes habilitées. Définissons dès à présent les droits de chacun des utilisateurs du

site Web.

Tous les utilisateurs (standard ou administrateurs) bénéficient de tous ces

droits :

Page 21: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

21

- Gestion des Lits, Appareils et Confort disponibles au sein de l’hôtel (qui inclut

l’ajout, modification ou suppression)

- Gestion des chambres (ajout, modification, et suppression de chambre). Il est

possible de lier des lits, conforts et appareils aux chambres. Par exemple, une

chambre pourra contenir une TV grand écran, Cafetière...

- Gestion des clients (en ajouter, modifier ou supprimer)

- Gestion des réservations et des occupations pour travaux (ajout, modification

et suppression)

Il est à noter que les suppressions concernant les données sont soumises à

vérification. L’utilisateur ne pourra en aucun cas supprimer une donnée, si celle-ci est

utilisée dans une autre table (associations FOREIGN KEY). Cela permettra de garder

une base de données fiable.

Les administrateurs disposent de quelques droits supplémentaires comme :

- La gestion des utilisateurs (seuls eux peuvent supprimer un utilisateur, ou le

rendre simple client)

- La gestion des événements (tel que les jours fériés pour lesquels

l’établissement peut être ouvert ou fermé et les périodes de fermetures pour

lesquelles l’établissement n’accepte aucune réservation)

- L’accès à un outil de sauvegarde de l’application (soit une sauvegarde complète

de la base de données au format SQL, soit une sauvegarde à des dates

prédéfinies du planning de l’hôtel au format PDF).

- La gestion des civilités (pour les clients), évolutions ("en attente", "payé", etc.

pour les réservations) ou Fréquences ("VIP", "habitué", etc. associées aux

clients), avec possibilité d’ajout, modification ou de suppression de ces

données.

Je considère que seul l’administrateur pourra créer et gérer ces informations,

pour garantir une certaine fiabilité des données, et garantir l'accès de l’application aux

bonnes personnes. Un récapitulatif de ces cas d'utilisation figure sur l'annexe n°10.

c. Cheminement de la création d’une nouvelle réservation

Les réservations se font par le biais du planning. C’est à ce seul endroit que

l’utilisateur peut créer une réservation.

L'utilisateur se retrouve confronté à la page du planning, où toutes les

disponibilités apparaissent. L'utilisateur clique simplement sur la disponibilité pour

enclencher la procédure de création d'une occupation.

Page 22: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

22

Dans la figure 9, l'utilisateur sélectionne une disponibilité au vendredi 31 Mai

pour la chambre 8. En continuant, l'application nous demande de sélectionner une date

de début d'occupation, ainsi qu'une date de fin d'occupation pour la chambre choisie.

Figure 9 : Choix d'une disponibilité pour une nouvelle occupation

L'application nous autorise à choisir exclusivement des dates qui sont

entièrement valides (qui évitent des chevauchements d'occupations...). L'utilisateur

décide d'appliquer ou non cette occupation à d'autres chambres, qui sont également

disponibles pour les même dates. Il est ensuite demandé à l'utilisateur de choisir quel

type d'occupation attribuer à la chambre : une réservation, qui sera associée à un client,

ou alors une occupation pour travaux.

3. Réalisation et développement

Nous allons nous intéresser aux développements liés aux différents projets. Le

site Web, dédié à la diffusion d'informations concernant le Cercle Mixte à ses

différents membres, doit rester le plus simple possible.

1) Un site Web Attrayant

Avant de nous pencher sur quelques pages disponibles aux utilisateurs, il est

préférable d'organiser la structure que le site Web prendra.

a. Design

Le design du site Web est un élément crucial à concevoir. Tous les utilisateurs

sont confrontés à ce design. Il est donc important de concevoir une interface captivante

et structurée, dans laquelle tout le monde pourra s'y retrouver. J'ai opté pour le

développement d'un design simple, ce qui n'était pas le cas au début. En effet, je

m'étais intéressé au Web Design sous Photoshop. J'ai appris à utiliser un tel logiciel de

retouche photo à cette occasion. A l'aide de tutoriels disponibles sur le net, j'ai pu

concevoir une première maquette du site Web. N'étant pas totalement satisfait, j'ai

décidé de créer un design simple et léger, pour favoriser son accès par n'importe quel

internaute relié en haut ou bas débit. J'ai finalement utilisé des styles disponibles en

CSS concernant l'attribut background où j'ai pu définir des arrières plans esthétiques.

Page 23: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

23

J'ai pu définir également des bords arrondis au différent menu, et autre titre. Voici la

structure générale utilisée par toutes les pages du site Web.

Figure 10 : Structure du Site Web

On identifie facilement sur la figure 10 les éléments principaux d'une page Web,

à savoir en haut l'entête, pourvue ici du logo du cercle mixte. On retrouve également le

block dédié au menu divisé en 3 :

- à gauche, le menu affiché pour tous les types d'utilisateurs, donnant accès

au contenu du site Web,

- au milieu, les liens vers les autres services du cercle mixte, réservé au

personnel,

- à droite, les onglets donnent accès à toute la partie gestion du site web.

Seuls les administrateurs bénéficient de ces onglets.

Le block situé à gauche de la page Web est flottant. Il affiche en premier les

sous-menus de l'onglet sélectionné en blanc dans le compartiment du menu. Il affiche

également les dernières mises à jour réalisées par les administrateurs concernant les

Page 24: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

24

menus. Le 3ième espace est dédié aux informations pratiques. Il divulgue ainsi les

coordonnées du cercle mixte depuis n'importe quelle page.

Le pied de page affiche uniquement l'année de création du Site Web.

Le contenu du Site Web est présenté dans un block central.

b. Une interface standard

Tous les utilisateurs disposent du même accès au contenu de ce site. Ils

bénéficient d'un accès aux informations liées aux différents services du cercle mixte :

- restauration, où les utilisateurs ont accès aux tarifs appliqués. Les tarifs

sont accessibles par une fiche au format PDF, affichée directement dans la page Web.

Egalement, il est présenté les menus en ligne. Ces menus, sont disponibles en format

PDF, pour les mois n-1, n et n+1 (où n est le mois courant). L'utilisateur les télécharge

pour afficher son contenu. Les salles disponibles à la restauration sont présentées en

termes d'effectif. Une brève description leur est accordée. Mes responsables ont

souhaité l'intégration d'un diaporama de photos illustrant les salles sélectionnées. Ainsi

le diaporama se met à jour pour afficher exclusivement les photos associées à la salle

sélectionnée. Des illustrations de ces réalisations sont disponibles en annexe n°2.

- hôtellerie, où les chambres sont présentées. Il s'agit communiquer à ses

membres le contenu des chambres (à savoir les conforts, appareils ou types de lits

disponibles). Egalement, mes responsables ont souhaité intégrer un diaporama pour

chacune des chambres. L'utilisateur sélectionnera la chambre pour laquelle, il souhaite

voir des photos. Cette page figure en annexe n°3.

Après la mise en ligne du site Web, au moment où j'écris ce présent rapport, mes

responsables ont souhaité diffuser de nouvelles informations, concernant l'activité de

comptoir des ventes. Le Cercle Mixte propose une multitude de produits. Il est souhaité

d'intégrer au Site Web l'affichage d'une sélection de produits les plus vendus, mais

également les promotions proposées au Cercle Mixte. Mes responsables ont souhaité

intégrer des informations sur les fournisseurs ou de regrouper les produits par familles.

Les visiteurs peuvent retrouver par le biais de filtres les produits recherchés, soit par

une recherche par mot clef, soit par une recherche par famille, ou alors par fournisseur,

s'ils le connaissent. Les visiteurs bénéficient également d'un catalogue PDF complet de

tous les produits disponibles au Cercle Mixte. Ce catalogue est généré par l'application

de gestion des ventes au Cercle Mixte : EPB Point de Vente. Ce catalogue sera mis à jour

régulièrement par les administrateurs. Ces changements ont bouleversé la structure de

la base de données, à laquelle j'ai associé de nouvelles tables. Voici dans la figure 11 la

structure finale de la Base de données du Site Web.

Page 25: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

25

Figure 11 : Structure de la base de données finale du Site Web

Un onglet spécial réservé au comptoir des ventes sera rajouté au menu, pour

faciliter l'accès aux promotions, aux sélections de produits, ainsi qu'au listing complet

des produits proposés au Cercle Mixte. Le nouveau menu des visiteurs est illustré dans

la figure 12 ci-dessous.

Figure 12 : Menu des visiteurs

Les informations pratiques sont des informations essentielles à communiquer. Les

informations de contact sont affichées sur toutes les pages, dans le block gauche de la

page Web. Par contre, il a été souhaité de créer une page où un plan d'accès au Cercle

Mixte sera disponible. Ce plan d'accès est généré par Google Maps. A l'aide d'une balise

HTML à coller dans le code de génération de la page Web désirée, le plan s'affiche

précisément. Une photo de cette page est disponible en annexe n°4.

Page 26: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

26

c. Les interfaces réservées aux personnel du Cercle

Le personnel du Cercle Mixte possède plusieurs droits, qui ne sont pas

accessibles pour les utilisateurs de base.

i. Le personnel

Le personnel du Mess peut par le biais du site Web, retrouver tous les liens vers

les autres services informatiques. Le site Web sert de passerelle vers différents

services intranet disponibles. Les différents services intranet concernés sont

l'application de gestion de l'hôtel ainsi que l'application de gestion du personnel.

Egalement, il est possible d'accéder à l'interface Web de gestion des sondes de

température pour les réfrigérateurs et congélateurs des cuisines, grâce à un lien.

ii. Les administrateurs

Les employés du Mess bénéficient de liens vers différents services. Toutes les

tâches d'administration du site Web sont réservées aux administrateurs.

Il a été nécessaire de structurer toute la Base de données ainsi que

d'implémenter toute une série de formulaires, pour permettre aux administrateurs de

modifier le maximum de contenu sur le site Web. Les différentes actions possibles sont

regroupées par thèmes.

Figure 13 : Menu du site Web

On observe sur la figure 13 l'onglet Utilisateurs, sur lequel l'administrateur

pourra accéder aux pages de gestion des utilisateurs inscrits (où il a la possibilité de les

modifier ou les supprimer), ainsi qu'à une page de gestion des utilisateurs ayant soumis

une requête d'inscription, mais qui est en attente de validation. L'administrateur peut

choisir de valider ou non ces inscriptions, et de reconnaître les utilisateurs en

différents statuts : standard (de simple clients), en tant qu'employé du cercle mixte ou

en tant qu'administrateur. Des captures d'écran de ces différentes pages de gestion

des utilisateurs sont en annexe n°5.

Les utilisateurs doivent rentrer dans leurs inscriptions la fonction ou qualité

qu'ils ont atteinte. Pour cela, mes responsables ont privilégié au début une approche

statique. Les fonctions ou qualités qu'ils pouvaient renseigner étaient prédéfinies dans

le code. Voici à quoi ressemblait le cadre réservé à la sélection de ces informations dans

la figure 14.

Page 27: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

27

Figure 14 : Block de sélection de qualité statique

L'utilisateur choisissait sa qualité parmi celles inscrites. Mes responsables m'ont

demandé s’il était possible de rajouter une nouvelle qualité à la hiérarchie des

gendarmes. C'est alors qu'il m'est venu l'idée de leur proposer une interface, par

laquelle les administrateurs du site Web seraient amenés à définir, modifier ou

supprimer ces différentes qualités. Ainsi la liste de ces qualités serait en constante

évolution. Voici l'aspect de ce block dynamique, dédié à la sélection de la qualité au

moment de l'inscription dans la figure 15.

Figure 15 : Block de sélection de qualité dynamique

L'administrateur peut dorénavant modifier à souhait l'intitulé de ses cadres

(Gendarmerie, Administration, Police, Militaire...), ainsi que leur contenu (Actif,

Réserviste...), grâce à une interface de gestion de ces qualités simple et pratique qui

figure en annexe n°6.

En plus de la gestion des utilisateurs et de leur qualité, les administrateurs ont la

possibilité de gérer le contenu du site Web, à savoir le contenu lié à la présentation des

différentes activités du Cercle Mixte, telles que le restaurant ou l'hôtel, tout comme

les informations générales liées au Cercle. Il est donc possible aux administrateurs de

gérer tout le contenu lié au restaurant:

- Les menus, qui sont mis en ligne sous format PDF. Chaque fichier PDF

uploadé sur le serveur est associé à un menu dans la base de données. Tous les menus

seront stockés dans le même dossier sur le serveur.

Page 28: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

28

- Les tarifs, sont affichés en un seul exemplaire. Seul le tarif de l'année

courante est uploadé par l'administrateur sur le site Web au format PDF.

L'administrateur peut supprimer le fichier déjà existant, ou le remplacer par un autre.

- Les salles de restauration, sont gérées par une interface, qui permet de

leur associer des photos. Cette interface doit permettre la modification des données

illustrant les salles dans la base de données, mais également permettre de gérer les

photos liées à la salle (en les ajoutant ou supprimant facilement).

Les administrateurs sont capables garder à jour les informations liées aux

chambres de l'hôtel. Ils peuvent à souhait modifier le contenu de chaque chambre

(appareils disponibles, lits installés, ou conforts intégrés)... Il est possible d'ajouter,

modifier ou supprimer tout le contenu lié aux chambres ainsi que les chambres elles-

mêmes. L'interface de gestion des chambres de l'hôtel doit au delà de la gestion de

données, prendre en charge l'intégration de photos à ces chambres, pour les illustrer.

Vous trouverez en annexe n°7 les interfaces de gestion des chambres

permettant une gestion des photos associées à celles-ci. J'ai essayé de concevoir ces

interfaces pour permettre à l'utilisateur de ne pas réfléchir à son utilisation, et de la

rendre la plus intuitive possible. L'interface dédiée à la gestion des salles de

restauration est la même à la différence des données (la salle de restauration n'aura

pas de gestion des lits, appareils ou autres lits disponibles...).

L'administrateur est également capable de modifier le contenu de sa page

d'accueil. Le message d'accueil est en effet stocké dans un fichier texte. J'ai trouvé

assez inutile de créer une table dans la base de données SQL, pour y faire figurer des

phrases qui apparaîtraient à l'accueil du site. Ainsi grâce à la balise TEXTAREA,

l'utilisateur peut modifier directement depuis une page web le contenu du fichier et

donc le message d'accueil de la page Web. L'administrateur peut s’il le souhaite y

intégrer des balises HTML pour le mettre en forme. L'annexe n°8 présente la page de

gestion du message d'accueil et l'affichage de ce message sur la page d'accueil.

Il peut finalement modifier les différentes informations pratiques que les

utilisateurs du site web retrouveront dans le block de gauche, à savoir les informations

concernant les contacts. L'administrateur pourra modifier à souhait les informations de

contact (numéro de téléphone, mail, fax...). J'ai étudié la structure de la base de

données ainsi que des formulaires de gestion de telle manière à faciliter les mises à jour

pour les administrateurs.

Page 29: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

29

L'activité comptoir de ventes m'a obligé à intégrer la gestion des produits,

promotions et catalogue de produits par les administrateurs. Des formulaires de saisies,

de modification ou de suppression ont du être implémentés.

Après quelques réflexions, je me suis proposé de revoir l'organisation du menu du

Site Web, pour le rendre plus compréhensible pour les administrateurs. Une copie du

nouveau menu est illustrée dans la figure 16 ci-dessous.

Figure 16 : Nouveau Menu complet pour les administrateurs du Site Web

On remarque que la première ligne du menu est réservée aux visiteurs et aux

employés du Cercle Mixte, tandis que la deuxième ligne du menu offre toutes les

possibilités de gestion aux administrateurs.

J'ai finalement structuré mes menus, pour permettre à l'administrateur une

meilleure prise en main. Ainsi l'onglet "Gestion Comptoir" donne accès à toutes les pages

de gestion du comptoir des ventes (gestion des produits, promotions...). J'ai finalement

dissocié l'onglet "salles" en deux onglets distinct "Gestion Restaurant" et "Gestion

Hôtel", qui permette d'accéder à tous les formulaires de gestions, qui leurs sont

propres. Ce nouveau menu, intégré tardivement sur le site Web, m'a confronté aux

problèmes de mises à jour de tous les pages impactées par cette réorganisation.

Mes responsables ont également souhaité l'intégration d'une page dédié à l'envoi

de newsletter. Cette page PHP propose à un administrateur d'envoyer facilement un mail

à tous les abonnés de la Newsletter. L'interface autorise les administrateurs à intégrer

des pièces jointes (dont le type est filtré parmi une liste). Le mail est envoyé au format

HTML. Il dispose d'un entête pourvu du logo, et d'un pied de page contenant les

informations de contact du Cercle Mixte. Il m'a été difficile d'implanter les pièces

jointes, puisqu'elles n'étaient pas reconnues par certaines boîtes mail. La fonction PHP

mime_content_type étant obsolète, j'ai du définir moi même tous les types mime pour

les pièces jointes autorisées (ppt, pptx, xsl, xslx, doc, docx, csv, jpg, png et pdf), pour

que les pièces jointes soient enfin reconnues correctement (notamment par les boîtes

de réception orange). Cette fonctionnalité permet donc d'envoyer un mail aussi

simplement que sur des fournisseurs tels que orange, gmail...

J'ai conçu et réalisé toutes ces pages de gestion du contenu du site web en ne

perdant pas à l'esprit qu'elles devaient être le plus simple possible. Tous ces

formulaires de modification peuvent ainsi modifier à souhait tout le contenu du site

Page 30: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

30

Web. Chaque visiteur ne rencontre pas les mêmes informations à chaque connexion, ce

qui permet d'affirmer que ce site Web est totalement dynamique.

2) L’application hôtel

Cette application remplace Chr Office. Elle devra être réactive, design et

pratique. Nous allons nous intéresser au design que j’ai choisi d’appliquer.

a. Le design

Je n’ai au cours de ma formation jamais encore pu réaliser de Web design par

moi-même. Ce projet en plus du projet d’élaboration de site Web, est une bonne

occasion de découvrir les joies du design, associées ici à la magie du CSS.

Pour des raisons d’ergonomie, j’ai choisi d’élargir la page Web de cette

application. Mes responsables souhaitaient afficher plus de contenu, ce qui m’a poussé

par soucis de lisibilité d’élargir toutes les pages Web, pour du coup garder une certaine

cohérence entre elles. Les différentes pages ne sont pas disposées de la même façon.

Certaines affichent de simples formulaires de saisie, ou des formulaires offrant

plusieurs modifications à la fois, tandis que d’autres s’occupent de l’affichage beaucoup

plus complexe du planning. Pour toutes ces pages, j’ai choisi de garder le même entête, le

même menu, et le même pied de page. Seul le contenu sera modifié à loisir.

Intéressons nous au design des éléments les plus retrouvés sur les pages de

l’application.

Le block central contenant tous les éléments a été dimensionné de manière large,

par rapport aux souhaits de mes responsables. J’ai choisi de créer une interface jolie à

regarder. En effet, cette application est l’outil de travail de tous les employés du cercle,

c’est pourquoi j’ai décidé d’intégrer en arrière plan une photo colorée du Mess. Le block

central bénéficie d’un degré d’opacité et de transparence, qui permet de rendre le

contenu du site visible !

L’entête, illustrée en figure 17 ci-dessous, se révèle être composée du logo du

Cercle ainsi que du titre des pages sur lequel l’utilisateur est connecté. Il a été souhaité

par mes responsables d’ajouter un calendrier qui permettrait d’accéder directement à la

date voulue sur le planning, dans un souci d’efficacité. J’ai pour ma part, choisi d’intégrer

le menu au sein de l’entête pour gagner un maximum de place, et permettre ainsi

l’affichage de la plus grande partie du contenu de la page à l’écran. Je me suis permis de

créer un menu déroulant avec l’aide exclusive du CSS, sans la moindre utilisation de

JavaScript, qui s’anime au passage de la souris. Les menus de gestion du planning et de

l’hôtel apparaissent pour tous les utilisateurs. L’onglet administration se révèle

Page 31: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

31

exclusivement aux administrateurs, permettant un accès à des modifications

particulières.

Figure 17 : Entête de l'application Hôtel

Le pied de page quand à lui, simple, permet un accès aux différents autres

services utiles aux utilisateurs du cercle mixte. Il y figure des liens pour l’accès au

planning du personnel, tout comme l’accès au site Web. Seul l’administrateur bénéficie

de l’onglet d’accès aux sauvegardes de l’application. Ce pied de page est observable sur

la figure 18 ci-après.

Figure 18 : Pied de page de l'application Hôtel

b. Les interfaces d’initialisations et de modifications des

informations portant sur l’hôtel

Avant que l’application puisse être utilisée au quotidien, il faut l’initialiser. Pour

cela, il a été nécessaire de créer des formulaires, dans lesquels l’utilisateur de

l’application intègre toutes les données nécessaires.

i. Les chambres

Pour ce faire, les chambres disponibles doivent être représentées au sein de

l’application. Pour cela l’administrateur doit créer un listing des appareils, conforts et

équipements disponibles parmi toutes les chambres de l’hôtel afin de les centraliser.

Ainsi, j’ai développé une interface permettant de gérer les différents appareils,

conforts et équipements disponibles, comme vous le constatez en annexe n°12.

L’interface est semblable pour les 3 formulaires de gestion des appareils, conforts et

lits. Elle dispose d’une liste faisant état des lieux de ce qui a été déjà crée, et dispose

en bas de page un formulaire de saisie d’un nouvel enregistrement. Les modifications des

enregistrements se font via une autre page disposant d’un formulaire de modification.

Page 32: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

32

Une fois la composition des chambres réalisée, les chambres peuvent elles-mêmes

être gérées via leur propre interface. Celle-ci n’est pas différente des 3 autres citées

précédemment. L’interface dispose d’une liste des chambres déjà créées. Il y a

également possibilité d’en rajouter rapidement en bas de page. C’est au niveau de la page

de modification qu’il y a du changement. Cette page de modification des chambres,

permet à l’utilisateur d’associer facilement des équipements, appareils ou conforts à

n’importe qu’elle chambre. On veille à ne pas lier une chambre à plusieurs mêmes

appareils (plusieurs cafetières par exemple) et à plusieurs conforts (plusieurs

douches…). On peut par contre, comme mes responsables le souhaitent, associer

plusieurs fois le même lit à la même chambre (une chambre pourra être composée de 2

lits 2 places…). Cette page dispose d’un bloc flottant à gauche permettant de gérer le

contenu des chambres. La partie centrale permet de modifier les informations de bases

des chambres. L’interface de modification des chambres est appréciable sur l’annexe

n°13.

ii. Les clients

Les clients peuvent changer de numéro de téléphone, d’adresse… Ces

informations doivent pouvoir être modifiée. Les utilisateurs de l’application disposent

d’une page dédiée à la gestion des clients. Cette page leur permet d’obtenir rapidement

toutes les informations préalablement rentrées sur un client. J’avais au départ conçu

une page sur laquelle s’affichaient tous les clients actuellement inscrits sur l’application.

Je me suis rendu compte que le Cercle disposait d’énormément de clients. Pour ne pas

noyer l’utilisateur dans une longue page de clients, j’ai décidé d’ajouter un filtre. Les

clients sont triés par leur nom de famille, en partant de A à Z. L’utilisateur peut

disposer de la liste de tous ces clients commençant par la lettre A ou B jusqu’à Z. J'ai

toutefois gardé un onglet offrant le listing complet de tous les utilisateurs. Egalement,

j’y ai intégrer des pages de 10 clients, permettant ainsi de structurer au maximum

l’affichage, pour ne pas noyer l’utilisateur dans une tonne d’informations. La page

permettant de gérer le listing des clients est disponible à l’annexe n°14, qui illustre mes

propos. Il est à noter que seul l’administrateur peut modifier le statut d’un client vers le

statut d'utilisateur ou d'administrateur. Egalement, lui seul à la possibilité de supprimer

un utilisateur ou autre administrateur.

c. L’interface principale

i. Le planning

Il s’agit dès à présent de s’intéresser à la page principale de l’application, à partir

de laquelle, tout est accessible : le planning. Le planning a été assez compliqué à

développer, tant au point de vue des requêtes SQL à créer, qu’au niveau de la mise en

forme pour obtenir un semainier beau et pratique. Je me suis efforcé dans un souci

Page 33: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

33

d’optimisation de soumettre le moins de requêtes possibles dans la génération de cette

page. En effet, mes responsables souhaitent prendre possession d’une application rapide,

qui leur afficher le planning de l'hôtel dans le quart de seconde qui suit, que cela soit en

réseau local, ou en passant par internet. Je m’étais dès le début penché sur un planning

affichant une semaine de 7 jours en partant de la date du jour. Mes responsables pour

des raisons pratiques ont souhaité que j’affiche 14 jours de réservations, ce qui avait

engendré la modification des proportions du block central (par un élargissement de

1024px à 1200px). Egalement, j’ai dû par la suite rajouter l’entête du tableau à la fin du

tableau contenant le planning, pour permettre une meilleure lisibilité. Il m’a été demandé

de rajouter les informations liées aux chambres sur ce planning. Ainsi, lorsque

l’employée prend une réservation au téléphone, il peut accéder depuis cette unique

interface aux informations liées aux chambres, à l’aide d’une petite info-bulle

récapitulative. La disposition du cœur de cette application est disponible en annexe n°11

ci-après.

ii. Les occupations

Le planning permet, lorsque la chambre n’est pas occupée de lui associer une

occupation.

Les nouvelles occupations débutent à la date sélectionnée sur le planning (mais

peut toutefois être modifiée). Ainsi, si l’utilisateur clique sur la case du 1er mai, pour la

chambre 1, l’utilisateur se retrouve sur une page le guidant dans cette démarche. J'ai

voulu concevoir une application la plus complète possible, tout en restant simple, ce que

ne va pas forcément de paire. Ainsi je me suis efforcé de mettre en œuvre une

interface qui permet à l’utilisateur d’être véritablement guidé. Les différentes pages qui

permettent de définir les informations d’une nouvelle occupation ont été conçues dans

cet esprit. J’ai pu développer une page sur laquelle l’utilisateur sélectionne les dates de

début et de fin d’occupation pour les chambres. Un exemple est disponible dans la figure

19 ci-dessous.

Page 34: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

34

Figure 19 : Sélection des dates de début et de fin d'occupation dans l'application hôtel

Cette interface composée de 2 calendriers que j’ai développés intégralement,

autorise l’utilisateur la sélection d'une date de début dans le calendrier de gauche ainsi

qu’une date de fin dans le calendrier de droite. Pour faciliter le choix de ces dates, j’ai

intégrer les occupations déjà existantes en violet. L’utilisateur ne peut donc pas cliquer

sur les jours déjà occupés. Egalement, il ne peut pas sélectionner une date de début

avant le 8 Mai en sachant que la date de fin est le 18 Mai et qu’il existe des occupations

entre ces dates… Ces deux calendriers assez complexes, autorisent l’utilisateur à

sélectionner les dates qu’il peut choisir par rapport aux disponibilités. Cette interface

guide l’utilisateur dans le choix des bonnes dates et garantit qu’aucune nouvelle

occupation n’enchevêtrera d’autres occupations. Je tiens à souligner que cette interface

a été la plus longue à développer, puisque les requêtes SQL, ainsi que les conditions qui

vérifient que l’utilisateur sélectionne les bonnes dates sont de vrais casses têtes. Après

ce passage, l’utilisateur finit par choisir quel type d’occupation il souhaite créer

(réservation ou travaux). Il a également la possibilité d’appliquer l’occupation en cours à

toutes les chambres disponibles aux mêmes dates, ce qui n’était pas possible de faire

sur Chr Office. Dans le cas où un client souhaite réserver 3 chambres de l’hôtel en

même temps, il n’est pas obligé de créer 3 fois la même réservation. L’utilisateur peut

cocher les 3 chambres qu’il souhaite attribuer au client.

Le planning permet également de modifier les occupations existantes.

L’utilisateur se retrouve ainsi vers une page qui lui permet de modifier le statut d’une

réservation (de passer à « En Attente » à « Payé »…), ou encore le motif d’une

occupation pour travaux, ou de supprimer tout bonnement l’occupation. De plus, il m’a été

Page 35: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

35

demandé de pouvoir modifier la chambre attribuée à une précédente occupation. Par

exemple, un client réserve la chambre 1 pendant 2 mois, les utilisateurs peuvent

attribuer une autre chambre à cette réservation de 2 mois, et tout ça simplement.

L’utilisateur se retrouve face à une liste de chambres disponibles pour les mêmes dates,

et il peut choisir la chambre de remplacement par rapport au contenu de celle-ci (qui est

mis en rappel sur la page à la demande de mes responsables). Cette option n’était pas

gérée par l’ancienne application Chr Office. En sus, j’ai du développer la possibilité de

changer les dates d’une occupation. J’ai choisi de reprendre l’interface décrite dans la

figure 19 ci-dessus, qui consiste à proposer via les calendriers les possibilités de

modifications des dates pour la chambre en cours.

d. Besoins supplémentaires

Plusieurs besoins supplémentaires sont apparus, après les développements. Une

fois l’application terminée, il m’a été demandé de rajouter quelques optimisations à

l’application.

i. Gestion de l’emploi du temps de la lingère

Le Cercle Mixte embauche une ménagère qui travaille tous les jours de la semaine

du lundi au vendredi 12h. Ainsi les week-ends et jours fériés, les chambres ne sont pas

faites. Pour éviter des oublis, il m’a été demandé de prendre en compte le planning de la

ménagère. Pour éviter d’attribuer des chambres pour lesquelles le ménage n’aura pas été

fait à la suite d’un jour férié, week-end ou autre, il m’a été demandé que l’application

puisse bloquer les réservations les jours où la ménagère ne travaille pas. Les utilisateurs

ne peuvent donc pas attribuer de chambre pour laquelle le nettoyage n’a pas été réalisé

(à moins qu’ils décident d’eux-mêmes de faire le ménage…).

Pour expliquer le comportement de l’application, voici un exemple dans la figure

20 ci-dessous. Notons que le week-end du samedi 18 et dimanche 19 Mai est suivi du

lundi de pentecôte. On rajoute par exemple la réservation de Monsieur BIBI le

dimanche 19 Mai pour la chambre 224. Le dernier passage de la ménagère est le

vendredi 17 Mai, et son prochain passage est le mardi 21 Mai, après le jour férié.

L’application à la suite de l’ajout de cette réservation bloque la chambre avant et après,

lorsque la ménagère n’est pas là. Il sera impossible de rajouter des réservations, puisque

la chambre ne sera pas faite.

Page 36: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

36

Figure 20 : Exemple de gestion de lingerie

ii. Les événements

Un établissement tel qu’un hôtel est soumis à de nombreux d’événements. Ainsi,

j’ai du intégrer à la base de données, ainsi qu’au planning, et autres pages gérant les

occupations, de prendre en compte les nouveaux événements.

Plusieurs types d’événements sont possibles :

- Les jours fériés (fermés ou non)

- Les périodes de fermetures

Mes responsables souhaitent associer aux jours fériés un code couleur, pour bien

les identifier sur le planning. L’utilisateur choisit la couleur au moment de la création du

jour férié à l’aide d’un nuancier, et apparaît sur le site web. Le jour est ainsi coloré de

cette couleur. Un info-bulle apparaît également au survol de l’entête du planning,

rappelant l'intitulé du jour férié en question. Les jours fériés fermés, disposent en plus

d’un blocage des chambres. Une occupation de type travaux est rajoutée sur chaque

chambre (lorsqu’aucune réservation n’a été déjà crée à la date férié précédemment).

Les périodes de fermeture reviennent à bloquer, pour la période indiquée, toutes

les chambres de l’hôtel. Aucun ajout d'occupation ne sera possible pour cette période.

Toutefois, pour éviter d’enchevêtrer des occupations sur une chambre, l’application

vérifie à chaque fois si son nouvel ajout n’enchevêtre aucune autre occupation, pour

éviter les incohérences dans la base de données, et garder une base de données saine.

Le développement de cette application de gestion des chambres d’hôtel a été

pour moi complexe. Il a fallu structurer mes réflexions pour m'y retrouver dans mes

développements. J’ai intégré à cette application, toutes les fonctionnalités disponibles

Page 37: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

37

sur l’ancienne application Chr Office. J’ai pu également rajouter quelques optimisations

et fonctionnalités, sans perdre de vue que cette application sera servie tous les jours.

Elle sera disponible aux employés du mess possédant un login en réseau local ou via

internet, en passant par un nom de domaine. Il est important que l’application passe par

une URL locale en réseau local et par le nom de domaine par internet. En cas de coupure

d’internet au Cercle Mixte, l’application doit toujours être disponible en tapant l’url du

serveur local.

4. Autres missions confiées

Au cours de mon stage, je me suis vu attribué d’autres missions. Une de mes

missions a été de développer une application en java dédiée au tri de photos. La

deuxième se porte le réseau du Cercle Mixte. Une 3ième mission m'a été proposée. Il

s'agit d'écrire un script JavaScript pour la génération d'une page HTML à partir d'une

feuille de calcul sous Google Drive.

1) Programme java de tri de photos

a. Etude des besoins

i. Les besoins

L’HACCP (Hazard Analysis Critical Control Point) est une méthode ou un outil de

travail permettant un suivi drastique du système alimentaire. Il s’agit ici d’améliorer en

continu les contrôles, afin d’analyser les dangers biologiques (virus, bactéries…),

chimiques (pesticides, additifs…) ou physiques (bois, verre…). L’HACCP est donc un

système qui permet d’identifier, évaluer et maîtriser les dangers alimentaires par

rapport aux aliments.

Le personnel en cuisine du Cercle Mixte prend des photos régulièrement de la

marchandise entrant dans les cuisines. Ce suivi provoque la manipulation de nombreuses

photos. Ces photos sont ensuite stockées sur un disque dur réseau, dans lequel toutes

les photos sont sauvegardées. Le problème est qu’actuellement, ces photos sont

stockées en vrac dans un dossier. Ainsi, en cas de problème, la recherche de la photo du

lot d’aliments problématique sera assez chaotique.

Ainsi, il serait souhaitable de créer une petite application portable, qui

permettrait de trier les différentes photos suivant leur date de prise de vue. (La date

de prise de vue est ici liée à la date d’entrée des aliments dans les cuisines).

L’algorithme de tri devrait donc permettre de transférer une photo exemple.jpg dont la

date de prise de vue est le 14 mai 2013 vers le chemin suivant 2013/05/14/exemple.jpg.

Toutes photos seraient donc déplacée dans un dossier respectant cette arborescence

aaaa/mm/jj/photo.jpg (où aaaa est l’année, mm le mois et jj le jour de prise de vue).

Page 38: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

38

ii. Solution proposée

Le cahier des charges ne fait apparaître aucune contrainte concernant le langage

de programmation. Après des hésitations pour le choix du langage, j’ai finalement choisi

de développer cette petite application en Java, puisque tous les ordinateurs du Cercle

Mixte possèdent une installation de Java récente.

Le cheminement d’utilisation nominal de l’application est la suivante : l’utilisateur

ouvre l’application. Il sélectionne le répertoire de destination où les photos sont

stockées (généralement la carte SD de l’appareil photo). Il choisit le répertoire de

destination, destiné à recevoir les photos. Il valide ses choix, lançant ainsi le processus

de déplacement des photos du répertoire source vers le répertoire de destination.

b. Développement

Nous allons nous intéresser d’un peu plus près au développement de cette petite

application java de tri de photo.

i. Le traitement

L’application au point de vue traitement réalise le déplacement d’une liste de

fichiers ayant pour extension « JPG ou JPG » stocké dans un répertoire source vers un

répertoire destination. Pour cela, il a fallu récupérer la liste des fichiers images du

répertoire source. Pour chacune de ces images, il était nécessaire de récupérer la date

de modification de celle-ci et de créer une arborescence du type

repertoire_destination/aaaa/mm/jj/ (lorsque elle n’existe pas encore) dans lequel la

photo sera déplacée.

Comme je l’ai mis plus haut, en java, on ne peut récupérer que la date de

modification d’un fichier. Dans notre cas, cela ne posera pas de soucis. En effet, lorsque

les photos sont prises, la date de modification est la même que la date de création et de

prise de vue. Notre application s’applique ici à des photos n’ayant pas subit de

déplacements sur un autre support. Les dates de modifications de photos ne sont donc

pas altérées et restent identiques aux dates de prises de vues.

L’utilisation de la méthode renameTo() s’appliquant à la classe file, s’exécute dans

le cas où le système de fichier du répertoire source est identique à celui du répertoire

de destination.

ii. L’interface graphique

Le traitement effectuer par l’application n’est pas très compliqué en soit.

Toutefois, pour rendre cette application pratique, il est souhaitable de lui intégrer une

interface graphique simple. L’utilisateur en lançant l’application se trouvera face à cette

interface illustrée dans la figure 21 ci-dessous.

Page 39: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

39

Figure 21 : Fenêtre principale de l'application de tri de photos

Une fois les dossiers sources et de destination choisis, l’utilisateur lance le tri

des photos. Pour rendre l’application pratique, j’ai décidé d’intégrer par la suite une

barre de progression, qui décrirait réellement l’état des traitements réalisés par

l’application. Pour cela, l’incrémentation de la barre de progression s’est réalisée par le

biais d’un nouveau thread. Voici un exemple de progression ci-dessous.

Figure 22 : Barre de progression pendant le processus de tri des photos

L’application de tri de photo a par la suite été exportée en exécutable .jar afin

que l’exécution soit aisée par n’importe quel utilisateur souhaitant profiter de ce

programme.

2) Restructuration du réseau

Après le mini-projet de développement d’une application de tri de photo, il m’a

été proposé en collaboration avec le 2ième stagiaire en informatique, issu du DUT Réseau

& Télécoms, Benjamin MARLIER. Nous avons tout d’abord réalisé un état des lieux de

l’état du réseau du Cercle Mixte.

a. Etat des lieux

Le Cercle Mixte dispose actuellement de 2 réseaux distincts :

Page 40: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

40

- Le réseau de la Gendarmerie (sur lequel nous n'avons pas le droit de

travailler), sur lequel est relié quelques imprimantes et ordinateurs réservés à la

gendarmerie

- Le réseau du Cercle Mixte (sur lequel est connecté tout une armée de

périphériques réseaux tels que des ordinateurs, disques durs, serveurs, imprimantes,

téléphones IP, NAS, Caméras de surveillances...)

Vous trouverez en annexe n°15, un schéma représentant tous les périphériques

connectés. Ils sont répartis dans tout l'établissement. Une baie de brassage permet de

centraliser toutes les prises murales RJ45. Une photo de la baie de brassage est

également disponible en annexe n°16. On identifie alors les Switch Ethernets Poe ou non

reliés aux réseaux de la gendarmerie et du Cercle Mixte.

Le réseau du Cercle mixte est routé par une Freebox. Elle permet d'établir une

connexion internet pour tout le réseau du Cercle. Toutefois, le serveur gère quand à lui

le DHCP, et attribue sur une plage d'adresses prédéfinies, les adresses IP aux

périphériques n'ayant pas d'IP statique. Les adresses IP de tout le réseau sont définies

de 192.168.1.1 à 192.168.1.254.

Quelques ralentissements se font ressentir sur le réseau depuis l'installation des

multiples caméras IP sur le réseau du Cercle Mixte. Ces caméras sont gérées par un

NAS de QNAP, le VS2008Pro. Le flux des caméras est enregistré sur ce NAS. Les

enregistrements sont accessibles par une interface simple, que vous trouverez dans la

figure 23 suivante.

Figure 23 : Interface QNAP VS2008Pro

Page 41: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

41

Toutes les cameras envoient près de 6000kbit/secondes sur le réseau. Avec 6

caméras, c'est près de 24000 kbit qui transitent par seconde sur le réseau. Il est

souhaité par nos responsables de trouver une solution qui permettrait d'éviter des

engorgements sur le réseau.

b. Actions

Avant toute chose, il devenait assez pressant de remédier aux problèmes de

ralentissements sur le réseau. Pour cela, nous avons décidé avec mon collègue stagiaire

en réseau de migrer toutes les caméras de surveillance ainsi que le NAS sur un autre

réseau. Ceci contribuerait à alléger le trafic sur le réseau du cercle mixte, puisque les

caméras seraient sur leur propre réseau. Voici un schéma récapitulatif des différents

changements d'adresses IP dessiné sur la figure 24 ci-dessous.

Figure 24 : Plan IP du réseau de caméras

Nous avons relié toutes les caméras sur un Switch Poe (permettant l'alimentation

de certaines caméras via Ethernet). Ainsi, nous avons du définir les adresses IP des

caméras et du NVR en statique, en définissant comme passerelle le NVR de QNAP. La

passerelle doit être déclarée en fin de plage IP. L'adresse de la passerelle est la même

que l'adresse IP du NVR qui est 192.168.4.254. Nous avons choisi d'exporter les

caméras vers un réseau non utilisé en ".4". Nous avons finalement isolé ce réseau. Le

Page 42: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

42

réseau du Cercle mixte n'a pas accès aux différentes caméras, et encore moins au NVR.

Pour résoudre ce problème, il faudrait paramétrer un router, dédié à la redirection de

ports. Ce router serait ainsi relié d'un côté au réseau du Cercle Mixte, et de l'autre au

réseau des caméras. Ainsi, il aurait pour but de rediriger les ports du réseau des

cameras vers le réseau du Cercle. Il est ainsi possible d'accéder aux différentes

caméras, en faisant appel depuis le réseau du Cercle à l'adresse IP du router (en

192.168.1.XXX:PPPP) où PPPP est le port. L'élaboration de ce router dédié à la

redirection de ports est un des projets de mon collègue stagiaire.

L'interface de gestion des caméras de la figure 23 permet la gestion de la

position de toutes les caméras motorisées. A mon arrivée, il y avait quelques problèmes

de compatibilité de certaines caméras de marque APEXIS avec le NAS de QNAP. Pour

palier à ce problème, j'ai pu mettre à jour le firmware de QNAP vers une version

prenant plus de caméras en charge.

En plus de cela, j'ai été amené à installer des

nouvelles caméras dans l'établissement, notamment à

l'extérieur, dans l'hôtel et en cuisine. J'ai également

été amené à modifier l'emplacement de certaines

caméras, ce qui m'a amené à tirer quelques paires de

câbles RJ45 dans tous les plafonds du Cercle Mixte.

Toutefois, certaines paires de câbles semblaient ne

pas fonctionner. Pour cela, j'ai eu l'occasion d'utiliser

un appareil qui permet de tester les réseaux (FLUKE

NETWORK Netools). Une photo de cet appareil est

visible sur la figure 25.

3) Développement d'un script de génération de compte rendu

Ce projet de dernière minute est destiné à faciliter le travail de mes

responsables, pour rendre automatique la génération d'un compte-rendu.

a. Analyses des besoins

i. L’existant

Actuellement, mes responsables utilisent Google Drive pour partager avec tout le

personnel du Cercle des documents. En effet, des formulaires sont en ligne, et

permettent de notifier un état des lieux pour la cuisine, la salle de restauration... Ces

formulaires stockent leurs données sur une feuille de calcul Google Drive (Spreadsheet).

Mes responsables notent régulièrement l'état des lieux du Cercle Mixte, pour en

Figure 25 : Testeur de

réseau

Page 43: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

43

référer le résultat au personnel. Ils peuvent ainsi en fonction des notations rectifier ce

qui avait mal été fait la veille. Pour cela, il serait pratique que les données stockées dans

la feuille de calcul, puisse être exportées pour produire un compte-rendu papier lisible.

ii. Réflexion et Solution proposée

Avant toute chose, il faut savoir quel est le format le plus approprié pour

exporter un compte rendu. Pour ma part, je pense que le PDF est un format qui serait le

plus attendu. Toutefois au point de vue technique, il y a pas mal de choses à

entreprendre. En effet, j'ai pu apprendre comment charger ou télécharger un fichier

sur Google Drive, depuis un script PHP stocké sur mon PC, en utilisant l'API de Google

Drive et Drive SDK...

Mes responsables ont souhaité manipuler le moins de fois la souris pour parvenir

à leur résultat, ont préféré que j'exporte la ligne sélectionnée dans la feuille de calcul

au format HTML. Pour ce faire, il m'est nécessaire d'éditer simplement un script

JavaScript, adapté à l'API de Google Drive.

b. Réalisation avec Google Drive

i. Développements

J'ai donc développé un script JavaScript pour parvenir à mes fins. Mon script

récupère les coordonnées de la cellule sélectionnée sur la feuille de calcul. On récupère

ainsi l'indice de la ligne à exporter. On récupère le tableau de valeurs (à l'aide des

différentes classes Spreadsheet, Sheet et Range de Google Drive) pour l'enregistrer

dans un fichier HTML. Ce fichier HMTL contient toutes les données de la ligne

sélectionnée ainsi que l'entête. Cette page HTML est organisée verticalement et non

horizontalement comme la feuille de calcul, pour permettre une meilleure lisibilité. Des

codes couleurs sont intégrés à la page HTML pour faire ressortir des informations qui

devraient susciter des changements.

Page 44: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

44

ii. Conseils d'utilisations

Figure 26 : Utilisation du script de génération de compte rendu

Comme on peut le voir sur la figure 26, il est nécessaire de sélectionner la ligne

que l'on veut exporter. On clique sur une cellule de la ligne. Un menu HTML apparaît

quelques secondes après le chargement de la feuille de calcul. On choisit alors le sous-

menu Export to HTML File qui va générer un fichier HTML reprenant toutes les données

de la ligne sélectionnée, et le stocker sur Google Drive sous le nom audit_HTML.html. Ce

fichier est écrasé avant chaque export. Ainsi, le fichier audit_HTML.html stocké à la

racine du répertoire de stockage, est réactualisé à chaque exécution du script.

Toutes les missions que j'ai pu réaliser se sont échelonnées tout au long du stage.

J'ai pu adapter mon planning en fonction des besoins immédiats de mes responsables.

Vous trouverez en annexe n°17 un tableau récapitulatif du déroulement de mon stage.

5. Bilan technique et humain

Maintenant que toutes les missions que l'on m'a confiées durant ce stage ont été

étudiées, je vais me remémorer toutes les difficultés que j'ai rencontrées durant le

développement des différentes applications.

1) Les difficultés rencontrées

Plusieurs difficultés sont apparues durant les développements

a. Application Hôtel

L'application de gestion des chambres d'hôtel a été l'application la plus difficile

à mettre sur pied.

Lors des développements, j'ai dû implémenter un minimum de requêtes SQL par

page Web. En effet, cette application sera utilisée tous les jours. Pour assurer un temps

Page 45: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

45

de réponse convenable, les pages web en plus de soumettre le moins de requêtes

possibles au serveur, sont mises en forme exclusivement par le biais du CSS, évitant le

téléchargement d'images ou logos lors du chargement de la page.

Quelques requêtes SQL que je mettais au point ne donnaient pas le résultat

attendu. Par exemple, dans l'affichage du planning, certaines occupations

n'apparaissaient pas, alors qu'elles existaient dans la base de données. Comme je l'ai

expliqué précédemment, j'ai décidé de regrouper les requêtes SQL qui le pouvaient

entre elles, pour optimiser le temps d'affichage de la page (grâce à des jointures

externes, internes et des contraintes de). Ces modifications m'ont apportées des

erreurs, car elles ne me donnaient plus le résultat attendu. J'ai du identifier et corriger

ces problèmes de sélections SQL, pour permettre aux utilisateurs de travailler sur une

application fiable, ne leur révélant aucune information erronée.

Certains formulaires de saisies demandaient à l'utilisateur de sélectionner des

dates. J'ai donc décidé d'utiliser une librairie déjà existante tc_calendar. Cette

librairie libre permet l'affichage d'un calendrier, pour aider à la sélection de dates,

grâce au JavaScript. J'ai donc du intégrer et utiliser cette librairie, pour l'inclure au

mieux à mon application Web. J'ai été amené à modifier quelques lignes de code dans

cette librairie, pour incorporer au mieux la position de cet outil. Voici un exemple

d'intégration de cette librairie à l'application dans la figure 27 ci-dessous.

Figure 27 : Utilisation de la librairie TC_Calendar

J'ai également été amené à utiliser une autre librairie pour l'exportation du

planning au format PDF. J'ai donc utilisé HTML2PHP. Je génère le code HTML illustrant

le planning pour l'injecter dans un algorithme utilisant HTML2PDF. J'ai du apprendre à

utiliser cet outil très pratique, qui permet la génération de n'importe quel document au

format PDF.

J'ai été appelé à développer moi-même deux calendrier de sélection de dates, qui

sont illustrés en figure 16. Ces calendriers proposent à l'utilisateur de sélectionner les

dates de début et de fin d'occupation, tout en prenant en compte les occupations déjà

existantes. Ces calendriers ne prenaient pas en compte certains paramètres. Pour les

Page 46: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

46

forcer à les prendre, j'ai du modifier sans relâche mes algorithmes, pour produire au

bout de quelques jours un algorithme qui semble fiable.

Durant le développement de cette application, je n'ai pas arrêté porter à

vérification n'importe quelle saisie utilisateur (des formulaires de saisies jusqu'aux URL

dont les pages cibles sont pourvues de méthodes GET). Pour éviter que certains

utilisateurs malveillants ne réalisent d'attaques sur cette application, et pour garder

une base de données propre, toutes les pages de l'application vérifient n'importe quel

paramètre. Ces vérifications sont longues à réaliser, mais garantissent au final la

production d'une application sûre.

Une fois mon travail terminé, je l'ai soumis à mes responsables. Ils m'ont alors

confié des améliorations à apporter. Bien que l'application apparaisse en ligne, j'ai été

amené à modifier mon travail, tout en garantissant une disponibilité optimale de

l'application. Mes responsables ont alors souhaité que j'intègre la gestion de la lingerie.

Cette gestion devait occuper les chambres avant et après des réservations, pour les

jours fériés, le Week-end et le vendredi. Une fois cette modification réalisée, mes

responsables souhaitent étendre cette gestion. J'ai donc été obligé de revoir mon

approche, pour produire des algorithmes adaptés aux besoins.

b. Le site Web

Le site Web m'a amené à utiliser des fonctionnalités en PHP que je n'avais pas

encore eu l'occasion de connaître.

Le Site Web du Mess a pour but de diffuser des informations à ses membres.

Des photos sont mises en lignes par les administrateurs, pour illustrer les informations

en ligne. Il m'a été nécessaire d'utiliser l'upload de fichier par un formulaire sous la

méthode POST. Le serveur permet un accès en écriture sur son disque dur, et permet

d'y copier des photos ou fichiers PDF dans mon cas. C'est la première fois que j'ai

utilisé un formulaire pour envoyer des fichiers. J'ai donc du apprendre à filtrer les

fichiers, pour ne pas permettre à des personnes malveillantes d'uploader n'importe quel

fichier.

De multiples photos peuvent être uploadées pour illustrer des informations

contenues dans le site Web. Pour rendre l'utilisation de ces photos attractive par les

visiteurs du site Web, j'ai décidé d'intégrer un diaporama de ces photos. Pour cela j'ai

dû m'intéressé à un langage que je n'avais jamais eu l'occasion d'utiliser : le JavaScript.

J'ai donc développé un petit script JavaScript, qui permet de faire un diaporama des

photos uploadées sur le serveur, pour illustrer un contenu. Ce diaporama dispose d'un

contrôle manuel pour naviguer parmi les photos, mais également d'un renouvellement

automatique des photos à l'aide d'un chronomètre. L'intégration de ce script a été

Page 47: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

47

compliquée, puisque je devais passer une variable de type chaîne PHP au script

JavaScript. J'ai finalement après de multiples recherches qui ne m'ont amenées aucun

résultat positif, trouver un algorithme moi-même.

Mes responsables ont souhaité l'envoi de mail automatique, pour notifier certains

événements. Ainsi, lors de l'inscription de l'utilisateur, plusieurs mails sont envoyés.

Egalement, un mail est envoyé à l'utilisateur en cas de suppression de son compte sur le

site Web. L'envoi de ces mails nécessite la configuration du serveur SMTP sur le

serveur où est stocké le site Web. Le fichier php.ini contient des paramètres de

configuration du serveur SMTP (son nom smtp.free.fr, son port 25 et l'adresse mail

d'envoi [email protected]). Je n'avais jamais été auparavant amené à configurer un tel

serveur d'envoi de mail, et cela m'a permis de me confronter à la configuration d'un tel

serveur.

Mes responsables souhaitaient stocker le site Web sur le serveur de stockage

free. Je me suis confronté à plusieurs problèmes de configuration de la part de leur

serveur, puisque je n'arrivais pas à connecter le site Web à sa base de données stockée

sur sql.free.fr. Après de multiples recherches, il s'est avéré que leur serveur avait un

problème de configuration. Egalement, la fonction de mail automatique (qui est déjà

configurée sur le serveur free.fr), n'est pas très efficace, puisque l'envoi d'un mail se

réalise 1 fois sur 30. Devant une telle quantité de problèmes, j'ai demandé à mes

responsables de stocker le site Web sur le serveur du cercle mixte, que j'aurai

configuré, pour stocker le Site. Après son installation, il s'est avéré que la fonction mail

envoyait 100% des mails et que le site Web n'a eu aucun problème d'accès à la base de

données. Le serveur du Cercle Mixte offre donc une meilleure qualité de service que le

serveur mis à disposition sur le domaine free.fr.

Après la mise en ligne de ce Site Web, mes responsables ont décidés de modifier

quelques données sur le Site, ainsi que son organisation. Pour l'inscription de l'utilisateur

sur le site Web, celui-ci devait renseigner sa qualité. Le tableau sur lequel tous les

champs à sélectionner étaient défini de manière statique comme sur la figure n°14. Mes

responsables m'ont demandé de pouvoir modifier ces champs depuis une page de gestion.

Pour cela, j'ai du modifier la base de données, pour y ajouter de nouvelles tables. Il m'a

été nécessaire de modifier tous les formulaires où il était possible de modifier la qualité

d'une personne. Ces modifications ont été apportées tout en assurant la disponibilité du

Site Web. Les champs des formulaires qui permettent la sélection des qualités sont

maintenant semblables à la figure 15. Il est important pour un développeur de devoir

s'adapter aux demandes, et d'appliquer les mises à jour demandées, tout en

garantissant une qualité de service irréprochable à son application.

Page 48: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

48

Mes responsables ont également souhaité l'intégration de la gestion d'une

sélection de produits, de promotions et d'un catalogue, offrant un listing complet de

tous les produits disponibles. Cette modification tardive m'a obligé à modifier la Base

de données et l'organisation du site Web alors que celui-ci était en ligne. Cela m'a appris

à modifier le contenu d'un site Web en essayant de limiter la coupure du site en un

temps inférieur à 1 minute. Cela m'a appris à toujours m'adapter, revoir mon

organisation, et produire une réponse correspondante aux demandes de mes

responsables rapidement. Egalement, l'intégration d'une newsletter, m'a obligé à

rajouté un champ, dans lequel les utilisateurs pourraient se désabonner facilement.

L'envoi des mails de newsletter ont été problématiques, avec des types mimes non

compatibles avec certaines boîtes mails. Cela m'a obligé à approfondir mes

connaissances dans l'envoi de mail de différents types, via des scripts PHP.

c. L’application java de tri de photo

Le mini projet de développement d'application java m'a été utile pour

implémenter des outils java que je n'avais jusqu'à maintenant pas eu l'occasion

d'implémenter.

Ce projet m'a permis de développer une application utilisant les threads. Dans le

processus de transfert de fichier d'un répertoire source à un répertoire destination,

j'ai souhaité intégrer une JProgressBar à mon application, pour permettre à l'utilisateur

d'avoir un suivi concernant le traitement en cours. J'ai bien réussi à intégrer cet objet

dans une fenêtre java. Toutefois celle-ci ne s'incrémentait pas. Pire, le traitement ne se

réalisait pas. J'ai donc pensé à l'utilisation des threads. J'ai bien reçu des cours

concernant les Threads en module de Méthodes et Outils pour la Programmation (MOP).

Toutefois, nous n'avions jamais eu l'occasion de mettre en pratique ces cours. Le

développement de cette barre de progression m'a permis d'en savoir plus sur les

threads.

Cette application de tri de photo permet à ses utilisateurs de choisir un dossier

dans lequel des photos sont rangées en vrac, pour les déplacer dans un répertoire

destination, suivi d'une arborescence se formant sur la date de prise de vue de la photo.

En java tout comme dans beaucoup d'autres langages, il est possible de récupérer cette

information par le biais des métadatas associées à un fichier JPEG. L'utilisation de ces

métadatas en Java est une chose difficile. Il est nécessaire d'intégrer des librairies

externes, pour extraire certaines de ces métadonnées, toutefois, les résultats sont

assez hasardeux. J'ai finalement choisi d'utiliser une méthode simple, qui permet de

récupérer la date de modification d'un fichier. Les photos à triées seront exclusivement

tirées d'une carte SD. Les photos n'auront pas été modifiées. Les dates de création, de

Page 49: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

49

modification et de prises de vues sont les mêmes dans ce cas. J'ai finalement choisi de

baser mon algorithme de tri sur les dates de modification.

Le développement ce cette application java m'a appris à chercher par moi-même

des solutions, et de vérifier si elles étaient valides ou non. J'ai du utiliser des

alternatives, qui dans mon cas se sont révélées pratiques.

d. Le script sous Google Script

Ce script dédié à la génération d'un compte rendu au format HTML n'a pas été

facile à implémenter. Il a déjà fallu prendre en main les API de Google de Drive.

Durant quelques jours, j'ai été amené à m'immerger dans les pages Google

dédiées à la description en anglais de différentes classes qui ont été implémentées par

les développeurs de Google (par exemple SpreadsheetApp, Spreadsheet, Range,

utilities, DocList et la liste est exhaustive).

Egalement ma première approche était mauvaise, puisque je devais récupérer une

feuille de calcul sur Google drive pour la transformer en PDF. Je me suis donc confronté

à toute la difficulté d'utiliser un produit qui n'est pas le mien (en occurrence Drive

SDK), et d'essayer de produire un script en utilisant toutes les fonctions disponibles sur

ce produit. C'est alors que j'ai réussi avec succès à partir d'un script PHP stocké sur

mon PC, l'envoi d'un fichier sur mon compte Google Drive, ainsi que la récupération d'un

fichier depuis mon compte Google Drive.

2) Bilan

Maintenant que j'ai effectué un balayage de toutes les difficultés que j'ai

rencontrées durant l'élaboration de tous mes projets, il est tant de dresser un bilan

concernant cette expérience de 3 mois au sein du Cercle Mixte de Besançon.

a. Les apports liés au développement

Mon stage a été orienté dès le début développement. J'ai réalisé de multiples

projets en PHP, Java et JavaScript. Ces projets m'ont permis de manipuler des notions

que j'avais à peine effleurées en cours. Par exemple, dans le projet Java de création

d'un utilitaire de tri de photos, j'ai pu utiliser des threads pour l'intégration d'une

barre de progression à mon programme. Je n'étais pas obligé d'en rajouter une, je me

suis forcé à le faire pour me permettre de manipuler les threads, mais également pour

produire un petit utilitaire complet, et facile d'utilisation pour tous.

Les projets d'élaboration de site Web et d'application de gestion d'un hôtel

m'ont permis d'utiliser mes connaissances en PHP, SQL et CSS, langages que j'avais

déjà eu l'occasion de manipuler lors de modules de 2ième année. Au delà d'une révision,

les projets réalisés m'ont permis de découvrir certaines fonctionnalités que je n'avais

Page 50: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

50

jamais rencontrées (l'envoi de mail depuis un script PHP, découvrir certains attributs

CSS pour la mise en forme en n'utilisant pas Photoshop...). Ces projets m'ont apporté

bien plus qu'une simple révision puisque j'ai été obligé de bousculer mes connaissances,

et d'apprendre encore plus. J'ai notamment rencontré les limites de certaines

fonctionnalités PHP comme la gestion des sessions, où j'ai pu comprendre son

fonctionnement en cherchant les erreurs. J'ai pu également réviser le langage SQL, en

écrivant des requêtes complexes (pourvues de quelques jointures externes, internes

imbriquées).

J'ai été amené par certains besoins de mes responsables, mais également par le

souci de mettre en place des produits esthétiques et pratiques, à m'initier à un langage

pour lequel je n'avais jamais eu le privilège d'utiliser : le JavaScript. J'ai utilisé ce

langage pour réaliser des pages Web dynamiques (avec l'intégration d'un diaporama sur

le site Web), ou encore pour le projet de génération d'un compte rendu au format

HTML à partir d'une feuille de calcul Google Drive, en utilisant l'API existante sous

JavaScript, qui consistait à développer mon propre script en utilisant ce qui était déjà

en place chez Google. Mes débuts sous JavaScript se sont donc dessinés lors de ce

stage.

Au delà de l'apprentissage des langages de programmation, il a fallu que je

m'adapte. Je me suis retrouvé tout seul. Je n'ai été guidé par personne pour savoir

comment développer tel ou tel projet. Mes responsables me donnaient les consignes, le

cahier des charges, et je me lançais dans la bataille. Ce mode de fonctionnement m'a

permis de me confronter à tous les problèmes qu'apporte l'élaboration de tels projets.

Il a fallu faire la jointure entre ce que mes responsables demandent et ce que je peux

réaliser techniquement parlant. J'ai dû tout d'abord étudié dans les moindre détails les

structures de données à utiliser (structurer au maximum les bases de données, dans un

souci d'optimisation et surtout pour que celle-ci soit évolutive), mais également les

interfaces que j'allais créer notamment pour les projets sous PHP et CSS. Cela m'a

amené à me remettre en question constamment, pour savoir quelle est la meilleure

solution à choisir. Lorsque l'on est en plein développements, on est toujours en phase de

test. Pour ma part, j'ai réalisé une multitude de tests (notamment pour les deux

applications PHP et CSS), pour lesquelles je me suis efforcé de corrigé tous les bugs que

j'observais, mais également à sécuriser au maximum les données. J'ai pu voir que la

réalisation de tels projets inclut un certain niveau de sécurité. J'ai eu l'occasion de

devenir totalement paranoïaque, en filtrant chaque saisie réalisée par un utilisateur,

pour garantir une fiabilité dans les données traitées, mais également pour rejeter les

attaques possibles par des utilisateurs malhonnêtes.

Page 51: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

51

Les projets PHP m'ont donné l'occasion d'utiliser des produits que je n'avais pas

développé moi même. J'ai eu l'occasion d'utiliser des librairies PHP (Tc_calendar et

HTML2PDF) qui m'ont bien rendu services. J'ai appris à les utiliser, mais bien au delà,

cela m'a permis de m'adapter au travail des autres, le comprendre pour mieux l'utiliser.

Le projet JavaScript avec Google Drive m'a impressionné, puisque j'ai été amené à

comprendre les API Google en Anglais, pour comprendre et les utiliser par la suite dans

les différents scripts que j'ai produit en JavaScript.

Ce stage aura le mérite de me pousser à me remettre en question sans cesse.

Cette qualité professionnelle, est de nos jours obligatoire. J'ai été amené à modifier

quelques fois mes applications, par le retour d'utilisation par mes responsables et le

personnel du Cercle Mixte. Il ne m'est jamais arrivé d'oublier que les applications

produites seraient utilisées tous les jours, mais également par des personnes qui ne

savent pas forcément bien à l'aise en informatique. Je me suis donc sans cesse obligé à

structurer mes produits, pour les rendre faciles d'utilisation.

b. Les apports en réseaux

J'ai pris part en partie à la restructuration du réseau du cercle mixte. Cette

mission m'a permis de changer de casquette, et de ne plus réaliser exclusivement du

travail lié aux développements.

J'ai pu réaliser différentes tâches avec mon collègue stagiaire, tel que la mise en

place de paires RJ45 dans les plafonds. Cela m'a amené à utiliser des outils que je

n'avais jamais utilisé, tel qu'un testeur de réseau. J'ai donc appris à utiliser un appareil,

qui est aujourd'hui utilisé dans n'importe quelle entreprise pour tester leur réseau.

Egalement, j'ai pris part à l'élaboration d'un plan réseau, concernant le

déplacement des caméras de surveillance sur un réseau non utilisé. Cela m'a permis de

revoir certaines notions que j'avais pu voir en TP de réseau.

Toute la partie réseau de stage a été enrichissante pour moi. J'ai pu poser pleins

de questions à mon collègue stagiaire et mes responsables, pour connaître le

fonctionnement du réseau informatique et téléphonique du Cercle Mixte, qui sont

semblable à beaucoup d'entreprises en France.

c. Plan humain

J'ai pu travailler en collaboration avec un deuxième stagiaire, qui lui était

spécialisé en réseau. La confrontation de mon savoir faire avec le sein nous a permis de

nous entraider dans la réalisation de nos projets respectifs. J'ai été également en

étroite collaboration avec les autres services du Cercle Mixte (Secrétariat,

Direction...), pour qu'ils expriment leurs besoins, par rapport à tel ou tel autre projet...

Page 52: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

52

J'ai donc du en conséquence remettre mon travail en question, et réagir aux différentes

demandes, pour mettre à jour au plus rapidement les projets.

J'ai appris à être à l'écoute de chaque requête de mes collègues, et répondre à

toutes leurs demandes. Il m'a été d'autant plus facile de travailler dans un cadre

dynamique mais également dans un établissement où la bonne humeur règne.

d. Stage en rapport avec mon projet professionnel

Ce stage se profile parfaitement dans la suite d'études que je souhaite

effectuer. Lors de ma formation en Licence, j'ai été amené à découvrir les langages du

Web. J'ai été alors totalement captivé par tout ce qui en découle (design,

programmation, base de donnée...). Je souhaite après ma licence intégrer une formation

dans laquelle je puisse m'investir dans le Web, mais pas seulement. Je souhaite toucher

à tous ce qui touche au domaine du Web, en passant par les produits multimédia. J'ai eu

l'occasion durant ce stage de promouvoir mes capacités à développer des applications,

tout en m'intéressant de plus près à la beauté du produit, son esthétique et son

organisation. J'ai réalisé les designs du site Web et de l'application de gestion de

l'hôtel avec difficulté, car je n'avais pas appris auparavant comment concevoir un

design. D'où l'intérêt pour moi d'intégrer dès l'année prochaine une nouvelle formation

destinée à élaboration de produits beaux pour l'œil qui sera en complément avec ma

licence orientée développement.

Page 53: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

53

Conclusion

Ce stage de fin d'étude de 12 semaines abouti, il est temps de tirer les

conclusions d'une telle expérience professionnelle.

Le Cercle Mixte de Besançon m'a offert la possibilité de m'impliquer dans des

projets intéressants et enrichissants. J'ai eu l'occasion de concevoir plusieurs

applications qui sont aujourd'hui toutes utilisées. Mes responsables m'ont confié

plusieurs missions diversifiées :

- l'élaboration du Site Web du Cercle Mixte, présentant à ses membres les

informations utiles,

- la confection une application Web dédié à la gestion du planning des

chambres d'hôtel,

- la création d'un petit utilitaire en Java réservé au tri de photos par date

de modification,

- la production d'un script sous Google Drive, produisant un mini compte

rendu à partir des données sélectionnées d'une feuille de calcul.

Il a été primordial pour moi de faire aboutir tous mes projets, pour qu'ils soient

utilisables, et surtout pour qu'un suivi soit réalisé par moi-même, pour modifier quelques

fonctionnalités en fonction des demandes des utilisateurs. Ces projets m'ont permis

d'approfondir mes connaissances dans certains langages de programmation tels que le

Java, le PHP ou le SQL, et de côtoyer un nouveau langage que je n'avais pas encore eu

l'occasion d'utiliser : le JavaScript. Egalement, j'ai pu acquérir des connaissances en

réseau, par le biais d'une mission de restructuration du réseau en association avec mon

collègue stagiaire. J'ai pu utiliser des appareils dédiés aux diagnostiques de réseaux, et

étendre mes connaissances en réseaux, en m'intéressant au fonctionnement et à la

structure du réseau du Cercle Mixte.

Au delà des connaissances, ces différents projets m'ont encouragé à structurer

mes raisonnements. Pour ne pas laisser mes pensées partir dans tous les sens, j'ai du

adopter une certaine organisation qui m'a permis de produire aujourd'hui des produits

fonctionnels. J'ai du m'investir dans des analyses approfondies du cahier des charges

pour chaque mission avant d'enchaîner avec les développements. Après chaque

développements, j'ai soumis mon produit à une panoplie de test, pour vérifier que celui-

ci ne laissait apparaître aucune faille (injection SQL, ou modification des variables d'une

URL...). J'ai pu vérifier également que les produits affichent bel et bien les résultats

attendus dans toutes les situations.

Page 54: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

54

Durant ce stage, j'ai pu découvrir les joies de la programmation, tout en

m'investissant dans le design pour certains projets. Les projets touchant aux langages

SQL, PHP et CSS sont pour moi des projets qui prennent part à ma décision concernant

ma suite d'études. Je me suis aperçu que je n'étais pas un expert en conception de

design pour un site Web. Je me rends à l'évidence que pour poursuivre dans le domaine

du Web, je suis obligé de me perfectionner. J'ai jusqu'à présent suivi une formation

orientée sur les développements, et je souhaiterai la compléter avec une formation qui

s'axe plus volontiers sur le design, mais également sur les produits multimédias. Je

pense qu'une telle formation serait un véritable atout, car elle me rendrait polyvalent.

La polyvalence est un critère de sélection favori parmi les sociétés présentes sur le

marché.

Ce stage au sein du service informatique du Cercle Mixte de Gendarmerie de

Besançon a été une première expérience de travail dans le domaine informatique. J'ai pu

travailler dans une ambiance conviviale et chaleureuse, ainsi que dans un cadre hors du

commun. Cette première expérience positive m'a donné sur le désir de travailler dans le

Web, et me conforte dans mes décisions pour mon projet professionnel.

Page 55: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

55

Annexes

1. Diagramme de cas d'utilisation des utilisateurs du site Web

Page 56: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

56

2. Contenu des pages du Site Web pour le restaurant

Page 57: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

57

Page 58: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

58

3. Contenu des pages du Site Web pour l'hôtel

Page 59: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

59

4. Plan d'accès du Cercle Mixte

Page 60: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

60

5. Pages dédiées à la gestion des utilisateurs du site Web

Page 61: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

61

6. Pages dédiées à la gestion des qualités des utilisateurs

Page 62: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

62

Page 63: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

63

7. Pages de gestion des pièces

Page 64: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

64

Page 65: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

65

8. Gestion du message d'accueil du site Web

Page 66: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

66

9. Intégration d'une Newsletter

Page 67: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

67

10. Diagramme de cas d'utilisation pour l'application de gestion de

l'hôtel

Page 68: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

68

11. Application l’hôtel : le planning

Page 69: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

69

12. Application hôtel : gestion appareils / conforts / lits

Page 70: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

70

Page 71: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

71

13. Application hôtel : modification des chambres

Page 72: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

72

14. Application hôtel : gestion des clients

Page 73: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

73

15. Représentation du Réseau du Cercle Mixte

BD1B BD2A BD2B

BD

3BB

D4

A B

D4

BB

D7

A B

D7

B

PC Lenovo Gendarmerie

Fax HP Office Jet(Prise RJ11) Imprimante

HP Office Jet

Téléphone IP HP Elite Pro

BD10A BD10B BD9A BD9B BD8A BD8BB

D6

AB

D6

B

EeeBoxTel AlcatelIntranet

EeeBox

BD1A

BD

3A

Borne Wifi Hôtel

Net DD

ServeurNAS

BD5BBD5A

Plan de câblage Bureau Direction

CU3BCU3ACU2BCU2ACU1BCU1A

Borne Sonde

Poste Cuisine

Tel Intranet

Schéma câblage Cuisine

Schéma câblage Chef de Corps

CC1A CC1B

Caméra IP Apexis

Caméra IP Foscam

Page 74: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

74

Page 75: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

75

16. Baie de brassage du Cercle Mixte

SERVEUR

RESEAU(réseau informatique

gendarmerie)

TELEPHONIE(réseau téléphonie cercle

mixte)

RESEAU(réseau informatique

cercle mixte)

BAIE(baie de brassage des

prises Ethernet)

Page 76: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

76

17. Déroulement du stage

Page 77: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

77

Bibliographie

Cercles et Mess. (2012, 10 30). Retrieved 05 01, 2013, from Ministère de la

Défense: http://www.defense.gouv.fr/familles/cercles-et-mess

CHR OFFICE. (n.d.). Retrieved 05 05, 2013, from CHR-OFFICE.com:

http://www.chr-office.com/

Ciprian. (2013, 05 23). PHP Calendar Date Picker. Retrieved 02 05, 2013, from

Triconsole: http://www.triconsole.com/php/calendar_datepicker.php

Créer le formulaire. (2013, 01 7). Retrieved 03 29, 2013, from Site du Zéro:

http://www.siteduzero.com/informatique/tutoriels/upload-de-fichiers-par-

formulaire/creer-le-formulaire

MINGUET, L. (2011). HTML2PDF - Conversion HTML => PDF - fr. Retrieved 02

06, 2013, from HTML2PDF - Convertisseur PHP de code HTMLvers PDF:

http://html2pdf.fr/

Upload de fichiers - PHP Facile! (n.d.). Retrieved 03 29, 2013, from PHP Facile!:

http://www.phpfacile.com/creer_un_site_web_en_php/upload_de_fichier_1.php5

Wicht, B. (2007, 12 3). Création interface graphique avec Swing : les bases.

Retrieved 01 15, 2013, from Developpez.com, le club des décideurs et professionnels en

Informatique: http://baptiste-wicht.developpez.com/tutoriels/java/swing/debutant/

Page 78: Développement d'un site web et d'une application de gestion d'un

Rapport de Stage

BUCHER Samuel Cercle Mixte de Gendarmerie de Besançon

78

Résumé

Ce rapport présente un résumé de l'expérience que j'ai pu vivre durant mon stage

de fin de 3ième année de licence informatique. J'ai réalisé ce stage au sein du Cercle

Mixte de la gendarmerie de Besançon, dans le service informatique, dans lequel j'ai

occupé le poste de développeur. Ce stage de 12 semaines m'a permis d'acquérir une

première expérience dans le monde du travail en tant que développeur. J'ai pu réaliser

plusieurs misions diversifiées. J'ai développé une application Web avec PHP et MySQL,

permettant la gestion des chambres d'un hôtel, de manière simple et guidée. J'ai conçu

également un site Web design sur mesure, en partant de zéro, pour diffuser à ses

membres des informations utiles liées aux différentes activités du Cercle Mixte. Le

contenu pourra être modifié à souhait, comme un site Web dynamique. J'ai également

pris part à une mission de restructuration du réseau, utile pour alléger les trafics d'un

réseau en constante expansion. Le développement d'un petit utilitaire Java de tri s'est

imposé pour hiérarchiser le stockage de photos. Pour finir un script JavaScript sous

Google Drive permet l'export de données issues de Spreadsheet au format HMTL. Ce

poste m'a amené à me mettre en relation avec tous les services du Cercle Mixte. J'ai

donc su être à l'écoute de tout le monde, et me montrer réactif dans l'élaboration de

mes différents projets. Ce stage a été une bonne opportunité pour revoir des principes

vus en cours (Bases de données, Programmation orientée objet...), mais également de les

approfondir (Java, PHP, SQL, CSS...), tout comme en découvrir (Les threads en Java, le

JavaScript...), et d'utiliser des librairies PHP existantes (HTML2PDF, Tc_calendar...).

Mots-clefs : Java, JavaScript, HTML2PDF, Tc_calendar, SQL, PHP, Google Drive.

Summary

This report is a summary of my experience during the internship I accomplished

in the end of my degree in Computer Sciences. I did this work placement at the

Gendarmerie Mess of Besancon in IT Service as a developer for 12 weeks. Thanks to

this work experience, I got a first Idea of the professional world as a developer. I

carried out many different missions. Using PHP and MySQL, I conceived an IT

application which allows to manage hotel rooms in a simple and guided way. I created an

attractive Website, in order to distribute information related to many of the company

activities. I took part of a mission of network restructuration which aimed at alleviation

of the traffic of an expanding network. I also conceived a utility with java to order

photo storage. Finally, I created a script in Google Drive which enable to export

selected data of spreadsheet in format HTML. This post brought me in contact with

every department of the company. Thereby, I had to be attuned to everyone’s needs

and I had to be reactive in the elaboration of my projects. It was a good opportunity to

review what I had learned during classes, and to increase my knowledge. I was also able

to use PHP libraries such as HTML2PDF or Tc_calendar.