Vo Nhu-Hoai Robert PDF

Travail de diplôme
Mémoire
FraniTime : Conception et
réalisation d’un logiciel de gestion
du temps associé à un système de
timbrage
Établissement Haute École d’Ingénierie et de Gestion du Canton de Vaud

Filière/orientation Informatique/systèmes de gestion
Auteur Nhu-Hoai Robert VO
Conseiller Patrick LACHAIZE
Mandant Franic Technologies SA
Période de réalisation Du 4 juillet au 23 septembre 2016
Département Formation en Emploi
Travail de Bachelor
Préambule
Ce travail de Bachelor est réalisé en vue de l'obtention du titre de Bachelor of
Sciences en Ingénierie.
Son contenu, sans préjuger de sa valeur, n'engage ni la responsabilité de

l'auteur, ni celles du jury du travail de Bachelor et de l'Ecole.
Aucune utilisation, même partielle, de ce travail ne peut être faite sans

l'autorisation écrite préalable de la Direction. Toutefois, l'entreprise ou
l'organisation qui a confié un sujet de travail de Bachelor peut utiliser les
résultats du travail pour ses propres besoins.
La cheffe du
Département de la formation
En Emploi
L. Larghi
Yverdon-les-Bains, novembre 2015
_______________________________________________________________________________
HEIG-VD, av. Sport 20, 1401 Yverdon-les-Bains
Tél. 024/557 76 09 / 07 Fax : 024/557 76 01
Travail de diplôme FraniTime Mémoire
__________________________________________________________________________________
3. Table des matières

1. Préambule .................................................................................................................... 2
2. Résumé du travail ......................................................................................................... 3
3. Table des matières ....................................................................................................... 4
4. Glossaire ...................................................................................................................... 6
5. Introduction .................................................................................................................. 8
5.1. Contexte ................................................................................................................ 8
5.2. Situation actuelle .................................................................................................... 8
5.3. Situation souhaitée ................................................................................................. 8
5.4. Lien avec un autre travail de diplôme ..................................................................... 8
6. Objectifs ....................................................................................................................... 9
6.1. Objectifs principaux ............................................................................................... 9
6.2. Objectifs secondaires ............................................................................................. 9
6.3. Contraintes............................................................................................................. 9
6.4. Risques..................................................................................................................10
7. Cahier des charges .....................................................................................................11
7.1. Description du logiciel ..........................................................................................11
7.2. Rôles .....................................................................................................................11
7.3. Fonctionnalités ......................................................................................................11
7.4. Procédures de travail et processus ........................................................................13
8. Contraintes et solutions ...............................................................................................15
8.1. Interface de timbrage ............................................................................................15
8.2. Échange des données avec GestiCom...................................................................16
8.3. Gestion des employés à temps partiel ...................................................................16
9. Environnement de travail ............................................................................................17
9.1. Choix technologique .............................................................................................17
9.2. Serveur et application serveur ..............................................................................17
9.3. Application client ..................................................................................................18
9.4. Environnement de développement .......................................................................18
9.5. Rédaction du mémoire ..........................................................................................18
10. Planification ...............................................................................................................19
10.1. Segmentation du travail et description ................................................................19
10.2. Graphique de Gantt .............................................................................................21
__________________________________________________________________________________
Page 4 sur 53
Nhu-Hoai Robert VO 23.09.2016
__________________________________________________________________________________
10.3. Planning par semaine ..........................................................................................23

11. Réflexions et recherches............................................................................................24
11.1. Tests unitaires .....................................................................................................24
11.2. Gestion des utilisateurs .......................................................................................24
12. Développement de FraniTime ...................................................................................25
12.1. Style de codage ...................................................................................................25
12.2. Arborescence du projet.......................................................................................26
12.3. Utilisation de l’URL rewriting ...............................................................................27
12.4. ORM « maison » ...................................................................................................29
12.5. Classes-métier ....................................................................................................30
12.6. Gestion du calendrier ..........................................................................................32
12.7. Calcul horaire......................................................................................................33
12.8. Tableau de bord ..................................................................................................37
12.9. Statistiques ..........................................................................................................38
12.10. Responsive design .............................................................................................39
12.11. Media Queries ...................................................................................................39
12.12. Gestion des formulaires .....................................................................................41
12.13. Service REST......................................................................................................43
12.14. Déploiement et démonstration...........................................................................46
13. Continuité du projet ...................................................................................................47
13.1. Feedback sur le logiciel ......................................................................................47
13.2. Améliorations ......................................................................................................47
14. Conclusion.................................................................................................................48
Cahier des charges ......................................................................................................48
Calcul horaire et tests ..................................................................................................48
15. Remerciements ..........................................................................................................49
16. Authentification..........................................................................................................50
17. Bibliographie .............................................................................................................51
17.1. Webographie ......................................................................................................51
18. Annexes.....................................................................................................................53
18.1. Simulation de timbrage .......................................................................................53
__________________________________________________________________________________
Page 5 sur 53
__________________________________________________________________________________
4. Glossaire
 AJAX (Asynchronous JAvascript and Xml) : technologie permettant de rendre
une page web dynamique sans devoir recharger cette dernière.
 Canonique : « La mise en forme canonique est le procédé par lequel on convertit
des données qui ont plusieurs représentations possibles vers un format standard. »,
définition sur https://fr.wikipedia.org/wiki/Canonique_(informatique)
 Crontab (chrono tab) : table de planification des tâches automatisées sous le
système d’exploitation Linux.
 CRUD (Create, Read, Update and Delete) : en français : « créer, lire, mettre à jour
et supprimer ». Désigne les quatre opérations de base dans une base de données.
 DMZ (DeMilitarized Zone) : traduite « Zone démilitarisée » est un sous-réseau du
réseau local. Tout appareil se situant dans cette zone est accessible depuis internet
à la différence des appareils dans le réseau local.
 Dump : est une copie brute de données. Cela peut-être une copie à l’octet prêt d’un
disque dur. Dans le cadre d’une base de données, c’est la copie contenant la totalité
des informations (structures et données).
 GIT : logiciel de gestion de version permettant aux développeurs d’avoir un suivi
sur la progression du code source.
 Google Drive : service web permettant de stocker en ligne des documents et de
les partager avec ses contacts.
 Hachage : « Fonction permettant de calculer une empreinte unique à partir des
données fournies. », définition sur http://www.culture-informatique.net/cest-quoi-
hachage. À la différence d’un cryptage où l’élément crypté peut être décrypté et
visible, le hachage ne va que dans un sens. Il n’est pas possible de retrouver les
données initiales suite à un hachage.
 IDE (Integrated Development Environment) : ensemble d’outils de
développement pour aider à la réalisation d’un projet de programmation.
 Image disque : c’est une copie conforme du contenu d’un disque dur mais sous la
forme numérique. Contient les données mais aussi le système d’exploitation.
 JSON : « JSON est un format de données textuelles, générique, dérivé de la notation
des objets du langage ECMAScript. Il permet de représenter de l’information
structurée. », définition sur http://fr.wikipedia.org/wiki/JSON.
 Media Queries : est un module de CSS (version 3) permettant d’ajouter des règles
selon le support détecté (dimension de l’écran, type d’écran, impression sur
feuille).
 NFC (Near Field Communication) : technologie sans fil à courte portée (entre
1cm à 10cm en moyenne)
 ORM (Object-Relational Mapping) : technique de programmation permettant de
simplifier l’accès et la mise à jour des données entre une classe (programmation
orientée objet) et une base de données.
 QR Code : code barre à deux dimensions pouvant stocker une information sous la
forme d’un lien web, d’une carte de visite virtuelle, d’une configuration wifi, d’un
simple texte, etc.
__________________________________________________________________________________
Page 6 sur 53
__________________________________________________________________________________
 RegEx (Regular Expression) : expression rationnelle (ou expression régulière si

traduite littéralement de l’anglais) qui décrit un ensemble de chaînes de caractères.
 Responsive Design : conception d’un site web ayant une structure dynamique des
pages web afin que celles-ci s’adaptent selon le type de support (accès par un
ordinateur, un smartphone ou une tablette).
 REST (REpresentational State Transfer) : service web destiné à la communication
entre machines.
 RFID (Radio Frequency Identification) : technologie permettant d’identifier un
objet via une fréquence radio sur une distance raisonnable entre 10cm et 1.5m en
moyenne selon le type de puce (peut monter jusqu’à 50m).
 Salage : « est une méthode permettant de renforcer la sécurité des informations qui
sont destinées à être hachées », définition sur
https://fr.wikipedia.org/wiki/Salage_(cryptographie)
 SSH (Secure SHell) : protocole sécurisé de communication. Il est possible
d’envoyer des commandes ou d’échanger des fichiers.
 Token code : en français, jeton d’authentification. Généralement représenté par
une chaîne de caractères unique pour identifier un utilisateur. Ce jeton est généré
aléatoirement.
 UML (Unified Modeling Language) : « est un langage de modélisation graphique
