Institut Supérieur des Études Technologiques

De Gafsa

Département Technologies de l’Informatique

Rapport de

Stage de perfectionnement

Elaboré par :

AYOUB NASSER
Encadré par : Mr Zaier Imed

Période du stage : 10/01/2024 à 05/02/2024

Société d’accueil : Centre National de l'Informatique (CNI)

Année Universitaire 2023-2024

 Remerciement

Le travail présenté dans ce stage de perfectionnement a été effectué

au sein du Centre National de L’informatique. Où je tiens à exprimer
mes vifs remerciements à tous ceux qui m’ont aidé à réaliser ce
travail. Mes plus sincères remercîments vont spécialement à Mr.
Zaier Imed, mon encadrant du CNI, pour la qualité exceptionnelle de
son encadrement, son assistance, et sa présence à tout moment tout le
long de l’élaboration de ce sujet. Au terme de ce stage, j’aimerais
exprimer ma reconnaissance à tous ceux qui, d’une manière ou d’une
autre, m’ont
Aidé à bien mener ce projet.
 Sommaire

Table des matières

Table des matières

Introduction générale ................................................................................................................. 1
Chapitre 1 : Présentation de l’organisme d’accueil.................................................................... 2
1.1 Présentation générale du Centre National de l’Informatique ...................................... 2
1.2 Historique de l’entreprise ................................................................................................. 2
Chapitre 2 : Présentation du sujet de stage ................................................................................ 3
2.1 Description du sujet......................................................................................................... 3
2.2 Objectif du système de suivi et d’évaluation (SSE) ......................................................... 3
2.3 Évaluation de l’existant .................................................................................................... 3
2.4 Solution proposée ............................................................................................................. 3
Chapitre 3 : Conception ............................................................................................................. 5
3.1 Diagramme de cas d’utilisation ...................................................................................... 5
3.1.1 Diagramme de cas d’un utilisateur (Organisme) : ................................................................... 7
3.1.2 Diagramme de cas d’un administrateur : ................................................................................ 8
3.2 Diagramme de classes ...................................................................................................... 9
Chapitre 4 : Réalisation ............................................................................................................ 11
4.1 Architecture technique .............................................................................................. 11
4.1.1 Environnement logiciel................................................................................................ 11
4.2 Présentation de l’application web ................................................................................ 12
4.2.1 L’entête du site ...................................................................................................................... 12
4.2.2 La section des principes pour un visiteur .............................................................................. 14
4.2.3 La section des principes pour un utilisateur .......................................................................... 15
4.2.4 La section de résultat............................................................................................................. 15
4.2.5 la section de à-propos de nous.............................................................................................. 16
4.2.6 la section de à-propos de system .......................................................................................... 16
4.2.7 Pied de page .......................................................................................................................... 17
4.3 Présentation de l’espace administrateur ......................................................................... 18
4.3.1 Page d’authentification administrateur ................................................................................. 18
4.3.2 Page acceptant et refusant les inscriptions ........................................................................... 19
4.3.3 Page d'ajout et de suppression des organismes.................................................................... 19
 4.3.4 Page de gestion des utilisateurs ............................................................................................ 20
4.3.5 Page de gestion des principes ............................................................................................... 20
Conclusion générale ................................................................................................................. 21

Table des figures

Figure 1: Diagramme de cas d’utilisation globale ___________________________________ 6

Figure 2: Diagramme de cas d’un utilisateur (Organisme) ____________________________ 7
Figure 3: Diagramme de cas d'utilisation d'un administrateur _________________________ 8
Figure 4: Diagramme de classes _______________________________________________ 10
Figure 5: L'entête de site (pour un visiteur) _______________________________________ 13
Figure 6: L'entête du site (pour un utilisateur (Organisme)) __________________________ 14
Figure 7: La section des principes pour un visiteur _________________________________ 14
Figure 8: La section des principes pour un utilisateur _______________________________ 15
Figure 9: La section de résultat ________________________________________________ 15
Figure 10: Rapport de résultat ________________________________________________ 16
Figure 11: la section À Propos du Système _______________________________________ 17
Figure 12: Pied de page ______________________________________________________ 18
Figure 13: Page d'authentification administrateur _________________________________ 18
Figure 14: Page acceptant et refusant les inscriptions ______________________________ 19
Figure 15: Page d'ajout et de suppression des organismes __________________________ 20
Figure 16: Page de gestion des utilisateurs _______________________________________ 20
Figure 17 : Page de gestion des principes ________________________________________ 20
 Introduction générale

