JeuWeb - Crée ton jeu par navigateur
Article Préparer sa structure de code - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Article Préparer sa structure de code (/showthread.php?tid=8214)



Préparer sa structure de code - Xenos - 14-09-2020

Préparer son espace de travail

1) Organiser ses répertoires

Le moyen le plus simple de s'y retrouver est de toujours organiser ces répertoires de la même manière.

Pour ce faire, nous commençons par créer 5 répertoires :
  • _css ⇒ Contiendra les fichiers CSS

  • _js ⇒ Contiendra les fichiers Javascript

  • _inc ⇒ Contiendra tous les fichiers PHP inclus dans les pages principales

  • _data ⇒ Contiendra les fichiers utilisateurs ( Exemple, un avatar uploadé )

  • _img ⇒ Contient les images du projet


De cette manière, vous savez exactement où se trouve tel ou tel type de fichier et pouvez organiser votre répertoire racine afin que celui-ci ne contienne que les pages d'appels de votre projet.

Voici à quoi doit ressembler votre répertoire :

{Image (attachment) /orga-repertoire3.jpg}

2) Organiser ses fichiers

Fichiers CSS

J'utilise toujours la même structure, je commence par créer un fichier _css/global.css contenant tous les propriétés communes à chaque page.

Ensuite je créé des fichiers suivant des besoins spécifiques, par exemple un CSS pour un script sera nommé jquery.nom_plugin.css, un CSS pour un formulaire form.nom_form.css

Voici à quoi doit ressembler votre répertoire :

{Image (attachment) /orga-css2.jpg}

Fichiers Javascript

Cette partie fonctionne comme la précédente, hormis l'ajout du type de compression, par exemple jquery.nom_plugin.packed.js

Il existe généralement deux formes :
  • jquery.nom_plugin.js ⇒ Utiliser comme version de développement.

  • jquery.nom_plugin.min.js ⇒ Utiliser comme version de production.

  • jquery.nom_plugin.pack.js ⇒ Utiliser comme version de production.


Le choix de la version de production dépend généralement de la configuration serveur. La version MIN est une version sans espaces, ni saut de lignes, qui est ensuite Gzippé, la version PACKED utilise un algorythme compressant le code, et l'incluant dans une fonction eval() qui se charge de décompresser le code côté client.

Voici à quoi doit ressembler votre répertoire :

{Image (attachment) /orga-javascript2.jpg}

Fichiers Inclus

Cette partie contient tous les fichiers inclus et qui ne servent donc pas à l'affichage proprement dit.

Il existe généralement deux formes :
  • inc.nom_general.php ⇒ Pour la simple inclusion

  • class.nom_classe.php ⇒ Pour les classes


Pour les fichiers inclus, j'utilise généralement un nom me permettant de retrouver facilement ce qu'il contient.

Exemple : inc.fct_common.php dans lequel je stocke mes fonctions usuelles de traitement.

Voici à quoi doit ressembler votre répertoire :

{Image (attachment) /orga-include.jpg}

Fichiers _prepend.php, _append.php, _config.php

Voici 3 fichiers que je ne met pas dans le répertoire _inc.

Notez que les 3 fichiers commencent par un underscore, ce qui signifie qu'ils ne sont jamais appelés seuls.

C'est une convention qui permet de bien les séparer des autres fichiers racines.

_config.php

Inutile je pense de le présenter, ce fichier contient toutes les informations de configuration de votre projet.

Dans l'exemple, le fichier est au format PHP mais il peut être sous plusieurs formes, dont principalement INI, XML

Exemple :

<?php
define('__ROOTPATH', 'http://localhost/phpDD/');
define('__VERSION', '0.1');
define('__GAMETITLE', 'phpD&D');
 
define("BDD_HOST", "localhost");
define("BDD_USER", "root");
define("BDD_PASS", "");
define("BDD_DB", "phpdd");
define("TABLE_PREFIX", "phpdd_");
?>

_prepend.php

Ce fichier est inclus dans toutes les pages, c'est la première ligne de chaque fichier. Il sert généralement à lancer la connexion à la base de données ou d'autres opérations nécessaires sur toutes les pages tel que l'initialisation de session, vérification de cookies…
Il est très utile en cas de modifications ultérieurs des entêtes de fichiers.

Exemple :

<?php
session_start();
 
// Inclusion du fichier de configuration
require_once (dirname(__file__) . '/config.php');
 
// Inclusion des fonctions usuelles
require_once (dirname(__file__) . '/_inc/inc.fct_common.php');
 
// Inclusion des classes et initialisation
require_once (dirname(__file__) . '/_inc/class.errorHandler.php');
 
require_once (dirname(__file__) . '/_inc/class.bdd.php');
$BDD = new bdd_mysql(BDD_HOST, BDD_USER, BDD_PASS, BDD_DB);
 
// Nettoyage des données non sécurisées
$_POST = arrayMystripSlashes($_POST);
$_GET = arrayMystripSlashes($_GET);
$_REQUEST = arrayMystripSlashes($_REQUEST);
 
// Quelques vérifications
if (isset($_SESSION['is_logued']))
{
/* ... */
}
 
?>

_append.php

Ce fichier est inclus dans toutes les pages, c'est la dernière ligne de chaque fichier. Il sert à vider des variables, calculer des temps de débuggage, fermer la connexion à la base…
Il est très utile en cas de modifications ultérieurs des pieds de fichiers.

Exemple :

<?php
// Fermeture de la connexion avec la base de données
$BDD->close_connection();
unset($BDD);
 
/* ... */
?>

Voici à quoi doit ressembler votre répertoire :

{Image (attachment) /orga-prepend.jpg}

3) Protéger l'accès aux répertoires sensibles

Le plus simple est de placer un fichier index.htm vide ou contenant le message de votre choix, dans chaque répertoire à protéger, en l'occurence _css, _data, _img, _inc, _js.
Il existe d'autre solutions, utilisant des redirections PHP, ou encore l'utilisation de fichier .htaccess.
L'utilisation du fichier index.htm a pour avantage d'être fonctionnelle sur n'importe qu'elle configuration et d'être simple à mettre en place.

4) Modèle de page

Une fois toutes ces étapes réalisée, on peut commencer à créer ses pages d'affichage. En exemple, la page index.php

<?php
require_once (dirname(__file__) . '/_prepend.php');
 
$html .= 'Mon fichier index.php<br />';
$html .= 'Ceci est ma page principale';
 
echo $html;
 
require_once (dirname(__file__) . '/_append.php');
?>

Astuce : Remarquez l'utilisation de la variable $html, elle permet de n'utiliser qu'une seule fois la fonction echo(). Ce qui est bien plus rapide !

5) Conclusion

En utilisant cette méthode de rangement, vous gagnerez en efficacité, en utilisant une notation unifiée et en rangeant chaque fichier à sa place, cela vous permettra de les retrouver bien plus rapidement et d'avoir une vue d'ensemble concise et claire.
Notons que ceci reste particulièrement basique est peut grandement être étoffé, si vous utilisez un système de cache ou de template, voir de réécriture d'url.

{Image (attachment) /orga-finale.jpg}