Plus généralement, l'architecture 3 niveaux schématisée ci‑dessus pour décrire une application web en général est une présentation simpliste d'une réalité diverse, dont la complexité est très variable selon l'application considérée.

Dans les cas simples, le serveur web met simplement à disposition des fichiers de code HTML/CSS/JS et d'autres fichiers (images, etc.) que le navigateur du client se charge de demander pour afficher.
Du côté côté du serveur, un seul niveau suffit donc (typiquement, avec un langage de script intégré comme php) et on a alors en fait une architecture à 2 niveaux seulement.

Dans les cas complexes, par exemple lorsque le navigateur du client ouvre un fichier stocké sur le cloud avec un logiciel en ligne (par exemple, un logiciel professionnel de fabrication), pour préparer la page web à transmettre au client, le serveur web chargé de la coordination doit collecter :
• non seulement une multitude de données issues de différents domaines (compte client, données fournisseur, publicités…),
• mais aussi toutes les données pour exécuter le logiciel, lequel peut faire appel à divers autres composants logiciels (module de calculs, etc.)
On peut alors identifier des chaînes de communication à la fois entre les niveaux et au sein même des niveaux (cf. la figure ci‑contre extraite de cette publication de recherche ).

Architecture à n niveaux

L'architecture d'un service web peut devenir encore plus complexe pour diverses raisons. Ainsi :

pour des ressources très demandées, plusieurs serveurs en parallèle sont nécessaires dans chaque niveau ; afin de leur distribuer les requêtes, et aussi pour garantir la continuité de service en cas de panne de l'un d'entre eux, on installe un « étage » logiciel appelé répartiteur de charge W (load balancer) ; ce logiciel peut être hébergé sur une machine virtuelle ou réelle (un serveur spécifique dédié à cette tâche de répartition) ;

la préparation de la ressource demandée peut nécessiter l'exécution d'un logiciel métier W (business software) qui constitue un niveau à lui tout seul (par exemple, un logiciel de comptabilité, de bureautique, de simulation, etc.) ;
les bases de données peuvent être structurées sur plusieurs niveaux ou encore nécessiter un niveau intermédiaire pour l'intégration des données dans la ressource demandée ou dans le logiciel métier.

On parle alors d'architecture multi-niveaux ou à n niveaux W (en anglais, n-tier ou multitier architecture) – cf. la figure ci‑dessus.

Comme pour toutes les technologies du web, il existe aujourd'hui une grande diversité des solutions logicielles pour implémenter les serveurs web. Sans que l'on puisse décréter que telle ou telle solution est meilleure qu'une autre, on peut néanmoins distinguer des tendances dans les usages à grande échelle, qui dessinent les technologies d'avenir et du passé. En avoir connaissance est utile à de futurs techniciens, pour investir judicieusement leurs efforts d'apprentissage. Toutes les sections suivantes du chapitre y sont consacrées.

À titre de complément, on trouvera au lien suivant une vidéo (en anglais) qui explique les différentes fonctionnalités que peut mettre en œuvre un serveur NGINX Y. Y sont abordées notamment les notions de répartiteur de charge (load balancer) et de serveur mandataire (proxy).

Installation sur une machine de type serveur

L'installation d'un logiciel serveur HTTP sur une machine de type serveur ne présente pas de différences significatives avec celle d'une pile AMP dans le cas le plus usuel où on a une machine à système Linux et s'il s'agit du logiciel Apache. Pour les détails, on se reportera à la procédure décrite dans le sujet de travaux pratiques R2‑TP2 .

Cas particulier de la plateforme Node.js

La plateforme de développement Node.js (cf. infra ) qui met en œuvre un environnement d'exécution du langage JavaScript inclut aussi un composant logiciel serveur HTTP. Moyennant quelques lignes de code dans le fichier de script principal de l'application, il est ainsi possible, sur un poste de travail, de tester directement une application web codée en JavaScript côté serveur, même sans même avoir à recours à une pile AMP.