Dans le cadre de ma formation à l'Institut Supérieur des Études Technologiques de Gafsa, j’ai
effectué un stage de perfectionnement au Centre National de l’Informatique (CNI).

Le stage est un moyen qui permet à l’étudiant de s’intégrer dans la vie professionnelle en vue
d'acquérir une idée générale sur le fonctionnement de l’entreprise.

La mission du stage était la Concevoir et mise en place d’un système de mesure harmonisé
pour les organismes (publiques/ privés/ société civile).

Le rapport se divise en quatre chapitres. Le premier chapitre est consacré à une présentation
de la société d’accueil.

Le deuxième chapitre est une présentation du sujet de stage où nous avons élaboré les
objectifs du stage ainsi que les raisons pour lesquelles ce sujet a été mis en place, ainsi que
des solutions pour atteindre un système d’informations performant et efficace.

Le troisième chapitre traite de la conception et de la modélisation du système à travers des

diagrammes de cas d’utilisation de la base de données.

Enfin, le quatrième chapitre montre les outils utilisés pour la réalisation, ainsi que la
présentation de quelques exemples des interfaces de l’application web.

Stage de perfectionnement Page 1

 Chapitre 1 : Présentation de l’organisme d’accueil

1.1 Présentation générale du Centre National de l’Informatique

Institué le 30 Décembre 1975, le Centre National de l’Informatique est un établissement
public à caractère non administratif doté de la personnalité civile et de l’autonomie financière.
Le CNI est un organisme placé sous la tutelle du Ministre des Technologies de la
Communication, et opérant dans les domaines du secteur de l’informatique et des
technologies de la communication et certifié ISO 9001 version 2015.

Les missions principales de Centre National de l’Informatique sont :

 Maîtrise d’ouvrage déléguée et Pilotage de projet.

 Audit de système d’information.
 Etude réseaux et sécurité.
 Développement et Maintenance des systèmes d’Information.
 Hébergement des plateformes de ses clients (services dédiés).
 Déploiement des applications développées pour le compte de l’administration en vue
de leur exploitation.

1.2 Historique de l’entreprise

Le CNI a été créé en tant qu’Établissement Public à caractère Industriel et Commercial. En
1997, il a été reclassé Établissement Public à caractère Non Administratif. En 1992, un cycle
de formation a été institué au CNI pour l’initiation au travail dans les administrations
publiques.
Le CNI a joué un rôle important dans :

• La planification et l'organisation du secteur de l'informatique en Tunisie et la

préparation et le suivi des travaux des Plans Nationaux Informatiques (PNI).
• La rationalisation de l’acquisition de matériels, de produits et de services
informatiques par l’Administration et les entreprises publiques. (Circulaires du
Premier Ministre du : 19 octobre 1977, 18 juin 1981, 24 septembre 1985).
• L’exécution de la procédure d’agrément préalable à la réalisation des projets
informatiques, à leur planification et à leur suivi. (Circulaires du Premier Ministre
du : 18 juin 1981, 24 septembre 1985, 16 août 1988, 15 janvier 1998).

Page 2
Chapitre 2 : Présentation du sujet de stage

Chapitre 2 : Présentation du sujet de stage

2.1 Description du sujet
La conception et réalisation d’un système informatique de mesure harmonisé pour les
organismes (publiques/ privés/ société civile) évolutif permettant d’élaborer un classement
selon la maturité de l’organisme en matière de bonne gouvernance en vue d’une labélisation.

2.2 Objectif du système de suivi et d’évaluation (SSE)

