Introduction générale 

:
notre monde est basé sur la technologie et principalement sur les données et le
traitement automatique de l’information, l'internet est l'une des technologie
importante dans la plupart des objets de notre vie, que ce soit dans l’objet
proprement dit, ou bien dans le processus de conception ou de fabrication de cet
objet.( Smartphone, ordinateur personnel, tablette tactile, etc.)

Internet aujourd’hui occupe une place importante dans la vie de tous les jours à
travers ses multiples secteurs à savoir : domaine médical et pharmaceutique ,de ce
fait et vue les vastes opportunités offert par cet innovation on a opté dans note
projet de fin d’étude de créer un site web dynamique pour résoudre un problème
que l’on rencontre Souvent quand on cherche un ou plusieurs médicament chez
une pharmacie et on ne le trouve pas, alors on est obligé de chercher dans
plusieurs pharmacies, ce qui consomme du temps, de l'énergie et de l’argent avec
de de grave problème en cas d'urgence.

Dans le cadre de notre PFE on a effectué un stage dans une boite de

développement informatique "HDConsulting" à Tlemcen, qui nous a proposé une
solution pour ce problème, cette solution permet de rechercher des médicaments
d'une façon automatique et facile à l'aide d'une simple application web qui permet
de vérifier où vous pouvez trouver ces médicaments sans perte de temps et d'efforts
avec une implication des pharmacies.

Chapitre 1
 Introduction
l’internet est considérée comme l'une des meilleures inventions humaines car elle
est considérée comme le moyen le plus important de diffuser les informations et les
actualités récentes, d'interaction entre les producteurs et les bénéficiaires de
l'information afin d’obtenir des informations sur n'importe quel sujet et sur
plusieurs supports : oral, audio ou vidéo de n'importe où dans le monde.
• Technologie Web:
Tim Berners-lee [cité article] est le créateur de web (1989), Il travaillait au Centre
européen de recherche nucléaire (CERN), l’objectif principal est de connecter tous
les appareils pour prendre les informations dont il avait besoin. avec des différents
systèmes d'exploitation d'un appareil à un autre (Windows, Unix et Mac), et ce
processus était difficile et prend beaucoup de temps, donc il voulait faire un
programme qui prend Les informations d'un système et les convertissent pour être
insérées dans un autre système.
Définitions :
Web : On retrouve ce terme dans World Wide Web (WWW).
Le World Wide Web est un système hypertexte utilisant le protocole http (hypertext
transfer protocol), permettant aux utilisateurs de visiter des pages sur le réseau
Internet par une application logicielle appelée navigateur Web.
Navigateur Web : Le navigateur est le programme qui nous permet de voir les
sites web. Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire
le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS
dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le
rôle du navigateur est donc essentiel[3]
Il existe de nombreux navigateurs web, pour toutes sortes de matériels (ordinateur
personnel, tablette tactile, téléphones mobiles, etc.) et pour différents systèmes
d'exploitation (GNU/Linux, Windows, Mac OS, iOS et Android).

Une page web : est un document écrit en HTML qui est accessible par Internet ou
d'autres réseaux à l'aide d'un navigateur Internet. Une page web est accessible en
entrant une adresse URL et peut contenir documents multimédia (images, vidéos,
sons) et des hyperliens vers d'autres pages web et fichiers.

HTTP: (Hypertexte Transfer Protocol) littéralement « protocole de transfert

hypertexte », est un protocole de communication informatique client-serveur
développé pour le World Wide Web. Il est utilisé pour transférer les documents
(document HTML, image, feuille de style, etc.) entre le serveur HTTP et le
navigateur Web.
URL : littéralement « localisateur uniforme de ressource », adresse unique une
page, Elle est formée du protocole à utiliser, du nom de domaine concernant le
serveur où se trouve la ressource, du chemin d‘accès et du nom local de la
ressource (voir figure 1).

Figure 1 URL

2- sites web :
Un Site web est un ensemble de pages lies par hyperlien, stockées sur un serveur,
et dont chacune a une adresse propre (URL). Il existe deux types de site :
• Site statique :

• Pas de base de données

