CREATION d UN SITE WEB (INTRODUCTION)

Transcription

1 CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour spécifer des documents hypertextes. PHP = langage pour programmer des pages web / documents hypertextes dynamiques SQL = langage pour la gestion de bases de données relationnelles. 1

2 WWW : World Wide Web un gigantesque système d information documents hypertextes : textes, images, vidéos, sons,... réparti sur des sites interconnectés par le réseau Internet programme serveur : transmission (envoi) de ses documents programme client = navigateur : consultation de documents si le client demande à consulter un document ne résidant pas sur le site, le programme appelle le serveur détenant le document pour l obtenir. HTTP = protocole du Web règles de communication entre serveurs et clients 2

3 Serveurs et Clients Web programme serveur démon (Unix) ou service (NT) en écoute permanente sur le port réseau (port 80) reception + analyse des demandes des clients web transmet un document résultat programme client (navigateur) dialogue avec le(s) serveurs demande de document envoi de paramètres, de fichiers communique et présente les documents à l utilisateur Navigator de Netscape et Internet Explorer de Microsoft sont les navigateurs les plus utilisés. 3

4 Serveurs et Clients Web 4

5 Protocole HTTP en deux mots HTTP = protocole (langage) d échange d informations pour le Web ouverture d une connexion envoie d un entête type du contenu : HTML, gif, pdf, XML... taille du contenu date de dernière modification... envoie d une ligne blanche envoie d un contenu fermeture de la connection pas de connection permanente 5

6 Documents hypertextes : HTML les balises intégrées dans le texte = le formatage souhaité indiquer la fonction d une portion de texte titre, en-tête,... légende,... indiquer le style de présentation font, style de caractère, alignement,... le navigateur détermine la présentation finale du texte les ancres ou liens parties du texte donnant accès à d autres documents documents du même site ou d autres sites lecture séquentielle du document lecture navigationnelle de documents en documents HTML est le langage qui permet de créer les documents hypertextes. 6

7 Localisation d un document p : // ms [: port ] / chemin / document?args à chaque lien est associé une URL (Universal Resource Location) référence unique à un document une URL est constituée de : nom du protocole pour accéder à la ressource nom ou adresse IP du serveur hébergeant la ressource numéro du port réseau surlequel le serveur est à l écoute chemin d accès sur la machine serveur nom du document liste de paramètres Exemple 1: Exemple 2: 7

8 HTML : les bases Entête d un document HTML balise < HEAD > informations relatives à l auteur du document, date de création informations relatives à la nature du contenu Non affichée par le navigateur Utilisée par les moteurs de recherche pour faciliter l accès Corps d un document HTML balise < BODY > informations et commandes Affichée par le navigateur Les attributs de la balise < BODY > sont TEXT, BGCOLOR, LINK, VLINK, ALINK pour définir les couleurs du texte, du fond d écran, des liens non visités / visistés / cliqués, et BACKGROUND pour l URL d une image affichée en fond. 8

9 HTLM : un premier exemple < HTML > < HEAD > < TITLE > Un premier exemple de document HTML < /TITLE> < /HEAD> < BODY BGCOLOR= white > <! Ceci est un commentaire > < CENTER > < H1 > Mon premier document HTML < /H1 > < /CENTER > C est un essai. Le contenu est <B> sans impotance </B>. < /BODY> < /HTML > 9

10 HTLM : les bases les balises conteneurs : parenthèsent une portion de texte (élément) < balise >... < /balise > 1 ou plusieurs caractéristiques de mise en forme Exemple : < CENTER >... < /CENTER > Exemple : < B >... < /B > les balises de présentation (inter)texte insertion d un élément de présentation Exemple : < HR > trace une ligne horizontale 10

11 HTLM : les principales balises liste énumérée... < OL > liste (non énumérée)... < UL > élément de liste... <LI > nouveau paragraphe... <P > titre (1 < n < 8)... < Hn > tableau... < TABLE> formulaire... < FORM > insertion d une image... < IMG SRC= url > gras, italique, courrier... < B >, < IT >, < TT > 11

12 HTML : insertion de liens hypertexte Comment associer une URL à un mot? < A HREF= url > texte < /A > HREF est un attribut de la balise < A > url est une valeur d URL le navigateur souligne ou attribue une couleur spécifique au texte entre les balises < A > et < /A > pour montrer à l utilisateur que texte = texte + lien. < A HREF= > la page de N. Bidoit < /A > 12