• 1) Concevoir un système de mesure harmonisé pour les organismes (publiques/
privés/société civile) évolutif.

• 2) Elaborer un classement selon la maturité de l’organisme en matière de bonne

gouvernance.
• 3) Labélisation.

2.3 Évaluation de l’existant

Le "système de suivi et d’évaluation (SSE)" a été mis en place pour des raisons simples et
essentielles. Il vise à améliorer les performances de l'entreprise en permettant un suivi précis
des activités, à assurer une communication transparente sur les réalisations et les retards, à
faciliter la prise de décisions éclairées, à gérer les risques, à suivre les progrès par rapport aux
objectifs, à renforcer la responsabilité individuelle et collective, et à permettre une adaptation
rapide aux changements. En résumé, le SSE favorise une culture d'amélioration continue pour
le développement de l’entreprise.

2.4 Solution proposée

En considérant les besoins croissants de disposer d'un système efficace de suivi et d'évaluation
(SSE) au sein de l'entreprise CNI, la solution envisagée consiste à concevoir et mettre en place
une application web dédiée au SSE. Cette application vise à répondre aux défis liés à la gestion
et à l'évaluation des performances de manière plus automatisée et accessible. Les
caractéristiques clés de cette application incluent :

Point de vue administrateur :

Gérer les comptes utilisateur

Consulter les résultats des utilisateurs
Gérer les principes

Stage de perfectionnement Page 3

Chapitre 2 : Présentation du sujet de stage

Point de vue utilisateur :

Gérer Son Profil

Choisir Principe

Consulter Résultat

Stage de perfectionnement Page 4

 Chapitre 3 : Conception

3.1 Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation est un diagramme UML utilisé pour donner une vision
globale du comportement fonctionnel d'un système logiciel. Un cas d'utilisation représente
une unité discrète d'interaction entre un utilisateur et un système.

Dans un diagramme de cas d'utilisation, il existe des acteurs qui interagissent avec des cas
d'utilisation.

Les cas d’utilisation permettent de structurer les besoins des utilisateurs et les objectifs du
système.

Le diagramme de cas de cette application se compose de deux acteurs principaux :

- Utilisateur (Organisme) : Représente un membre d'un organisme (public, privé, société

civile) qui interagit avec le système. Cet utilisateur peut créer un compte, attend
l'approbation de l'administrateur, se connecte, gère son profil, choisit des principes,
consulte les résultats.

- Administrateur : Gère les comptes des utilisateurs, gère les organismes, gère les
principes, consulte les résultats des utilisateurs.

Stage de perfectionnement Page 5

 Figure 1: Diagramme de cas d’utilisation globale

Stage de perfectionnement Page 6

 3.1.1 Diagramme de cas d’un utilisateur (Organisme) :

Figure 2: Diagramme de cas d’un utilisateur (Organisme)

L'utilisateur, représentant un membre d'un organisme (qu'il soit public, privé, ou de la société
civile), engage des interactions variées avec le système.

Initialement, il a la possibilité de créer un compte, suivi de l'attente de l'approbation de

l'administrateur, qui inclut également l'étape d'authentification.

Une fois approuvé, l'utilisateur peut se connecter et gérer son profil, englobant des
fonctionnalités telles que la modification du grade, du poste, de l'image, de l'email, et du mot
de passe. De plus, il peut choisir des principes après s'être authentifié, et ce choix inclut
également l'authentification.

Le profil de l'utilisateur présente une hiérarchie avec des fonctionnalités héritées, notamment
la modification du grade, du poste, de l'image, de l'email, et du mot de passe.

Stage de perfectionnement Page 7

De manière complémentaire, l'utilisateur peut choisir des pratiques, intégrant le choix de
critères qui, à leur tour, héritent de fonctionnalités comme choisir une réponse, choisir une
preuve, consulter une preuve, consulter une référence. Enfin, l'utilisateur peut consulter les
résultats après s'être authentifié.
Ce processus complet offre à l'utilisateur une expérience intégrée dans l'utilisation du système,
couvrant divers aspects de gestion de profil, de choix de principes, de pratiques, de critères et
de consultation des résultats.

