‫الجمهوريــــــــــــــــــــــة الجزائريـــــــــــة الديمقراطيـــــــــة الشعبيـــــــة‬

‫وزارة التعليـــــــــــم العـــــــــــالي والبحـــــــــث العلـــــــمي‬

‫جامعة وهران للعلوم والتكنولوجيا دمحم بوضياف‬
‫كلية الرياضيات واالعالم االلي‬
République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur Et de la Recherche Scientifique
Université des Sciences et de la Technologie d’Oran Mohamed BOUDIAF
Faculté des Mathématiques et Informatique

Département : Informatique

Mémoire de fin d’études

Site Web : NAFTAL
Pour l’obtention du diplôme
de Licence

Domaine : Mathématiques – Informatique

Filière : Informatique.
Spécialité : Systèmes Informatiques

Présenté le :
Par :
-Bachir Yousra Jury Nom et Prénom Grade Université
-Meridji Meriem
Examinateur Hamza Toufik

Encadrant Hankouche Djamel

2019/2020

Page 1
 Remerciement

En préambule à ce mémoire on remercie ALLAH qui nous a aidés et nous a

donné la patience et le courage durant ces langues années d’études.
On tient d'abord à remercier notre cher Encadreur Mr Hankouche Djamel.
Notre remerciement à tous les membres de jury.
Notre amis Houcine Ghalem pour l’aide, les instructions et l’encouragement qu’il
nous a donné.
Enfin, je remercie tous ceux qui, de près ou de loin, ont contribué à la réalisation
de ce travail.

Page 2
 Dédicaces

On tiens à dédier ce modeste travail à tous ceux qui nous ont encouragé durant
toute la période de réalisation de ce travail.

En particulier :

-A nos chers parents qui se sacrifient pour nous voir réussir.

-A nos amis, merci à tous nos amis avec qui on partage des moments de notre vie
au fil du temps.

-Chers enseignants et tous ceux et celles dont les noms n’ont pas pu être cités.

Page 3
 Table des Matières
Introduction Générale :…………………………………………………………………………….…………….…………7
Chapitre 1 : Généralités sur le web : …………………………………………………………………………………………….8

1 Introduction : ..................................................................................................................8
2 Qu’est ce que c’est le Web ? ...........................................................................................9
3 Qu’est ce que c’est un Site Web ?....................................................................................9
4 Type des Site Web : .......................................................................................................10
4.1 Site Statique : .................................................................................................................... 10
4.1.1 Définition : ................................................................................................................. 10
4.1.2 Avantages : ................................................................................................................ 10
4.1.3 Inconvénients : .......................................................................................................... 10
4.2 Site Dynamique : ............................................................................................................... 11
4.2.1 Définition : ................................................................................................................. 11
4.2.2 Avantages : ................................................................................................................ 11
4.2.3 Inconvénients : .......................................................................................................... 11
5 Différence entre une page web et un site web ?............................................................12
6 Comment choisir entre un site Statique ou Dynamique ? ..............................................12
7 Conclusion : ...................................................................................................................12
Chapitre 2: Conception & UML…………………………………………………………………………………………………….13

1 Introduction : ................................................................................................................13
2 Définition d’une base de données : ...............................................................................14
3 SGBD : (Système de Gestion du Base de Données) ........................................................14
3.1 Définition : ........................................................................................................................ 14
3.2 Avantages d’utilisation du SGBD : ...................................................................................... 14
4 SGBDR : (Système de Gestion du Base de Données Relationnel) ....................................15
5 La différence entre le SGBD et le SGBDR : ......................................................................15
6 UML (Unified Modeling Language) : ..............................................................................16
6.1 Utilité : .............................................................................................................................. 16
6.2 Contenu :........................................................................................................................... 16
7 Diagramme utilisés : ......................................................................................................17
7.1 Diagramme de Cas d’Utilisation : ....................................................................................... 17
7.1.1 Définition : ................................................................................................................. 17

Page 4
 7.1.2 Administrateur : ......................................................................................................... 17
7.1.2.1 Diagramme de Cas d’Utilisation de l’Administrateur : ............................................. 17
7.1.2.2 Authentification : ................................................................................................... 18
7.1.3 Visiteur : .................................................................................................................... 18
7.1.3.1 Diagramme de Cas d’Utilisation du Visiteur : .......................................................... 18
7.1.3.2 Inscription : ............................................................................................................ 19
7.2 Diagramme d’activités : ..................................................................................................... 20
7.2.1 Définition : ................................................................................................................. 20
7.1.1 Diagramme d’Activités « Administrateur »: ................................................................ 20
7.2.2 Diagramme d’Activités « Demande de Recrutement » :.............................................. 21
7.3 Diagramme de Séquence: .................................................................................................. 22
7.3.1 Définition : ................................................................................................................. 22
7.3.2 Diagramme de Séquence « Authentification d’administrateur » : ............................... 22
7.3.3 Diagramme de Séquence « Recrutement » :............................................................... 23
8 Conclusion : ...................................................................................................................23
Chapitre 3: Implémentation…………………………………………………………………………………………………………24

