Programmation Web. Madalina Croitoru IUT Montpellier

Transcription

1 Programmation Web Madalina Croitoru IUT Montpellier

2 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 Questions: croitoru@lirmm.fr

3 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

4 Le Web avant 1990

5 Conception de sites Web avant : 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)

6 Simple requête HTTP 1. Le client demande la page index.html via HTTP Utilisateur Poste client 2. Le serveur répond en renvoyant les contenus de index.html Serveur Web

7 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

8 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

9 Le Web aujourd'hui

10 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

11 Technologies orientées côté Serveur Travail avec une base de données, manipulations des données etc. PHP ASP.NET: Perl: ColdFusion: Ruby on Rails:

12 PHP: un langage de script 1. Le client demande une page PHP 2. Le serveur exécute la page PHP et construit la réponse en HTML Utilisateur Poste client 3. Réponse contenant du HTML qui sera affichée par le navigateur de l utilisateur Serveur Web

13 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

14 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 etc.) Affichage non statique Autres technologies: Applets Java Macromedia Flash

15 HTML, JavaScript et PHP 1. Le client utilise JavaScript pour prétraitements 2. Le client demande une page PHP 3. Le serveur exécute les «processing instructions» PHP et construit la réponse en HTML Utilisateur Poste client 4. Réponse contenant du HTML et JavaScript qui sera affichée par le navigateur de l utilisateur Serveur Web

16 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

17 AJAX Le client demande une page PHP Réponse contenant du HTML et JavaScript Utilisateur Poste client JavaScript fait un appel non visible au serveur Serveur Web Le serveur répond en envoyant la donnée JavaScript met a jour la page en utilisant cette donnée

18 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 etc.) Envoyer la page, attendre, et réaliser la validation sur le serveur

19

20 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.

21

22

23 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.)

24 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

25 Dans ce cours 1. Rappel: (X)HTML, CSS, PHP, MySQL 2. XML et DOM 3. JavaScript et AJAX 4. Web Sémantique

26 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)

27 Rappel PHP

28 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?>

29 Standards Web

30 example.php <html> <?php print Ceci n est pas un example </br> ;?> </html>

31 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 */

32 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

33 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)

34 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()

35 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 }?>