Rapport Perfectionnement pour une application web de gestion de portes avec des carte RFID&Arduino

1. Page | i
Sommaire
Introduction............................................................................................................................................1
Chapitre 1 Étude de l’organisme d'accueil..............................................................................2
1.1. Présentation de l’organisme d'accueil .....................................................................................2
1.2. Organisation de l’organisme d'accueil ....................................................................................4
1.3. Étude de l’existant...................................................................................................................4
1.4. Critique de l’existant et Solutions proposées ..........................................................................5
Chapitre 2 Développement de l’application ...........................................................................7
2.1. Étude conceptuelle ..................................................................................................................7
2.1.1. Introduction......................................................................................................................7
2.1.2. Méthode et outils de modélisation...................................................................................7
2.1.3. Diagramme des cas d'utilisation.......................................................................................8
2.1.4. Diagramme de cas d’utilisation général d’administrateur ...............................................9
2.1.5. Diagramme de cas d’authentification ............................................................................10
2.1.6. Diagramme de séquence ................................................................................................11
Conclusion ...........................................................................................................................................11
2.2. Réalisation.............................................................................................................................12
2.2.1. Introduction....................................................................................................................12
2.2.2. Environnement de développement.................................................................................12
2.2.2.1. Environnement matériel.............................................................................................12
2.2.2.2. Environnement Logiciel.............................................................................................12
a) LAMP.............................................................................................................................12
b) BootStrap .......................................................................................................................13
c) Visual Studio..................................................................................................................13
d) PHP ................................................................................................................................14
e) JQuery............................................................................................................................14

2. Page | ii
2.3. Présentation de l’application .................................................................................................15
2.3.1. L’interface d’authentification ............................................................................................15
2.3.2. L’interface d’accueil d’administrateur ..............................................................................16
2.3.3. L’interface d’ajout d’utilisateurs .......................................................................................16
2.3.4. L’interface de consultation et de modification d’utilisateurs ............................................17
2.3.5. Interface historique accès aux laboratoires :......................................................................18
Conclusion ...........................................................................................................................................18
Annexes................................................................................................................................................20

3. Page | iii
Liste de figures
figure 1: Logo ISET Djerba............................................................................................................3
figure 2: Organigramme de ISET Djerba .......................................................................................4
figure 3: Exemple de page d’ajout Excel........................................................................................5
figure 4: Diagramme de classe .......................................................................................................8
figure 5: Diagramme de Cas d’utilisation général d’administrateur ..............................................9
figure 6: Diagramme de cas d’utilisation d’authentification ........................................................10
figure 7: Diagramme de séquence d’authentification...................................................................11
figure 8: page d’authentification d’application.............................................................................15
figure 9: page d’accueil ................................................................................................................16
figure 10: page d’ajout d’utilisateurs ..........................................................................................16
figure 11: page modification d’utilisateurs................................................................................17
figure 12: Interface historique d’accès au labo ...........................................................................18
figure 13: carte Arduino..............................................................................................................20
figure 14: câble USB d’arduino ..................................................................................................20
figure 15: carte RFID..................................................................................................................21

4. Remerciement
Nous tenons avant de vous présenter notre travail, à remercier vivement tous ceux qui nous
ont permis d’effectuer notre stage dans les meilleures conditions, ainsi que tous ceux qui
nous ont aidés à rassembler l’indispensable fondation de ce travail.
Nous remercions tout particulièrement notre encadreur Mr Bouajila Wajdi par sa confiance
et sa disponibilité.
Par la même occasion, nous tenons à remercier infiniment tous les membres jury d’avoir
accepté de juger notre travail.