Pour une présentation plus détaillée des frameworks, on pourra consulter cette page web de la Fondation Mozilla .

Autres langages de backend

Le langage Java

Inventé en 1995, Java W est un langage de programmation généraliste qui permet de pré‑compiler des programmes en bytecode s'exécutant via une machine virtuelle (Java runtime environment W ou JRE), le rendant potentiellement portable sur toute architecture pour laquelle une telle machine virtuelle est développée.

Utilisable dans les pages web côté client pour créer des applets (cf. chap. R2‑III ), le langage Java est donc aussi utilisable côté serveur, où l'on parle alors de servlets W.

À l'origine, Java était un projet open source développé au sein de la société californienne Sun microsystems (constructeur de serveurs et de stations de travail, mais aussi développeur du système d'exploitation Unix Solaris).

Cette dernière a été rachetée en 2008 par la société Oracle, acteur majeur dans le domaine des systèmes de gestion de bases de données (cf. infra ). C'est elle qui assure depuis la maintenance et le développement du langage Java.

Le langage C#

Inventé en 2001, C# W est un langage de programmation généraliste. Comme Java, il procède par pré‑compilation de composants dans un langage intermédiaire (CIL ou Common intermediate language W). Ce code est ensuite interprété dans un environnement d'exécution communément appelé la plate‑forme .NET W et basée sur les systèmes d'exploitation Windows.

Pour le développement web côté serveur, le codeur en langage C# peut s'appuyer sur un très gros framework nommé ASP.NET W. Il permet d'insérer des appels de code source C# dans un fichier de code HTML, notamment par l'intermédiaire de widgets W appelés Web controls.

Le langage Python

Inventé en 1991, Python W est un langage de programmation interprété et généraliste, placé sous licence libre. Universellement employé dans les systèmes d'exploitation (ordinateurs, smartphones), son interpréteur y est presque toujours déjà installé.

Apprécié pour sa syntaxe légère mais explicite, Python dispose d'un très grand nombre de bibliothèques spécialisées, notamment dans les domaines du calcul scientifique, de l'intelligence artificielle, du traitement massif des données (data science).

On peut aisément vérifier qu'un interpréteur Python 3 est installé sur une machine en saisissant dans un terminal de commandes en ligne :

• which python3 avec un système Linux ;
• where python3 avec un système Windows.

Et pour l'anecdote, dans la marque Raspberry Pi, le terme « Pi » fait référence à Python interpreter.

De part sa popularité, Python est beaucoup utilisé pour le développement web côté serveur. Divers frameworks existent, parmi lesquels on peut notamment citer Django W.

La plupart des applications web manipulent un très grand nombre de données. C'est notamment le cas :

• de tout site commercial, qui fait appel à son « fichier » de clients enregistrés, son catalogue de produits, ses listes de promotion, etc. ;
• de tout site administratif (médical, fiscal, etc.) avec là encore des usagers enregistrés dont il faut mémoriser toutes les informations ;
• de tout site d'information (média en ligne) qui permet d'accéder à l'historique de ses publications…

Or ces données sont souvent utilisées par d'autres applications informatiques, typiquement des progiciels de gestion intégrés W. Elles ne peuvent donc pas être codées directement dans les fichiers des pages web. En effet :

• ce serait presque toujours techniquement infaisable en raison du trop grand nombre de données (il en résulterait des fichiers de code HTML immenses) ;
• cela reviendrait à les dupliquer par rapport à leur format d'origine, avec tous les problèmes de mise à jour que cela induirait ;
• cela rendrait leur accès particulièrement malcommode dans l'application web (avec notamment la difficulté à effectuer des tris dans un format qui n'est pas prévu pour cela).

Par ailleurs, parmi les grands acteurs du marché, on peut également citer Microsoft et ses logiciels propriétaires :

Access W, qui est intégré à la suite bureautique Office (avec Word, Excel, etc.) ;

