ProgrammationWeb

odecalmΛογισμικό & κατασκευή λογ/κού

2 Ιουλ 2012 (πριν από 4 χρόνια και 11 μήνες)

318 εμφανίσεις

MadalinaCroitoru
IUT Montpellier
ProgrammationWeb
Organisation du cours
￿
4 semaines
￿
4 ½h / semaine:
￿
2heures cours
￿
3 ½heures TP
￿
Notation: continue –interrogation cours + rendu àla fin de
chaque séance de TP + projet final
￿
Transparents du cours et feuilles de TP disponibles chaque
semaine sur
www.lirmm.fr/~croitoru
￿
Questions:
croitoru@lirmm.fr
Quelques règles
￿
Cours: àtout moment interrompre en cas de questions
￿
Cours: pas des discussions entre étudiants
￿
TP: discussions entre étudiants fortement encouragées
￿
TP: chaque personne est notée individuellement
Le Web avant1990
Conception de sites Web avant1990
￿
1991: l’année oùle protocole HTTP (Hyper TextTransfer
Protocol) a étéinventé
￿
HTTP: envoyer des données au travers d’Internet
￿
Dernière version de HTTP –HTTP 1.1 apparue en 1999
￿
Quand vous demandez une page web en utilisant votre
navigateur HTTP est naturellement supposé:
￿
Web browser: client
￿
Serveur(Apache -C, Tomcat -Java, Zope-Python, Mongrel -
Ruby)
Simple requête HTTP
1. Le client demande
la page index.htmlvia HTTP
2. Le serveur répond en
renvoyant les contenus de
index.html
UtilisateurPosteclient
ServeurWeb
Transaction HTTP
￿
Se produit toujours àpartir du client Web vers un serveur
Web
￿
Le logiciel faisant la
requête
: le navigateur Web:
￿
GET
￿
POST
￿
HEAD
￿
CONNECT
￿
TRACE etc etc
￿
Le logiciel répondant àla
demande
: le serveur Web
Demandes Web
￿
Ces données peuvent être construites
dynamiquement
sur le
serveur Web (ex. données issues d’une
base de données
)
￿
En plus, les données peuvent contenir
bien plus que du
contenu HTML
, permettant au client d’exécuter d’autres
fonctions qu’afficher simplement un contenu de pages
statiques
Le Web aujourd'hui
Technologies du Web
￿
Technologies orientées
Serveur
:
génération
des pages a la
volée
￿
Technologies orientées
Client
: choses plus
sophistiquées
que
l’affichage statique
Technologies orientées côtéServeur
￿
Travail avec une base de données, manipulations des données
etc.
￿
PHP
￿
ASP.NET:
http://www.asp.net/
￿
Perl:
http://www.perl.org/
￿
ColdFusion:
http://www.adobe.com/products/coldfusion/
￿
Ruby on Rails:
http://rubyonrails.org/
PHP: un langage de script
1. Le client demande
unepage PHP
3. Réponse contenant du HTML qui
sera affichée par le navigateur
de l’utilisateur
UtilisateurPosteclient
ServeurWeb
2. Le serveur
exécute
la page
PHP et
construit
la
réponse en HTML
PHP
￿
Sur le serveur –
habituellement associé
àun serveur de base
de données pour pouvoir gérer les données
￿
MySQL
￿
Même si PHP peut élaborer des réponses complexes (bases
de données, manipulations etc.) le
navigateur peut seulement
afficher une page statique
Techniques orientées Client
￿
Chargées et exécutées par le client Web
￿
JavaScript
: langage de script démarquédans les pages HTML
pour les rendre plus fonctionnelles
￿
Validation formulaire côtéclient (oubli de fournir tous les
détails, format incorrect d’adresse email etc.)
￿
Affichage non statique
￿
Autres technologies
:
￿
Applets Java
￿
MacromediaFlash
HTML, JavaScript et PHP
2. Le client demande
unepage PHP
4. Réponse contenant du HTML
et JavaScript qui sera affichée par
le navigateur de l’utilisateur
UtilisateurPosteclient
ServeurWeb
3. Le serveur
exécute
les
«processinginstructions»
PHP et
construit
la
réponse en HTML
1.Le client utiliseJavaScript pour
prétraitements
AJAX
￿
A
syncronous
Ja
vaScript and
X
ML
￿
Amène plus de puissance dans JavaScript: offre une
technique
au client
, orientée JavaScript, pour faire des
appels en tâche
de fond au serveur
￿
On met àjour certaines parties de la page sans causer de
rechargement complet de celle-ci
AJAX
Le client demande
unepage PHP
Réponse contenant du HTML
et JavaScript
UtilisateurPosteclient
ServeurWeb
JavaScript fait un
appel
non visible
au serveur
Le serveur répond en
envoyant la donnée
JavaScript met a jour la page
en utilisant
cette donnée
Sans AJAX: formulaire Web
￿
Demande àl’utilisateur de saisir des informations (nom,
adresse, mot de passe)
￿
Laisser l’utilisateur saisir toutes les informations
￿
Vérification (minimale) avec JavaScript (format email etc.)
￿
Envoyer la page, attendre, et réaliser la validation sur le
serveur
Avec AJAX –formulaire Web
￿
L’application web peut valider les données entrées en
permettant des appels servis en tâche de fond:
￿
Après que l’utilisateur a sélectionnéle pays, le navigateur web
appelle le serveur pour charger a la volée la liste des villes de ce
pays
￿
Exemples:
￿
Google Suggest
￿
Google Mapsetc.
A quoi servent les standards du Web?
￿
“HTML des années 1990”:
￿
Balisage mêlant forme et fond
￿
Emploi inappropriéde CSS
￿
Surabondance d’éléments divou classsuperflus etc.
￿
Conséquences:
￿
Faute d’une utilisation intelligente de CSS et de JavaScript les pages sont
beaucoup trop lourdes
￿
L’apparence des pages est difficile àmodifier globalement et sensible aux
navigateurs
￿
Accessibilitéréduite (non-voyants, malvoyants, etc.)
A quoi servent les standards du Web?
￿
Bénéfices:
￿
Site séparant clairement le contenu (XHTML) de la forme
(CSS) et du comportement (JavaScript):
￿
Réutilisable
￿
Plus léger
￿
Utilisation appropriée des CSS: vue adaptée de la page pour de
nombreux:
￿
Usages
￿
Périphériques
Dans ce cours
1.
Rappel: (X)HTML, CSS,
PHP, MySQL
2.
XML et DOM
3.
JavaScript et AJAX
4.
Web Sémantique
TP
￿
But final: réaliser
un jeux en ligne
(de votre choix)
￿
Travail en groupe (max 3 étudiants)
￿
Chaque semaine: rajouter des fonctionnalités –travail noté
(50% note finale)
1.
(X)HTML, CSS,
PHP
2.
XML / DOM
3.
JavaScript / AJAX
￿
Dernière semaine –chaque groupe présente l’ensemble de
son travail (50% note finale)
Rappel PHP
Langage immergédans les documents
￿
Prévu pour être intégrédirectement dans les documents
(XHTML, XML)
￿
Dans un fichier on distingue:
￿
Informations rela page XHMTL, document XML
￿
Code PHP –“processinginstructions”
￿
Début de code PHP marque par <?phpet le fin marque par
?>
Standards Web
example.php
<html>…
<?php
print’’Ceci n’est pas un example</br>’’;
?>

