Vous êtes sur la page 1sur 68

Programmation web

Avancée

Mustapha AMROUCH
Plan de déroulement
Partie 1
Organisation du module
 Organisation des horaires
 Objectif global
 Prés requis
 Objectifs secondaires
 Programme et contenu
 Modalités d’évaluation
Partie 2
Introduction à la programmation web
Organisation du module

Organisation horaire du Module ?

• 7 semaines
• 1 séance de cours par semaine
• 1 séance de TP par semaine
• 1 séance pour les présentations et divers
[ Présentations sur le développement Web :
Outils +Technologies ]
• Mini-projets à faire et à rendre
Organisation du module

Qu’est ce qu’on va voir


dans le cours ?

La Programmation php
avancée
Organisation du module
Objectif générale
Être
Être capable
capable de
de créer
créer et
et concevoir
concevoir des
des applications
applications web
web dynamiques
dynamiques
avec
avec PHP
PHP et
et MySQL.
MySQL.

Pré-requis:

 Bonne
Bonne connaissance
connaissance du
du programmation
programmation coté
coté client
client (( FRONT
FRONT END)
END)
[HTML,
[HTML, CSS,
CSS, JAVASCRIPT……]
JAVASCRIPT……]
 Bonne
Bonne connaissance
connaissance dans
dans la
la programmation
programmation structurées
structurées et
et objet
objet
 Connaître
Connaître les
les bases
bases de
de données
données relationnelles
relationnelles
 Disposer
Disposer d'une
d'une première
première expérience
expérience en
en développement
développement
Organisation du module
Objectifs spécifiques

 Maîtriser
Maîtriser les
les bonnes
bonnes pratiques
pratiques de
de programmation
programmation PHP
PHP
 Être
Être capable
capable d'exploiter
d'exploiter une
une base
base de
de données
données avec
avec PHP
PHP
 Être
Être capable
capable de
de structurer
structurer ses
ses codes
codes selon
selon l’architecture
l’architecture MVC
MVC
 Gagner
Gagner du
du temps
temps grâce
grâce àà la
la création
création et
et l'utilisation
l'utilisation de
de bibliothèques
bibliothèques
[PDO,
[PDO, FPDF
FPDF ,, GD….]
GD….]
Organisation du module
Programme et contenu

Chapitre I : fonctionnement et les bases du langage PHP


Chapitre II : Traitement des formulaires
Chapitre III : Programmation orienté objet
Chapitre IV : Cookies et sessions
Chapitre V : Gestion des fichiers
Chapitre VI : Liaison php et base de données Mysql
Chapitre VII : Gestion des emails et Gestion des erreurs
Chapitre VIII : l’architecture MVC
Chapitre I X: Gestion des images (bibliothèque GD) et des
documents (FPDF)
Organisation du module
Programme et contenu
Chapitre I : fonctionnement et les bases du langage PHP

 Fonctionnement
Fonctionnement et
et Histoire
Histoire
 Structure
Structure de
de programme
programme et
et Intégration
Intégration du
du PHP
PHP dans
dans une
une page
page HTML
HTML
 Règles
Règles générales
générales (commentaires,
(commentaires, affichages…..)
affichages…..)
 Variables,
Variables, constantes
constantes et
et types
types de
de données
données
 Opérateurs
Opérateurs et
et structures
structures de
de contrôle
contrôle
 Fonctions,
Fonctions, paramètres
paramètres et
et portée
portée des
des variables
variables
 Traitement
Traitement des
des chaines
chaines de
de caractères
caractères
 Exercices
Exercices d’applications
d’applications
Organisation du module
Programme et contenu
Chapitre I : fonctionnement et les bases du langage PHP (suite)

 Tableaux
Tableaux
 Fonctions
Fonctions mathématiques
mathématiques
Fonctions
Fonctions dates
dates et
et heures
heures
 Fonctions
Fonctions usuelles
usuelles
(inclusions,
(inclusions, entête,
entête, arrêt
arrêt ,, affichage
affichage information)
information)
 Les
Les variables
variables superglobales
superglobales
 Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre II: Traitement des formulaires

 Rappel
Rappel sur
sur les
les formulaires
formulaires en
en HTML
HTML
 Gestion
Gestion d’un
d’un formulaire
formulaire et
et méthodes
méthodes d’envoi
d’envoi
 Méthode
Méthode GET
GET
 Méthode
Méthode POST
POST
 Envoi
Envoi et
et réceptionne
réceptionne des
des données
données sur
sur tous
tous les
les composants
composants
 Téléchargement
Téléchargement d’un
d’un fichier
fichier sur
sur serveur
serveur
 Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre III: Programmation orienté objet

 Classes
Classes et
et objets
objets
 Encapsulation
