Introduction générale

L’accès aux nouvelles technologies de l’information est devenu aujourd’hui un préalable au

développement. La globalisation des échanges ne concerne pas uniquement le domaine de
l’économie mais s’est étendu à tous les domaines à l’instar de l’enseignement supérieur où les
technologies de l’information et de la communication ont profondément transformé la vie
universitaire, la recherche scientifique ainsi que les modalités de l’échange de l’information.

C’est ainsi que ces technologies, en particulier Internet, servent à rendre disponible
l’accès distant à l'information. Le Web n’est plus uniquement un moyen, mais aussi un besoin
et un outil précieux de travail, puisqu'il permet de partager l'information dans une
communauté et de créer des synergies cognitives dans les domaines de la recherche.

C’est dans ce cadre que se situe mon stage, effectué au sein de l’institut National des
Sciences et Technologies de la Mer pendant 4 mois. Ce projet de fin d’études porte sur la
conception d’application web de l’Institut National des Sciences et Technologies de la Mer,
INSTM, Salammbô.

Ce présent rapport décrit le travail réalisé au cours de ce projet. Le premier chapitre décrit le cadre

Du projet ainsi que la problématique et l’étude de l’existant. Le deuxième chapitre sera consacré à

L’analyse et la spécification des besoins. Le troisième chapitre est dédié à la conception de nôtre

Système en utilisant le langage UML, J’ai fini ce rapport par le quatrième chapitre, je vais étudier

L’implémentation l’application, en décrivant l’environnement matériel et logiciel, et je vais donner

Un aperçu sur les interfaces réalisées.

Mon rapport s’articule autour de trois grands chapitres.

Le premier chapitre intitulé « analyse et spécification des besoins » permettra de
présenter le carde du travail et de donner un aperçu sur L’INSTM, représente l’analyse de
l’existant et présente de comprendre la situation actuelle, puis il traite les défaillances du
système actuel et enfin propose une solution pour faire face aux critique dégagés.

La seconde chapitre intitulé « étude conceptuelle » présente la démarche conceptuelle.

Le troisième chapitre s’intéresse au développement et à la mise en œuvre de l’application

qui met en évidence la présentation et l’environnement du travail et aborde une
description du travail réalisé, illustré par des captures d’écran.

La dernière partie est consacrée à la conclusion générale qui présente les cotés bénéfiques
et les éventuelles perspectives pour ce projet.
Présentation et analyse du projet
1. Introduction
L’objectif de ce chapitre introductif est de présenter l’entreprise d’accueil «Institut National des
Sciences et Technologies de la Mer, INSTM, Salammbô », nous mettons le projet dans son
cadre général. Enfin, nous traitons la problématique et la solution proposée. Notre projet s’est
déroulé, plus précisément à l’unité «application web gestion de »

1- Cadre du projet

Ce projet est inscrit dans le cadre d’un projet de fin d'étude pour l’obtention d’un diplôme de
licence appliquée en Développement des Systèmes d’Information (DSI) de l'Institut Supérieur
d’Études Technologiques de Siliana . proposé par l’Institut National des Sciences et
Technologies de la Mer, INSTM, Salammbô afin de trouver des solutions à des problèmes qui
influent négativement sur la production. Ce projet a pour objectif central, la réalisation d’une
application web. Nous passons ensuite à l'étude du système existant et la problématique du
projet. Enfin, nous décrivons la solution proposée.

2- Présentation de la société 

La station océanographique de Salammbô "SOS" a été créée par décret beylical depuis 1924
selon le modèle courant de l'époque, sous forme de laboratoires pour la recherche, d'un musée
pour le public, d'une bibliothèque pour la documentation et d 'une collection de référence
décrivant les différentes espèces marines.Cette station fut la première et la plus grande
institution d'Afrique et du monde Arabe dans son genre. Grâce au dynamisme de H. Heldt
premier directeur de la Station, la recherche connuet alors un grand essor.

L'Institut National des Sciences et Technologies de la Mer INSTM est actuellement un

Etablissement Public à caractère de Recherche sous la tutelle du Ministère de l'agriculture.

Figure1 : logo de la société

2.1. Organigramme de l’organisme

Figure 2: Organigramme de la société

3. Présentation du thème du stage

3.1. Étude de l’existant
L’analyse de l’existant est une phase de la méthodologie au cours de laquelle parties ou on va
commencer par étudier réellement l’existant, ensuite dégager les défaillances et les limites du
système actuel, et fini par proposer une solution utile en mentionnent ses apports.