SQL server W, qui est mieux adapté que Access pour les applications web et qui existe en plusieurs versions gratuites mais limitées .

Sans entrer dans les détails, dans le cadre d'une pratique débutante, retenons simplement :

• qu'il est recommandé d'utiliser le même moteur de stockage pour toutes les tables de la base, sinon le SGBDR devra partager la mémoire qui lui est allouée entre les différents moteurs choisis ;
• qu'il est recommandé de privilégier un moteur dit transactionnel comme innoDB W – c'est d'ailleurs la solution par défaut dans MySQL – plutôt qu'un moteur « historique » comme MyISAM W.

Par défaut, pour des applications générales, il est vivement recommandé de choisir un interclassement indifférent à la casse (case insensitive) et basé sur le format UTF‑8 général, qui offre le catalogue Unicode dans son intégralité tout en optimisant l'espace mémoire utilisé (cf. chap. C3‑IX C).

Mais on peut être amené à faire d'autres choix dans des cas particuliers, si les champs de types chaînes de caractères sont composés dans un jeu de caractères plus restreint. De telles décisions deviennent d'autant plus pertinentes que la taille de la base de données augmente.

Comme avec la plupart des structures informatiques, toute manipulation d'une base de données  – création, suppression, enregistrement, consultation, etc. – peut être effectuée :

• soit dans un terminal de commandes en ligne, à l'aide d'un langage dédié, qu'il évidemment possible d'employer pour composer une série de commandes dans un fichier de script à exécuter d'une traite ;
• soit dans une interface fenêtrée, avec des champs de saisie à valider par clic sur tel ou tel bouton ;

Et bien entendu, une interface fenêtrée n'est jamais qu'une apparence conviviale qui opère elle‑même les commandes en ligne correspondant aux manipulation effectuées, pour rendre ce travail accessible à des utilisateurs non expérimentés en codage.

Bien entendu, les conventions de codage ne doivent pas être confondues avec les règles de syntaxes, mais leur respect est néanmoins vivement recommandé, surtout dans le cadre d'un travail d'équipe.

En particulier, en langage SQL, il est d'usage de saisir tous les mots‑clefs du langage tout en majuscules. Quant aux identificateurs choisis par le codeur, ils peuvent adopter une typographie camelCase ou snake_case (cf. chap. C2‑X C) mais ne doivent évidemment pas être codés en tout en majuscules.

Exemple d'application web avec une architecture 3 niveaux

Présentation

Dans le prolongement de l'exemple académique d'une base de données mémorisant les couleurs préférées d'un utilisateur (cf. supra ), on décrit ci‑après le code d'une page web dynamique d'interface client pour manipuler cette base de donnée (cf. la capture d'écran ci‑dessous).

Bien qu'assez simple, une telle application constitue un exemple nettement plus complexe que celui de la page web dont dont on pouvait simplement changer la couleur d'arrière plan (cf. supra ). Elle fait appel à de la programmation orientée objet – avec notamment des PDO W – et, pour une bonne factorisation du code, elle nécessite le recours à une programmation multi‑fichiers.

Installation sur une pile AMP

Ces fichiers sont téléchargeables en exécutant le script ci‑dessous dans un terminal de commandes en lignes (pour plus de détails, consulter le sujet de TP R2‑2 ) :

cd /var/www/html && mkdir example3tier && cd example3tier/
wget -r --no-parent -nH -l1 --cut-dirs=6 --reject="index.html*","example3tier*" --no-check-certificate -- https://www.lycee-ferry-versailles.fr/snir/moduleR/prog/R2tp2_serveurs/example3tier
for f in *.txt; do mv -- "$f" "${f%.txt}.php"; done

Dans le répertoire de l'application, il faut également exécuter avec MariaDB le fichier source tableCreation.sql de création de la base de donnée userPref et de la table favoriteColors (cf. supra ).

Synoptique du code de l'application

La figure ci‑dessous représente les relations de dépendances entre ces différents fichiers :

