Page |1

0. Introduction Générale

0.1. Généralité
De nos jours vus l’évolution de la technologie d’information qui prends une grande
place, le monde actuel doit se conformer dans le système d’informatisation, qui exige la
progression, et opter d’une certaine manière qui a été longtemps manuel, et aujourd’hui il ne
doit plus rester statique. Et le système d’informatisation, durant cette époque, l’aspect manuel
a lassé ou cédé sa place peu à peu à la machine afin de permettre à l’humanité d’obtenir des
informations fiables et mieux les converser.
Cette avancée est donc liée à l’informatique et ses outils, car avec elle, l’homme à
l’opportunité de travailler rapidement et d’améliorer ou enrichir avec efficacité son service et
de bien fonctionner.
Il sied de noter que l’informatique ne peut être comprise sans son outil qui est
l’ordinateur. Celle-ci permet donc à l’utilisateur de traiter automatiquement les informations
à l’aide d’un appareil appelé ordinateur.
Ainsi nous pouvons dire que l’informatique est fortement rapprochée au terme
information et automatique.
C’est dans ce même ordre d’idée que nous tenterons de démontrer le bien-fondé de
l’informatique ou son importance dans un service qui a attiré notre attention.

0.2. Problématique et Hypothèse

0.2.1. Problématique
Toute l’institution moderne se voulant sécurise et opter pour l’informatisation de ses
activités, et cela dans tous les domaines de son fonctionnement. Lorsqu’il s’agit de
l’inscription et de test d’admission dans son institution, nous savons que ceux-ci ne sont pas
inscrire d’une manière valable ou correcte à cause de leurs statuts.
Pour réaliser ce travail, nous nous sommes posé les questions ci-après :
1. Comment fonctionne votre Institution ?
2. Quelles sont les exigences qui sont voulues en son sein ?

3. L’informatique peut-elle résoudre les difficultés éventuelles de la gestion

d’inscription et de test d’admission ?

4. Est-ce que l’institution est-t-elle informatisée ou a-t-elle une application web ?

Les brèves réponses à ces préoccupations où ces interrogations sont données dans la
formulation des hypothèses qui peuvent être soit rejetées, soit affirmées tout long de notre
développement.1

1
KASESE N.B.J.C.V, Notes de cours du séminaire de recherche scientifique, L2INFO.URKIM, 2015-2016, p12
 Page |2

0.2.2. Hypothèse
L’hypothèse permet de diriger la recherche et de la donne un fils conducteur. C’est une
idée conductrice, provisoire. Une tentative d’explication des faits formulés dans le but d’une
recherche et elle est destinée à guider l’investigation.
La conception d’une application web pourrait tant palier à la difficulté que connait
l’Institut Madrandele dans la gestion d’inscription et du test d’admission dans la mesure où
elle faciliterait à la rapidité de gestion à son sein.
L’inscription, comme le test d’admission, Etant encore manuelle soit traditionnelle dans
son système de fonctionnement, cela poserait plusieurs problème comme : la perte des
documents dans la gestion actuelle, la lenteur d’exécution dans la circulation d’information,
d’où l’importance d’une application web pour remédier à ce problème afin de permettre la
fiabilité, rapidité, sécurité de la gestion de ces derniers (L’inscription et test d’admission).

0.3. Choix et intérêt du sujet

0.3.1. Choix du sujet
De prime, le choix de ce sujet nous permet de concilier la théorie apprise à la pratique.
Et aussi permettre à l’Institut Madrandele d’améliorer son service dans les domaines
d’inscription et de test d’admission, cette application permettra de fonctionnes très bien et de
gérer cette inscription et le test d’admission sans contrainte.

0.3.2. Intérêt du sujet

Comme nous l’avons souligné ci-haut l’intérêt de notre sujet pour l’Institut Madrandele
aura une application web pour le bon fonctionnement de leurs services d’inscription et de test
d’admission.

0.4. Méthodes, techniques et modèle de développement

a. Méthodes

Dans le cadre de notre travail, nous avons opté pour la méthode structuro-
fonctionnaliste. Celle-ci est une combinaison de la méthode structurale et fonctionnelle.

1° la Méthode structurale

Cette méthode nous a été utile dans l’étude de la structure de systèmes qui font partie de
l’Institut Madrandele (IM).

2° La Méthode fonctionnelle

Cette méthode nous a permis de dégager les différentes fonctions de l’Institut

Madrandele ainsi que celles d’Inscription et du test d’admission.

Ainsi dit, la méthode structuro-fonctionnaliste, nous a permis d’étudier la structure et

l’organisation de l’Institut Madrandele ainsi que ses différentes fonctions.
 Page |3

3° La méthode UP

Cette méthode qui fait appel Unified Modeling Language (UML), nous a permis de
créer des représentations simplifiées (diagrammes) de la partie transactionnelle de notre
travail.

4° La modélisation multidimensionnelle

Cette modélisation nous a permis de créer notre Application web.

b. Techniques

Dans ce travail nous avons utilisé les techniques suivantes :

1° L’interview ou l’entretien

La technique de l’interview ou l’entretien est un procédé d’investigation scientifique

utilisant un processus de communication verbale, pour recueillir des informations en relation
avec le but fixé.
Cette technique nous a servi à consulter et à nous entretenir avec quelques enseignants
de l’Institut Madrandele pour des informations en rapport avec notre travail.

2° La technique documentaire

Cette technique nous a servi dans l’étude et l’analyse des documents mis à notre
disposition par la Direction de l’Institut Madrandele pour mieux comprendre l’histoire.

c. Modèle de développement

Nous nous sommes basés premièrement sur le modèle du cycle de vie de

développement d’un logiciel pour mieux structurer les phases du développement de notre
application.

Deuxièmement nous avons utilisé le style dynamique pour notre application web.

0.5. Délimitation du sujet

Pour ne pas généraliser notre étude, nous avons délimité notre étude dans le temps et
dans l’espace. Ainsi, dans l’espace notre sujet trouve son terrain d’action dans l’Institut
Madrandele qui est sur avenue Wamba est situé dans la ville province de Kinshasa, Commune
de Limete, district de Mont Amba, Quartier: Kingabwa / Mbamu, sise avenue Wamba n° 57.
Il est borné au nord par l’avenue MAFUTA KIZOLA (Koweït), au sud par le complexe
Scolaire Paysannat ou (maison d’habitation), à l’Est par l’avenue Wamba et à l’Ouest par
l’avenue Diata.

Dans le temps, notre étude couvre les données d’une période allant de 2015 à nos jours,
sans oublier le caractère évolutif de l’application.
 Page |4

0.6. Difficultés rencontrées

Tout travail scientifique étant sans essences une œuvre humaine, ne peut jamais se
réaliser sans difficulté. Ainsi, nous avons effectivement rencontré plusieurs difficultés d’ordre
technique, psychologique, matériels, financier. Et la collecte des données sur terrain ne nous a
pas était facile car le chef d’établissement était occupé, y compris ses collaborateurs.

0.7. Subdivision du travail

Hormis l’introduction et la conclusion générale, notre travail est subdivisé en quatre

chapitres, structuré comme suit :
 Chapitre I : Généralités sur le Web

Dans ce chapitre nous parlerons de notions sur le web et nous

expliquons ensuite certains points du chapitre

 Chapitre II : Analyse préalable

Dans ce chapitre, nous parlerons l’organisation de l’Institut

Madrandele et son fonctionnement.

 Chapitre III : Planification et évaluation du projet

Dans ce chapitre nous déterminons le coût et le délai de réalisation de

notre projet

 Chapitre IV : Conception de l’application

Dans ce chapitre nous parlerons des aspects concrets ou de la

matérialisation de la conception de l’application.
 Page |5

Chapitre I: Généralités sur le web

Ce chapitre nous parlerons la notion sur le web, l’introduction, l’Internet, la
Chronogramme de la naissance d’internet, les réseaux internes et externes à internet, Les
applications utilisées par internet, Les notions sur la programmation web, Web, l’Application
web, PHP, HTML, CSS, Navigation, Site web, Site web statique, Site web dynamique, le
fonctionnement du web, la Présentation du serveur http, le fonctionnement du http, le
modèle OSI et les protocoles, la description du modèle, le services rendu par chaque
couche, le Tableau récapilatif.

I.1. Introduction
Plusieurs définitions sont proposées pour expliquer le terme web que les anglophones
appellent « World Wide Web » d’où l’acronyme www, et les francophones appellent
la « toile mondiale » :
Le web est un moyen simple de cliquer pour explorer le volume gigantesque des
pages d’information situées sur internet.
Et, le web est une des possibilités offertes par réseau internet de navigateur entre des
documents reliés par des liens hypertextes.
Le principe de web repose sur l’utilisateur d’hyperliens pour naviguer entre des
documents (appelés « pages web ») grâce à un logiciel appelé navigateur, en
anglais « browser ».
Par ailleurs, les internautes peuvent maintenant contribuer à faire l’actualité du Web,
tant grâce à la facilité de publication qu’offrent des outils comme les blogs, qu’au travers
d’annuaires de pages très dynamiques basés sur des votes de popularité (par exemple, Digg).
Le principe est simple : ces annuaires permettent à tout un chacun de « voter » pour une page
quelconque du Web. Les annuaires maintiennent alors une liste, par popularité décroissante,
des pages ainsi signalées.
Si un nombre massif d’internautes votent pour une même page, celle-ci apparaît
fatalement en excellente position dans l’annuaire qui a recueilli les votes. Le résultat net est
séduisant : les annuaires en haut de liste ont un contenu qui a intéressé, amusé ou marqué un
maximum de gens. Statistiquement, il a donc toutes les chances de vous intéresser, vous aussi.
Sous un angle plus politique, cela signifie que les « gros titres » ne sont plus confiés à
une salle de rédaction, si facile à instrumentaliser. Pour acquérir une telle visibilité, fut-elle
éphémère, la page n’a d’autre choix que de plaire à beaucoup de monde. C’est un système très
démocratique.
Pour n’en citer que deux, sont déjà extrêmement visités (plusieurs dizaines de millions
de visiteurs uniques par jour). Du coup, de nombreux blogs, magazines en ligne et autres sites
au contenu très dynamique affichent systématiquement sur leurs pages des liens graphiques
aisément reconnaissables pour faciliter (et donc encourager) le vote de l’internaute auprès des
sites Technoratis et del.icio.us figurent également parmi les pionniers d’un nouvel usage qui
 Page |6

se répand rapidement : le tagging. Il s’agit de permettre aux internautes de qualifier une page
à coup de mots-clés, pour obtenir un système riche de références.2
Une page web est un document électronique contenant du texte, du son, des images
fixes ou animés, ainsi que des liens hypertextes vers d’autres pages web. Ces hyperliens
permettent aux utilisateurs de navigateur, de « Fureter » ou de « Surfer » parmi les
informations, d’une manière résolument séquentielle.

I.2. Internet
I.2.1. Historique
Tout à commencer en 1962 lorsque l’US Air Force demanda à un groupe de chercheurs
de mettre au point un réseau de communication qui pouvait résister à toutes sortes d’attaques,
voire une attaque nucléaire. Le concept général de ce réseau était basé sur une architecture
décentralisée.

Ce n’est qu’au mois de septembre 1969, à l’Université de Californie précisément à Los

Angeles, que l’Internet est né. C’était dans le cadre d’un projet lancé par le ministère de la
défense américain, le DoD (Department of Defense), nommé ARPANET (Advanced
Research Projets Agency Network). L’objectif principal de ce projet était de mettre en place
un réseau efficace, capable de continuer à fonctionner même si certains éléments du réseau
tombaient en panne.

En septembre 1969, le premier ordinateur fut connecté au réseau d’expérimentation

avec une autre machine située à l’Université de Stanford. C’est à cet instant là que les
premiers « messages » furent échangés entre ces deux ordinateurs. Après un temps, deux
autres ordinateurs, situés dans les universités de Santa Barbara (Californie) et de l’Utah
s’ajoutèrent au réseau ARPANET. A la fin de l’année 1969, quatre ordinateurs étaient
interconnectés entre eux et les premières applications réseaux commencèrent à voir le jour.
Ces événements conduisirent à la naissance du réseau Internet que nous connaissons
aujourd’hui.

L’année 1972 fut marquée par deux événements d’une importance cruciale. Tout
d’abord, la présentation du réseau ARPANET pour la toute première fois au grand public.
Cette présentation avait eu lieu lors d’une conférence dédiée à la communication des
ordinateurs. D’autre part, un chercheur appelé Ray Tomlinson mit au point un nouveau mode
de communication ; le courrier électronique, qui permettait l’envoi de messages au sein d’un
réseau. Grâce à ce nouveau mode de communication, on pouvait contacter plusieurs
personnes en utilisant un seul mail.

C’est toujours grâce à la même personne que le protocole TCP (Transmission Control
Protocol) vu le jour. Ce dernier permet d’acheminer des données via un réseau en les
fragmentant en petits paquets.

2
http://fr.wikipedia.org/wiki/Conception_de_site Web, histoire, juillet 2011
 Page |7

En 1993, il décida alors d’attribuer un numéro unique à chaque ordinateur du réseau

appelée adresse IP (Internet Protocol). L’adresse IP permet d’identifier une machine de
manière unique dans un réseau. Et grâce à ce protocole, le concept de transmission fiable fut
adopté.

Notons que beaucoup d’applications Internet virent les jours suite à la naissance de la
pile TCP/IP : messagerie, transfert de fichiers, connexion à des machines distantes afin
d’accéder à des ressources éloignées et même la transmission vocale via le réseau des
ordinateurs. Le but poursuivi était de concevoir des principes de base pour le bon
fonctionnement du réseau qui permettront ensuite de créer tout type d’applications pouvant
être utilisées.

Après plusieurs années, un chercheur conçu un système qui permettait d’attribuer des
noms aux machines d’un réseau. Cette innovation avait réellement facilité l’identification des
différentes machines connectées.

Le TCP/IP fut adopté en 1980 comme standard du ministère de la défense américain. Le

er
1 janvier 1983, la transition vers TCP/IP fut effectuée sur le réseau ARPANET.

Durant cette même année, le réseau ARPANET fut scindé en deux parties, l’une
réservée aux sites militaires appelé MILNET et l’autre regroupant les machines dédiées à la
recherche qui hérita le nom d’ARPANET.

Néanmoins, durant les années 70, le gouvernement américain développait d’autres

réseaux en dehors des réseaux précités tels que celui de la NASA et dans le domaine
académique et industriel sous l’égide de la NSF (National Science Foundation). La NSF était
une fondation de l’état américain qui accordait des fonds pour les projets de recherche
importante.

Vers les années 1986, la NSF décida d’adopter TCP/IP pour son réseau, nommé
NFSNET. Grâce au moyen financier mis en œuvre, ce réseau eut un grand succès.

En moins de 10 ans, les différents liens qui constituaient le réseau furent multipliés à
une grande vitesse et le nombre de réseaux connectés ne cessait d’augmenter. C’est pourquoi
l’ARPANET fut démantelé vers les années 1990, et ses utilisateurs émigrèrent vers NFSNET.
L’Internet d’aujourd’hui était né.

Dès lors, il y a eu l’accroissement des opérateurs offrant des services Internet appelés
communément « Fournisseurs d’Accès Internet » (FAI) ou encore « Internet Service
Provider » (ISP).

Aujourd’hui, Internet est un réseau qui regroupe en son sein plusieurs universités,
organismes de recherche, administrations, entreprises, etc.
 Page |8

I.2.2. Chronogramme de la naissance d’internet

 1964 : Projet ARPANET : Le début du projet pour créer le premier réseau de

communication distribué : L’avantage de cette technologie est qu’elle est
décentralisée. Le système n’est pas dépendant d’un ordinateur principal pour
coordonner les communications. Si un, deux, même plusieurs, ordinateurs tombent en
panne, sont surchargés ou ne sont pas disponible, le système peut contourner ces
problème sans aucune difficulté. Ceci est parfait pour les besoins militaires qui
créèrent le réseau.
 1969 : Mise en opération du projet ARPANET qui utilise un protocole de
communication appelé NCP (Network Control Protocol). C’est la première fois que
des ordinateurs communiquent entre eux malgré de longues distances. Le tout
composait un réseau d’ordinateur super puissant pour la période. Le réseau survivait
même aux ravages d’une guerre atomique puisque chaque site est connecté
physiquement à quatre autres. La communication et la coordination des forces armées
survivantes à une attaque nucléaire sont assurées. Pour des raisons de sécurité
nationale, l’armée refuse aux scientifiques l’accès au réseau militaire et l’utilisation du
protocole de communication entre les sites.
 1973 : Les scientifiques prennent leur revanche en développant leur propre réseau à
travers les universités et en utilisant un protocole de communication amélioré nommé
TCP/IP (Transfert Control Protocol/Internet Protocol). Le protocole IP s’assure que
chaque ordinateur relié au réseau a une adresse unique et que chacun soit capable de
communication avec les autres. Ce protocole sur plusieurs plates-formes pour
permettre une communication entre eux. L’accès est devenu avec le temps
international. Les fondations pour l’Internet d’aujourd’hui sont placées. La recherche a
permis d’augmenter le potentiel de l’Internet avec plusieurs autres services. Parmi ces
services, il y a le courrier électronique. Il permet d’envoyer des messages, des
emails, à d’autres personnes qui ont eux aussi une adresse de courrier électronique. Il
y a aussi gopher qui permet d’afficher de l’information pour le rendre disponible à
tous. C’est en quelque sorte l’ancêtre du World Wide Web. Il y a aussi le service FTP
(File Transfert Protocol), pour permettre le transfert de fichiers à travers l’Internet. Il y
a plusieurs autres services qui seront décrit dans cette section du site.
 1989 : Tim Berner-Lee conçoit la base de ce qui allait devenir le World Wide Web.
 1995 : C’est cette années que le terme « INTERNET » est entré dans le vocabulaire de
la plupart du monde. C’est surtout à causes d’un "nouveau" service : World Wide Web
(WWW ou W3). Plusieurs personnes confondent encore aujourd’hui le terme WWW
avec l’Internet.3

I.2.3. Les réseaux internes et externes à internet

A. Intranet
C’est un réseau informatique interne à une entreprise. L’intranet est en fait un réseau
identique à Internet de par sa structure et les moyens d’y accéder, mais réduit à l’usage des
employés d’une même entreprise. L’intérêt d’un tel réseau réside dans la capacité qu’il
possède à transmettre les données, mais aussi et surtout dans sa possibilité de faire transiter
des informations confidentielles ou à destination des seuls employés de l’entreprise. Ainsi,
tout employé peut communiquer des noter de service, lire des manuel en ligne consulter des
catalogues ou suivre les projets en cours.
3
http://fr.wikipedia.org/wiki/Conception_de_site Web, histoire, juillet 2011
 Page |9

B. Extranet
C’est l’ancien terme pour décrire ce qu’on appelle aujourd’hui transactions
commerciales d’entreprise à entreprise, business-to-business ou B2B en anglais. La valeur des
transactions commerciales est estimée atteindre des milliards de dollars.

I.2.4. Les applications utilisées par Internet

a. Courrier électronique ou courriel

C’est le premier service qui a été disponible sur l’Internet. Les premiers utilisateurs
avaient déjà besoin de communiquer entre eux.

b. FTP (File Transfert Protocol)

Après s’être mis en contact, les premiers voulaient ensuite être capables d’échanger les
documents et des programmes. FTP permet de se connecter à un serveur à distance pour
déposer ou prendre de fichier. Il est encore très utilisé aujourd’hui pour déposer des payes
web.

c. Les newsgroups

Le courriel permet de partager de l’information avec des personnes dont on connaît

l’adresse de courrier électronique. Les newsgroups permettent de contacter d’autres personnes
qui partagent les mêmes intérêts. Il y a en ce moment environ 35000 groupes d’intérêts sur
différents sujets. Vous trouverez certainement un groupe qui vous intéressera. Cela pourrait
devenir une véritable mine d’or d’expérience dans le domaine. Qui sait ? Vous pourriez
devenir assez bon pour fournir de l’information à d’autres ! Vous pouvez chercher sur le
World Wide Web sous le terme "newsgroups" pour avoir une liste.