à base de pictogrammes conçu pour fournir une méthode normalisée pour
visualiser la conception d'un système. », définition sur
https://fr.wikipedia.org/wiki/UML_(informatique)
 URL (Uniform Resource Locator) : chaîne de caractères représentant un chemin
d’accès à une ressource. Principalement utilisée pour désigner l’adresse d’accès
d’une page web.
 URL Rewriting : technique permettant de réécrire une adresse d’une page web.
Elle permet de rendre plus lisible une adresse web.
 VNC (Virtual Networking Computing) : système permettant de voir et d’interagir
avec un bureau à distance.
__________________________________________________________________________________
Page 7 sur 53
__________________________________________________________________________________
5. Introduction
5.1. Contexte
Franic Technologies SA – mentionné Franic par la suite – est une entreprise spécialisée
dans les domaines de la mécanique, de l’électronique et de l’informatique. Située à Renens
et depuis plus de 20 ans, Franic a su répondre à ses clients au travers de plus de 600 projets
réalisés.
Franic a construit des appareils de contrôle des billets de banque, des panneaux
signalétiques, des télécommandes radio, wifi ou Bluetooth. Il a développé un système de
comptage de parking et de contrôle d’accès, une application de verbalisation des places
de parc.
Depuis un peu plus d’une année, Franic a vu son nombre d’employés ainsi que la quantité
de travail augmenter. Franic souhaite quantifier le temps consacré pour chaque projet mais
aussi contrôler l’horaire de travail de chaque employé.
5.2. Situation actuelle

Actuellement, tous les employés remplissent un tableau en ligne sur Google Drive. Chacun
rempli à sa manière et partage le document avec l’employeur.
Pour la gestion des projets, Franic utilise une application interne développée il y a plus de
10 ans. Au niveau de la gestion du temps et des ressources humaines d’un projet, le
programme permet de récupérer la liste des personnes affectées, une date de début ainsi
qu’une date de fin.
5.3. Situation souhaitée

Franic souhaite mettre en place un système de timbrage capable de calculer le temps de
travail de chacun mais aussi de calculer le temps dédié à chaque projet.
Ce système permettra d’uniformiser les données et de les centraliser sur un serveur

appartenant à Franic.
5.4. Lien avec un autre travail de diplôme

Franic souhaite développer une application pour la gestion des projets qui remplacera
l’actuelle. Ce projet nommé GestiCom est géré par Benoît Grendele.
FraniTime et GestiCom auront des parties communes. Le développement s’effectuera de

manière conjointe avec Benoît Grendele.
__________________________________________________________________________________
Page 8 sur 53
__________________________________________________________________________________
6. Objectifs
6.1. Objectifs principaux
Le projet a subi des modifications depuis la pré-étude. Malgré le titre du travail, il n’y aura
plus d’interface de timbrage. Cette décision sera expliquée plus tard.
 Mise en place d’un serveur pour FraniTime et GestiCom

 Gestion du personnel
 Récupération des données en provenance de GestiCom
 Gestion d’un calendrier (gestion des absences)
 Système de timbrage
 Calcul des horaires
 Tableau de bord
 Statistiques
6.2. Objectifs secondaires

Ces points sont considérés comme facultatifs.
 Gestion des demandes de congé

 Accès à distance
 Service REST
6.3. Contraintes
 Liste des projets et des tâches : la gestion des projets ainsi que des tâches est
gérée dans GestiCom. Il a été nécessaire de me coordonner à Benoît Grendele afin
que l’on puisse connaître les besoins de chacun et définir une structure des
données communes. À savoir que ce que je nomme une tâche est l’équivalent d’une
fabrication dans le projet GestiCom.
 Gestion du personnel : À l’inverse des projets et des tâches, la gestion du
personnel s’effectue dans FraniTime. Je dois communiquer les informations
nécessaires à GestiCom. Lors du développement, il y a eu une modification sur le
fonctionnement de cette gestion.
 Technologie : Franic ne souhaite pas déployer un système complexe ou
demandant beaucoup d’entretien.
__________________________________________________________________________________
Page 9 sur 53
__________________________________________________________________________________
6.4. Risques
 Projet interne, gestion des priorités : les projets développés en interne
comportent un certain nombre de risques. L’un des plus fréquents est le
changement de priorité. Cela survient généralement à la suite d’une augmentation
de la charge de travail au sein de l’entreprise.
 Projet interne, modification des objectifs : à la différence d’un contrat ou d’un
mandat avec un client, le cadre d’un projet interne est mal défini et les objectifs
peuvent changer à la dernière minute (il n’y a pas besoin de faire d’avenant).
 Gestion des employés à temps partiel : au niveau administratif, la gestion d’un
employé à temps partiel est complexe. Le mandant devra avoir une vision claire sur
ce qu’il souhaite afin de déterminer avec précision les routines de contrôle pour un
employé à temps partiel dans FraniTime.
 ORM « maison » : l’utilisation d’un outil développé en interne rend difficile la
reprise du projet par un intervenant externe. L’outil peut aussi comporter des failles
ou devenir obsolète.
__________________________________________________________________________________
Page 10 sur 53
__________________________________________________________________________________
7. Cahier des charges

7.1. Description du logiciel
FraniTime est un logiciel de timbrage. Il doit être en mesure de calculer le temps de travail
journalier de tous les employés mais aussi d’indiquer le temps consacré aux différents
projets.
FraniTime comporte un système calendaire afin que l’employeur puisse indiquer les jours
fériés, les congés ainsi que les vacances des employés.
FraniTime est capable de détecter des anomalies tel un timbrage manquant ou une activité
anormale. Il n’y a pas de correction automatique : c’est l’employeur qui décide de l’action
à entreprendre.
L’employeur doit confirmer l’horaire de travail de tous les employés pour chaque journée
de travail.
FraniTime récupère la liste des projets et tâches à partir de GestiCom. À l’inverse,
FraniTime doit fournir les informations sur les employés à GestiCom.
FraniTime doit être accessible depuis n’importe quel poste de travail ou support mobile
connecté sur le réseau de l’entreprise. Un système d’identification personnelle est
nécessaire.
7.2. Rôles
Dans le cadre de ce projet, il existe deux rôles :
 Employeur (administrateur) : gestion complète à FraniTime.
 Employé (utilisateur) : timbrage personnel et accès aux statistiques personnelles.
L’employeur hérite automatiquement de tous les droits d’un employé.
7.3. Fonctionnalités
Timbrage
 En tant qu’employé, je peux timbrer le début ou la fin d’une tâche.
 En tant qu’employé, je peux voir mes timbrages du jour.
 En tant qu’employeur, je peux voir tous les timbrages du jour et de tous les
utilisateurs.
 En tant qu’employeur, je peux ajouter, modifier ou supprimer un timbrage.
 En tant qu’employeur, je peux ajouter un ajustement horaire pour un employé.
 En tant qu’employeur, je peux demander au logiciel de recalculer un horaire pour
un employé (suite à une correction).
 En tant qu’employeur, je peux valider un horaire journalier.
__________________________________________________________________________________
Page 11 sur 53
__________________________________________________________________________________
Gestion du personnel
 En tant qu’employé, je peux accéder à mes propres données.
 En tant qu’employé, je peux modifier mon numéro de téléphone, mon numéro de
portable, mon adresse email ou mon mot de passe.
 En tant qu’employeur, je peux modifier toutes les informations concernant un
employé.
 En tant qu’employeur, je peux réinitialiser le mot de passe d’un utilisateur.
 En tant qu’employeur, je peux ajouter ou supprimer un employé.
Gestion des anomalies

 En tant qu’employeur, je peux accéder à la liste des anomalies.
 En tant qu’employeur, je peux gérer les anomalies.
Gestion du calendrier
 En tant qu’employé, je peux voir les jours spéciaux me concernant ou affectant tous
les employés.
 En tant qu’employeur, je peux voir tous les jours spéciaux.
 En tant qu’employeur, je peux ajouter, modifier ou supprimer un jour spécial.
 En tant qu’employeur, je peux ajouter, modifier ou supprimer un type de jour
spécial (vacances, jours fériés, congés non payés, armée, etc.).
Statistiques
 En tant qu’employé, je peux accéder à mes statistiques hebdomadaires et
mensuelles.
 En tant qu’employeur, je peux accéder à toutes les statistiques hebdomadaires et
mensuelles.
__________________________________________________________________________________
Page 12 sur 53
__________________________________________________________________________________
7.4. Procédures de travail et processus

Fonctionnement du timbrage par tâche
Fonctionnement du timbrage sur une journée
1. L’utilisateur arrive et timbre en sélectionnant une tâche.