a. Analyse et critique de l’existant :

Le projet Tunisien FerryBox est une initiative qui vise le suivi et la mesure des masses d’eau.
Il est matérialisé par un ensemble de capteurs qui sont mis en œuvre dans le ferry de
Carthage, à 5 mètres de profondeur. Il mesure, pour chaque minute du trajet du ferry,
plusieurs paramètres (température, salinité, oxygène dissous, turbidité, pH…)

Le premier lancement des campagnes de collecte de données FerryBox remonte à 2016

Il existe 4 Transects principaux :

- Tunis - Genova (avant et arrière)

- Tunis - Marseille (avant et arrière)

Les différents types de données sont mesurés sur un laps de temps constant de 1 minute, et
les mesures qui en résultent sont envoyées au centre de recherche sous forme de courrier
électronique contenant un fichier .Txt et des journaux d'erreurs dans certains cas.

Plus de 600 transects FerryBox ont été reçus. Il a été réalisé au cours des 4 dernières
années plusieurs tentatives de gestion des données FerryBox.

b. Problématique

Suite à l’étude et la critique du système actuel, nous sommes arrivés à distinguer les
défaillances suivantes:

 stockage manuel des fichiers par e-mail.

 Le rangement des données et le lancement des scripts de classification et de
prétraitement est toujours manuel.
 Avec le temps, le nombre de fichier devient de plus en plus important et
volumineux.
 Analyse de données long.
 Non indexé
 Un grand risque de perte ou d’oublie des fichiers.
 Un stress inévitable.
c. Solution proposée :

Après avoir étudié le système actuel et suite au recensement des problématiques dégagées,
nous proposons une solution composée des modules suivants :
  Ajouter des modules pour automatiser les procédures manuels ainsi que indexer la
base afin d’optimiser les requêtes d’analyse de données.
d. Spécifications des besoins

La spécification de besoins constitue la phase de départ de toute application à développer.

Dans cette partie je veux identifier les besoins de mon application. Je veux mette l’accent
sur les besoins fonctionnels ainsi que les besoins non fonctionnels pour éviter le
développement d’une application non satisfaisante.

4. Besoins fonctionnels :

- Gestion des fichiers: collecte, téléchargement, automatisation de la classification et de la

protection des données des lignes

- Gestion des données: indexation des fichiers, transformation des données sous de
nouvelles formes (tracés, statistiques générales, séries chronologiques), prétraitements et
contrôle qualité

- Gestion de la base de données: création de base de données relationnelle, automatisation

de l'insertion des données

4.1. Besoins non fonctionnels :

La qualité d’un site présentatif d’une grande société sur Internet repose
principalement sur l’organisation de l’information et sa clarté, tant textuelle que graphique,
sur la flexibilité de la navigation et sur l’interactivité qui forment les besoins non fonctionnels
d’un site web. Ces besoins sont découpés en certaines ergonomiques, esthétiques, et
techniques que nous détaillerons par la suite.
  Les contraints ergonomiques :

L’ergonomie d’une application web peut être définie par sa capacité à répondre
efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

Les principaux critères d’ergonomie d’un site web sont les suivants :

 Clarté : Il convient de prendre en compte le fait que les informations écrites sont
moins faciles à lire sur un écran que sur un papier. Ainsi, le texte devra être
suffisamment aéré.

 Organisation : Les éléments d’informations doivent être hiérarchisés par niveau

d’importance.

 Facilité de navigation : La « règle de trois clics », globalement suivie, stipule que

toute information doit être accessible en moins de trois clics.

 Liberté de navigation : Le site doit laisser la possibilité à l’utilisateur de revenir à la

page d’accueil et aux principales rubriques par un simple clic, quelque soit la page
sur laquelle il se trouve (grâce a une barre de navigation par exemple).

 Les contraintes esthétiques :

Dans leur immense majorité, les internautes recherchant de l’information pratique pas de

belles images .La recherche esthétique que nous mènerons sur notre site ne doit jamais nuire,
en aucune façon, à l’aspect pratique et à la lisibilité du contenu.

Cela dit, si la chose est possible : autant associer l’agréable à l’utile ! Un design original,
esthétique et pratique peut avoir un impact très important sur la façon dont les visiteurs
percevront le site et sur la trace qu’il laissera dans leurs mémoires .Pour arriver à attirer
l’internaute, certains nombres critères doivent être vérifiés 

 Le choix des couleurs devra correspondre, le cas échéant, aux couleurs de