d. Le World Wide Web

Ce qui a rendu l’internet si populaire depuis 1995. Plusieurs mélangent encore les
termes web et Internet. En fait, le web est un système hypertexte public fonctionnant sur
Internet. Le web permet de consulter, avec navigateur, des groupes, des pages accessibles sur
des sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages web entre
elles.

e. Internet relay chat (IRC)

L’un des points faibles du courriel et des « newsgroups » est que vous ne savez pas
quand, ou même si, quelqu’un va vous répondre. L’IRC permet de « chatter » ou
« clavarder » (Clavier + Bavarder = Clavarder). Il suffit d’avoir un logiciel spécialisé que
vous trouverez avec une recherche sur le web avec le terme « IRC ». Le logiciel mirc est
parmi les plus populaires en ce moment. Une fois connecté à un serveur, il faut choisir le sujet
ou la "salle" qui vous intéresse et d’y entrer. Vous verrez ensuite une liste des personnes qui
sont présentement dans cette salle. Vous pourrez communiquer avec le groupe ou à une
personne de la salle.
 P a g e | 10

f. Telnet

Ce service vous permet de vous connecter à distance à un compte que vous avez sur un
serveur. A partir de celui-ci, vous pouvez envoyer des messages, placer des documents et
possiblement les rendre disponibles sur le web.

g. Téléphonie sur Internet

Ce service vous permet d’avoir des conversations par la voix sur l’Internet. C’est
l’équivalent d’interurbains sans payer de frais mais vous payez seulement les coûts
d’abonnement du service d’accès à l’Internet. Ce service ne fait que s’améliorer en qualité. A
titre d’exemple « VIBER ».

h. Vidéo conférence ou téléconférence sur l’Internet

La vidéo conférence est la communication entre les usagers en utilisant de la vidéo et le

son. Avec une petite caméra vidéo et un programme spécialisé, vous pouvez vous connecter à
un serveur qui s’occupe de la communication entre deux ou plusieurs personnes. Le logiciel
plus connu est appelé « SKYPE ».

i. Vidéo ou radio au choix

Plusieurs logiciels vous permettent de voir des « clips vidéo » sur Internet. Plusieurs
s’intègrent à votre fureteur de pages web (Opera, Firefox Mozilla, Google Chrome, Torch…).
Vous pouvez donc déclencher une vidéo à partir d’une page web. Les logiciels les plus
utilisés sont Real Player de real systems. Windows Media Player de Microsoft et QuickTime
d’Appel. Certains vous permettent aussi de vous connecter à des stations de radio qui
transmettent leur programmation sur les ondes et sur l’Internet.
Il est aussi possible de créer ses propres présentations vidéo avec du matériel spécialisé. Il
faut une carte de capture vidéo ainsi qu’un logiciel pour éditer cette vidéo telle qu’Adobe
Premier. Vous pouvez ensuite "digitaliser" la vidéo de votre caméra. Le résultat sera
enregistré dans un format lisible par votre ordinateur. Certains formats peuvent même être
lisibles à travers l’Internet. Il faut demander à votre fournisseur d’accès à Internet s’il est
possible de déposer des vidéos sur compte.

I.3 Les notions sur la programmation web

I.3.1 Web
La world wide web « WWW », littéralement la « toile (d’araignée) mondiale »,
communément appelé le web, et parfois la toile, est un système hypertexte public fonctionnant
sur Internet. Le web permet de consulter, avec un navigateur, des pages accessibles sur des
sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages entre elles.

I.3.2. Les outils de développement

Nous présentons dans ce point certains outils permettant de faire du développement
web. Il s’agit notamment de :
 Serveur web principaux : Apache, internet information Server (IIS) et personal web
Server (PWS).
 P a g e | 11

 Navigateur principaux : internet Explorer, Firefox et Netscape.

 Langages de scripts côte serveur : PHP, Perl, Java, VBScript,…
 Langages de scripts côte serveur : JavaScript, VBScript, PerlScript, Java…
A ceux-ci, on assoie également une application de gestion de base de données. Dans le cadre
de ce cours, nous allons nous attarder sur les langages de Scripts PHP côte de serveur et
JavaScript côte navigateur.

I.3.3. Les composantes d’une application web

Un site est constitué, matériellement, d’un ordinateur connecté à l’internet, et d’un
programme tournant en permanence sur cet ordinateur, le serveur. Le programme serveur est
en attente de requête est transmises à son attention sur le réseau par un programme client.
Quand une requête est reçue, le programme serveur l’analyse afin de déterminer quel est le
document demandé, recherche ce document et le transmet au programme client.

1 Machine Client 5
Machine Serveur

2 6
Serveur web Navigateur

3 4 7

Scripts Base de Scripts

Réseau
Serveur Navigateur Page web
Données

Réseau

4 Utilisateur

Base de
données
Machine X

Figure 1. Les composants d’une application web

Source : BATUBENGA MWAMBA, Note de Programmation en PHP, G3 INFO. URKIM, 2013-2014 inédit, p.7
 P a g e | 12

I.3.4. Les échanges de données dans une application web avec formulaire

Machine Serveur Machine Cliente

SA 1 Scripts
Serveur CA
web Navigateur
Serveur 2
SB Navigateur
web 3 CB

Scripts 4 Page web

Serveur

CD
SC
Utilisateur

Base de
données
Machine X

Figure 2. Les échanges de données dans une application web avec formulaire

Source: BATUBENGA MWAMBA J.D, Op.cit, p8.

I.3.5. Navigation
Un navigateur web est un logiciel conçu pour consulter le web. Il existe de nombreux
navigateurs web, pour toutes sortes de matériels (ordinateur personnel, tablette tactile,
Windows, MacOs, Ios et Android). Les plus utilisés à l’heure actuelle sont, Google Chrome,
Mozilla Firefox, Internet Explorer, Safari et Opera.

I.4. Site web

Un site ou site web (de l’anglais web site, qui se traduit littéralement en français site de
la toile) est un ensemble de pages web hyperlien entre elles et accessibles à une adresse web.
On dit aussi site Internet par métonymie, le web reposant sur l’Internet. Il en existe deux
types, qui sont :

I.4.1. Site web statique

C’est un site réalisé uniquement à l’aide des langages HTML et CSS. Il fonctionne bien
mais leur contenu ne peut pas être mis à jour automatiquement ; il faut que propriétaire du site
(le webmaster) modifie le code source pour y ajouter des nouveautés.

Quant à nous, on peut aussi dire un site web statique c’est un site qui ne se modifie pas,
quand il est déjà en ligne ce fini, il n’y a plus moyen de modifier : les images, les textes et les
autres.

I.4.2. Site web dynamique

Plus complexe, il utilise d’autres langages en plus de HTML et CSS, tels que PHP et
MySQL. Le contenu de ces sites web est dit « dynamique » parce qu’il y a eu l’intervention
 P a g e | 13

des plusieurs langages et un SGBDR. La plupart des sites que nous visitons aujourd’hui, à
titre d’exemple « FACEBOOK, et autres », sont des sites dynamiques.
Quant à nous on peut aussi dire le site dynamique c’est qui peut être modifié en ligne
peu important le temps, la dimension ou la grandeur, elle recevra de modification des images,
ainsi que les pages, les textes.

I.4.3. Les catégories de sites4

En effet, il existe plusieurs catégories des sites web. Cependant, la plupart peut se
regrouper dans cinq catégories différentes :
Les sites "présence" Présentation sommaire de l'activité en un ou deux pages, généralement suivi
par les coordonnées de l'entreprise. Le but de ces sites est d'être présent sur
Internet pour amener l'internaute à prendre directement contact.

Les sites "vitrine"
Les sites "communautaire"
Les sites "catalogue"
Les sites "e-commerce"
Présentation complète des activités de l’entreprise ou de l’individu en plusieurs
pages. Le site vitrine permette de faire entièrement le tour de ce que l’entreprise
ou l’individu propose, ainsi il donne la possibilité d'expliquer, d'illustrer,
d'argumenter, etc. Le but de ces sites est de décrire très précisément l'activité afin
d'apporter un maximum d'information à l'internaute pour que son choix s’y porte
vers.
Véritables plateformes d'échanges, les sites communautaires sont alimentés par
leurs membres et non uniquement par l'éditeur.
Le but de ces sites est d'alimenter un sujet (aussi vaste soit-il) par les réactions des
internautes.
Présentation détaillée de produits ou de services. Véritables catalogues virtuels,
ces sites permettent de présenter des produits ou des services en repoussant les
frontières physiques. Le but de ces sites, outre la présentation des produits et
services, est de pouvoir prospecter d'autres secteurs sans limites réelles.
Extension des sites "catalogue", les sites "e-commerce" permettent
également de présenter les produits ou services, mais en allant jusqu'au
paiement en ligne. Le but de ces sites est d'ouvrir un nouveau canal de
distribution pour les produits : Internet.

Table N°1 : Catégorie des sites

Il est important de trouver la catégorie la plus appropriée pour un site, cela permet de
cibler le but à atteindre et d'organiser la réalisation du projet. Le site peut cependant être à
cheval entre plusieurs catégories.

I.4.4. Les étapes de la création d’un site

En fonction du type de site, du contexte et des moyens disponibles pour le mettre en
œuvre, certaines de ces étapes sont optionnelles voire inutiles. À chacune de ces étapes
correspondent des compétences spécialisées (ergonomie, architecture de l'information,
référencement, rédaction Web, etc.)

4
Www. Eclyptis.com, Les catégories de sites, juillet 2012
 P a g e | 14

1. Projet :
Réflexion sur l'objectif du site, sa cible, sa rentabilité, les moyens financiers à
engager...
Réflexion sur l'autonomie souhaitée et le type de moyens humains pour faire la
mise à jour.
Réflexion sur le contenu : pages, services attendus, principes de navigation
2. Mise en œuvre :
Dépôt d'un nom de domaine.
Choix d'un hébergeur.
Choix et installation d'un Système de gestion de contenu (SPIP, Drupal,
Joomla, Wiki, Wordpress,...) ou d'un éditeur de site Web de type WYSIWYG
(exemples : Adobe Dreamweaver, phpDesigner, Microsoft FrontPage, NVU,
Webself) ou texte (exemple : Bluefish, Emacs, ...).
3. Conception :
Établissement d'une structure de pages HTML ou XHTML.
Définition d'une arborescence
Mise au point d'une charte graphique
Mise au point d'une charte éditoriale.
4. Réalisation :
Création de pages via le Système de gestion de contenu ou l'éditeur. Les pages
peuvent être créées individuellement ou reposer sur un système de gabarits.
Mise en place de la charte graphique grâce aux feuilles de styles CSS.
Éventuels développements dynamiques (formulaire, services, etc.)
5. Suivi :
Recette du site une fois prêt.
Lancement du site : mise en ligne.
Annonce. Faire connaître le site peut se faire par plusieurs leviers : annonce,
publicité, inscription dans des annuaires...
Maintenance (nouveaux contenus, corrections, amélioration continue de la
qualité).

L'accessibilité du site est une donnée à prendre en compte à chaque étape à partir de la
mise au point de la structure des pages. Il en est de même du référencement dont la stratégie
peut être mise en place dès la conception. Des principes du référencement sont également à
prendre en compte lors de la création des gabarits, l'intégration des pages, la rédaction des
contenus, le lancement du site, la maintenance. L'ergonomie intervient également à toutes les
étapes : conception, recette et audits, amélioration continue.5

5
http://fr.wikipedia.org/wiki/Conception_de_site Web, histoire, juillet 2011
 P a g e | 15

I.5. Fonctionnement du web

Le web est un moyen qui nous permet d’échanger les informations entre nous. Ces
informations sont liées entre elles par les liens HyperText. Le web fonctionne de deux
manières dépendant de site web. Comme nous avons dit ci-haut :
 Les sites web statiques
 Les sites web dynamiques.

Dans le cas d’un site web statique, le web fonctionne de la manière suivante :

Lorsque le site est statique, le schéma est très simple. Cela se passe en deux temps, ainsi que
vous le schématise la figure 3 :

1. le client demande au serveur à voir une page web ;

2. le serveur lui répond en lui envoyant la page réclamée.

Figure 3. Fonctionnement du web statique

Source: J e a n - M a r i e D e f r a n c e, PHP/MySQL avec Dreamweaver 8, Ed. EYROLLES, Paris, 2006, p.6

L’image 1 nous montrer comment un internaute demande une information au serveur et

le serveur donne directement la réponse, et les informations sont données sans traitement au
format Html ou navigateur de l’internaute.

Dans le cas d’un site web dynamique ou d’une application web dynamique le web
fonctionne de la manière suivante :

Lorsque le site est dynamique, il y a une étape intermédiaire : la page est générée (figure.4).

1. Le client demande au serveur à voir une page web ;

2. le serveur prépare la page spécialement pour le client ;
3. le serveur lui envoie la page qu'il vient de générer.

La page web est générée à chaque fois qu'un client la réclame. C'est précisément ce qui
rend les sites dynamiques vivants : le contenu d'une même page peut changer d'un instant à
l'autre.
 P a g e | 16

Figure 4. Fonctionnement du web dynamique

Source: J e a n - M a r i e D e f r a n c e, Op.cit, p.11

L’image 2 nous montrer comment un internaute demande une information sur le web.
Le serveur ne donne pas directement ces informations, il doit d’abord transformer les
informations qui sont codées au format PHP ou ASP car le navigateur ne capable de lire les
informations au format ASP.

Voilà pourquoi les informations doivent être transformées en Html pour ensuite donner
la réponse au navigateur de l’internaute.

Merci en quelques lignes ce que les personnes qui nous lisant pouvaient retenir
concernant le fonctionnement du web ou sur le web.

I.6. Présentation du serveur http

Le serveur web s’inscrit dans l’architecture informatique dite client/serveur son rôle est
de « servir » des pages web sur la demande d’un internaute utilisant un logiciel client web
dont la dénomination usuelle est navigateur web. Pour cela, il est en œuvre le protocole
correspondant, http.

Un ordinateur faisant office de serveur web ou exécutant, entre autres processus

serveurs, un processus serveur web, doit être relié par une connexion permanente à Internet,
avec une adresse IP fixe, de sorte que les sites web qu’ils soient disponibles en permanences.

On peut également parler de serveur web pour désigner un serveur de payes HTML ne
fonctionnant que sur un réseau local, sans liaison directe à l’Internet. Mais si l’on veut être
rigoureux, il vaut mieux dans ce cas parler de serveur http.
Les moyennes et grandes entreprises disposent en général de leur propre serveur web,
tandis que les travailleurs indépendants et les particuliers font héberger leurs pages web chez
leur FAI. Une solution intermédiaire est également proposée par les fournisseurs de services
 P a g e | 17

Internet (FSI), notamment à l’intention des PME : l’hébergement d’un ordinateur web
entièrement réservé à l’entreprise.6

I.6.1. Fonctionnement du serveur http

Le principe de la base est une connexion de type client/serveur : un client (navigateur)

se connecte sur un serveur, émet une requête et le serveur répond. La connexion est une
simple ouverture de socket TCP/IP généralement sur port 80, mais on utilise aussi de temps
en temps le port 8080 (pour les connexions sur proxy, par exemple).

Le protocole le plus utilisé pour communiquer avec un serveur web sur l’Internet est le
protocole http (HyperText Transfer Protocol). Il définit les règles de communication entre un
client (navigateur) et un serveur web.

La requête la plus simple du protocole http est le GET suivi d’une URL qui pointe sur
des données (fichier statique, traitement dynamique…). Elle est envoyée par un navigateur
quand nous saisissons directement une URL dans le champ d’adresse du navigateur. Le
serveur http répond en renvoyant les données demandées.

En tapant l’URL d’un site, l’internaute envoie (via le navigateur) une requête au
serveur. Une connexion s’établit entre le client et le serveur sur le port 80 (port par défaut
d’un serveur web). Le navigateur envoie une requête demandant l’affichage d’un document.
La requête contient entre autres la méthode (GET, POST, etc.) qui précise comment
l’information est envoyée. Le serveur répond à la requête en envoyant une réponse http
composée de plusieurs parties, dont : l’état de la réponse, à savoir une ligne de texte qui décrit
le résultat du serveur (code 200 pour accord, 400 pour une erreur due au client, 500 pour
erreur due au serveur), les données à afficher. Une fois la réponse reçue par le client, la
connexion est fermée. Pour afficher une nouvelle page du site, une nouvelle connexion doit
être établie.

I.6.2. Configuration du serveur http

Dans Red Hat Enterprise Linux, le paquetage du serveur HTTP Apache a été mis à jour
à la version 2.0. Si vous souhaitez effectuer manuellement la migration d’un fichier de
configuration existant, reportez-vous au guide de migration à l’adresse suivante :
/usr/share/doc/http-<usr>/migration.html ou guide de référence de Red Hat Enterprise Linux
pour obtenir de plus amples informations.

Si vous avez configuré le serveur HTTP Apache à l’aide de l’outil de configuration

HTTP dans une version précédente de Red Hat Enterprise Linux, puis effectuée une mise à
niveau, il est possible d’utiliser cet outil afin de migrer le fichier de configuration vers le
nouveau format correspondant à la version 2.0. Lancez l’outil de configuration HTTP,
apportez tous les changements nécessaires à la configuration, puis enregistrez-la. Le fichier de
configuration enregistré sera compatible avec la version 2.0.

L’outil de configuration HTTP vous permet de configurer le fichier de configuration

/etc/httpd/conf/httpd.conf pour le serveur HTTP Apache. Il n’utilise pas les anciens fichiers de
configuration srm.conf ou access.conf ; vous pouvez donc laisser vides. Il est possibles à

6
http://fr.wikipedia.org/wiki/cours réseau informatique, janvier 2012-Mars2013
 P a g e | 18

partir de l’interface graphique, de configurer des directives telles que des hôtes virtuels, des
attributs de journalisation ou encore un nombre maximal de connexion.

Seuls les modules livrés avec Red Hat Enterprise Linux peuvent être configurés avec
l’outil de configuration HTTP. Si vous installez des modules supplémentaires, il ne vous sera
pas possible de les configurer à l’aide de cet outil.

Attention, n’éditez pas manuellement le fichier de configuration

/etc/httpd/conf/httpd.conf si vous désirez utiliser cet outil. L’outil de configuration HTTP
génère automatiquement ce fichier une fois que vous avez enregistré vos changements et
quitté le programme. Si vous souhaitez ajouter des modules supplémentaires ou des options
de configuration qui ne sont pas disponible dans l’outil de configuration HTTP. Vous ne
pouvez pas utiliser cet outil. Ci-dessous figurent les étapes principales de la configuration du
serveur HTTP Apache à l’aide de l’outil de configuration.
 Configurez les paramètres de base dans l’onglet principal ;
 Cliquez sur l’onglet Hôtes virtuels, et configurez les paramètres par défaut ;
 Dans l’onglet Hôte virtuel, configurez virtuel par défaut ;
 Si vous souhaitez servir plusieurs URL ou Hôtes virtuels, ajoutez les Hôtes virtuels
supplémentaires ;
 Configurez les paramètres du serveur dans l’onglet serveur ;
 Configurez les paramètres de connexion dans l’onglet réglage des performances ;
 Copiez tous les fichiers nécessaires dans les répertoires document Root et Cgi-bin ;
 Quittez l’application et choisissez d’enregistrer vos paramètres.

I.7. Le modèle OSI et les protocoles

I.7.1. Le modèle OSI

Le modèle OSI (Open System Interconnexion), c'est un modèle d’interconnexion des

systèmes ouverts décrit un ensemble de spécifications pour une architecture réseau permettant
la connexion d'équipements hétérogènes.
Le modèle OSI normalise la manière dont les matériels et logiciels coopèrent pour
assurer la communication réseau, le modèle OSI est organisé en 7 couches successives. Le
modèle OSI est plus connu et plus utilisé pour décrire et expliquer un environnement réseau.

I.7.1.2. L'architecture du modèle OSI

Numéro Nom Fonction