2. Le chrono s’enclenche
3. L’utilisateur timbre :
a. Avec une nouvelle tâche. Le chrono continue à fonctionner. Passe au point 2.
b. Avec la tâche en cours. Passe au point 4.
4. Le chrono s’arrête
a. Si timbrage, alors on passe au point 2.
5. En fin de journée, le logiciel effectue le calcul horaire.
__________________________________________________________________________________
Page 13 sur 53
__________________________________________________________________________________
Quittance des horaires par l’employeur
Quittance quotidienne des horaires
Tous les jours, l’employeur doit quittancer l’horaire de tous les employés (avec ou sans
anomalies).
__________________________________________________________________________________
Page 14 sur 53
__________________________________________________________________________________
8. Contraintes et solutions
8.1. Interface de timbrage
Contraintes
Dans un premier temps, il faut déterminer le moyen d’effectuer un timbrage et après
choisir une interface capable de saisir les timbrages. Il existe diverses technologies
comme le RFID, le NFC, le code-barres ou le QR Code. Chaque timbrage doit être lié à un
utilisateur mais aussi à une tâche. Chacune de ces technologies a des avantages mais aussi
des inconvénients.
L’utilisation d’une puce sans fil est très pratique si l’on souhaite attribuer uniquement un
utilisateur par badge. Le fait d’ajouter l’identification d’une tâche devient plus complexe :
procédé à double timbrage – un pour l’utilisateur et un autre pour la tâche – ou procédé
avec une puce unique par tâche et par utilisateur, mais l’on augmenterait la quantité de
puces nécessaire. Il faut aussi mettre en place un système d’attribution des puces.
L’utilisation d’un code-barres est plus pratique car il n’a pas le besoin d’être attribué : le
code-barres est généré selon l’identification.
Solution
Suite à plusieurs discussions avec Franic, nous sommes arrivés à la conclusion que
l’identification des tâches peut s’avérer compliquée tant pour les employés que pour le
responsable devant s’occuper de l’attribution du personnel aux différentes tâches.
Sachant que chaque employé a accès à un poste de travail ou à un support mobile connecté
au réseau de l’entreprise, Franic a décidé d’abolir l’interface de timbrage et d’utiliser une
plateforme web. Chaque utilisateur s’identifie, sélectionne une tâche et timbre.
__________________________________________________________________________________
Page 15 sur 53
__________________________________________________________________________________
8.2. Échange des données avec GestiCom

Contraintes
Le but est d’établir un moyen de communication entre GestiCom et FraniTime afin que les
deux applications puissent fonctionner.
FraniTime a besoin de la liste des projets ainsi que des tâches (nommées fabrications dans
GestiCom).
GestiCom a besoin de la liste des utilisateurs ainsi que le décompte horaire pour chaque
tâche.
Solution
Suite aux décisions sur la technologie utilisée pour GestiCom et FraniTime, tous deux
utilisent du PHP avec une base de données MySQL. De cette situation, avec Benoît
Grendele, nous avons décidé d’utiliser une base de données commune et d’utiliser les
données des tables concernées directement.
Pour la suite, dans le cas où un programme externe devrait accéder aux données de
FraniTime comme GestiCom, nous avons décidé de mettre en place un service REST.
8.3. Gestion des employés à temps partiel

Contraintes
La problématique avec le personnel à temps partiel est la planification des jours de travail
pour autant que cette dernière soit régulière. Afin que le programme puisse détecter
correctement les anomalies, Franic doit se déterminer de manière rigoureuse et précise
sur ses besoins.
Solution
Sur une volonté de bien faire, j’ai accordé trop d’importance sur ce point. Avec l’accord
de Franic, il n’est plus question de gérer la planification de ses employés. FraniTime est
un logiciel permettant de saisir des timbrages et de calculer l’horaire de travail. Un
système d’alerte simple sera mis en place telles les absences ou la détection d’un grand
nombre d’heures supplémentaires.
__________________________________________________________________________________
Page 16 sur 53
__________________________________________________________________________________
9. Environnement de travail
9.1. Choix technologique
Dépendant au souhait de Franic d’utiliser un serveur avec peu de maintenance et pas trop
complexe à mettre en place, je me suis dirigé sur un langage de programmation libre.
Ayant développé un ORM à l’école sous Java, j’ai souhaité reproduire la même chose sous
PHP et en faire un outil de développement rapide pour mes projets personnels.
Dans le cadre de ce projet, j’ai naturellement opté pour le PHP en utilisant cet ORM afin de
tester son efficacité sur un projet concret et de plus grande envergure.
Le logiciel pouvant être accessible depuis un support mobile, j’ai utilisé Bootstrap afin de
rendre le site responsive design.
Risques
Le choix d’utiliser un ORM « maison » n’est pas sans risque. Premièrement, peu de
personnes maîtrisent l’outil (actuellement, limité à moi-même). Il y a un risque
d’obsolescence même si actuellement, je l’utilise sous PHP 5 et PHP 7. Deuxièmement, en
termes de sécurité, j’ai appliqué différentes protections mais n’étant pas un expert
sécurité, l’outil pourrait contenir des failles malgré l’usage simple.
Malgré ces risques, l’intérêt de cet outil est la compréhension du fonctionnement d’un ORM
ainsi que son application dans un cas concret.
9.2. Serveur et application serveur

Utilisant le PHP, je pars sur un serveur Apache avec l’utilisation d’une base de données
MySQL. Travaillant régulièrement avec des Raspberry Pi avec Franic, j’ai opté pour un
mini-serveur Raspberry sous Linux.
Les capacités de cette machine ne sont pas exceptionnelles mais sont largement suffisantes
pour l’utilisation de FraniTime et de GestiCom.
L’utilisation d’un Raspberry Pi est aussi due à plusieurs points avantageux :
 Machine facilement remplaçable

 Création et restauration rapide d’une image disque du serveur
 Maintenance facile
 Petite taille et faible consommation
Serveur Raspberry Pi 3 Model B

Système d’exploitation Raspbian Jessie
Serveur web Apache 2
Environnement de développement PHP 5.6
Base de données MySQL 5.5
Accès à distance SSH
Configuration du serveur
Les logiciels FraniTime et GestiCom seront hébergés sur ce serveur.
__________________________________________________________________________________
Page 17 sur 53
__________________________________________________________________________________
9.3. Application client

Un navigateur récent suffit pour accéder à l’application. Il n’y a pas d’installation
particulière hormis la mise à jour des navigateurs.
Lors du développement, le logiciel a été testé depuis un ordinateur avec les navigateurs
suivants : Firefox, Google Chrome et Edge. Pour la partie mobile, cela a été testé depuis
un Sony Xperia M4 Aqua et un iPhone 4S ou simulé sur Firefox ou Google Chrome.
9.4. Environnement de développement

Pour la programmation, j’utilise en local Notepad++, mais dans le cadre de tests en ligne
sur le serveur, j’utilise un IDE en ligne : Codiad. Cela me permet de mettre à jour le code
source sans me soucier d’une connexion FTP et de mettre à jour les fichiers.
Afin de faciliter la création de la documentation, je développe selon une structure qui est
définie par le programme Doxygen. Ce dernier permet de générer la documentation d’un
projet de développement.
Pour ce qui est de la gestion de version, j’utilise GIT et synchronise les données sur un
serveur Gitlab mis en place par Franic.
Au niveau de la gestion du projet, j’utilise un graphique de Gantt pour ce qui est du

planning. J’ai utilisé le programme en ligne Gantter for Google Drive du site
www.smartapp.com. L’impression d’un graphique de Gannt n’est pas de tout repos. J’ai
généré un fichier PFD depuis le Gantter et j’ai utilisé Photoshop afin de le séparer en deux
pages pour le mémoire.
En parallèle, j’utilise la gestion des tâches et des points de contrôle du serveur de Gitlab
afin de visualiser ce qui doit être fait et dans quel délai.
9.5. Rédaction du mémoire

J’avais commencé la rédaction sur Google Doc afin de pouvoir y accéder en tout temps et
depuis n’importe quel endroit. Cependant, j’ai vite été limité dans la mise en place et j’ai
finalement utilisé Office Word 2016. J’ai tout de même utilisé Google Doc pour l’écriture
uniquement afin de pouvoir avancer.
J’ai utilisé le programme Dia pour réaliser mes schémas et PDFTK Builder pour créer le
fichier PDF du mémoire pour l’impression chez un professionnel (il est difficile d’intégrer
des fichiers PDF dans un document Word).
__________________________________________________________________________________
Page 18 sur 53
__________________________________________________________________________________
10. Planification
10.1. Segmentation du travail et description
La segmentation diffère légèrement de la pré-étude.
1. Mise en place du serveur

a. Installation du système d’exploitation
b. Installation des outils de prise en main à distance
c. Installation des paquets nécessaires pour l’utilisation de FraniTime et
GestiCom
d. Configuration du serveur et du routeur de chez Franic pour un accès depuis
l’extérieur
2. Développement de la gestion des utilisateurs
a. Création des classes et des tables dans la base de données
b. Création des vues
c. Tests
3. Échange des données avec GestiCom
a. Définition des besoins pour un projet
b. Définition des besoins pour une tâche
c. Définition des besoins pour un utilisateur
d. Création des classes et des tables dans la base de données
e. Tests
4. Développement de la gestion du timbrage
b. Création des vues
c. Tests
5. Développement de la gestion des horaires
b. Définition des routines de contrôle
c. Tests
6. Développement de la gestion du calendrier
b. Mise à jour de la gestion du calcul des horaires
c. Tests
7. Développement des statistiques
a. Création des vues
8. Tests finaux et dernières corrections
9. Fin de la rédaction du mémoire et clôture du projet
__________________________________________________________________________________
Page 19 sur 53
__________________________________________________________________________________
Mise en place du serveur

