![Page 1: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/1.jpg)
Madalina Croitoru
IUT Montpellier
Programmation Web
![Page 2: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/2.jpg)
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: [email protected]
![Page 3: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/3.jpg)
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
![Page 4: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/4.jpg)
Le Web avant 1990
![Page 5: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/5.jpg)
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)
![Page 6: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/6.jpg)
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
![Page 7: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/7.jpg)
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
![Page 8: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/8.jpg)
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
![Page 9: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/9.jpg)
Le Web aujourd'hui
![Page 10: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/10.jpg)
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
![Page 11: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/11.jpg)
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/
![Page 12: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/12.jpg)
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
![Page 13: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/13.jpg)
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
![Page 14: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/14.jpg)
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
![Page 15: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/15.jpg)
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
![Page 16: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/16.jpg)
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
![Page 17: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/17.jpg)
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
![Page 18: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/18.jpg)
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
![Page 19: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/19.jpg)
![Page 20: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/20.jpg)
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.
![Page 21: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/21.jpg)
![Page 22: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/22.jpg)
![Page 23: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/23.jpg)
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.)
![Page 24: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/24.jpg)
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
![Page 25: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/25.jpg)
Dans ce cours1. Rappel: (X)HTML, CSS, PHP, MySQL
2. XML et DOM
3. JavaScript et AJAX
4. Web Sémantique
![Page 26: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/26.jpg)
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)
![Page 27: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/27.jpg)
Rappel PHP
![Page 28: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/28.jpg)
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 ?>
![Page 29: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/29.jpg)
Standards Web
![Page 30: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/30.jpg)
example.php<html>
…
<?php
print ’’Ceci n’est pas un example </br>’’;
?>
…
</html>
![Page 31: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/31.jpg)
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 */
![Page 32: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/32.jpg)
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
![Page 33: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/33.jpg)
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)
![Page 34: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/34.jpg)
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()
![Page 35: ProgrammationWeb - lirmm.frcroitoru/WebCourse-A2-week1.pdf · Transparents du cours et feuilles de TP disponibles chaque semaine sur croitoru Questions: croitoru@lirmm.fr. Quelques](https://reader033.vdocuments.net/reader033/viewer/2022051321/5ad4ff0b7f8b9a6d708c5087/html5/thumbnails/35.jpg)
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 } ?>