1 Introduction : ................................................................................................................24
2 Les langages et Outils de programmations : ..................................................................25
2.1 HTML : (Hyper Text Markup Language) .............................................................................. 25
2.2 CSS : .................................................................................................................................. 26
2.3 JavaScript : ........................................................................................................................ 27
2.4 PHP : (Personal Home Pages) ............................................................................................. 27
2.5 JQuery : ............................................................................................................................. 27
2.6 Bootstrap : ........................................................................................................................ 27
2.7 Sublime Text : .................................................................................................................... 28
2.8 Xampserver : ..................................................................................................................... 28
3 Les principales captures de notre projet : ......................................................................28
3.1 Page d’Acceuil : ................................................................................................................. 28
3.2 Page contact : .................................................................................................................... 30
3.3 Page Login (Administrateur) :............................................................................................. 30
3.4 Page Produits : .................................................................................................................. 31
3.5 Page Formulaire : .............................................................................................................. 31
4 Captures de La BD : .......................................................................................................32
4.1 Table Admin : .................................................................................................................... 32

Page 5
 4.2 Table Message : ................................................................................................................. 32
4.3 Table Formulaire :.............................................................................................................. 32
5 Conclusion : ...................................................................................................................32
Conclusion Général :…………………………………………………………………………………………………………………….33

Table des figures :………………………………………………………………………………………………………………………..34

Bibliographie :………………………………………………………………………………………………………………………………35

Page 6
 Introduction générale :

Internet est un réseau informatique mondial qui met en relation des réseaux de tous
types, basée sur le protocole IP (Internet Protocoles), et sur laquelle s’appuient
différents services, dont le World Wide Web (plus couramment appelé Web) .

Internet ayant été popularisé par l’apparition du Web, les deux sont parfois confondus
par un public non averti. En réalité, le Web est une des multiples applications
d’Internet (courrier électronique, messagerie instantanée, les systèmes de
partage de fichiers poste à poste…).On peut dire que le Web est le moyen le plus
utilisé pour la diffusion des informations.

L’objectif de ce travail est de réaliser un site web dynamique pour l’entreprise de NAFTAL.

 Notre rapport se compose de 3 Chapitres :

 Le 1er chapitre –Généralités sur le Web- : Présentation des Sites Web, leurs types,
leurs avantages et inconvénients, et comment faire le choix entre un Site Statique ou
Dynamique.
 Le 2éme chapitre-UML- : présente les différents diagrammes sur lesquelles on s’est
basés pour la conception de notre site.
 Le 3éme chapitre- Implémentation : présente les outils de programmation utilisés
pour la réalisation de notre projet.

Page 7
 Chapitre 1 :
-Généralités sur le Web-

1 Introduction :
En quelques années, tout le monde a connu une croissance fulgurante dans le domaine
Internet. Au début le réseau confidentiel est devenu un réseau utilisé par tous
(entreprises ,particuliers et gouvernement). La technologie s’est développée rapidement
et la navigation est devenue plus facile et plus fluide. Les pages se sont petit à petit
remplies d'effets et de fonctionnalités améliorant l'expérience de l'utilisateur, le contenu
des pages s'est mis à changer sans intervention de l'internaute. Des pages statiques, où
cohabitaient simplement un texte et des images inertes, nous sommes progressivement
passés aux pages alimentées par des bases de données, au design élégant et conçues
pour faciliter l'accès à l'information. Puis l'avènement des applications des sites Web qui
ressemblent plus à des logiciels qu'à un simple petit site de présentation.

Dans ce chapitre nous allons présenter quelques notions sur le Web, les Sites Web ;
définitions, types, avantages et inconvénients de ces sites web, et enfin comment savoir
faire le choix entre le Site Statique et Dynamique.

Page 8
2 Qu’est ce que c’est le Web ?
 Définition :
Le Web est le terme communément employé pour parler du World Wide Web, ou WWW,
traduit en français par la toile d'araignée mondiale. Il fait référence au système hypertexte
fonctionnant sur le réseau informatique mondial Internet. Par abus de langage,
le Web désigne de façon plus large tout ce qui se rapproche à cet univers internet. On ne fait
plus toujours aujourd'hui la distinction technique entre ce que définit le Web et ce que
définit Internet.[1]

 Histoire :
La communauté scientifique reconnait la paternité de world wide web à Tim Berners
Lie qui créa le concept en 1990. Ce chercheur émérite est devenu président du 3w
Consortium, basé à Genève. L’internet est né de la rencontre de deux cultures, d’une part
celle de l’ARPA (Advanced Research Project Agency) dont le mandat est de susciter et
d’encourager l’innovation technique aux Etats-Unis, d’autre part, celle d’informaticien,
les hackers, imprégnés de culture de liberté, de valeurs d’autonomie individuelle et pour
vue paradoxalement d’une habitude de partage de savoir et de coopération [2].