5. Page | 1
Introduction
Pour améliorer sa performance, l’entreprise d’aujourd’hui vise à automatiser la gestion
interne et contrôler l’accès à ces laboratoires en faisant appel à des technologies
informatiques. D’ailleurs c’est le cas d’ISET Djerba qui souhaite contrôler l’accès à
distance de leurs laboratoires à l’aide d’une application web.
Mon projet consiste à identifier et analyser les besoins liés à l’entreprise qui s’articulent
autour des modules fonctionnels à savoir : la gestion de l’historique, la gestion des
utilisateurs.
A l'aide de ce système, l’administrateur travail dans un environnement applicatif qui
repose sur une base de données unique. Ce modèle permet d'assurer l'intégrité des données,
la non-redondance de l'information, ainsi que la réduction des temps de traitement au
temps réel.

6. Page | 2
Chapitre 1 Étude de l’organisme
d'accueil
1.1. Présentation de l’organisme d'accueil
L’ISET de Djerba, créé en 2000, fait partie d’un réseau de 25 instituts supérieurs des
études technologiques. Il assure, dans le cadre de LMD, une formation supérieure
technologique dans les spécialités :
 Génie électrique
 Génie mécanique
 Science Economique et Gestion
 Technologie de l’Informatique
Au terme de trois ans d’études, les étudiants obtiennent le diplôme national de la
Licence Appliqué.
En partenariat avec le milieu économique, l’ISET de Djerba assure des formations co-
construites en Mécatronique Automobile et en Développement et Référencement des sites
Web, couronnées par l’obtention de la Licence appliqué. De même, l’ISET de Djerba
propose, depuis 2013, le programme de Mastère Professionnel en Hôtellerie et Tourisme.
N’étant pas en reste les travailleurs trouvent à l’ISET de Djerba des formations à
distance diplomantes dans les différentes spécialités et les cycles de formation dans les
différentes spécialités et les cycles de formations de haut niveau.
Acteur dans le développement régional, l’ISET de Djerba ne cesse de tisser des liens
avec les acteurs économiques (privée et publics) à travers la réalisation des études, le
conseil, l’assistance technique, l’accompagnement,…
En rapport avec notre conviction d’améliorer la compétence et la qualification, des
centres de certification (Certificat en Informatique et Internet(C2I) – Solid Works –
Business Edge) viennent compléter l’offre académique de l’ISET de Djerba.

7. Page | 3
figure 1: Logo ISET Djerba
Le logo se consiste de deux parties, la première représente un étudiant gai dans un
milieu éducatif qui est l’ISET représenté ici comme une partie de l’étudiant lui-même. La
deuxième partie représente un dôme qui symbolise l’architecture Djerbienne typique.

8. Page | 4
1.2. Organisation de l’organisme d'accueil
figure 2: Organigramme de ISET Djerba
1.3. Étude de l’existant
Dans cette partie nous allons mettre l’accent sur les outils utilisés avant de mettre une
application pour gérer les données envoyées par l’arduino au fichier Excel.
La méthode utilisée par ISET Djerba est d’enregistrée les informations affichées sur
l’arduino lors de l’ouverture de porte de leur laboratoire dans un fichier Excel ainsi que
l’on peut imprimer sur des papiers ou de modifier. Cette méthode a des plusieurs risques et
n’est pas sécurisée car on peut le supprimer facilement encore en cas de coupure de
courant électrique, et on a déjà travaillé sur ce fichier Excel donc tous les donnée seront
perdu. Le fichier Excel utilisée et d’un programme nommé « PLX-DAQ » ce logiciel
permet la connexion entre leur fichier Excel est l’arduino.
Voilà un exemple de fichier Excel de ce logiciel :

