Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler

Système de gestion de contenu web (CMS)

Vues
496
AccueilTutorielsPHPCMS
Conception d'un système de gestion de contenu web (CMS)

Bienvenue dans ce tutoriel consacré à la conception d'un système de gestion de contenu web (CMS) en PHP sous le système Windows avec l'utilisation de l'outil WampServer (Windows Apache MySQL PHP).
Produit par Gérard KESSE.

Introduction
Configuration du serveur PHP sous WampServer
Configuration du chargement automatique de classe
Configuration du débogage PHP avec Xdebug sous VSCode
Configuration du code HTML de base
Configuration de la mise en forme CSS
Configuration des fonds d'écran de l'application
Configuration des variables d'environnement PHP sous Apache
Configuration d'une police personnalisée Google Fonts
Configuration des icônes Font Awesome
Configuration des scripts JavaScript dans l'application
Configuration du module rewrite sous WampServer
Récupération de l'identifiant de page
Configuration de la page d'administration
Suite


Introduction


Un CMS (Content Management System) est un système de gestion de contenu. Il aide les entreprises à gérer leur contenu numérique. Il permet de créer, de gérer et de modifier facilement un site web, sans avoir besoin de connaissances techniques en langage informatique. Des équipes entières peuvent utiliser ce système pour créer, modifier, organiser et publier du contenu. Dans un CMS, le fond et la forme sont dissociés, ce qui simplifie la création de site web. Il vous suffit par exemple de copier le texte dans le champ prévu à cet effet et de cliquer sur le bouton "Publier" pour mettre ce contenu en ligne. C'est bien sûr la même chose pour des photos ou des vidéos.


Configuration du serveur PHP sous WampServer


Démarrer le serveur
Résoudre les erreurs de démarrage

Démarrer le serveur


Nous éditons les fichiers (httpd.conf), (httpd-vhosts.conf), (index.php) pour afficher un message à l'écran.

Autoriser les machines virtuelles
Configurer le numéro de port du serveur
Configurer la racine du serveur
Redémarrer les services de WampServer
Créer le programme principal
Afficher la page web

Autoriser les machines virtuelles


// C:\wamp64\bin\apache\apache2.4.54.2\conf\httpd.conf  
...
LoadModule vhost_alias_module modules/mod_vhost_alias.so
...
Include conf/extra/httpd-vhosts.conf
...

Configurer le numéro de port du serveur


// C:\wamp64\bin\apache\apache2.4.54.2\conf\httpd.conf
...
Listen 0.0.0.0:8000
Listen [::0]:8000
...

Configurer la racine du serveur


// C:\wamp64\bin\apache\apache2.4.54.2\conf\extra\httpd-vhosts.conf
...
<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>
...

// C:\wamp64\bin\apache\apache2.4.54.2\conf\extra\httpd-vhosts.conf
...
<VirtualHost *:8000>
    ServerName readycms.com
    ServerAlias www.readycms.com 
    ServerAdmin readyteam@readycms.com
    DocumentRoot "C:/.../readycms/"
    ...
    <Directory "C:/.../readycms/">
        Options All
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
</VirtualHost>
...

Redémarrer les services de WampServer


// WampServer (Tray Icon)
WampServer > Clic droit > Redémarrer les services

Créer le programme principal


// index.php
<?php
echo "Démarrage de l'application...";

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche avec le message à l'écran

image.png

Résoudre les erreurs de démarrage


Nous utilisons la commande (httpd) pour visualiser les logs en cas d'erreurs lors du démarrage des services WampServer.

Visualiser l'état du serveur en cas d'erreur
Visualiser l'état du serveur en cas de succès

Visualiser l'état du serveur en cas d'erreur

// Terminal
"C:\wamp64\bin\apache\apache2.4.54.2\bin\httpd.exe" -t
...
AH00526: Syntax error on line 38 of C:/wamp64/bin/apache/apache2.4.54.2/conf/extra/httpd-vhosts.conf:
DocumentRoot must be a directory
...
La ligne (38) du fichier (httpd-vhosts.conf) est en erreur