Pour ne pas surcharger inutilement l'exposé, certains aspects ne seront pas détaillés, notamment le fichier style.css. Toutefois, ce fichier peut être consulté après téléchargement.

Code de la page principale

Le fichier principal de l'application web est nommée index.php. Cela permet le chargement automatique de la page par le navigateur lorsqu'on saisit l'URL ciblant le répertoire où sont stockés tous les fichiers :
http://localhost/example3tier

Le code de cette page se décompose en deux parties :

• une première partie, entièrement composée en HTML/CSS qui affiche successivement sur la colonne de gauche les formulaires d'enregistrement d'une nouvelle couleur et de suppression d'une couleur enregistrée ;
• une deuxième partie, essentiellement constituée d'un script php qui affiche sur la colonne de droite la liste des couleurs enregistrées dans la base de donnée.

Code de la première partie (HTML)

La balise <body></body> de la page principale est essentiellement constituée de deux balises <form></form>  pour afficher les formulaires d'enregistrement et de suppression d'une couleur. Chacune de ces balises <form></form> contient elle‑même :

• diverses balises <input> de champs de saisie de type :
• text pour le nom de la couleur à enregistrer ou supprimer
• int pour les composantes du code RGB de la couleur à enregistrer ;

une balise <input> de type submit, se présentant comme un bouton qui permet de déclencher une requête HTTP – de méthode POST dans les deux cas – et l'exécution du script d'action en langage php dont le chemin est déterminé par l'attribut action de la balise <form></form>. Il s'agit respectivement des fichiers :
• recordColor.php pour le formulaire d'enregistrement (ligne n° 14) ;
• deleteColor.php pour le formulaire de suppression (ligne n° 42).

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> 3‑tier example </title>
  <link href="./style.css" rel="stylesheet">
</head>

<body>
  <div style="display: inline-flex;">
  <div class="forms">
  <h1> Record a new color </h1>
  <form method="post" action="recordColor.php">
    <table class="forms">
      <tr>
        <th> <strong>Name</strong> </th>
        <td> <input type="text" name="colorName" placeholder="choose a new name"> </td>
      </tr>
      <tr><th> </th></tr>
      <tr>
        <th> <strong style="color: red">Red</strong> </th>
        <td> <input type="int" name="redCode" placeholder="0 – 255"> </td>
      </tr>
      <tr>
        <th> <strong style="color: lime">Green</strong> </th>
        <td> <input type="int" name="greenCode" placeholder="0 – 255"> </td>  
      </tr>
      <tr>
        <th> <strong style="color: blue">Blue</strong> </th>
        <td> <input type="int" name="blueCode" placeholder="0 – 255"> </td>
      </tr>
      <tr><th> </th></tr>
      <tr>
        <th> </th>
        <td> <input type="submit" value="Record"> </td>
      </tr>
    </table>  
  </form>
  
  <h1> Delete one of your colors </h1>
  <form method="post" action="deleteColor.php">
    <table class="forms">
      <tr>
        <th> <strong>Name</strong> </th>
        <td> <input type="text" name="colorName" placeholder="peek a name from the list"> </td>
      </tr>
      <tr><th> </th></tr>
      <tr>
        <th> </th>
        <td> <input type="submit" value="Delete"> </td>
      </tr>
    </table>  
  </form>
  </div><!-- forms -->

Code de la deuxième partie (php)

