Les sites informatifs (souvent réalisés via WordPress) n'utilisent quasiment qu'un seul formulaire (de type contact).

Les applications web utilisent des champs de formulaire, de manière intensive, car ils sont le seul moyen pour l'utilisateur d'interagir (souvent en relation avec une base de données).

La validation des données avant l'envoi des données rend l'application professionnelle qui, de plus, doit être épurée et jolie (via des fichiers CSS dédiés : form.css, range.css, w3P.css, modales.css, doc.css, ...).

form.css est le seul fichier CSS "indispensable".

La validation des données doit aussi se faire coté serveur.

JS est le moteur des applications web. Des libraries telles que w3P.css (ou jQuery, w3codecolor.js (pour la documentation), ...) ou des frameworks (tels que Vue.js (ou Angular.js ou React.js)) facilitent grandement le développement de ces applications.

Les applications web sont très fragiles dans le sens où la moindre modification dans le code JS (mais aussi dans le code HTML, surtout au niveau de l'attribut id) peut planter l'application (comme dans un logiciel).

index.*

Comme afficher le menu de l'application n'a de sens que si le navigateur est autorisé à utiliser le moteur JS, le menu ne doit s'afficher que si JS est activé.

Et, comme une application web est souvent placée sur un serveur (local ou externe), car souvent liée à une base de données, l'application utilisera, par exemple, la fonction w3.includeHTML(); pour injecter le menu de l'application (entre les balises entre les balises <main> et </main> (et fera donc appel au fichier la contenant : w3P.js)

La balise <main> indique le coeur de la page web.

Code HTML (index.htm complet)

<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="w3P.css" />
    <script src="w3P.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxx</title>
  </head>
  <body class="w3-khaki">
    <noscript class="w3-padding w3-red">Le JavaScript n'est pas activé. Cette <i>application
    web</i> requiert son activation.</noscript>
    <header class="w3-center">
      <p class="w3-xlarge w3-bold">
        Favoris <output id="onOff"></output>
      </p>
      <p>
        <a href="docUser.htm" target="_blank">Documentation</a>
      </p>
    </header>
    <p id="no-http" class="w3-padding w3-red w3-center">
      L'application requiert le PHP => le protocole http(s).
    </p>
    <main class="w3-container" data-w3-include-html="menu.txt"></main>
    <script src="index.js"></script>
  </body>
</html>

Code JS (index.js)

if(window.location.protocol.startsWith("http")){
  w3.hide("#no-http");
  if(window.location.href.indexOf("localhost")<0){
    document.getElementById("onOff").textContent=" - on line";
  }else{ // => localhost
    document.getElementById("onOff").textContent=" - off line";
  }
}else{ // => file:///
  w3.hide("main");
}

w3.includeHTML();

L'appel de la fonction w3.includeHTML() est fait à la fin du fichier afin de n'afficher le menu que si aucune erreur n'existe dans le code JS.

Commentaire sur le code HTML

L'appel du fichier w3P.css est fréquente.

<body class="w3-khaki">. w3-khaki car les couleurs de fond doivent être compatibles avec la couleur du texte bleu (lien)

Le placement du code <noscript class="w3-padding w3-red">Le JavaScript n'est pas activé. Cette application web requiert son activation.</noscript> immédiatement après la balise <body> est "obligatoire" pour prévenir l'utilisateur au cas où le JS n'est pas activé sur son navigateur.

Le code <output id="onOff"></output> permet d'indiquer si l'application tourne sur un serveur externe ou local, on-line ou off-line. (cfr code JS)

Le code <a href="docUser.htm" target="_blank">Documentation</a> est un lien vers la documentation. L'attribut target="_blank" l'affiche dans une nouvelle fenêtre. Ce fichier est alors souvent lié au fichier CSS doc.css.

L'application peut disposer d'une documentation réservée au développeur (tel que docDev_xxxxx.htm ainsi suffixé pour qu'elle ne soit pas accessible à l'utilisateur au cas où elle se trouverait sur le serveur). Ce fichier est alors souvent lié au fichier w3codecolor.js.

Enfin, le code JS :

if(window.location.protocol.startsWith("http")){
  w3.hide("#no-http");
  ...

permet de connaître le protocole utilisé par le navigateur et donc si l'application en cours d'utilisation est sur un serveur ou pas. Cette information est donnée à l'utilisateur via le code :

    <p id="no-http" class="w3-padding w3-red w3-center">
      L'application requiert le PHP => le protocole http(s).
    </p>

Le menu de l'application sera injecté entre les balises <main> et </main>

Seule la documentation (sur l'utilisation de l'application) ne requiert pas l'utilisation du JS. Elle est toujours disponible et le lien placé en dehors des balises <main> et </main>

menu.txt

Le fichier menu.txt contient tous les liens vers les fonctionnalités de l'application.

À ce stade, l'application fait appel aux fichiers suivants : menu.txt, index.htm, index.js, w3P.js et w3P.css.

docDev_xxxxx.htm

Au début du fichier docDev_xxxxx.htm peut être placé un lien vers la page d'accueil de l'application et la documentation destinée à l'utilisateur.

base de données = DB (pour DataBase)

Le fichier docDev_xxxxx.htm présente :

le schéma relationnel des tables (si la DB existe)
le schéma relationnel des fichiers (utilisés dans l'application)

Le schéma relationnel des fichiers peut être réalisé avec le logiciel Draw d'OpenOffice. Le dessin peut ensuite être exporté au format SVG.

Le schéma relationnel des tables peut être réalisé avec l'outil phpMyAdmin si le type de DB est MySQL.

Le choix du type de DB est premier.

SQLite : mono-fichier, un utilisateur,
limité aux requêtes les plus courantes (SELECT et INSERT)
MySQL : SGDBR, multi-utilisateur,
aucune limitation au niveau des types de requêtes

Règles facilitant la construction des requêtes

Ces règles visent notamment à faciliter l'écriture de requêtes SQL.

Nom d'une table

Le nom d'une table est composé des 37 caractères suivants : [a-z0-9] et underscore (_)

=> Il est en minuscules et ne contient jamais de caractères spéciaux : espace, caractère accentué, trait d'union, ...

Le nom d'une table est souvent au pluriel.

Nom d'un champ ou d'un un index

Le nom d'un champ, index, ... est composé des 63 caractères suivants : [a-zA-Z0-9] et underscore (_)

=> Il ne contient donc jamais de caractères spéciaux : espace, caractère accentué, trait d'union, ...

Le nom d'un champ commence toujours par une minuscule [a-z].

Autres conventions

Toute table contient une clé primaire. Le nom du champ lié à cette clé primaire débute par id_ suivi du nom de la table au singulier.

Lorsque le champ est lié à une clé étrangère le nom de ce champ débute par num_; le nom de la clé débute par FK_

num_XXXXX => FK_XXXXXn (où n>1 si nécessaire)

Le nom d'une clé primaire ou étrangère est toujours au singulier

Est dite table externe, celle qui ne contient pas de clé étrangère.

Le remplissage d'une base de données commence par celle des tables externes.

Fichiers SQL

Les fichiers SQL sont codés en UTF-8 (car les données peuvent contenir des caractères spéciaux)
Avertissement : L'affichage de ces fichiers SQL dans un navigateur web (simple clic) affichera probablement certains caractères de manière "spéciale" (car, par défaut, les navigateurs web utilise la table ANSI utilisée par le système d'exploitation). Pour télécharger un fichier, il faut faire un clic droit > "Enregistrer le contenu lié sous ...".

Pour chaque champ de chaque table sont décrits son utilité, sa structure et son lien éventuel avec un champ d'une autre table (clé étrangère)

Pour chaque table, est généré le code SQL pour la créer.

Les codes SQL pour la création des tables sont mis dans l'ordre et dans un fichier d'extension .sql

Sont ajoutés les codes SQL liés aux contraintes et aux clés étrangères.

Les premiers enregistrements (INSERT) peuvent être placés dans un second fichiers SQL.

Listing des fichiers : Astuce

Lorsque l'explorateur Windows est dans le dossier voulu, cliquer sur le champ affichant "> Ce PC > ... > ...> dossier voulu" et y taper cmd

Dans la console qui s'affiche, taper dir /b |clip
/b limite le listing au nom de fichier. |clip envoye dans le presse-papier
Il ne reste plus qu'à coller cette liste dans l'éditeur de son choix.

Pour chaque fichier, son rôle et ses liens avec les autres fichiers sont décrits.

Une partie du code peut être repris.

Bouts de code fréquents

avec SQLite

Requête de sélection : query()

<?php
header("Content-Type: application/json; charset=UTF-8");
$bdd = new PDO("sqlite:test.db");
$sql="...";
$rep = $bdd->;query($sql);
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
?>

Requête d'action : exec()

$bdd = new PDO("sqlite:test.db");
$sql="...";
$ok=$bdd->exec($sql); /* Retourne TRUE si succès */

if(!$ok) {echo "La requête SQL a été exécutée avec succès.";}
else{echo "N'a été exécutée avec succès la requête SQL suivante :<br>$sql";}

echo "<br>Retour à la <a href='index.htm'>page d'accueil</a>";

docUser.htm

Au début du fichier docUser.htm peut être placé un lien vers la page d'accueil de l'application.

Le fichier docUser.htm contient :

Une présentation de l'application (but, intérêt, ...)
Le listing des interfaces (pages web)

Pour chaque interface, une vue d'écran est affichée pour toutes les situations pouvant être rencontrées et une explication sur chaque champ du formulaire, lien ou bouton.

Et, d'éventuels conseils relatifs au remplissage des champs.

Dans l'application, chaque page web contient un lien vers l'ancre dédiée du fichier docUser.htm.

À la fin du fichier docUser.htm peut être placé le schéma relationnel des fichiers (sans risque de sécurité) afin de montrer le sérieux de l'application.

Structure du fichier HTML :

<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
  <!-- À Â Ç É È Ê Ë Î Ï Ô Ù Û Ü Ÿ Æ Œ æ œ -->
  <!--h1 ============================-->
  <!--h2 ++++++++++++++++++++++++++++-->
  <!--h3 -.-.-.-.-.-.-.-.-.-.-.-.-.-.-->
  <!--h4 ............................-->
  <!--h5 . . . . . . . . . . . . . ..-->
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="w3P.css" />
    <link rel="stylesheet" href="doc.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="w3P.js"></script>
    <title>
      Documentation
    </title>
  </head>
  <body class="w3-pale-green">
    <header class="w3-center">
      <a href="index.htm">Page d'accueil</a>
      <p class="w3-xlarge w3-bold">
        Documentation
      </p>
    </header>
    <main class="w3-container">
      <h1 id="presentation">
        Présentation
      </h1><!-- h1 =================================-->
      ...
      <h1>
        Liste des interfaces et fonctionnalités :
      </h1><!-- h1 =================================-->
      <nav class="w3-pale-blue w3-round-xlarge w3-padding-small">
        <ul>
          <li>
            <a href="#index.htm">Page d'accueil</a>
          </li>
          ...
        </ul>
      </nav>
      <h1 id="index.htm">
        Page d'accueil
      </h1><!-- h2 +++++++++++++++++++++++++++++++++-->
      <p>
        L'application requiert un navigateur autorisant l'utilisation d'un interpréteur de code
        JavaScript.
      </p>
      <figure>
        <img ... />
      </figure>
      <p>
        NB : La documentation est accessible quelque soit la configuration.
      </p>
      <p>
        Lorsque le navigateur utilise le protocole s'affiche, dans la barre des URLs,
        <code>file:///</code> (ci-dessous encadré en jaune). Seule la documentation est accessible.
      </p>
      <figure>
        <img ... />
      </figure>
      <p>
        Lorsque le navigateur accède à l'application placée sur un <u>serveur local</u>, dans la
        barre des URLs, s'affiche "localhost" (ci-dessous encadré en rouge). Le menu de
        l'application est accessible et le titre de l'application est "xxx - <mark>off</mark>
        line".
      </p>
      <figure>
        <img ... />
      </figure>
      <p>
        Lorsque le navigateur accède à l'application placée sur un <u>serveur distant</u>, dans la
        barre des URLs, s'affiche "http" (ci-dessous encadré en rouge). Le menu de l'application
        est accessible et le titre de l'application est "xxx - <mark>on</mark> line".
      </p>
      <figure>
        <img ... />
      </figure>
      ...
      <h1 id="files_schema">
        Schéma relationnel des fichiers
      </h1><!-- h1 =================================-->
      <figure>
        <img src="schema.svg" alt="" />
      </figure>
    </main>
  </body>
</html>

Les champs

type="text"

Ce type de champ est le champ par défaut. L'utilisation de l'attribut type est facultatif lorsque sa valeur est text.

<textarea>

Cette balise ne dispose pas de l'attribut pattern.