</html>
Une syntaxe simple
￿
Les instructions sont séparées par ;
￿
Le langage n’est pas sensible a la casse des caractères
￿
Les variables sont désignées par leur nom, précède du symbole $
et Php
n’est pas typé
￿
Il n’est pas nécessaire de déclarer les variables (cela reste possible
avec l’instruction var)
￿
Commentaires peuvent être introduits sur une seule ligne avec //
ou sur plusieurs lignes avec /* et */
Expressions
￿
Les operateurs logiques sont:
￿
== pour la comparaison
￿
&& pour le «et»logique
￿
|| pour le «ou»logique
￿
Les instructions sont le plus souvent perçues comme des
expressions et peuvent être intégrées dans les expressions
plus complexes
Nombres et caractères
￿
PHP propose les types élémentaires: booléens, nombres, chaine
de caractères
￿
TOUS ces types peuvent être manipulés comme des chaines de
caractères (conversion transparente)
￿
trueet false peuvent implicitement être convertis en 1 et 0
￿
Les chaines d caractères sont représentées soit entre ‘’soit entre
‘‘’’. On préfère ‘’.
￿
Concatenagede chaines des caractères avec .
￿
On accède a chaque caractère d’une chaine en utilisant les {}
($valeur{2} –le résultat est une nouvelle chaine de caractères)
Tableaux
￿
PHP permet de créer des tableaux associatifs dynamiques et
multidimensionnels
￿
Pas nécessaire de déclarer un tableau: l’affectation d’un élément
provoque la création implicite d’un tableau et son stockage dans la
variable:
￿
$a[6]=7; \\un tableau d’un seul élément dont la cled’accès est 6
￿
$a[9][‘couleur’]=‘rouge’; \\ajouter des dimensions -$a[9] est un tableau
￿
Representationtexte d’un tableau: print_r() et var_dump()
Les structures de contrôle
￿
if et if-else: if ($i==0) ….; else….;
￿
switch: switch($i){case ‘3’: ... ; case ‘foo’…; break; default: …;
￿
for ($i=0; $i<10, $i++) {…};
￿
$i = 0; while($i < 10) {$i++;};
￿
ON PEUT SORTIR DU MODE PHP A TOUT MOMENT POUR REENIR
AU CONTENU STATIQUE:
<?php
for($i=0; $i<10; $i++){
?>
<tr><td><?php
print``$i’’;
?></td></tr>
<?php
}
?>