Visualiser l'état du serveur en cas de succès

// Terminal
"C:\wamp64\bin\apache\apache2.4.54.2\bin\httpd.exe" -t
...
Syntax OK


Configuration du chargement automatique de classe


Nous éditons les fichiers (index.php), (GProcess.php), (GInclude.php), (GAutoload.php) pour configurer le chargement automatique de classe.

Configurer le chargement automatique
Afficher la page web

Configurer le chargement automatique


// index.php
<?php
require $_SERVER["DOCUMENT_ROOT"] . "/php/class/GInclude.php";
...
use php\class\GProcess;
...
$lProcess = new GProcess();
...

// GProcess.php
<?php
...
namespace php\class;
...
class GProcess
{
    public function __construct()
    {
        echo "Démarrage de l'application...";
    }
}

// GInclude.php
<?php
require $_SERVER["DOCUMENT_ROOT"] . "/php/class/GAutoload.php";
...

// GAutoload.php
<?php
function GAutoloadRegister($_className)
{
    $lFilename = $_SERVER["DOCUMENT_ROOT"] . DIRECTORY_SEPARATOR . $_className . ".php";
    $lFilename = str_replace("\\", "/", $lFilename);

    if (is_readable($lFilename)) {
        require $lFilename;
    }
}
...
if (version_compare(PHP_VERSION, "5.1.2", ">=")) {
    if (version_compare(PHP_VERSION, "5.3.0", ">=")) {
        spl_autoload_register("GAutoloadRegister", true, true);
    } else {
        spl_autoload_register("GAutoloadRegister");
    }
} else {
    function spl_autoload_register($_className)
    {
        GAutoloadRegister($_className);
    }
}

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche avec le message à l'écran

image.png


Configuration du débogage PHP avec Xdebug sous VSCode


Nous éditons les fichiers (phpForApache.ini), (launch.json) pour configurer le débogage de code PHP avec Xdebug dans l'éditeur (VSCode). 

Activer l'extension Xdebug dans WampServer
Télécharger le fichier DLL Xdebug dans Chrome
Configurer le fichier DLL Xdebug dans WampServer
Redémarrer les services WampServer
Installer l'extension Xdebug dans VSCode
Configurer le débogueur Xdebug dans VSCode
Placer les points d'arrêt dans VSCode
Démarrer le débogueur Xdebug dans VSCode
Démarrer une session de débogage dans Chrome
Accéder à une session de débogage dans VSCode
Naviguer dans une fonction de débogage sous VSCode
Visualiser une variable de débogage sous VSCode
Visualiser la pile des appels de débogage sous VSCode

Activer l'extension Xdebug dans WampServer


// WampServer (Tray Icon)
WampServer > PHP > Extensions PHP > xdebug

Télécharger le fichier DLL Xdebug dans Chrome


// Chrome (Xdebug Wizard)
Ouvrir l'interface (Xdebug Wizard) en suivant le lien ci-dessous
https://xdebug.org/wizard

// Terminal
"C:\wamp64\bin\php\php8.2.0\php.exe" -i > tmp\phpinfo.txt

// Windows
Copier le contenu du fichier > tmp\phpinfo.txt

// Chrome (Xdebug Wizard)
Coller dans l'interface (Xdebug Wizard)
Cliquer sur le bouton > Analyze my phpinfo() output
...
Télécharger le fichier DLL > php_xdebug-3.3.2-8.3-vs16-x86_64.dll

Configurer le fichier DLL Xdebug dans WampServer


// Windows
Copier le fichier > php_xdebug-3.3.2-8.3-vs16-x86_64.dll
Coller dans le dossier > C:\wamp64\bin\php\php8.2.0\zend_ext

// C:\wamp64\v3.3.0\bin\php\php8.2.0\phpForApache.ini
...
[xdebug]
zend_extension="C:\wamp64\bin\php\php8.2.0\zend_ext\php_xdebug-3.3.2-8.2-vs16-x86_64.dll"
xdebug.mode=debug,develop
...

Redémarrer les services WampServer


