1 / 41

BD Web

BD Web. 1. Introduction au Web 2. Technique de base CGI 3. Les pages actives ASP 4. Les pages active JSP 5. Les pages actives PHP. 1. Qu'est-ce-que le Web ?. Service Internet permettant de naviguer à travers des pages web.

tamika
Download Presentation

BD Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BD Web 1. Introduction au Web 2. Technique de base CGI 3. Les pages actives ASP 4. Les pages active JSP 5. Les pages actives PHP

  2. 1. Qu'est-ce-que le Web ? • Service Internet permettant de naviguer à travers des pages web. • HTTP (HyperText Transfer Protocol) est le protocole le utilisé pour envoyer les requêtes et recevoir les pages • HTTP spécifié par le consortium W3C est actuellement à sa version 1.1. • HTTPS est une version sécurisée permettant de crypter les échanges.

  3. HTML • Langage dérivé de SGML définissant un jeu de balises fixes pour coder et transférer des documents avec présentations intégrées sur le Web. • Les documents sont liés entre eux par des hyperliens 1-1 • Les éléments de données sont marqués par des balises selon leur rôle et mise en forme

  4. Principales balises • La balise de début <HTML>   • elle doit être fermée à la fin du document par </HTML>. • La balise de titre <TITLE>  • elle permet d’indiquer le titre de la page éditée de manière spéciale par les navigateurs  ; se termine après le titre par une balise </TITLE>. • Les balises de niveaux • Exemple: <H1> Bienvenue sur le Web </H1>, <H2> Les BD et le Web </H2>. • Les balises de mise en forme • Exemple: <B> Ceci est en gras </B>, <I> Ceci est en italique </I>. • Les balises d’intégration d’images et de son • <IMG SRC = "URL de l’image">. • Les amarres vers d’autres documents • exemple <A HREF = "URL de l’amarre"> cliquez ici </A>. • Les listes non numérotées du type • <UL> <LI> alinea 1 <LI> alinea 2 </UL>. • Les listes numérotées du type • <OL> <LI> alinea 1 <LI> alinea 2 </OL>.

  5. Exemple (1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="Mozilla/4.06 [fr] (Windows2000; I) [Netscape]"> <META NAME="AUTHOR" CONTENT="Gardarin"> <TITLE>SYSTEMES D'INFORMATION XML</TITLE> </HEAD> BODY> <HR> <H1>SYSTEMES D'INFORMATION XML</H1> <PRE><I>Georges GARDARIN</I></PRE> <HR>

  6. Exemple (2) <P>l'ouvrage de r&eacute;f&eacute;rence en mati&egrave;re de bases de donn&eacute;es et XML. <BR>pr&eacute;sente les points suivants : <UL> <LI>XML, origines et &eacute;volution, XQuery, optimisation et implantation;</LI> <LI>concepts de base des services Web, Architecture .NET, S&eacute;curit&eacute; ;</LI> <LI>Int&eacute;gration de donn&eacute;es;</LI> </UL> Ce livre indispensable pr&eacute;sente donc une synth&egrave;se tr&egrave;s compl&egrave;te des techniques XML. </BODY> </HTML>

  7. 1.Le navigateur demande l'URL http://www.gardarin.org/test.html au browser. 2.Le client envoie la requête /test.html au serveur HTTP www.gardarin.org. 3.Le serveur reçoit la requête /test.html. 4.Le serveur envoie au client le fichier test.html encapsulé en format MIME. 5.Le client réceptionne l'objet test.html en format MIME. 6.Le navigateur interprète et affiche l'objet test.html. Scénario typique Serveur HTTP GET / test.html http://www. prism.uvsq.fr/test.html Text/html … (test.html) blablabla Client test.html

  8. W3C et HTML • W3C • Organisme chargé de standardiser les protocoles et langages relatifs à Internet • HTML 4.01 • Dernière version de HTML, les nouveaux développements portant sur XML (langage à tags ouverts) • DHTML (Dynamic HyperText Markup Language) • Ensemble de specs complémentaires au HTML permettant de rendre une page web dynamique côté client

  9. DHTML • Javascript • permet d'exécuter des scripts (programmes en texte) sur le navigateur du client • DOM (Document Object Model) • définit une arborescence d'objets représentant la structure du document • permet de manipuler l'ensemble des objets contenus dans le document (avec Javascript)

  10. Feuilles de style CSS • Les feuilles de style (CSS - cascading StyleSheets) • permettent de définir de façon annexe au document les styles de chaque balise • peuvent être incluse dans le même fichier ou référencées. • Un même document peut avoir plusieurs styles selon le terminal d'affichage.

  11. Exemple <LINK REL="stylesheet" HREF="fichier.css"> [ ... ] TD, TH { font-family: "Helvetica", sans-serif line-height: 1.35 ; } H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ; } [ ... ] @import "truc.css" BODY { color: #000 ; background: #FBFBFF ; margin-left: 9% ; margin-right: 6% ; font-family: "Helvetica", sans-serif ; line-height: 1.35 ; }

  12. Limites HTML statique • Maintenance difficile du fait de l'obligation de modifier manuellement chacune des pages • Impossibilité de renvoyer une page personnalisée selon le visiteur • Impossibilité de créer une page dynamiquement selon le contenu d'une base de données

  13. Site Web BD • Site Web dynamique • partage d ’une base de données globales • utilisation de templates côté serveur avec accès SQL • standardisation des méta-données et des formulaires • accès via SQL optimisé avec indexation du contenu • augmentation de la productivité des développeurs

  14. Application: Commerce électronique • Présentation de catalogues • contact du consommateur • exploration des produits • Accès hiérarchique aux description et prix • Visualisation multimédia 2 ou 3D, démonstrations • Couplage aux BD de l’entreprise • Transactions sur Internet • saisie de la commande • paiement sécurisé via Internet • carte de crédit, monnaie digitale, chèque électronique • suivi de la commande

  15. Les techniques • CGI (Common Gateway Interface) • consiste à activer des programmes (généralement écrits en perl ou en javascript voir en C), puis de leur faire renvoyer un contenu HTML • ASP (Active Server Pages) de Microsoft • permet de simplifier l'écriture de tels scripts en manipulant des objets en VBScript. • JSP (Java Server Pages) • permet d'utiliser la puissance de Java pour créer des pages web dynamiques. • PHP (Hypertext Preprocessor) • Langage simple bien adapté au Web

  16. 2. Common Gateway Interface (CGI) • Protocole d’appel dynamique de programme sur un serveur Web depuis un client • Surcouche de HTTP pour passer des paramètres • Programmes ou scripts invoqués par CGI Serveur Web Client Page HTML téléchargement Page HTML url longue Prog. CGI réponse données

  17. Scénario Param . Url Longue /cgi-bin/p?param P SQL p a HTML s s e r e HTML l l e Navigateur ... Bases de Serveur données HTTP Scripts d'application Serveur d'application

  18. Vue Synthétique

  19. Qu'est-ce que l'interface CGI ? • Définition et propriétés • standard de programmation pour accéder aux données des formulaires HTML côté serveur • la passerelle invoque les scripts en passant les paramètres sous une forme codée • un processus séparé est activé à chaque appel de programme • L'envoi de paramètres à un script CGI • se fait par l'intermédiaire d'un formulaire HTML. • créé à l'aide de la balise <FORM> contenant des boutons, des champs, des listes et/ou des cases à cocher repérés par les noms de paramètres, et un bouton de soumission du formulaire

  20. Exemple de Formulaire <HTML> <HEAD> <TITLE> Exemple de formulaire</TITLE> </HEAD> <BODY> <H1>Exemple de formulaire</H1> <FORM METHOD=POST ACTION="/cgi-bin/invite.exe"> Nom: <INPUT TYPE=TEXT SIZE=30 NAME="nom"><BR> Adresse e-mail: <INPUT TYPE=TEXT SIZE=20 NAME="email"><BR> <P>Commentaires:<BR> <TEXTAREA COLS=60 ROWS=15 NAME="comment"> </TEXTAREA> <INPUT TYPE=SUBMIT VALUE="OK"> </FORM> …

  21. Variables d'environnement • Données stockées dans des variables permettant au programme d'avoir des informations sur son environnement • Informations sur le serveur • DATE_GMT, DATE_LOCAL • Date actuelle au format GMT et local • DOCUMENT_ROOT • Racine des documents Web sur le serveur • HTTP_HOST • Nom de domaine du serveur • SERVER_SOFTWARE • Type (logiciel) du serveur web • ...

  22. CONTENT_LENGTH Longueur du corps de la requête CONTENT_TYPE Type de données du corps (format MIME) HTTP_COOKIE Cookie du client si jamais un cookie est effectivement présent sur le disque du client HTTP_REFERER URL de la page qui a appelé le script CGI HTTP_REQUEST_METHOD Méthode d'appel (GET, POST, ...) HTTP_USER_AGENT Navigateur et OS du client PATH chemin d'accès au script CGI PATH_INFO chemin d'accès au script CGI QUERY_STRING Paramètres du script REMOTE_ADDR Adresse IP du client appelant le script CGI Informations sur le client

  23. Get ou Post ? • GET envoie les paramètres du formulaire via l'URL • en ajoutant l'ensemble des paires nom/valeur à l'URL du script, séparé de celui-ci par un point d'interrogation, ce qui donne une URL longue (limitée à 255 caractères) du type: • http://nom_du_serveur/cgi-bin/ script.cgi?champ1=valeur1&champ2=valeur2... • passe les données dans la variable QUERY_STRING • POST code les données de la même manière mais • envoie les données à la suite des en-têtes HTTP, dans un champ appelé corps de la requête • les données présentes dans le corps de la requête sont accessibles via le fichier de flux d'entrée standard STDIN

  24. Les scripts serveur • Programme ou script (fichier de commandes) • capable de recevoir des paramètres depuis des clients, • d’accéder à une ou plusieurs sources de données • de générer des résultats sous forme HTML ou XML. • Langages de scripting ou de programmation • Interprété ou compilé • Perl, JavaScript, VB Script, Python • C, C++, Java, VB, C#, L4G

  25. Exemple de Script Perl #! /usr/local/bin/perl print "content-type : text/html\n\n"; // Fixe le format MIME print "<HTML>"; print "<HEAD>"; print "<TITLE>Hello world</TITLE>"; print "</HEAD>"; print "<BODY>"; print "Hello world!"; print "</BODY>"; print "</HTML>";

  26. CGI – évaluation • Avantages • utilisable avec n’importe quel navigateur et serveur Web • simple - intégré avec HTML • serveurs dans tous les langages • Inconvénients • supporte mal le multi-utilisateur • pas de gestion de contexte (session) • Extensions • version« fast CGI »

  27. 3. Les ASP de Microsoft • Standard mis au point par Microsoft en 1996 • Développement d'applications Web dynamiques • Intégration de scripts serveur au sein d'une page HTML à l'aide de balises spéciales • Compilés avec la version .NET • Environnement de programmation côté serveur • permettant de représenter sous forme d'objets les interactions entre le navigateur du client, le serveur web, ainsi que les connexions à des bases de données via SQL (ADO)

  28. Intégration de scripts dans des pages HTML ou XML <SCRIPT language="VBScript|Jscript" [runat="server|client"] [type="text/vbscript | jscript"] [src="url"] > code du script </SCRIPT> <% code du script %> Impression du texte et interprétation du code par le serveur d’ASP Exemple simple: <%@ LANGUAGE="VBSCRIPT" %> <HTML> <HEAD><TITLE>Exemple de script ASP</TITLE> </HEAD> <BODY> <% FOR i = 1 to 10 %> Bienvenue au cours BD Web <% Next %> </BODY> </HTML> Déclaration et Exemple

  29. Intégration indirecte des requêtes nécessite un script dialogue avec les formes, boutons, tables, ... émission des requêtes récupération des résultats Accès par objets VBScript Accès à la base via des ADO Création d’objets données <HTML> <% Vin=Request.QueryString("NumVin") Set NObj=Server.CreateObject("VINS.NumVin") if NObj.GetCru(Vin)=False then Server.Redirect("NumVin/entryform.htm") %> <H1> VIN CHOISI :<%=NObj.Cru%> </H1> <TABLE> <TR><TD>Degre</TD><TD>Millesime</TD><TD>Region</TD></TR> <TR><TD><%=NObj.Degre%></TD> <TD><%=NObj.Mill%></TD> <TD><%=NObj.Region%></TD></TR> </TABLE> <H2> DATE DE SELECTION : <%=time()%><%=date()%></H2> </HTML> Exemple d’accès BD

  30. Objets d'environnement

  31. 4. Les JSP du monde Java • Possibilité de définir des documents mixtes • HTML • Java (Scriptlets) • Appel de servlet (balise <servlet>) • Communication par des variables • Utilisation de tags <% … %> (similaire aux ASP) • Compilés en Servlet • Lors de la première utilisation • Prise en compte automatique des mises à jour • Possibilité d'intégrer des JavaBeans

  32. Intégration de Java dans HTML Directives de pages importation de packages sessions demandées buffers et threads Possibilité de variables globales Facilités d'éditions expressions Java converties objets textes et flots binaires PrintWriter OutputStream <HTML> <HEAD> <TITLE> Exemple de JSP </TITLE> </HEAD> <BODY> <!-- Fixer les parametres de la page --> <%@ page language = "java" %> <!-- Declarer une variable caracteres --> <% char c = 0; %> <!-- Scriplet - Code Java --> <% for (int i = 0; i < 26; i++) { c = (char) (0x41 + i) ; %> <!-- Afficher c --> <% = c %> <% } %> </BODY> </HTML Exemple de JSP

  33. Objet Description request Objet contenant la requête du client response Objet contenant la réponse de la page JSP. Généralement inutilisé (HTML en flux de sortie) pageContext Objet contenant des informations sur l'environnement du serveur session Objet contenant la session en cours application Objet contenant le contexte de servlet out Objet contenant le flux de sortie config Objet contenant la configuration de la servlet page Objet désignant la page elle-même exception Objet représentant une exception non interceptée Objets d'environnements

  34. Les servlet Java • Servlet • Moteur multi-thread d'exécution de classe côté serveur • Approche API objet (e.g., services, httprequest) • L’utilisateur surcharge de méthodes standards • Dialogue au-dessus de HTTP, RMI, … via CGI améliorée • Accès aux BD • JDBC : interface type ODBC (CLI RDA) depuis Java • SQLJ : incorporation d'ordres SQL dans Java pré-compilés

  35. Mécanisme d ’exécution de services au-dessus de HTTP Multithreads et performant dispatcher de requêtes HTTP Génération de contenus HTML format MIME supportés JPEG, GIF, etc. Servlet Container Create Thread Pool Instantiate Servelet Call init() method HTTP Request Allocate Thread Call service() method Do service() Free Thread Return Response HTTP Response Terminate Thread Pool Call destroy() method Architecture Servlet

  36. // Connexion Connection con = DriverManager.getConnection(url); // Création d'une instruction Statement statement = con.createStatement(); // Exécution d'une requete String query = "SELECT * FROM Employés"; ResultSet resultset = statement.executeQuery(query); // Traitement des résultats while(resultset.next()) { System.out.println(resultset.getString(2) + " " + resultset.getString(3)); } // fermeture de la connexion con.close(); } Accès BD : JDBC SQL ResultSet Base de données Application Serveur de données

  37. Langage de scripts intégré aux pages HTML Les scripts PHP sont entre balises <?php .. … ?> Possibilité de récupérer les variables de formulaires HTML $variable Exemple : <html> <head> <title>Hello World</title> </head> <body> <?php    echo "Hello world";  ?> </body> </html> 5. PHP de Apache (Open Source)

  38. Gestion de formulaires en PHP • PHP transforme tous les champs en variables d' environnement (globales) • Directement accessibles par nom • Également accessibles dans les tableaux associatifs $HTTP_POST_VARS et $HTTP_GET_VARS : suivant la méthode d' envoi GET ou POST • Attention: • Il ne faut pas avoir deux zones de formulaires avec le même nom sur la même page

  39. Accès aux BD • Méthode similaire quelque soit le SGBD: • Oracle, Sybase, DB2, MS SQL Server • MySQL, PostgreSQL, InterBase • Pilote ODBC • Il faut suivre la séquence : • 1.Connexion • 2.Requête • 3.Exploitation des résultats • 4.Fermeture de la connexion

  40. Exemple : insertion d’un vin • Saisie du numéro, cru et millésime • par une forme HTML • Insertion dans MySQL en PHP <?php mysql_connect("localhost","root",""); $connexion_reussi=mysql_selectdb("test"); if (!$connexion_reussi) echo "Connexion râtée"; mysql_query( "insert into vins (num, cru, date) values ('$num', '$cru', NOW()) ") or die("Impossible d'insérer le vin"); echo "Merci"; ?>

  41. 6. Bilan Pages Actives • Mixage HTML + scripts serveur • Compilés en code intermédiaire ou interprétés • Accès aux BD intégrés • Évolution vers XML • séparation fond et forme • complément à XSL

More Related