3 Qu’est ce que c’est un Site Web ?

 Définition :
Un site web est l’ensemble des pages web et des ressources inter reliées entre elles par
des liens hypertextes, auxquelles l’internaute peut accéder par une adresse web appelée
URL, le tout enregistré sous le même nom de domaine.

Un site web ou site internet englobe des textes et multimédia, il est hébergé sur un
serveur web, auquel on peut accéder a travers le réseau internet ou intranet.[3]

Les sites web peuvent être distingués selon différents critères comme suit :

 Les Sites catalogue : permettent de présenter les produits d'une entreprise et de

les mettre en valeur.
 Les Sites d'information : fournissant des informations particulières à des
internautes.
 Les Sites personnels :(parfois pages perso) réalisés par des particuliers à titre
de loisir, le plus souvent par passion pour un sujet ou une discipline.
 Les Sites communautaires : réunissant des internautes autour d'un intérêt
commun.
 Les Sites intranet : accessibles de l'intérieur d'une entreprise ou d'une
direction, son but est de fournir et de partager des informations professionnelles.
 Les Sites vitrine : (sites plaquette ou sites identité) mettre en valeur l'image de
marque de l'entreprise, par exemple en affichant les produits ou services de
l'entreprise.

Page 9
4 Type des Site Web :
4.1 Site Statique :

4.1.1 Définition :
Les pages du site ne sont pas modifiables par des utilisateurs. Le site est donc rempli et
mis à jour par l'administrateur qui le fait depuis son poste de travail. Une fois le site mis
à jour sur l'ordinateur de l'administrateur, celui-ci devra être envoyé sur le site via FTP.
Le site est dit statique car les pages HTML qui le compose sont toujours identiques entre
deux visites sans mise à jour. Le serveur donc n'a pas besoin de éléments de scripting.

Figure 1 : Représentation d'un Site-Statique

4.1.2 Avantages :
 Créer un site web statique vous garantit une présence en ligne à des coûts maîtrises et
rapidement.
 L'agence prend en charge les mises à jour à moindre coût.

 Le site internet est mis à jour en local sur la machine de l'administrateur : il n'y a donc
pas de surprise une fois que le site est en ligne.
 Le site internet statique consomme peu de ressource serveur : le site n'utilisant aucune
technologie compliquée (PHP , JAVA ,…etc.).
 Les coûts d'entretien et de maintenance en activité sont très inférieurs à ceux d'un site
dynamique.

4.1.3 Inconvénients :
 Il faut maitriser le langage HTML pour pouvoir le modifier.
 Le contenu d’un site Statique et limité au fils du temps

Page
10
4.2 Site Dynamique :

4.2.1 Définition :

Les pages du site qui le compose peuvent être modifiables par les visiteurs. De plus,
entre deux visites sur un même site, le contenu de la page peut être différent sans action
de l'administrateur du site Internet. Les grandes applications de ce type de site sont : les
forums, les Wiki (Wikipédia étant le plus grand représentant du genre) et tous les sites
communautaires (Facebook, Twitter, …etc.). Le serveur qui fait fonctionner le site utilise
une technologie de Scripting (comme PHP) ainsi qu'une base de données comme MySQL.

Figure 2 : Représentation d'un Site-Dynamique

4.2.2 Avantages :

 Avec un site dynamique il est possible de réaliser une grande interaction avec les
visiteurs : les visiteurs peuvent donc rester beaucoup plus longtemps sur vos pages si les
fonctionnalités sont intéressantes.
 Création d'une base de données exploitable.
 Nombre de produit (données) illimité.
 Vos clients ou des internautes visiteurs peuvent voter, témoigner, donner leurs avis sur
un de vos produits ou sur vos services.
 L'internaute viendra visiter régulièrement votre site pour consulter vos nouvelles
offres.

4.2.3 Inconvénients :
 Un site web dynamique accusera cependant certaines limites comparé aux e-boutiques
et au site e-commerce.[4]

Page
11
5 Différence entre une page web et un site web ?
 Page Web : Une page Web est un fichier, similaire à ce fichier, qui contient du
texte, des images et des liens vers d'autres pages.
 Site Web : Un site Web est un regroupement de pages sur des sujets, des
entreprises et des organisations.

Le site Web a également une page d'accueil. Il s'agit d'une page Web qui aide les
lecteurs à parcourir le site pour trouver les informations dont ils ont besoin.

6 Comment choisir entre un site Statique ou Dynamique ?

On utilisera un Site Web Statique pour des utilisations bien spécifiques. Nous
utiliserons cette opération sur un site Web qui nécessite peu de maintenance,
rarement mis à jour et contient peu de pages.