// WampServer (Tray Icon)
WampServer > Redémarrer les services

Installer l'extension Xdebug dans VSCode


// VSCode (Extensions)
VSCode > Extensions > PHP Debug (Xdebug) > Install

Configurer le débogueur Xdebug dans VSCode


// VSCode (Debug)
VSCode > Debug > create a launch.json file > PHP

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

Placer les points d'arrêt dans VSCode


// VSCode (Points d'arrêt)
VSCode > Placer les points d'arrêts aux lignes souhaitées

image.png

Démarrer le débogueur Xdebug dans VSCode


// VSCode (Debug)
VSCode > Debug > Run and Debug > Listen for Xdebug > Run

image.png

Démarrer une session de débogage dans Chrome


// Chrome (Session Xdebug)
http://localhost:8000
...
Le code se bloque sur le premier point d'arrêt dans VSCode

Accéder à une session de débogage dans VSCode


// VScode (Session Xdebug)
VSCode > Accéder à la session de débogage

image.png

Naviguer dans une fonction de débogage sous VSCode


// VSCode (Debug - Fonction)
VSCode > Naviguer dans une fonction

image.png

Visualiser une variable de débogage sous VSCode


// VSCode (Debug - Variables Locales)
VSCode > Naviguer dans une fonction
VSCode > Visualiser les variables locales

image.png

Visualiser la pile des appels de débogage sous VSCode

 
// VSCode (Debug - Pile des appels)
VSCode > Naviguer dans une fonction
VSCode > Visualiser la pile des appels

image.png


Configuration du code HTML de base


Nous éditons les fichiers (index.php), (GProcess.php) pour configurer le code HTML de base. 

Configurer le code HTML de  base
Configurer le logo de l'application
Afficher le page web
Afficher le code source de la page web

Configurer le code HTML de  base


// index.php
<?php
...
$lProcess = new GProcess();
$lProcess->init();
$lProcess->run();
$lProcess->runFooter();
...