9. Page | 5
figure 3: Exemple de page d’ajout Excel
1.4. Critique de l’existant et Solutions proposées
En absence d’une application web ou mobile, l’entreprise peut rencontrer plusieurs
problèmes à l’ouverture des laboratoires tel que :
-Lors de l’ouverture de porte on ne peut pas savoir ce qu’ouvre le laboratoire.
-On ne peut pas savoir lequel des professeurs qui a la carte.
-On ne peut pas connaitre lequel de deux laboratoires sont ouvert.
-risque de suppression de fichier Excel utilisée.
Avec ce nouvel outil, on élimine le fichier Excel utilisé et on le remplace par une base
de données pour stocker toutes les informations. Les données seront sur une base de
données et ce devra être transmis automatiquement à l’application et de cette façon on
peut consulter et afficher tous l’historique de carte sur Web.
De cette façon on a bien sécurisé les laboratoires ainsi qu’on peut contrôler à distance
l’historique de carte. Pour créer les informations, le carte utilise Microsoft office Excel et
enregistre les données dans un tableau et l’insertion se fait manuellement.
L’utilisation d’un produit Microsoft office Excel se voit importante et paraît bénéfique
en quelques termes, mais elle représente plusieurs inconvénients.

10. Page | 6
Mon projet a pour objectif d’automatiser un ensemble des processus d’entreprise tout en
travaillant sur une base de données unique et homogène afin de gagner de temps et rendre
les donnée plus sécurisés ainsi qu’on peut consulter à n’importe quel temps.
ISETJerba consiste donc à proposer une solution répondant aux besoins fonctionnels
d’entreprise.
 Cette solution devra entre autres assurer:
 Gestion des utilisateurs (ajout, modification, suppression)
 Gestion d’historique d’accès aux laboratoires.

11. Page | 7
Chapitre 2 Développement de
l’application
2.1. Étude conceptuelle
2.1.1. Introduction
Dans ce chapitre nous commençons par une présentation concernant les différents outils
logiciels et les langages de modélisations utilisés. Puis nous allons détailler les diagrammes
des cas d’utilisation, les diagrammes des classes et les diagrammes de séquences. Notre but
est de permettre à l’utilisateur d’une prise en main rapide de notre application.
2.1.2. Méthode et outils de modélisation
Pour mieux présenter l’architecture de notre application, on va choisir le langage de
modélisation le plus adopté UML: C'est un langage de modélisation, défini comme une
norme de modélisation objet qui sert à décrire et à documenter un système d'information.
En utilisant ce langage, les objectifs de la modélisation objet suivant sont assurés :
• Formaliser la conception d’application.
• Faciliter la communication entre les différents intervenants au sein d’un projet
informatique.
• Coordonner les activités entre les différents intervenants.
• Gérer l’évolution d’un projet informatique.
• Proposer des outils standardisés prenant en compte de nombreux aspects de la
conception. Réellement, il existe treize types de diagrammes divisés en deux catégories
mais les plus importants sont:
 Diagramme de classes (Class diagram)
 Diagramme d’objets (Object diagram)
 Diagramme de composants (Component diagram)
 Diagramme du cas d’utilisation (Use case diagram)
 Diagramme de séquence (Sequence diagram)

12. Page | 8
2.1.3. Diagramme des cas d'utilisation
Un diagramme des cas d'utilisation permet de recueillir, d'analyser et d'organiser les
besoins, et de recenser les grandes fonctionnalités d'un système. Il s'agit donc de la
première étape UML d'analyse d'un système.
Il capture le comportement d'un système, d'un sous-système, d'une classe ou d'un
composant tel qu'un utilisateur extérieur le voit. Il scinde la fonctionnalité du système en
unités cohérentes, les cas d'utilisation, ayant un sens pour les acteurs. Les cas d'utilisation
permettent d'exprimer le besoin des utilisateurs d'un système, ils sont donc une vision
orientée utilisateur de ce besoin au contraire d'une vision informatique.
2.1.4. Diagramme de classe
figure 4: Diagramme de classe
Dans ce diagramme nous allons présenter les classes ainsi que le diffèrent relation entre
celle-ci.

13. Page | 9
2.1.5. Diagramme de cas d’utilisation général d’administrateur
figure 5: Diagramme de Cas d’utilisation général d’administrateur
Ce diagramme nous explique que l’administrateur est le seul qui a le droit de
supprimer, modifier et ajouter des utilisateurs ou bien d’accéder a l’historique d’accès aux
laboratoires.