Encapsulation et
et visibilité
visibilité
 Constructeur
Constructeur et
et déstructeur
déstructeur
 Héritage
Héritage
 Surcharge,
Surcharge, redéfinition
redéfinition et
et polymorphisme
polymorphisme
 Classes
Classes abstraites
abstraites et
et finales
finales
 Interfaces
Interfaces
 Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre IV: Cookies et sessions

 Intérêts
Intérêts et
et rôles
rôles
 Création
Création et
et utilisation
utilisation des
des cookies
cookies
 Modification
Modification et
et suppression
suppression des
des cookies
cookies
 Fonctions
Fonctions de
de gestion
gestion des
des sessions
sessions
 démarrage
démarrage d’une
d’une session
session
 récupération
récupération des
des données
données d’une
d’une session
session
 Modification
Modification et
et suppression
suppression des
des données
données d’une
d’une sessions
sessions
 Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre V: Gestion des fichiers

 Modes
Modes d’ouvertures
d’ouvertures et
et fermetures
fermetures
 Fonctions
Fonctions de
de lecture
lecture
 Fonctions
Fonctions d’écriture
d’écriture
 Fonctions
Fonctions de
de position
position
 Fonctions
Fonctions des
des informations
informations
 Fonctions
Fonctions de
de manipulation
manipulation
 Gestion
Gestion des
des dossiers
dossiers
 Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre VI: Liaison php et Mysql

 PhpMyAdmin
PhpMyAdmin
 Approche
Approche classique
classique Mysql
Mysql
 Approche
Approche objet
objet Mysqli
Mysqli
 L’objet
L’objet PDO
PDO
Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre VII: - Gestion des emails
- Gestion des erreurs

 Envoi
Envoi des
des emails
emails
 Recevoir
Recevoir des
des emails
emails
 Les
Les erreurs
erreurs internes
internes
(niveaux,
(niveaux, gestion
gestion et
et filtrage)
filtrage)
 Les
Les exceptions
exceptions
(( Lacement
Lacement et
et réceptionne
réceptionne d’une
d’une exception)
exception)
Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre VIII: l’architecture MVC

 Introduction
Introduction
 Modèle,
Modèle, Vue
Vue et
et Contrôleur
Contrôleur
 Structurer
Structurer un
un code
code selon
selon MVC
MVC
MVC
MVC et
et POO
POO
Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre VIII: Gestion des images (bibliothèque GD)

 Création
Création et
et libération
libération de
de modèle
modèle image
image
 Exportation
Exportation d’image
d’image
 Manipulation
Manipulation de
de modèle
modèle image
image
 Méthode
Méthode de
de gestion
gestion de
de texte
texte
 Autres
Autres outils
outils open
open source
source
Exercices
Exercices d’application
d’application
Organisation du module
Programme et contenu
Chapitre IX: Gestion des documents (bibliothèque FPDF)

 choix
choix des
des unités,
unités, format
format des
des pages
pages
 Gestion
Gestion d’entetes
d’entetes et
et de
de pieds
pieds
 Couleurs,
Couleurs, police
police et
et alignement
alignement de
de texte
texte
 images
images
Exercices
Exercices d’application
d’application
Organisation du module
Evaluation du Module
- Note de la présentation.
- Notes des mini-projets.
- Note d’examen de fin semestre.

Infos :
- Transparents du cours et feuilles de TP disponibles chaque semaine sur
https://www.edmodo.com/home#/group?id=19016167

- Email : m.amrouch@uiz.ac.ma
Partie 2Programmation web
Avancée
Introduction à la programmation web

C’est quoi la
programmation web?
Vision globale et contexte

Programmation?
Protocoles Internet?
HTTP Services?
Programmation Internet
web WEB protocoles?
Web et ses évolutions?
Fonctionnement?
Développement web:
Types?
Standards?
Outils?
Adresses Architectures?
URL
Plan de Partie 2
Types de programmation

INTERNET

WEB

Technologies coté client

Technologies coté serveurs

Architecture et web
Programmation et ses types
Programmation:
Représente l’étape de la rédaction du code source d'une application ou d’un programme
.ou d’une page web

Impérative [ Assembleur, Fortran]

Fonctionnelle [ C, Basic et Pascal]