// php\class\GProcess.php
<?php
...
class GProcess
{
    public function __construct() {}
    ...
    public function init()
    {
        $this->toHeader();
    }
    ...
    public function run()
    {
        echo sprintf("Démarrage de l'application...\n");
    }
    ...
    public function runFooter()
    {
        echo sprintf("</div>\n");
        echo sprintf("</body>\n");
        echo sprintf("</html>\n");
    }
    ...
    private function toHeader()
    {
        echo sprintf("<!DOCTYPE html>\n");
        echo sprintf("<html lang='fr'>\n");
        echo sprintf("<head>\n");
        echo sprintf("<title>%s</title>\n", $this->toTitle());
        echo sprintf("<meta charset='UTF-8'/>\n");
        echo sprintf("<link rel='shortcut icon' type='image/png' 
        href='%s'/>\n", $this->toLogo());
        echo sprintf("<meta name='viewport' content='width=device-width, 
        maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-
        scalable=no'/>\n");
        echo sprintf("</head>\n");
        echo sprintf("<body>\n");
        echo sprintf("<div>\n");
    }
    ...
    private function toTitle()
    {
        $lTitle = $this->toSiteName();
        return $lTitle;
    }
    ...
    private function toSiteName()
    {
        return "ReadyCms";
    }
    ...
    private function toLogo()
    {
        return "/data/img/app-logo.png";
    }
    ...
}

Configurer le logo de l'application


// Fichiers
Ajouter le fichier > data/img/app-logo.png

image.png

Afficher le page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche avec le message à l'écran
...
Le logo de la page web apparaît

image.png

Afficher le code source de la page web


// Chrome (Code Source)
Page Web > Clic droit > Afficher le code source de la page
...
Ou utiliser le raccourci clavier > Ctrl + U
...
Le code source de la page s'affiche

image.png


Configuration de la mise en forme CSS


Nous éditons les fichiers (GProcess.php), (styles.css) pour configurer la mise en forme CSS de la page Web.

Configurer la mise en forme CSS
Configurer la bordure de page
Afficher la page web

Configurer la mise en forme CSS


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    public function runFooter()
    {
        echo sprintf("</div>\n");
        echo sprintf("</div>\n");
        ...
        echo sprintf("</body>\n");
        echo sprintf("</html>\n");
    }
    ...
    private function toHeader()
    {
        echo sprintf("<!DOCTYPE html>\n");
        echo sprintf("<html lang='fr'>\n");
        echo sprintf("<head>\n");
        ...
        $this->toStyleCss();
        ...
        echo sprintf("</head>\n");
        echo sprintf("<body>\n");
        ...
        echo sprintf("<div class='Html1'>\n");
        echo sprintf("<div class='Html2>\n");
    }
    ...
    private function toStyleCss()
    {
        echo sprintf("<link rel='stylesheet' href='/css/styles.css'/>\n");
    }
}
...

// css\styles.css
* {
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
...
body {
    background-color: #051039;
    font-family: arial;
    font-size: 16px;
    text-align: center;
}
...
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow: auto;
    scrollbar-color: #5f6681 #051039;
    scrollbar-width: auto;
}
...
.Html1 {
    border: 1px solid transparent;
    position: relative;
}
...
.Html2 {
    background-color: #253059;
    max-width: 1000px;
    margin: auto;
    margin-top: 250px;
    margin-bottom: 250px;
    min-height: 150px;
    ...
    border: 10px solid transparent;
    border-image: url("/data/img/app-border.png") 30 round;
    -webkit-border-image: url("/data/img/app-border.png") 30 round;
    -moz-border-image: url("/data/img/app-border.png") 30 round;
    -o-border-image: url("/data/img/app-border.png") 30 round;
}
...

Configurer la bordure de page


// Fichiers
Ajouter le fichier > data/img/app-border.png

image.png

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche avec le message à l'écran
...
La mise en forme de la page web apparaît
...
La bordure du contenu central la page web apparaît

image.png


Configuration des fonds d'écran de l'application


Nous éditons les fichiers (GProcess.php), (styles.css) pour configurer les fonds d'écran de l'application. 

Configurer les fonds d'écran
Configurer les images de fond d'écran
Afficher la page web

Configurer les fonds d'écran


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    private function toHeader()
    {
        echo sprintf("<!DOCTYPE html>\n");
        echo sprintf("<html lang='fr'>\n");
        echo sprintf("<head>\n");
        ...
        echo sprintf("</head>\n");
        echo sprintf("<body>\n");
        echo sprintf("<div class='Html1'>\n");
        ...
        echo sprintf("<div class='Background1'></div>\n");
        echo sprintf("<div class='Background2'></div>\n");
        echo sprintf("<div class='Background3'></div>\n");
        ...
        echo sprintf("<div class='Html2 HtmlPage'>\n");
    }
    ...
}
...

// css\styles.css
...
.Background1 {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    min-height: 300px;
    z-index: -1;
    ...
    background-image: url("/data/img/app-bg-top-paris-2024.gif"),
    url("/data/img/app-bg-top-fond.jpg");
    background-position: center top, left top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 85%, 100% 100%;
    ...
    border: 10px solid transparent;
    border-image: url("/data/img/app-border.png") 30 round;
    -webkit-border-image: url("/data/img/app-border.png") 30 round;
    -moz-border-image: url("/data/img/app-border.png") 30 round;
    -o-border-image: url("/data/img/app-border.png") 30 round;
}
...
.Background2 {
    position: absolute;
    top: 300px;
    bottom: 300px;
    left: 0px;
    right: 0px;
    z-index: -1;
    ...
    background-image: url("/data/img/app-bg-middle.gif");
    background-position: center center;
    background-repeat: repeat;
    background-size: auto;
}
...
.Background3 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    min-height: 300px;
    z-index: -1;
    ...
    background-image: url("/data/img/app-bg-footer.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    ...
    border: 10px solid transparent;
    border-image: url("/data/img/app-border.png") 30 round;
    -webkit-border-image: url("/data/img/app-border.png") 30 round;
    -moz-border-image: url("/data/img/app-border.png") 30 round;
    -o-border-image: url("/data/img/app-border.png") 30 round;
}
...