3.1.2 Diagramme de cas d’un administrateur :

Figure 3: Diagramme de cas d'utilisation d'un administrateur

L'administrateur assume un rôle central dans la gestion du système, exerçant des

responsabilités étendues.
Il gère de manière exhaustive les comptes des utilisateurs, englobant le processus
d'authentification administrative.

Cette gestion inclut des fonctionnalités héritées telles qu'accepter et refuser des utilisateurs,
assurant ainsi un contrôle précis sur l'accès au système.
De plus, l'administrateur est chargé de la gestion des organismes, avec l'inclusion de
l'authentification administrative.

Stage de perfectionnement Page 8

Il supervise également les principes, avec des fonctionnalités héritées telles qu'ajouter,
modifier et supprimer, formant ainsi une base solide pour l'évolution du système.
Cette gestion s'étend jusqu'aux pratiques, critères, réponses, avec des opérations héritées
comme ajouter, modifier et supprimer.

Dans le cadre de cette structure hiérarchique, des fonctionnalités spécifiques, telles que la
modification de preuves, de libellés et de références, sont également intégrées.

Enfin, l'administrateur a la capacité de consulter les résultats des utilisateurs, renforçant ainsi
sa capacité à évaluer et à guider efficacement l'utilisation du système.

3.2 Diagramme de classes

En général un diagramme de classe peut contenir les éléments suivants :

Les classes : une classe représente la description formelle d’un ensemble d’objets ayant une
sémantique et des caractéristiques communes. Elle est représentée en utilisant un rectangle
divisé en trois sections.
La section supérieure est le nom de la classe, la section centrale définit les propriétés de la
classe alors que la section du bas énumère les méthodes de la classe.
Les associations : une association est une relation entre des classes qui décrit les
connexions structurelles entre leurs instances. Une association indique donc que des liens
peuvent exister entre des instances des classes associées.

Les attributs : les attributs représentent les données encapsulées dans les objets des
classes. Chacune de ces informations est définie par un nom, un type de données, une
visibilité et peut être initialisé. Le nom de l’attribut doit être unique dans la classe.

La réalisation du diagramme de classe se base sur les règles de gestion qui permet de définir liens
qui relient ces classes.

Stage de perfectionnement Page 9

 Figure 4: Diagramme de classes

Stage de perfectionnement Page 10

 Chapitre 4 : Réalisation

4.1 Architecture technique

L´architecture technique est une vue tournée vers les différents éléments matériels et
l'infrastructure dans laquelle le système informatique s'inscrit, les liaisons physiques et
logiques entre ces éléments et les informations qui y circulent.

4.1.1 Environnement logiciel

L'environnement logiciel est basé sur plusieurs technologies clés. Pour le développement côté
client, vous utilisez les langages HTML 5, CSS 3, et Javascript. HTML 5 est utilisé pour structurer
le contenu web, CSS 3 pour le styliser et améliorer la présentation, tandis que Javascript est
utilisé pour apporter des fonctionnalités interactives et dynamiques au niveau du client.

Côté serveur, je choisi PHP comme langage de programmation. PHP est un langage de script
côté serveur populaire, principalement utilisé pour le développement web.

Il est souvent intégré dans du code HTML et exécuté sur le serveur, générant ainsi du contenu
dynamique.

En ce qui concerne la gestion de la base de données, je opté pour le système de gestion de

base de données (SGBD) phpMyAdmin.

Stage de perfectionnement Page 11

MySQL est utilisé comme système de gestion de base de données relationnelle, stockant et
organisant les données de manière structurée pour une récupération efficace.

4.2 Présentation de l’application web

Le site élaboré se distingue par une interface principale, facilitant l'authentification de
l'utilisateur et lui ouvrant ainsi l'accès aux fonctionnalités enrichissantes de notre application.
À travers les différentes interfaces présentées ci-dessous, nous aspirons à fournir une vision
complète du design soigné de notre site web, mettant en avant son ergonomie et sa
convivialité.
Explorez les diverses sections avec aisance et découvrez l'expérience utilisateur pensée pour
vous offrir un usage intuitif et gratifiant.

