Bases de la programmation du web

Bases de la programmation du web
08/11/2018 Lucie Maiques Grynbaum

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

Les Sources Philippe Rigaux, son livre: les bases de MySQL et PHP Editions O’Reilly 08/11/2018 Lucie Maiques Grynbaum

Pour tout savoir Le site du consortium WWW : 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

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 = 08/11/2018 Lucie Maiques Grynbaum

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

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

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

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

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

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

Les réponses HTTP En-tête/ligne blanche/contenu : Date: Tue, 21 Oct :39:56 GMT Server: Apache/ (Unix) mod\_jk PHP/4.0.2 Last-Modified: Tue, 05 Jun :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

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

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

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

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

Exemples d’URL Universal Resource Location Projet3I/WEB/ExHTML1.html Le document est dans le sous-répertoire WEB du répertoire racine de projet3I (ex.:/home/projet3I/public_html) 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

Un premier document HTML
<HEAD> <TITLE>Un exemple de document HTML</TITLE> </HEAD> <BODY BGCOLOR="white"> <CENTER><H1>Mon premier document HTML</H1> </CENTER> Je tape du texte <B>n’importe comment</B> </BODY> </HTML> _ 08/11/2018 Lucie Maiques Grynbaum

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

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

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> 08/11/2018 Lucie Maiques Grynbaum

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

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

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> 08/11/2018 Lucie Maiques Grynbaum

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

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

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

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

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> 08/11/2018 Lucie Maiques Grynbaum

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

À 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

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

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

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

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

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

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

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

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

Bases de la programmation du web

Présentations similaires

Présentation au sujet: "Bases de la programmation du web"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Bases de la programmation du web

Présentations similaires

Présentation au sujet: "Bases de la programmation du web"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back