13 HTML : insertion de liens hypertexte Comment associé un point d entrée dans un document? spécifier une étiquette (marque) dans le document < A NAME=nom étiquette > texte < /A > définir un lien avec une étiquette dans le même document < A HREF=#nom étiquette > texte < /A > définir un lien avec une étiquette dans un autre document < A HREF=url-document#nom étiquette > texte < /A > Exemple :... < A NAME=mamarque > Chapitre 1 < /A > Vous pourrez revenir lire ce texte plus tard... Reportez-vous au < A HREF=mamarque > Chapitre 1 < /A > si nécessaire... 13

14 HTML : un exemple plus sophistiqué <html> <head> <title>nicole Bidoit Home Page</title> </head> <h1 ALIGN=CENTER><img SRC="nicole.jpg" HEIGHT=300 WIDTH=225 ALIGN=CENTER> <img SRC="nicole-new.jpg" HEIGHT=300 WIDTH=225 ALIGN=CENTER></h1> <h1 ALIGN=CENTER> </a> Nicole Bidoit </center> </h1> <center>lri (bat 490)</center> <center>universit Paris-Sud</center> <center>f Orsay Cedex</center> <br> <center>tel: +33 (0) </center> 14

15 <hr> <center> <blink> <a HREF=Bestof1-web/index.html> Quelques photos de Garfield...</a> </blink> </center> <hr> <h1>recherche </h1> <! -- essai de commentaire en html> <ul> <li> Thmes de recherche (voir les <a HREF= thmes de l quipe</a>) </li> <br> <li> <a HREF= Publications</a> </li> <br> </ul> </html> 15

16 HTML : les tableaux introduire un tableau < TABLE >... < /TABLE > une ligne : < TR >... < /TR > une cellule : < TD >... < /TD > imbrication d un tableau dans une cellule la présentation (disposition des colomnes) est calculée par le navigateur très utilisé pour organiser la présentation d une page 16

17 HTML : les tableaux un exemple <HTML> <HEAD> <TITLE> tableau HTML</TITLE> </HEAD> <BODY BGCOLOR= white > < TABLE BORDER=4 CELLSPACING=2 CELLEPADDING=2> < CAPTION ALIGN=bottom> <B> Mes Films </B> </CAPTION> <TR> <TH> Titre </TH> <TH> Réalisateur </TH> </TR> <TR> <TD> Alien </TD> <TD> Scott </TD> </TR> <TR> <TD> Speed2 </TD> <TD> J. de Bont </TD> </TR> <TR> <TD> Marion </TD> <TD> Poirier </TD> </TR> <TR> <TD> Van Gogh </TD> <TD> Pialat </TD> </TR> </TABLE> </BODY> </HTML> 17

18 HTML : les tableaux le rendu de l exemple à vous d essayer... 18

19 HTML : les feuilles de style Motivation définir le formatage de texte : lourd et répétitif complexe pour un gros document contrôle incomplet sur le positionnement Feuilles de style (CSS) définir globalement la mise en forme regroupement des instructions de m.e.f dans un fichier possibilité d associer une feuille de style à plusieurs documents 19