7 APPLICATION Une interface pour l'accès au réseau
6 PRESENTATION Le format des données
5 SESSION La gestion d'une connexion
4 TRANSPORT La gestion des paquets
3 RESEAU La gestion d'adressage
2 LIAISON La gestion des trames
1 PHYSIQUE La gestion des signaux sur le câble

Tableau N° 2 : L’architecture modèle OSI

Source : Dominique Lalot, pdf. Les réseaux informatiques, Ed. EYROLLES, Paris, 2006, p.17
 P a g e | 19

Chaque couche est spécialisée dans une tache bien précise, On dit que chaque couche
propose une fonctionnalité ou un service. A chaque niveau, un traitement est réalisé, et des
informations sont codées ou décodées.

La Couche APPLICATION : joue le rôle d'une interface d'accès des applications au réseau.
La couche APPLICATION concerne les applications réseaux qui tournent sur un poste
(TELNET, FTP,...) et correspond à l'interface de l'utilisateur.

La Couche PRESENTATION : détermine le format pour l'échange des données entre les
ordinateurs du réseau.

La Couche SESSION : assure l'ouverture et la fermeture des sessions (des communications)

entre usagers, définit les règles d'organisation et de synchronisation du dialogue entre les
abonnés.

La Couche TRANSPORT : s'assure que les paquets ont été reçus dans l'ordre, sans erreurs,
sans pertes, ni duplication. Elle gère aussi l'empaquetage et le réassemblage des paquets ainsi
que le contrôle et la correction des erreurs. Utilise notamment comme protocole le UDP et
TCP.

La Couche RESEAU : assure le cheminement ou le routage des données groupées en

paquets à travers le réseau, elle gère le IP et ICMP.

La Couche LIAISON : assure un service de transport des trames sur la ligne et dispose de
moyens de détection et de correction d'erreurs.

La Couche PHYSIQUE : transmet des flux de bits bruts sur le support de communication.
La couche PHYSIQUE est en relation directe avec la carte réseau.

I.7.1.3. Le modèle TCP/IP

TCP/IP représente l'ensemble des règles de communication sur Internet et se base sur la
notion adressage IP, c'est-à-dire le fait de fournir une adresse IP à chaque machine du réseau
afin de pouvoir acheminer des données. La suite TCP/IP permet :
- Le fractionnement des données en paquets;
- L'utilisation d'un système d'adresses (IP);
- L'acheminement des données sur le réseau (routage);
- La détection et la correction des erreurs de transmission.

Afin de pouvoir appliquer le modèle TCP/IP à n'importe quelles machines, logiciels et

matériels, le système de protocoles TCP/IP a été décomposé en plusieurs modules effectuant
chacun une tache précise. De plus, ces modules effectuent ces taches les uns après les autres
dans un ordre précis, on a donc un système stratifié, c'est la raison pour laquelle on parle de
modèle en couche.7

7
Dominique Lalot, pdf. Les réseaux informatiques, Ed. EYROLLES, Paris, 2006, p.17
 P a g e | 20

I.7.1.4. Modèle TCP/IP

Application englobe l’application standard du réseau: gestion des mails avec le
protocole SMTP, l'échange des fichiers avec le FTP...
Transport assure l'acheminement des données et les mécanismes permettant de
connaitre l'état de la transmission.
Internet est chargé de fournir le paquet des donnés, elle définit les datagrammes et
gère la décomposition et recomposition des segments.
Accès réseau spécifie la forme sous laquelle les données doivent être acheminées, quel
que soit le type de réseau utilisé.

Tableau N°3 : Modèle TCP/IP

I.7.1.5. Comparaison OSI - TCP/IP

Les deux modèles étudiés ont un certain nombre de point communs et on établir un
parallèle entre les deux :

Protocoles utilisées Modèle TCP/IP Modèle OSI

Application
Application Présentation
Couche session
TCP/IP Transport Transport
IP/ARP/ICMP/RARP/IGMP Internet Réseau
Liaison de données
Accès réseau Physique

Tableau N°4 : Comparaison OSI - TCP/IP8

I.7.1.6. Description du modèle

Le modèle OSI se décompose en 7 parties appelées couches.

 Ce modèle date des années 1980

 Chaque couche est responsable de l’un des aspects de la communication
 Une couche de niveau N communique avec les couches N+1 et N-1 par le biais d’une
interface
 Une couche inferieur transporte les données vers la couche supérieure sans en connaître la
signification.
 Les couches N de 2 systèmes communiquent à l’aide de protocoles de communication
commun.
 Couches 1 à 3 : couches basses orientées transmission ;
 Couche 4 : couche intermédiaire ;
 Couche 5 à 7 : couche hautes orientées traitement

L’organisation en couches permet d’isoler des fonctions réseaux et de les importer

caractéristiques internes de la couche, au profit de la description des interfaces et des
protocoles.

8
http://fr.wikipedia.org/wiki/réseau informatique, janvier 2012-Mars2013
 P a g e | 21

I.7.1.7. Services rendu par chaque couche

 Niveau 1 : Couche physique

 Elle se charge de l’adaptation du signal au support de transmission, ce qui définit les
caractéristiques électriques, logique et physique de la connexion de la station sur le
réseau (câbles, connecteurs, cartes réseau…).
 Elle gère le type de transmission (synchrone ou asynchrone).
 S’il y a lieu, elle met en œuvre les mécanismes de modulation et démodulation du
signal.
 L’unité d’échange est « BIT »
 Niveau 2 : couche liaison
 Elle définit les règles d’émission et de réception à travers la connexion physique de
systèmes.
 Elle doit transmettre les sans erreurs et détermine la méthode d’accès au support.
 Elle met en œuvre la détection et la correction des erreurs.
 Elle gère les réémission s’il y a lieu.
 Elle établit et contrôle la liaison au niveau logique.
 L’unité d’échange est « TRAME (frame) ».
Ex. Ethernet, HDLC…
 Niveau 3 : couche réseau
 Elle gère l’acheminement des données en assurant le routage (choix du sujet) des
paquets de données.
 Si un nœud est surchargé ou hors-service, les données seront alors routées vers un
autre nœud.
 L’unité d’échange est « PAQUET ».
 La couche réseau assure également la traduction des adresses logiques en physiques.
Ex. X25, IP, ARP, RIP, RARP, etc.
 Niveau 4 : couche transport
 Elle fournit un service de transport de bout en bout transparent pour l’utilisateur
(même à travers plusieurs réseaux).
Ex. Etablissement, Maintien, Rupture, etc.
 Elle assure également les services qui n’ont pas été pris en compte par les couches
inférieures (gestion des erreurs, routage, etc.).
 Elle permet de multiplexer plusieurs flux sur le même support.
 En tant qu’émetteur, elle segmente les messages en paquets numérotés.
 En tant que récepteur, elle constitue les messages en plaçant les paquets dans l’ordre.
 L’unité d’échange est « SEGMENT ».
 Niveau 5 : couche session
 C’est la première couche orienté traitement.
 Elle permet l’ouverture et la fermeture d’une session de travail entre 2 systèmes
distants et assure la synchronisation du dialogue.
 Elle définit le mode de transmission (Half-duplex, Full-duplex).
 Elle définit la liaison entre deux programmes d’application et gère le dialogue.
 Elle gère la chronologie du dialogue afin de mettre en place des procédures de reprise.
 Niveau 6 : couche présentation
 Elle permet de transcrire les données dans un format compréhensible par les deux
systèmes (formatage des données).
 P a g e | 22


Elle assure la mise en forme de l’information pour qu’elle soit accessible à
l’utilisateur.
 Elle effectue les fonctions de codage, compression, cryptage et décryptage, etc.
 Niveau 7 : couche application
 Elle fournit des services utilisateurs sur le réseau par les applications installées.
 Les principaux services sont :
o Transfert de fichiers (FTP)
o Message ou courrier électronique (pop, smtp)
o Lecture de pages Internet (http)
o Accès à distance (Telnet)

I.7.1.8. Tableau récapitulatif

COUCHE ROLE
7. APPLICATION Fourniture de services réseaux aux applications
6. PRESENTATION Formatage, conversion, (compression et cryptage) des données
5. SESSION Etablissement, contrôle, terminaison d’une connexion entre deux systèmes
4. TRANSPORT * Découpage de message en paquets (et inversement : réassemblage des
paquets en message dans le bon ordre)
* Gestion de plusieurs connexions sur la même voie de communication
(multiplexage) ou éclatement d’une connexion sur plusieurs voies
3. RESEAU Acheminement des paquets de données (routage, contrôle des flux)
2. LIAISON Organisation des données en trames et transmission
1. PHYSIQUE Envoi et réception des séquences de bits

Tableau N°5 : Tableau récapitulatif 9

I.7.2. Les protocoles

Protocole : Description formelle de règles et de conventions régissant la manière dont les
stations d’un réseau échangent des informations.
 Le protocole est un élément déterminant. Il est couramment lié aux couches 3 et 4 du
modèle OSI (transport et réseau). Il segmente les données en « paquets » qu’il place
dans le champ « données » des trames créées par les couches physiques. Il établit les
relations entre adresses logiques et physiques (MAC) de tous les destinataires, choisit
l’itinéraire le plus approprié pour assurer leur acheminement (« routage ») et corrige
les erreurs de transmission.
 Un protocole est une règle standard qui permet la communication entre de processus
(s’exécutant éventuellement sur différentes machines). C'est-à-dire un ensemble des
règles et des procédures à respecter pour émettre et recevoir des données sur un
réseau.

9
http://fr.wikipedia.org/wiki/réseau informatique, janvier 2012-Mars2013
 P a g e | 23

1.7.2.1. Qui créent les protocoles ?

Ce sont eux qui créent les normes qui permettent la compatibilité des matériels
informatiques. Citons en quelques-uns :
 AFNOR: Association Française pour la Normalisation
 ECMA: European Computer Manufacturer Association (une trentaine de fabricants de
matériel informatique)
 ANSI: American National Standard Institute (Equivalent américain de l’AFNOR)
 IEEE: Institute of Electrical and Electronics Engineers (Participe à l’ANSI, il est à
l’origine des normes des RL)
 EIA: Electronic Industries Association (Participe à l’ANSI, il est à l’origine des RS
232,…)
 ISO: International Standard Organisation (Chapeaute les organisations nationales)
 UIT: Union Internationale des communications
 CCITT: Chapeaute l’ensemble

1.7.2.2. Les principaux protocoles réseaux

Un protocole réseau est un langage que vont utiliser toutes les machines d’un réseau
pour communiquer entre elles. Il se présente sous la forme d’un logiciel dans le système
d’exploitation. Ils sont parfois composés d’une multitude de protocoles afin de pouvoir
acheminer l’information (ex: TCP/IP avec IP, TCP, UDP, ICMP, …).
a) Modèle de référence OSI

Le modèle OSI est un énorme définie par l’ISO (International Organisation for
Standardization) qui permet l'interconnexion réseau des systèmes hétérogènes. Il est composé
des 7 couches suivantes:
1. Application Assure l'interface avec les applications.
2. Présentation Définit le formatage des données (représentation, compression, cryptage,
…).
3. Session Définit les canaux de communication sur les machines du réseau
4. Transport Chargée du transport des données et de la gestion des erreurs.
5. Réseau Permet de gérer les adresses et le routage des données.
6. Liaison Données Définit l'interface avec la carte réseau.
7. Physique Codage des données en signaux numériques.

b) Types de protocoles

Un protocole peut s’intégrer à plusieurs niveaux dans le modèle OSI:

- Protocoles d’application: Echange de données entre application (ex: FTP, IMAP,…)
- Protocoles de transport: Assure la fiabilité des données transportées (ex: TCP,…)
- Protocoles réseau: Détermine le chemin d’accès à la destination (ex: IP, …)
 P a g e | 24

c) protocoles couramment utilises

Le protocole TCP/IP

TCP/IP (Transmission Control Protocol / Internet Protocol) est un ensemble de

protocoles, développés au début des années 70 par le département américain de la défense afin
de permettre l’interconnexion en réseau local de machines hétérogènes.
En fait, TCP/IP n’est pas qu’un protocole réseau-transport, c’est toute une architecture
(souvent opposée à OSI) qui couvre des couches les plus basses aux couches les plus hautes,
supporte et inclut des applications typiquement TCP/IP (messagerie Mail, transfert de fichier
FTP, gestion de terminal virtuel Telnet, partage de fichiers NFS, administration distante des
matériels SNMP, etc.) livrées ou non selon les implémentations.
TCP/IP n’est pas un protocole propriétaire (il est indépendant de tout constructeur ou
éditeur), ses spécifications sont publiques et ses sources logicielles sont quasi gratuites; il est
devenu un véritable standard de fait vers lequel tous les constructeurs et éditeurs se tournent.
Il est reconnu comme le meilleur moyen actuel d’interconnecter des machines hétérogènes en
LAN comme en WAN. On notera que c’est également le protocole du réseau mondial
Internet, dont le nombre d’abonnés a suivi une progression spectaculaire ces dernières années.
TCP/IP n’a pas que des avantages. Sa configuration n’est pas automatique : le
technicien est obligé de définir, manuellement et individuellement sur chaque machine, une
adresse IP (donc logique/réseau et non physique/MAC) qui devra impérativement être unique
sur tout le réseau (LAN ou WAN), ainsi que divers paramètres techniques complémentaires,
ce qui est laborieux dès que le réseau a quelque importance. On notera que la capacité de
codage des adresses IP est actuellement limitée à 32 bits (forme: xxx.xxx.xxx.xxx), ce qui
peut se révéler une limite insupportable pour les très grands réseaux comme Internet. Enfin,
avec TCP/IP, le fait de passer d’Ethernet 10 Mb/s à 100 Mb/s ne multiplie pas par dix les
performances (à cause de TCP).
Microsoft a intégré, dans son Windows NT Server, un service qui rend le paramétrage
dynamique et complètement automatique ; il s’agit de Microsoft DHCP (Dynamic Host
Configuration Protocol). Si un poste client (station cliente) est retiré du réseau (ce qui est
souvent le cas avec les portables), son adresse IP est automatiquement libérée pour une
nouvelle machine qui se connecterait ; le service DHCP attribuera au poste nomade une
nouvelle adresse lors d’une reconnexion ultérieure.
DHCP n’est pas la propriété de Microsoft, c’est une spécification issue de l’IETF
(Internet Task Force) qui l’a définie pour faciliter l’administration de TCP/IP sur un WAN.
Sans DHCP, il faut connaître l’adresse réseau d’un nœud pour s’y connecter. De plus,
Microsoft propose WINS (Windows internet Name Services), qui permet sous TCP/IP
d’attribuer des noms NetBIOS plutôt que des adresses logiques (en fait, il établit la
correspondance entre les deux), ce qui est beaucoup moins abstrait. Pour pouvoir
communiquer sur un réseau, chaque ordinateur doit avoir une adresse IP unique.
Dans l’adressage IP par classes, trois classes d’adresses sont utilisées pour affecter des
adresses IP aux ordinateurs. Le choix de la classe d’adresse IP se fait en fonction de la taille et
du type de réseau. Une adresse IP se présente sous la forme de quatre champs numériques
 P a g e | 25

Champ1.Champ2.Champ3.Champ4 (Ex : 195.217.13.121), chaque champ représentant un

octet pouvant donc prendre une valeur allant de 0 à 255.
Une adresse IP se décompose aussi en deux parties, l’identificateur réseau et
l’identificateur d’hôte. Tous les ordinateurs ayant le même identificateur de réseau peuvent se
voir et discuter directement.
Le tableau ci-dessous permet de voir la correspondance entre ces différentes
décompositions de l’adresse IP en fonction de la classe.
La suite de protocoles TCP/IP fournit des utilitaires de base permettant à un
ordinateur exécutant TCP/IP (Windows 2000, Unix, Mac OS X,…) de tester ou d’utiliser le
réseau.
Ces utilitaires sont divisés en trois catégories :
 Utilitaires de diagnostic
 Arp : Cet utilitaire affiche et modifie le cache ARP.
 Hostname : Affiche le nom d’hôte de votre ordinateur.
 Ipconfig : Affiche et met à jour la configuration TCP/IP.
 Nbtstat : Affiche le cache NetBIOS.
 Netstat : Affiche les sessions TCP/IP en cours.
 Ping : Permet la vérification des connexions IP par le biais du protocole ICMP.
 Tracer : Affiche l’itinéraire des paquets pour atteindre leur destination.

 Utilitaires de connexion

 Ftp : Utilitaire de transfert de fichiers basé sur TCP.

 Telnet : Utilitaire de configuration à distance en mode console.
 FTP : Utilitaire de transfert de fichiers basé sur UDP.
 Logiciels serveur
 Service d’impression TCP/IP : Permet aux clients TCP/IP d’utiliser une
imprimante connectée à Windows 2000.
 Service Internet (IIS) : Logiciels serveurs Web, News, Mail, FTP

Protocole IPX/SPX

IPX/SPX a été proposé en 1983 par la société Novell pour NetWare, son système
d’exploitation de réseau (NOS) ; il est dérivé du protocole XNS (Xerox Network System),
conçu à la base pour les réseaux de minis de la société Xerox. IPX (Internet working Packet
eXchange) occupe la couche OSI n°3, tandis que SPX (Sequence Packet lnterchange) occupe
la couche n°4.
IPX/SPX est d’une mise en œuvre assez simple (il se configure et se règle tout seul). Il sait ce
qu’est une adresse logique ou réseau (il est dit « routable »), ce qui facilite l’interconnexion
inter réseau. Il est plus performant en fonctionnement local LAN que TCP/IP et occupe très
peu de place en mémoire, notamment sur les stations clientes utilisant MS-DOS.
 P a g e | 26

Il est essentiellement utilisé par les produits Net Ware et compatibles qui ne proposent pas
NetBEUI.
Protocole NetBEUI

L’histoire de NetBEUI commence par NetBIOS (Network Basic Input Output System) ;
ce dernier, qui fournit des services à divers niveaux OSI, a été conçu originellement par IBM
comme interface de communication entre adaptateurs réseau et NOS.NetBEUI (NetBIOS
Extended User Interface) met en œuvre ses services de niveau réseau-transport (couches n°3
et n°4) et descend aussi vers les couches basses. Les services de niveau Session de NetBIOS
constituent un standard de fait comme points d’entrée des applications réseau et sont soit
directement utilisés soit émulés.
NetBEUI est d’une mise en œuvre simple (il se configure et se règle tout seul), il occupe
peu de place en mémoire, son contrôle de débit et ses paramètres d’ajustage sont puissants, sa
détection d’erreur est excellente.
Cependant, il présente quelques inconvénients. Il n’a aucune idée de ce qu’est une
adresse logique ou réseau (notion de routage absente de la couche n°3) et fait se reconnaître
les nœuds du réseau en faisant appel à des services de couche 5 (Session) -il ne s’agit alors
plus d’adresses réseau, mais de noms réseau -, ce qui ne facilite pas l’interconnexion inter
réseau. Il a été conçu et optimisé pour les réseaux purement locaux (LAN) et il est mal adapté
aux réseaux WAN.
Enfin, il est essentiellement supporté par IBM et Microsoft qui le proposent
traditionnellement par défaut sur leurs NOS pour réseaux locaux

Protocole AppleTalk

AppleTalk est un protocole réseau spécifique et intrinsèque aux machines Apple.

Conçu originellement pour fonctionner exclusivement sur le réseau physique LocalTalk
d’Apple (réseau propriétaire intégré à toute machine Macintosh, comme AppleTalk, très
simple à mettre en œuvre mais limité à 230 Kb/s et à 32 nœuds physiques), il a été adapté sur
les bases physiques Ethernet (avec pour nom EtherTalk).
En ajoutant le protocole AppleTalk à un serveur PC-intel fonctionnant sur une base
physique Ethernet, on va lui permettre de parler le même protocole que les Macintosh ;
cependant, pour que des partages de ressources et d’applications soient possibles et pour
qu’on reconnaisse les noms de fichiers Macintosh, il faut que le NOS du serveur dispose de
services spécifiques à l’environnement d’Apple (l’ajout d’AppleTalk seul ne suffit pas). On
notera qu’il est aussi possible d’ajouter TCP/IP, récemment fourni en standard par Apple, aux
machines Macintosh.
 P a g e | 27