Hormis son titre codé par une balise <h1> (ligne n° 57), la deuxième partie de la page web (colonne de droite) est entièrement dynamique et implémentée par du code en langage php.

  <div class="list"> 
  <h1> List of your favorite colors </h1>

  <?php
    $conn  = require 'dbConnect.php';
    $stmt = $conn->prepare("SELECT * FROM `favoriteColors`");
    $stmt -> execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    if (!$result) {
      echo "<p> No color is recorded in the database. </p>";
    }
    else {
      echo 
        "<table class='list'>" .
        "  <tr>"  .
        "    <th> <strong>Name</strong> </th>" .
        "    <th> <strong style='color: red' >Red</strong>   </th>" .
        "    <th> <strong style='color: lime'>Green</strong> </th>" .
        "    <th> <strong style='color: blue'>Blue</strong>  </th>" .
        "  </tr>";
      require('cssColorStyle.php');
      foreach ($result as $color) {
        $rgbCode  = [
          "red"   => $color["redCode"],
          "green" => $color["greenCode"],
          "blue"  => $color["blueCode"]
        ];
        echo 
          "<tr>" .
          "  <td style='" . colorStyle($rgbCode) . "'>" . $color["colorName"] . "</td>" .
          "  <td>" . $color["redCode"]   . "</td>" .
          "  <td>" . $color["greenCode"] . "</td>" .
          "  <td>" . $color["blueCode"]  . "</td>" .
          "</tr>";
      }
      echo "</table>";
    }
  ?>
  </div><!-- list -->
  
</body>
</html>

La balise <?php ?> commence à la ligne n° 60 par une requête de connexion à la base de données où sont enregistrées les couleurs. Le script de cette requête est exporté dans un fichier séparé nommé dbConnect.php (ligne n° 61). Ce dernier contient des mécanismes de gestion des erreurs de connexion, il sera détaillé infra .

Une fois que la connexion est établie, on procède à une requête SQL de sélection de toutes les lignes (SELECT *) de la table favoriteColors (lignes n° 62).

La réponse du SGBDR à cette requête est stockée dans la variable nommée $result qui est implicitement de type tableau (lignes n° 64).

Le reste du code consiste en la génération de code HTML/CSS pour l'affichage de la liste des couleurs sous la forme d'une table, à l'aide de la fonction echo.

• Si la variable $result est nulle, seul s'affiche dans une balise <p></p> un message informant que la table est vide (lignes n° 67).
• Sinon, chaque enregistrement de la table favoriteColors mémorisé dans la variable $result est parcouru grâce à la structure de contrôle foreach  (lignes n° 78 à 92).

De plus, l'affichage du nom de chaque couleur avec sa propre couleur en arrière plan – comme par exemple duckblue – est réalisé grâce à un script de composition du style CSS exporté dans le fichier cssColorStyle.php. Il sera détaillé infra .

Code des scripts d'action

Script d'enregistrement d'une nouvelle couleur

Rappelons que, dans le code de la page principale index.php, le script d'enregistrement d'une couleur, stocké dans le fichier recordColor.php, est appelé par un clic sur le bouton Record. Ce clic engendre également une requête HTTP (méthode POST) qui contient dans son corps les données saisies par l'utilisateur dans les quatre formulaires inclus dans la balise <form></form> du bouton.

<?php
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $colorName = $_POST["colorName"]; 
    $rgbCode   = [
      "red"   => $_POST["redCode"],
      "green" => $_POST["greenCode"],
      "blue"  => $_POST["blueCode"]
    ];

    require('typingErrors.php');
    if (!colorNameError($colorName) && !rgbCodeError($rgbCode)) {
      $conn  = require 'dbConnect.php';
      $stmt = $conn->prepare("SELECT * FROM `favoriteColors` WHERE `colorName` = :colorName;");
      $stmt -> execute([
        ':colorName' => $colorName,
      ]);
      $result = $stmt->fetch(PDO::FETCH_ASSOC);

      require('cssColorStyle.php');
      if ($result) {
        $rgbCode   = [
          "red"   => $result["redCode"],
          "green" => $result["greenCode"],
          "blue"  => $result["blueCode"]
        ];
        echo "<p> Sorry, a color named <strong style='" . colorStyle($rgbCode) . "'><em>" . $colorName . "</em></strong> is <strong>already recorded</strong> among your favorites. </p>";
        require('backwardLink.php');
      }
      else {
        $stmt = $conn->prepare("INSERT INTO favoriteColors (colorName, redCode, greenCode, blueCode) VALUES(:colorName, :redCode, :greenCode, :blueCode);"); 
        $stmt -> execute([
          ':colorName' => $colorName,
          ':redCode'   => $rgbCode["red"],
          ':greenCode' => $rgbCode["green"],
          ':blueCode'  => $rgbCode["blue"]
        ]);

        echo "<p style='" . colorStyle($rgbCode) . "'> Success! The color <strong><em>" . $colorName . "</em></strong> has been <strong>recorded</strong> among your favorites. </p>";
        require('backwardLink.php');
      }
      $conn = null;
    }
  }