Pendant la validation de la pré-étude, j’ai profité de mettre en place le serveur Linux avec
les outils nécessaires pour le bon fonctionnement de FraniTime et GestiCom. Franic ayant
besoin d’un accès sur le serveur depuis l’extérieur pour un autre projet, j’ai configuré le
routeur chez Franic afin de placer le serveur dans la DMZ du routeur. Il est donc possible
d’accéder aux applications depuis l’extérieur du réseau de Franic.
Il est possible d’accéder à distance à ce serveur par SSH ou par VNC.
Développement de la gestion des utilisateurs

Une gestion simple des utilisateurs permet à tous les employés de se connecter au
système. Il a fallu mettre en place un système de contrôle d’accès afin de déterminer
l’employeur.
Lié à GestiCom, je me suis coordonné avec Benoît Grendele afin de connaître ses besoins.
Échange des données avec GestiCom

Cette partie est développée conjointement avec Benoît Grendele afin de garantir la
meilleure compatibilité entre son programme et le mien.
FraniTime a besoin de la liste des projets ainsi que des tâches. Quant à GestiCom, ce
dernier a besoin de la liste des utilisateurs et le temps consacré pour chaque tâche.
Développement de la gestion du timbrage
Lorsqu’un employé timbre, FraniTime a besoin de connaître deux éléments : qui a timbré
et pour quelle tâche. Le programme attribue la date et l’heure du système.
Développement de la gestion des horaires

Chaque jour, à 03h00, le serveur exécute une routine de contrôle via le crontab du serveur.
C’est le cœur du programme.
Cette routine permet de calculer l’horaire de travail de tous les employés la veille mais
aussi de calculer le temps dédié pour chaque tâche.
La difficulté réside en les différents contrôles à effectuer et comment détecter les

anomalies.
Développement de la gestion du calendrier

Durant l’année, il y a des jours fériés, des congés maladie, des vacances, etc. Ces éléments
peuvent être planifiés et faire en sorte que FraniTime puisse l’intégrer à l’analyse des
anomalies : les employés ne sont pas censés travailler un jour férié ou pendant leurs
vacances.
Développement des statistiques

Il est utile de pouvoir récolter l’information, mais il est plus important de pouvoir l’utiliser.
Le but est de pouvoir afficher diverses statistiques afin d’avoir un aperçu global sur la
situation de chaque employé.
__________________________________________________________________________________
Page 20 sur 53
______________________________________________________________________________________________________________________________
10.2. Graphique de Gantt
Graphique de Gannt du 27 juillet 2016 au 7 août 2016
______________________________________________________________________________________________________________________________
Page 21 sur 53
______________________________________________________________________________________________________________________________
Graphique de Gannt du 08 août 2016 au 25 septembre 2016
______________________________________________________________________________________________________________________________
Page 22 sur 53
__________________________________________________________________________________
10.3. Planning par semaine
Sem. Du Au Date Évènement

- 27.06.2016 03.07.2016 Mise en place du serveur Raspberry Pi
1 04.07.2016 10.07.2016 Analyse des besoins entre GestiCom et
FraniTime.
Développement gestion utilisateurs
Développement gestion des vues
2 11.07.2016 17.07.2016 Développement gestion utilisateurs
3 18.07.2016 24.07.2016 Vacances
4 25.07.2016 31.07.2016 Développement gestion timbrages
5 01.08.2016 07.08.2016 Développement gestion timbrages
6 08.08.2016 14.08.2016 Modification gestion utilisateurs
Analyse de la gestion du calendrier
12.08.2016 RDV avec le conseiller
7 15.08.2016 21.08.2016 Développement calculs horaires
8 22.08.2016 28.08.2016 Développement gestion calendrier
Développement calculs horaires
9 29.08.2016 04.09.2016 Développement gestion calendrier
Développement calculs horaires
10 05.09.2016 11.09.2016 Développement calculs horaires
11 12.09.2016 18.09.2016 Développement statistiques
16.09.2016 Remise de l’affichette sur le GAPS
12 19.09.2016 25.09.2016 Tests et déploiement
23.09.2016 Remise du rapport
__________________________________________________________________________________
Page 23 sur 53
__________________________________________________________________________________
11. Réflexions et recherches

11.1. Tests unitaires
Les tests unitaires sont parfois simplistes mais sont puissants. Cela permet de tester
l’intégrité du code source durant le développement mais aussi lors de mises à jour.
Certains tests sont plus complexes et requièrent un schéma pour la simulation. Le test le
plus fastidieux mais efficace que j’ai dû effectuer est la simulation de plusieurs timbrages
suivie des calculs horaires ainsi que de la détection d’anomalies.
Simulation de timbrages et contrôle des valeurs. Pour chaque test, la ligne 1 est l’heure du
timbrage, la ligne 2 la tâche affectée, la ligne 3 si le chrono est actif ou pas (la fiche
complète des tests se trouve en annexe)
11.2. Gestion des utilisateurs

Suite à un certain nombre de développement en utilisant l’ORM, par plusieurs fois j’ai dû
développer un module utilisateurs. J’ai profité de ce projet pour intégrer dans l’ORM deux
classes abstraites. Une pour la gestion des utilisateurs et l’autre pour la gestion des
groupes.
Lors d’une réunion avec Benoît Grendele, il m’a demandé la possibilité d’utiliser un
module Symfony pour la gestion des utilisateurs : FOS Users.
Suite à quelques analyses sur le fonctionnement de ce module, j’ai accepté la demande de
Benoît Grendele. Au niveau de l’interface utilisateur, il n’y a pas de différence. Sont
impliqués les classes utilisateurs et groupes ainsi que les tables dans la base de données.
Voici la liste des modifications effectuées :
 Suppression de la classe Group qui n’a plus d’utilité. La gestion d’accès s’effectue
par une requête SQL sur le champ « roles ».
 Ajout de plusieurs champs pour la classe Utilisateur.
 Modification du hachage du mot de passe utilisateur
__________________________________________________________________________________
Page 24 sur 53
__________________________________________________________________________________
Le hachage du mot de passe nécessite un champ « salt » pour le salage du mot de passe.
Voici la procédure pour saler le mot de passe dans FOS User.
Basé sur FOS Users, voici le code permettant de hacher un mot de passe
FOS User donne une certaine liberté pour le nom d’utilisateur ainsi que l’adresse email. En
contrepartie, le module ajoute deux champs dit canoniques afin que le nom d’utilisateur et
l’adresse email soient dans un format standardisé. Pour cela, lorsqu’un employé modifie
son adresse email, je dois effectuer une double mise à jour : une pour le champ « libre » et
l’autre pour le champ « canonique ».
12. Développement de FraniTime

12.1. Style de codage
Dans un effort pour la meilleure compréhension du code, j’ai essayé de mettre le plus de
commentaires possibles en français. J’utilise un format particulier pour annoncer les
constantes, variables globales et méthodes afin que le programme Doxygen puisse
générer la documentation du projet. J’utilise principalement le BSD KNF comme style
d’indentation. Les noms de variables et des méthodes sont en anglais y compris pour la
gestion de la base de données.
Commentaire au format Doxygen et déclaration d’une méthode avec le style BSD KNF
__________________________________________________________________________________
Page 25 sur 53
__________________________________________________________________________________
12.2. Arborescence du projet
Contenu du répertoire du projet
Le dossier « core » contient l’ORM « maison », dans ma gestion de version GIT, ce dossier
est un sous-module GIT pointant sur le projet original de l’ORM.
Le dossier « docs » contient la documentation HTML générée par Doxygen.
Le dossier « sql » contient la structure de la base de données. Chaque classe a son fichier
SQL. Il y a aussi deux autres fichiers : « database.sql » qui permet de créer une base de
données et un utilisateur pour le projet et « structure.sql » qui permet de créer toute la
structure de la base de données en une fois.
Le dossier « src » contient le code source du projet. Les fichiers sont placés selon une
convention.
Type de fichier Nom du fichier Répertoire par défaut
Classe x.class.php /src/system/classes/
Interface x.interface.php /src/system/classes/
Modèle de vue x.template.php /src/pages/
Vue x.page.php /src/pages/
Test x.test.php /tests/
Règles de nommages des fichiers selon le type
Le dossier « tests » contient les tests effectués ainsi que les résultats.
Lors du déploiement, seul le contenu du dossier « src » sera placé à la racine du serveur
web. Les dossiers « core » et « /src/system » devraient être placés dans un répertoire non
accessible au public. Le cas échéant, il faudrait placer un fichier .htaccess afin d’interdire
l’accès à ces derniers.
__________________________________________________________________________________
Page 26 sur 53
__________________________________________________________________________________
12.3. Utilisation de l’URL rewriting