d) Autres protocoles de communication

Protocole ATM

Protocole Grande Vitesse Asynchrone qui permet de faciliter le transfert de données

de type multimédia. Il permet de faire passer simultanément plusieurs types de
données tout en maximisant la bande passante.

Protocole IrDA
Le Protocole IrDA permet une communication sans fil entre 2 périphériques
infrarouges. Il est intégré en standard à Windows 2000.
Protocoles d’accès distant

 Protocole SLIP : Protocole de connexion distante par modem. Il transmet les mots de
passe en texte clair et ne supporte que TCP/IP. Windows 2000 supporte le protocole
SLIP en client mais ne peut pas servir de serveur.
 Protocole PPP : Protocole de connexion distante par modem. Il permet de crypter les
mots de passe et de transporter différents protocoles. Windows 2000 supporte
intégralement ce protocole.

Protocoles VPN

Permet de transiter par Internet pour se connecter à un serveur. Les connexions se font
de façon sécurisée, même sur la zone Internet.
 Protocole PPTP : Sécurise les transferts par un en capsulage des données. Il supporte
une multitude de protocoles réseau.
 Protocole L2TP : Protocole de tunneling. Il utilise le protocole IPSec pour encrypter
les données. Il supporte une multitude de protocoles réseau.
 Protocole IPSec : Garantit la sécurité des transmissions de données sur le réseau en
ajoutant une couche de cryptage au cours des communications TCP/IP. Requiert des
ressources processeur supplémentaires (excepté dans le cas d’une implémentation
matérielle dans la carte réseau) au niveau du client et du serveur.10

1.7. 3. Architecture et fonctionnement

DQDB utilise un double bus unidirectionnel. Sur chaque bus, une tête de bus (HoB,
Head of Bus) génère une trame toutes les 125 μs contenant n slots (cellules de 53 octets). Le
nombre n de slots dépend du débit du réseau. Les têtes de bus sont généralement situées sur
une même station.
Le premier bit de chaque slot (bit Busy) indique si le slot est libre ou occupé. Les stations
peuvent lire ou écrire des données au vol dans une cellule mais c’est la fin de bus qui a la
fonction d’absorption des trames. Chaque station écrit dans le bus qui correspond à la
direction de la station avec laquelle elles veulent communiquer, sauf en cas de broadcast où
les données sont émises sur les deux bus. Chaque station qui a des données à émettre les
dépose dans un slot vide de manière statistique (données asynchrones) ou pré-affectée (pré-
arbitrage pour les données isochrone).
10
Guillaume Desgéorge, Les réseaux hauts débits, Ed. EYROLLES, Paris, 1999, p.18
 P a g e | 28

 Transfert isochrone

L’allocation des cellules est gérée par la tête de bus. Un lien virtuel (VC, Virtual
Connection) est établi à l’aide d’un protocole de signalisation (Q.931 du RNIS bande étroite)
entre les stations participant à l’échange. La tête de bus alloue une ou plusieurs cellules PA
(Pre-Arbitrated) selon le débit requis par la station demandant l’établissement du lien, chaque
cellule garantissant un débit de 3 Mbps. DQDB peut même multiplexer plusieurs connexion
dans une même cellule, chaque octet garantissant un débit de 64 Kbps. Cette connexion est
entièrement déterminée par un identifiant de circuit (VCI, Virtual Circuit Identifier) et une
position dans une cellule.

 Transfert asynchrone

Le trafic asynchrone est géré par chaque station. En mode connecté, c’est la station qui
fait la demande de connexion qui attribue le VCI. Une plage de VCI disponible est attribuée à
chaque station à cet effet. En mode non connecté, les bits du VCI sont tous positionnés à 1.
Une station désirant émettre fait une requête de réservation sur le bus allant dans la
direction opposé à la station cible. Pour situer la station cible, elle lui adresse un message sur
les deux bus, et en fonction du bus d’où arrive la réponse, elle sait de quel côté elle est. Si une
station fait une requête sur le bus B pour obtenir N slots sur le bus A, la station suivante (et
donc celle qui la précède dans l’autre sens) laisse passer N slots vide sur le bus A avant de
déposer ses données dans le slot vide N+1. Ce système n’est pas équitable car les stations en
amont émettent leur requête de réservation avant les autres. Le mécanisme «Bandwidth
Balancing Mechanism » tend à corriger ce défaut en obligeant les stations ayant émis N
segments à laisser passer une cellule vide.

1.7.4. Architecture des protocoles

La couche MAC comprend un ensemble de fonctions spécifiques à chaque type de
transfert : MCF pour un service asynchrone sans connexion (transfert de données entre
ordinateurs), COF pour les transferts asynchrones en mode connecté (applications
conversationnelles) et enfin ICF pour le transfert isochrone (débit constant pour la voix et la
vidéo). L’accès au support partagé est géré par deux entités, celle qui s’occupe du trafic
isochrone (PAF) et celle qui s’occupe du trafic asynchrone (QAF).

LL : Logocal Link Control Service isochrone

LLC

MCF COF ICF

Mac Convergence Connection Oriented Isochronous Convergence
Function Function Function
MAC
DQDB
QAF PAF
Queue Arbitrated Function Pre-Arbitrated Function

Physique CF : Common Function

DQDB

PLCF : Physical Layer Convergence Function

Figure 5. Architecture des protocoles

Source : Guillaume Desgéorge, Op.cit., p.19

 P a g e | 29

I.8. Application web

Une application web (aussi appelée web app en anglais) est une application
manipulable grâce à un navigateur web. De la même manière que les sites web, une
application web est généralement placée sur un serveur et se manipule en actionnant des
widgets à l’aide d’un navigateur web, via un réseau information (Internet, intranet, réseau
local, etc.).

I.9. Les choix du langage de programmation et outils

I.9.1. Choix du langage de programmation web

