COURS PROGRAMMATION WEB HTML – CSS – PHP

09/11/2011
COURS PROGRAMMATION WEB
HTML – CSS – PHP - MYSQL
Responsable : F. CHAKER-KHARRAT
Niveau : 3ème ESSAI
Année Universitaire : 2011/2012
OBJECTIFS DU COURS
Objectifs généraux :
Ce cours est destiné aux étudiants disposant de
quelques notions de programmation procédurale et
désireux de comprendre les spécificités de la programmation
en environnement Web.
Pré--requis
Pré
Notions de structure de données et d’algorithmique,
de programmation, les bases de données relationnelles
(BDR).
Volume Horaire
2
1h30 de cours /7 semaines
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
OBJECTIFS DU COURS
Objectifs spécifiques :
 Une bonne compréhension des technologies et des
protocoles sous-jacents au World Wide Web.
 Les outils et techniques utilisés pour le développement
d’application Web côté client vs. côté serveur.

Compréhension
de
plusieurs
langages
programmation Web, à savoir: HTML, CSS, Javascript et PHP.
de
 Programmation Web avec accès à des BDR (mysql).
 Les nouvelles tendances en matière de développement
Web: outils, environnements.
Prog. Web (2011/2012)
3
F. CHAKER-KHARRAT
1
09/11/2011
Prog. Web (2011/2012)
NETOLOGIE & BIBLIOGRAPHIE
Références sur le Web :
 W3C Schools HTML, HTML5, CSS, JavaScript et PhP tutorials :
http://www.w3schools.com/default.asp
 Site du Web Standards Project : http://www.webstandards.org
F. CHAKER-KHARRAT
 W3C World Wide Web : Consortium : http://www.w3c.org
 WAMP Server: http://www.wampserver.com
 PHP: http://www.php.net, ttp://ca2.php.net/manual/fr/index.php
 MySQL: http://www.mysql.com/
 Comment ça marche : http://www.commentcamarche.net
 Wikipedia: http://fr.wikipedia.org/wiki/Programmation_web
Prog. Web (2011/2012)
4
F. CHAKER-KHARRAT
Prog. Web (2011/2012)
NETOLOGIE & BIBLIOGRAPHIE
Bibliographie :
 W3C Schools HTML, HTML5, CSS, JavaScript et PhP tutorials :
http://www.w3schools.com/default.asp
 Site du Web Standards Project : http://www.webstandards.org
F. CHAKER-KHARRAT
 W3C World Wide Web : Consortium : http://www.w3c.org
 WAMP Server: http://www.wampserver.com
 PHP: http://www.php.net, ttp://ca2.php.net/manual/fr/index.php
 MySQL: http://www.mysql.com/
 Comment ça marche : http://www.commentcamarche.net
 Wikipedia: http://fr.wikipedia.org/wiki/Programmation_web
5
GÉNÉRALITÉS
2
09/11/2011
WEB ≠ INTERNET (1/3)
 Le Web est un système de fichiers présent sur des machines
(serveurs) transitant par un protocole particulier (HyperText
Transfer Protocol: HTTP), consultable grâce à des navigateurs
web et fonctionnant SUR Internet !
 Internet est un assemblage de multiples réseaux, tous connectés
entre eux en utilisant le protocole Transmission Control Protocol /
Internet Protocol (TCP/IP). Cet amas de câbles, de fibres optiques...
de matériels, pour faire simple, constitue Internet, aussi appelé
« le réseau des réseaux ».
 Internet est hardware; le Web est software
Il y a plusieurs autres applications basées sur Internet:
e.g., email, telnet, ftp, usenet, Instant Messenger, Napster, etc.
7
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
WEB ≠ INTERNET (2/3)
 Tout ordinateur actuel possède une adresse sur un réseau : son
adresse IP (Internet Protocol).
Exp.: 74.125.19.147
 Lorsque vous demandez une page web à votre navigateur, vos
tapez une adresse URL (Uniform Resource Locator):
Exp.: http://www.google.fr
 Vous demandez,