• HTML/CSS seulement (avec du JS si l'on veut)
• Modifier le contenu via le code source
• Pas d'exécution de calcul avec le serveur

Figure 2 Site Statique

• Site dynamique :

• Avec Base de données

• PHP en plus des autres langages (pas obligatoirement du PHP mais c'est le
plus connu)
• Modifier le contenu via la base de données
• Exécution de calcul côté serveur

Figure 3 Site Dynamique

3-Application WEB :
Les applications Web peuvent être utilisées directement sur un navigateur Web
sans installation de programme ni mise à jours ; Lorsque l'ordinateur avec le
serveur est mis à jour, tous les ordinateurs utilisant l'application sont mis à jour
Ainsi, tous les utilisateurs accédant à la mise à jour à effectuer par le serveur sans
avoir besoin d'une seconde opération atteignent l'usage courant.  Grâce à
l'application Web, vous pouvez rejoindre vos clients où que vous soyez dans le
monde.  L'application Web offre une flexibilité dans les performances.  Cela
fonctionne quel que soit le navigateur. Avec l'application Web, plusieurs
utilisateurs peuvent utiliser mon site sur le serveur à distance avec une autorisation
spéciale.
Exemples: Starbucks (Starbucks a construit une appliactio web du système de
commande sur le Web, fournir une commande en ligne accessible et conviviale à
tous ses clients),
Flipboard (magazine social le plus populaire au monde, Flipboard permet aux
lecteurs de suivre tous les sujets, les nouvelles et les événements dont ils se
soucient)....................................................................

4-Langages disponibles
Le développement web est un domaine très large dans le milieu de l’informatique.
C’est pour cela qu’il existe de nombreux langages de programmation, ainsi que de
nombreuses technologies comme des Framework.
4.1 Langages de balisage :
Un langage de balisage est un langage permettant de structurer ou mettre en forme
des données en les organisant à l'aide de balises.
Les langages de balisage le plus connu :
• HTML : (HyperText Markup Language) : il a fait son apparition dès 1991
lors du lancement du Web. Son rôle est de gérer et organiser le contenu.
C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du
texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre,
ceci est mon menu, voici le texte principal de la page, voici une image à
afficher, etc. ».[2]
HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.

HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996

avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les règles et le fonctionnement de cette version sont
donnés par le W3C (tandis que la première version avait été créée par un seul
homme).

HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de

nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.

HTML 4 : cette version aura été utilisée un long moment durant les années 2000.
Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui
découpent une page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la
première fois d'exploiter des feuilles de style, notre fameux CSS !

HTML 5 : c'est LA dernière version. De plus en plus répandue, elle fait beaucoup
parler d'elle car elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est cette version que nous allons
découvrir ensemble.
• XHTML : Extensible HyperText Markup Language ……………………..
soit tableau entre HTML XML
4.2 Langages de mise en forme (CSS) :
Les feuilles de style en cascade CSS (Cascading Style Sheets) est un langage qui
décrit le style d'un document HTML, il décrit comment les éléments HTML
doivent être affichés.
CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage
qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères,
etc.

CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de
nombreuses options. On peut désormais utiliser des techniques de positionnement très précises,
qui nous permettent d'afficher des éléments où on le souhaite sur la page.

CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues
comme les bordures arrondies, les dégradés, les ombres, etc.
4.3 Langages de script :
Un langage de script est un langage de programmation de HTML et du Web,
permet de contrôle l'application d'un programme, Ils sont interprétés par le
navigateur web du visiteur.
Les langages de script  les plus connu :
• JavaScript :langage de script orienté objet ,Il a été inventé en 1995 par
Brendan Eich[1],est un qui vous permet de créer des pages HTML
dynamiques avec des effets interactifs dans une page Web.
VBScript :est un langage de script général développé sur Visual Basic et
développé par Microsoft, langage de script actif

4.4 Langages serveur :

Un langage serveur  est un langage de script de serveur et un outil puissant pour
créer des pages Web dynamiques et interactives.
Les langages serveur les plus connu :
• PHP
• Python
• Ruby
• Java
• C++
5-Base de données :
La construction des pages (avec un langage) dont le contenu et les données sont
construits dynamiquement en fonction de l'usage des utilisateurs ou d'autres
paramètres externes peut faire appel à une ou plusieurs bases de données.

La base de données les plus connu : tableau comparatif (statistiques d’utilisation,

performances…)
• MySQL
• PostgreSQL
• SQL Server
• Oracle
• SQLite
6-Technologie Framework :
Un cadre Web (Web Framework) ou un cadre d'application Web (Web
Applicalition Framework) est un cadre logiciel conçu pour prendre en charge le
développement d'applications Web, y compris des services Web, des ressources
Web et des API Web. Les Framework Web offrent un moyen standard de créer et
de déployer des applications Web sur le World Wide Web. Par exemple, de
nombreux Framework Web fournissent des bibliothèques pour l'accès aux bases de
données (exemples……). Bien qu'ils ciblent souvent le développement de sites
Web dynamiques, ils s'appliquent également aux sites Web statiques.
De nombreux Framework suivent le modèle architectural MVC (Model View
Controller) selon la figure n°4, pour séparer le modèle de données avec les règles
métier de l’interface utilisateur. Ceci est généralement considéré comme une bonne
pratique car il modularise le code, favorise la réutilisation du code et permet
d’appliquer plusieurs interfaces.

Figure 4 Model MVC

6.1Les types des Framework
Il existe différents types de framework :
 • Front end : Le terme «Front-End» désigne les éléments du site que
l'on voit à l'écran et avec lesquels on peut interagir. Ces éléments sont
composés de HTML, CSS et de Javascript contrôlés par le navigateur web
de l'utilisateur.
• Back end : Le back-end, ou "côté serveur", est essentiellement le
fonctionnement, les mises à jour et les modifications du site. Cela fait
référence à tout ce que l'utilisateur ne peut pas voir dans le navigateur,
comme les bases de données et les serveurs.

Le tableau suivant présente différents exemples :

Les Frameworks Front-end Les Frameworks Back -end

• Bootsrap • Laravel
• Foundation. • Phoenix
• Skeleton. • Django
• Materialize CSS. • Ruby
• UIkit. • Flask
• PURE. • Spring
• Bulma • ASP.NET Core

Conclusion :
Ce chapitre nous a permis de détailler le cadre général de notre travail en
présentant la technologie web, l’application web et les langages disponible. Dans
ce qui suit nous allons entamer la première phase de réalisation de notre projet
pour ………….

[1] Baptiste Pesquet,Apprenez à coder anec Javascript , openclassroom

[2] Mathieu Nebra , Apprenez à creer votre site,openclassroom