1.0. XHTML, CSS
A1. Le XHTML est une évolution du HTML, initiales de « HyperText Markup Language »,
c’est-à-dire langage de marquage hypertexte.
Cela signifie que la mise en place d’une page web (titres, paragraphes, images...) utilisera des
caractères pour marquer d’une certaine façon les différentes parties du texte. Parmi ces
caractères de marquage, certains correspondront à des liens vers d’autres pages web : ce sont
des liens hypertexte.
Le « X » de XHTML vient de XML, soit « Extensible Markup Language », langage plus
complexe et plus strict que le HTML. C’est lui qui a inspiré la transition du HTML vers la
forme plus rigoureuse qu’est le XHTML. Quant à CSS, cela signifie « Cascading Style Sheets
», ce qui se traduit en français par feuilles de style en cascade. La feuille de style fournit la
mise en forme des éléments de la page, qui auront été écrits en XHTML. Elle s’applique à une
ou plusieurs pages du site. Le terme « en cascade » indique que la mise en forme d’une page
peut faire appel à plusieurs feuilles de style. Les différentes propriétés affectées à un même
élément s’ajoutent alors pour lui donner sa mise en forme finale. Lorsque deux propriétés se
contredisent, des règles de priorité s’appliquent et c’est généralement le dernier style défini
qui est pris en compte. Le XHTML et CSS donne une bonne image dans une image, et
l'écriture de la page web, l’essentiel est de séparer le contenu (codé en XHTML) de la mise
en forme (feuilles de style CSS). Cette méthode présente plusieurs avantages, notamment la
clarté du code et la possibilité de définir des styles communs à plusieurs pages. Voici
quelques exemples de mise en forme à l’aide de balises qui donnent du sens au texte. Ils
utilisent le principe des balises, que nous n’avons pas encore détaillé (c’est l’objet du chapitre
qui suit). Cependant c’est une première approche intéressante, avant de se jeter dans le grand
bain du XHTML et des CSS ! Intérêt des feuilles de style l’utilisation des feuilles de style n’a
pas pour seul but de répondre aux normes et de faire plaisir au W3C (consortium qui définit
les règles de codage des pages web : http://www.w3.org). Un bénéfice réel et concret découle
de cette façon de travailler.
La dissociation du contenu (XHTML) et de la mise en forme (feuille de style) permet :
de retrouver et corriger plus facilement le texte des pages ;

d’utiliser une feuille de style externe, commune aux différentes pages d’un site. Il en
résulte une meilleure unité graphique entre ces pages et aussi des mises à jour plus simples
par la suite. Une modification dans la feuille de style externe se répercute d’un seul coup
sur toutes les pages du site. Si nous pouvons parle un peu de langage HTML cela veut
simplement dire (HyperText Markup Language) est au Web ce que la portée musicale est
à l’orchestre. L’un ne pourrait exister sans l’autre. Les musiciens, quelle que soit leur
 P a g e | 30

nationalité, ne pourraient interpréter l’œuvre du compositeur sans cette notation

commune, pour jouer de « concert », sans fausses notes et en rythme.
Tout le monde a déjà entendu parler de HTML. Tous les internautes ont déjà vu cette
extension dans la barre d’adresses de leur navigateur. Pourtant, très peu savent ce qui se
cache réellement derrière ces quatre lettres mystérieuses qui leur permettent d’accéder à
leurs sites et services favoris. En tant que concepteur, designer ou intégrateur web, on
croit le maîtriser puis l’on découvre de nouvelles applications chaque jour, de nouvelles
subtilités et astuces qui en font un sujet passionnant, voire monstrueux lorsqu’il s’agit de
contenter tous les navigateurs sachant l’interpréter avec plus ou moins de virtuosité.
XHTML c’est l’ancienne version aujourd’hui nous parlerons HTML la nouvelle version,
il y a aucune différence. Si nous pouvons bien expliquer HTML 5 ou XHTML 5 ? Vous
avez la possibilité d’écrire un document grâce à la forme HTML et la forme XHTML. En
théorie, les navigateurs embarquent deux moteurs d’analyse syntaxique : un qui sera
chargé du HTML, et l’autre du XML. Ils sont invoqués d’après la détection du type
MIME.
Forme HTML
Cela suppose que le document soit servi avec le type MIME text/html.
Dans la forme HTML, vous êtes autorisé à :
 omettre certaines balises fermantes (voire ouvrantes) ;
 utiliser minuscules et majuscules pour les noms d’éléments et d’attributs, car ils ne
sont pas sensibles à la casse ;
 ne pas entourer vos attributs de guillemets (s’ils ne contiennent pas d’espaces) ;
 utiliser malgré tout un caractère slash final pour la fermeture des éléments auto
fermants (tels que <img/>) pour ne pas perdre les habitudes de la forme XML plus
rigoureuse et « bien formée ».Dans le fond, aucune erreur n’est fatale.11
La syntaxe est plus permissive que celle de XHTML. En revanche, contrairement à ses
prédécesseurs, HTML5 définit des règles détaillées d’analyse pour les moteurs de parsing
afin d’obtenir le même résultat en cas de syntaxe incorrecte dans un document.
C’est par ailleurs cette tolérance qui a permis aux pages HTML4 non valides de proliférer sur
le Web, étant donné que le navigateur ne produit pas de message d’erreur particulier et les
affiche au mieux en «corrigeant» globalement la page si une erreur de balisage est rencontrée.
Forme XHTML

Si vous avez déjà utilisé XHTML par le passé et que sa syntaxe plus rigoureuse vous est
familière, ne vous inquiétez pas : dans la forme XHTML, vous pouvez continuer à utiliser
ces acquis (voir ci-après).
Il s’agit alors d’un balisage polyglotte, les documents XHTML devenant « compatibles

11
R o d o l p h e R i m e l é, HTML5 Une référence pour le développeur web, (2ème Ed.) 2011. P.20
20
Ra p h a ë l Goetter, CSS avancées. Vers HTML5 et CSS3. N°12826, 2011, P.400.
21
Jeremy Keith, HTML5 et CSS for web designers, editions EyrolleS61, bld Saint-Germain75240 Paris Cedex 05.P.7
22
Francis Drallard, premier par en CSS et XHTML (2ème édition) 2007, P.45
23
M.NEBRA, reussir son site web avec XHTML et CSS, (2ème édition) 2008, P.306
 P a g e | 31

HTML » et produisant le même arbre DOM après analyse XML ou HTML.

A2. CSS (Cascading Style Sheet)

Inventé en 1993 par l’équipe de W3C dans le but de faciliter la mise page des sites
Web. Son rôle est de décorer le site Web. Webmaster utilise le CSS pour réaliser la mise en
page des sites web.
Par exemple : Définir la police, la taille du texte, la couleur du texte, la couleur de fond, etc.
Ces deux langages permettent de séparer le fond de la forme. Le fond est l’affaire du langage
de balisage HTML et le langage CSS s’occupe de la forme.
Nous allons utiliser ces deux langages pour la mise en œuvre de notre application. Ils nous ont
permis de réaliser seulement des sites web statiques.

1.1. PHP
1.1.1. Historique
Le langage PHP a été créé par Rasmus Lerdorf en 1994, pour ses besoins personnels.
Comme dans beaucoup d’autres cas, la mise à disposition du langage sur l’Internet est à
l’origine de son développement par d’autres utilisateurs qui y ont vu un outil propre à
satisfaire leurs besoins. Après plusieurs évolutions importantes, PHP en est à sa version 5.2,
celle que nous utilisons. La version 6 est annoncée à l’heure où ces lignes sont écrites. PHP –
le plus souvent associé à MySQL – est à l’heure actuelle le plus répandu des langages de
programmations pour sites web.

1.1.2. Qu’est-ce que PHP

PHP est un langage de programmation, très proche syntaxiquement du langage C,
destiné à être intégré dans des pages HTML. Contrairement à d’autres langages, PHP est
principalement dédié à la production de pages HTML générées dynamiquement.
Voici un premier exemple.

PHP (officiellement : HyperText Preprocessor, et au départ personal home page) est un

langage des scripts généraliste, spécialement conçu pour le développement d’applications web
(pages dynamiques). Comme particularités :

 Il s’intègre facilement au HTML.12

 Il s’exécute sur le serveur et permet d’accéder facilement aux nombreuses bases de
données (dBase, Ingres, MySQL, Oracle,…).
 C’est un produit ‘’open source ‘’(le code est accessible à tout développement) et
gratuit.1314

12
Philippe Rigaux DUNOD, Pratique de MySQL et PHP Conception et réalisation de sites web dynamiques, 4ème Ed,
Universités de Paris-Dauphine, 2000, p.20
13
Jean Engels, PHP5 cours et exercices, (2ème Ed.), Eyrolles, Paris, 2009, p508
 P a g e | 32

Le traitement côté serveur apporte comme intérêts :

 Réduction du temps de téléchargement puisque le client ne reçoit qu’une simple
page HTML (=>diminution du trafic réseau) ;
 Absence de problème de compatibilité des navigateurs ;
 Offrir au client des données qui sont dans une base ;
 Et le code ne peut être vu par le client.
Combine au système d’exploitation linux, au serveur Apache et à la base de données MySQL
(eux-mêmes gratuits), il permet de créer de site web à des coûts très réduits. Ce qui distingue
PHP des langages de script comme le JavaScript est que le code est exécuté sur le serveur.
Avec un script similaire sur votre serveur, le client ne reçoit que le résultat du script, sans
aucun moyen d’avoir accès au code qui a produit ce résultat.
PHP est principalement conçu pour servir de langage de script côté serveur, ce qui fait qu’il
est capable de réaliser tout ce qu’un script CGI quelque peut faire, comme collecter des
données de formulaire, générer du contenu dynamique, ou gérer des cookies. Mais PHP peut
en faire bien plus :
 Langage de programmation en ligne de commande ? vous pouvez écrire des scripts
PHP et l’exécuter en ligne de commande, sans l’aide du serveur web et d’un
navigateur. Il vous suffit de disposer de l’exécutable PHP.
 Ecrire des applications clientes graphiques. Bien qu’il ne soit pas le meilleur
langage pour écrire des applications clientes graphiques.
Pour l’édition des codes en PHP, on utilise soit des éditeurs simples comme Note pad ou bloc
note, ou encore des outils spécialisés comme PHPEdit, PHP Eclipse, puis l’enregistrement se
fait avec l’extension PHP, PHP3, PHP4…

1.1.3. Quelques avantages PHP

 Les performances ;
 L’adaptabilité ;
 Des interfaces vers différents systèmes de bases de données ;
 Des bibliothèques intégrées pour la plupart des tâches web ;
 Un faible coût ;
 La simplicité d’utilisation et d’apprentissage ;
 La disponibilité de son code source ;
 La disponibilité du support et de la documentation.15
 Rapidité de documentation demandée

15
Laurent Guédron, la bible micro applicationPHP5, (1er édition), Eyrolles, de Paris, 2005, p.113

24 Philippe Rigaux, Pratique de MySQL et PHP, (4ème édition), Eyrolles, de Paris-Dauphine, 2001, p.18
 P a g e | 33

I.9.2.OUTILS
1. Choix du SGBD

Pour la mise en place de la base de données, nous optons pour MySQL, MySQL est le
Système de Gestion de Base de Données Relationnelle (SGBDR) Open Source le plus répandu
dans le monde. Il est développé par MySQL AB, une entreprise suédoise.
La première version de MySQL est apparue en 1995. Cette première version est créée
pour un usage personnel à partir de MySQL.
En 2000, la version 3.23 est passée en licence GPL (General Public License).
En 2003, la version 4, apparue en 2001, est déclarée stable. Cette version apporte de
nombreuses nouvelles fonctionnalités et améliorations : opérateur UNION, DELETE
multitables, nouvelles options pour la gestion des droits, amélioration des performances,
sous requêtes (4.1), etc.
En 2005, la version 5, apparue en 2003, est déclarée stable. Cette version majeure
introduit de nombreuses fonctionnalités manquantes dans MySQL : programmes
stockés, triggers, vues.
Fin 2007, la version 5.1 est distribuée en Release Candidate et devrait sortir en version
finale début 2008.16 MySQL est disponible selon deux licences différentes :

La licence GPL
Une licence commerciale.

Si vous utilisez MySQL dans un produit libre, vous pouvez utiliser MySQL librement
(version MySQL Community Server).
Si vous utilisez MySQL dans un produit commercial, ou si vous souhaitez avoir un support
pour le logiciel, vous devez acquérir une licence commerciale (version MySQL Enterprise).
MySQL est un Système de Gestion de Bases de Données Relationnelles (SGBDR) robuste et
rapide. Une base de données permet de manipuler les informations, de les enregistres, de les
trier, de les lires et d’y effectuer des recherches. Le serveur MySQL se charge de contrôle
l’accès aux données pour permettre aux multiples utilisateurs d’accéder aux ressources de
manière simultanée.
Il utilise SQL (Structured Query Language), le langage standard des requêtes de bases
de données. MySQL est disponible depuis 1996, mais son développement remonte à 1979.17 Il
s’agit de la base de données open-source la plus employée au monde.

2. Quelques avantages MYSQL

Les principaux concurrents de MySQL sont Postgre SQL, Microsoft SQL Server et
Oracle. MySQL possède sur eux plusieurs avantages :
 des performances élevées ;
 un coût réduit ;
 une simplicité de configuration et d’apprentissage ;
 robuste
16
Olivier Heurtel, PHP et MySQL, (4ème édition), éd. Eyrolles, Paris, 2006, p.1
17
Olivier Heurtel, PHP et MySQL Maîtrisez le développement d'un site Web dynamique et interactif, (1ème édition) éd.
Eyrolles, Paris, Ed.1995. P.1
 P a g e | 34

 rapidité
 l’accessibilité de son code source ;
 la disponibilité du support

1. Notepad++ : est un éditeur de texte générique codé en C++, qui permet de colorer les
codes sources de langages tels que C, C++, Java, C#, XML, HTML, PHP, JavaScript, ASP,
Visual Basic, VBScript, SQL, CSS, Pascal, Perl, Python, MATLAB, etc.
Cet éditeur permet de réaliser la mise en relief de la syntaxe, et ainsi que la mise en forme de
cette dernière. De plus, Notepad++ possède une fonction multi-vue qui permet à l'utilisateur
d'éditer différents documents à la fois même d'éditer, le même document en synchronisant 2
vues différentes.

Figure 6. Notepad++
Source: http://:www.google.com /éditeur Notepad++, 2016

2. Adobe Photoshop : Photoshop est un logiciel de retouche, de traitement et de dessin

assisté par ordinateur édité par Adobe. Il est principalement utilisé pour le traitement
de photographies numériques, mais sert également à la création d’images ex nihilo.
Photoshop est un logiciel travaillant sur images matricielles (également appelées bitmap, à ne
pas confondre avec le format d’enregistrement Windows) car les images sont constituées
d’une grille de points appelés pixels. L’intérêt de ces images est de reproduire des graduations
subtiles de couleurs.
Reconnu aussi par les infographistes professionnels à travers sa puissante galerie de filtres et
d’outils graphiques performants, son utilisation est maintenant enseignée dans les plus
grandes écoles, instituts des Beaux-arts et il est utilisé par une grande majorité des studios et
agences de créations. Adobe développe ce logiciel seulement pour Microsoft Windows et
Mac OS X. Mais la version CS4 peut également être exécutée sur Linux avec Wine.
[wikipedia.org]

Adobe Photoshop CS6

Figure 7. Adobe Photoshop

Source : http://:www.google.net /Adobe Photoshop, 2016
 P a g e | 35

3. Wampserver : Le package WAMP est un environnement de développement sous

Windows, très utile pour développer un site web dynamique en local ou en ligne. Au sein de
cette application, nous retrouvons Apache, MySQL et PHP (ces éléments composent d'ailleurs
l'acronyme WAMP). Si vous êtes sous Mac il faut plutôt utiliser MAMP et si vous êtes sous
Linux il faut utiliser LAMP.

Figure 8. Wampserver

Source: http: //: www.google.com /Wampserver, 2016

Les éléments qui composent WAMP sont les suivants:

- Apache: serveur HTTP très populaire ;

- MySQL: système de gestion de base de données ;
- PHP: langage de développement populaire sur les sites web. Ce langage permet
d'interpréter le code des pages PHP pour ensuite envoyer les données à Apache qui les
envois ensuite au client (c'est-à-dire le plus souvent: un navigateur web) ;
- PhpMyAdmin: système de gestion pour MySQL. C'est une interface pour gérer plus
facilement MySQL sans nécessairement avoir de nombreuses connaissances. Ça permet
de mieux voir et éditer les informations liées à la base de données, plutôt que d'utiliser des
lignes de commandes pour faire la même chose.

Page d’accueil de Wamp

Pour consulter l'accueil de WAMP il faut lancer un navigateur web (Firefox, Internet
Explorer, Google Chrome ...) puis vous écrivez : http://localhost/ ou http://127.0.0.1/ dans la
barre d'adresse. Cela ouvre en principe une fenêtre qui ressemble à ceci:

Figure 9. Page d’accueil de Wamp

Source: http: //: www.google.com /WampServer, 2016

 P a g e | 36

I.10. Architecture technique et fonctionnement

I.10.1. Architecture technique

Dans le déploiement de notre application, nous avons utilisé PHP conjointement avec
 Apache comme serveur http
 MySQL comme SGBDR
 Windows comme système d’exploitation pour le cas de notre application.

Il s’agit d’une architecture à trois niveaux, chacune réalise une tâche bien précise.
 Le navigateur constitue l’interface utilisateur, il a comme rôle de permettre à l’utilisateur
d’interagir avec l’application.
 PHP est le serveur d’application. Il fait la jonction entre l’utilisateur et la base de données.
Pour avoir accès aux données de la base, PHP doit d’abord s’authentifier afin d’établir une
connexion avec MySQL.
 MySQL est le serveur de données. C’est l’outil qui stocke nos données de manière
organisée et cela nous permet de les retrouver facilement. On communique avec MySQL
grâce au langage SQL qui est le langage commun à tous les SGBD.
Cette plate-forme peut ensuite exposer l’existant de l’entreprise et les nouveaux
développements au travers de différents types d’interfaces :
 web (HTML, WML, etc.) ;
 services web reposant sur Soap ;
 applications graphiques ;
 client riche ;
 Ajax ;
 ligne de commande (CLI) ;
 Et même Microsoft Office (Word, Excel), Adobe PDF, Macromedia Flash (via Ming),
etc.18

18
Eric DASEP, Php5 avance, Eyrolles(4ème ed), Paris, 2007, p.11
 P a g e | 37

Figure 10. Architecture technique

Source: Eric DASEP, Op.cit, p.12

I.10.2. Fonctionnement PHP

L’utilisateur qui appelle une page PHP ignore tout du code sous-jacent. Effectivement,
ce code est interprété par le serveur avant d’être traduit dans le format de sortie (généralement
en HTML, mais aussi en XML, fichier PDF, etc.). Pour ce faire, le serveur web lance
l’interpréteur PHP exécutant ainsi le script PHP.
Les commandes figurant dans la page sont interprétées et le résultat prend la forme d’un
document publié à la place du code source. À l’issue de cette phase de traduction, la page
modifiée est envoyée au client pour y être affichée par le navigateur.19

Figure 11 : Fonctionnement PHP

Source: Eric DASEP, Op.cit., p.13

Le serveur web reconnaît à l’extension des fichiers, différente de celle des pages HTML
simples, si le document appelé par le client comporte du code PHP. L’extension utilisée par
les pages PHP peut être définie individuellement dans le fichier de configuration du serveur
web. Les extensions courantes pour les pages PHP sont .PHP et .php5 ; nous utiliserons
l’extension .PHP afin d’assurer une compatibilité avec toutes les versions.

19
Eric DASPET, Op.cit., 13
 P a g e | 38

Chapitre II : Analyse préalable

II.1. Définition et But

L’analyse de proximité est l’ensemble d’investigation mener dans un système identifier
dans le temps et dans l’espace permettant de comprendre le fonctionnement, à dégager un
diagnostic ou relever certaine direction de prendre une décision appropriée et au préalable.
Cette analyse préalable autrement appeler étude d’opportunité aura pour but de préparer
la décision relative à la nécessité d’informatisé ou pas le traitement de l’information d’’une
application ou d’une base de données dans la direction de l’Institut Madrandele de
l’éducation.

II.2. Présentation de l’Institut Madrandele

1. Fonctionnement :
L’Institut Madrandele Fonctionne à double vacation :
 Avant-midi : de 7h30’ à 12h15’ pour les classes de 4ème, 5ème et 6ème.
 Après-midi : de 12h30’ à 17h20’ ; pour les classes de 1ère, 2ème et 3ème
 Inscription

Conditions:
 Gratuite dans toutes les classes ; (1ere, 2eme, 3e, 4e, 5e et 6ème, Avec les options ci –
après :
 Secondaire générale,
 Commerciale,
 Pédagogie générale
 Scientifique / biologie – chimie
 Présence physique du candidat,
 Dossier complet : Ex : certificat, bulletin 6ème etc.
 Avoir l’Age normal pour la classe : Ex : en 1ère 11à 12ans.
 Etre d’une bonne moralité,
 Remplir une fiche d’inscription,
 P a g e | 39

 Exemple d’une fiche d’inscription:

PROVINCE : KINSHASA – EST

ANTENNE : KINGABWA- LIMETE
RESEAU : CATHOLIQUE
ETABLISSEMENT : INSTITUT MADRANDELE
PHOTO SECTION : SECONDAIRE GEBERAL
OPTION :……………………………
CLASSE : PREMIERE ANNEE
ANNEE SCOLAIRE : 20 15 – 2016
FICHE D’IDENTIFICATION OU D’INSCRIPTION D’ELEVE
DATE D’IDENTIFICATION
0 3 1 0 1 5
IDENTIFICATION DE L’ELEVE
1. NOM : ………………………….SEXE….. 13. TUTEUR :…………………………………….
2. POST NOM :………………………………….. 14. PROFESSION :………………………………
3. PRENOM :……………………………………. 15. ADRESSE :……………………………...............
.... 16. N° DE TELEPHONE :……………………………
4. LIEU DE NAISSANCE :…………………… 17. PROVINCE D’ORIGINE :………………………
5. DATE DE NAISSANCE :…………………… 18. DISTRICT D’ORIGINE :………………………
6. NATIONALITE :………………………..…... 19. TERRITOIRE D’ORIGINE :……………………
7. NOM DU PERE :…………………….……… 20. SECTEUR D’ORIGINE :……………………….
8. PROFESSION :……………………………… 21. VILLAGE D’ORIGINE :…………………………
9. NOM DE LA MERE :……………………… 22. LANGUES PARLEES :…………………………
10. PROFESSION :…………………………… 23. ADRESSE DE L’ELEVE :………
11. ADRESSE DES PARENTS :…………… 24. N° DE TELEPHONE :………………………….
12. N° DE TELEPHONE :…………………… 25. Pièces remises : dossiers de l’élève
LE PARENT 26. Date de retrait des dossiers : (abandons/quitté)
Fait à Kinshasa, le...……/……./20……
Pour la vérification de la fiche

Le chef d’Etablissement

Tableau N°6 : Fiche d’inscription

 Test d’admission :

- Frais d’organisation ?
- Port de l’uniforme obligatoire
- L’examen d’admission est composé par la coordination Diocésaine et
urbaine des écoles conventionnées catholique de Kinshasa.
 P a g e | 40

2. Discipline générale :

- Du point de vue Ponctualité

Les élèves doivent être à l’école 15 minutes avant le début des cours pour la vacation
avant midi, les cours commencent à 7h30’ c’est – à dire l’enfant doit arriver à l’école à
7h00’ et se terminent à 12h15’, à 15 minutes du début des cours, au premier signal, les
élèves s’alignent devant leurs classes respectives ou aux endroits indiqués. Au second
signal les élèves entrent en classe en silence sous la conduite du professeur. Mais nous
avons constaté beaucoup de cas de retard durant ce premier mois

- Du point de vue régularité

Les élèves sont tenus d’être tous les jours et à temps conformément au calendrier
scolaire en vigueur. Toute absence doit être justifiée par les parents de l’élève dans le
cahier de communication à la direction de discipline avant d‘être autorisé d’assister aux
cours. Cette année il y a certains élèves surtout les anciens ont commencés les cours en
retard de deux semaines, et vous les avez gardé sous prétexte que vous n’étiez pas prêt.

D’autres par contre s’absentent comme ils veulent. Dorénavant si un élève s’absente
deux semaines durant, sans justification des parents de l’élève à la direction de
discipline, l’élève est renvoyé de l’école après le conseil de la discipline. (Cfr les
articles 9 et 10 du règlement scolaire)

- De l’ordre :
L’élèves doit se munir de tous les objets classiques nécessaires pour les cours du jour,
ainsi que les documents exigés à l’école tel que : journal de classe, cahier de
communication, règlement et le recueil du texte d’Anglais et français etc. ces
documents doivent accompagner l’élève tous les jours, en cas d’absence d’un
document l’élèves doit retourner à la maison pour en chercher.

- De la tenue : l’élève doit être toujours propre et en uniforme, le port de

l’uniforme avec insigne de l’école est obligatoire tous les jours à l’école et aux
manifestations officielles.

 Pour les filles une blouse blanche marinière, sans manches avec insigne et une jupe
ample bleu foncé et sans fentes, dépassant les genoux de 15 cm.

 Pour les garçons une chemise blanche à manche courte avec insigne, pantalon simple
bleu foncé, et pantoufle bleue.
- tenue de gymnastique, chaque élève doit avoir une culotte rouge et un polo
blanc, le jour de la gymnastique tout élève sans tenue est retourné à la maison, la
plupart d’élèves négligent le cours d’éducation physique alors que c’est un cours
comme les autres.
 P a g e | 41

3. Administration;

- Correspondance, L’école doit être en communication avec les parents a travers le

cahier de communication, les parents ne peuvent pas nous écrire sur une feuille
ordinaire (papier) vous devez nous écrire dans le cahier de communication.
- En cas d’invitation des parents ou de paiement des frais scolaires ; seul le parent
ou responsable muni du cahier de communication a l’obligation de payer les frais
scolaires à l’école ou de répondre à l’invitation, sans le cahier de communication
on ne vous reçoit pas
Pour cette année, nous avons connu une Augmentation de l’effectif du personnel, Ayant
toujours fait fonctionner les classes parallèles ensemble, nous avons bénéficié d’un
bâtiment de trois salles de classe, ce qui nous permet de les éclater et d’ajouter une
classe de 1ère année.

4. STRUCTURE ET POPULATION SCOLAIRE : 2015 - 2016

ANNEE Nbre de classes OPTIONS EFFECTIFS

D’ELEVES
ELEVES
Commerciale Pédagogique Biochimie HANDIC

ORGAN AUTO G F T G F T G F T G F T

1ère 03 03 - - - - - - - - - 77 105 182

2ème 02 02 - - - - - - - - - 52 59 111

3ème 03 03 09 27 36 10 33 43 19 19 38 38 79 117

4ème 03 03 08 21 29 10 25 35 16 24 40 34 70 104

5ème 03 03 06 09 15 11 11 22 14 09 23 31 29 60 01

6ème 03 03 01 17 18 10 13 23 10 12 22 21 42 63

TOTAL 17 17 24 74 98 41 82 123 59 64 123 253 384 637 01

Tableau. N° 7. Structure et population scolaire

 P a g e | 42

3. Historique

L’Institut Madrandele est une ancienne école Conventionnée Catholique, agréée sous le
numéro : N° DEPS/CCE/001/0073/84/du 12 Novembre 1984 et était implantée à Kingabwa
Madrandele. Il a fonctionné jusqu’en 2001 dans l’un des bâtiments abritant actuellement le
collège Saint François des sales, dont la direction est confiée à la communauté Salésienne de
Don Bosco, par le feu Archevêque de Kinshasa, son Eminence le cardinal Fréderic Ets ou
NZABI BAMUNGWABI

De 2001 à 2004 : il n’avait pas fonctionné par manque de bâtiment. C’est au début de
l’année Scolaire 2004 – 2005 que le feu Coordinateur Sous – Régional, Monsieur Christophe
NGUMBALA – TA – NZABI a réussi à sauver cet Etablissement scolaire en lui trouvant un
bâtiment de trois locaux dans la concession abritant les écoles Primaires : E.P.2 et E.P.3
Kingabwa, sise au numéro : 57 de l’avenue WAMBA à Kingabwa/ Mbamu, commune de
Limete, son actuelle implantation.
Ainsi, l’Institut Madrandele a repris ses activités comme une école récemment créée,
avec des classes en progression, sous la supervision successive de :
Monsieur BITONGO YAMFU, alors Directeur de l’E.P.II Kingabwa de 2004 – 2006 ;
Monsieur Henry MUFU NZUMU MUSA, Conseiller d’Enseignement, de 2006 – 2008,
et en fin ;
C’est le 09 Janvier 2009 que Monsieur l’Abbé Michel Gérard Coordinateur Diocésain
et Urbain des Ecoles Conventionnées Catholiques de Kinshasa, nommera Madame
Agnès BEYA MUSUMBU N° Secope : 26 70 80, comme premier Préfet Chef
d’Etablissement, qui fût le Préfet des Etudes du collège Saint François de Sales depuis
sa création jusqu’en octobre 2008. Et en janvier 2014 la coordinatrice adjoindra
monsieur Louis MASOKI OBWENE comme Directeur des Etudes.
Cette année l’Institut Madrandele vient de présenter sa quatrième promotion au jury
Catholique et à l’Examen d’Etat, avec les trois options suivantes :
 Commerciale et Administrative,
 Pédagogie générale,
 Scientifique Chimie Biologie.

Pour mieux reconstruire son historique, la récupération de ses archives au collège Saint
François de Sales s’avère indispensable.

4. Objectifs et But

a) Objectifs
D’élever, instruire, former les enfants, les jeunes gens.

b) But
L’insertion de la personne humaine dans la société, Connaissance des usages du monde.20

20
Jeanpy. MBIKAYI, Note de cours de Méthode d’analyse Informatique, URKIM, 2013, P.9.
 P a g e | 43

5. Situation géographique

L’Institut- Madrandele est situé dans la ville province de Kinshasa, Commune de

Limete, district de Mont Amba, Quartier: Kingabwa / Mbamu, sise avenue Wamba n° 57.
Il est borné au nord par l’avenue MAFUTA KIZOLA (Koweït), au sud par le
complexe Scolaire Paysannat ou (maison d’habitation), à l’Est par l’avenue Wamba et à
l’Ouest par l’avenue Diata.

6. Organigramme de l’institut Madrandele

PREFET CHEF D’ETABLISSEMENT

SECRETAIRE

AGENTS DE BUREAU

DIRECTEUR DES ETUDES CONSEILLER D’OSP DIRECTEUR DE DISCIPLINE

ENSEIGNANTS

ELEVES SURVEILLANTE OUVRIERS

Figure 12. Organigramme de l’institut Madrandele

Source : secrétaire de l’Institution Madrandele

7. Organigramme du service concerné

Préfet

Secrétaire
Directeur étude

Elève
Figure 13.Organigramme du service concerné
 P a g e | 44

II.3. Critique de l’existant

Dans ce point départ de l’étude s’avère être la critique de l’existant pourquoi, parce
qu’elle permet la mise en évidence les principaux problèmes liés soit à l’insuffisance, des
moyens actuels, soit à l’insuffisance des objectifs portant sur l’organisation actuelle qui vient
d’être présentée.
Elle permet de présenter les causes qui sont à la base de son disfonctionnement et de
son alourdissement. Elle doit être bien menée, car, c’est d’elle qu’on arrivera à implanter un
système plus performant et d’une fiabilité élevée.

II.3.1. Critique du schéma de circulation des informations

Le schéma de circulation des informations tel que nous avons trouvé ne réponds pas
exactement au besoin de l’Institut Madrandele. Les inscriptions ou le teste d’admission
transitent bien d’une manière correcte. Seulement, nous trouvons que c’est fatiguant pour les
parents d’effectuer plusieurs tours pour les inscriptions de leurs enfants au sein de
l’institution, notre regard avait porté sur cet problème, nous avons pu comprendre que
l’institution n’est fonctionné pas tellement bien, pourquoi, parce que leur façon de faire de
chose n’est pas rapide.

II.3.2. Critique de documents

Les éléments que nous avons examinés de l’Institut Madrandele ne sont :
 Les documents utilisent pour l’inscription et du test d’admission ne sont pas bien
gérer ou protéger correctement,
 Les documents émis par service de l’inscription et du test d’admission, ne les
permettent pas de bien faire leur travail.
 Leur fiche de l’inscription et du test d’admission ne sont pas propre, mal structure,
pas vraiment convainquant de voir.

II.3.3. Critique de moyen matériel

Nous déplorons ici la vétusté des tables et des locaux ainsi que la manque
d’équipements informatiques adéquat ; la destruction des archives par les parasites. Et nous
proposons de renouveler les matériels et nous remarquons qu’il y a beaucoup des matériels
manquant qui doivent être ajouté.

II. 4. Proposition des solutions

Après une étude de l’organisation en place, traitée dans les chapitres précédents, il nous
est possible maintenant d’apporter des solutions aux besoins des utilisateurs ou à
l’amélioration des failles rencontrées ; lesquelles solutions s’avèrent être probables aux
différentes tâches en décortiquant les avantages et les inconvénients.
 P a g e | 45

II.4.1. Solution manuelle

La solution manuelle qui doit entrer apportée dans un tel cas se rapporte au
renforcement des capacités des personnes compétentes pour mieux le travail voulu à son sein.
Partant de ce qui précède, nous aimerions émettre certaines propositions et suggestions :
conscientiser le préfet et le secrétaire sur la cricialité de leur rôle dans la gestion d’inscription
et du test d’admission.

 Avantages

Ne pas dépendre du courant

Coût de la mise en œuvre et maintenance est moins élevé
La formation du personnel n’est pas exigée

 Désavantages

Cette solution présente un certain nombre d’inconvénients tels que : Temps de réponse
dans le traitement des informations élevé ; Contrôle et suivie des opérations difficilement
réalisables ; Résultats non fiables suite aux négligences de l’homme : négligence,
omission, fatigue ;
Possibilité de fraude non négligeable suite au manque de procédure de sécurisation des
informations efficaces ;
Encombrement dû à l’abondance de la paperasse ;
Perte des informations importante suite à l’usure du support papier et parasites.

II.4.2. Solution informatique

Cette solution prend en compte de l’automatisation des taches en mettant en place une
application web pour la gestion d’inscription et du test d’admission, offrant des conditions de
travail descentes et une convivialité appréciable, est celle que nous souhaitons le plus à cause
de ses performances.

 Avantages

Gain en temps de réponse ;

Fiabilité des résultats ;
Accès facile aux informations voulues,
Prise en compte de nouveaux besoins des utilisateurs ;
Bonne et meilleure gestion d’inscription et du test d’admission quant à leur collecte, leur
traitement, leur stockage et leur diffusion ;
Bonne conservation des données et bonne sécurité et la restitution d’accès et mot de passe ;
Meilleure qualité des services et performance garantie ;
 P a g e | 46

 Désavantages

Coût élevé d’acquisition et de maintenance des matériels informatiques ;

La nécessité d’une nouvelle formation sur l’utilisation nécessite du logiciel ou le
recrutement d’un personnel qualifié ;
Pertes des données en cas d’infiltration des virus ; de la coupure électrique brusque;
Possède aussi ses inconvénients dont la perte d’emploi pour le personnel et les coûts
d’achat, d’exploitation et d’entretien de matériels élevés.

II.5. Choix de la meilleure solution

Les estimations de rentabilité d’inscription et du test d’admission toujours difficiles. Par

là nous nous sommes pour leur orienter à une bonne décision ou les choix par rapport
l’inscription et du test d’admission, nous avons présentes des solutions ci-après :
 Les travaux indispensables dont la réalisation n’est pas possibles avec le système
actuel ;
 L’amélioration du pilotage de l’organisation, élément très large et couvrant toutes les
améliorations que l’on peut attendre au niveau des systèmes opérant et décision ; la
diminution de coût de travaux déjà réalisés, élément plus au moins discutable et pas
favorable pour notre cas.
 Malgré le poids du coût de la solution informatique, ses avantages et la prise en compte
des deux premiers éléments présentés ci-haut font d’elle la solution privilégiée.
 Rajoutons que l’intérêt d’un système d’information évalué vient au contraire de ce qu’il
tient compte des interdépendances entre les différents sous-systèmes.
 Raison pour laquelle, nous proposerons une application web pour un rendement plus
efficace mais aussi pour une sécurité des informations et pour permettre de protéger les
formulaires d’inscription et du test d’admission pourvoir bien gérer.
 P a g e | 47

Chapitre III : Planification et évaluation du projet

III.1. Planification du projet

Le déroulement de notre projet s’appuie sur le découpage structurel en étape et en
phase permettant de constituer des ensembles distincts de tâches à accomplir. La façon
d’enchaines ces étages et ces phases peut réaliser de différent façon. Représentés par plusieurs
modèles de Développement plus ou moins structurés qui sont issus, certains de l’usage et
d’autres plus complexe, des travaux de groupe spécialisés.
Se basant sur une mixité de différentes méthodes, voici pour notre projet les phases
(activités) à accomplir tout en retenant les ressources disponibles et les objectifs à atteindre :
a) Phase I : Etude préliminaire ;
b) Phase II : Analyse des besoins ;
c) Phase III : Analyse du système ;
d) Phase IV : Conception du système ;
e) Phase V : Programmation et test ;
f) Phase VI : Hébergement ;
g) Phase VII : Implémentation ;
h) Phase VIII : Maintenance.