?>

Ce script commence par la récupération des données saisies – le nom de la couleur et les trois composantes de son code RGB – en les stockant dans deux variables nommées $colorName et $rgbCode (cf. les lignes n° 3 à 8). Précisons que cette deuxième variable est un tableau de 3 entiers indexés respectivement par les étiquettes "red", "green" et "blue".

Il est alors fait appel à un script de gestion des erreurs de saisie que l'utilisateur pourrait commettre, qui est codé dans le fichier typeErrors.php (cf. la ligne n° 10). Ce script définit les fonctions colorNameError et rgbCodeError qui sont appelées juste après (à la ligne n° 11) pour tester d'éventuelles erreurs. Il sera détaillé infra .

Et c'est seulement en l'absence d'erreur de saisie que s'effectue une requête SQL de type SELECT * à la base de donnée (cf. la ligne n° 12), exactement comme dans la deuxième partie de la page principale (cf. supra ). Le but de cette requête est de vérifier si le nom saisi pour la couleur à ajouter ne figure pas déjà dans les enregistrement de la table favoriteColors (cf. les lignes n° 13 à 17).

Le script se poursuit donc selon le résultat de cette recherche :

dans l'affirmative, le script affiche dans une balise <p></p> un message d'erreur, avec une invite à revenir à la page principale (lignes n° 20 à 28), codée dans le fichier backwardLink.php ;

dans la négative, le script exécute une requête d'insertion dans la base de donnée de la nouvelle couleur, avec à la clef un message pour informer l'utilisateur du succès de l'opération et une invite à revenir à la page principale (lignes n° 29 à 40).

Dans les deux cas, l'affichage de la couleur en arrière plan du texte est rendu convivial grâce au script de composition du style CSS (exporté dans le fichier cssColorStyle.php, cf. infra ).

Script de suppression d'une couleur

Rappelons que dans le code de la page principale index.php appelle le script d'effacement d'une couleur, stocké dans le fichier deleteColor.php, par un clic sur le bouton Delete. Ce clic engendre également une requête HTTP (méthode POST) qui contient dans son corps le nom de la couleur saisie par l'utilisateur dans le seul formulaire inclus dans la balise <form></form> du bouton.

<?php
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $colorName = $_POST["colorName"]; 
    
    require('typingErrors.php');
    if (!colorNameError($colorName)) {
      $conn  = require 'dbConnect.php';
      $stmt = $conn->prepare("SELECT * FROM `favoriteColors` WHERE `colorName` = :colorName;");
      $stmt -> execute([
        ':colorName' => $colorName,
      ]);
      $result = $stmt->fetch(PDO::FETCH_ASSOC);

      if (!$result) {
        echo "<p> Sorry, the color <strong><em>" . $colorName . "</em></strong> is <strong>not recorded</strong> among your favorites. </p>";
        require('backwardLink.php');
      }
      else {
        $rgbCode   = [
          "red"   => $result["redCode"],
          "green" => $result["greenCode"],
          "blue"  => $result["blueCode"]
        ];

        $stmt = $conn->prepare("DELETE FROM favoriteColors WHERE `colorName` = :colorName;"); 
        $stmt -> execute([
          ':colorName' => $colorName
        ]);

        require('cssColorStyle.php');
        echo "<p style='" . colorStyle($rgbCode) . "'> Success! The color <strong><em>" . $colorName . "</em></strong> has been <strong>deleted</strong> from your favorites. </p>";
        require('backwardLink.php');
      }
      $conn = null;
    }
  }