En effet, la mise à jour de sites Internet statiques pouvant être fastidieuse, ce type
de site ne sera utilisé que dans des circonstances exceptionnelles. Car, chaque mise à
jour doit modifier la page HTML du site et la copier via FTP pour la rendre en ligne.

Si nous voulons interagir avec nos lecteurs, nous préférerions utiliser un Site Web
Dynamique. Les sites dynamiques permettent de se connecter en ligne à leurs sites
pour des mises à jour en temps réel. Une fois le site Web dynamique mis à jour, les
résultats seront affichés directement aux lecteurs. Par conséquent, pour les sites qui
permettent aux visiteurs de publier des commentaires (blogs) ou de parler à d'autres
lecteurs (forums), nous préférerons les sites dynamiques. De même, si le site doit
être mis à jour très fréquemment (plusieurs fois par semaine), alors même s'il n'est
pas prévu d'interagir avec les visiteurs, nous pouvons choisir de créer un site
dynamique.

Pour notre étude nous avons optés pour un site dynamique pour les avantages qu’il
propose.

7 Conclusion :
Le Web est très important et suite à notre recherche, nous pouvons dire qu’un site web
est un ensemble de pages web et ressources reliées par des liens hypertextes, qu’il existe
deux types de site web, statique et dynamique « qui est plus complexe que l’autre », et le
type de site pour notre projet.

Page
12
 Chapitre 2 :
-Conception et UML-

1 Introduction :
L'analyse et la conception sont des étapes du cycle de vie du développement logiciel . Ce
chapitre représentera la structure globale et l'architecture détaillée de mon système
pour son fonctionnement à l'aide des diagrammes UML, en précisant les outils utilisés
(Bases de Données (BD), SGBD et des SGBDR …) .

Page
13
2 Définition d’une base de données :
Les bases de données informatiques sont utilisées dans un grand nombre d’entreprises
pour stocker, organiser et analyser les données. Elles se chargent elles-mêmes de créer,
de mettre à jour ou de supprimer des données. Elles effectuent également des recherches
parmi les données qu’elles contiennent sur demande de l’utilisateur, et de lancer des
applications à partir des données.
Elles sont notamment utilisées par les compagnies aériennes pour gérer les réservations.
Elles sont utilisées dans la gestion de production, pour les enregistrements médicaux
dans les hôpitaux, ou encore pour les enregistrements légaux dans les compagnies
d’assurances. Les bases de données les plus larges sont généralement utilisées par les
agences gouvernementales, les grandes entreprises ou les universités.[12]

3 SGBD : (Système de Gestion du Base de Données)

3.1 Définition :
Un système de gestion de base de données (SGBD) est un logiciel système conçu pour
créer et gérer des bases de données. Il permet aux utilisateurs finaux de créer, modifier
et supprimer des données dans les bases de données. Il joue le rôle d’interface entre les
utilisateurs de la base et les programmes d’application. Le SGBD rend facile
l’organisation et l’accessibilité des données. Cet outil exceptionnel prend en charge la
gestion des données, du moteur de base de données et du schéma, qui définit la
structure logique du fichier de données. Ces trois éléments fondamentaux sont précieux
pour assurer la sécurité, l’intégrité des données et l’uniformisation des procédures
administratives. Les tâches d’administration de ce système incluent la gestion du
changement, le suivi de la performance, la sauvegarde et la récupération des données.
De nombreux systèmes de gestion de base de données sont également responsables de
l’audit de l’activité sur les fichiers de données.[13]

3.2 Avantages d’utilisation du SGBD :

 Le partage des données s’améliore au sein de l’organisation.
 Amélioration de la sécurité des données.
 Les systèmes de gestion de base de données minimisent l’incohérence des
données.
 Augmentation de la productive de l’utilisateur.
 Intégration efficace des données.
 Gain du temps, car le SGBD répond aux questions les plus simples.

Page
14
4 SGBDR : (Système de Gestion du Base de Données Relationnel)
Un SGBDR (Système de Gestion de Bases de Données Relationnelles) est le type
particulier de SGBD qui fera l’objet de ce cours. Il vous sera décrit plus tard ce qui fait
qu’une base de données est relationnelle.
Les bases de données les plus répandues sont :
 Oracle, qui est considéré comme un des SGBDR les plus performants.
 Microsoft SQL Server, la mouture de Microsoft, qui est intégré au Framework
.NET.
 MySQL, un logiciel libre fonctionnant souvent de pair avec Apache et Php, et de
ce fait très répandu dans la programmation web.
 Access, incorporé à Microsoft Office. Il présente l’énorme avantage de mettre à
disposition de l’utilisateur une interface graphique. En contrepartie il est mono-
utilisateur et de faible capacité.
Les SGBDRs sont généralement des serveurs auxquels des clients se connectent. Ils
doivent supporter plusieurs connections simultanées. Les clients dialoguent alors avec
le serveur pour lire ou écrire des donnés dans la base.[14]