L’URL rewriting est une technique permettant de réécrire une URL afin que le serveur
puisse accéder à la page demandée. Cette technique permet de rendre les URL des sites
web plus lisibles pour les humains.
Par exemple, un billet d’un blog traitant de FraniTime pourrait avoir cette URL
http://www.monblog.com/billet.php?article=125 (c’est le 125e billet de ce blog). Avec
l’URL rewriting, nous pouvons indiquer l’URL suivante : http://www.monblog.com/Billet-
125-FraniTime-gestion-de-timbreuse.
Ces règles sont définies par l’administrateur du serveur et sous la forme d’un RegEx. Dans
mon projet, voici ce que j’ai défini. Il est possible d’accéder à ces règles depuis le fichier
/src/.htaccess dans mon projet.
Accès à une ressource externe (feuilles de styles, script JavaScript, images)

Code RegEx /^\+(.*)$/
Appel assets/$1
Règles 1. Commence par le caractère ‘+’ (plus)
2. Suivi par n’importe quel caractère
URL modifiée http://www.nhuvo.ch/+style.css
URL réelle http://www.nhuvo.ch/assets/style.css
Accès à une vue sans paramètre

Code RegEx /^([A-Z]{1}[A-Za-z0-9]*)$/
Appel index.php?page=$1
Règles 1. Commence par une lettre majuscule
2. Peut être suivi par une chaîne contenant des
lettres et des chiffres
URL modifiée http://www.nhuvo.ch/Utilisateurs
URL réelle http://www.nhuvo.ch/index.php?page=Utilisateurs
Accès à une vue avec un paramètre

Code RegEx /^([A-Z]{1}[A-Za-z0-9]*)-([A-Za-z0-9]+)$/
Appel index.php?page=$1&a=$2
Règles 1. Commence par une lettre majuscule
2. Peut être suivi par une lettre ou un chiffre
3. Suivi du caractère ‘-‘ (tiret)
4. Une chaîne contenant des lettres et des chiffres
URL modifiée http://www.nhuvo.ch/Secteur-16
URL réelle http://www.nhuvo.ch/index.php?page=Secteur&a=16
Remarque : il est possible d’utiliser plusieurs paramètres en les séparant par un tiret ‘-‘.
Exemple : http://www.nhuvo.ch/Timbrage-von-23 qui équivaut à
www.nhuvo.ch/index.php?page=Timbrage&a=von&b=23
__________________________________________________________________________________
Page 27 sur 53
__________________________________________________________________________________
Requêtes CRONJOB
Code RegEx /^~([A-Z]{1}[A-Za-z0-9]*)$/
Appel cron.php?job=$1
Règles 1. Commence par le caractère ‘~’ (tilde)
2. Suivi d’une lettre majuscule
URL modifiée http://www.nhuvo.ch/~ControleJournalier
URL réelle http://www.nhuvo.ch/cron.php?job=ControleJournalier
Service REST
Code RegEx /^!([A-Z]{1}[A-Za-z0-9]*)$/
Appel rest.php?command=$1
Règles 1. Commence par le caractère ‘!’ (exclamation)
2. Suivi d’une lettre majuscule
URL modifiée http://www.nhuvo.ch/!Utilisateur
URL réelle http://www.nhuvo.ch/rest.php?command=Utilisateur
Remarque : Seule la commande est envoyée par méthode GET. Les données
complémentaires sont envoyées par méthode POST.
__________________________________________________________________________________
Page 28 sur 53
__________________________________________________________________________________
12.4. ORM « maison »

L’ORM « maison » est composé d’une gestion de la base de données permettant d’exécuter
des commandes SQL. Mais le plus important, est la classe générique permettant de
simplifier la création d’objets. Il contient aussi deux classes abstract pour la gestion des
utilisateurs et des classes prêtes à l’emploi.
Interface de l’objet générique
Voici la liste des fichiers de cet ORM.
core.php Noyau de l’ORM, charge le système et contrôle que tout va bien

db.class.php Classe abstraite pour la connexion à une base de données
ffgroup.class.php Classe abstraite pour la gestion de groupes (prêt à l’emploi)
ffuser.class.php Classe abstraite pour la gestion d’utilisateurs (prêt à l’emploi)
html.class.php Classe permettant de gérer un modèle de vue et de générer le code
HTML d’une page
mysql.class.php Permet de faire du CRUD avec une base de données de type MySQL
o.class.php Classe objet générique
__________________________________________________________________________________
Page 29 sur 53
__________________________________________________________________________________
12.5. Classes-métier
Le développement s’effectue avec du PHP. Je fais de la programmation orientée objet et
utilise des classes. Le nom des classes, variables, méthodes sont en anglais mais les
commentaires sont en français. Voici la liste de toutes les classes-métier utilisées durant le
projet.
 User (Utilisateur) : identifie un employé ou employeur et comporte les données du

profil. Cette classe permet l’identification d’un utilisateur mais aussi de gérer le
contrôle des accès.
 Project (projet) : est utilisé dans le but de récupérer la liste de tous les projets dans
GestiCom.
 Task (tâche) : est utilisée dans le but de récupérer la liste de toutes les tâches dans
GestiCom.
 DayOffType (type de jour spécial) : permet de définir un type de congé et s’il est
pris en charge par l’employeur ou pas.
 DayOff (jour spécial) : permet de déterminer les jours spéciaux comme les
vacances, les jours fériés, les absences maladie ou encore les services militaires.
Ces jours spéciaux peuvent être appliqués à un utilisateur ou à tous.
 Entry (timbrage) : représente un timbrage défini par un utilisateur, une tâche, une
date et une heure. Cette classe peut calculer l’horaire de travail des employés ainsi
que le temps consacré pour chaque projet.
 DailyUser (calcul horaire journalier pour un utilisateur) : résultat du calcul horaire
pour un utilisateur selon les timbrages effectués du jour. Cette classe indique aussi
la différence entre le temps de travail effectué et le temps dû. Un système d’alerte
permet aussi de détecter les anomalies.
 DailyTask (calcul horaire journalier pour une tâche) : résultat du calcul horaire
pour une tâche selon les timbrages effectués du jour.
Particularités
Ce qui s’apparente à une tâche pour FraniTime équivaut à une fabrication dans GestiCom.
__________________________________________________________________________________
Page 30 sur 53
__________________________________________________________________________________
Diagramme des classes
Diagramme des classes
__________________________________________________________________________________
Page 31 sur 53
__________________________________________________________________________________
12.6. Gestion du calendrier

Avant de pouvoir calculer les horaires journaliers, je dois prendre en compte les jours
spéciaux : congés, vacances, jours fériés. Les jours spéciaux sont des jours où un employé
ou tous les employés sont absents.
Pour cela, j’ai mis en place un système permettant à l’employeur de créer une liste de
types de jours spéciaux afin de définir si ceux-ci sont pris en charge par l’employeur.
Dès que la liste des types est créée, l’employeur peut placer des jours spéciaux. Ces jours
peuvent être définis pour une journée ou période. Ils peuvent être appliqués à un seul
employé ou tous à la fois.
Les employés peuvent accéder à une vue calendaire hebdomadaire, mensuelle ou

annuelle. La vue sur l’année ne comporte qu’une liste des jours spéciaux.
Vue du calendrier hebdomadaire
Vue sur le calendrier mensuel
Vue sur la liste des jours spéciaux de l’année

__________________________________________________________________________________
Page 32 sur 53
__________________________________________________________________________________
12.7. Calcul horaire

Chaque jour, à 03h00, le serveur exécute une routine de contrôle pour faire le calcul
horaire de tous les timbrages de la veille. J’ai utilisé la table de planification crontab de
Linux.
Commande crontab dans le fichier /etc/crontab du serveur
L’employeur peut demander au logiciel d’effectuer un calcul horaire pour un employé et

une date définis. Cela est utile lorsque l’employeur a dû faire des modifications dans le
timbrage de l’employé.
Pour cette partie, j’ai segmenté le travail en deux phases :
1. Lecture des timbrages et calcul horaire et détection de timbrages manquants
2. Détection des anomalies
Lecture des timbrages, calcul horaire et détection de timbrages manquants

Dans un premier temps, je me concentre uniquement sur les durées de travail. Pour cela,
je récupère tous les timbrages d’un utilisateur selon une date définie.
Le logiciel lit tous les timbrages et calcule la durée de travail de l’utilisateur. Du fait que
chaque timbrage est lié à une tâche, j’en profite pour faire une liste des tâches ainsi que la
durée de chacune.
Pour chaque timbrage analysé, je dois définir si l’employé débute une tâche, termine une
tâche ou change de tâche. J’emploie un indicateur pour savoir s’il est au travail ou pas.
__________________________________________________________________________________
Page 33 sur 53
__________________________________________________________________________________
Processus le calcul horaire
En suivant le processus décrit ci-dessus, FraniTime est capable de calculer tous les
horaires journaliers pour un employé ainsi que calculer le temps de travail pour chaque
tâche.
Pour ce processus, on entre un tableau de timbrage et il en sort le calcul horaire de