14. Page | 10
2.1.6. Diagramme de cas d’authentification
figure 6: Diagramme de cas d’utilisation d’authentification
Ce diagramme nous montre que seul l’administrateur à le droit d’accéder a l’application
mais il peut aussi donner l’accès aux professeurs ainsi que le chef de départements.

15. Page | 11
2.1.7. Diagramme de séquence
 Diagramme de séquence d’authentification
figure 7: Diagramme de séquence d’authentification
Le diagramme de séquence explique comment l’administrateur peut accéder à
l’application.
L’administrateur envoie une demande d’authentification au système pour afficher la
page d’authentification puis elle saisie le login et le mot de passe que le vérifier par le
système est cherché si l’utilisateur existe il affiche la page d’authentification sinon il
recharger le même page.
Conclusion
Dans ce chapitre, nous avons pu concevoir un système de gestion des ressources
humaine en se basant sur les diagrammes du langage UML à savoir le diagramme de cas
d'utilisation, le diagramme de séquences et le diagramme de classes . Le prochain chapitre
sera dédié à la réalisation de notre application.

16. Page | 12
2.2. Réalisation
2.2.1. Introduction
Ce chapitre représente le dernier volet de ce rapport, il sera consacré à l’implémentation
de notre application.
Nous commençons par la présentation des ressources matérielles et logicielles utilisées.
Par la suite, nous présentons des captures d’écran dans le but de mettre en évidence
l’aspect ergonomique et fonctionnel des interfaces développées.
2.2.2. Environnement de développement
2.2.2.1. Environnement matériel
Pour le développement de l’application j’ai utilisé un PC portable « ACER ASPIRE
5734Z » dont la configuration est la suivante :
 Processeur Pentuim Dual-Core T4500 avec fréquence 2.30GHz
 Système d’exploitation Ubuntu 16.10
 Mémoire vive 4Go
 Carte graphique Intel HD
 Capacité de disque dure 500 GO
2.2.2.2. Environnement Logiciel
a) LAMP
Est un ensemble de logiciels permettant de mettre en place facilement un serveur Web
confidentiel, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres (Linux Apache MySQL Perl PHP) offrant une bonne
souplesse d'utilisation, réputée pour son installation simple et rapide.
 Installation
L’installation complète se résume d'une seule commande écrit dans le terminal :

17. Page | 13
 Sudo tasksel install lamp-server
Mais on peut installer chaque composant tous seul :
Le serveur web Apache :
 Sudo apt-get install apache2
La language php:
 Sudo apt-get install php5
La language sql:
 Sudo apt-get install mysql-server
Le système de gestion des bases des données
 Sudo apt-get install phpmyadmin
b) BootStrap
BootStrap est un framework qui facilite et accélère le développement Front-End. Il
inclue une base CSS très complète configurée à partir d’un fichier de variables, un
ensemble de conventions de structure HTML et de nommage de classes des librairies
JavaScripts simples pour les fonctions les plus courantes.
c) Visual Studio
Microsoft Visual Studio est une suite de logiciels de développement
pour Windows conçue par Microsoft. La dernière version s'appelle Visual Studio 2017.
Visual Studio est un ensemble complet d'outils de développement permettant de générer
des applications web ASP.NET, des services web XML, des applications bureautiques et
des applications mobiles. Visual Basic, Visual C++, Visual C# utilisent tous le
même environnement de développement intégré (IDE), qui leur permet de partager des
outils et facilite la création de solutions faisant appel à plusieurs langages. Par ailleurs, ces
langages permettent de mieux tirer parti des fonctionnalités du framework .NET, qui
fournit un accès à des technologies clés simplifiant le développement d'applications web
ASP et de services web XML grâce à Visual Web Developer.
.