5 La différence entre le SGBD et le SGBDR :

 Le SGBD suit le modèle de navigation tandis que le SGBDR suit un modèle

relationnel dans lequel les données sont stockées sous la forme de tables et où il
existe une relation entre ces tables.
 Dans le SGBD, les mêmes copies de données peuvent être stockées à plusieurs
endroits mais dans le SGBDR, la redondance des données est éliminée par la
normalisation.
 Comme les copies multiples sont stockées à différents emplacements dans le SGBD, il
est difficile de modifier le même fichier à différents emplacements. D'autre part, la
duplication des données dans le SGBDR étant négligeable, il est facile de valider les
modifications apportées aux données.
 L'accès aux données est plus rapide dans le cas d'un SGBDR. En revanche, le SGBD
consomme plus de temps pour accéder aux données.
 Seules les contraintes d'intégrité sont utilisées dans le SGBD, tandis que le SGBDR
utilise des contraintes basées sur un schéma et des dépendances de données.
 Les clés et les index ne sont pas utilisés dans le SGBD. Au contraire, dans le SGBDR,
ils sont utilisés pour établir une relation entre les tables.
 Le SGBD n'impose aucune contrainte sur les propriétés ACID. Inversement, les
SGBDR imposent des contraintes afin de conserver les propriétés ACID.
 Dbase, Microsoft Access, LibreOffice Base et ForPro sont quelques exemples de
SGBD. En revanche, il existe plusieurs SGBDR largement utilisés tels que SQL Server,
Oracle, Mysql, SQLite, etc.[15]

Page
15
6 UML (Unified Modeling Language) :
Le Langage de Modélisation Unifié est un langage de modélisation graphique à base
de pictogrammes conçu pour fournir une méthode normalisée pour visualiser la
conception d'un système. Il est couramment utilisé en développement logiciel et
en conception orientée objet.[16]

6.1 Utilité :
UML est utilisé pour spécifier, visualiser, modifier et construire les documents
nécessaires au bon développement d'un logiciel orienté objet. UML offre un standard de
modélisation, pour représenter l'architecture logicielle. Les différents éléments
représentables sont :

 Activité d'un objet/logiciel

 Acteurs
 Processus
 Schéma de base de données
 Composants logiciels
 Réutilisation de composants
Grâce aux outils de modélisation UML, il est également possible de générer
automatiquement tout ou partie du code d'une application logicielle, par exemple en
langage Java, à partir des divers documents réalisés.[16]

6.2 Contenu :

UML comporte 12 diagrammes standards représentant autant de "vues" d'un système