Configurer les images de fond d'écran


// Fichiers
Ajouter le fichier > data/img/app-bg-top-fond.jpg
Ajouter le fichier > data/img/app-bg-top-paris-2024.gif
Ajouter le fichier > data/img/app-bg-middle.gif
Ajouter le fichier > data/img/app-bg-footer.jpg

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche avec le message à l'écran
...
La mise en forme de la page web apparaît
...
La bordure du contenu central la page web apparaît

image.png


Configuration des variables d'environnement PHP sous Apache


Nous éditons les fichiers (httpd-vhosts.conf), (GProcess.php) pour configurer les variables d'environnement PHP sous Apache. 

Configurer la variable d'environnement
Charger la variable d'environnement
Redémarrer les services WampServer
Afficher la page web

Configurer la variable d'environnement


// C:\wamp64\bin\apache\apache2.4.54.2\conf\extra\httpd-vhosts.conf 
...
<VirtualHost *:8000>
    ServerName readycms.com
    ServerAlias www.readycms.com 
    ServerAdmin readyteam@readycms.com
    DocumentRoot "C:/dev/pratique/rdv-systeme-gestion-contenu-web/v01/"
    ...
    SetEnv ENV_TYPE "TEST"
    ...
    <Directory "C:/dev/pratique/rdv-systeme-gestion-contenu-web/v01/">
        Options All
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>
</VirtualHost>
...

Charger la variable d'environnement


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    public function run()
    {
        if ($this->isTestEnv()) {
            echo sprintf("Démarrage de l'application (TEST)...\n");
        } else {
            echo sprintf("Démarrage de l'application (PROD)...\n");
        }
    }
    ...
    private function isTestEnv()
    {
        $lEnv = GEnv::Instance();
        return ($lEnv->m_envType == "TEST");
    }
    ...
    private function loadEnv($_env, $_defaultValue = "")
    {
        $lEnv = getenv($_env);
        return  $lEnv ? $lEnv : $_defaultValue;
    }
    ...
}
...

Redémarrer les services WampServer


// WampServer (Tray Icon)
WampServer > Redémarrer les services

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La variable d'environnement (ENV_TYPE) est bien lue.
Elle contient la valeur (TEST)
...
La page web s'affiche avec le bon message à l'écran

image.png


Configuration d'une police personnalisée Google Fonts


Nous éditons les fichiers (GProcess.php), (GKernel.php), (styles.css), (css.css) pour configurer la police personnalisée Google Fonts (Akronim).
 
Télécharger la police personnalisée
Installer la police personnalisée
Configurer la police personnalisée
Afficher la page web

Télécharger la police personnalisée


// Chrome (Google Fonts)
https://fonts.google.com/specimen/Akronim
...
Get Font > Download all (1)

Installer la police personnalisée


// Windows (Google Fonts)
Décompresser le fichier > Akronim.zip
...
Copier le fichier > Akronim-Regular.ttf
Coller dans le dossier > libs\google-fonts\Akronim\

Configurer la police personnalisée


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    public function run()
    {
        $lKernel = new GKernel();
        $lKernel->run();
    }
    ...
    private function toHeader()
    {
        echo sprintf("<!DOCTYPE html>\n");
        echo sprintf("<html lang='fr'>\n");
        echo sprintf("<head>\n");
        ...
        $this->toStyleCss();
        ...
        echo sprintf("</head>\n");
        echo sprintf("<body>\n");
        ...
    }
    ...
    private function toStyleCss()
    {
        ...
        echo sprintf("<link rel='stylesheet' href='/libs/google-fonts/Akronim/css.css'/>\n");
        ...
    }
    ...
}

// php\class\GKernel.php
<?php
...
namespace php\class;
...
class GKernel
{
    public function __construct() {}
    ...
    public function run()
    {
        $this->toMenu();
    }
    ...
    private function toMenu()
    {
        echo sprintf("<div class='Menu1'>\n");
        echo sprintf("<span class='Menu5'>%s</span>\n", $this-
        >toSiteName());
        echo sprintf("</div>\n");
    }
    ...
    private function toSiteName()
    {
        return "ReadyCms";
    }
    ...
}