III.1.1. Qu’est-ce qu’un projet

Un projet est l’ensemble d’actions à entreprendre afin de répondre à un besoin défini
dans les délais fixés, modélisant des ressources humaines et matérielles et possédant un coût.

Quantité

Cout Délai
s Figure 14. Description du projet

III.1.2 Notions sur le projet informatique

Selon ISO 10006, un projet est un processus unique, qui consiste en un ensemble
d’activité coordonnées et maitrisées ayant un objectif conforme à des exigences spécifiques
telles que des contraintes de délais, de couts et de ressources21.
Selon AFNOR, un projet est un ensemble d’activités cordonnées et maitrisées
comportant des dates de début et de fins, dans le but d’atteindre un objectif conforme à des
spécifiques.

21 http://www.google.net/ projet informatique (janvier2016)

 P a g e | 48

III.1.3. Problématique de la gestion d’un projet

Gérer un projet informatique est une activité à haut risque. Les chiffres montrent qu’il
est difficile de mener, un projet informatique s’il n’a pas été bien planifié :
 33% des projets se révèlent un échec impliquant des projets abandonnées en cours de
développement, des produit réussis moins utilisable et inutiles ;
 50% des projets se révèlent inadaptés aux tâches pour lesquelles ils sont prévus. Les
causes état multiples : mauvaises expression des besoins qui évoluent, interview mal
menés, analyse incomplètes,…
 75% des projets sont en dépassement : le projet coûte cher et dure trop longtemps.
Ceci est dû aux méconnaissances techniques, l’évolution des besoins et spécification ;
 99% des projets présentent des dysfonctionnements (erreur de conception, erreurs
bloquantes, imprévu du produit informatique,…) plus au moins grave mais essentiel
des erreurs étant corrigé après l’exécution du projet donné l’actuel état des techniques.

Tous ces dysfonctionnements ci-haut cités ont des répercussions importantes dans le
système d’information car le projet à un impact organisationnel fort et donc une probabilité de
causer une perturbation dans l’organisation laquelle perturbation se percutera sur sa
production.
Le projet informatique, dans l’hypothèse où il aboutit à une solution convenable,
introduit un changement dans l’organisation qui permet ainsi de passer d’une situation stable
à une autre stable. La transition entre ces deux états est par définition un facteur d’instabilité.
Ainsi, la gestion des projets se définit comme un ensemble des moyens coordonnés dans une
démarche globale et adaptée ou simplement un objectif à atteindre en prenant en compte les
contraintes et en faisant face aux imprévus.
La gestion du projet informatique regroupe en fait trois formes de gestion distinctes
mais parfaitement coordonnées dans leurs actions. Il s’agit des gérer le temps afin de respecter
d’une part les délais impartis et d’autre part le phasage des opérations.
La gestion du temps permet de poser des jalons afin de vérifier la coordination, des
tâches et de contrôler l’avancement du projet. Eventuellement, elle permet le réajustement
nécessaire afin de rester en phase avec les autres éléments du projet.
La gestion de la production permet de contrôler l’avancement des travaux destinés à
atteindre l’objectif assigné. Elle suppose le contrôle du cycle de développement et le
découpage du projet et permet de progresser vers une convergence qui n’est qu’un
aboutissement à une solution cohérente de toutes les parties du projet.
 P a g e | 49

La gestion des ressources permet quant à elle de répartir les ressources disponibles tout
au long du cycle de développement du projet.

III.1.4. Contrainte d’un projet

A ce sujet il convient de signaler que toute réalisation est variée à des difficultés qui
peuvent être de nature humaine, matérielle ou naturelle.

III.1.4.1. Contrainte positive

Les conditions favorisant le succès d’un projet sont nombreuses. Elles constituent ainsi
dit des conditions critiques pour l’achèvement du dit projet et devront par ailleurs être prise en
considération car sans elle le projet capoterait.
Ces conditions sont :
 La volonté directoire qui s’inscrit comme un des principaux éléments de la réussite d’un
projet ;
 La publication de la politique d’information ;
 Une politique d’information simple, précise et applicable ;
 Un personnel sensible au projet et possédant une haute valeur morale ;
 L’expression, le contrôle et le respect des clauses d’information dans les différents
contrats ;
 Une certaine éthique des acteurs et respect des contraintes légales.

III.1.4.2. Contrainte négative

L’insuffisance des ressources peut hypothéquer tous les efforts fournis. Outre
l’insuffisance des ressources, mauvais pilotage dans la gestion des ressources (moyen), du
temps (délais) et de la production (objectif) peut à son tour compromettre les efforts et en
conséquence la gestion de la qualité.
Notons que l’accès aux informations sensibles reste relativement restreint. Certains
détenteurs d’informations peuvent donc se sentir dans une situation dominante par rapport à
leurs collègues non expérimentés, peuvent pratiquer la rétention d’information pour
pérenniser les pratiques maffieuses. On peut donc craindre des attitudes hostiles de la part de
certaines personnes.

III.1.5. Favorisant les succès

Les conditions favorisant le succès d’un projet sont nombreuses. Elles constituent ainsi
dit des conditions critiques pour l’achèvement dudit projet et devront par ailleurs être prise en
considération car sans elle le projet capoterait. Ces conditions sont :
 P a g e | 50

 La volonté directoire qui s’inscrit comme un des principaux éléments de la réussite d’un
projet ;
 La publication de la politique d’information ;
 Une politique d’information simple, précise et applicable ;
 Un personnel sensible au projet et possédant une haute valeur morale ;
 L’expression, le contrôle et le respect des clauses d’information dans les différents
contrats ;
 Une certaine éthique des acteurs et respect des contraintes légales.

III.1.6. Favorisant l’échec d’un projet

L’insuffisance des ressources peut hypothéquer tous les efforts fournis. Outre
l’insuffisance des ressources, mauvais pilotage dans la gestion des ressources (moyen), du
temps (délais) et de la production (objectif) peut à son tour compromettre les efforts et en
conséquence la gestion de la qualité.
Notons que l’accès aux informations sensibles reste relativement restreint. Certains
détenteurs d’informations peuvent donc se sentir dans une situation dominante par rapport à
leurs collègues non expérimentés, peuvent pratiquer la rétention d’information pour
pérenniser les pratiques maffieuses. On peut donc craindre des attitudes hostiles de la part de
certaines personnes.

III.2. Evaluation du projet

III.2.1.Technique D’ordonnancement
Une technique d’ordonnance des taches est un ensemble des méthodes qui permettent au
chef du projet de prendre des décisions nécessaires dans les meilleures conditions possibles.
En conséquence, la technique d’ordonnancement doit permettre au chef de projet d’ (de) :
 Analyser le projet ;
 Elaborer un plan d’action ;
 Contrôler l’évolution du projet.22
III.2.2. Méthode D’ordonnancement
Dans l’élaboration d’un projet, plusieurs méthodes d’ordonnancement sont à la base ;
mais les plus utilisées sont :
 Le diagramme de GANTT
 La méthode PERT
 La méthode potentielle Métra(MPM)
Dans le cadre de notre travail de planning prévisionnel de notre projet nous préférons
utilise la méthode PERT.

22
MVUMBI PUATI Z.V., Cours d’élément de recherche opérationnelle, ed. inédit L1 info, ULK/KIN, 2010-2011, p.42
 P a g e | 51

III.2.3. Méthode P.E.RT

 Historique

A la fin des années cinquante, la marine Américaines conçoit une nouvelle technique
d’ordonnancement qui devait conduire à des gains de temps importants dans la réalisation de
ses missiles ogive nucléaire POLARIS : C’est la technique PERT (Program Evaluation and
Review Technique). Cette technique a permis de coordonner les travaux de près de 6 000
constructeurs dans le délai imposé par le gouvernement Américain.

Le projet POLARIS représentait entre autre :

 250 fournisseurs
 9 000 sous-traitants
 7 ans de réalisation

L’utilisation de la méthode PERT a permis de ramener la durée globale de réalisation

du projet de 7 à 4 ans. Cette méthode s’est ensuite étendue à l’industrie Américaine puis à
l’industrie occidentale.
La méthode PERT est « une méthode consistant à mettre en ordre sous forme de réseau
plusieurs tâches qui grâce à leur dépendance et à leur chronologie concourent toutes à
l’obtention d’un produit finit ».
Nota : La méthode PERT permet de résoudre le problème central d’ordonnancement par le
graphe PERT. 23
La méthode P.E.R.T est la technique de coordination des tâches, elle permet la
représentation de l’enchainement des travaux, leurs liens de dépendance, leurs dates de
déclanchement et de fin.
Elle permet en outre l’identification des dates limites de début et de fin, ainsi que le
chemin critique pour obtenir le délai global du projet.

23
Rostin MABEL, Note de cours Recherche Opérationnelle et Théorie de Graphes, éd. Inédit, L1 INFO, URKIM/KIN, 2014-
2015, p63
 P a g e | 52

III.2.4. Principes de Représentation de la Méthode P.E.R.T

Exemple : durée de la tâche

D(i) Y Etape final

X Etape initiale
Figure 15. Durée de la tâche

Remarquées :
a) X peut être le somme terminal de certaines tâches et le sommet initial d’autres tâches.
X

Figure 16. Somme terminal

b) on dit qui l’étape X est réalisée si et seulement si toutes les tâches qui aboutissement
en X sont terminées mémé les plus longues et la réalisation de l’étape X est une
préalable au démarrage de toutes les tâche qui partent de X , c a d que l’ étape X sera
réalisée lorsque toutes les tâche seront réalisées mémé les plus longues lorsque les
tâche sont simultanées.

III.2.5. Types des contraintes dans un graphe PERT

La méthode PERT ne permet représenter que les contraintes de postériorité stricte. C

à d une tâche J ne peut commencer avant que la tâche s I ne soit terminée : début j≥fin i.24

24
BOURREAU E. et LIBOUREL T., Conduite des projets informatiques, 2011, cité par KITONDUA Richard dans sa
thèse : « méthode de génie logiciel pour les systèmes intelligents de gestion », 2012, p.176.
 P a g e | 53

III.3.6. Méthode d’évaluation du projet

Pour évaluer notre projet, nous aurons à une approche expérimentale basée sur une
représentation proportionnelle de charge ; il s’agit de la méthode de RATIOS
Théorie Estimation
Ratios% Charge en jour par
heure (jr/h)
Développement Etude Observation 0.03 3
Du projet préliminaire Conception 0.06 6
100% Appréciation 0.02 2
Analyse des besoins 0.09 9
Analyse du système 0.15 15
Conception système 0.25 25
Programmation et test 0.20 20
Hébergement 0.05 5
Implémentation 0.10 10
Maintenance 0.05 5
Total développement 100% 100

Tableau. N°8. Méthode d’évaluation du projet

La charge du lancement est estimée puis les autres charges déduites par la règle de 3 simples

III.2.7. Etude détaillée de la charge de travail

Point de séquence Etapes Charges (jr/h) Durée (jrs) Ouvriers Coûts($)
1 Observation 3/6 3 4 200$
2 Conception 6/8 6 5 1500$
3 Appréciation 2/6 2 5 100$
4 Analyse 9/8 9 8 400$
des besoins
5 Analyse 15/8 15 6 300$
du système
6 Conception 25/8 25 7 600$
du système
7 Programmation 20/8 20 9 700$
et Test
8 Hébergement 5/6 5 2 900$
9 Implémentation 10/8 10 10 2000$
10 Maintenance 5/6 5 5 450$

Tableau N° 9 : Etude détaillée de la charge de travail

 P a g e | 54

a) Analyse des taches : Le tableau ci-dessous donne les différentes durées et couts des tâches
indispensables à la réalisation de notre projet.

Etape i Taches xi Désignation Tâches Durée Coûts ($)

suivantes (Jour)
Code
1 A Observation B 3 200$
2 B Conception C 6 1.500$
3 C Appréciation D, E 2 100$
4 D Analyse des besoins F 9 400$
5 E Analyse du système F 15 300$
6 F Conception du système G 25 600$
7 G Programmation et Test H, I 20 700$
8 H Hébergement J 5 900$
9 I Implémentation J 10 2.000$
10 J Maintenance - 5 450$

Tableau .N°10 : Analyse des taches

Dans notre travail, nous utiliserons la méthode PERT (planing Evaluation and Review
Technic) pour représenter l’enchainement des travaux, leurs liens de dépendances, leur date
de déclenchement et de fin.

b) Graphe brut
9
5 F(25) H(5)
J(5)
D(9)
G(20)
7 8 11
1 2 3 4

A(3) B(6) 10
C(2) 6 I(10)
E(15) J(5)
F(25)

b) Matrice booléen
1 2 3 4 5 6 7 8 9 10 11
1 1 0 0 0 0 0 0 0 0 0 0
2 0 1 0 0 0 0 0 0 0 0 0
3 0 0 1 0 0 0 0 0 0 0 0
4 0 0 0 1 0 0 0 0 0 0 0
5 0 0 0 0 1 0 0 0 0 0 0
6 0 0 0 0 0 1 0 0 0 0 0
7 0 0 0 0 0 0 1 0 0 0 0
8 0 0 0 0 0 0 0 1 0 0 0
9 0 0 0 0 0 0 0 0 1 0 0
10 0 0 0 0 0 0 0 0 0 1 0
11 0 0 0 0 0 0 0 0 0 0 1
 P a g e | 55

c) Matrice évaluée

1 2 3 4 5 6 7 8 9 10 11
1 0 3 0 0 0 0 0 0 0 0 0
2 0 0 6 0 0 0 0 0 0 0 0
3 0 0 0 2 0 0 0 0 0 0 0
4 0 0 0 0 9 15 0 0 0 0 0
5 0 0 0 0 0 0 25 0 0 0 0
6 0 0 0 0 0 0 25 0 0 0 0
7 0 0 0 0 0 0 0 20 0 0 0
8 0 0 0 0 0 0 0 0 0 10 0
9 0 0 0 0 0 0 0 0 0 0 5
10 0 0 0 0 0 0 0 0 0 0 5
11 0 0 0 0 0 0 0 0 0 0 0
a) Calcul du rang
Rn=11
Rn-11= {1}=R0
Rn-10= {2}=R1
Rn-9= {3}=R2
Rn-8= {4}=R3
Rn-7= {5} =R4
Rn-6= {6} =R5
Rn-5= {7} =R6
Rn-4= {8} =R7
Rn-3= {9} =R8
Rn-2= {10} =R9
Rn-1= {11} =R10

b) Graphe ordonné

9
5 F(25) H(5)
J(5)
D(9)
G(20)
7 8 11
1 2 3 4
R0 R1 R2 10
A(3) B(6) C(2) R3 6 I(10)
E(15) J(5)
R5 F(25)R6 R7
R9
R4 R8
R10
c) Recherche de la date au plus tôt (DTO) et de la date au plus tard (DTA)

 Date au plus tôt

1. Définition : c’est la date la plus rapprochée à laquelle nous avons la possibilité de

réaliser une étape.

2. Formule : DTO(y)=max {DTO (X)+d(i)}

 P a g e | 56

3. Calcul: DTO (1)=0

DTO (2) =0+3=3
DTO (3) =3+6=9
DTO (4) =9+9=18
=9+15=24 MAX=24
DTO (5) =24+25=49
DTO (6) =49+25=74
DTO (7) =74+20=94
DTO (8) =94+5=99
=94+10=104 MAX=104
DTO (9) =104+5=109
DTO (10) =109+5=114
DTO (11) =114+0=114

 Date au plus tard

1. Définition : c’est la date à laquelle nous devons absolument commencer une étape afin
de la réaliser.
2. Formule : DTA(i)=min {DTA (Y)- d(i)}
3. Calcul: DTA (11)=114
DTA (10) =114-5=111
DTA (9) =111-5=106
DTA (8) =106-5=101
=101-10=91
DTA (7) =91-20=71
DTA (6) =71-25=46
DTA (5) =46-25=12
DTA (4) =12-9=3
=34-15=19
DTA (3) =3-2=1
DTA (2) =1-1=0
DTA (1) =0
m. Calcul des Marges
 Marges libres

1. Définition: c’est le délai dont nous disposons pour la mise en route de la tâche
i sans compromettre la date au plutôt de l’étape y.
2. Formule : ML (i) = DTO(y)-DTO(x)-d(i)
3. Calcul: ML (a)= DTO(2) – DTO(1)- d (a)=3-0-3=0
ML (b) = DTO (3) – DTO (2)-d (b) =9-3-6=0
ML (c) = DTO (4) - DTO (3) - d(c) = 10-9-1=0
ML (d) = DTO (5) - DTO (3) - d (d) = 30-9-1=20
ML (e) = DTO (5) - DTO (4) - d (e) = 30-10-1=19
ML (f) = DTO (6) - DTO (5) - d (f) =40-30-10=0
ML (g) = DTO (7) - DTO (6) - d (g) = 82-40-10=32
ML (h) = DTO (8) - DTO (7) - d (h) = 100-82-0=18
ML (i) = DTO (8) - DTO (6) - d (i) = 100-40-42=18
ML (j) = DTO (9) - DTO (8) - d (j) = 0-100-18=82
 P a g e | 57

 Marges totales