4.2.1 L’entête du site

La première partie de la page est le menu de navigation (header) qui comprend plusieurs liens.
Le premier menu rassemble des liens vers les réseaux sociaux et les coordonnées de contact
de la société. Ces informations sont cruciales pour permettre aux visiteurs de rester connectés
et de communiquer avec la société.

Ensuite, on trouve le nom de la gouvernance (gouvernance et prévention de la conception),

qui est au centre de la navigation. Ce nom sert de point focal et représente visuellement la
société responsable des services proposés sur le site.

Les options du menu, présentées sous forme de liste, offrent aux visiteurs différentes
possibilités d'interaction. Le premier lien, "A PROPOS DE NOUS", redirige vers une section
détaillant des informations sur la société. Le deuxième lien, "CONTACT", conduit à une section
où les visiteurs peuvent entrer en contact avec la société.

Les liens "SE CONNECTER" et "S'INSCRIRE" sont des options importantes pour les utilisateurs.
Les visiteurs ont la possibilité de se connecter s'ils ont déjà un compte, ou de s'inscrire s'ils
sont nouveaux sur le site.

Stage de perfectionnement Page 12

 Figure 5: L'entête de site (pour un visiteur)

En tant que client connecté, la partie en-tête (header) de la page offre une expérience de
navigation personnalisée. Elle conserve le système de suivi et d’évaluation (SSE) au centre,
mais introduit des fonctionnalités supplémentaires liées à la gestion du compte utilisateur.
Le menu de navigation supérieur propose toujours des liens vers des sections importantes
telles que "A PROPOS DE NOUS" et "CONTACT", mais deux nouvelles options apparaissent pour
le client connecté. Tout d'abord, le lien "Se déconnecter" redirige l'utilisateur vers une page de
déconnexion, lui permettant de mettre fin à sa session.
Ensuite, un lien personnalisé affiche le nom d'utilisateur de la session en cours. Ce lien peut
être un point d'accès rapide aux informations du compte. Lorsque l'utilisateur clique sur son
nom d'utilisateur, un sous-menu déroulant apparaît avec des options supplémentaires.
Actuellement, la seule option disponible est "Changer mot de passe". Lorsque sélectionnée,
cette option fait apparaître un formulaire permettant à l'utilisateur de modifier son mot de
passe.

Stage de perfectionnement Page 13

 Figure 6: L'entête du site (pour un utilisateur (Organisme))

4.2.2 La section des principes pour un visiteur

Cette section affiche les 11 principes de l'ISO 37000 pour le visiteur, mais il ne peut rien faire
avant de s'identifier

Figure 7: La section des principes pour un visiteur

Stage de perfectionnement Page 14

 4.2.3 La section des principes pour un utilisateur
Après s'être identifié, l'utilisateur aura accès au choix un principe, à la sélection de pratiques,
à la définition de critères, au choix de réponses, et à la sélection de preuves

Figure 8: La section des principes pour un utilisateur

4.2.4 La section de résultat

Après avoir choisi un principe, les pratiques, sélectionné une réponse, et fourni des preuves,
l'utilisateur appuiera sur le bouton "Résultat" pour obtenir son résultat.

Figure 9: La section de résultat

Stage de perfectionnement Page 15

 4.2.5 la section de à-propos de nous
L'utilisateur (organisme) peut consulter ici ses informations et ses résultats, accompagnés de
son classement. Il a la possibilité de les imprimer ou de les envoyer par e-mail.

Figure 10: Rapport de résultat

4.2.6 la section de à-propos de system

