PHP est un langage de programmation orientée objet pour la conception de pages web dynamiques. 

PHP est un langage de programmation orientée objet pour la conception de pages web dynamiques.

Prérequis :


Attention :



// index.php (Programme principal)

...
<?php
echo sprintf("<h1>Bonjour tout le monde</h1>");
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une fonction est un bloc d'instructions destiné à réaliser une tâche bien précise.

// index.php (Programme principal)

...
<?php
function Hello_Run()
{
    echo sprintf("<h1>Bonjour tout le monde</h1>");
}

Hello_Run();
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Un module est un ensemble de fonctionnalités réutilisable écrit dans un fichier séparé.

// index.php (Programme principal)

...
<?php
require "rdv_hello.php";
Hello_Run();
...

// rdv_hello.php (Gestion du module)

...
<?php
function Hello_Run()
{
    echo sprintf("<h1>Bonjour tout le monde</h1>");
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une classe est une structure destinée à encapsuler les propriétés et les fonctionnalités associées à un objet.

// index.php (Programme principal)

...
<?php
require "cClass.php";
function run()
{
    $oClass = new cClass();
    $oClass->run();
}
run();
run();
...

// cClass.php (Gestion de la classe)

...
<?php
class cClass
{
    public function __construct()
    {
        echo sprintf("Constructeur : %s<br>\n", "cClass.__construct()");
    }

    public function __destruct()
    {
        echo sprintf("Destructeur : %s<br>\n", "cClass.__destruct()");
    }

    public function run()
    {
        echo sprintf("Méthode : %s<br>\n", "cClass.run()");
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Notes :

Un chargeur automatique de classes est nécessaire lorsqu'on dispose de plusieurs classes afin d'éviter d'inclure manuellement une longue liste de classes au début de chaque script PHP.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";
$oClass = new cClass();
$oClass->run();
...

// cClass.php (Gestion de la classe)

...
<?php
class cClass
{
    public function __construct()
    {
        echo sprintf("Constructeur : %s<br>\n", "cClass.__construct()");
    }

    public function run()
    {
        echo sprintf("Méthode : %s<br>\n", "cClass.run()");
    }
}
...

// rdv_autoload.php (Gestion du chargeur automatique)

...
<?php
function rdv_autoload($_classname)
{
    $classname = $_classname . ".php";
    echo sprintf("rdv_autoload : %s<br>\n", $classname);
    require $classname;
}

spl_autoload_register('rdv_autoload');
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Un espace de noms est un gestionnaire d'encapsulation. Il est nécessaire lorsqu'on dispose de plusieurs classes réparties dans différents répertoires afin de faciliter leur chargement automatique.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";
$oClass = new cClass();
$oClass->run();
$oClass = new class\cClass();
$oClass->run();
...

// cClass.php (Gestion de la classe)

...
<?php
class cClass
{
    public function __construct()
    {
        echo sprintf("Constructeur : %s<br>\n", "cClass.__construct()");
    }

    public function __destruct()
    {
        echo sprintf("Destructeur : %s<br>\n", "cClass.__destruct()");
    }

    public function run()
    {
        echo sprintf("Méthode : %s<br>\n", "cClass.run()");
    }
}
...

// class/cClass.php (Gestion de l'espace de noms)

...
<?php

namespace class;

class cClass
{
    public function __construct()
    {
        echo sprintf("Constructeur (2) : %s<br>\n", "cClass.__construct()");
    }

    public function __destruct()
    {
        echo sprintf("Destructeur (2) : %s<br>\n", "cClass.__destruct()");
    }

    public function run()
    {
        echo sprintf("Méthode (2) : %s<br>\n", "cClass.run()");
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Le passage par référence d'une variable en argument à une fonction permet de modifier la variable à l'intérieure de la fonction appelante.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";
$oMessage = "Passer un argument : ";
$oClass = new cClass();
$oClass->run($oMessage);
echo $oMessage;
...

// cClass.php (Gestion du passage par référence)

...
<?php
class cClass
{
    public function __construct() {}

    public function run(&$_oMessage)
    {
        $_oMessage .= "Par référence";
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

La structure d'un projet HTML permet rajouter des informations supplémentaires à l'en-tête d'une page web. Elle permet d'attribuer entres autres un titre et un logo à la page web.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";
$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    "Bonjour tout le monde"
);
$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cHtml.php (Gestion de la structure de la page)

...
<?php

namespace app;

class cHtml
{
    private $m_title;
    private $m_logo;
    private $m_logoMimeType;
    private $m_lang;
    private $m_encoding;
    private $m_body;

    public function __construct($_title, $_logo, $_logoMimeType, $_lang, $_encoding, $_body)
    {
        $this->m_title = $_title;
        $this->m_logo = $_logo;
        $this->m_logoMimeType = $_logoMimeType;
        $this->m_lang = $_lang;
        $this->m_encoding = $_encoding;
        $this->m_body = $_body;
    }

    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<!DOCTYPE html>\n");
        $_aHtml .= sprintf("<html lang='%s'>\n", $this->m_lang);
        $_aHtml .= sprintf("<head>\n");
        $_aHtml .= sprintf("<title>%s</title>\n", $this->m_title);
        $_aHtml .= sprintf("<meta charset='%s'/>\n", $this->m_encoding);
        $_aHtml .= sprintf("<link rel='shortcut icon' type='%s' href='%s'/>\n", $this->m_logoMimeType, $this->m_logo);
        $_aHtml .= sprintf("<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no'/>\n");
        $_aHtml .= sprintf("</head>\n");
        $_aHtml .= sprintf("<body>\n");
        $_aHtml .= sprintf("%s\n", $this->m_body);
        $_aHtml .= sprintf("</body>\n");
        $_aHtml .= sprintf("</html>\n");
        return true;
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une feuille de style CSS est utilisée côté client pour assurer la mise en forme des composants graphiques d'une page web.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";
$aBody .= sprintf("<div class='page'>Bonjour tout le monde</div>");

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cHtml.php (Intégration d'une feuille de styles CSS)

...
<?php

namespace app;

class cHtml
{
    ...
    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<!DOCTYPE html>\n");
        $_aHtml .= sprintf("<html lang='%s'>\n", $this->m_lang);
        $_aHtml .= sprintf("<head>\n");
        $_aHtml .= sprintf("<title>%s</title>\n", $this->m_title);
        $_aHtml .= sprintf("<meta charset='%s'/>\n", $this->m_encoding);
        $_aHtml .= sprintf("<link rel='shortcut icon' type='%s' href='%s'/>\n", $this->m_logoMimeType, $this->m_logo);
        $_aHtml .= sprintf("<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no'/>\n");
        $_aHtml .= sprintf("<link rel='stylesheet' href='/css/styles.css'/>\n");
        $_aHtml .= sprintf("</head>\n");
        $_aHtml .= sprintf("<body>\n");
        $_aHtml .= sprintf("%s\n", $this->m_body);
        $_aHtml .= sprintf("</body>\n");
        $_aHtml .= sprintf("</html>\n");
        return true;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.page {
    background-color: teal;
    border-radius: 5px;
    padding: 20px;
    color: white;
    font-family: arial;
    font-size: 18px;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Un fichier de script JavaScript est utilisé côté client pour apporter de la dynamique aux composants graphques d'une page web.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";
$aBody .= sprintf("<div class='button' onclick='callCallback()'>Run</div>");

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cHtml.php (Intégration d'un fichier de script JavaScript)

...
<?php

namespace app;

class cHtml
{
    ...
    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<!DOCTYPE html>\n");
        $_aHtml .= sprintf("<html lang='%s'>\n", $this->m_lang);
        $_aHtml .= sprintf("<head>\n");
        $_aHtml .= sprintf("<title>%s</title>\n", $this->m_title);
        $_aHtml .= sprintf("<meta charset='%s'/>\n", $this->m_encoding);
        $_aHtml .= sprintf("<link rel='shortcut icon' type='%s' href='%s'/>\n", $this->m_logoMimeType, $this->m_logo);
        $_aHtml .= sprintf("<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no'/>\n");
        $_aHtml .= sprintf("<link rel='stylesheet' href='/css/styles.css'/>\n");
        $_aHtml .= sprintf("</head>\n");
        $_aHtml .= sprintf("<body>\n");
        $_aHtml .= sprintf("%s\n", $this->m_body);
        $_aHtml .= sprintf("<script src='/js/scripts.js'></script>\n");
        $_aHtml .= sprintf("</body>\n");
        $_aHtml .= sprintf("</html>\n");
        return true;
    }
}
...

L'utilisation du mode strict (use strict) en JavaScript interdit l'utilisation des variables non déclarées dans un script JavaScript.

// js/scripts.js (Gestion du script JavaScript)

...
"use strict";

function callCallback() {
  console.log("Démarrage du script JavaScript...");
}
...

// css/styles.css (Gestion du style CSS)

...
.button {
    display: inline-block;
    background-color: teal;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 20px;
}

.button:hover {
    background-color: rgb(102, 160, 160);
}

.button:active {
    background-color: teal;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une hiérarchie ou un arbre de données est un ensemble de données organisé de manière hiérarchique. Chaque noeud parent peut posséder plusieurs noeuds enfant. Alors que chaque noeud enfant est lié à un noeud parent unique. Une hiérarchie ou un arbre de données peut être utilisé pour structurer les données d'un menu déroulant.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$oTrees = new app\cTrees();
// Parent 1
$oTrees->addParent("Parent 1");
// Parent 2
$oNode1 = $oTrees->addParent("Parent 2");
// --- Node 2.1
$oTrees->addNode($oNode1, "Node 2.1");
// --- Node 2.2
$oNode2 = $oTrees->addNode($oNode1, "Node 2.2");
// ------- Node 2.2.1
$oTrees->addNode($oNode2, "Node 2.2.1");
// ------- Node 2.2.2
$oTrees->addNode($oNode2, "Node 2.2.2");
// ------- Node 2.2.3
$oTrees->addNode($oNode2, "Node 2.2.3");
// --- Node 2.3
$oTrees->addNode($oNode1, "Node 2.3");
// Parent 3
$oTrees->addParent("Parent 3");

$aBody = "";
$aBody .= sprintf("<div class='page'>\n");
foreach ($oTrees->getTrees() as $oTree) {
    $aParent = $oTree->getParent();
    $aIndex = $oTree->getIndex();
    $oData = $oTree->getData();
    $aBody .= sprintf("<div>[%d][%d] : %s</div>\n", $aParent, $aIndex, $oData);
}
$aBody .= sprintf("</div>\n",);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cTree.php (Structure d'un noeud de données)

...
<?php

namespace app;

class cTree
{
    private $m_aParent;
    private $m_aIndex;
    private $m_oData;

    public function __construct($_aParent, $_aIndex, $_oData)
    {
        $this->m_aParent = $_aParent;
        $this->m_aIndex = $_aIndex;
        $this->m_oData = $_oData;
    }

    public function getParent()
    {
        return $this->m_aParent;
    }

    public function getIndex()
    {
        return $this->m_aIndex;
    }

    public function getData()
    {
        return $this->m_oData;
    }
}
...

// app/cTrees.php (Gestion d'une hiérarchie ou d'un arbre de données)

...
<?php

namespace app;

class cTrees
{
    private $m_oTrees;

    public function __construct()
    {
        $this->m_oTrees = [];
    }

    public function addParent($_aData)
    {
        $aParent = 0;
        $aIndex = count($this->m_oTrees) + 1;
        $oTree = new cTree($aParent, $aIndex, $_aData);
        $this->m_oTrees[] = $oTree;
        return $oTree;
    }

    public function addNode(cTree $_oTree, $_aData)
    {
        $aParent = $_oTree->getIndex();
        $aIndex = count($this->m_oTrees) + 1;
        $oTree = new cTree($aParent, $aIndex, $_aData);
        $this->m_oTrees[] = $oTree;
        return $oTree;
    }

    public function getTrees()
    {
        return $this->m_oTrees;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.page {
    background-color: teal;
    border-radius: 5px;
    padding: 20px;
    color: white;
    font-family: arial;
    font-size: 18px;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une hiérarchie ou un arbre de données est un ensemble de données organisé de manière hiérarchique. Chaque noeud parent peut posséder plusieurs noeuds enfant. Alors que chaque noeud enfant est lié à un noeud parent unique. Une hiérarchie ou un arbre de données peut être utilisé pour structurer les données d'un menu déroulant.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$oTrees = new app\cTrees();
// Parent 1
$oTrees->addParent("Parent 1");
// Parent 2
$oNode1 = $oTrees->addParent("Parent 2");
// --- Node 2.1
$oTrees->addNode($oNode1, "Node 2.1");
// --- Node 2.2
$oNode2 = $oTrees->addNode($oNode1, "Node 2.2");
// ------- Node 2.2.1
$oTrees->addNode($oNode2, "Node 2.2.1");
// ------- Node 2.2.2
$oTrees->addNode($oNode2, "Node 2.2.2");
// ------- Node 2.2.3
$oTrees->addNode($oNode2, "Node 2.2.3");
// --- Node 2.3
$oTrees->addNode($oNode1, "Node 2.3");
// Parent 3
$oTrees->addParent("Parent 3");

$aBody = "";
$aBody .= sprintf("<div class='page'>");
$oMenu = new app\cMenu($oTrees);
$oMenu->run($aBody);
$aBody .= sprintf("</div>");

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cTrees.php (Gestion d'une hiérarchie ou d'un arbre de données)

...
<?php

namespace app;

class cTrees
{
    private $m_oTrees;

    public function __construct()
    {
        $this->m_oTrees = [];
    }

    public function addParent($_aData)
    {
        $aParent = 0;
        $aIndex = count($this->m_oTrees) + 1;
        $oTree = new cTree($aParent, $aIndex, $_aData);
        $this->m_oTrees[] = $oTree;
        return $oTree;
    }

    public function addNode(cTree $_oTree, $_aData)
    {
        $aParent = $_oTree->getIndex();
        $aIndex = count($this->m_oTrees) + 1;
        $oTree = new cTree($aParent, $aIndex, $_aData);
        $this->m_oTrees[] = $oTree;
        return $oTree;
    }

    public function getTrees()
    {
        return $this->m_oTrees;
    }

    public function getNodes($_aParent)
    {
        $oTrees = [];
        foreach ($this->m_oTrees as $oTree) {
            if ($oTree->getParent() == $_aParent) {
                $oTrees[] = $oTree;
            }
        }
        return $oTrees;
    }
}
...

// app/cMenu.php (Parcours de la hiérarchie ou de l'arbre de données)

...
<?php

namespace app;

class cMenu
{
    private $m_oTrees;

    public function __construct(cTrees $_oTrees)
    {
        $this->m_oTrees = $_oTrees;
    }

    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<div class='menu'>\n");
        $this->createMenu($_aHtml, 0);
        $_aHtml .= sprintf("</div>\n");
        return true;
    }

    private function createMenu(&$_aHtml, $_aIndex)
    {
        $oTrees = $this->m_oTrees->getNodes($_aIndex);
        if (count($oTrees)) {
            $_aHtml .= sprintf("<div class='menu_2'>\n");
            foreach ($oTrees as $oTree) {
                $aParent = $oTree->getParent();
                $aIndex = $oTree->getIndex();
                $oData = $oTree->getData();
                $_aHtml .= sprintf("<div>[%d][%d] : %s</div>\n", $aParent, $aIndex, $oData);
                $this->createMenu($_aHtml, $aIndex);
            }
            $_aHtml .= sprintf("</div>\n");
        }
        return true;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.page {
    background-color: teal;
    border-radius: 5px;
    padding: 20px;
    color: white;
    font-family: arial;
    font-size: 18px;
}

.menu {
    margin-left: -40px;
}

.menu_2 {
    padding-left: 40px;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Un nom de site permet d'identifier très facilement le site web. Il est utilisé pour revenir à la page d'accueil du site web. Google Fonts est un gestionnaire de polices personnalisées. Les polices personnalisées Google Fonts peuvent être utilisées pour améliorer grandement la mise en forme d'une page web. Le nom de site peut être mis en forme avec une police personnalisée Google Fonts.

Prérequis :


// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";
$oSiteName = new app\cStiteName(
    "ReadyWeb",
    "/data/img/logo.png",
    "https://readydev.ovh/home/"
);
$oSiteName->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cStiteName.php (Gestion du nom de site)

...
<?php

namespace app;

class cStiteName
{
    private $m_aSiteName;
    private $m_aLogo;
    private $m_aLink;

    public function __construct($_aSiteName, $_aLogo, $_aLink)
    {
        $this->m_aSiteName = $_aSiteName;
        $this->m_aLogo = $_aLogo;
        $this->m_aLink = $_aLink;
    }

    public function run(&$_aSiteName)
    {
        $_aSiteName .= sprintf("<a class='logo' href='%s'>\n", $this->m_aLink);
        $_aSiteName .= sprintf("<img class='logo_2' src='%s'/>\n", $this->m_aLogo);
        $_aSiteName .= sprintf("<span class='logo_3'>%s</span>\n", $this->m_aSiteName);
        $_aSiteName .= sprintf("</a>\n");
        return true;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.logo {
    background-color: navy;
    display: inline-block;
    vertical-align: middle;
    padding: 5px 10px;
    border-radius: 5px;
}

.logo_2 {
    background-color: cyan;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    padding: 2px;
    border-radius: 50%;
    margin-right: 5px;
}

.logo_3  {
    display: inline-block;
    vertical-align: middle;
    color: cyan;
    font-size: 25px;
    font-family: Akronim;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une console est un moyen d'afficher à l'écran les informations sur les données manipulées par le script PHP sous la forme d'une paire de clé/valeur.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";

$oConsole = new app\cConsole();
$oConsole->addData("Console", "Bonjour tout le monde");
$oConsole->addData("Console", "Afficher un message");
$oConsole->addData("Console", "Afficher une variable");
$oConsole->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cConsole.php (Gestion de la console)

...
<?php

namespace app;

class cConsole
{
    private $m_aDatas;

    public function __construct()
    {
        $this->m_aDatas = [];
    }

    public function addData($_aKey, $_aValue)
    {
        $this->m_aDatas[] = array($_aKey, $_aValue);
    }

    public function run(&$_aHtml)
    {
        if (count($this->m_aDatas)) {
            $_aHtml .= sprintf("<div class='console'>\n");
            $_aHtml .= sprintf("<table>\n");
            $_aHtml .= sprintf("<tr>\n");
            $_aHtml .= sprintf("<th>Key</th>\n");
            $_aHtml .= sprintf("<th>Value</th>\n");
            $_aHtml .= sprintf("</tr>\n");

            foreach ($this->m_aDatas as $aData) {
                $_aHtml .= sprintf("<tr>\n");
                $_aHtml .= sprintf("<td>%s</td>\n", $aData[0]);
                $_aHtml .= sprintf("<td>%s</td>\n", $aData[1]);
                $_aHtml .= sprintf("</tr>\n");
            }
            $_aHtml .= sprintf("</table>\n");
            $_aHtml .= sprintf("</div>\n");
        }
        return true;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.console table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.console td, .console th {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
}

.console tr:nth-child(even) {
  background-color: lightgray;
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une variable d'environnement est un moyen de faire passer des paramètres à un serveur web à partir de l'extérieur. Elle peut être exploitée pour changer dynamiquement le comportement du serveur web. L'instruction SetEnv permet de configurer une variable d'environnement pour un serveur Apache. Le chargement d'une variable d'environnement au niveau du serveur PHP consiste à la rendre accessible à partir d'un script PHP.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";

$oEnvo = app\cEnvo::Instance();

$oConsole = new app\cConsole();
$oConsole->addData("ENV_TYPE", $oEnvo->m_aEnvType);
$oConsole->addData("ENV_TYPE", $oEnvo->m_aEnvType);
$oConsole->addData("ENV_TYPE", $oEnvo->m_aEnvType);
$oConsole->addData("ENV_TYPE", $oEnvo->m_aEnvType);
$oConsole->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cEnvo.php (Chargement des variables d'environnement)

...
<?php

namespace app;

class cEnvo
{
    private static $m_instance = null;
    public $m_aEnvType;

    private function __construct() {}

    public static function Instance()
    {
        if (is_null(self::$m_instance)) {
            self::$m_instance = new cEnvo();
            self::$m_instance->init();
        }
        return self::$m_instance;
    }

    private function init()
    {
        $this->m_aEnvType = $this->loadEnv("ENV_TYPE");
    }

    private function loadEnv($_aEnv, $aDefaultValue = "")
    {
        $aValue = getenv($_aEnv);
        if (!$aValue) return $aDefaultValue;
        return $aValue;
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Une variable d'environnement est un moyen de faire passer des paramètres à un serveur web à partir de l'extérieur. Elle peut être exploitée pour changer dynamiquement le comportement du serveur web. L'instruction SetEnv permet de configurer une variable d'environnement pour un serveur Apache. La propagation de la variable d'environnement depuis le serveur web jusqu'au navigateur consiste à la rendre accessible depuis un script JavaScript.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";

$oEnv = new app\cEnv();
$oEnv->addEnv("ENV_TYPE", "ENV_TYPE");

$oEnvs = new app\cEnvs($oEnv);
$oEnvs->run($aBody);

$btnRun = new app\cButton("Run");
$btnRun->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cEnv.php (Liste des variables d'environnement)

...
<?php

namespace app;

class cEnv
{
    private $m_aEnvs;

    public function __construct()
    {
        $this->m_aEnvs = [];
    }

    public function addEnv($_aId, $_aEnv)
    {
        $this->m_aEnvs[$_aId] = $_aEnv;
    }

    public function getEnvs()
    {
        return $this->m_aEnvs;
    }
}
...

// app/cEnvs.php (Gestion des variables d'environnement)

...
<?php

namespace app;

class cEnvs
{
    private $m_oEnv;

    public function __construct(cEnv $_oEnv)
    {
        $this->m_oEnv = $_oEnv;
    }

    public function run(&$_aHtml)
    {
        foreach ($this->m_oEnv->getEnvs() as $aId => $aEnv) {
            $aValue = $this->loadEnv($aEnv);
            $_aHtml .= sprintf("<input type='hidden' id='%s' value='%s'/>\n", $aId, $aValue);
        }
        return true;
    }

    private function loadEnv($_aEnv, $aDefaultValue = "")
    {
        $aValue = getenv($_aEnv);
        if (!$aValue) return $aDefaultValue;
        return $aValue;
    }
}
...

// app/cButton.php (Gestion du bouton)

...
<?php

namespace app;

class cButton
{
    private $m_aName;

    public function __construct($_aName)
    {
        $this->m_aName = $_aName;
    }

    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<button class='button' onclick='callCallback()'>%s</button>\n", $this->m_aName);
        return true;
    }
}
...

// js/scripts.js (Gestion des callbacks)

...
"use strict";

function callCallback() {
  var oEnvo = cEnvo.Instance();
  console.log("ENV_TYPE : " + oEnvo.m_aEnvType);
}
...

// js/app/cEnvo.js (Gestion des variables d'environnement)

...
"use strict";

function callCallback() {
  var oEnvo = cEnvo.Instance();
  console.log("ENV_TYPE : " + oEnvo.m_aEnvType);
}
...

// js/app/cEnvo.js (Gestion des variables d'environnement)

...
"use strict";

class cEnvo {
    static #m_instance = null;
    static #m_isInstance = false;

    constructor() {
        if (!cEnvo.#m_isInstance) {
            throw new TypeError("cEnvo is not constructable.");
        }
    }

    static Instance() {
        if (this.#m_instance == null) {
            this.#m_isInstance = true;
            this.#m_instance = new cEnvo();
            this.#m_instance.#init();
        }
        return this.#m_instance;
    }

    #init() {
        this.m_aEnvType = this.#loadEnv("ENV_TYPE");
    }

    #loadEnv(_aEnv, _aDefaultValue = "") {
        var idInput = document.querySelector("input#" + _aEnv);
        if (!idInput) return _aDefaultValue;
        return idInput.value;
    }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Font Awesome est un gestionnaire de pictogrammes. Les pictogrammes de Font Awesome peuvent être utilisés pour améliorer grandement la mise en forme d'une page web. Une icône peut être ajouté à un bouton en utilisant Font Awesome.

Prérequis :


// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";

$btnRun = new app\cButton("Run", "play");
$btnRun->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cButton.php (Gestion du bouton)

...
<?php

namespace app;

class cButton
{
    private $m_aName;
    private $m_aIcon;

    public function __construct($_aName, $_aIcon)
    {
        $this->m_aName = $_aName;
        $this->m_aIcon = $_aIcon;
    }

    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<button class='button' onclick='callCallback()'>\n");
        $_aHtml .= sprintf("<i class='fa fa-%s'></i> %s\n", $this->m_aIcon, $this->m_aName);
        $_aHtml .= sprintf("</button>\n");
        return true;
    }
}
...

// css/styles.css (Gestion de la mise en forme)

...
.button {
    display: inline-block;
    background-color: teal;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 20px;
}

.button:hover {
    background-color: rgb(102, 160, 160);
}

.button:active {
    background-color: teal;
}
...

// js/scripts.js (Gestion des callbacks)

...
"use strict";

function callCallback() {
  console.log("Démarrage du script JavaScript...");
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

XMLHttpRequest est un gestionnaire de requête. Il permet à un client JavaScript d'envoyer des requêtes asynchrones ou synchrones à un serveur web. La méthode GET permet d'envoyer une requête sans contenu et de récupérer une ressource à partir du serveur.

// index.php (Programme principal)

...
<?php
require "rdv_autoload.php";

$aBody = "";

$btnRun = new app\cButton("Run", "play");
$btnRun->run($aBody);

$oHtml = new app\cHtml(
    "ReadyWEB",
    "/data/img/logo.png",
    "image/png",
    "fr",
    "UTF-8",
    $aBody
);

$aHtml = "";
$oHtml->run($aHtml);
echo $aHtml;
...

// app/cButton.php (Gestion du callback)

...
<?php

namespace app;

class cButton
{
    ...
    public function run(&$_aHtml)
    {
        $_aHtml .= sprintf("<button class='button' onclick='callCallback()'>\n");
        $_aHtml .= sprintf("<i class='fa fa-%s'></i> %s\n", $this->m_aIcon, $this->m_aName);
        $_aHtml .= sprintf("</button>\n");
        return true;
    }
}
...

// app/cHtml.php (Intégration des scripts JavaScript)

...
<?php

namespace app;

class cHtml
{
    ...
    public function run(&$_aHtml)
    {
        ...
        $_aHtml .= sprintf("<body>\n");
        $_aHtml .= sprintf("%s", $this->m_body);
        $_aHtml .= sprintf("<script src='/js/app/cGet.js'></script>\n");
        $_aHtml .= sprintf("<script src='/js/scripts.js'></script>\n");
        $_aHtml .= sprintf("</body>\n");
        $_aHtml .= sprintf("</html>\n");
        return true;
    }
}
...

// js/scripts.js (Gestion des callbacks)

...
"use strict";

function callCallback() {
  var oGet = new cGet();
  oGet.run("/index.php", onGet);
}

function onGet(_aData) {
  console.log("[client] : " + _aData);
}
...

// js/app/cGet.js (Gestion de la méthode GET)

...
"use strict";

class cGet {
  constructor() {}

  run(_aUrl, _onCallback) {
    var oXhttp = new XMLHttpRequest();
    oXhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var aResponseText = this.responseText;
        _onCallback(aResponseText);
      }
    };

    var aMethod = "GET";
    var isAsync = true;
    var aUser = null;
    var aPassword = null;

    oXhttp.open(aMethod, _aUrl, isAsync, aUser, aPassword);
    oXhttp.send();
    return true;
  }
}
...

// Google Chrome (Exécuter le projet)

...
http://localhost:8000/
...

Plusieurs configurations sont le plus souvent nécessaires pour mener à bien le développement d'un projet PHP.

WampServer est un serveur web PHP pour Windows (Windows Apache MySQL PHP). Il tourne sur le serveur Apache et est livré avec le système de gestion de base de données MySQL.

// Google Chrome (Télécharger WampServer)

...
https://www.wampserver.com/en/
Download
> WampServer 64 bits (x64) 3.3.7
> You can download it directly.
...

// Windows (Installer WampServer)

...
# Démarrer l'installeur
# Suivre les instructions
...

Google Fonts est un gestionnaire de polices personnalisées. Les polices personnalisées Google Fonts peuvent être utilisées pour améliorer grandement la mise en forme d'une page web.

// Google Chrome (Télécharger une police Google Fonts)

...
https://fonts.google.com/
Search Fonts > Akronim > Get Font > Télécharger
...

// Windows (Installer une police Google Fonts)

...
# Décompresser la police Google Fonts
Extraire > Akronim.zip > Akronim-Regular.ttf
# Copier la police Google Fonts dans le répertoire de projet
[webroot]/libs/google-fonts/akronim/Akronim-Regular.ttf
# Créer et éditer le fichier (font.css)
# Permettant de charger la police Google Fonts
[webroot]/libs/google-fonts/akronim/font.css
...

// font.css (Chargement de la police Google Fonts)

...
@font-face {
    font-family: "Akronim";
    font-style: normal;
    src: url("Akronim-Regular.ttf");
}
...

Font Awesome est un gestionnaire de pictogrammes. Les pictogrammes de Font Awesome peuvent être utilisés pour améliorer grandement la mise en forme d'une page web.

// Google Chrome (Télécharger Font Awesome)

...
https://fontawesome.com/v4/
Get Started > No thanks, I'll just stick with Font Awesomme 4
Download > No thanks, just download Font Awesome 4
...

// Windows (Installer Font Awesome)

...
# Décompresser Font Awesome
Extraire > font-awesome-4.7.0.zip
# Configurer Font Awesome dans le répertoire de projet
[webroot]/libs/font-awesome/css/font-awesome.min.css
[webroot]/libs/font-awesome/fonts/fontawesome-webfont.woff2
...

Le redémarrage des services de WampServer est le plus souvent nécessaire après la modification d'un fichier de configuration afin d'assurer la prise en compte des modifications.

// Windows (Démarrer WampServer)

...
Bouton Windows > Wampserver64 > Oui
...

// WampServer (Redémarrer les services de WampServer)

...
Barre des tâches > WampServer > Clic gauche > Redémarrer les services
...

Les machines virtuelles sont des gestionnaires des site web. Elles permettent de gérer plusieurs sites web sur une même machine.

// Windows (Autoriser les machines virtuelles)

...
# Ouvrir le fichier de configuration Apache
C:\wamp64\bin\apache\apache2.4.54.2\conf\httpd.conf  
...
# Autoriser les machines virtuelles
# Décommenter la ligne ci-dessous
LoadModule vhost_alias_module modules/mod_vhost_alias.so
...
# Inclure le fichier de configuration des machines virtuelles
# Décommenter les lignes ci-dessous
Include conf/extra/httpd-vhosts.conf
...

Les machines virtuelles sont des gestionnaires de sites web. Elles permettent de gérer plusieurs sites web sur une même machine. Chaque serveur web présent sur la machine est accessible à travers un numéro de port unique.

// Windows (Configurer le numéro de port du serveur)

...
# Ouvrir le fichier de configuration Apache
C:\wamp64\bin\apache\apache2.4.54.2\conf\httpd.conf  
...
# Configurer le numéro de port
# Ajouter les lignes ci-dessous
Listen 0.0.0.0:8000
Listen [::0]:8000
...

Les machines virtuelles sont des gestionnaires de sites web. Elles permettent de gérer plusieurs sites web sur une même machine. Chaque serveur web présent sur la machine est associé à un répertoire racine auquel l'on associe des autorisations afin de rendre certaines parties de son contenu disponibles sur le web.

// Windows (Configurer le répertoire racine du serveur)

...
# Ouvrir le fichier de configuration des machines virtuelles
C:\wamp64\v3.3.0\bin\apache\apache2.4.54.2\conf\extra\httpd-vhosts.conf
...
# Configurer le répertoire racine du serveur
# Ajouter les lignes ci-dessous
...
<VirtualHost *:8000>
    ServerName readyweb.com
    ServerAlias www.readyweb.com 
    ServerAdmin contact@readyweb.com
    DocumentRoot " C:/.../webroot/"

    <Directory "C:/.../webroot/">
        Options All
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
</VirtualHost>
...
# Notre serveur web sera accessible à l'adresse ci-dessous
http://localhost:8000/
...
# Nous laisserons le port 80 par défaut
# Pour la page d'accueil de WampServer
...
<VirtualHost *:80>
    ServerName localhost
    ServerAlias localhost
    DocumentRoot "${INSTALL_DIR}/www"
    
    <Directory "${INSTALL_DIR}/www/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>
...

Une variable d'environnement est un moyen de faire passer des paramètres à un serveur web à partir de l'extérieur. Elle peut être exploitée pour changer dynamiquement le comportement du serveur web. L'instruction SetEnv permet de configurer une variable d'environnement pour un serveur Apache.

// Windows (Configurer une variable d'environnement)

...
# Ouvrir le fichier de configuration des machines virtuelles
C:\wamp64\v3.3.0\bin\apache\apache2.4.54.2\conf\extra\httpd-vhosts.conf
...
# Configurer la variable d'environnement
# Ajouter les lignes ci-dessous
...
<VirtualHost *:8000>
    ServerName readyweb.com
    ServerAlias www.readyweb.com 
    ServerAdmin contact@readyweb.com
    DocumentRoot " C:/.../webroot/"

    SetEnv ENV_TYPE "TEST"

    <Directory "C:/.../webroot/">
        Options All
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
</VirtualHost>
...

Xdebug est un gestionnaire de débogage de projet PHP. Il permet de suivre l'exécution d'un projet PHP pas à pas afin de diagnostiquer et de déceler les causes d'éventuels problèmes de fonctionnement dans le but d'apporter une correction beaucoup plus adaptée.

// WampServer (Définir la version de PHP)

...
Barre des tâches > WampServer > Clic gauche > PHP > Version > 8.2.0
...

// WampServer (Ouvrir la page PHP INFO)

...
# Ouvrir la page d'accueil de WampServer
Barre des tâches > WampServer > Clic gauche > Localhost
# Ouvrir la page PHP INFO
Outils > phpinfo()
...

// Google Chrome (Télécharger la librairie dynamique Xdebug)

...
# Ouvrir la page de téléchargement de Xdebug
https://xdebug.org/
> Install > Installation > (Windows), with help from a wizard
> Follow (these instructions) to get Xdebug installed.
# Copier le contenu de la page PHP INFO
[page-php-info] > Touche (Ctrl + A) > Pour tout sélectionner
[page-php-info] > Touche (Ctrl + C) > Pour tout copier
# Coller le contenu dans l'assistant d'installation de Xdebug
[xdebug-installation-wizard] > Touche (Ctrl + V) > Pour tout coller
# Démarrer l'analyse du contenu de la page PHP INFO
Cliquer sur le bouton > Analyse my phpinfo() output
# Télécharger la librairie dynamique Xdebug
Instructions > Download > php_xdebug-3.4.1-8.2-ts-vs16-x86_64.dll
...

// Windows (Installer la librairie dynamique Xdebug)

...
# Renommer la librairie dynamique Xdebug
php_xdebug-3.4.1-8.2-ts-vs16-x86_64.dll > php_xdebug.dll
# Copier la librairie dynamique Xdebug
Copier > php_xdebug.dll
# Coller la librairie dynamique Xdebug
Coller > C:\wamp64\v3.3.0\bin\php\php8.2.0\zend_ext\ php_xdebug.dll
...

// Windows (Configurer la librairie dynamique Xdebug)

...
# Ouvrir le fichier de configuration PHP pour Apache
C:\wamp64\v3.3.0\bin\php\php8.2.0\phpForApache.ini
...
# Configurer la librairie dynamique Xdebug
...
# Redémarrer les services de WampServer
...

// phpForApache.ini (Configurer la librairie dynamique Xdebug)

...
[xdebug]
zend_extension="C:\wamp64\v3.3.0\bin\php\php8.2.0\zend_ext\php_xdebug.dll"
xdebug.mode=debug,develop
xdebug.start_with_request=true
;xdebug.output_dir ="C:\wamp64\v3.3.0\tmp"
;xdebug.show_local_vars=0
;xdebug.log="C:\wamp64\v3.3.0\logs\xdebug.log"
;xdebug.log_level : 0 Criticals, 1 Connection, 3 Warnings, 5 Communication, 7 Information, 10 Debug	Breakpoint
;xdebug.log_level=7
;xdebug.profiler_output_name=trace.%H.%t.%p.cgrind
;xdebug.use_compression=false
...

VSCode est un environnement de développement intégré prenant le débogueur Xdebug et le développement d'applications web PHP. 

// VSCode (Configurer la librairie dynamique Xdebug)

...
# Installer l'extension PHP Xdebug
Extensions > PHP Xdebug > Install
# Créer un lanceur de débogage
Debug > create a launch.json file > PHP
...
# Ouvrir le lanceur de débogage
.vscode\launch.json
...
# Configurer le débogueur Xdebug
...

// launch.json (Configurer le débogueur Xdebug)

...
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003
    }
  ]
}
...

// VSCode (Démarrer le débogueur Xdebug)

...
# Sélectionner des points d'arrêts
Cliquer sur le bord gauche d'une ligne de code
> Pour placer un point d'arrêt
# Démarrer le débogueur
Debug > Listen for Xdebug > Run
...

// Google Chrome (Exécuter le projet)

...
# Ouvrir la page web
http://localhost:8000/
...
# L'exécution du script PHP s'arrête 
# Au premier point d'arrêt dans VSCode
...
# Utiliser les outils de navigation
# Pour déboguer le projet pas à pas
...

L'affichage du contenu d'une page web permet de visualiser le rendu final du code dans le navigateur et de déceler d'éventuels problèmes de syntaxe.

// Google Chrome (Afficher le contenu d'une page web)

...
# Methode 1
# Afficher le contenu de la page web
[page-web] > Clic droit > Afficher le code source de la page
...
# Methode 2
# Afficher le contenu de la page web
[page-web] > Touche (Ctrl + U)
...

Les outils de développement fournissent l'ensemble des fonctionnalités nécessaires au débogage de la page web.

// Google Chrome (Ouvrir les outils de développement)

...
# Méthode 1
# Ouvrir les outils de développement
Paramètres > Plus d'outils > Outils de développement
...
# Méthode 2
# Ouvrir les outils de développement
Touche (Ctrl + MAJ + I)
...

La fenêtre (Console) sert à visualiser les messages JavaScript envoyés vers la console à partir de la page web. 


La fenêtre (Eléments) sert visualiser le contenu HTML de la page web. 


La fenêtre (Appareils) sert visualiser le rendu de la page web sur différents types d'appareils mobiles.