Cours complet developpement web.pdf

Cours complet developpement web

...

1.Les bases
Dans ce chapitre, nous présentons les bases de la programmation Web. Il a pour but essentiel de faire découvrir les grands principes de la programmation Web avant de mettre ceux-ci en pratique avec un langage et un environnement particuliers. Il présente de nombreux exemples qu'il est conseillé de tester afin de "s'imprégner" peu à peu de la philosophie du développement web.
1.1Les composantes d'une application Web
IIS (NT), PWS(Win9x)
3
Scripts exécutés côté serveur. Ils peuvent l'être par des modules du serveur ou par des PERL (Apache, IIS, PWS)
programmes externes au serveur (CGI).                                                                                      VBSCRIPT (IIS,PWS)
JAVASCRIPT (IIS,PWS)
PHP (Apache, IIS, PWS)
JAVA (Apache, IIS, PWS)
C#, VB.NET (IIS)
 Base de données - Celle-ci peut être sur la même machine que le programme qui Oracle (Linux, Windows) l'exploite ou sur une autre via Internet.    
MySQL (Linux, Windows)
Access (Windows)
SQL Server (Windows) OS Client      Linux, Windows Navigateur Web Netscape, Internet Explorer
Scripts exécutés côté client au sein du navigateur. Ces scripts n'ont aucun accès aux VBscript (IE) disques du poste client.
 Javascript (IE, Netscape)
Perlscript (IE) Applets JAVA
1.2Les échanges de données dans une application web avec formulaire
Le serveur Web lui envoie la page Web de cette URL. Elle peut être statique ou bien dynamiquement générée par un script serveur (SA) qui a pu utiliser le contenu de bases de données (SB, SC). Ici, le script détectera que l'URL a été demandée sans passage de paramètres et génèrera la page WEB initiale.
Le navigateur reçoit la page et l'affiche (CA). Des scripts côté navigateur (CB) ont pu modifier la page initiale envoyée par le serveur. Ensuite par des interactions entre l'utilisateur (CD) et les scripts (CB) la page Web va être modifiée. Les formulaires vont notamment être remplis.
 L'utilisateur valide les données du formulaire qui doivent alors être envoyées au serveur web. Le navigateur redemande l'URL initiale ou une autre selon les cas et transmet en même temps au serveur les valeurs du formulaire. Il peut utiliser pour ce faire deux méthodes appelées GET et POST. A réception de la demande du client, le serveur déclenche le script (SA) associé à l'URL demandée, script qui va détecter les paramètres et les traiter.
 Le serveur délivre la page WEB construite par programme (SA, SB, SC). Cette étape est identique à l'étape 2 précédente. Les échanges se font désormais selon les étapes 2 et 3.
1.3Quelques ressources
Ci-dessous on trouvera une liste de ressources permettant d'installer et d'utiliser certains outils permettant de faire du développement web. On trouvera en annexe, une aide à l'installation de ces outils.
Serveur Apache  apache.org
-     Apache, Installation et Mise en Å“uvre, O'Reilly
Serveur IIS, PWS
VBSCRIPT, ASP     microsoft.com
 activestate.com
-  Programmation en Perl, Larry Wall, O'Reilly
-  Applications CGI en Perl, Neuss et Vromans, O'Reilly
-  la documentation HTML livrée avec Active Perl
 php.net
-  Prog. Web avec PHP, Lacroix, Eyrolles
-  Manuel d'utilisation de PHP récupérable sur le site de PHP
//msdn.microsoft.com/scripting/vbscript/download/vbsdoc.exe
//msdn.microsoft.com/scripting/default.htm?/scripting/vbscript
-  Interface entre WEB et Base de données sous WinNT, Alex Homer, Eyrolles
Base de données    -  JAVA Servlets, Jason Hunter, O'Reilly
-  Programmation réseau avec Java, Elliotte Rusty Harold, O'Reilly
-  JDBC et Java, George Reese, O'reilly
 mysql.com
