Introduction Générale

L’informatique étant une science de traitement automatique de données s’avère

bénéfique dans tous les domaines qu’ils soient scientifiques ou professionnels, privés et /ou
publics.

Afin d’aboutir à un site fiable, il définit le travail que j’ai effectué, il est composé par
trois chapitres de la manière suivante :

Dans le premier chapitre « Présentation de l’entreprise » : Je vais présenter en premier

lieu la société dans laquelle j'ai effectué mon sujet de travail proposé.

Dans le deuxième chapitre « Notions théoriques » chapitre je vais expliquer les

principes de fonctionnement de l’application et proposer des solutions pour les problèmes
trouvés.

Dans le troisième chapitre « Présentation de l’application » : le dernier chapitre est

dédié à la phase d’implémentation et de réalisation de l’application il décrit l’environnement
du travail le choix technologiques et les interfaces réalisées.

Ce stage est un moyen qui permet à l’étudiant de s’intégrer dans la vie professionnelle
en vue d’avoir une idée générale sur le fonctionnement de l’entreprise. A ce niveau, l’objectif
des instituts supérieurs des études technologies est permet à l’étudiant d’enrichir ses
connaissances et de s’adapter à l’environnement de l’entreprise.

Enfin, mon rapport est clôturé d’une conclusion générale récapitulant le travail que j’ai
réalisé en mentionnant les différents atouts de ce projet.

6
Chapitre 1 : Présentation de
l’entreprise

7
Introduction

Dans ce chapitre, je vais présenter en premier lieu la société dans laquelle j'ai effectué
mon sujet de travail proposé tout en expliquant ses objectifs ainsi les fonctionnalités
nécessaires pour le réaliser.

1. Présentation générale de la société

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 9001veísion 2015. Principal appui aux
structures publiques de l’administration dans la réalisation, le déploiement et l’exploitation
des systèmes d’information, le CNI assure les activités suivantes :

2. Etudes & Conseil

a) Système d’information

• Audit de système d’information.

• Etude d’opportunité, Etude préalable, Etude organisationnelle.

• Elaboration de Schémas Directeurs Informatiques, de termes de référence, de cahiers des

charges et de plans d’actions.

• Assistance au dépouillement des offres.

b) Réseaux et Sécurité

• Etude Réseaux et sécurité

• Assistance à la réception et à l’installation de réseaux ;

• Elaboration des Cahiers des charges réseaux et sécurité

• Assistance au dépouillement

8
• Conseils et avis techniques

c) Développement

• Développement et Maintenance des systèmes d’Information ;

• Formation sur les SI développés par le CNI.

d) Hébergement du Système

• Hébergement des serveurs.

• Hébergement des applications et des données avec ou sans exploitation.

e) Backup et continuité d’activité

• Assurer la continuité de fonctionnement des applications nationales en cas de sinistre

• Assurer la continuité des services rendus aux utilisateurs

• Assister d’autres institutions pour la mise en place de leurs solutions de backup

• Héberger les plateformes de ses clients (services dédiés)

• Fournir les services de conseil pour l’élaboration de plans de continuité d’activité (PCA),

• Diffuser le savoir-faire en matière de backup et PCA.

f) Formation & certification

• Formation sur les applications nationales

• Séminaires d’expertise

• Formation continue

• Formation certifiant

• Stage et initiation à la vie professionnelle

g) Déploiement des Applications et assistance des utilisateurs

• Le CNI déploie les applications développées pour le compte de l’administration en vue de

leur exploitation.

• Le déploiement des postes peut se faire sur site (chez le client) ou dans les locaux du cni.

9
• Le CNI met à la disposition des utilisateurs des assistants pour les accompagner et les initier
à la bonne exploitation de ces applications

3. Organigramme de la société

Figure 1: Organigramme de la société

4. Contexte du stage

Dans l’objectif de maitriser et approfondir nos connaissances déjà acquises, centre

national d’informatique nous a accueillis dans ces locaux.

Il m’a proposé comme sujet de développer une plateforme de cours en ligne de la

société centre national d’informatique.

Le site doit comporter les éléments suivants :

• Espace d’utilisateur

• Espace d’enseignant

• Espace d’administrateur

10
 5. Présentation du projet

J’ai travaillé sur un projet « E-learning» ou formation en ligne, est une technique de
formation reposant sur la mise à disposition de contenus pédagogiques via un support
électronique. Le E-learning désigne les outils, les applications et l'ensemble des contenus mis
à disposition d'un stagiaire dans le but d'une formation pédagogique. Longtemps réduites à
des supports cd-rom, le E-learning a évolué et utilise dorénavant le web et différentes
applications. Contrairement à ce que l'on pourrait penser, la formation en ligne n'est pas
synonyme d'isolement. Cette solution permet aussi de nombreuses possibilités d'échange et
d'interactivité

6. Conclusion

A travers ce chapitre, j’ai présenté le cadre du projet, identifié les objectifs à atteindre
et le travail à faire. Compte tenu de cela, je propose les détails du travail dans le chapitre
suivant.