l’employé, une liste de calcul horaire pour chaque tâche et indique si l’employé travaille
actuellement ou pas.
Entrée et sortie pour le processus de calcul horaire journalier pour un employé
__________________________________________________________________________________
Page 34 sur 53
__________________________________________________________________________________
Suivant ce même schéma, il m’est possible d’avoir un aperçu de l’état actuel pour chaque
utilisateur. Cela m’a permis d’ajouter un résumé de la journée sur la page de timbrage afin
que chacun puisse suivre l’évolution de son travail.
Aperçu des timbrages du jour avec l’indication de la durée de travail validée. La colonne
« État » indique si l’employé est en train de travailler. La barre avec le pourcentage indique
le taux de travail effectué pour une journée (8h30)
Suite au calcul temporaire pour l’aperçu, FraniTime récupère aussi l’état de l’employé : s’il
travaille actuellement. De cela, le logiciel peut proposer à l’employé d’arrêter sa tâche en
cours afin d’éviter qu’il doive aller chercher dans la sélection par défaut.
Saisie d’un timbrage par un employé. Il sélectionne un projet et une fabrication (tâche). Si
l’employé travaille, il peut cliquer sur le bouton « Arrêter » pour terminer la tâche actuelle
Actuellement, il existe deux méthodes très semblables. L’une pour effectuer le calcul
horaire ainsi que la détection des anomalies et l’autre ne contenant que les données du
calcul horaire temporairement. Une optimisation du code source est nécessaire à ce point.
__________________________________________________________________________________
Page 35 sur 53
__________________________________________________________________________________
Détection des anomalies

Après le calcul des horaires, le logiciel doit être en mesure de détecter les anomalies sans
faire de la planification.
Le premier contrôle est de savoir si l’utilisateur est encore au travail. Théoriquement, il

devrait avoir fini sa journée avant minuit la veille. Si lors d’un calcul le programme détecte
qu’un employé travaille, le calcul horaire journalier de cet employé affichera une alerte
indiquant qu’un timbrage est manquant.
Le cas échéant, il faut définir si l’utilisateur a travaillé ou pas la veille.
 Dans le cas où il n’aurait pas travaillé, le programme contrôle dans un premier

temps si c’est le weekend, un jour férié ou un congé programmé. Dans ce cas c’est
en ordre. Sinon, on contrôle si l’employé travaille à 100%, si c’est le cas, alors
FraniTime indique une absence, à l’inverse, le programme considère que la
situation est régulière en supposant que c’est peut-être planifié.
 Si l’employé a travaillé, on contrôle que ce n’est pas le weekend, un jour férié ou
un congé prévu. Dans ce cas, FraniTime avertit l’employeur d’une activité non
programmée.
Processus pour la détection d’anomalies
__________________________________________________________________________________
Page 36 sur 53
__________________________________________________________________________________
12.8. Tableau de bord

Le tableau de bord permet à l’employeur de voir la liste des alertes, des quittances à
effectuer et de gérer ces éléments. Il pourra aussi avoir un aperçu sur la situation de tous
les employés.
Tableau de bord pour l’employeur
C’est ici que l’employeur pourra voir la liste des anomalies. Ces dernières doivent être
traitées au cas par cas.
Il peut ajouter ou supprimer des timbrages afin de corriger les anomalies. Il peut aussi
mettre un commentaire à un calcul journalier afin d’avoir des détails sur une anomalie.
Un bouton « Quittance automatique » permet de valider tous les calculs à quittancer en un

clic.
L’employeur a un aperçu de tous les employés avec la situation actuelle par rapport à leurs
horaires de travail.
__________________________________________________________________________________
Page 37 sur 53
__________________________________________________________________________________
12.9. Statistiques
Chaque employé peut accéder à ses propres statistiques. Il existe deux types de
statistiques : hebdomadaires et mensuelles.
Il est possible de voir sous la forme d’un graphique la situation actuelle par rapport à ses
heures ainsi que la liste des calculs journaliers.
L’employeur aura la possibilité de sélectionner un employé afin de voir les statistiques de
ce dernier.
Vue des statistiques hebdomadaires depuis un portable avec la sélection de l’employé

(uniquement accessible par l’employeur)
Chaque vue des statistiques a été optimisée pour l’impression sur papier. La méthode
utilisée est expliquée ci-après (Media Queries).
Pour générer le graphique, j’ai utilisé la librairie Chart.js basée sur du jQuery.
__________________________________________________________________________________
Page 38 sur 53
__________________________________________________________________________________
12.10. Responsive design

Afin que le logiciel puisse être lu depuis n’importe quel support, j’ai utilisé Bootstrap afin
de faire du responsive design. Cette technique permet à une page web de changer sa
structure selon le support afin d’optimiser la lecture du contenu.
Afin de tester en continu le développement, j’utilise les outils intégrés dans les
navigateurs : outils de développement. De cette manière, je peux simuler la vue depuis un
portable et voir le résultat en direct. Je peux aussi me connecter en réseau local depuis un
vrai portable.
Vue depuis un ordinateur Vue depuis un portable
Vue de la page de timbrage depuis un ordinateur et un portable
L’avantage d’utiliser une librairie comme Bootstrap combinée à la librairie jQuery me

permet d’employer des outils facilitant la mise en place des pages web.
12.11. Media Queries

En utilisant le Media Queries de CSS3, il m’est possible de modifier le design d’une page
web. Bootstrap l’utilise afin de détecter la dimension de l’écran et déterminer quel
affichage adopter.
Dans mon projet, j’ai utilisé cette technologie pour l’impression des statistiques. Je cache
les informations inutiles comme la barre de navigation, le titre de la page et le pied de
page. Il ne reste ainsi que l’essentiel : le graphique de la situation actuelle ainsi que la liste
des calculs journaliers.
__________________________________________________________________________________
Page 39 sur 53
__________________________________________________________________________________
Voici un exemple d’utilisation :
Exemple d’un code CSS avec l’utilisation du Media Queries
À gauche, vue d’une statique hebdomadaire depuis un ordinateur et à droite un aperçu

avant impression
__________________________________________________________________________________
Page 40 sur 53
__________________________________________________________________________________
12.12. Gestion des formulaires

La création d’éléments et la modifications d’une information s’effectuent au travers d’un
formulaire. L’utilisateur remplit les champs et clique sur le bouton d’envoi.
J’ai développé un script JavaScript qui traite les formulaires. Cette technique est aussi
appliquée pour le chargement dynamique des données dans une page web. Par exemple,
lors d’un timbrage, l’employé doit choisir un projet puis une tâche. À chaque fois que le
projet change, la page fait appel à un formulaire invisible afin de charger la liste des tâches
du projet sélectionné.
Chaque fois que l’évènement « submit » d’un formulaire est appelé, j’utilise le jQuery pour
bloquer l’envoi du formulaire pour préparer une requête AJAX. Dans chaque formulaire,
j’ai placé un champ caché nommé « ax » qui équivaut à une commande pour que le serveur
sache quoi faire avec les données reçues.
Gestion des données dynamiques par AJAX
__________________________________________________________________________________
Page 41 sur 53
__________________________________________________________________________________
1. À la demande d’envoi d’un formulaire, le client web bloque l’envoi des données.
2. Le client web récupère les informations du formulaire appelé et les prépare pour
une requête AJAX.
3. Le client web exécute la requête AJAX qui envoie les données sur le serveur sans
changer la page web. Un script désactive tous les champs du formulaire le temps
d’exécuter la requête.
a. En cas de connexion impossible au serveur, les champs sont libérés et la
page indique un problème avec le serveur.
4. Le serveur reçoit les données et contrôle si la commande existe.
a. Si la commande n’existe pas, le serveur renvoie une erreur. Le client web
libère les champs du formulaire et indique une erreur.
5. Le serveur traite la commande et retourne le résultat (des données ou simplement
une indication de réussite).
6. Le client web reçoit la réponse et la traite.
Pour le traitement des requêtes AJAX du côté serveur, j’ai décidé que chaque vue pouvant
faire appel à une requête AJAX puisse gérer la requête elle-même. Au niveau du code
source, la vue comporte les lignes suivantes afin de séparer une requête AJAX d’une
demande d’accès à la page web.
Détection d’une requête AJAX dans PHP
Un autre moyen de traiter les requêtes AJAX est d’utiliser l’URL rewriting. La requête aura
une adresse particulière par exemple http://www.nhuvo.ch/@MaRequeteAJAX avec le
caractère ‘@’ pour indiquer que c’est une requête AJAX.
On centralise ainsi toutes les demandes dans un seul et unique fichier.
__________________________________________________________________________________
Page 42 sur 53
__________________________________________________________________________________
12.13. Service REST

