Tutoriels

Installation du framework Premiers pas Mises à jour du framework Gérer les utilisateurs Gestion des textes et des langues Gestion des erreurs Créer ses classes & librairies

Classes & librairies

DSM.class.php DSMUser.class.php DSMMessage.class.php Libraire LJ Librairies internes

Premiers pas

introduction Créer une page Architecture en cascade Panneau de contrôle L'indispensable à votre page Aller plus loin avec les dev

Premiers pas avec le DSM

Introduction

Il est temps pour vous de vous lancer dans le développement pur et dur de votre site ! L'objectif de ce petit tutoriel est de vous donner les briques nécessaires au développement avec le DSM.

Ce tutoriel vous explique les concepts et outils que vous utiliserez 90% du temps : pas de tutoriel à rallonge, à la fin de cette page, vous serez prêts à développer. Cette simplicité est l'essence même du DSM et représente tout son intérêt.


Nous évoquerons notamment comment créer une page, un dossier contenant des pages, ajouter des élements et des fichiers à votre page, à gérer votre page, à gérer votre site, et à coder proprement et simplement votre site !

Créer une page

La théorie

La création d'une page sur le DSM est relativement simple mais nécessite de comprendre un concept simple, pour cela il va falloir que vous oubliiez la façon dont vous concevez l'organisation d'un site internet. Oubliez comment vous aviez l'habitude d'organiser vos fichiers et vos pages les unes par rapport aux autres car sur ce point la avec le DSM : on reprend tout de 0.

La première chose que vous devez savoir c'est que tous les fichiers que vous développerez se trouveront dans le dossier dev, à quelques exceptions près comme les classes ou les librairies.
C'est dans ce dossier que vous créerez toutes les briques et tous les composants du site. Le site se chargera de tout assembler correctement et de créer les pages !

Ecrire Hello World!

Bon je vous l'accorde, c'est encore assez flou pour vous, alors passons à un exemple afin que vous compreniez un peu le principe ! Dans un premier temps nous allons créer une page hello.php toute simple : un Hello World sur fond rose.
Pour créer la page c'est plutôt simple, dans votre dossier dev, créez le dossier hello. Le nom de ce dossier correspond au nom de votre page, le DSM créera le fichier hello.php à la racine de votre site.

Dans ce dossier dev/hello, créez un fichier body.php. Les fichiers body.php s'intègrent au coeur de votre page : c'est le contenu sous forme HTML de votre site !
C'est donc ici que l'on doit écrire le texte Hello world ! dans le fichier body.php, écrivez :

Hello World !

Sauvegardez votre fichier. Et rendez-vous sur la page hello.php à la racine de votre site. Tada ! Hello world est écrit. Quoi ? Ca ne vous impressionne pas ? Bon ok, continuons...

Vous allez me dire qu'on a écrit un Hello world, sans le DSM ça aurait tout aussi bien fonctionné. Certes, mais la suite va vous montrer tout l'intérêt du système de gestion de pages du DSM, appelé "Architecture en cascades des fichiers de développement" (un peu long comme nom).

Ajouter un peu de CSS

Au début, j'ai précisé que le Hello world serait sur un fond rose, pour cela il faut faire appel à du CSS. Alors créons un fichier CSS : créez un nouveau fichier terminant par *.css dans votre dossier dev/hello et insérez-y les lignes suivantes :

body {
	text-align: center;
	font-size: 28px;
	color: #fff;
	background-color: #fe9bce;
}

Sauvegardez votre fichier *.css et raffraîchissez la page hello.php. Le tour est joué ! Notre Hello world sur fond rose !
Est-ce que vous commencez à comprendre ? Vous créez votre fichier de développement, qui peut contenir du PHP, de l'HTML, du CSS, vous l'enregistrez au bon endroit, et le DSM s'occupe du reste !

Les différents types de fichiers de développement