// libs\google-fonts\Akronim\css.css
@font-face {
    font-family: "Akronim";
    font-style: normal;
    src: url("Akronim-Regular.ttf");
}

// css\styles.css
...
.Menu1 {
    background-color: rgba(255, 255, 255, 0.2);
    text-align: left;
    font-size: 0px;
    position: relative;
    line-height: 45px;
}
...
.Menu5  {
    display: inline-block;
    vertical-align: middle;
    color: cyan;
    font-size: 25px;
    font-family: Akronim;
    color: cyan;
}
...

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La police personnalisée Google Fonts est bien intégrée
...
La page web s'affiche avec le bon style de famille

image.png


Configuration des icônes Font Awesome


Nous éditons les fichiers (GProcess.php), (GKernel.php), (styles.css) pour configurer l'icône Font Awesome (fa-bars). 

Télécharger les icônes
Installer les icônes
Configurer les icônes
Afficher la page web

Télécharger les icônes


// Chrome (Font Awesome)
https://fontawesome.com/v4/
...
Get Started > No thanks, I'll stick with Font Awesome 4
Download > No thanks, I'll stick with Font Awesome 4

Installer les icônes


// Windows (Font Awesome)
Décompresser le fichier > font-awesome-4.7.0.zip
...
Copier le fichier > font-awesome.min.css
Coller dans le dossier > libs\font-awesome\css\
...
Copier le fichier > fontawesome-webfont.woff2
Coller dans le dossier > libs\font-awesome\fonts\

Configurer les icônes


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    public function run()
    {
        $lKernel = new GKernel();
        $lKernel->run();
    }
    ...
    private function toHeader()
    {
        echo sprintf("<!DOCTYPE html>\n");
        echo sprintf("<html lang='fr'>\n");
        echo sprintf("<head>\n");
        ...
        $this->toStyleCss();
        ...
        echo sprintf("</head>\n");
        echo sprintf("<body>\n");
        ...
    }
    ...
    private function toStyleCss()
    {
        ...
        echo sprintf("<link rel='stylesheet' href='/libs/font-awesome/css/font-awesome.min.css'/>\n");
        ...
    }
    ...
}

// php\class\GKernel.php
<?php
...
namespace php\class;
...
class GKernel
{
    public function __construct() {}
    ...
    public function run()
    {
        $this->toMenu();
    }
    ...
    private function toMenu()
    {
        echo sprintf("<div class='Menu1'>\n");
        echo sprintf("<span class='Menu5'>%s</span>\n", $this-
        >toSiteName());
        ...
        echo sprintf("<div class='Bars1'><i class='fa fa-bars'></i></div>\n");
        ...
        echo sprintf("</div>\n");
    }
    ...
}

// css\styles.css
...
.Bars1 {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    font-size: 25px;
    font-family: Akronim;
    color: white;
    padding: 0 10px 0 10px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
}
...

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
L'icône Font Awesome est bien intégrée
...
La page web s'affiche avec l'icône Font Awesome

image.png


Configuration des scripts JavaScript dans l'application


Nous éditons les fichiers (GProcess.php), (GKernel.php), (scripts.js) pour configurer les scripts JavaScript dans l'application.

Configurer le script JavaScript
Editer le script JavaScript
Afficher la page web

Configurer le script JavaScript


// php\class\GProcess.php
<?php
...
class GProcess
{
    ...
    public function runFooter()
    {
        echo sprintf("</div>\n");
        echo sprintf("</div>\n");
        ...
        $this->toScriptJs();
        ...
        echo sprintf("</body>\n");
        echo sprintf("</html>\n");
    }
    ...
    public function toScriptJs()
    {
        echo sprintf("<script src='/js/scripts.js'></script>\n");
    }
    ...
}
...