11
Chapitre 2 : Notions
théoriques

12
Introduction

Avant de commencer le travail, nous présentons dans ce chapitre certaines notions

théoriques utilisées dans mon stage. Tout d'abord, nous avons présenté les termes techniques
qui sont pertinents dans le cadre de ce stage. Ensuite, nous avons identifié les mots-clés
importants qui m'ont aidé à comprendre et à réaliser le travail requis

1. Etude de l’existence

La formation continue au CNI se fait actuellement de façon traditionnelle: cours,

apprenants et tuteurs sur place. Dans le but de résoudre ces inconvénients plusieurs
plateformes de formation en ligne se subdivisent en plateformes « propriétaires » et
plateformes << libres >>.

2. Solution proposée

L'étude l'existant nous a permis de dégager plusieurs anomalies que nous avons
détaillées dans la section précédente. Pour faire recours à ces anomalies nous proposons de
concevoir et d'implémenter une plateforme social-Learning pour le compte des personnels de
l'état qui souhaitent bénéficier du cours accélérés en informatique chez le CNI.

3. Les outils de développement

a) Visual Studio Code

Visual Studio Code est un éditeur de code source qui peut être utilisé avec une variété
de langage de programmation, notamment Java, JavaScript, Go, Node.js et C++. Il est basé
sur le cadre Electron, qui est utilisé pour développer des applications Web Node.js qui
s’exécutent sur le moteur de présentation Blink. Visual Studio Code a été annoncé le 29 avril
2015 par Microsoft lors de la conférence Build 2015. Une version préliminaire a été publiée
peu de temps après.

b) WampServer

WampServer est un logiciel libre et gratuit qui fournit un environnement de

développement web pour les systèmes d'exploitation Windows. Le nom "WampServer" est
dérivé de l'acronyme "WAMP", qui signifie "Windows, Apache, MySQL, PHP". Ainsi,

13
WampServer combine les éléments essentiels pour créer et tester des applications web
dynamiques sur des machines Windows.

c) Chrome

Le mode développeur Chrome vous permet d’essayer et de tester minutieusement un

nouveau site (ou un existant) pour trouver et corriger les bogues. Il peut également vous
donner un aperçu de la manière dont les autres sites sont exécutés, y compris l’affichage du
code source.

4. Les technologies de développement

a) HTML

Hyper Texte Markus Langage HTML n'est pas un langage de programmation. C'est
un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série
d'éléments, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire
apparaître ou agir d'une certaine façon. Les balises entourâtes peuvent être rendues par un mot
ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus
grande ou plus petite, et ainsi de suite.

b) JavaScript

JavaScript est un langage de programmation qui permet de créer du contenu mis à jour
de façon dynamique, de contrôler le contenu multimédia, d’animer des images, et tout ce à
quoi on peut penser. Avec JavaScript on peut accéder aux objets du DOM et les gérer
librement.

c) CSS
CSS signifie « Cascading Style Sheets », ou littéralement « Feuille de styles en
cascade ».
C’est à l’aide de ce langage que nous allons pouvoir contrôler en détails l’apparence
de notre page web. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du
HTML.

14
 d) PHP

PHP est un langage de script côté serveur qui permet de générer dynamiquement du
contenu web personnalisé en fonction des requêtes des utilisateurs. Il offre une prise en charge
intégrée pour une variété de bases de données relationnelles telles que MySQL, PostgreSQL,
SQLite, et d'autres encore, facilitant ainsi l'interaction avec les bases de données dans les
applications web.

e) Bootstrap

Bootstrap est un framework open-source de développement web front-end, créé par

Twitter. Il offre un ensemble de ressources et d'outils pour faciliter la création d'interfaces
web modernes, réactives et esthétiquement agréables. Le principal objectif de Bootstrap est de
permettre aux développeurs de concevoir des sites web et des applications compatibles avec
les différents appareils et navigateurs, grâce à son approche de conception mobile-first et de
responsive design.

f) SQL

SQL (Structured Query Language) est un langage de programmation standardisé

utilisé pour communiquer avec et manipuler des bases de données relationnelles. Il fournit un
ensemble de commandes permettant d'effectuer diverses opérations sur les données stockées
dans une base de données, telles que l'insertion, la mise à jour, la suppression et la
récupération des données.

Conclusion

En conclusion, ce chapitre a présenté certaines des notions théoriques que j'ai utilisées
dans la création de sites e-commerce au cours de mon stage. Grâce à ces technologies, j'ai pu
créer un site e-commerce professionnel en utilisant les compétences acquises lors de ma
formation théorique.

15
Chapitre 3 : Conception

16
Introduction

La conception est une phase importante avant la réalisation de tout projet, Cette phase
nécessite des méthodes permettant de mettre en place un modèle sur lequel on va s'appuyer.
C’est-à-dire créer une représentation similaire à la réalité de telle façon à faire ressortir les
points auxquels on s'intéresse. Nous allons commencer ce chapitre par la présentation de la
méthodologie d’analyse, en justifiant la raison du choix de cette méthodologie pour mon
application, nous allons montrer ensuite les acteurs de l’application et leurs rôles, ainsi que les
différents diagrammes UML.

1. Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation est un type de diagramme UML qui permet de

décrire les fonctionnalités offertes par un système, du point de vue des utilisateurs. Il s'agit
d'un outil de modélisation qui permet de visualiser les interactions entre les acteurs
(utilisateurs) et le système, en décrivant les différents cas d'utilisation. Le diagramme de cas
d'utilisation se compose de plusieurs éléments clés, à savoir les acteurs, les cas d'utilisation et
les associations entre les deux.

L’image suivante présente le diagramme de cas d’utilisation général du Système E-

Learning

17
Figure 2 : Diagramme de cas d’utilisation

18
 2. Diagramme de classe

La figure ci-dessous représente le diagramme de classes qui contient toutes les

informations telles que les classes, les méthodes, les associations et les propriétés.

Figure 3 : Diagramme de classe

3. Diagramme de séquence

Les diagrammes de séquences permettent de représenter des collaborations entre

objets selon un point de vue temporel, on y met l'accent sur la chronologie des envois de
messages

L’image suivante présente le diagramme de séquence système de « Authentification».

19
 Figure 4 : Diagramme de séquence

Conclusion

Dans ce chapitre, on a concentré sur les aspects analytique et conceptuel de notre

système d'information ainsi que la base de données qui interagissent avec elle.

Pour la phase analyse, on a défini les différents cas d'utilisations puis, nous les avons
traduits à travers la construction des diagrammes de séquence et le diagramme de classe, dans
la phase de conception.

20
Chapitre 4 : Le projet

21
Introduction

Dans ce chapitre, je vais décrire les tâches que j'ai effectuées pendant mon stage de
perfectionnement. Je vais fournir une description détaillée de chaque tâche.

La création et la conception d'un site web est un processus qui implique quelque étape
simple au départ, mais pouvant, sur un site abouti, mettre en œuvre des moyens et des
compétences très importants. Une plateforme peut être des milliers des pages au format
HTML simple ou proposant des animations, des services programmés en Java, PHP ou autre
langages serveur.

1. Principales interfaces graphiques

Dans cette partie nous allons créer une maquette de notre site, et offre d’accès à
différentes interfaces.

a) La page d’accueille

Cette page est la page d’accueil. Elle est constituée des principaux contenus de notre
site.

22
 Figure 5 : la page d’accueille

b) Page d’authentification

Dans cette page l’étudiant, l’enseignant ou l’administrateur ainsi que l’apprenant peut
être identifié en tapant son nom et son mot de passe pour accéder à son espace. Si les
informations d’authentification sont erronées, le système affiche une nouvelle page
d’identification avec un message d’avertissement.

23
 Figure 6 : la page d’authentification

Dans cette partie l’étudiant peut créer un compte avec une simple clique sur le bouton
<<Create Account As Student>>

Figure 7 : la page de création du compte

24
 c) Espace d’utilisateur

Après l’authentification l’étudiant, l’enseignant ou l’administrateur accède à la page de

son espace qui contient les données personnelles, et les différentes tâches à effectuer

Figure 8 : l’espace d’étudiant

L’étudiant suivre les cours après avoir cliqué sur le bouton <<Courses>>

Figure 9 : l’espace de cours

25
Pour passer les tests QCM il faut cliquer sur le nom du cours

Figure 10 : l’espace de tests

Figure 11 : l’espace d’enseignant

26
 Figure 12 : l’espace d’administrateur

Conclusion

Dans ce chapitre, nous avons exposé ainsi le résultat de développement à l’aide des
aperçus écran .Enfin nous clôturons ce stage par une conclusion général.

27
 Conclusion générale

En conclusion, le développement de l’internet et les outils de communication ont

permis de développer l’enseignement par la naissance du nouveau terme : E-Learning ou bien
la formation à distance. L’objectif de E-Learning est de remplacer les anciennes façons temps,
place, contenu de l’apprentissage prédéterminé avec des processus d’apprentissage rapides,
ouverts et personnalisés. Notre travail consiste à la « conception et réalisation d’une
plateforme web pour l’enseignement à distance ». Donc, nous avons réalisé une plateforme E-
Learning pour notre université « Mohamed Boudiaf de Msila » grâce à la technologie
WampServer qui intègre le PHP et les modules APACHE et MYSQL qui nous a permet de
gérer notre base de données. Notre plateforme permet aux enseignants de s’inscrire, créer et
publier des cours. L’étudiant aussi peut s’inscrire sur cette dernière, et communiquer avec ses
enseignants. L’administrateur gère la plateforme (gérer les comptes utilisateurs)

Après le passage par les différentes étapes de développement, l'application a abouti à

un logiciel fonctionnel qui répond globalement aux critères imposés dans ce domaine.

Le présent travail nous a permis d'acquérir des connaissances dans le domaine de la

programmation web, et de conforter nos connaissances en conception logicielle.

28