d'information. Ces diagrammes se répartissent en trois catégories : quatre représentent
la structure statique de l'application (diagrammes de classe, d'objet, de composant et de
déploiement) ; cinq représentent son comportement dynamique (diagrammes de cas
d'utilisation, de séquence, d'activité, de collaboration et d'état) ; trois représentent la
façon dont on peut organiser et gérer les modules qui composent le programme
(diagrammes de packages, sous-systèmes et modèles).
Ces diagrammes sont d'une utilité variable selon les cas et ils ne sont pas tous
nécessairement produits à l'occasion de la modélisation. Les plus utiles pour la maîtrise
d'ouvrage sont les diagrammes d'activité, de cas d'utilisation, de classe, d'objet, de
séquence, d'état et de transition. Les diagrammes de composants, de déploiement et de
collaboration sont surtout utiles pour la maîtrise d'œuvre à qui ils permettent formaliser
les contraintes techniques de la réalisation et la solution technique retenue [17]
 Diagramme d'activité
 Diagramme de cas d'utilisation
 Diagramme de classe
 Diagramme d'objet
 Diagramme de séquence
 Diagramme d'état

Page
16
7 Diagramme utilisés :
7.1 Diagramme de Cas d’Utilisation :

7.1.1 Définition :
Représente un ensemble de séquence d'action qui sont réalisées par le système et qui
produisent un résultat observable intéressant pour un acteur particulier.[20]

Pour illustrer les cas d'utilisation de mon système je vous présente les différents
acteurs qui interviennent dans notre application (administrateur, visiteur).

7.1.2 Administrateur :
L’Administrateur fait les taches suivantes :

-Authentification.

-Recevoir des messages.

-Gérer les Inscription.

7.1.2.1 Diagramme de Cas d’Utilisation de l’Administrateur :

Figure 3 : Diagramme de cas d'utilisation-Administrateur-

Page
17
7.1.2.2 Authentification :

Figure 4 : Diagramme de cas d'utilisation-Admin-Authentification

7.1.3 Visiteur :
-Consulter le Site.

-Envoyer des messages.

-S’inscrire au cas de recrutement.(cas particulier)

7.1.3.1 Diagramme de Cas d’Utilisation du Visiteur :

Figure 5 : Diagramme de cas d'utilisation-Visiteur-

Page
18
7.1.3.2 Inscription :

Figure 6 : Diagramme de cas d'utilisation -Visiteur-Inscription

Page
19
7.2 Diagramme d’activités :

7.2.1 Définition :
Les diagrammes d'activités permettent de mettre l'accent sur les traitements. Ils sont
donc particulièrement adaptés à la modélisation du cheminement de flots de contrôle et
de flots de données. Les diagrammes d'activités sont relativement proches des
diagrammes d'états-transitions dans leur présentation, mais leur interprétation est
sensiblement différente. On peut attacher un diagramme d'activités à n'importe quel
élément de modélisation afin de visualiser, spécifier, construire ou documenter le
comportement de cet élément.

7.1.1 Diagramme d’Activités « Administrateur »:

Figure 7 : Diagramme d'Activités-Administrateur-

-L’administrateur demande l’authentification en cliquant sur le bouton login.

- Le formulaire d’authentification s’affiche sur l’écran.

- L’administrateur entre son nom d’utilisateur et son mot de passe(qui sont déjà donné
par l’entreprise.

- Le système vérifie les coordonnés de l’administrateur sur la base.

- La confirmation du succès ou échec est envoyée à l’administrateur.

Page
20
7.2.2 Diagramme d’Activités « Demande de Recrutement » :

Figure 8 : Diagramme d'Activités-Recrutement-

-Le visiteur demande l’inscription.

- Le formulaire d’inscription s’affiche sur l’écran.

- Le visiteur remplit les champs demandé dans le formulaire.

- Le système vérifie les données entrées.

- Si les données sont acceptées, le système les envoie à la base si non, il revient à l’étape
précédente.

- Le serveur vérifie l’existence des données dans la base.

- Si les données existent déjà, un message d’erreur s’affiche.

- Si les données n’existent pas, l’inscription se termine avec succès.

Page
21
7.3 Diagramme de Séquence:

7.3.1 Définition :
Un diagramme de séquences est un diagramme d'interaction qui expose en détail la
façon dont les opérations sont effectuées : quels messages sont envoyés et quand ils le
sont. Les diagrammes de séquences sont organisés en fonction du temps qui s'écoule au
fur et à mesure que nous parcourons la page. Les objets impliqués dans l'opération sont
répertoriés de gauche à droite en fonction du moment où ils prennent part dans la
séquence.

7.3.2 Diagramme de Séquence « Authentification d’administrateur » :

Figure 9 :Diagramme de séquence-Authentification-

-l’administrateur entre son émail et son mot de passe.

-Une vérification se lance dans la base de données.

-Après la vérification si les données son correcte l’administrateur est connecté ,sinon un
message d’erreur s’affiche.

Page
22
7.3.3 Diagramme de Séquence « Recrutement » :

Figure 10 :diagramme de séquence demande de recrutement

- Le visiteur demande le formulaire d’inscription(dans le cas ou il cherche d’emploi ).

- Le formulaire s’affiche.

- Le visiteur rempli le formulaire.

- Une vérification de l’existence de la demande pour le visiteur dans la base se lance.

- Si cette demande existe déjà un message d’erreur s’affiche.

- Si c’est un nouveau, confirmation de l’inscription s’affiche.

8 Conclusion :
Dans ce chapitre on a présenté la conception de notre projet, La conception c’est l’étape
la plus importante pour démarrer le développement du projet.

Page
23
 Chapitre 3 :
-Implémentation-

1 Introduction :
Dans ce dernier chapitre on va présenter les outils de développement adoptés, les
langages utilisés, comment on les a utilisés pour la réalisation du site, puis on va
présenter les écrans les plus importants de notre site web.

Page
24
2 Les langages et Outils de programmations :

2.1 HTML : (Hyper Text Markup Language)

Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière
version HTML5, est le langage de balisage conçu pour représenter les pages web. C’est
un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également
de structurer sémantiquement la page, de mettre en forme le contenu, de créer des
formulaires de saisie, d’inclure des ressources multimédias dont des images, des vidéos,
et des programmes informatiques. Il permet de créer des documents
interopérables avec des équipements très variés de manière conforme aux exigences de
l’accessibilité du web. Il est souvent utilisé conjointement avec le langage de
programmation JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré
du Standard Generalized Markup Language(SGML).[5]

o Les balises principales utilisées dans le site :

 <nav>…</nav> : Utilisée pour la création du menu de navigation.

Figure 11 : Exemple de Balise nav

 <section>…</section> : Représente une section générique d’un document, par

exemple un groupe de contenu thématique.[10]
 <div>…</div> : (qui signifie division du document) est un conteneur générique qui
permet d’organiser le contenu sans représenter rien de particulier.[11]

Page
25
 Figure 12 : Exemple d'utilisation des balises "section et div"

2.2 CSS :
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage
qui permet de gérer la présentation d'une page Web. Le langage CSS est une
recommandation du World Wide Web Consortium (W3C), au même titre
que HTML ou XML.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents
HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices
de caractères, les couleurs, les marges et espacements, les bordures, les images de fond,
etc.
Le but de CSS est de séparer la structure d'un document HTML et sa présentation. En
effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre
les différentes parties d'un document) et la présentation. Mais cela pose quelques
problèmes. Avec le couple HTML/CSS, on peut créer des pages web où la structure du
document se trouve dans le fichier HTML tandis que la présentation se situe dans un
fichier CSS.[6]

Figure 13 : Exemple d'utilisation Css

Page
26
2.3 JavaScript :
JavaScript est un langage de programmation principalement utilisé pour créer des
pages web interactives. Ce langage, incorporé dans un document HTML, n'est pas visible
dans la fenêtre du navigateur. Il sert à améliorer le langage html en effet, il permet
d'exécuter des commandes du côté client (c'est-à-dire au niveau du navigateur et non du
serveur web). Ce code qui est exécuté par le navigateur Web est utile pour toutes les
interactions du client sur la page Web. Ce langage permet de manipuler des objets au
sens informatique : créer des fenêtres spécifiques, contrôler les données saisies dans les
formulaires, redimensionner certains objets, rediriger des liens…[7]

2.4 PHP : (Personal Home Pages)

Le PHP, pour Hypertext Preprocessor, désigne un langage informatique, ou un langage de script,
utilisé principalement pour la conception de sites web dynamiques. Il s'agit d'un langage de
programmation sous licence libre qui peut donc être utilisé par n'importe qui de façon totalement
gratuite.
Créé au début des années 1990 par le Canadien et Groenlandais Rasmus Lerdorf, le
langage PHP est souvent associé au serveur de base de données MySQL et au serveur Apache.
Avec le système d'exploitation Linux, il fait partie intégrante de la suite de logiciels libres LAMP.
Sur un plan technique, le PHP s'utilise la plupart du temps côté serveur. Il génère du code
HTML, CSS ou encore XHTML, des données (en PNG, JPG, etc.) ou encore des fichiers PDF. Il
fait, depuis de nombreuses années, l'objet d'un développement spécifique et jouit
aujourd'hui une bonne réputation en matière de fiabilité et de performances.[19]

2.5 JQuery :
JQuery st une bibliothèque JavaScript gratuite, libre et multiplateforme. Compatible avec
l'ensemble des navigateurs Web (Internet Explorer, Safari, Chrome, Firefox, etc.). Elle a été
conçue et développée en 2006 pour faciliter l'écriture de scripts. Il s'agit du Framework
JavaScript le plus connu et le plus utilisé. Il permet d'agir sur les codes HTML, CSS, JavaScript
et AJAX et s'exécute essentiellement côté client.[8]

 Comment intégrer Jquery dans mon code ?

Figure 14 : JQuery

2.6 Bootstrap :
Bootstrap est une collection d’outils utils à la création du design (graphisme, animation
et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est
un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de
navigation et autres éléments interactifs, ainsi que des extensions JavaScripit en option.
C'est l'un des projets les plus populaires sur la plate-forme de gestion de
développement GitHub.[9]

Page
27
  Comment intégrer Bootstrap dans mon code ?

Figure 15 : Bootstrap

2.7 Sublime Text :

Sublime Text est un éditeur de code source multiplateforme shareware avec une
interface de programmation d’application (API) Python . Il prend en charge nativement
de nombreux langages de programmation et langages de balisage , et des fonctions
peuvent être ajoutées par les utilisateurs avec des plugins , généralement construits par
la communauté et maintenus sous des licences de logiciels libres .[18]

2.8 Xampserver :
XAMPP est un ensemble de logiciels permettant de configurer un serveur Web local, un
serveur FTP et un serveur de messagerie. C'est une version de logiciel libre (X (cross)
Apache MariaDB Perl PHP), qui offre de bonnes performances. Il est flexible à utiliser et
célèbre pour son installation rapide et facile.Par conséquent, il ne nécessite pas
beaucoup de connaissances et peut fonctionner sur la plus large gamme de systèmes
d'exploitation.

Figure 16 : Logo Xampp

3 Les principales captures de notre projet :

3.1 Page d’Acceuil :

Figure 17 : Acceuil-1

Page
28
Figure 18 : Acceuil-2

Figure 19 : Acceuil-3

Page
29
3.2 Page contact :

Figure 20 :Contact

3.3 Page Login (Administrateur) :

Figure 21 : Login

Page
30
3.4 Page Produits :

Figure 22 : Produits

3.5 Page Formulaire :

Figure 23 : Formulaire d'inscription

Page
31
4 Captures de La BD :

4.1 Table Admin :

Figure 24 : Table Admin

4.2 Table Message :

Figure 25 : Table Message

4.3 Table Formulaire :

Figure 26 : Table Formulaire

5 Conclusion :
On a vu dans ce chapitre les langages et les outils utilisés pour le développement, on a
montré aussi quelques interfaces dans le but de donner une vision globale sur le
fonctionnement de notre système.

Page
32
 Conclusion Générale :

L’Objectif de notre projet est la conception et la réalisation d’une application web pour
l’entreprise de NAFTAL ,dans le but de mettre a la disposition des clients les
informations nécessaire qu’ils peuvent les aidées pour mieux connaitre l’entreprise ,les
produits, l’histoire de son développement …etc.

On a donné dans le premier chapitre des généralités sur le web (définition des sites
web ,ainsi que leurs types….etc), dans le deuxième chapitre on a présenté les différentes
phases de développement du projet (identification des acteurs avec les différents
diagrammes de cas d’utilisation ,diagrammes d’activités et les scenario de quelques
taches avec leurs diagrammes de séquence),dans le derniers chapitre on a présenté les
langages et les outils de programmation utilisées pour la réalisation de notre projet et
on a ajouter quelques fenêtres principales du site et dernièrement les captures des
tables de la base de données.

Page
33
 Tables des Figures
Figure 1 : Représentation d'un Site-Statique ...................................................................................... 10
Figure 2 : Représentation d'un Site-Dynamique ................................................................................. 11
Figure 3 : Diagramme de cas d'utilisation-Administrateur- ................................................................ 17
Figure 4 : Diagramme de cas d'utilisation-Admin-Authentification .................................................... 18
Figure 5 : Diagramme de cas d'utilisation-Visiteur-............................................................................ 18
Figure 6 : Diagramme de cas d'utilisation -Visiteur-Inscription........................................................... 19
Figure 7 : Diagramme d'Activités-Administrateur- ............................................................................. 20
Figure 8 : Diagramme d'Activités-Recrutement- ................................................................................ 21
Figure 9 :Diagramme de séquence-Authentification- ......................................................................... 22
Figure 10 :diagramme de séquence demande de recrutement ........................................................... 23
Figure 11 : Exemple de Balise nav...................................................................................................... 25
Figure 12 : Exemple d'utilisation des balises "section et div" .............................................................. 26
Figure 13 : Exemple d'utilisation Css .................................................................................................. 26
Figure 14 : JQuery ............................................................................................................................. 27
Figure 15 : Bootstrap......................................................................................................................... 28
Figure 16 : Logo Xampp..................................................................................................................... 28
Figure 17 : Acceuil-1 .......................................................................................................................... 28
Figure 18 : Acceuil-2 .......................................................................................................................... 29
Figure 19 : Acceuil-3 .......................................................................................................................... 29
Figure 20 :Contact............................................................................................................................. 30
Figure 21 : Login ............................................................................................................................... 30
Figure 22 : Produits ........................................................................................................................... 31
Figure 23 : Formulaire d'inscription ................................................................................................... 31
Figure 24 : Table Admin .................................................................................................................... 32
Figure 25 : Table Message................................................................................................................. 32
Figure 26 : Table Formulaire.............................................................................................................. 32

Page
34
 Bibliographie :
[1] https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203593-web-definition

[2] Francine Charest, François Bedard ; Les racines communicationnelles du web ; 2009.

[3] https://www.taktilcommunication.com/glossaire/projets-et-sites-internet/site-web.html

[4] https://www.ebrandigital.com/creer-un-site-web-dynamique-avantages-inconvenients

[5] https://fr.wikipedia.org/wiki/Hypertext_Markup_Language

[6] https://www.futura-sciences.com/tech/definitions/internet-css-4050

[7] https://www.gralon.net/articles/internet-et-webmaster/creation-site-internet/article-javascript--
-presentation-et-applications-1776.htm

[8] https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203587-jquery-definition

[9] https://fr.wikipedia.org/wiki/Bootstrap_(framework)

[10] https://developer.mozilla.org/fr/docs/Web/HTML/Element/section

[11] https://developer.mozilla.org/fr/docs/Web/HTML/Element/div

[12] https://www.lebigdata.fr/base-de-donnees

[13] https://www.digitaleo.fr/definition-sgbd

[14] https://enseignement.alexandre-mesle.com/sql

[15] https://fr.gadget-info.com/difference-between-dbms

[16] https://fr.wikipedia.org/wiki/UML_(informatique)

[17] http://www.volle.com/travaux/uml.htm

[18] https://en.wikipedia.org/wiki/Sublime_Text

[19] https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203597-php-hypertext-
preprocessor-definition

[20] Pascal Roques , « les cahier du programmeur UML2 , modéliser une application web » ,3edition ,
EYROLLES.

Page
35