La section "À Propos du Système (SSE)" vise à présenter de manière détaillée les objectifs, la
portée et le fonctionnement du Système de Suivi et d'Évaluation (SSE).
Ce système a pour ambition de fournir un cadre de mesure harmonisé, évoluant au fil du
temps, permettant d'évaluer la maturité des organismes en termes de bonne gouvernance.
Les objectifs principaux comprennent la conception d'un système de mesure cohérent,
l'élaboration d'un classement en fonction de la maturité des organismes, et la possibilité de
labélisation.
La portée du SSE s'étend à tous les types d'organismes, qu'ils soient publics, privés ou de la
société civile, incluant toutes les parties prenantes impliquées.
Les utilisateurs bénéficient d'une vision claire de leur progression, d'un classement basé sur
leur maturité en gouvernance, et de la possibilité de recevoir une labélisation reconnaissant
leurs bonnes pratiques. Pour utiliser le SSE, les utilisateurs se connectent avec leurs
identifiants, choisissent des principes, sélectionnent des pratiques, fournissent des réponses
et des preuves, puis appuient sur le bouton "Résultat" pour obtenir leur évaluation. En résumé,
cette section offre une vue d'ensemble complète du SSE, de ses objectifs à ses avantages
pratiques pour les utilisateurs.

Stage de perfectionnement Page 16

 Figure 11: la section À Propos du Système

4.2.7 Pied de page

Le pied de page de la page web contient une brève définition du Système de Suivi et
d'Évaluation (SSE).
La deuxième section propose quelques liens à l'intérieur de la page.
La dernière section comprend une courte définition de la gouvernance et de la prévention de
la conception.

Stage de perfectionnement Page 17

 Figure 12: Pied de page

4.3 Présentation de l’espace administrateur

Cette section se concentre sur la gestion des utilisateurs (organismes).
Pour accéder à l'interface administrateur, une authentification est nécessaire avec une
adresse e-mail et un mot de passe spécifiques, assurant ainsi la sécurité du processus.
Les interfaces ci-dessous offrent un aperçu du tableau de bord administrateur, permettant la
gestion des comptes d'utilisateurs, des divers organismes, et des principes associés.

4.3.1 Page d’authentification administrateur

C’est la première fenêtre affichée, permettant l’authentification de l’administrateur pour
qu’il accède au panneau d’administration.
L’admin est invité à saisir son email et son mot de passe pour se connecter, si ses
coordonnées sont erronées, un message d’erreur sera affiché.

Figure 13: Page d'authentification administrateur

Stage de perfectionnement Page 18

 4.3.2 Page acceptant et refusant les inscriptions
Cette page affiche les demandes d'inscription, ainsi l'administrateur peut les accepter ou les
supprimer. Si la demande est acceptée, l'utilisateur peut alors se connecter.

Figure 14: Page acceptant et refusant les inscriptions

4.3.3 Page d'ajout et de suppression des organismes

Cette page affiche les organismes dont la demande a été acceptée, et l'administrateur peut
ajouter d'autres organismes ou les supprimer.

Stage de perfectionnement Page 19

 Figure 15: Page d'ajout et de suppression des organismes

4.3.4 Page de gestion des utilisateurs

Cette page affiche les utilisateurs approuvés avec des informations concernant leur
organisme, et l'administrateur peut ajouter, modifier ou supprimer des utilisateurs.

Figure 16: Page de gestion des utilisateurs

4.3.5 Page de gestion des principes

Cette page affiche les 11 principes de l'ISO 37000, et l'administrateur peut ajouter des
bonnes pratiques ou des critères, les modifier ou les supprimer.

Figure 17 : Page de gestion des principes

Stage de perfectionnement Page 20

 Conclusion générale

Ce stage été une bonne occasion pour élargir mes connaissances pratiques pour s’adapter aux
nouvelles technologies qui s’améliorent jour pour persister dans un secteur qui s’éveille chaque
jour sur des nouvelles innovations.

Le projet m’a également donnée l’occasion de mieux de la société CNI, leur fonctionnement
en interne et vis-à-vis des clients, c’est un milieu qu’il est utile d’appréhender pour débuter sa
carrière en tant que développeur.

En guise de perspective, une formation technique d’hébergement sera très intéressée pour
suivre les améliorations technologiques, des connaissances en accès seront bien
complémentaire à mes connaissances.

Stage de perfectionnement Page 21