l’organisation (notamment aux couleurs du logo) et exprimer une ambiance
particulière.

 Le choix de la couleur d’arrière-plan est primordial, car un arrière plan mal choisi peut
gêner la lisibilité.
  Les images permettent d’agrémenter un site et de le rendre plus gai. Néanmoins, 
l’abus d’image et gêner le confort visuel, ainsi que le chargement des pages.

 On doit respecter la signification des couleurs selon la cible visée.

 Les contraintes techniques :

 La conception de l’interface d’un site web présentatif nécessite toutefois le respect de

certaines règles parmi lesquels :

 Tout élément de contenu doit nécessairement être qualifié, c'est-à-dire qu’il doit faire
apparaitre des éléments d’information permettant aux visiteurs de se faire une idée sur
le contenu.

 Les textes sont analysés, résumés et découpés par tache d’information.

 Il faut prévoir une méthode afin que l’utilisateur puisse naviguer entre les pages. Un
bon système de navigation repose sur : la logique, la simplicité, l’accessibilité et les
libellés significatifs.

 La clarté du contenu, l’orthographe, la disposition des éléments sur la page sont des
points importants dont il faut tenir compte pour faire d’un texte une source
d’information agréable à consulter et facile à lire.

 Les images utilisées doivent apporter un support visuel et améliorent la

compréhension du contenu.

5. Conclusion :

À travers ce chapitre, nous avons présenté l’entreprise et le cadre du projet. En outre nous
avons analysé et étudié le système actuel afin d’enrichir nos fonctionnalités et augmenter la
performance de l’application pour répondre à nos besoins. Ainsi, nous sommes positionnés
dans le contexte de notre projet, ceci va nous permettre d’entamer la prochaine étape qui
consiste à présenter la phase de conception
Chapitre 2 : conception générale
 Chapitre 2 : conception générale

1. Introduction
Après avoir cité les différentes fonctionnalités de projet dans le deuxième chapitre, nous
allons commencer maintenant une phase importante, cette phase est la conception qui a pour
but d’expliquer le déroulement de notre projet ainsi qu’assurer une bonne compréhension des
besoins des utilisateurs

2. Conception UML

Pour mieux présenter l’architecture de notre projet, on va choisir le langage de modélisation le

plus adopté UML “Unified Modeling Language” parce qu’il présente plusieurs avantages:

Il facilite la compréhension de représentations abstraites complexes.

Son caractère polyvalent et sa souplesse en font un langage universel

Il cadre l’analyse. Nous allons représenter seulement les diagrammes qui sont utilisées dans
notre projet et qui sont:

➢ les diagrammes de cas d’utilisations.

➢ les diagrammes de classes.
➢ les diagrammes de séquences.

2.1. Diagramme de cas d'utilisation

Ce diagramme permet de définir les fonctionnalités du système avec une notation graphique,
pour faciliter la communication entre les différents membres qui gère le projet.

Le diagramme de cas d’utilisation décrit l’interdépendance entre le système et l’acteur en

déterminant les besoins de l’utilisateur et tout ce que doit faire le système pour l’acteur.

● L’acteur: représente un rôle joué par une entité externe (humaine, matériel, système)
Qui interagit directement avec le système.

● Cas d’utilisation: modélise une interaction entre le système à développer et un

utilisateur interagissant avec le système.
On a utilisé le logiciel Diagrams.net qui permet de dessiner des diagrammes disponibles sur
Drive.

Figure: Logo de logiciel Diagrams.net

2.1.1. Diagramme de cas d’utilisation générale

La figure présente le diagramme de cas d’utilisation générale du système.
 2.1.2. Diagramme de cas d’utilisation responsable “gérer les operateurs”

Figure 1: Diagramme de cas d'utilisation "gérer les opérateurs"

Cette figure représente le diagramme de cas d’utilisation qui est composé d’un seul acteur “
le responsable” et un seul cas qui est “gérer les opérateurs”. Ce cas sera expliqué dans ce
qui suit.
 2.1.3. Description de cas d’utilisation “gérer les opérateurs”

Tableau 1: Description de cas d'utilisation "gérer les opérateurs"

Nom du cas Gérer les opérateurs

objectif Ajouter et supprimer opérateurs

Acteur Responsable
pré condition s’authentifier avec succès
Post-condition le responsable peut gérer les opérateurs
Le scénario 1. Le système affiche la liste des opérateurs.

2. Le système affiche un formulaire pour ajouter un opérateur

3. Le responsable remplit le formulaire et valide les données

saisies.

4. Le système affiche un message de confirmation.

5. le responsable peut retirer (supprimer) un opérateur de la