de façon implicite, d'aller chercher ce qui se
8
trouve à l'adresse IP correspondante à cette URL!
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
WEB ≠ INTERNET (2/3)
 Si les ordinateurs ont des adresses pour se reconnaître sur les
réseaux, comment se fait-il qu'en tapant un nom comme "google.com"
les navigateurs sachent où chercher ?
 les (Domain Name Server DNS): des serveurs particuliers (de
gigantesques annuaires téléphoniques pour les sites internet) qui
font le lien entre l’URL tapée et son adresse IP.
 Par exemple, taper "http://www.google.fr" dans votre navigateur
revient à saisir http://74.125.19.147 (adresse d'un serveur Google sur
Internet).
9
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
3
09/11/2011
INTERNET : HISTORIQUE
 1967 : Arpanet(Advanced Research Project Agency) :
réseau militaire américain robuste aux pannes.
 Les années 70
70ss: ARPANET doublait de taille
chaque année.
 1984 : ~1000 d’ordinateurs militaires et académiques
connectés.
 1992 : ~1,000,000 d’ordinateurs connectés.
Internet society a été crée et le contrôle lui a été
transféré:
 Internet Engineering Task Force (IETF).
 Internet Architecture Board .
 Internet Assigned Number Authority .
10
 World-Wide-Web Consortium (W3C).
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
INTERNET : NBRE D’UTILISATEURS
1,966
966,,514
514,,816 Internet users in 2010 (approx. 28
28..7 %
of
the
world’s
population)
(http://www.internetworldstats.com/top20.htm)
(28 Septembre, 2010)
 Japan
Japan: 99
99,,143
143,,700 users (approx. 78
78..2% of the
population)
 Tunisia
Tunisia: 3,600
600,,000 users (approx. 34 % of the
population

11
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
INTERNET : BREF HISTORIQUE
 L’idée des liens hypertexte:
a été proposée au début dans les
années 40 par Vannevar Bush
Bush.
 En 1989 : Tim Berners-Lee
du
European
Particle
Physics
Laboratory (CERN) a conçu un
système d’hypertexte pour
connecter des documents sur le
Net.
Prog. Web (2011/2012)
 Il l a conçu un langage pour
spécifier le contenu des documents.
Devenu par la suite : HyperText
Markup Language (HTML).
 Il a conçu un protocole pour
télécharger et interpréter le
contenu des documents devenu
par la suite HTTP
HTTP.
Il a implémenté le premier
navigateur Mozaïc : seulement
du
texte,
PAS
d’objet
multimédia.
12
F. CHAKER-KHARRAT
4
09/11/2011
CLIENT/SERVEUR (1/2)
 Pour
bien comprendre ce qu'est la programmation Web, il
faut rappeler rapidement le principe de fonctionnement de
l'architecture client/serveur dans le contexte du Web.
 Quand
un visiteur veut aller sur un site Web. Il tape l'adresse
URL, ok, mais ensuite ? La page
temps que s'est
s'est--il passé ?

s'affiche, d'accord, mais entre-
Lorsque l'internaute tape l'adresse d'un site dans son
browser (client) (www.google.fr par exemple), celui-ci envoie une
requête au serveur qui héberge ce site. Le serveur transmet alors
la page demandée au browser qui l'affiche.
 Le client, c'est le navigateur Internet de l'internaute
comme, Mozilla Firefox, Microsoft IE, Apple Safari, Google Chrome,
Opera etc.
Prog. Web (2011/2012)
13
F. CHAKER-KHARRAT
CLIENT/SERVEUR (2/2)
serveur web ou encore serveur http est un
ensemble ordinateur/logiciel paramétré pour pouvoir traiter certains
types de pages et notamment celles qui contiennent des instructions
de programmation. Il reconnaît ces pages grâce à l'URL qu'il reçoit,
effectue les traitements demandés et transmet le résultat au format
html au browser de l'internaute.
 Le
 Un serveur HTTP est, comme tout serveur, à l'écoute des
connections en provenance de l'extérieur sur un port donné. Le port
standard pour un serveur HTTP est le numéro 80.
 A chaque requête qu'il reçoit le serveur présente à l'utilisateur la
page demandée.
 Exemple de serveurs HTTP :
Apache HTTP Server développé par Apache Software Foundation,
Internet Information Services (IIS) développé par Microsoft.
Prog. Web (2011/2012)
14
F. CHAKER-KHARRAT
STATICS VS DYNAMICS
PAGES
L'explosion de l'Internet, vers 1995, a vu la multiplication des sites dits
"cartes de visite" constitués par des pages web statiques
« A static web page is a web page that always comprises the same
information in response to all download requests from all users. »
(www.answers.com)
Le contenu (texte/liens/images/animation/vidéo) est toujours le même.
Avantages
 Rapide et facile à mettre en place même pour les non connaisseurs.
 Un outil idéal pour donner un avant gout/maquette d’un site Web
à
construire.
Inconvénients
 N'offrir qu'une et une seule présentation, sans aucune
possibilité de personnalisation et avec une interactivité limitée au strict
minimum
 La maintenance des site Web de taille est couteuse.
15
 Difficile de les garder à jour et surtout cohérent.
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
5
09/11/2011
STATICS VS DYNAMICS
PAGES (SUITE)
Orientations du Web :
Services en ligne, E-business, les blog, les forums, etc.
Offrir un contenu personnalisé / dynamique qui s’adapte aux besoins de
chaque visiteur en fonction de ses actions, + d'interactivité.
Une page web dynamique est construite à la demande (à la
volée) par le serveur (côté serveur), en fonction de critères spécifiques.
La présentation et le contenu affichés peuvent ainsi être personnalisés
de manière interactive, en fonction des produits, des internautes, des
langues, etc.
16
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
STATICS VS DYNAMICS
PAGES (SUITE)
On reconnaît facilement une page dynamique grâce à l'URL qui
s'affiche dans le navigateur web de l'utilisateur:
Page statique
statique::
http://www.monsite.fr/accueil.html
Affiche la page accueil.htm, stockée telle quelle sur le serveur,
Page dynamique
dynamique::
http://www.monsite.fr/accueil.php?langue=fr
Affiche la page accueil.php en demandant au serveur d'afficher
le contenu de cette page en français.
Prog. Web (2011/2012)
17
F. CHAKER-KHARRAT
STATICS VS DYNAMICS
PAGES (SUITE)
 Alors que les pages statiques font appel au html, langage de description
de données, les pages dynamiques sont mises en oeuvre grâce à un langage
de programmation. Grâce à lui, on pourra disposer d'instructions
conditionnelles, de boucles et de fonctions de traitement
complexes.

Le langage de programmation variera en fonction de la technologie
retenue (PHP, ASP, Java, etc.).
 Le langage de programmation ne remplace pas le html, mais il
en produit. En effet, actuellement, les navigateurs ne reconnaissent que ce
standard pour afficher des pages web.
18
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
6
09/11/2011
STATICS VS DYNAMICS
PAGES (SUITE)
Page Dynamique
Page Statique
(http://www.monsite.tn/accueil.php
www.monsite.tn/accueil.php
http://www.monsite.tn/accueil.html
http://
www.monsite.tn/accueil.html (http://
Prog. Web (2011/2012)
F. CHAKER-KHARRAT
Le client : "S'il te plaît,
envoie
moi
la
page
accueil.html".
Le serveur lui répond en lui
envoyant la page accueil.html :
"Tiens, voici la page que tu
m'as demandée".
Le client: "S'il te plaît, envoie moi
la page accueil.php".
Le serveur n'envoie PAS de suite
la page au client. Il la génère à partir du
code php.
En effet, le client n'est pas capable
d'exécuter une page PHP (seul le serveur
sait le faire).
Une fois la page est générée, le serveur
19
l'envoie au client.
F. CHAKER-KHARRAT
7