msdn.microsoft.com/scripting/jscript/download/jsdoc.exe developer.netscape.com/docs/manuals/index.html developer.netscape.com/docs/manuals/index.html  sun.com  oracle.com
-     Le manuel de MySQL est disponible sur le site de MySQL
-     Oracle 8i sous Linux, Gilles Briard, Eyrolles- Oracle 8i sous NT, Gilles Briard, Eyrolles
1.4Notations
Dans la suite, nous supposerons qu'un certain nombre d'outils ont été installés et adopterons les notations suivantes :
<apache-DocumentRoot> racine des pages Web délivrées par Apache. C'est sous cette racine que doivent se trouver les pages Web. Ainsi l'URL  //localhost/page1.htm correspond au fichier <apache-DocumentRoot>\page1.htm.
racine de l'arborescence lié à l'alias cgi-bin et où l'on peut placer des scripts CGI pour Apache. Ainsi l'URL  //localhost/cgi-bin/test1.pl correspond au fichier <apache-cgi-bin>\test1.pl.
racine des pages Web délivrées par PWS. C'est sous cette racine que doivent se trouver les pages Web.
Ainsi l'URL  //localhost/page1.htm correspond au fichier <pws-DocumentRoot>\page1.htm. racine de l'arborescence du langage Perl. L'exécutable perl.exe se trouve en général dans <perl>\bin. racine de l'arborescence du langage PHP. L'exécutable php.exe se trouve en général dans <php>. racine de l'arborescence de java. Les exécutables liés à java se trouvent dans <java>\bin.
racine du serveur Tomcat. On trouve des exemples de servlets dans <tomcat>\webapps\examples\servlets et des exemples de pages JSP dans <tomcat>\webbapps\examples\jsp
On se reportera pour chacun de ces outils à l'annexe qui donne une aide pour leur installation.
1.5Pages Web statiques, Pages Web dynamiques
Une page statique est représentée par un fichier HTML. Une page dynamique est, elle, générée "à la volée" par le serveur web. Nous vous proposons dans ce paragraphe divers tests avec différents serveurs web et différents langages de programmation afin de montrer l'universalité du concept web.
1.5.1Page statique HTML (HyperText Markup Language)
Considérons le code HTML suivant :
<html>
  <head>
    <title>essai 1 : une page statique</title>
   </head>
   <body>
     <center>
     <h1>Une page statique...</h1>
   </body> </html>
qui produit la page web suivante :
Les tests
-       lancer le serveur Apache
-       mettre le script essai1.html dans <apache-DocumentRoot>
-       visualiser l’URL  //localhost/essai1.html avec un navigateur - arrêter le serveur Apache
-       lancer le serveur PWS
-       mettre le script essai1.html dans <pws-DocumentRoot>
-       visualiser l’URL  //localhost/essai1.html avec un navigateur
1.5.2Une page ASP (Active Server Pages)
Le script essai2.asp :
<html>
  <head>
    <title>essai 1 : une page asp</title>
   </head>
   <body>
     <center>
     <h1>Une page asp générée dynamiquement par le serveur PWS</h1>
     <h2>Il est <% =time %></h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body> </html>
produit la page web suivante :
Le test
-  lancer le serveur PWS
-  mettre le script essai2.asp dans <pws-DocumentRoot>
-  demander l’URL  //localhost/essai2.asp avec un navigateur
1.5.3Un script PERL (Practical Extracting and Reporting Language)
Le script essai3.pl :
#!d:\perl\bin\perl.exe
($secondes,$minutes,$heure)=localtime(time);
print <<HTML
Content-type: text/html
<html>
  <head>
    <title>essai 1 : un script Perl</title>
   </head>
   <body>
     <center>
     <h1>Une page générée dynamiquement par un script Perl</h1>
     <h2>Il est $heure:$minutes:$secondes</h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>
HTML
;
La première ligne est le chemin de l'exécutable perl.exe. Il faut l'adapter si besoin est. Une fois exécuté par un serveur Web, le script produit la page suivante :
Le test
-       serveur Web : Apache
-       pour information, visualisez le fichier de configuration srm.conf ou httpd.conf selon la version d'Apache dans <apache>\confs et rechercher la ligne parlant de cgi-bin afin de connaître le répertoire <apache-cgi-bin> dans lequel placer essai3.pl. - mettre le script essai3.pl dans <apache-cgi-bin>
-       demander l’url  //localhost/cgi-bin/essai3.pl
A noter qu’il faut davantage de temps pour avoir la page perl que la page asp. Ceci parce que le script Perl est exécuté par un interpréteur Perl qu’il faut charger avant qu’il puisse exécuter le script. Il ne reste pas en permanence en mémoire.
1.5.4Un script PHP (Personal Home Page, HyperText Processor)
Le script essai4.php
<html>
  <head>
    <title>essai 4 : une page php</title>
   </head>
   <body>
     <center>
<h1>Une page PHP générée dynamiquement</h1>      <h2> <?
     $maintenant=time();
     echo date("j/m/y, h:i:s",$maintenant);
?>
     </h2>
     <br>
     A chaque fois que vous rafraîchissez la page, l'heure change.
   </body>
</html>
Le script précédent produit la page web suivante :
Les tests
-  consulter le fichier de configuration srm.conf  ou httpd.conf d'Apache dans <Apache>\confs
-  pour information, vérifier les lignes de configuration de php
-  lancer le serveur Apache
-  mettre essai4.php dans <apache-DocumentRoot>
-  demander l’URL  //localhost/essai4.php
-  lancer le serveur PWS
-  pour information, vérifier la configuration de PWS à propos de php
-  mettre essai4.php dans <pws-DocumentRoot>\php - demander l'URL  //localhost/essai4.php
1.5.5Un script JSP (Java Server Pages)
Le script heure.jsp
<%  //programme Java affichant l'heure %>
<%@ page import="java.util.*" %>
<%
// code JAVA pour calculer l'heure
  Calendar calendrier=Calendar.getInstance();   int heures=calendrier.get(Calendar.HOUR_OF_DAY);   int minutes=calendrier.get(Calendar.MINUTE);   int secondes=calendrier.get(Calendar.SECOND);
  // heures, minutes, secondes sont des variables globales