18. Page | 14
d) PHP
PHP est un langage de programmation informatique essentiellement utilisé pour
produire la volée des pages web dynamiques. Dans sa version 5 lancée en juillet 2004,
PHP s’est imposé comme un langage de référence sur le web en raison de sa simplicité, de
sa gratuité et de son origine de logiciel libre Les compétences en développement PHP,
développeurs PHP et ingénieurs de développement PHP, sont très recherchés par les
entreprises qui l’utilisent de plus en plus dans le cadre de création de pages web
dynamiques ainsi que dans le cadre de langage interprété de façon locale.
e) JQuery
JQuery est une bibliothèque JavaScript libre (on parle également de Framework
JavaScript libre) développée initialement par John Régis et qui est aujourd'hui maintenue
et mise à jour par la communauté jQuery Team.
Le Framework JavaScript jQuery code rapidement et simplement des traitements à base
de code JavaScript pour dynamiser et améliorer l'ergonomie des sites internet.

19. Page | 15
2.3. Présentation de l’application
2.3.1. L’interface d’authentification
figure 8: page d’authentification d’application
L’authentification est une étape primordiale par laquelle seul l’administrateur peut
accéder à l’application. Cette phase assure, en effet, la sécurité de l’application en
demandant l’accès à l’application. L’administrateur se voit dans l’obligation de
s’authentifier à travers son compte. Il saisit alors, ses paramètres de connexion et valide par
la clique sur le bouton « connexion».
Le système vérifie l’existence de ce compte dans sa base des données, si l’utilisateur
est identifié dans la base, il accède à l’interface d’application.
Une fois les données sont validées, la page d’accueil est chargée.

20. Page | 16
2.3.2. L’interface d’accueil d’administrateur
figure 9: page d’accueil
Dans cette page l’administrateur consulte les utilisateurs enregistrés.
Chaque utilisateurs connecté à l’application elle enregistrer automatiquement au base de
donnée.
2.3.3. L’interface d’ajout d’utilisateurs
figure 10: page d’ajout d’utilisateurs

21. Page | 17
Dans cette page l’administrateur d’application « ISET Jerba » peur ajouter les simples
utilisateurs.
Seul l’administrateur peut ajouter un utilisateur.
Chaque utilisateur est caractérisé par :
 Nom d’utilisateur
 Nom
 Prénom
 Mot de passe
Ces champs sont obligatoires c’est-à-dire que l’administrateur doit les écrire.
2.3.4. L’interface de consultation et de modification
d’utilisateurs
figure 11: page modification d’utilisateurs
Dans cette page l’administrateur peut modifier les informations des utilisateurs
enregistré sur la base de données.

22. Page | 18
2.3.5. Interface historique accès aux laboratoires
figure 12: Interface historique d’accès au labo
Dans cette page on trouve tous l’historique d’accès aux laboratoires :
 Date de l’ouverture
 L’heure en seconde
 Numéro de laboratoire
Conclusion
Au cours de ce chapitre, je décris les plateformes matérielles et logicielles sur lesquelles
j’ai développé l’application. J’ai ensuite présenté l’application proprement dite à travers
une sélection des interfaces les plus significatives que j’ai développées.
La réalisation du projet est réussie, alors j’ai fait le déploiement de cette application sur
le réseau local de l’ISET pour que l’administration puisse exploiter cette nouvelle
application.

23. Page | 19
Conclusion générale
Ce rapport présente mon stage de perfectionnement qui a pour objet la conception et le
développement d’une application Web.
En effet, il s’agit de proposer une solution technologique qui permettra d’améliorer et
de faciliter la procédure de contrôler l’accès aux laboratoires de l’ISET afin d’engendrer
des gains surtout en temps et améliorer l’exploitation des données.
En outre, ce projet était une bonne occasion pour approfondir et concrétiser mes
connaissances en programmation.

24. Page | 20
Annexes
figure 13: carte Arduino
figure 14: câble USB d’arduino

25. Page | 21
figure 15: carte RFID