Laurent Tichit - Programmez votre site Web de A à Z

Installation
Tout se dont vous avez besoin est installé au CRFB. Si vous voulez travailler chez vous, il vous faudra installer quelques logiciels.
  • Windows (XP/Vista/Seven)
    • Installez un bon éditeur de texte, comme NotePad++. Vous en aurez besoin pour écrire vos pages.
    • Installez une pile WAMP (Windows-Apache-MySQL-PHP), au choix :
    • Important : dans "Préférence des Dossiers", désactivez l'option "Masquer l'extension des fichiers dont le type est connu".
  • Linux (Ubuntu/Debian)
    • Installez le serveur web Apache et le module PHP :
      sudo apt-get install php5
      Il faut connaître son mot de passe administrateur.
    • Tester : créez un fichier test.php contenant la ligne <?php phpinfo(); ?> dans le répertoire /var/www/. Pour celà il vous faut également être administrateur.
    • Ouvrez votre navigateur préféré à l'adresse :http://localhost/test.php.
      Vous devez voir s'afficher un tableau de couleur violette contenant des informations sur votre système.
    • Pour qu'Apache publie le répertoire $HOME/public_html de chaque utilisateur, il faut activer le module userdir. Pour cela :
      sudo a2enmod userdir
    • Redémarrez le serveur : sudo /etc/init.d/apache2 restart (start pour démarrer, stop pour l'arrêter).
    • Créez-vous un répertoire public_html. Pour celà :
      mkdir ~/public_html
      A l'intérieur de celui-ci, créez un fichier index.html. Il sera publié à l'adresse :
      http://localhost/~votre_login
  • MacOS X (10.5/10.6)
    Le serveur web Apache et son module PHP sont déjà installés sous Mac OS. Il "suffit" de les activer.
    • Installez un bon éditeur de texte, comme Fraise.
    • Important : de la même façon que pour Windows, il faut désactivez l'option "Masquer l'extension des fichiers dont le type est connu" qui devrait se trouver dans un menu du style "Préférence des Dossiers".
    • Activez PHP5 : éditez le fichier "Macintosh HD:private:etc:apache2:httpd.conf". Le système vous demandera le mot de passe d'administration.
      Cherchez la ligne : #LoadModule php5_module et décommentez-là (c-à-d, enlevez le "#")
    • Démarrez Apache : allez dans "System Preferences:Internet & Network:Sharing". Cochez la case "Web Sharing".
    • Testez : créez un fichier test.php contenant la ligne <?php phpinfo(); ?> dans le répertoire "Macintosh HD:Library:WebServer:Documents".
    • Ouvrez votre navigateur préféré à l'adresse : http://localhost/test.php
HTML
  • Le support de cours : XHTML.pdf
  • Les éléments en bloc. Ce sont les éléments de premier niveau. Ce sont eux qui structurent le document :
    • Les titres : <h1></h1>, <h2></h2>,... ,<h6></h6>
    • Les paragraphes d'un texte : <p></p>
    • Les listes ordonnées et non ordonnées : <ol></ol> et <ul></ul>
      • Elles contiennent seulement une suite d'éléments de liste : <li></li>. Ces éléments de liste peuvent, eux, contenir du texte, des images, des sauts de ligne, ...
    • Les lignes horizontales : <hr /> (attention : l'élément est composé d'une seule balise auto-fermante).
    • Les tableaux :<table></table>
      • Ils contiennent une suite de lignes : <tr></tr>
        • Chaque ligne contient des cases : <td></td>. Les cases peuvent contenir du texte, des images, ...
    • Il existe un autre élément en bloc très utilisé, mais qui ne possède pas de sémantique particulière. Il s'agit de <div></div> qui permet simplement de découper un document en sous-parties.
  • Les éléments en ligne. Ce sont les éléments apparentés à du texte ou mettant en forme le texte. Ils se trouvent toujours dans un éléments en bloc et ne peuvent pas contenir des éléments en bloc.
    • Les liens hypertexte : <a href="adresse_du_lien">texte cliquable</a>
    • Les images : <img src="chemin_de_l_image" /> (balise autofermante)
    • Saut de ligne : <br /> (balise autofermante)
    • Mettre en évidence : <strong></strong> et <em></em>
    • Il existe un autre élément en ligne très utilisé, mais qui ne possède pas de sémantique particulière. Il s'agit de <span></span> permettant simplement d'associer un style particulier à un élément en ligne. On s'en servira lorqu'on verra les CSS.
  • Dans votre répertoire Web, créez une page web appelée index.html qui sera la page d'accueil de votre site web. Insérez-y tous les éléments vus ci-dessus.
XHTML 1.0 Strict
  • Le support de cours : XHTML_1.0_Strict.pdf
  • Un bon cours en ligne (le Web en regorge) : xhtml.le-developpeur-web.com
  • Le validateur du w3 : validator.w3.org
  • Le but du jeu : créez une seconde page web et faites en sorte que vos deux pages soient valides!
  • Pour résumer, une page web XHTML 1.0 Strict commence par :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>
    	Votre Titre
        </title>
      </head>
      <body>
        Votre code XHTML 1.0 Strict
      </body>
    </html>
    
    • iso-8859-1 sera éventuellement remplacé par utf-8 (voire iso-8859-15), selon l'encodage utilisé pour sauvegarder vos fichier (voir dans le(s) menu(s) de votre éditeur de texte préféré).
    • Les seuls éléments XHTML pouvant se situer juste sous l'élément body sont les éléments de type bloc.
CSS
  • Dans le même répertoire que vos pages html, créez un fichier nommé monStyle.css contenant une feuille de style CSS, contenant uniquement la ligne suivante :
    body { background-color: #CC6699; }
    Rajoutez dans l'entête de vos pages html (entre <head> et </head>) la ligne suivante :
    <link rel="stylesheet" type="text/css" href="monStyle.css" />
  • Le support de cours : CSS.pdf
  • Quelques propriétés CSS :
                 background-color background-color:lavender (ou #E6E6FA)
                 color            color:steelblue (ou #4682B4)
                 font-size        font-size:24
                 font-family      font-family:courier (ou serif, sans-serif, monospace, cursive)
                 font-style       font-style:italic
                 font-weight      font-weight:bold
                 font-variant     font-variant:small-caps
                 line-height      line-height:14pt (ou line-height:140%)
                 list-style-type  list-style-type:square (ou upper-roman, none, decimal)
                 text-align       text-align:center (left, right, justify)
                 text-decoration  text-decoration:overline (ou underline)
                 text-indent      text-indent:10pt
                 text-transform   text-transform:lowercase (ou uppercase, capitalize)
                 vertical-align   vertical-align:top (ou bottom, middle)
    	     visible	      visible:collapse (ou hidden)
    
                 height              Hauteur du bloc
                 width               Largeur du bloc
                 margin-right        Marge de droite
                 margin-left         Marge de gauche
                 margin-top          Marge du haut
                 margin-bottom       Marge du bas
                 padding-right       Espace à droite
                 padding-left        Espace à gauche
                 padding-top         Espace en haut
                 padding-bottom      Espace en bas
                 border-style        Bordure (none, 3D, solid, outset)
                 border-top-width    Taille segment du haut
                 border-right-width  Segment de droite
                 border-bottom-width Segment du bas
                 border-left-width   Segment de gauche
                 border-color        Couleur de la bordure      
    
  • La liste des propriétés CSS 2.
  • La liste des couleurs CSS.
  • La liste des unités CSS.
  • La liste des sélecteurs CSS (et leur support par les différents navigateurs).
Les formulaires
Cette partie du cours a été effectuée par Carl Hermann
PHP
  • Le site de Carl Herrmann consacré à Bio30.
  • Les corrigés des exercices (valides XHTML 1.0 Strict - encodage iso-8859-1 / iso-8859-15)
  • doc de stripslashes()
    Cette fonction est nécessaire pour l'option "Je vis d'amour et d'eau fraîche" de l'exercice 4.2b, car PHP protège automatiquement (et sans nous en informer) le caractère apostrophe (') en le faisant précéder d'une antislash (\).
  • doc de htmlentities()
    Cette fonction est nécessaire pour l'exercice 4.3, dans la mesure où l'on réaffiche les caractères tapés par l'utilisateur, un par un. Si l'utilisateur tape l'un des caractères '&', '<', '>' qui sont des caractères spéciaux pour HTML, il faut les convertir respectivement en '&amp;', '&lt;', '&gt;'. Notez que la fonction htmlspecialchars() peut toutefois être suffisante.
Le graphique
  • GD - bibliothèque de dessin de bas niveau :
    1. Le cours.
    2. Installer la bibliothèque GD2. C'est fait au CRFB, c'est fait sur Wamp Server, EasyPHP et XAMPP.
    3. Activer l'extension GD2. C'est fait au CRFB. Sur vos WAMPs respectifs, il faut modifier le fichier php.ini pour rajouter (ou plutôt décommenter) la ligne : extension=php_gd2.dll. Sur certains WAMPs, il existe aussi un moyen pour effectuer cette action en un clic de souris.
    4. Exemples: Récupérez ces exemples et vérifiez qu'ils fonctionnent chez vous.
    5. Remarque : dans cet exercice, le fichier 4_bouton_resultat.php retourne un fichier texte HTML au navigateur. Le fichier 4_bouton_creation.php retourne un fichier image PNG au navigateur. Nous pourrions regrouper les deux codes en un seul fichier à condition que 4_bouton_creation.php ne retourne plus un fichier image PNG au navigateur (sinon on aurait un fichier qui serait un infâme mélange de HTML et d'image et notre navigateur serait perdu), mais crée une image sur le serveur. Dans ce cas là, la partie difficile est liée à la création, suppression, écrasement de fichier côté serveur et aux permissions.
      Voici le code deux-en un : 4_bouton_creation_resultat.php. Remarquez qu'un fichier est crée dans un répertoire tmp. Il vous faudra donc le créer au préalable et modifier les permissions pour qu'Apache puisse déposer des fichiers dedans : chmod go+w tmp
      Récupérez cet exemple et vérifiez qu'il fonctionne chez vous.
    6. Exercice:
      De la même manière que dans le dernier exemple du point 4, incluez les premiers exemples dans une page web dynamique, où vous rentrerez respectivement le texte (exemple 1 ou 2) et la taille ou la couleur (exemples 1, 2 ou 3). Utilisez les deux façons différentes (avec et sans création de fichier côté serveur).
  • jpgraph - bibliothèque de dessin de graphiques de haut niveau
    1. Exemples
    2. Téléchargez la bibliothèque (en local). Vous pouvez aussi la télécharger directement sur le site web de jpgraph (version 3.0.7 !!).
    3. Désarchivez :
      • Sous linux, dans le répertoire public_html, en ligne de commande : tar xvfz jpgraph-3.0.7.tar.gz
      • Sous Windows - menu contextuel extraire... dans votre répertoire www
      • Sous MacOS X - aucune idée.
      Au final, vous devez avoir deux nouveaux répertoires crées à la racine de votre répertoire web :
      • src (contenant la bibliothèque jpgraph)
      • docportal (contenant la documentation).
    4. Les propriétés des graphiques.
    5. Les graphiques linéaires.
    6. Les graphiques non-linéaires.
    7. Exercices :
      1. Reprenez l'exercice 4.3 (partie PHP ci-dessus) et générez un histogramme représentant le nombre d'occurrences de chaque lettre.
      2. Si vous le désirez, à partir du très joli exemple d'histogramme dans la figure 7.2 de la documentation (dans votre répertoire docportal), vous pouvez essayer d'améliorer votre image.
    8. Fonctions utiles sur les tableaux :
  • Les codes couleurs en HTML.

Valid XHTML 1.0 Strict

CSS Valide !