Le service REST a été réfléchi très tôt durant le projet. Avant le cahier des charges définitif,
je ne savais pas encore comment échanger les données avec GestiCom ou comment un
timbrage allait être effectué.
Les données entre GestiCom et FraniTime étant sur une même base de données et le
timbrage via une plateforme web du logiciel, le service n’est plus utilisé. Il a été développé
pour des futurs besoins si nécessaire.
L’utilisation du service passe par l’URL principale du site. Admettons l’accès à l’application
FraniTime par l’adresse suivante : http://www.nhuvo.ch/, pour accéder au service, il faut
écrire l’URL suivante : http://www.nhuvo.ch/!MaCommande.
Actuellement, l’utilisation est simpliste mais elle permet de récupérer des données ou d’en
envoyer.
Les commandes s’écrivent directement dans l’URL et les données à envoyer doivent l’être
par la méthode POST.
Voici la liste des commandes actives :
Nom de la commande Utilisateurs

Données POST à envoyer Aucune
Résultat Liste des utilisateurs au format JSON
Exemple
Nom de la commande Projects

Données POST à envoyer Aucune
Résultat Liste des projets au format JSON
Exemple
__________________________________________________________________________________
Page 43 sur 53
__________________________________________________________________________________
Nom de la commande Timbrage

Données POST à envoyer  user : id utilisateur
 task : id tâche
Résultat 0 si échec
1 si réussi
Exemple
Nom de la commande Decompte

Données POST à envoyer  user : id utilisateur
Résultat Retourne les heures dues ou supplémentaires en minute. Si
l’utilisateur n’existe pas, le résultat sera 0.
Exemple
La gestion des commandes REST s’effectue dans le fichier /src/rest.php. Il est possible
d’ajouter d’autres commandes plus tard. Les tests ne nécessitant pas l’envoi de données
peuvent être directement testée dans le navigateur. Pour les autres cas, des fichiers tests
avec un formulaire sont placés dans le répertoire /tests/ et ont un nom commençant par
« rest ».
Plus tard, si le besoin existe, il est possible d’ajouter un système d’authentification afin de
sécuriser l’accès aux données. Voici un petit processus d’identification :
1. Connexion au service REST avec la commande Login en envoyant un nom

d’utilisateur et un mot de passe
2. Si la connexion est réussie, le service REST retourne un token code unique
3. Envoi des commandes souhaitées avec le token code en paramètre
Le token code a un délai d’expiration et peut être renouvelé à chaque commande.
__________________________________________________________________________________
Page 44 sur 53
__________________________________________________________________________________
Processus d’une requête par le service REST
__________________________________________________________________________________
Page 45 sur 53
__________________________________________________________________________________
12.14. Déploiement et démonstration

Je me suis occupé du déploiement de GestiCom et de FraniTime sur le serveur de Franic.
En préparant la base de données, j’ai constaté que lors de la dernière phase de
développement des deux logiciels, Benoît Grendele comme moi-même avons effectué de
légères modifications dans certaines tables rendant incompatibles les deux applications.
Nous avons effectué rapidement la correction (modification dans Doctrine de Symfony
pour GestiCom et modification du fichier des classes concernées pour FraniTime).
Suite à cela, nous avons rencontré un problème avec le dossier « cache » généré par
Symfony ainsi que des fichiers manquants (dossier vendors et librairie FontAwesome).
Après quelques recherches, nous avons pu tout déployer sur le serveur Franic.
Conclusion, cela fonctionne mais surtout, la gestion des utilisateurs, des projets, des tâches
ainsi que des calculs horaires des tâches est synchronisée entre les deux applications.
Les logiciels GestiCom et FraniTime sont disponibles sur un serveur web public afin que
le conseiller et l’expert puissent les tester. Ces logiciels sont disponibles jusqu’à la
défense orale.
Afin de prouver l’authenticité des projets ainsi que la version déployée pour le 23
septembre 2016, je mentionne ci-dessous les accès au serveur FTP ainsi qu’à la base de
données MySQL. Une copie des logiciels ainsi qu’un dump de la base de données MySQL
en date du 23 septembre 2016 sont déposés sur les CD remis en même temps que ce
rapport.
FraniTime GestiCom
http://www.nhuvo.ch/HEIG/FraniTime/ http://www.nhuvo.ch/HEIG/GestiCom/
Accès administrateur
Nom d’utilisateur : admin
Mot de passe : admin
Accès employé
Nom d’utilisateur : employe
Mot de passe : employe
Accès FTP
Serveur : ftp://www.nhuvo.ch
Nom d’utilisateur : fcuu_heig
Mot de passe : FranicHEIG
Accès à la base MySQL
Serveur : fcuu.myd.infomaniak.comNom de la base : fcuu_heig
Nom d’utilisateur : fcuu_heig
Mot de passe : FranicHEIG
PHPMyAdmin : https://h2-
phpmyadmin.infomaniak.ch/MySQLAdmin/?pma_servername=h2mysql2&pma_usernam
e=fcuu_heig
__________________________________________________________________________________
Page 46 sur 53
__________________________________________________________________________________
13. Continuité du projet

13.1. Feedback sur le logiciel
Dans un premier temps, il faudra laisser quelques mois d’utilisation afin d’avoir un retour
sur l’utilisation. Le premier aspect à analyser est la difficulté d’utilisation : est-ce que les
employés sont à l’aise avec un système de timbrage par tâche et non par prise et sortie de
service. Au niveau de l’employeur, est-ce que la quittance quotidienne n’est pas trop
rébarbative, est-ce que les outils mis à disposition conviennent ?
Un autre point est un contrôle du calcul horaire. Il faudra effectuer des contrôles horaires
manuellement en analysant les timbrages de plusieurs jours sélectionnés aléatoirement.
13.2. Améliorations
Vues calendaires
Le design des calendriers est probablement le travail que j’ai le moins soigné. Il est
possible d’utiliser des librairies afin de personnaliser l’affichage d’un calendrier, mais je
n’ai pas effectué de recherche dans ce domaine.
Service après-vente
Franic effectue des dépannages externes. Il serait intéressant de mettre en place un
système de pointage pour du service après-vente. Je pourrais ajouter une section
dépannage où l’employé choisi un projet ou une tâche pour débuter un dépannage. Dès
qu’il a fini son activité, il clôture son travail. Le temps est directement calculé et enregistré
dans le système. GestiCom pourrait profiter de ces informations pour avoir des données
supplémentaires.
Planification
Actuellement, l’employeur peut indiquer les vacances des employés mais il n’y a pas de
gestion de doublon ou de contrôle sur la quantité. Comme mentionné dans mon travail, ce
projet a pour but de gérer les timbrages et non de planifier l’horaire de travail des
employés (voir la problématique des employés à temps partiel). Mais pourquoi ne pas
implémenter cela dans une deuxième phase ? Gestion des vacances, planification des
jours de travail pour les employés à temps partiel, gestion des absences (quota).
Multiples supports de timbrage

J’ai mentionné diverses technologies pour timbrer. Actuellement, il est possible de timbrer
depuis le service REST. Il est possible de développer une application mobile sur Android
ou iOS avec une détection RFID/NFC ou par lecture de code-barres afin de timbrer.
L’employé s’identifie sur son mobile et timbre. Pour ce projet, j’ai décidé de choisir un
seul moyen de timbrage, mais il est tout à fait possible de le faire autrement.
Un exemple en relation avec le service après-vente. Lors d’une tâche, le technicien place
une puce NFC dans la construction. Franic installe le matériel chez le client. Trois mois
après, il y a une panne et un employé est envoyé. Dès qu’il arrive sur place, il place son
mobile près de la puce et il démarre son dépannage. Il fait de même lorsqu’il a fini de
travailler : plus besoin d’aller sur la plateforme web et chercher la fabrication.
__________________________________________________________________________________
Page 47 sur 53
__________________________________________________________________________________
14. Conclusion
Ce projet a retenu mon attention sur deux points : la définition du cahier des charges et le
calcul horaire.
Cahier des charges

Le cahier des charges a une importance cruciale dans ce travail. Le développement
dépend entièrement des processus de travail demandés par le mandant. Pour ma part, la
difficulté ne provenait pas du développement mais du fonctionnement du logiciel. Le fait
de discuter avec Franic sur les méthodes de timbrage ou de la gestion des employés à
temps partiel, m’a permis de comprendre qu’il est important de dialoguer avec le
mandant. Même si un cahier des charges semble bien défini et bien cadré, si l’on a des
questions, il ne faut pas hésiter à prendre rendez-vous avec le mandant afin de discuter
face à face de ses besoins ainsi que de notre vision du projet.
Calcul horaire et tests