Objet [ C++, C#, JAVA, Python..]

Logique [ Prolog, Lisp, Mercury]

Descriptive [ HTML, XML, LATEX]

événementielle [ VB NET, DELPHI, JAVA]


Programmation et ses types
Fonctionnelle
[ HTML, CSS,
Impérative
XML
JAVASCRIPT,
VBSCRIPT
WEB Objet événementielle
PHP, ASP,
Python,
Descriptive Logique
Perl,Ruby
JAVA …
]

web:
web: service
service de réseau Internet
de réseau le World
Internet,, le World Wide
Wide Web
Web constitue
constitue un
un système
système hypermédia
hypermédia
d’informations..
d’informations

Page
Page web:
web: Ressource
Ressource du
du web
web hypermédia,
hypermédia, identifiée
identifiée et
et consultable
consultable par
par un navigateur ..
un navigateur

Site
Site web:
web: Ensemble
Ensemble de
de pages
pages web
web hyper
hyper liées
liées et
et accessible
accessible àà une
une adresse
adresse web.
web.

C’est quoi Internet?


Internet [INTERconnected NETworks]
 1959 :début de projet Advanced Research Projects Agency (ARPA)
 1972 :présentation Advanced Research Projects Agency (ARPANET) au public
 1973 : Mise au point de TCP/IP
 1982 : Adoption de TCP/IP et définition du mot Internet
 1985-86: Création de la NSFnet par Les grandes administrations, les ministères
 1990: fusion NSFNet + ARPANET= naissance à Internet.

Internet
Internet :: Réseau
Réseau informatique
informatique mondial
mondial constitué
constitué d'un
d'un ensemble
ensemble de
de réseaux
réseaux plus
plus petits
petits
(nationaux,
(nationaux, régionaux)
régionaux) interconnectés
interconnectés entre
entre eux
eux par
par le
le protocole
protocole de
de communication
communication TCP/IP
TCP/IP
(Transmission
(Transmission Control
Control Protocol
Protocol /Internet
/Internet Protocol)
Protocol)
Internet [INTERconnected NETworks]
Internet
Internet == {Arpanet,
{Arpanet, NSFnet,
NSFnet, NYsernet,
NYsernet, des
des réseaux
réseaux locaux
locaux d’universités
d’universités et
et centres
centres de
de
recherche,
recherche, réseaux
réseaux militaires}
militaires} ++ votre
votre ordinateur
ordinateur ou
ou mobile
mobile s'il
s'il est
est connecté
connecté àà Internet.
Internet.

Internet:
Internet: est
est connecté
connecté par
par des
des moyens
moyens matériels
matériels et
et logiciels
logiciels (TCP/IP).
(TCP/IP).

Matériels [ routeurs, satellites, fibres optiques, répétiteurs..]

Logiciels Chaque ordinateur est identifié par une adresse :IP (193.52.64.47)

C’est quoi TCP/IP?


Internet [INTERconnected NETworks]
Le
Le principe
principe dede protocole
protocole de
de communication
communication TCP|IP
TCP|IP et
et que
que chaque
chaque ordinateur
ordinateur sur
sur le
le
réseau
réseau est
est identifié
identifié par
par une
une adresse
adresse IP
IP

Adresse IP (internet protocole) :


– adresse de 32 bits
• notée sous forme de 4 nombres entiers (0-255)
• séparés par des points (ex. : 193.252.19.4)
– permet au protocole IP d’identifier de manière unique
les n° de réseau (Net-Id)
et N° de machine (Host-Id) de l’expéditeur et du destinataire d’un paquet IP

Net-Id Host-Id
193 252 19 3

Adresse réseau Adresse machine


Adresse ip
Internet [INTERconnected NETworks]
Structure
Structure d’Internet
d’Internet == -Structure
-Structure matérielle
matérielle diversifiée
diversifiée
-Structure
-Structure logique
logique uniques
uniques (TCP/IP)
(TCP/IP)

Internet = { Clients + Serveurs + Routeurs + Supports de communication + …}

Fournit un ensemble des services, Quels sont les services et


applications et protocoles les protocoles d’Internet?
Services et protocoles rendus par internet

HTTP
HTTP [[HyperText
HyperText Transfer Protocol]] :: WEB
Transfer Protocol WEB (World (World Wide Wide Web) Web)
HTTPS
HTTPS [[HTTP Secure]:
HTTP Secure ]: web
web sécurisé
sécurisé
FTP
FTP [[File
File Transfer Protocol]] :: Transfert
Transfer Protocol Transfert de de fichiers
fichiers
NNTP[
NNTP[Network
Network News
News Transfert Protocol]] :: les
Transfert Protocol les forums
forums de de discussion
discussion Usenet
Usenet
POP
POP 33 [[PostPost Office
Office Protocol version 33]] :: courrier
Protocol version courrier électronique
électronique (réception)
(réception)
SMTP
SMTP [[SimpleSimple Mail
Mail Transfer Protocol]] :: Messagerie
Transfer Protocol Messagerie électronique
électronique (envoi)
(envoi)
IRC
IRC [[Internet
Internet Relay Chat]] :: discussion
Relay Chat discussion instantanée
instantanée
SSH
SSH [[Secure Shell]] :: connexion
Secure Shell connexion àà distance
distance sécurisée
sécurisée
IMAP
IMAP [[Internet
Internet Message
Message Access Protocol]] :: mode
Access Protocol mode d'échange
d'échange de de courrier électronique..
courrier électronique
SSL
SSL [[Secure
Secure Sockets Layer]] ou
Sockets Layer ou TLS
TLS [[Transport
Transport Layer Security]] :: transaction
Layer Security transaction sécurisée(
sécurisée( paiement
paiement sécurisé)
sécurisé)
ToIP
ToIP [[telephony
telephony over IP]] ,, VoIP
over IP VoIP [[voice
voice over IP]] :: téléphonie
over IP téléphonie et et voix
voix sur
sur IP
IP
(TOIP=Application+Terminaux+VOIP)
(TOIP=Application+Terminaux+VOIP)
RTP
RTP [[Real-time
Real-time Transfert Protocole]:
Transfert Protocole ]: visio-conférence,
visio-conférence, visio-enseignement
visio-enseignement
DNS
DNS [[Domain
Domain Name System]:
Name System ]: système
système de
de résolution
résolution de
de noms
noms Internet.
Internet.

Quels sont les ports associés à ses services?


Services et ports associés

Port Service ou Application

Plusieurs
Plusieurs services
services fonctionnent
fonctionnent sur
sur internet
internet 0 ---

80 HTTP (WEB)
21 FTP
Chaque
Chaque service
service possède
possède un
un port
port codé
codé sur
sur 16bits
16bits
23 Telnet

25 SMTP
Port:
Port: numéro
numéro unique
unique sur
sur une
une machine,
machine, qui
qui
53 Domain Name System
identifie
identifie l'application
l'application àà laquelle
laquelle des
des données
données sont
sont
destinées.
destinées. 63 Who is

80 HTTP

Les 110 POP3


Les ports
ports des
des serveurs
serveurs :: 0->1023
0->1023
Les
Les ports
ports des
des clients
clients :: 1023
1023 ->
-> 65535
65535 119 NNTP

… …

1023 ---

C’est quoi le web?


WEB[World Wide Web]

WEB:
WEB: SSystème
ystème hypermédia
hypermédia d’informations
d’informations public
public réparti
réparti sur
sur des
des sites
sites internet
internet consultables
consultables
par
par des
des navigateurs
navigateurs

WEB:
WEB: Inventé
Inventé par
par Tim
Tim Berner-Lee
Berner-Lee en
en 1989
1989 au
au CERN
CERN de
de Genève.
Genève.

Trois évolutions du web:


 Web 1.0 : pages statique
 Web 2.0 : axé sur les personnes
 Web 3.0 : axé sur les objets et la sémantique

C’est quoi le web 1.0, le web 2.0


Et le web 3.0?
WEB 1.0

WEB
WEB 1.0:
1.0: statique
statique et
et textuel
textuel des
des experts
experts vers
vers les
les utilisateurs.
utilisateurs.

Fonctionnalités
• Consultation
• Recherche dans des répertoires

Outils
•page web personnelle
•formulaires à compléter
•certains outils d’interaction (forums)

Technologies sous jacente


HTML, JAVASCRIPT

Web en lecture seulement


WEB 2.0

WEB
WEB 2.0:
2.0: Participatif
Participatif (tous
(tous yy créent
créent des
des contenus),Dynamique
contenus),Dynamique (changement
(changement continu)
continu) et
et
Multimédia
Multimédia

Fonctionnalités
• Contribution au contenu
• Recherche avancée
•Personnalisation des interfaces
•Interaction par des moyens #

Outils
•Blogues
•Wikis
•Réseaux sociaux
•Agrégation et syndication
•Partages des médias, signets

Technologies sous jacentes


bases de données, XML, CSS,
Ajax, RSS,

Web en lecture et écriture


Outils WEB 2.0

Blogue
Blogue (cybercarnet/bloc
(cybercarnet/bloc note):
note): Un
Un blogue,
blogue, c’est
c’est comme
comme un
un journal
journal où
où l’auteur
l’auteur peut
peut
publier
publier et
et partager
partager de
de l’information
l’information et
et des
des réflexions.
réflexions. Un
Un blogue
blogue ne ne demande
demande aucune
aucune
connaissances
connaissances auau niveau
niveau de de langage.
langage. La
La publication
publication est
est facile
facile et
et instantanée.
instantanée.

Réseau alternatif de convivialité meilleur blog marocain 2015


http://www.mabulle.com/ http://vivre-au-maroc.com/

WIKI:
WIKI: Le
Le terme
terme wiki
wiki est
est un
un mot
mot Hawaïen
Hawaïen qui
qui signifie
signifie rapide.
rapide. Le
Le wiki
wiki est
est une
une
application web qui
application web qui permet
permet la
la création,
création, la
la modification
modification et
et l'illustration collaboratives de
l'illustration collaboratives de
pages à
pages à l'intérieur
l'intérieur d'un site
d'un site web.
web.

https://fr.wikipedia.org/
Créer son wiki par :
http://www.xwiki.com/en/
Outils WEB 2.0

Réseaux
Réseaux sociaux
sociaux :: Moyens
Moyens de
de communication
communication sociale
sociale qui
qui sont
sont sous
sous forme
forme des
des
Communautés
Communautés d’internautes
d’internautes regroupés
regroupés en
en ligne
ligne autour
autour de
de centres
centres d’intérêt
d’intérêt communs.
communs. Les
Les
informations
informations relatives
relatives àà un
un membre
membre du
du réseau
réseau sont
sont appelées
appelées «profil».
«profil».
Outils WEB 2.0

Partages
Partages des
des média:
média:
Outils
Outils ou
ou plateformes
plateformes permettent
permettent aux
aux internautes
internautes de
de partager
partager des
des contenus
contenus multimédia.
multimédia.

Partage de vidéos : YouTube, DailyMotion, Vimeo

Partage de photos : Flickr, Instagram

Partage de liens : Delicious, StumbleUpon

Partage de musique : Soundcloud, Bandcamp, Deezer
Outils WEB 2.0

Syndication
Syndication ou
ou flux RSS (( Really
flux RSS Really Simple
Simple Syndication)
Syndication) :: Ce
Ce système
système permet
permet de
de
diffuser
diffuser en
en temps
temps réel
réel les
les nouvelles
nouvelles des
des sites
sites d'informations
d'informations ,ce
,ce qui
qui permet
permet de
de consulter
consulter
rapidement
rapidement ces
ces dernières
dernières sans
sans visiter
visiter le
le site
site

RSS
RSS et
et notification
notification :: RSS
RSS permet
permet
aux
aux utilisateurs
utilisateurs de
de souscrire
souscrire àà une
une page
page
web
web et
et d'être
d'être notifiés
notifiés de
de tout
tout
changement
changement sur sur cette
cette page.
page.

Agrégateur:: Un
Agrégateur Un moyen
moyen pour
pour lire
lire les
les files
files RSS.
RSS.

en ligne : Netvibes clients : FeedReader

Les outils (Thunderbird et Firefox) qui gèrent aussi les fils RSS.
WEB 3.0

WEB
WEB 3.0:
3.0: sémantique
sémantique ou
ou intelligent
intelligent qui
qui s’adapte
s’adapte automatiquement
automatiquement aux
aux préférences
préférences des
des
usagers
usagers

Fonctionnalités
• « tout en ligne » : travail,
entreposage, divertissement, etc.
• contextualisation de l’information

Outils
•environnements personnels en ligne
•terminaux mobiles et intelligents
• mondes virtuels

Technologies sous jacentes


API, RDF, OWL, etc.
agents intelligents

Web en lecture et écriture avec de la sémantique


Fonctionnement de WEB

Architecture client/serveur
(1): Requête

Le client(s)

(2): Réponse Internet


Protocole TCP/IP

Le serveur
Fonctionnement de WEB
Le client(s)
Adresse client: 3 : to 62.4.78.153:80
211.180.12.8 requête HTTP

(Mozilla Firefox,
Microsoft IE,
Apple Safari,
Google
Chrome,
Opera )

1 : c’est quoi
2 : www.google.com www.google.com
c’est 62.4.78.153 ?

Le serveur
4 : to 211.180.12.8 HTTP
Résultat de la requête HTTP
(Apache,
DNS IIS)
DNS

DNS:
DNS: Serveur
Serveur chargé
chargé de
de La
La transformation
transformation du
du nom
nom de
de domaine
domaine en
en adresse
adresse IP
IP

DNS

http://www.google.fr

IP
serveur racine DNS (TLD)

Le client obtient l’IP auprès d’un serveur DNS .


En montant dans la hiérarchie.

Les domaines du premier niveau: edu com org gov info biz fr ma

amazon unice free


Le protocole HTTP

HTTP:
HTTP: protocole
protocole de
de communication
communication et
et d’échange
d’échange entre
entre un
un client
client et
et un
un serveur
serveur web.
web. Port:
Port: 80
80

HTTP:
HTTP: transférer
transférer un
un fichier
fichier MIME
MIME localisé
localisé par
par son
son URI
URI entre
entre un
un serveur
serveur web
web et
et un
un client
client

MIME
MIME [[Multipurpose
Multipurpose Internet
Internet Mail Extensions]]
Mail Extensions :: Type
Type des
des données
données transférés
transférés par
par le
le HTTP
HTTP
(text/html,
(text/html, text/plain,
text/plain, application/pdf,
application/pdf, application/zip,
application/zip, image/jpeg,
image/jpeg, video/mpeg,
video/mpeg, audio/x-wav,
audio/x-wav, etc.)
etc.)

URL
URL [[Uniform
Uniform Resource Locator ]] ou
Resource Locator ou URI
URI [[Uniform
Uniform Resource Identifier]] ::
Resource Identifier
AAdresse
dresse qui
qui identifie
identifie sur
sur le
le Web
Web un
un document
document ou
ou un
un fragment
fragment

Protocol
Protocol || nom
nom serveur
serveur || port
port || chemin_d_accès_à_la_ressource
chemin_d_accès_à_la_ressource || fichier|#fragement
fichier|#fragement

http://www.limsi.fr/~xtannier/fr/Enseignement/index.html#web_bd
http://www.limsi.fr/~xtannier/fr/Enseignement/index.html#web_bd

2 variantes [ HTTP 1.0] & [ HTTP 1.1]


Requête HTTP

Une
Une requête
requête http
http est
est un
un ensemble
ensemble de
de lignes
lignes envoyées
envoyées au
au serveur
serveur par
par un
un client
client

Syntaxe générale requête HTTP


Elle comprend:
Ligne
Ligne dede commande
commande (Méthode
(Méthode àà appliquer,
appliquer, URL,
URL, Version
Version de
de protocole)
protocole)
En-tête
En-tête de
de requête
requête
(Nom: valeur……)
(Nom: valeur……)
[Ligne
[Ligne vide]
vide]
Corps
Corps de
de requête
requête
Requête HTTP

Exemple de requête HTTP

GET www.cnfpt.fr HTTP/1.1


Host: www.cnfpt.fr
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3)
Gecko/20060426 Firefox/1.5.0.3
Accept: text/xml, application/xml, application/xhtml+xml, text/html;q=0.9,
text/plain;q=0.8, image/png, */*;q=0.5
Accept-Language: fr, fr-fr;q=0.8, en;q=0.5, en-us;q=0.3
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1, utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.google.fr/search?q=cnfpt&start=0&ie=utf-
8&oe=utf-8&client=firefox-a&rls=org.mozilla:fr:official
Requête HTTP

Réponse de serveur HTTP


HTTP/1.1 200 OK
Date: Wed, 10 May 2006 14:09:29 GMT
Server: Apache/1.3.33 (Unix) PHP/4.4.1 mod_ssl/2.8.22 OpenSSL/0.9.7i
X-Powered-By: PHP/4.4.1
X-Cache: jpcache vv2 - file
ETag: "jpd-369675562.6890"
Content-Encoding: gzip
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
a40‹xÚµYÝr½>N®BlgH;1½6$eaz0¡¥5u†0mo<ò®ì(ìJ‹¤uÂw=êô¸çß%|
7ÓCÜ«èóJ»ëuâ@`ZÃ`ïJzŸ÷O (...)
Les clients web

Navigateur/browser:
Navigateur/browser: logiciel
logiciel client
client pour
pour consulter
consulter les
les ressources
ressources web
web

Fonctionnalités
– Soumet des requêtes
– Dialogue avec d’autres serveurs
– Visualise le résultat
Caractéristiques
– Gestion d’HTML/XHTML
– Gestion de CSS
– Gestion de JavaScript
– Gestion de plugins (moteur multimedia/3D Quicktime, Windows Media, 
Unity3d, RealPlayer, Shockwave)
Étapes pour la visualisation d’une page web

Le
Le navigateur
navigateur effectue
effectue les
les étapes
étapes suivantes
suivantes pour
pour afficher
afficher une
une page
page

1)Analyse l’URL demandée


2) Résolution DNS
3) Établit une connexion avec le site
4)Envoie une requête http au serveur
5)Reçoit un document ou bien récupère la page envoyé par le serveur
6) analyse et scanne le document pour préparer l’affichage
Trouver les liens vers les éléments et restituer ou télécharger les objets
multimédia : images, son, vidéo, animation flash, document pdf, doc….
7) Exécute le traitement du code client (html, css, javaScript)
8) Met en forme le contenu et l’affiche dans la fenêtre
Les serveurs web

Programmes
Programmes répondant
répondant aux
aux requêtes
requêtes des
des clients
clients web
web

Ensemble
Ensemble ordinateur/logiciel
ordinateur/logiciel paramétré
paramétré pour
pour pouvoir
pouvoir traiter
traiter certains
certains types
types de
de pages
pages et
et
notamment
notamment celles
celles qui
qui contiennent
contiennent des
des instructions
instructions de
de programmation.
programmation.

Fonctionnalités
– Gère, calcul les informations
– Contrôle les accès
– Fournit les informations

Nombreux logiciels disponibles:


– Apache
– Internet Information Service
– Sun Java System Web Server
Taches effectuées par un serveur HTTP

Le
Le serveur
serveur HTTP
HTTP permet
permet de
de faire:
faire:

1) Écoute ou attend les connexions sur le port 80 (convention) d’une machine


2) Vérifier l’existence de document demandé
3) Client autorisé à accéder au document
4) Répond à la requête:
– Statiques: ne nécessitent pas de traitement côté serveur
– Dynamiques: nécessite des opérations spécifiques du serveur pour
générer le HTML
5) Envoie ou transmet le résultat ( le document) au format HTML au client
Architecture Client serveur pour le web

Client Web Serveur web Serveur BD

Frameworks
Coté client

Frameworks
Coté serveur
Architecture Client serveur pour le web
Exemple Cas d’un serveur PHP:
Technologies coté client

Les
Les technologies
technologies côté
côté client
client sont
sont interprétés
interprétés par
par le
le client
client indépendamment
indépendamment du
du serveur.
serveur.

Les
Les clients/navigateurs
clients/navigateurs :: Google
Google Chrome,
Chrome, Mozilla
Mozilla Firefox,
Firefox, Internet
Internet Explorer,
Explorer, Safari
Safari et
et Opéra
Opéra

Les
Les technologies
technologies les
les plus
plus utilisées
utilisées sont
sont le
le HTML,
HTML, le
le CSS
CSS et
et le
le JavaScript.
JavaScript.

HTML:
 Le HTML est un langage de description de contenu et de la structure
 Il décrit le document et ses constituants
 Langage dérivé de SGML (1980 ) version standardisée de GML (1973 ) développé par IBM
 Le html est Développé au CERN en 1989 après il est adopté par plusieurs entreprises
(microsoft,netscape)
 Il est un standard de W3C depuis 96.
Technologies coté client

CSS:

 1994-1995 :Première proposition de CSS au CERN (Håkon Lie) ;


 Les feuilles de style en cascade vise à compléter le langage HTML
 Langage de la présentation (mise en forme et mise en page )des documents HTML

Principaux avantages:

 Séparation des données de la mise en forme et mise en page


 Présentation homogène
 Partage / réutilisabilité
 Facilite la maintenance et l’évolution du site
Technologies coté client
Exemple de site CSS zen garden:
Technologies coté client

JavaScript:
 JS est un langage de programmation lié à HTML ;
JS est un langage de script simplifié inspiré de Java
JS permet d’agrémenter la présentation et l’interactivité des pages web.
JS va dynamiser votre document HTML, le rendre plus interactif: votre document HTML
sera moins statique et donc plus attractif.

Les langages coté clients interprété par le navigateur client


(interprétation dépendante du type et de la
version de navigateur).

C’est quoi
Résultat # différents rendus la solution?
Technologies coté client

W3 Consortium:: Organisme
Organisme crée
crée en
en 1994
1994 par
par Tim
Tim Berners-Lee
Berners-Lee en
en
collaboration
collaboration avec
avec ses
ses collègues.
collègues.

W3C
W3C est
est chargé
chargé de:
de:
 Standardiser
Standardiser les
les protocoles
protocoles etet langages
langages relatifs
relatifs àà Internet
Internet
 Fournir
Fournir la
la documentation
documentation de de référence.
référence.
 Assurer
Assurer l’interopérabilité:
l’interopérabilité: les
les spécifications
spécifications des
des protocoles
protocoles et
et langages
langages du
du web
web
doivent
doivent pouvoir
pouvoir fonctionner
fonctionner ensembles
ensembles

https://www.w3.org/
Technologies coté client

Framework Web design:: un


un outil
outil facilitant
facilitant le
le développement
développement front
front end.
end.

Framework Web design:: un ensemble


un ensemble cohérent
cohérent de
de composants éprouvés
composants éprouvés et
et
réutilisables
réutilisables (modèles
(modèles de
de conception,
conception, librairies,helpers…)
librairies,helpers…) ;;
[modèles
[modèles de de conception
conception àà base
base d’HTML,
d’HTML, CSS(formulaire,
CSS(formulaire, boutons,
boutons, navigation)
navigation)
Librairies
Librairies et
et extension
extension de
de JavaScript
JavaScript
Technologies coté Serveurs

Les
Les technologies
technologies côté
côté serveur
serveur sont
sont interprétés
interprétés au
au niveau
niveau de
de serveur
serveur indépendamment
indépendamment de
de client.
client.

Ils
Ils sont
sont donc
donc compatibles
compatibles avec
avec tous
tous les
les navigateurs,
navigateurs, yy compris
compris les
les versions
versions les
les
plus
plus anciennes.
anciennes.

Les
Les Serveurs:
Serveurs: Apache,
Apache, Internet
Internet Information
Information Service
Service et
et Sun
Sun Java
Java System
System Web
Web Server.
Server.

Les
Les technologies
technologies les
les plus
plus utilisées
utilisées sont
sont le
le PHP,
PHP, le
le ASP
ASP le
le Java,
Java, Le
Le Python
Python et
et le
le Ruby
Ruby
Technologies coté Serveurs

Framework back end:: Ensemble


Ensemble de
de bibliothèques,
bibliothèques, classes
classes et
et de
de
composants
composants permettant
permettant le
le développement
développement rapide
rapide d'applications
d'applications dans
dans un
un
langage
langage serveur.
serveur.
Fonctionnalités des Framworks PHP
Un
Un framework
framework PHP
PHP répond
répond au
au critères
critères suivants:
suivants:

structurer selon le modèle vue contrôleur.


Modèle MVC
Gestion des gabarits, séparer le code applicatif de la
Templates présentation.

stocker les pages afin d’optimiser leur temps de chargement


Cache
Gestion des SGBDR gérer plusieurs type de base de données

ORM gérer la base de données sous forme d’objets

Scaffolding Offre un espace d’administration d’un site

Conventions Utilisation de mêmes conventions de codage

règles de redirection et gestion d’urls


URL conviviales
Serveurs de base de données

SGBD
SGBD SQL:
SQL:  outil
 outil de
de gestion
gestion d’une
d’une base
base de
de données
données relationnelle.
relationnelle.

SGBD
SGBD noSQL
noSQL  (Not
 (Not only
only SQL en
SQL en anglais)
anglais) désigne
désigne une
une catégorie
catégorie de (SGBD)
de (SGBD) quiqui n'est
n'est
plus
plus fondée
fondée sursur l'architecture
l'architecture classique
classique des bases
des bases relationnelles.
relationnelles. L'unité
L'unité logique
logique
n'y
n'y est
est plus
plus la table,
la table, et
et les
les données
données ne
ne sont
sont en
en général
général pas
pas manipulées
manipulées avec SQL.
avec SQL.
Architectures applications web

En
En règle
règle générale,
générale, une
une application
application est
est découpée
découpée en
en 33 niveaux
niveaux d'abstraction
d'abstraction ::

La
La couche
couche présentation
présentation gère les interactions utilisateur/machine, la
présentation

La
La couche
couche traitements
traitements Effectue les calculs et contrôles le dialogue avec
présentation

La
La couche
couche données
données Gère le stockage des données et l'accès à ces dernières

Ces
Ces 33 niveaux
niveaux peuvent
peuvent être
être imbriqués
imbriqués ou
ou répartis
répartis de
de différentes
différentes manières
manières entre
entre
plusieurs
plusieurs machines
machines physiques
physiques ou
ou logiques:
logiques:

Architecture 1-tiers , 2-tiers , 3-tiers et n-tiers


Architectures applications web

Architecture
Architecture 1-tiers:
1-tiers: 33 couches
couches applicatives
applicatives s'exécutent
s'exécutent sur
sur la
la même
même machine,
machine, On
On
parle
parle d'informatique
d'informatique centralisée
centralisée
Architectures applications web

Architecture
Architecture 2-tiers:
2-tiers: Présentation
Présentation et
et traitements
traitements sont
sont sur
sur le
le client
client et
et les
les données
données sur
sur
le
le serveur
serveur
Architectures applications web

Architecture
Architecture 3-tiers:
3-tiers: La
La présentation
présentation est
est sur
sur le
le client,
client, les
les traitements
traitements sont
sont pris
pris par
par
un
un serveur
serveur intermédiaire
intermédiaire etet les
les données
données sont
sont sur
sur un
un serveur
serveur dede données
données
Architectures applications web

Exemple
Exemple d’Architecture
d’Architecture 3-tiers:
3-tiers: PHP/Mysql
PHP/Mysql
Architectures applications web

Architecture
Architecture n-tiers:
n-tiers: La
La présentation
présentation est
est sur
sur le
le client,
client, les
les traitements
traitements sont
sont pris
pris par
par
un
un serveur
serveur intermédiaire
intermédiaire etet les
les données
données sont
sont sur
sur un
un serveur
serveur dede données
données
Architectures applications web

Exemple
Exemple d’Architecture
d’Architecture n-tiers:
n-tiers: JAVA
JAVA

Vous aimerez peut-être aussi