Maintenant un peu de théorie, voici les différents types de fichiers de développement que le DSM comprend :

  • *.header.php : Les fichiers header sont tous les fichiers contenant votre code qui doit être situé avant toute balise HTML. Typiquement, ces fichiers peuvent contenir des traitements PHP à des formulaires, des connexions d'utilisateurs, etc. Ce type de fichier peut se raccourcir en header.php.
  • *.meta.php : Les fichiers meta contiennent tout votre code devant s'insérer entre les balises HTML head. Ce type de fichier peut se raccourcir en meta.php
  • *.body.php : C'est le contenu même de votre page : les balises HTML (et du traitement PHP si vous le souhaitez). Ce code est inseré entre les balises HTML body de la page. Ce type de fichier peut se raccourcir en body.php.
  • *.footer.php : Identique au body.php à la nuance près que les footers seront ajoutées après tous les fichiers body.php. Les fichiers footer ont pour but d'y mettre le pied de page (HTML) et tout votre code javascript qui se trouve entre les balises script. Ce type de fichier peut se raccourcir en footer.php.
  • *.css : Fichiers CSS classiques, il seronts ajoutés automatiquement.

Gérer ses fichiers de développement

Créer différentes pages

Très bien, nous savons maintenant créer une page. Mais vous ne savez pas comment organiser les pages les unes par rapport aux autres. Pour cela, rien de mieux qu'un exemple, nous allons essayer de créer un site internet avec un menu.
Nous allons créer plusieurs pages :

  • hello.php : notre page d'accueil
  • nyan.php : une seconde page
  • 1337.php : une troisième page

Pour créer ces 3 pages, créez les dossiers qui vous manquent dans le dossier dev : dev/nyan et dev/1337.

Créer un menu pour le site entier

Dans un premier temps, nous allons créer un menu commun pour ces 3 pages. Pour cela, créez un fichier menu.body.php (ou juste body.php) dans le dossier dev (à la racine).
Dans ce fichier, créez votre menu commun aux trois pages : faites une liste avec la balise ul et la balise a, faîtes comme vous voulez, l'essentiel n'est ni le contenu ni la forme, mais comment le DSM fonctionne !

Une fois finit, sauvegardez le fichier menu.body.php et ouvrez la page hello.php. Votre menu y apparaît ! Maintenant ouvrez la page nyan.php : votre menu apparaît aussi ! Vous pouvez aller vérifier sur 1337.php, ça fonctionnera aussi.

L'architecture en cascade

Comment ça marche ? Et bien c'est plutôt simple, c'est de là que cette gestion de fichier tire son nom "d'architecture en cascade". En effet, tous les fichiers se trouvant dans un des dossiers parents de votre page sera ajoutez à votre page. Voici ce qui est ajouté à la page hello.php :

  • Fichiers contenus dans le dossier dev : menu.body.php, le dossier dev est un dossier parent de la page hello
  • Fichiers contenus dans le dossier dev/hello : body.php, style.css
  • Les fichiers contenus dans les dossiers dev/nyan et dev/1337 ne sont pas ajoutés à la page hello.php.

Vous saisissez ? Et cela fonctionne avec tous les types de fichiers énoncés dans la partie précédente (header, meta, body, footer, css).

L'intérêt pour votre développement, c'est que vous créer un CSS général pour toutes vos pages, un menu, un footer et les placez dans le dossier dev, et le DSM l'intègre dans toutes les pages ! C'est un gain de temps énorme et se fait automatiquement.

Aller plus loin dans la gestion des fichiers de développement

Allons plus loin dans l'architecture de votre site : il se peut que vous ayez besoin de regrouper vos pages dans un sous-dossier. Par exemple sur le site internet laurentjerber.com, vous avez la section "DSM" qui contient plusieurs pages : "Téléchargements", "Présentation", "Extensions", "Documentation". Et bien c'est très simple ! Vous créez le dossier dev/dsm qui contiendra toutes nos pages.
Puis vous créez les dossiers :

  • dev/dsm/downloads
  • dev/dsm/documentation
  • dev/dsm/plugins
  • dev/dsm/index (qui correspond à la page "DSM" et à la page "Présentation").

Faites attention : lorsque vous avez une page support (dossier dev/support), et que vous souhaitez créer la page support/contact.php tout en conservant la page support. Déplacez le contenu de dev/support dans dev/support/index. Lorsque vous accéderez à la page support, cela pointera vers l'index !