Bases de la programmation du web 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Introduction Survol des sujets suivants : Les bases du Web : architecture, adressage, noms, HTTP HTML Feuilles de style CSS Programmation côté client JavaScript Donc essentiellement les langages pour le navigateur(client) 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les Sources Philippe Rigaux, son livre: les bases de MySQL et PHP Editions O’Reilly http://www.commentcamarche.net/ 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Pour tout savoir Le site du consortium WWW : http://www.w3c.org Les documents de référence sur HTTP,HTML, CSS, XML, XHTML, etc… Publiés sous la forme de Request for Comments (RFC). Certains ont acquis le statut de norme par exemple HTML 4.0 à consulter régulièrement 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr L’Internet C’est un réseau ! Basé sur un protocole (de bas niveau),TCP/IP Permet d’échanger des données dans un environnement hétérogène Chaque ordinateur est connu par une adresse IP unique ou par son nom cortes.cnam.fr = 163.173.212.26 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Le Domain Name Service (DNS) Établit une correspondance noms/adresses Jusqu’en 1984, tout était centralisé dans un seul fichier hosts.txt ! Remplacé par le DNS : une organisation hiérarchique des noms de domaine La gestion du DNS est décentralisée : un sous-domaine est géré par un serveur de nom 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Structure du DNS Les serveurs de nom collaborent entre eux pour convertir un nom de machine en adresse IP Domaines: .org .com .net Verisign .fr dept25.cnam.fr 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Le WEB C’est un système d’information basé sur l’Internet. Ce SI est constitué de « documents », terme à prendre au sens large Ils sont fournis par des serveurs web Ils sont consultés grâce à des clients web Serveurs et clients communiquent avec un langage : HTTP 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Fonctionnement du Web Requêtes: documents HTML, PHP, Java, Perl, etc… Machine du client: Navigateur (HTML) Machine du serveur: APACHE Programme serveur Programme client HTTP Internet CSS Javascript 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Quelques mots sur HTTP Protocole (langage) d’échange d’informations propre au Web On ouvre une connexion On envoie un en-tête Puis une ligne blanche Puis éventuellement un contenu Et on ferme la connexion Pas de connexion permanente 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les requêtes HTTP Principaux types de requêtes : GET : on demande quelque chose au serveur GET /index.html HTTP/1.0 POST : on envoie quelque chose au serveur POST /cgi-bin/prog.php HTTP/1.0 nom=maiques&prenom=projet3I HEAD : on demande des infos sur un document 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les réponses HTTP En-tête/ligne blanche/contenu : Date: Tue, 21 Oct 2001 20:39:56 GMT Server: Apache/1.3.17 (Unix) mod\_jk PHP/4.0.2 Last-Modified: Tue, 05 Jun 2003 20:13:39 GMT Content-Length: 159 Connection: close Content-Type: text/html <HTML><HEAD> <TITLE>Page d’accueil</TITLE></HEAD> <BODY><H1>Paged’accueil</H1> </BODY></HTML> 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Informations d’une réponse HTTP Dans l’en-tête : Le type de contenu Content-type indique si le contenu est du HTML, du GIF,du PDF, du XML... la longueur du contenu (permet de savoir combien de temps ça va prendre) la date de dernière modification (pour gérer le cache) éventuellement des cookies 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Le client (navigateur) Le programme client est en charge du rendu des documents Il dialogue avec le serveur: lui demande des documents Lui fournit des informations (paramètres, fichiers) Il communique les documents à l’utilisateur (textes, images, sons) 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Le programme serveur C’est un démon (Unix) ou un service (NT) Il est en écoute permanente sur un port réseau (en général le port 80) Il reçoit, analyse les requêtes de clients web Il transmet en retour un document résultat de la requête 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Adressage de documents : les URL p://ms[:port]/chemin/document?args p : le protocole: http, ou autre ms : le nom ou adresse IP du serveur port : port d’écoute chemin : arborescence des répertoires pour accéder au document document : nom du document args : liste de paramètres 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Exemples d’URL Universal Resource Location http://localhost/ Projet3I/WEB/ExHTML1.html Le document est dans le sous-répertoire WEB du répertoire racine de projet3I (ex.:/home/projet3I/public_html) http://projet3I Un langage de présentation de documents: Des balises intégrées dans le texte indiquent le formatage souhaité. C’est le navigateur qui détermine la présentation finale Les ancres Certaines parties du texte donnent accès à d’autres documents 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Un premier document HTML <HEAD> <TITLE>Un exemple de document HTML</TITLE> </HEAD> <BODY BGCOLOR="white"><!-- Ceci est un commentaire --> <CENTER><H1>Mon premier document HTML</H1> </CENTER> Je tape du texte <B>n’importe comment</B> </BODY> </HTML> _ http://localhost/Lucie/ExHTML1.html 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les balises HTML Les conteneurs appliquent un formatage à tout le texte compris entre <balise> et </balise> <B>Ceci est important</B> met en caractères gras Les éléments vides insèrent un élément de présentation <HR> trace une ligne horizontale 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les ancres La balise <A HREF="url"> est un conteneur qui permet de marquer les ancres url peut être un fichier local ou n’importe quelle adresse URL <A HREF=’ExHTML1.html’> l’autre document</A> <A HREF=’/FILMS/Film.php?titre=Seven’>..</A> On peut faire beaucoup de chemin sur le Web sans savoir ce qu’est une URL 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Document avec ancres <HTML> <HEAD><TITLE>Document avec des ancres</TITLE> </HEAD> <BODY BGCOLOR="white"><CENTER><H1> Document avec des ancres</H1></CENTER> une ancre vers<A HREF=’./ExHTML1.html’>le premier document</A><P> une ancre vers<A HREF=’./Film.php?titre=Seven’>Seven</A> </BODY> </HTML> http://localhost/~projet3I/ancres.html 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Quelques balises HTML Liste : <OL> <LI>...</LI></OL> <P> : nouveau paragraphe <H n> (0 < n < 8) pour les titres <TABLE> pour des tableaux <FORM> pour des formulaires <IMG SRC=’url’> pour insérer une image <B>, <IT>, <TT> : gras, italique, courrier 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Les tableaux HTML Entre les balises <TABLE> et </TABLE> <TR> et </TR> définissent une ligne <TD> et </TD> définissent une cellule On peut imbriquer une autre table ou n’importe quoi d’autre dans une cellule Toute la disposition est calculée par le navigateur 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
ExHTML3.html : exemple de tableau <HEAD><TITLE>Tableau HTML</TITLE></HEAD> <BODY BGCOLOR="white"> <TABLE BORDER=4 CELLSPACING=2 CELLPADDING=2> <CAPTION ALIGN=bottom><B>Mesfilms</B></CAPTION> <TR><TH>Titre<TH>Année<TH>Nom Réalisateur</TR> <TR><TD>Alien<TD>1979<TD>Scott <TR><TD>Vertigo<TD>1958<TD>Hitchcock <TR><TD>Van Gogh<TD>1991<TD>Pialat <TR><TD>Pulp Fiction<TD>1994<TD>Tarantino </TABLE> </BODY></HTML> http://localhost/~projet3I/tableau.html 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Couleurs, polices, et autres attributs Jusqu’à HTML 3.2 : on utilise les attributs des balises <BODY BGCOLOR=’white’>...</BODY> <FONT COLOR=’red’ FACE=’time’>...</FONT> Quelques soucis : Lourd et répétitif Contrôle incomplet sur le positionnement 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Feuilles de style (CSS) À partir de la version 4 : on peut définir des feuilles de style On définit globalement des instructions de mise en forme Les instructions sont rassemblées dans un document indépendant Ce document peut être associé à un ou plusieurs documents HTML 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Exemple d’une feuille CSS /* Le fond est toujours en blanc */ BODY {background-color: white} /* Couleur rouge pour ancres et en-têtes */ A, H1, H2, H3 {color: #ca0000} CAPTION {font-size:large;color: #ca0000} /* Classes pour alterner les couleurs des lignes */ TR.A0 {background-color:white} TR.A1 {background-color:yellow} .attention {background-color:red;color:white} 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Quelques commentaires Des instructions globales: A, H1, H2, H3 {color: #ca0000} le style sera appliqué à toutes les balises Des classes pour raffiner les styles TR.A0 {background-color:white} on peut appliquer <TR CLASS=’A0’> Les classes peuvent être génériques : .attention background-color=red Ex : <B CLASS=’attention’> 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Application d’une feuille CSS <HTML><HEAD><TITLE>Tableau HTML</TITLE> <LINK REL=stylesheet HREF="ExCSS.css" TYPE="text/css"> </HEAD><BODY> <TABLE BORDER=4 CELLSPACING=2 CELLPADDING=2> <CAPTION><B>Mes films</B></CAPTION> <TR><TH>Titre<TH>Année<TH>Nom Réalisateur</TR> <TR CLASS=A0><TD>Alien<TD>1979<TD>Scott <TR CLASS=A1><TD>Vertigo<TD>1958<TD>Hitchcock <TR CLASS=A0><TD>Van Gogh<TD>1991<TD>Pialat </TABLE> <B CLASS=’attention’>Et voilà !</B> </BODY></HTML> http://localhost/~projet3I/style.html 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Programmation client:JavaScript C’est un langage interprété par le navigateur initialement proposé par Netscape repris (avec des différences) par Internet Explorer Plus ou moins normalisé par le W3C sous le nom d’ECMA-Script Rôle de JavaScript : rendre plus interactive l’interface HTML 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr À quoi sert JavaScript ? Chaque fois qu’il faut répondre aux actions de l’utilisateur sans retourner au serveur, pour faire un calcul en local pour contrôler une zone de saisie pour afficher un message pour piloter l’interface du navigateur (fenêtres, menus déroulant) Gros souci : la compatibilité avec les navigateurs 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Un exemple trivial (démo) <HTML> <HEAD><TITLE>Mon premier JavaScript</TITLE> </HEAD> <script language="JavaScript1.2"> function bonjour() { alert ("Bonjour madame, bonjour monsieur"); } </script> <BODY bgcolor="WHITE" onLoad="bonjour();"> <H1>Je suis poli non ?</H1> </BODY> </HTML> 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Principe de base Séquence classique Événement-Action : On réagit à certains événements sur certaines balises : onBlur, onClick, onLoad,... On déclenche du code qui peut: accéder aux composants d’un document (champs d’un formulaire) créer de nouveaux composants (fenêtres, boutons, messages, zones de saisie) 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Un exemple Un calculette web pour déterminer des loyers : Un formulaire pour saisir des données Un traitement côté serveur pour calculer et afficher le résultat Du JavaScript pour enrichir l’interface Démo 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Contrôle de la valeur d’un champ <INPUT TYPE=TEXT SIZE=20 NAME="taux" onBlur="valeurTaux(value);"> function valeurTaux(taux){ if (taux != ’’) {mess = ’’; if (taux > 20) mess = "C’est trop !!"; if (taux <= 5) mess = "Là c’est pas assez !!!"; if (mess != ’’) { alert (mess); document.forms[0].taux.value = ’’;document.forms[0].taux.focus(); } } 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Validation d’un formulaire <INPUT TYPE=BUTTON VALUE="V´erifier" onClick="ctrlForm()"> function ctrlForm(){ if (isNaN(window.document.Simul.mtfin.value)){ alert ("C’est quoi ce montant : " +document.Simul.mtfin.value + "?"); document.forms[0].mtfin.focus(); } 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Calcul de nouvelles valeurs <INPUT TYPE=TEXT SIZE=2 NAME="pourcVr" onChange="calculVR();"> function calculVR(){ mt = document.forms[0].mtfin.value; pourcVr = document.forms[0].pourcVr.value; vr = mt * pourcVr / 100.; document.forms[0].vr.value = vr; } 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Affichage de nouvelles fenêtres Un manuel utilisateur (événement onClick) : function afficheDoc(){ options = "width=300,height=200"; fenetre = window.open(’’,’MU’,options); fenetre.document.open();manuel = "<BODY bgcolor=’white’>" + "Pour utiliser la calculette " + " c’est facile." + " Bonne chance !</BODY>"; fenetre.document.write(manuel); fenetre.document.close(); } 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr
Lucie Maiques Grynbaum maiques@cnam.fr Alors, JavaScript ? Très utile pour animer les pages HTML De préférence, chercher des ressources existantes sur le Web Exemple de menus Gros souci : compatibilité des navigateurs 08/11/2018 Lucie Maiques Grynbaum maiques@cnam.fr