// php\class\GKernel.php
<?php
...
class GKernel
{
    ...
    private function toMenu()
    {
        echo sprintf("<div class='Menu1'>\n");
        ...
        echo sprintf("<div class='Bars1' onclick='call_server(\"app\", \"open_menu_bars\", this)'><i class='fa fa-bars'></i></div>\n");
        ...
        echo sprintf("</div>\n");
    }
    ...
}
...

Editer le script JavaScript


// js\scripts.js
function call_server(_module, _method, _obj = null, _data = null) {
  console.log("Intégration JavaScript dans l'application...");
}

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/
...
La page web s'affiche
...
Ouvrir la consolde de débogage
...
Ctrl + Shift + I > Console
...
Se rendre sur la page
Appuyer sur l'icône de la barre de menu
...
Le message JavaScript apparaît dans la console de débogage

image.png


Configuration du module rewrite sous WampServer


Nous éditons les fichiers (.htaccess), (GKernel.php) pour configurer le module rewrite sous WampServer.

Activer le module rewrite sous WampServer
Installer l'extension Apache sous VSCode
Configurer le module rewrite
Afficher la page web

Activer le module rewrite sous WampServer


// WampServer (Tray Icon)
WampServer > Apache > Modules Apache > rewrite_module

Installer l'extension Apache sous VSCode


// VSCode (Extensions)
VSCode > Extensions > Apache Conf > Install

Configurer le module rewrite


// .htaccess
DirectoryIndex index.php
...
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /?pageId=$1 [L,QSA]
</IfModule>

// php\class\GKernel.php
<?php
...
class GKernel
{
    ...
    public function run()
    {
        $this->toMenu();
        $this->toPage();
    }
    ...
    private function toPage()
    {
        var_dump($_GET);
    }
    ...
}

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/home/admin/
...
La page web s'affiche
...
La variable ($_GET) contient le paramètre (pageId)
Le paramètre (pageId) possède la valeur (home/admin/)

image.png


Récupération de l'identifiant de page


Nous éditons le fichier (GKernel.php) pour récupérer l'identifiant de page.

Récupérer l'identifiant de page
Afficher la page web

Récupérer l'identifiant de page


// php\class\GKernel.php
<?php
...
class GKernel
{
    ...
    private function toPage()
    {
        $lPageId = $this->getPageId();
        echo sprintf("Appel de la page (%s)...", $lPageId);
    }
    ...
    private function getPageId()
    {
        $lPageId = $this->loadGET("pageId");
        if ($lPageId != "") {
            if (substr($lPageId, -1) == "/") {
                $lPageId = substr($lPageId, 0, -1);
            }
        }
        $lPageId = sprintf("/%s", $lPageId);
        return $lPageId;
    }
    ...
    private function loadGET($_key, $_defaultValue = "")
    {
        if (!isset($_GET[$_key])) return $_defaultValue;
        return $_GET[$_key];
    }
    ...
}

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/home/admin/
...
La page web s'affiche
...
L'identifiant de la page est bien récupérée (/home/admin)

image.png


Configuration de la page d'administration


Nous éditons les fichiers (GKernel.php), (GAdmin.php) pour configurer la page d'administration de l'application.

Configurer la page admin
Afficher la page web

Configurer la page admin


// php\class\GKernel.php
<?php
...
class GKernel
{
    ...
    private function toPage()
    {
        $lPageId = $this->getPageId();
        ...
        if ($lPageId == "/home/admin") {
            $this->toAdmin();
        } else {
            $this->toError();
        }
    }
    ...
    private function toAdmin()
    {
        $lAdmin = new GAdmin();
        $lAdmin->run();
    }
    ...
    private function toError()
    {
        echo sprintf("Page non trouvée...");
    }
    ...
}
...

// php\class\GAdmin.php
<?php
...
namespace php\class;
...
class GAdmin
{
    public function __construct() {}
    ...
    public function run()
    {
        echo sprintf("Page d'administration...");
    }
}

Afficher la page web


// Chrome (Page Web)
http://localhost:8000/home/admin/
...
La page web s'affiche et pointe sur la page d'administration
...
http://localhost:8000/
...
La page web s'affiche et présente le message (Page non trouvée...)

image.png


Suite


Suivant