?>

Ce script procède dans la même logique que le script d'enregistrement, auquel on se reportera pour les détails :

• récupération des données de saisie (cf. la ligne n° 3) ;
• gestion des erreurs de saisie éventuelles (cf. la ligne n° 5) ;
• connexion à la base de données (cf. la ligne n° 7) ;
• recherche du nom de la couleur saisi pour vérifier s'il figure dans la base de données (cf. les lignes n° 8 à n° 12), puis :
• dans la négative, affichage d'un message d'erreur (cf. les lignes n° 14 à n° 17) ;
• dans l'affirmative, exécution de la requête SQL de suppression DELETE avec affichage d'un message de succès (cf. les lignes n° 18 à n° 33).

Code des script secondaires

Tous ces scripts sont déportés dans des fichiers séparés car ils sont utilisés par les trois scripts étudiés supra. Cela permet une bonne factorisation du code.

Script de connexion à la base de données

Le script de connexion est stocké dans le fichier dbConnect.php. Il commence par renseigner les identifiants de connexion dans les variables $dbhost, $dbuser, etc. (cf. les lignes n° 2 à n° 5).

Attention ! Si la chaîne de caractères définissant le mot de passe (valeur de la variable $dbpasswd) comporte un caractère spécial comme $, ce dernier doit être codé par une séquence d'échappement, comme \$.

<?php
  $dbhost   = "localhost";
  $dbuser   = "user-name";
  $dbpasswd = "********";
  $dbname   = "userPref";

  function connect($host, $db, $user, $passwd) {
    $dsn = "mysql:host=$host;dbname=$db;charset=UTF8";
    try {
      $options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];
      return new PDO($dsn, $user, $passwd, $options);
    } 
    catch (PDOException $e) {
      echo "<p> Connection error: " . $e->getMessage() . "</p>";
      die();
    }
  }

  return connect($dbhost, $dbname, $dbuser, $dbpasswd);
?>

Ensuite, il définit la fonction connect (cf. les lignes n° 7 à n° 17) qui met en œuvre la connexion via le bloc try et avec une gestion des exceptions codée dans le bloc catch .

Enfin, il retourne un appel de cette fonction avec comme arguments effectifs les identifiants de connexion mémorisés (cf. la ligne n° 19).

Script de gestion des erreurs de saisie

Le script de gestion des erreurs de saisie est stocké dans le fichier typingErrors.php. Il définit juste deux fonctions : colorNameError et rgbCodeError.

<?php
  function colorNameError($colorName) {
    if (!isset($colorName) || $colorName[0] == ' ') {
      echo "<p> Type <strong>a name</strong> for your color. </p>";
      echo "<p> Click on the <strong>backward button ←<strong> of your browser. </p>";
      return true;
    }
    return false;
  }

  function rgbCodeError($rgbCode) {
    $typingError = false;
    foreach ($rgbCode as $color => $code) {
      if (!isset($code) || $code > 255 || $code < 0) {
        $typingError = true;
        $textColor = $color;
        if ($color == "green") $textColor = "lime";
        echo "<p> Error! Type the <strong style=color:" . $textColor . ">" . $color . " code</strong> from <strong>0 to 255.</strong> </p>";
        echo "<p> Click on the <strong>backward button ←</strong> of your browser. </p>";
      }  
    }
    return $typingError;
  } 
?>