Effectuer une soustraction d’un temps B à un temps A pour trouver le temps écoulé est
simple. Mais en ajoutant la condition : si la tâche A est identique à la tâche B alors il faut
faire ceci, si l’employé travaillait au timbrage suivant et que les tâches A et B sont
identiques, il faut faire cela, etc. À la fin, je me retrouve avec un calcul horaire avec une
détection des anomalies selon les jours spéciaux. Ce travail m’a demandé d’être rigoureux
sur les différentes étapes. Le gros du travail a été fait. « Il ne suffisait plus qu’à transposer
cela dans le logiciel » me disais-je. Étonnamment, je me suis mélangé plusieurs fois les
pinceaux en inversant des conditions.
C’est à ce genre de développement où les tests sont très efficaces ! Ils permettent de tester
la robustesse de son code.
Au final, après quatre ans d’études à la Haute École d’Ingénierie et de Gestion du Canton
de Vaud, ce travail a confirmé mon choix de poursuivre mon parcours professionnel dans
le domaine de l’informatique mais aussi de faire de la gestion de projet. La définition
d’objectifs clairs ainsi qu’une bonne communication avec le mandant sont cruciales pour
la réussite d’un projet. Les outils tels la gestion de version, les tests unitaires ainsi que les
schémas UML m’ont aidé à avancer tout au long du développement du logiciel.
__________________________________________________________________________________
Page 48 sur 53
__________________________________________________________________________________
15. Remerciements
Je remercie Monsieur Laurent Francey pour m’avoir accordé sa confiance pour la
réalisation de ce travail ainsi que du soutien qu’il m’a apporté tout au long de ce travail.
Je remercie Monsieur Patrick Lachaize d’avoir accepté d’être mon conseiller, de sa
disponibilité et de ses conseils.
Je remercie ma chère et tendre femme Jessica pour sa lecture et correction de mon
mémoire et pour son soutien.
__________________________________________________________________________________
Page 49 sur 53
__________________________________________________________________________________
16. Authentification
Le soussigné, Nhu-Hoai Robert Vo, atteste par la présente avoir réalisé seul ce travail et
n’avoir utilisé aucune autre source que celles expressément mentionnées, si ce n’est les
connaissances acquises durant ses études et son expérience acquise dans une activité
professionnelle.
Corsier-sur-Vevey, le 23 septembre 2016
N.-H. R. Vo
__________________________________________________________________________________
Page 50 sur 53
__________________________________________________________________________________
17. Bibliographie
 LAWSON Bruce, SHARP Remy, Introduction à HTML 5, Paris, Pearson, 2011.
 HONDERMARCK Olivier, Javascript le guide complet, Paris, Ma Editions, 2011.
17.1. Webographie
 http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Explication et exemples sur le Media Queries
 https://httpd.apache.org/docs/2.2/fr/
Documentation sur Apache
 http://davidwalsh.name/detect-ajax
Code de détection d’une requête AJAX dans PHP
 http://www.developpez.net/forums/
Site d’entraide pour développeurs
 http://fontawesome.io
Téléchargement et documentation de la librairie Font Awesome
 http://getbootstrap.com
Téléchargement et documentation de la librairie Bootstrap
 https://github.com/FriendsOfSymfony/FOSUserBundle/blob/master/Model/User.
php
Classe utilisateur dans FOS User
 http://jquery.com
Téléchargement et documentation de la librairie jQuery
 http://www.jquerybyexample.net/2012/06/show-only-month-and-year-in-jquery-
ui.html
Comment afficher uniquement le mois et l’année dans un datepicker
 http://jqueryui.com
Téléchargement et documentation de la librairie jQuery
 http://dev.mysql.com/doc
Documentation sur les commandes SQL dans MySQL
 http://www.php.net
Documentation sur le langage PHP
 https://www.smartapp.com/gantterforgoogledrive/
Outil gestion de projet pour réaliser un graphique de Gantt
 http://stackoverflow.com
Site d’entraide pour développeurs
 http://stackoverflow.com/questions/26699811/encryption-password-
fosuserbundle
Fonctionnement du hachage du mot de passe pour FOS User
 http://stackoverflow.com/questions/320357/safe-width-in-pixel-for-printing-web-
pages
Dimension idéale pour l’impression d’une page HTML
 https://www.startutorial.com/articles/view/how-to-build-a-web-calendar-in-php
Idée sur le développement d’une gestion calendaire (non utilisée)
__________________________________________________________________________________
Page 51 sur 53
__________________________________________________________________________________
 http://www.w3schools.com/js
Documentation sur le langage JavaScript
 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Utilisation du Media Query dans CSS3
 http://www.wikipedia.org
Utiliser principalement pour les définitions
__________________________________________________________________________________
Page 52 sur 53
__________________________________________________________________________________
18. Annexes
18.1. Simulation de timbrage
07:00 Total T1
Test 1 T1 00:00 00:00
ON NOK
07:00 12:00 Total T1

Test 2 T1 T1 05:00 05:00
ON OFF OK
07:00 08:00 Total T1 T2

Test 3 T1 T2 01:00 01:00 00:00
ON ON NOK
07:00 08:00 10:00 Total T1 T2

Test 4 T1 T2 T2 03:00 01:00 02:00
ON ON OFF OK
07:00 08:00 10:00 Total T1 T2

Test 5 T1 T2 T1 03:00 01:00 02:00
ON ON ON NOK
07:00 08:00 10:00 11:00 Total T1 T2

Test 6 T1 T2 T1 T1 04:00 02:00 02:00
ON ON ON OFF OK
07:00 10:00 12:00 13:00 Total T1 T2 T3

Test 7 T1 T2 T3 T2 06:00 03:00 02:00 01:00
ON ON ON ON NOK
07:00 10:00 12:00 13:00 15:00 17:00 18:00 Total T1 T2 T3

Test 8 T1 T2 T3 T2 T3 T1 T1 11:00 04:00 04:00 03:00
ON ON ON ON ON ON OFF OK
07:00 10:00 12:00 13:00 15:00 17:00 18:00 Total T1

Test 9 T1 T1 T1 T1 T1 T1 T1 06:00 06:00
ON OFF ON OFF ON OFF ON NOK
07:00 10:00 12:00 13:00 15:00 17:00 18:00 20:00 Total T1

Test 10 T1 T1 T1 T1 T1 T1 T1 T1 08:00 08:00
ON OFF ON OFF ON OFF ON OFF OK
07:00 12:00 13:00 15:00 Total T1 T2

Test 11 T1 T1 T2 T2 07:00 05:00 02:00
ON OFF ON OFF OK
Tests unitaires exécutés par le fichier /tests/entries.test.php

Les résultats sont dans le fichier /tests/entries.test.txt
__________________________________________________________________________________
Page 53 sur 53

Vo Nhu-Hoai Robert PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Vo Nhu-Hoai Robert PDF

Transféré par

Droits d'auteur :

Formats disponibles

Travail de diplôme

Établissement Haute École d’Ingénierie et de Gestion du Canton de Vaud

Son contenu, sans préjuger de sa valeur, n'engage ni la responsabilité de

Aucune utilisation, même partielle, de ce travail ne peut être faite sans

Yverdon-les-Bains, novembre 2015

3. Table des matières

10.3. Planning par semaine ..........................................................................................23

 RegEx (Regular Expression) : expression rationnelle (ou expression régulière si

5.2. Situation actuelle

5.3. Situation souhaitée

Ce système permettra d’uniformiser les données et de les centraliser sur un serveur

5.4. Lien avec un autre travail de diplôme

FraniTime et GestiCom auront des parties communes. Le développement s’effectuera de

 Mise en place d’un serveur pour FraniTime et GestiCom

6.2. Objectifs secondaires

 Gestion des demandes de congé

7. Cahier des charges

L’employeur hérite automatiquement de tous les droits d’un employé.

Gestion des anomalies

7.4. Procédures de travail et processus

Fonctionnement du timbrage sur une journée

1. L’utilisateur arrive et timbre en sélectionnant une tâche.

Quittance des horaires par l’employeur

Quittance quotidienne des horaires

8.2. Échange des données avec GestiCom

8.3. Gestion des employés à temps partiel

9.2. Serveur et application serveur

 Machine facilement remplaçable

Serveur Raspberry Pi 3 Model B

9.3. Application client

9.4. Environnement de développement

Au niveau de la gestion du projet, j’utilise un graphique de Gantt pour ce qui est du

9.5. Rédaction du mémoire

1. Mise en place du serveur

Mise en place du serveur

Développement de la gestion des utilisateurs

Échange des données avec GestiCom

Développement de la gestion des horaires

La difficulté réside en les différents contrôles à effectuer et comment détecter les

Développement de la gestion du calendrier

Développement des statistiques

10.2. Graphique de Gantt

Graphique de Gannt du 27 juillet 2016 au 7 août 2016

Graphique de Gannt du 08 août 2016 au 25 septembre 2016

10.3. Planning par semaine

Sem. Du Au Date Évènement

11. Réflexions et recherches

11.2. Gestion des utilisateurs

12. Développement de FraniTime

12.2. Arborescence du projet

Contenu du répertoire du projet

12.3. Utilisation de l’URL rewriting

Accès à une ressource externe (feuilles de styles, script JavaScript, images)

Accès à une vue sans paramètre

Accès à une vue avec un paramètre

12.4. ORM « maison »

Interface de l’objet générique

Voici la liste des fichiers de cet ORM.

core.php Noyau de l’ORM, charge le système et contrôle que tout va bien

 User (Utilisateur) : identifie un employé ou employeur et comporte les données du

Diagramme des classes

Diagramme des classes

12.6. Gestion du calendrier