1. Définition : c’est le délai dont nous disposons pour la mise en route de la tâche sans
modifier la date au plus tard de l’étape y.
2. Formule: MT (i) =DTA(y) - DTO (x)- d (i)
3. Calcul : ML (a)= DTA(2) – DTO(1)- d (a)=3-0-3=0
MT (b) = DTA (3) – DTO (2)-d (b) =9-3-6=0
MT (c) = DTA (4) - DTO (3) - d(c) = 10-9-1=0
MT (d) = DTA (5) - DTO (3) - d (d) = 30-9-1=20
MT (e) = DTA (5) - DTO (4) – d (e) = 30-10-1=19
MT (f) = DTA (6) - DTO (5) – d (f) =40-30-10=0
MT (g) = DTA (7) - DTO (6) – d (g) = 82-40-10=32
MT (h) = DTA (8) - DTO (7) - d (h) = 100-82-0=18
MT (i) = DTA (8) - DTO (6) - d (i) = 100-40-42=18
MT (j) = DTA (9) - DTO (8) – d (j) = 0-100-18=82
n. Chemin critique

 Si DTO = DTA, alors est dite critique ; dans le cas contraire elle est dite non critique ;
 Si ML = MT alors la Tâche est dite critique, dans le cas contraire la Tâche est dite
non critique ;
 Le chemin critique correspond au chemin de valeur maximum du graphe P.E.R.T.
Le chemin critique est celui qui relie toutes les tâches critiques sont celles dont la
marge totale est nulle. Dans ce projet, le chemin critique se présente comme suit : A,
B, C, D, E, F, G.
o. Tableau des spécifications des tâches
Tâches DTO DTA ML MT Observation
1 0 114 0 0 Critique
2 3 114 0 0 Critique
3 9 109 0 0 Critique
4 24 104 25 20 Non critique
5 49 94 19 19 Non critique
6 74 74 0 0 Critique
7 94 49 17 32 Non Critique
8 104 24 49 45 Non Critique
9 109 9 18 12 Non Critique
10 114 3 32 0 Critique
11 114 0 18 107 Non Critique

Tableau N°11 : Spécifications des taches

p. présentation des résultats

 Durée globale du projet = 100 jours

 Cout total du projet :

CT = ∑ = 200+1500+100+600+2000+450+900+700+300+400 = 7.150 $
 P a g e | 58

Chapitre IV : conception de l’application

Dans ce chapitre nous allons parler sur la conception de l’application, Analyse et
conception du système, Le modèle, Le cycle de vie d’un logiciel, Modèles de cycles de vie
d’un logiciel

IV.1. Analyse et conception du système

Pour concevoir un système informatique il faut au préalable connaître ses frontières, ses
fonctions vise à vis des utilisateurs que ce soient les utilisateurs qui consomment et qui
exploitent le système. Ce point présente les rouages informatiques pour concevoir un système
d’information.

IV.1.1. Le modèle
Un modèle est une représentation abstraite et simplifiée (qui exclut certains détails),
d’une entité (phénomène, processus, système, etc.) du monde réel en vue de le décrire, de
l’expliquer ou de le prévoir. Modèle est synonyme de théorie, mais avec une connotation
pratique : un modèle, c’est une théorie orientée vers l’action qu’elle doit servir. Concrètement,
un modèle permet de réduire la complexité d’un phénomène en éliminant les détails qui
n’influencent pas son comportement de manière significative. Il reflète ce que le concepteur
croit important pour la compréhension et la prédiction du phénomène modélisé, les limites du
phénomène modélisé dépendant des objectifs du modèle.

IV.1.2. Le cycle de vie d’un logiciel

Le cycle de vie d’un logiciel (en anglais software life cycle), désigne toutes les étapes
du développement d’un logiciel, de sa conception à sa disparition. L’objectif d’un tel
découpage est de permettre de définir des jalons intermédiaires permettant la validation du
développement logiciel, c’est-à-dire la conformité du logiciel avec les besoins exprimés, et la
vérification du processus de développement, c’est-à-dire l’adéquation des méthodes mises en
œuvre.

La séquence et la présence de chacune de ces activités dans le cycle de vie dépend du

choix d’un modèle de cycle de vie entre le client et l’équipe de développement. Le cycle de
vie permet de prendre en compte, en plus des aspects techniques, l’organisation et les aspects
humains.

IV.1.3. Modèles de cycles de vie d’un logiciel

Modèle de cycle de vie en cascade
Le modèle de cycle de vie en cascade a été mis au point dès 1966, puis formalisé aux
alentours de 1970.
Dans ce modèle le principe est très simple : chaque phase se termine à une date précise
par la production de certains documents ou logiciels. Les résultats sont définis sur la base des
interactions entre étapes, ils sont soumis à une revue approfondie et on ne passe à la phase
suivante que s’ils sont jugés satisfaisants.
 P a g e | 59

Le modèle original ne comportait pas de possibilité de retour en arrière. Celle-ci a été

rajoutée ultérieurement sur la base qu’une étape ne remet en cause que l’étape précédente, ce
qui, dans la pratique, s’avère insuffisant.

Figure 17. Le modèle en cascade avec itérations (quelques étapes)25

Source : Laurent Audibert, Note cours UML2, Paris, 2007-2008, inédit, p17

IV.2. Processus unifié

Le processus unifié est un processus de développement logiciel : il regroupe les activités

amené pour transformer les besoins d’un utilisateur en système logiciel.26

IV.2.1. Caractéristiques essentielles du processus unifié

Le processus unifié est basé sur des composants : il utilise UML et est basé sur les cas
d’utilisation, l’architecture et le développement incrémental. Pour mettre en pratique ces idées
il faut recourir à un processus multi-facettes prenant en considération les cycles, les phases,
les enchaînements d’activités, la réduction des risques, le contrôle qualité, la gestion de projet
et la gestion de configuration. Le processus unifié a mis en place un cadre général
(Framework) intégrant chacune de ces facettes.

Le processus unifié est piloté par les cas d’utilisation, Centré sur l’architecture, Itératif
et incrémental : le processus unifié répète un certain nombre de fois une série de cycles. Tout
cycle se conclut par la livraison d’une version du produit aux clients et s’articule en 4 phases :
création, élaboration, construction et transition, chacune d’entre elles se subdivisant à son tour
en itérations.

25 Jacques Lonchamp, notes de cours inédit de génie logiciel première partie définitions générales, principes, processus.
CNAM-Nancy, 2003.
26
DIGALLO Frédéric, Note de cours Méthodologie des systèmes d'information – UML, Paris, 2008, indét, p.6
 P a g e | 60

IV.2.1.1.Modélisation objet avec « UML »

UML (Unified Modeling Language) est un langage de modélisation orientée objet
développée en réponse à l’appel à propositions lancé par l’OMG (Object Management Group)
dans le but de définir la notation standard pour la modélisation des applications construites à
l’aide d’objets.

UML dans sa version 2 propose treize diagrammes qui peuvent être utilisés dans la
description d’un système. Ces diagrammes sont regroupés dans deux grands ensembles.
L’ensemble des treize types de diagrammes UML peut ainsi être résumé sur la figure ci-
après, en mettant en évidence les cinq diagrammes que nous utiliserons prioritairement.

Figure 18. Modélisation objet avec « UML »

Source : Pascal Roques, UMl2, Modéliser une Application Web (cahiers du programmeur), Eyrolles (4 ème
édition), Paris, 2008, p9

Ce document ne présente que les modèles traitant de la technologie objet.27

IV.2.1.2 Besoins fonctionnels

Il s’agit pour nous de décrire les besoins de l’institut Madrandele en termes de

fonctionnalité, c’est-à-dire nous allons expliquer ce que notre application aura comme tâche
(fonction).

IV.2.1.3. Modèle de cas d’utilisation

Le modèle de cas d’utilisation expose les cas d’utilisation et leurs relations avec les
utilisateurs d’où l’utilisation du diagramme de cas d’Utilisation d’UML et la description de la
vue des besoins des utilisateurs.

27
Pierre Alain Muller, Modélisation objet avec UML, éd. Eyrolles, Paris, 1997, p7
 P a g e | 61

 La vue des besoins des utilisateurs

Cette vue (dont le nom exact est "vue des cas d'utilisation"), guide toutes les autres.
Dessiner le plan (l'architecture) d'un système informatique n'est pas suffisant, il faut le
justifier ! Cette vue définit les besoins des clients du système et centre la définition de
l'architecture du système sur la satisfaction (la réalisation) de ces besoins. A l'aide de
scénarios et de cas d'utilisation, cette vue conduit à la définition d'un modèle d'architecture
pertinent et cohérent. Cette vue est la "colle" qui unifie les quatre autres vues de l'architecture.
Elle motive les choix, permet d'identifier les interfaces critiques et force à se concentrer sur
les problèmes importants.

 Diagramme de cas d'utilisation

Un diagramme de cas d’utilisation est un graphe d’acteurs représenté par des silhouettes
ou stickman et les cas d’utilisations représentés par des ellipses. Les traits entre les cas
d’utilisation et les acteurs représentent les interactions. A droite nous avons les acteurs
internes et à gauche les acteurs externes.
Ce diagramme représente la participation des acteurs dans chaque activité de CHS, ainsi
ce dernier nous permettra de bien comprendre la circulation des informations dans l’entreprise
et le rôle clé que joue chaque acteur dans la gestion des activités de l’entreprise.

Figure19. Diagramme de cas d'utilisation

 Description d’utilisation système

Le système est composé des deux utilisateurs dont l’un est le visiteur du site (User) et le
second l’administrateur qui est la personne gérant (Administrateur) les événements et
publication du site web
 P a g e | 62

IV.2.1.4. Modèle d’Analyse

Détaille les cas d’utilisation et procède à une première répartition du comportement du

système entre divers objets

 La vue des processus

Cette vue est très importante dans les environnements multitâches ; elle montre : La
décomposition du système en terme de processus (tâches); les interactions entre les processus
(leur communication); la synchronisation et la communication des activités parallèles
(threads)

Réalisation des cas d’utilisation

Figure 20. Réalisation des cas d’utilisation

 P a g e | 63

IV.2.1.5.Modèle de Conception

 La vue logique

Cette vue de haut niveau se concentre sur l'abstraction et l'encapsulation, elle modélise
les éléments et mécanismes principaux du système. Elle identifie les éléments du domaine,
ainsi que les relations et interactions entre ces éléments : les éléments du domaine sont liés
au(x) métier(s) de l'entreprise, ils sont indispensables à la mission du système, ils gagnent à
être réutilisés (ils représentent un savoir-faire). Cette vue organise aussi (selon des critères
purement logiques), les éléments du domaine en "catégories" : pour répartir les tâches dans
les équipes, regrouper ce qui peut être générique, isoler ce qui est propre à une version
donnée, etc...

 Diagramme de classe

Ce modèle nous permet d'avoir une vue statique de l'application. Il nous montre les
relations entre les différentes entités (classes) composant notre application. Il nous mène vers
la solution finale. À partir de ce diagramme on retrouve les corps des différentes classes de
notre application. Mieux encore en utilisant la technique de l'ingénierie
 P a g e | 64

Figure 21. Diagramme de classes

 P a g e | 65

Le schéma ci-dessus nous donne une vue globale de notre application. On a les classes
principales qui vont nous servir à réaliser l'application.

Pour avoir de plus amples informations sur l'autre partie de notre application on peut
penser à représenter le modèle conceptuel de données (modèle physique) il s'agit de représenter
les données et les différentes relations entre elles. Ce modèle nous a permis de construire notre
base de données, car chaque entité est associée à une table dans la base de données.

IV.2.1.7. Modèle de déploiement

Ce Modèle, définit les nœuds physiques des ordinateurs et l’affectation de ces composants
sur ces nœuds.

 La vue de déploiement
Cette vue très importante dans les environnements distribués, décrit les ressources
matérielles et la répartition du logiciel dans ces ressources : la disposition et nature physique des
matériels, ainsi que leurs performances, l'implantation des modules principaux sur les nœuds du
réseau, les exigences en terme de performances (temps de réponse, tolérance aux fautes et
pannes...).

 Diagramme de déploiement
Ce modèle définit le diagramme de l’architecture matérielle du système ou de
l’application.
Il représente les différents processus, périphériques et la répartition du système sur les différents
éléments. Il montre les liens de communication entre ces différentes entités

Figure 22. Diagramme déploiement

 P a g e | 66

IV.3. Réalisation de notre application web

Dans cette phase nous présenterons juste notre application réalisée, elle a été écrite en HTML ou
XHTML et CSS, PHP ainsi que le système de gestion de base de données relationnelle (SGBDR)
comme choix MySQL.

IV.3.1. Les interfaces graphiques

Figure 23. Accueil

Figure 24. Historique

 P a g e | 67

Figure 25.Inscription

Figure 26. Contact

 P a g e | 68

IV.3.2. Les code sources

<?php include("menu.php");?>
<?php if (isset($_GET['accueil'])) {
include_once("accueil.php");
}
?>
<?php
if(isset($_GET['inscription'])) {
include_once("inscription.php");
}

?>
<?php
if(isset($_GET['contact'])) {
include_once("contact.php");
}

?>

<br>

<br>
<br>
<script src="http://code.jquery.com/jquery-latest.js" ></script>
<script src="js/latest.js" ></script>
<script src="js/menu.js"></script>
<script type="text/javascript">/*
$('.menu').on('click',function(){
$('nav ul ').toggleClass('show').show();

})
</script>
<footer>
<header>
<aside id="adress">

<div>
<span class="icon icon-location"></span> N°
1620C,Avenue;C/Liméte, 1ère rue <br>
<span class="icon icon-mail2"> </span>
mandrandelle@gmail.com
<span class="icon icon-mobile"></span> +243 85 125 85 96
</div>
</div>
</aside>
</header>

</footer>
</body>
 P a g e | 69

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/ajax.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="animated fadeInLeft">
<div id="">
<?php
/* include("iframe_index.html");*/

;?>
<aside id="aside">
<div id="news">
<h1><span class="icon-facebook2"> </span></h1>
<h1>Notre Page facebbok</h1>
<h4>Suivez-nous sur nore page pour plus sur nous!!</h4>
</div>
<div id="news">
<h1><span class=" icon-users"> </span></h1>
<h1>Nos Contacts</h1>
<h4>Veuillez nous contacter ici!!</h4>
<h4>Suivez-nous sur nore page pour plus sur nous!!</h4>

</div>
<div id="news">
<h1><span class=" icon-folder-plus"> </span></h1>
<h1>Nos Activités</h1>
<h4>Nos différentes activités !!</h4>
<h4>Suivez-nous sur nore page pour plus sur nous!!</h4>

</div>
</aside>
<br clear="both">

<div id="article">
<article>
<div class="actualite"><h3>A la Une</h3></div>
<div class="detail"> <h5>En revanche, et cela devient plus problématique, Internet Explorer 8 et
versions antérieures
nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM, sous
peine de ne rien afficher du tout !</h5></div>

<div class="date"><h1>12 <br>Avril <br>2016<br></h1></div>

</article>

</div>
<div id="acote"><h4><div class="actualite"><h3>Avis aux Parents</h3></div>

<br>
 P a g e | 70

<br>
</div>
<br clear="both">

</section>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/news.css">
<link rel="stylesheet" type="text/css" href="css/font/style.css">
<link rel="stylesheet" type="text/css" href="engine1/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>
<link rel="stylesheet" type="text/css" href="js/zoombox/zoombox.css">
<title>www.madrandelle.cd</title>
<script type="text/javascript">

jQuery(function($){

$('a.zoombox').zoombox({
theme:'prettyphoto'
});
});

</script>
<style type="text/css">
.name{margin-left: 28em;font-family: century gothic;position:
relative;color:orange;}
#Contacts{width: 100%;
text-align: center;
color: black;
font-size: 14px;
margin-top: 1em;
font-family: helvetica;

}
#adress{color:white;
padding: 5px;
padding-right: 2em;
z-index: 10;
opacity:1;
filter:alpha(opacity=50);
}
#adress div{color: grey; width: 25em;
text-align: center;margin-left: 10em;}
 P a g e | 71

#adress .icon {font-size: 13.5px;}

#slider{background-color:#fff ;
padding-top: 1em;
padding-bottom: 1em;
box-shadow: 0px 0px 1px 0px grey;
border-radius: 18px;
}
#aside{ padding-left: 11em;
width: 1000px;
margin-left: 5em;
box-shadow: 0px 0px 1px 0px grey;
}
#news{ display: inline-block;
vertical-align: top;
float: left;
box-shadow: 1px 2px 0px 1px grey;
border-radius: 0px;
width: 220px;
height: 300px;
margin-right: 4.5em;
background-color:#123;
text-align: center;
padding: 0.8em;
font-family: century gothic;
margin-bottom: 0.2em;
z-index: 10;
opacity:1;
filter:alpha(opacity=50);
color: white;
font-size:
}
#news:hover{
background:#123;
cursor: pointer;
color: white;
}
#news span{font-size:80px;}
#news h1{margin-bottom: -1em;}
#news h4{color: grey;}
</style>
</head>
<body>
<header>
<h1 class="name">Madrandelle School <span class=" cart"> </span></h1>

</header>
<nav >
<ul>
<li><a href="index.php?accueil"><span class=" icon-home2">
</span>Accueil</a></li>
 P a g e | 72

<li class="main"><a href="index.php?Historique"><span class=" icon-

user-check"> </span>Historique</a></li>
<li class="main"><a href="index.php?inscription"><span class="icon-
pencil"> </span>Inscription</a></li>
<li class="main"><a href="index.php?activite"><span class=" icon-
users"> </span>Activités</a></li>
<li class="main"><a href="index.php?contact"><span class=" icon-
mobile"> </span>Contact</a></li>
</ul>
</nav><br>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/news.css">
<link rel="stylesheet" type="text/css" href="css/inscription.css">
<link rel="stylesheet" type="text/css" href="css/font/style.css">
<link rel="stylesheet" type="text/css" href="engine1/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script>
<link rel="stylesheet" type="text/css" href="js/zoombox/zoombox.css">
<title>www.madrandelle.cd</title>