• La fonction colorNameError vérifie si son argument formel $colorName (cf. la ligne n° 3) :
• n'est pas défini – cela signifie l'utilisateur n'a pas saisi ce champ avant de cliquer sur le bouton Record ou Delete ;
• ou commence par le caractère « espace » – car cela peut occasionner le risque d'avoir une chaîne de caractère constituée seulement d'espaces, donc invisible ;
Dans un tel cas, la fonction affiche dans des balises <p></p> un message d'erreur (cf. la ligne n° 4)puis dans une autre dans une balise <p></p> une invitation de renvoi à la page d'accueil (ligne n° 5). Elle retourne finalement la valeur booléenne true (ligne n° 63); dans le script appelant qui reçoit cette valeur, cela empêche toute requête à la base de donnée et oblige l'utilisateur à modifier la saisie.
Sinon – autrement dit, en l'absence d'erreur – la fonction retourne la valeur booléenne false (cf. la ligne n° 8).
• La fonction rgbCodeError vérifie son argument formel $rgbCode (cf. la ligne n° 13). Il s'agit d'un tableau dont chaque élément peut éventuellement être :
• non défini – cela signifie que l'utilisateur n'a pas saisi son champ avant de cliquer sur le bouton Record ;
• non compris entre 0 et 255 – une telle valeur saisie ne pouvant constituer une composante de code RGB d'une couleur.
Dans un cas comme dans l'autre, la fonction affiche dans une balise <p></p> un message d'erreur où le nom du champ ayant fait l'objet d'une erreur de saisie est affiché dans sa couleur : red, green ou blue (cf. la ligne n° 18). Elle affiche également une invitation de renvoi à la page d'accueil (ligne n° 19).
Pour finir, la fonction retourne une valeur booléenne qui indique au script appelant si une erreur a été détectée ou non (cf. la ligne n° 22).

Script de composition du style CSS de couleur

Le script de composition du style CSS est stocké dans le fichier cssColorStyle.php.

Il définit juste la fonction colorStyle dont l'argument formel $rgbCode est implicitement un tableau de 3 entiers indexés respectivement par les étiquettes "red", "green" et "blue".

<?php
  function colorStyle ($rgbCode) {
    $backgndHexcode = sprintf("#%02x%02x%02x", $rgbCode["red"], $rgbCode["green"], $rgbCode["blue"]);
    $foregndHexcode = "#000000";   // black text (default)
    if (($rgbCode["red"] + $rgbCode["green"] + $rgbCode["blue"]) < 128 * 3) {
      $foregndHexcode = "#ffffff"; // white text if background is too dark
    }
    return "background: " . $backgndHexcode . "; " .
           "color: "      . $foregndHexcode . "; " .
           "padding: 0.2em"; 
  }
?>

Cette fonction commence par préparer la couleur d'arrière‑plan. Via la fonction sprintf (analogue à celle du langage C – cf. chap. C5‑VI C), elle transcode dans une variable $backgndHexcode les valeurs exprimées en base 10 dans le tableau $rgbCode en une chaîne de caractères formant un code de couleur hexadécimal à 6 digits, préfixé par le caractère #, conformément à la syntaxe du langage CSS (cf. la ligne n° 3).

Ensuite, elle détermine la couleur de texte (donc, au premier plan) dans une variable $foregndHexcode :

• en prenant par défaut la valeur "#000000" – donc le noir (cf. la ligne n° 4) ;
• mais en la changeant en "#ffffff" – donc le blanc – si la couleur d'arrière plan codée dans les éléments de $rgbCode est sombre (cf. les lignes n° 5 & 6). Sinon, le texte en noir serait alors difficile à distinguer de l'arrière plan.

Pour finir, la fonction retourne une chaîne de caractère qui concatène le style d'affichage en langage CSS à appliquer au texte des messages avec les codes de couleurs précédemment déterminés. Ce style sera injecté dans le code HTML/CSS des messages généré par les scripts appelants, via la fonction echo (cf. les lignes n° 8  à 10).

Script du lien de retour à la page principale

Stocké dans un fichier nommé backwardLink.php, ce script très simple code juste un lien HTML de retour à la page principale avec une balise <a></a>. Le lien s'ajoute sur la page qui appelle ce script par la fonction echo.

<?php
  echo "<p> <a href='./index.php'> Back to home </a></p>"; 
?>