20 HTML : les feuilles de style un exemple Instruction / règle : sélecteur { propriété : valeur } le sélecteur peut être n importe quelle balise la propriété peut être n importe quel attribut /* définition d un fond de texte toujours blanc */ BODY { background-color : white } groupement des sélecteurs : /* définition de la couleur des ancres et en-têtes */ A, H1, H2, H3 {color : #ca0000} groupement des propriétés : CAPTION { font-size : large ; color : #ca0000 } 20

21 HTML : les feuilles de style un exemple définition de classes sélecteur + fin que la balise (classe = contexte d application) sélecteur indépendant des balises /* classes pour alterner les couleurs des lignes d un tableau */ TR.A0 {backgroud-color : white } TR.A1 {backgroud-color : yellow } < TR Class= A0 > /* classe générique */.attention {background-color = red ; color = white } < B Class= attention > 21

22 Feuille de style... application <HTML> <HEAD> <TITLE> tableau HTML</TITLE> <LINK REL=stylesheet HREF= ExCSS.css TYPE= text/css > </HEAD> <BODY BGCOLOR= white > < TABLE BORDER=4 CELLSPACING=2 CELLEPADDING=2> < CAPTION ALIGN=bottom> <B class= attention > Mes Films </B> </CAPTION> <TR> <TH> Titre </TH> <TH> Réalisateur </TH> </TR> <TR Class=A0 > <TD> Alien </TD> <TD> Scott </TD> </TR> <TR Class=A1 > <TD> Speed2 </TD> <TD> J. de Bont </TD> </TR> <TR Class=A0 > <TD> Marion </TD> <TD> Poirier </TD> </TR> <TR Class=A1 > <TD> Van Gogh </TD> <TD> Pialat </TD> </TR> </TABLE></BODY> </HTML> 22

23 Programmation CGI pages HTML statiques : contenu fixé à l avance maintenance = manipulation d un grand volume de pages pages HTML dynamiques : produire des documents par un programme liste de films acquisition de paramètres utilisateur par le programme année de parution CGI = Commom Gateway Interface gestion de sites web dynamiques PHP s appuie sur le protocole CGI pour les échanges 23

24 Formulaire et programmation CGI Client : demande du document HTML (avec formulaire) envoi du document : Serveur Client : Saisie du formulaire (valeurs pour les paramètres) + appel du programme CGI Exécution du programme + envoi du document résultat : Serveur Client : Affichage du document résultat 24

25 Formulaire conteneur de définition d un formulaire : <form>... </form> Attributs essentiels : ACTION : référence au programme à exécuter METHOD : mode de transmission des paramètres (GET ou POST) ENCTYPE : type de codage des données du formulaire application/x-www-form-urlencoded : les champs du formulaires sont transmis sous la forme nom=valeur séparés par &. multipart/form-data pour des transmissions avec fichiers. <form ACTION= METHOD= POST > 25

26 Formulaire (suite) balises pour définir les champs de saisies la balise <INPUT> Attributs essentiels : NAME : nom pour le paramètre/champ dans le programme VALUE: valeur par défaut du paramètre/champ TYPE : type d un paramètre/champ TEXT : chaîne de caractères SIZE : longueur de la chaîne Titre : <INPUT TYPE=TEXT SIZE=20 NAME= titre > PASSWORD : la saisie du texte est remplacée par des * HIDDEN : le champ est totalement invisible 26

27 Formulaire (suite) CHECKBOX : création d un bouton à cocher. Pour grouper plusieurs champs, utiliser le même nom. Possibilité de cocher un ou plusieurs champs. Valeur est invisible. Comédie : <INPUT TYPE= CHECKBOX TEXT NAME= genre VALUE= C > Drame : <INPUT TYPE= CHECKBOX TEXT NAME= genre VALUE= D > Histoire : <INPUT TYPE= CHECKBOX TEXT NAME= genre VALUE= H > RADIOBOX : idem mais choix exclusif SUBMIT : validation de saisie RESET : réinitialisation du formulaire FILE : transmission d un fichier. 27

28 Formulaire le conteneur <SELECT> affichage d options à choisir par l utilisateur chaque option est définie par une balise <OPTION> Metteur en scène : <SELECT NAME= realisateur SIZE=3> <OPTION VALUE=1 > Alfred Hitchcock <OPTION VALUE=2 > Maurice Pialat <OPTION VALUE=3 SELECTED > Quentin Tarantino <OPTION VALUE=4> John Woo </SELECT> le conteneur <TEXTAREA> permet la saisie de texte dans une zone <TEXTAREA NAME= resume COLS=30 ROW=3> Résumé du film </TEXTAREA> 28

29 Formulaire et programmation CGI présentation graphique peu attrayante ajout de tableau difficile a mettre en oeuvre contrôle des valeurs saisies problème de sécurité échanges client/serveur (non abordés) lourdeur d accès au données pas de concurrence d accès solution plus souple = PHP 29

30 PHP / PostgreSql puissance et facilité d utilisation des outils PHP est un language de programmation proche du langage C destiné à être intégré dans des documents HTML. créé par Rasmus Lerdorf (1994) dédié à la production de pages HTML dynamiques disponible sous Unix, Linux, Windows... language objet complet (classes, objets, héritage) librairies (listes, files d attentes, piles, réseaux..., images, génération de PDF,...) interfacer avec les SGBDs (Oracle, MySql, PostgreSql,...) PostgreSql est un SGBD relationnel gratuit (idem pour MySql) utilisation en TP. 30

31 Premier exemple PHP <HTML> <HEAD> <TITLE> HTML avec PHP </TITLE> <LINK REL=stylesheet HREF= film.css TYPE= tex/css > </HEAD> <BODY> <H1> HTML + PHP </H1> Nous sommes le <?php echo Date( j/m/y );?> <P> <?php je suis $HTTP USER AGENT et je dialogue avec $SERVER NAME. ;?> </BODY></HTML> produit le document HTML suivant : <HTML> <HEAD> <TITLE> HTML avec PHP </TITLE> <LINK REL=stylesheet HREF= film.css TYPE= tex/css > </HEAD> <BODY> <H1> HTML + PHP </H1> Nous sommes le 5/01/2004 <P> je suis Mozilla/4.77 [en] (X11; U; Linux i686) et je dialogue avec </BODY></HTML> 31

32 PHP : interface avec ProstgreSql ensemble de fonctions : créer et manipuler les infos d une BD pg connect() : ouvrir une connection a une b.d. PostgreSql. La fonction rend une resource si la connection est établie, et False sinon. <?php $dbconn = pg_connect("dbname=mary"); //connect to a d.b. named "mary" $dbconn2 = pg_connect("host=localhost port=5432 dbname=mary"); // connect to a d.b. named "mary" on "localhost" at port "5432" $dbconn3 = pg_connect("host=sheep port=5432 dbname=mary user=lamb password=foo"); //connect to a d.b. named "mary" on the host "sheep" with a username and password $conn_string = "host=sheep port=5432 dbname=test user=lamb password=bar"; $dbconn4 = pg_connect($conn_string); //connect to a d.b. named "test" on the host "sheep" with a username and password?> Attention : ancienne syntaxe conn = pg connect("host", "port", "options", "tty", "dbname") 32

33 PHP : interface avec ProstgreSql pg query(resource connection, string query) envoie une requête SQL à la bd PostgreSQL spécifié par la connection. Elle rend une ressource résultat si la requête est correctement exécutée et False sinon. Le fonction pg last error() donne des informations sur la connection. <?php $ConnId = pg_connect ("blablabla"); $ResId1 = pg_exec ("select * from R", $ConnId); $req2 = "select A from R"; $ResId2 = pg_exec (ConnId, $req2 ); pg_close ($ConnId);?> Attention : ancien nom pg exec() 33

34 PHP : interface avec ProstgreSql pg num rows(resource result) retourne le nombre de n-uplets du résultat identifié par la variable resource result Cette fonction rend -1 en cas d erreur. pg affected rows() rend le nombre de n-uplets touchés par une mise à jour SQL ie par INSERT, UPDATE ou DELETE. pg fetch row(result, i) retourne dans un tableau le ième nuplet du résultat indentifié par result. Le n-uplet est transformé en un tableau et chaque composant est un élément du tableau. 34

35 PHP : interface avec ProstgreSql pg fetch array(results, i, option) met le ième n-uplet du résultat identifié par result dans un tableau, rend FALSE si erreur. Possibilité d accéder au composant par le nom des attributs. <?php $conn = pg_pconnect("blablabla"); if (!$conn) { echo "An error occured.\n"; exit; } $result = pg_query($conn, "SELECT * FROM film"); if (!$result) { echo "An error occured.\n"; exit;} $arr = pg_fetch_array($result, 0, PGSQL_NUM); echo $arr[0]. " <- array\n"; $arr = pg_fetch_array($result, 1, PGSQL_ASSOC); echo $arr["titre"]. " <- array\n";?> 35

36 PHP : interface avec ProstgreSql <?php $conn = pg_pconnect("blablabla"); if (!$conn) { echo "An error occured.\n"; exit; } $req="select titre, acteur from Film"; $result = pg_query($conn, $req); if (!$result) {echo "the query failed.\n"; exit; } $nb_nuplets = pg_numrows($result); for ($i=0; $i<$nb_nuplets;$i++) { $ligne = pg_fetch_array($result, $i); echo $ligne[titre]; echo "<BR>" ; echo $ligne[acteur]; echo "<BR>" ; }?> Ce programme ouvre une connection, lance une requête et affiche le résultat n-uplet par n-uplet. 36