<style type="text/css">
section{padding-left: 5em; }
#acote,#identite,#compte,#compter{display: inline-block;vertical-align: top;float: left;}
#identite{background-color:#fff;padding-left: 0.5em;
padding: 2em;color: black;}
input{ width: 20em;
height: 2em;
border: 0.2px solid grey;
background-color: white;
border-radius: 7px;
padding-left: 1em;margin-bottom: 8px;color: grey; margin-bottom: -0.5px;}
textarea{width: 30em;height: 12em; border: 0.2px solid grey;border-radius:
7px;padding: 0.5em;}
.submit{width: 10em; background-color: #123;
color: white;padding-left: 0em;
text-align: center;height: 3em;
margin-left: 18.5em;
border:none;border-radius: 7px;}
label{color: #353535;}

</style>
 P a g e | 73

</head>
<section class="animated fadeInLeft">
<div id="acote"><h2>Contactez-nous </h2></div>
<div id="identite">
<form>
<label for="name">Nom</label><br>
<input type="name" name="name" placeholder="name"/><br>
<label for="mail">E-mail</label><br>
<input type="mail" name="mail" placeholder="mail"/><br>
<label for="sujet">Sujet</label><br>
<input type="sujet" name="sujet" placeholder="sujet"/><br>
<label for="Message">Message</label><br>
<textarea spellcheck="true" placeholder="Votre Message"></textarea><br>
<button type="submit " value="Soumettre" class="submit ">Envoyer</button>
</form>
</div>
<div id="compte">
<h4>Nos Contacts</h4>
<h4><span class="icon-mobile"> </span>+243 82 45 45 963</h4>
<h4><span class="icon-mobile"> </span>+243 82 45 45 963</h4>
</div>
<div id="compter">
<h4>Nos boites E-mail</h4>
<h4><span class="icon-facebook"> </span>+243 82 45 45 963</h4>
<h4><span class="icon-facebook"> </span>+243 82 45 45 963</h4>
<h4>Notre Adresse</h4>
<h4><span class="icon-location"> </span>+243 82 45 45 963</h4>
</div>

<br clear="both">
</section>

Css
body{

font-family: arial;
font-size: 13.3px;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #e3e3e3;
margin-top: -1.4em;
}

*{box-sizing:border-box;}

header{
background-color: white;
text-align: center;
color: white;
 P a g e | 74

margin: auto;
height: 4em;
}
nav ul li span{
font-size: 16px;
}
nav ul li{
display: inline-block;
width: 150px;
height: 30px;
margin-top: 2em;
border-right: 1px solid grey;
text-align: center;
}
nav ul{
background-color: #123;
text-align: center;
margin: auto;
height: 5em;
margin-left: -10em;
}
nav ul li a{
text-decoration: none;
color: white;
font-size: 12.5px;
border: none;

}
nav ul li a:hover{
color: red;
border: none;
}
nav ul li a:active{
color: red;
border: none;
}
article{

background-color:black;
margin: auto;
margin-left: 5em;
margin-right: 1.3em;
height: 100%;
}
#aside{}
section{

background-color: white;
margin-top: em;
margin-left: 1.3em;
 P a g e | 75

margin-right: 1.3em;
margin-bottom: -1.3em;
height: 100%;
padding: 2em;
}
.menu:hover{color: red;background-color: #123;}
.menu a{display: none;}

@media screen and (max-width: 480px){

header h1{color: white;}

.menu span{display: none;}
.titre{color: #e87e04;}

.img{ box-shadow: 0px 0px 1px 0px grey;}

.menu{background-color: #e87e04;
width: auto;height: 2.5em;}
.menu:hover{background-color: #e87e04;}

/*.bt-menu span{float: right;font-size: 40px;}*/

.menu a{
display: block;
margin-right: 30em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 13.8px;
}
.menu .icon-list{ float: right;margin-top: -1em;
font-size: 18px;
margin-right: 1em;}

nav{margin-left: -3.3em;border-right-color: 1px solid orange;}

nav ul{
width: 80%;
height: 100%;
margin: 0;
position: absolute;
margin: 0;
-webkit-transition:max-width 3s;
-o-transition:max-width 3s;
-moz-transition:max-width 3s;
-ms-transition:max-width 3s;
}
nav ul li{
display: block;
float: none;
border-bottom:1px solid grey;
text-align: left;
 P a g e | 76

padding-left: 5px;

}
ul .main{margin-left: 0.4em;}

nav ul li a:hover{
color: red;
-webkit-transition:font-size 3s;
-o-transition:font-size 3s;
-moz-transition:font-size 3s;
-ms-transition:font-size 3s;

}
nav ul li a{font-size: 13.2px;}

section{
padding-top: 2em;
background-color: white;
margin-bottom: -8em;
}

.name{margin-left:-20em;}
footer{

background-color: #123;
height: 1em;
text-align: center;
color: white;
margin: 0;
margin-top: 7.2em;
margin-bottom: -5em;
}
}

#acote{margin-left: 5em; margin-right: 5em;}

#acote span{color: grey;
font-size: 14px;
font-family: arial;
font-variant: normal;
font-style: normal;
font-weight: normal;

}
#compte{width: 14em;}
#compte h4{padding-left: 2em;
padding-top: 2em; color: #da4b05;
margin-bottom: -3em;

font-family: arial;
 P a g e | 77

font-variant: normal;
font-style: normal;
font-weight: normal;
}

#compter{width: 20em;}
#compter h4{padding-left: 2em;
padding-top: 2em; color: #da4b05;
margin-bottom: -3em;

font-family: arial;
font-variant: normal;
font-style: normal;
font-weight: normal;
}
#article,#acote{display: inline-block;
vertical-align: top;
float: left;}
#article{background:url(../image/parent-eleve.jpg) repeat ; padding-bottom: 1em;padding-left:
1em; margin-top: 2em;
width: 65em;
box-shadow: 1px 1px 1px 1px white;
}
.actualite,.detail,.date{display: inline-block;
vertical-align: top;
float: left;
padding-right: 2em;
padding-left: 2em;
padding-bottom: 12em;
width: 22em;
height: 4em;
background: #123;
opacity:0.8;
filter:alpha(opacity=50);
color: white;

}
.actualite{margin-top: 3em;text-align: center;
border-right: 1px solid white;
color: white;
width: 10em;
}
.date{width:10;}
.actualite h3{font-size: 20px;}
.detail{margin-top: 2.5em;text-align: justify;
border-right: 1px solid white;
color: white;
font-size: 13.5px;
font-family: arial;
font-variant: normal;font-style: normal;
 P a g e | 78

}
.image{margin-top: 3em;text-align: center;
border-right: 1px solid white;
color: #123;
letter-spacing: 0.1em;

}
.image img{width: 12em;height: 8em;opacity:1;}
.date{margin-top: 3em;text-align: center;
border-right: 1px solid grey;
color: white;
letter-spacing: 0.1em;
width: 10em;
height: 9em;
}

/*
* generated by WOW Slider 3.9
* template Noble
*/

#wowslider-container1 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:960px }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
 P a g e | 79

margin:0 0 0 0 !important;
}

#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}

#wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .wsl{
display:none;
}
#wowslider-container1 sound,
#wowslider-container1 object{
position:absolute;
}
#wowslider-container1 .ws_bullets {
padding: 10px;
 P a g e | 80

}
#wowslider-container1 .ws_bullets a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #d6d6d6;
color: #d6d6d6;
text-indent: -4000px;
background-image:url("data:image/gif;base64,");
position:relative;
color:transparent;
}
#wowslider-container1 .ws_selbull {
background-color: #d6d6d6;
color: #FFFFFF;
}

#wowslider-container1 .ws_bullets a:hover, #wowslider-container1 .ws_overbull {

background-color: #d6d6d6;
color: #FFFFFF;
}

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {

position:absolute;
display:block;
top:50%;
margin-top:-16px;
z-index:60;
height: 67px;
width: 32px;
background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 0 0;
right:-7px;
}
#wowslider-container1 a.ws_prev {
left:-7px;
background-position: 0 100%;
}
#wowslider-container1 a.ws_next:hover{
background-position: 100% 0;
}
#wowslider-container1 a.ws_prev:hover{
background-position: 100% 100%;
}
/* bottom center */
#wowslider-container1 .ws_bullets {
bottom:0;
 P a g e | 81

left:50%;
}
#wowslider-container1 .ws_bullets div{
left:-50%;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:7%;
left: 0;
margin-right:5px;
z-index: 50;
color:#1E4553;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
}
#wowslider-container1 .ws-title div,#wowslider-container1 .ws-title span{
display:inline-block;
background-color:#FFF;
padding:10px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#wowslider-container1 .ws-title div{
display:block;
margin-top:10px;
font-size: 12px;
}
#wowslider-container1 .ws_images ul{
animation: wsBasic 16s infinite;
-moz-animation: wsBasic 16s infinite;
-webkit-animation: wsBasic 16s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%}
50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-
100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-
100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }

#wowslider-container1 .ws_bullets a img{

text-indent:0;
display:block;
bottom:12px;
left:-64px;
visibility:hidden;
position:absolute;
border: 2px solid #B8C4CF;
max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
 P a g e | 82

visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{

height:48px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:128px;
background-color:#B8C4CF;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
bottom:25px;
overflow:visible;
position:absolute;
cursor:pointer;
border: 2px solid #B8C4CF;
}
#wowslider-container1 .ws_bulframe span{
position:absolute;
}
 P a g e | 83

CONCLUSION
Dans le cadre du travail de fin de cycle, nous avons été amenés à la Conception et
réalisation d’une application web pour gestion d’inscription et de test d’admission.
Au cours de ce travail, nous avons pu étudier l’approche orienté objet présenté par le
langage de modélisation UML pour analyser et spécifier dans un premier temps et de concevoir
notre application web dans un deuxième temps.
Ce projet était pour nous une bonne occasion pour sortir du cadre théorique et
d’appliquer les connaissances acquises lors de notre parcours universitaires dans un
environnement réel de travail. Il nous a permis d’être initié dans le domaine professionnel et
d’apprendre les procédures de collection d’informations pour extraire les besoins des acteurs du
système à mettre en œuvre.
Nous avons également approfondi nos connaissances des langages de programmation
comme suite : HTML ou XHTML, CSS et PHP ainsi que la manipulation des quelques outils
tel que Wamp et Notepad++, la conception de notre Application web et pour le design tels que,
Photoshop…
Cependant, nous espérons que cette première version de l’outil réalisé, pourra aider et
satisfaire l’Institut Madrandele dans l’inscription et de test d’admission.
Certes, ce travail contiendrait éventuellement d’imperfections ; ainsi toute remarque
constructive sera le bien reçu.
 P a g e | 84

BIBLIOGRAPHE

I. Ouvrages
1. Dominique Latot, les réseaux informatiques, éd. Eyrolles édition, Paris, 2006,
2. Eric DASEP, Php5 avance, Eyrollers(4ème édition), Paris, 2007,
3. Francis DRALLARD, Premier pas en CSS et XHTML (2ème édition), Paris, 2007,
4. Guillaume Desgéorge, Les réseaux hauts débits, éd. Eyrolles, Paris, 1997 ;
5. Jean ENGELS, PHP cours et exercices (2ème édition), Paris, 2006,
6. Jean-Marie Defrance, PHP/MySQL avec Dreamweaver 8, éd. Eyrolles, Paris, 2006 ;
7. Jeremy KEITH, HTML5 et CSS for web designers , editions Eyrolles 61, Paris cedex,
8. Laurent Guédron, la bible micro application PHP5 (1ème édition), Paris, 2005,
9. Mathieu NEBRA, Réussir son site web avec XHTML et CSS (2ème édition), Paris, 2008,
10. Olivier Heurtel, PHP et MySQL maîtrisez le développement d’un site web dynamique et
interactif, éd., Paris, 1995,
11. Pierre Alain MULLER, Modélisation objets avec UML, éd. inédit Eyrolles, Paris, 1997
12. Philippe Rigaux DUNOD, Pratique de MySQL et PHP Conception et Réalisation de site
web dynamiques (4ème édition), Universités à Paris-Dauphine, 2000 ;
13. Philippe Rigaux, Pratique de MySQL et PHP5 (4ème édition), Paris, 2001,
14. Raphaël GOTTER, CSS avance vers HTML5 et CSS3 (2ème édition) Paris, 2011,
15. RODOLP Rimelé, HTML5 une référence pour le développeur web (2ème édition), Paris
2011,

II. Notes

1. BATUBENGA MWAMBA .J.D, Note de cours Programmation Web en PHP, éd. inédit G3
INFO, 2013-2014, p.7 ;
2. BOURREAU et LIBOUREL T., conduite des projets informatiques, 2011, cite par
KITONDUA Richard dans la thèse : «Méthode de génie logiciel pour les systèmes
intelligences des gestions», 2012, p.176
3. GIGALLO Frédéric, Méthodologie des systèmes d’information-UML, p.6
4. Jacques Lonchamp, Note de cours inédit de Génie logiciel première partie définition
générale, principales, processus, CNAM-Nancy, 2013 ;
5. Jeanpy MBIKAYI, Note de cours de Méthode d’Analyse Informatique, URKIM, éd. Inédit
G3, 2013, p9 ;
6. KASESE .N.B.J.C.V, Note de cours du Séminaire de Recherche Scientifique, L2 INFO,
URKIM, 2016, inédit ;
7. MUMBI PUATIZ.V, Note de cours d’Eléments de Recherche Opérationnelle, éd. Inédit L1
INFO, ULK/KIM, 2010-2015 ;
8. Rostin MABELA, Note de cours de Recherche Opérationnelle et Théorie de Graphes, éd.
Inédit L1 INFO, URKIM, 2014-2015, p.63 ;

III. Webographie
1. http://:fr.Wikipedia.org/wiki/Conception_de_site Web, historique, juillet 2011
2. http://:w.w.w.Eclytis.com, les catégories de sites, juillet 2012
3. http://:fr.wikipedia.org/cours réseau informatique janvier 2012- mars 2013
4. http://:www.google.net/net/Projet informatique (janvier 2016).
 P a g e | 85

Table des matières

Dedicaces .......................................................................................................................................................i
Avant-propos ................................................................................................................................................. ii
Liste des figures ............................................................................................................................................ ii
Liste de tableau............................................................................................................................................. iv
Liste des sigles et d’abréviation .................................................................................................................... v
0. Introduction Générale ................................................................................................................................1
0.1. Généralité ...........................................................................................................................................1
0.2. Problématique et Hypothèse ...............................................................................................................1
0.2.1. Problématique..............................................................................................................................1
0.2.2. Hypothèse ...................................................................................................................................2
0.3. Choix et intérêt du sujet......................................................................................................................2
0.3.1. Choix du sujet..............................................................................................................................2
0.3.2. Intérêt du sujet .............................................................................................................................2
0.4. Méthodes, techniques et modèle de développement ..........................................................................2
0.5. Délimitation du sujet ..........................................................................................................................3
0.6. Difficultés rencontrées .......................................................................................................................4
0.7. Subdivision du travail .........................................................................................................................4
Chapitre I: Généralités sur le web ..............................................................................................................5
I.1. Introduction .........................................................................................................................................5
I.2. Internet ...............................................................................................................................................6
I.2.1. Historique .....................................................................................................................................6
I.2.2. Chronogramme de la naissance d’internet ...................................................................................8
I.2.3. Les réseaux internes et externes à internet .................................................................................8
I.2.4. Les applications utilisées par Internet ..........................................................................................9
I.3 Les notions sur la programmation web ............................................................................................. 10
I.3.1 Web ............................................................................................................................................ 10
I.3.2. Les outils de développement ..................................................................................................... 10
I.3.3. Les composantes d’une application web ................................................................................... 11
I.3.4. Les échanges de données dans une application web avec formulaire ....................................... 12
I.3.5. Navigation ................................................................................................................................. 12
I.4. Site web ............................................................................................................................................ 12
I.4.1. Site web statique ...................................................................................................................... 12
I.4.2. Site web dynamique .................................................................................................................. 12
I.4.3. Les catégories de sites ............................................................................................................... 13
 P a g e | 86

I.4.4. Les étapes de la création d’un site............................................................................................. 13

I.5. Fonctionnement du web ................................................................................................................... 15
I.6. Présentation du serveur http ............................................................................................................ 16
I.6.1. Fonctionnement du serveur http ................................................................................................ 17
I.6.2. Configuration du serveur http ................................................................................................... 17
I.7. Le modèle OSI et les protocoles ...................................................................................................... 18
I.7.1. Le modèle OSI .......................................................................................................................... 18
I.7.1.2. L'architecture du modèle OSI ............................................................................................ 18
I.7.1.3. Le modèle TCP/IP .............................................................................................................. 19
I.7.1.5. Comparaison OSI - TCP/IP ................................................................................................ 20
I.7.1.6. Description du modèle ....................................................................................................... 20
I.7.1.7. Services rendu par chaque couche ..................................................................................... 21
I.7.1.8. Tableau récapitulatif .......................................................................................................... 22
I.7.2. Les protocoles .......................................................................................................................... 22
1.7.2.1. Qui créent les protocoles ? ................................................................................................ 23
1.7.2.2. Les principaux protocoles réseaux .................................................................................... 23
1.7. 3. Architecture et fonctionnement .......................................................................................... 27
1.7.4. Architecture des protocoles ................................................................................................. 28
I.8. Application web ........................................................................................................................... 29
I.9. Les choix du langage de programmation et outils........................................................................ 29
I.9.1. Choix du langage de programmation web ............................................................................ 29
1.0. XHTML, CSS..................................................................................................................... 29
1.1. PHP ................................................................................................................................ 31
1.1.1. Historique .................................................................................................................... 31
1.1.2. Qu’est-ce que PHP ................................................................................................... 31
1.1.3. Quelques avantages PHP ........................................................................................ 32
I.9.2.OUTILS ................................................................................................................................. 33
1. Choix du SGBD .................................................................................................................... 33
2. Quelques avantages MYSQL............................................................................................... 33
I.10. Architecture technique et fonctionnement ................................................................................. 36
I.10.1. Architecture technique ........................................................................................................ 36
I.10.2. Fonctionnement PHP .......................................................................................................... 37
Chapitre II : Analyse préalable .................................................................................................................. 38
II.1. Définition et But ............................................................................................................................. 38
II.2. Présentation de l’Institut Madrandele ......................................................................................... 38
 P a g e | 87

3. Historique ....................................................................................................................................... 42
4. Objectifs et But ............................................................................................................................... 42
a) Objectifs ..................................................................................................................................... 42
b) But ............................................................................................................................................. 42
5. Situation géographique .................................................................................................................. 43
6. Organigramme de l’institut Madrandele ........................................................................................ 43
7. Organigramme du service concerné .............................................................................................. 43
II.3. Critique de l’existant....................................................................................................................... 44
II.3.1. Critique du schéma de circulation des informations ................................................................ 44
II.3.2. Critique de documents ............................................................................................................. 44
II.3.3. Critique de moyen matériel...................................................................................................... 44
II. 4. Proposition des solutions .............................................................................................................. 44
II.4.1. Solution manuelle .................................................................................................................... 45
II.4.2. Solution informatique .............................................................................................................. 45
II.5. Choix de la meilleure solution ........................................................................................................ 46
Chapitre III : Planification et évaluation du projet ..................................................................................... 47
III.1. Planification du projet ................................................................................................................... 47
III.1.1. Qu’est-ce qu’un projet ............................................................................................................ 47
III.1.2 Notions sur le projet informatique ........................................................................................... 47
III.1.3. Problématique de la gestion d’un projet ................................................................................. 48
III.1.4. Contrainte d’un projet............................................................................................................. 49
III.1.4.1. Contrainte positive .......................................................................................................... 49
III.1.4.2. Contrainte négative .......................................................................................................... 49
III.1.5. Favorisant les succès .............................................................................................................. 49
III.1.6. Favorisant l’échec d’un projet ................................................................................................ 50
III.2. Evaluation du projet ...................................................................................................................... 50
III.2.1.Technique D’ordonnancement ................................................................................................ 50
III.2.3. Méthode P.E.RT ..................................................................................................................... 51
III.2.4. Principes de Représentation de la Méthode P.E.R.T .............................................................. 52
III.2.5. Types des contraintes dans un graphe PERT.......................................................................... 52
III.3.6. Méthode d’évaluation du projet.............................................................................................. 53
III.2.7. Etude détaillée de la charge de travail .................................................................................... 53
Chapitre IV : conception de l’application .................................................................................................. 58
IV.1. Analyse et conception du système ................................................................................................ 58
IV.1.1. Le modèle ............................................................................................................................... 58
 P a g e | 88

IV.1.2. Le cycle de vie d’un logiciel .................................................................................................. 58

IV.1.3. Modèles de cycles de vie d’un logiciel .................................................................................. 58
IV.2. Processus unifié............................................................................................................................. 59
IV.2.1. Caractéristiques essentielles du processus unifié ................................................................... 59
IV.2.1.1.Modélisation objet avec « UML ».................................................................................... 60
IV.2.1.2 Besoins fonctionnels ........................................................................................................ 60
IV.2.1.3. Modèle de cas d’utilisation ............................................................................................. 60
IV.2.1.4. Modèle d’Analyse ........................................................................................................... 62
IV.2.1.5.Modèle de Conception ..................................................................................................... 63
IV.2.1.7. Modèle de déploiement ................................................................................................... 65
IV.3. Réalisation de notre application web ............................................................................................ 66
IV.3.1. Les interfaces graphiques ................................................................................................... 66
IV.3.2. Les code sources ................................................................................................................ 68
CONCLUSION .......................................................................................................................................... 83
BIBLIOGRAPHE ....................................................................................................................................... 84
I. Ouvrages ............................................................................................................................................. 84
II. Notes .................................................................................................................................................. 84
III. Webographie .................................................................................................................................... 84
TABLE DES MATIERES.......................................................................................................................... 85