Madalina Croitoru

IUT Montpellier

Programmation Web

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 avant 1990

Conception de sites Web avant 1990� 1991: l’année où le protocole HTTP (Hyper Text Transfer 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 demandela page index.html via HTTP

2. Le serveur répond en renvoyant les contenus de index.html

Utilisateur Poste clientServeur Web

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 demandeune page PHP

3. Réponse contenant du HTML qui sera affichée par le navigateurde l’utilisateur

Utilisateur Poste clientServeur Web

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� Macromedia Flash

HTML, JavaScript et PHP

2. Le client demandeune page PHP

4. Réponse contenant du HTMLet JavaScript qui sera affichée par le navigateur de l’utilisateur

Utilisateur Poste clientServeur Web

3. Le serveur exécute les « processing instructions »

PHP et construit la réponse en HTML

1. Le client utiliseJavaScript pour prétraitements

AJAX� Asyncronous JavaScript and XML

� 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 demandeune page PHP

Réponse contenant du HTMLet JavaScript

Utilisateur Poste clientServeur Web

JavaScript fait un appelnon visible au serveur

Le serveur répond en envoyant la donnéeJavaScript 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 Maps etc.

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 div ou class superflus 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 cours1. 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 re la page XHMTL, document XML

� Code PHP – “processing instructions”

� Début de code PHP marque par <?php et 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)

� true et 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 ‘’.

� Concatenage de 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 cle d’accès est 6

� $a[9][‘couleur’]=‘rouge’; \\ ajouter des dimensions - $a[9] est un tableau

� Representation texte 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 } ?>