liste
 Chapitre 3 : Réalisation

I. Introduction :
En détaillent ce chapitre, nous sommes déjà passé par les étapes
nécessaires à fin d’entrainer la phase de la réalisation. Le problème a été
profondément analysé, nous avons défini une conception complète à notre
jugement. Une conception qui comporte et décrit tous les besoins de
l’application. Dans ce chapitre nous commencerons par la description de
l’environnement de développement (matériel et logiciel) ainsi que les
différents outils utilisées. Ensuite, nous présenterons les différents aspects
de fonctionnement de notre application.

II. Environnement du travail:

Dans ce paragraphe, nous allons présenter l’environnement matériel et
logiciel de développement de l’application que nous avons utilisée
1. Environnement matériel :
L’ordinateur ayant les caractéristiques suivantes :
 Marque : Asus.
 Système d’exploitation : Windows 10 Professionnel.
 Processeur : Intel Pentium CORE i5 10th GEN
 Mémoire vive : 8 GO

2. Environnement logiciel :
a) Rédaction du rapport :
  Word :
Word est un logiciel de traitement de texte qui permet de
taper des textes, ajouter des images, des graphiques, insérer des
tableaux avec des multiples choix de polices et de conception.
b) Base des données :
 PostgreSQL :

PostgreSQL est un système de gestion de base de données

relationnelle et objet. C'est un outil libre disponible selon les termes
d'une licence de type BSD. Ce système est concurrent d'autres
systèmes de gestion de base de données, qu'ils soient libres, ou
propriétaires.
c) Conception :
d) Test :
 Google chrome :

C’est un navigateur internet développé par Google. Ce

navigateur est sur le marché depuis 2008 et fonctionne sur différentes
plateformes (PC, tablettes, Smartphone ...) et sous différents OS
(Windows, mac, Linux, Android).
e) Présentation :
 PowerPoint

PowerPoint est un logiciel de Présentation Assistée par

Ordinateur. Il permet de préparer des présentations contenant du texte, des
images, des effets visuels, du son. Le mode Normal, que vous utilisez pour
écrire et concevoir vos présentations, est le principal mode de modification.
 Sublime Text 

Sublime Text est un éditeur de texte générique codé en C++ et

Python, disponible sur Windows, Mac et Linux. Le logiciel a été conçu tout
d'abord comme une extension pour Vim, riche en fonctionnalités.

3. Technologies et Langages de programmation utilisés :

  Python

Python est un langage de programmation interprété, multi-

paradigme et multiplateformes. Il favorise la programmation impérative structurée,
fonctionnelle et orientée objet.
 JavaScript & JQuery

JavaScript est un langage de programmation de scripts

principalement employé dans les pages web interactives mais aussi pour les
serveurs. Ce langage, créé en 1995 par Brendan Eich.

JQuery est une bibliothèque JavaScript libre et multiplateforme

créée pour faciliter l'écriture de scripts côté client dans le code HTML des
pages web. La première version est lancée en janvier 2006 par John Resig.
 HTML et CSS:

HTML désigne la dernière version du langage de développement

web HTML. Il est généralement appris en parallèle du CSS et plus précisément
dans notre cas avec le CSS3, ce dernier permet en effet d’animer des
éléments HTML tout en effectuant des rotations, des transitions ou des
changements.
 Bootstrap :

Il s’agit d’un éventail d’outils dédiés à la création de sites et

applications web. Il se compose à la fois de HTML, ainsi que des modèles de
conception à base de CSS pour la typographie, des formes, des boutons, la
navigation et d'autres composants de l'interface et des extensions
optionnelles JavaScript.
4. Le Framework :
 Django
 Django est un cadre de développement web open source en Python. Il a
pour but de rendre le développement web 2.0 simple et rapide. Pour cette raison, le
projet a pour slogan « Le Framework pour les perfectionnistes avec des deadlines. ».

III. Bibliothèques principales de Python

Les packages Python utilisés sont :

- PANDAS: Manipulation et analyse de données: structuration de données et opérations de

manipulation de tableaux numériques et de séries chronologiques.

- NUMPY: Manipulation de tableaux et tableaux multidimensionnels, ainsi que des fonctions

mathématiques opérant sur ces tableaux.

- MATPLOTLIB: Tracé et visualisation de données sous forme de graphiques

- SEABORN: Il vous permet de créer des graphiques statistiques en Python. Il est construit
sur matplotlib et est étroitement intégré aux structures de données PANDAS (d'où le choix
de cette bibliothèque).