// qui pourront être utilisées dans le code HTML %>
<% // code HTML %>
<html>
  <head>
     <title>Page JSP affichant l'heure</title>
  </head>
  <body>
     <center>
     <h1>Une page JSP générée dynamiquement</h1>
     <h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
     <br>
     <h3>A chaque fois que vous rechargez la page, l'heure change</h3>
  </body> </html>
Une fois exécuté par le serveur web, ce script produit la page suivante :
 Les tests
§  mettre le script heure.jsp dans <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) ou dans <tomcat>\webapps\examples\jsp (Tomcat 4.x)
§  lancer le serveur Tomcat
§  demander l'URL  //localhost:8080/examples/jsp/heure.jsp
1.5.6Conclusion
Les exemples précédents ont montré que :
•    une page HTML pouvait être générée dynamiquement par un programme. C'est tout le sens de la programmation Web.
•    que les langages et les serveurs web utilisés pouvaient être divers. Actuellement on observe les grandes tendances suivantes
:
o les tandems Apache/PHP (Windows, Linux) et IIS/PHP (Windows) o la technologie ASP.NET sur les plate-formes Windows qui associent le serveur IIS à un langage .NET (C#,
VB.NET, ...) o la technologie des servlets Java et pages JSP fonctionnant avec différents serveurs (Tomcat, Apache, IIS) et sur différentes plate-formes (Windows, Linux). C'est cette denière technologie qui sera plus particulièrement développée dans ce document.
1.6Scripts côté navigateur
Une page HTML  peut contenir des scripts qui seront exécutés par le navigateur. Les langages de script côté navigateur sont nombreux. En voici quelques-uns :
Langage    Navigateurs utilisables
Vbscript                     IE
Javascript                    IE, Netscape
PerlScript                   IE
Java                             IE, Netscape
Prenons quelques exemples.
1.6.1Une page Web avec un script Vbscript, côté navigateur
La page vbs1.html
<html>
  <head>
    <title>essai : une page web avec un script vb</title>
    <script language="vbscript"> function reagir
        alert "Vous avez cliqué sur le bouton OK"       end function
    </script>
   </head>
   <body>
<center>
     <h1>Une page Web avec un script VB</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
       </tr>   </table>
   </body>
</html>
La page HTML ci-dessus ne contient pas simplement du code HTML mais également un programme destiné à être exécuté par le navigateur qui aura chargé cette page. Le code est le suivant :
    <script language="vbscript"> function reagir
        alert "Vous avez cliqué sur le bouton OK"       end function     </script>
Les balises <script></script> servent à délimiter les scripts dans la page HTML. Ces scripts peuvent être écrits dans différents langages et c'est l'option language de la balise <script> qui indique le langage utilisé. Ici c'est VBScript. Nous ne chercherons pas à détailler ce langage. Le script ci-dessus définit une fonction appelée réagir qui affiche un message. Quand cette fonction est-elle appelée ? C'est la ligne de code HTML suivante qui nous l'indique :
         <input type="button" value="OK" name="cmdOK" onclick="reagir">
L'attribut onclick indique le nom de la fonction à appeler lorsque l'utilisateur cliquera sur le bouton OK. Lorsque le navigateur aura chargé cette page et que l'utilisateur cliquera sur le bouton OK, on aura la page suivante :
Les tests
Seul le navigateur IE est capable d'exécuter des scripts VBScript. Netscape nécessite des compléments logiciels pour le faire. On pourra faire les tests suivants :
-  serveur Apache
-  script vbs1.html dans <apache-DocumentRoot>
-  demander l’url  //localhost/vbs1.html avec le navigateur IE
-  serveur PWS
-  script vbs1.html dans <pws-DocumentRoot>
-  demander l’url  //localhost/vbs1.html avec le navigateur IE
1.6.2Une page Web avec un script Javascript, côté navigateur
La page : js1.html
<html>
  <head>
    <title>essai 4 : une page web avec un script Javascript</title>
    <script language="javascript"> function reagir(){
        alert ("Vous avez cliqué sur le bouton OK");
      }
    </script>
   </head>
   <body>
     <center>
     <h1>Une page Web avec un script Javascript</h1>
     <table>
       <tr>
         <td>Cliquez sur le bouton</td>
         <td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
       </tr> </table>
   </body>
</html>
On a là quelque chose d'identique à la page précédente si ce n'est qu'on a remplacé le langage VBScript par le langage Javascript. Celui-ci présente l'avantage d'être accepté par les deux navigateurs IE et Netscape. Son exécution donne les mêmes résultats :
Les tests
-  serveur Apache
-  script js1.html dans <apache-DocumentRoot>
-  demander l’url  //localhost/js1.html avec le navigateur IE ou Netscape
-  serveur PWS
-  script js1.html dans <pws-DocumentRoot>
-  demander l’url  //localhost/js1.html avec le navigateur IE ou Netscape