Dans sa version actuelle, Atomik Framework n'implémente pas l'architecture MVC, qui consiste en une séparation des trois couches
affichage (vue),
données (modèle) et
actions (contrôleur). Cependant, la partie
affichage est tout de même séparée de la gestion des actions et des données. Il y a donc deux éléments très importants dans la création d'un site avec Atomik : les
views (vues) et les
actions (actions et données). Pour faire simple, les vues représentent la partie HTML, tandis que les actions contiennent la partie PHP d'une page.
Chaque page de votre site devra donc posséder soit une vue, soit une action, soit les deux. Les fichiers
vues se trouvent dans le dossier
app/views/, et les actions dans le dossier
app/actions/. Un exemple aide à comprendre, alors, exemplons. Créez dans le dossier
app/views/ un fichier nommé
hello.phtml. Voici le contenu de ce fichier :
Code : HTML
Oui, c'est simple et classique. Accédez maintenant à cette page via l'adresse
index.php?action=hello (précédée bien entendu de l'URL de base du projet, par exemple
http://localhost/monprojet/). Vous devriez voir s'afficher une très jolie page blanche sur laquelle on peut lire « Hello World ! ».
Vous venez donc de créer votre première vue. Félicitations ! Ajoutons maintenant une petite touche supplémentaire, avec du PHP cette fois. Pour cela, créez un fichier
hello.php dans le dossier
app/actions/, et placez-y le contenu suivant :
Code : PHP | <?php
$hello = 'Bonjour le monde !';
|
Vous devez maintenant vous douter qu'il va aussi falloir modifier notre fichier
vue créé précédemment. Remplacez son contenu par celui-ci :
Code : PHP | <p><?php echo $hello; ?></p>
|
Actualisez la page
index.php?action=hello, et vous devriez voir son contenu s'afficher en français !
Bon, tout ceci était très simple, mais vous devriez avoir saisi les bases du fonctionnement d'Atomik Framework. Libre à vous maintenant d'ajouter des actions et des vues pour faire ce que vous souhaitez ! Toutefois, il vous faut encore explorer certains horizons d'Atomik, tant il peut vous faciliter le développement.
Commençons par reprendre clairement le fonctionnement de base d'Atomik. Chaque page de votre site doit obligatoirement être appelée par la page
index.php. C'est le cœur d'Atomik qui gère les inclusions de vos actions et vues. Chaque page possède un nom unique, et c'est ce nom qu'on retrouve après
action= dans l'URL. Ce nom doit donc correspondre aux noms donnés à la vue et à l'action associées. Par exemple, un formulaire de contact aura une action
contact.php et une vue
contact.phtml, et sera accessible via l'URL
index.php?action=contact.
Petite remarque : l'extension des vues par défaut est .phtml, vous avez peut-être « tilté » là-dessus. PHTML signifiant « PHP + HTML », il s'agit donc d'un fichier pouvant contenir à la fois du PHP et du HTML. Il est possible de changer cette extension ; je vous apprendrai comment faire par la suite. Pour l'instant, cela ne devrait pas vous déranger et, puisque cette extension a un sens, je crois qu'il est bon de la garder.
À la racine de votre projet Atomik, vous aurez remarqué deux dossiers : le dossier
app/, que l'on vient d'évoquer, et un dossier
assets/. Ce dernier va servir à contenir tous les fichiers « ressources » de votre site, c'est-à-dire les feuilles de style CSS, les scripts JavaScript, les images, etc. Le contenu de ce dossier est accessible en lecture par n'importe qui (heureusement !), ce qui n'est pas le cas du dossier
app/ (heureusement aussi ; sinon, n'importe qui pourrait charger vos actions ou vues hors de leur contexte).
Maintenant que vous êtes plus familier avec Atomik, décrivons plus en détail son architecture :
- app/ :: dossier contenant toute la partie « métier » de votre site.
- actions/ :: dossier contenant les actions (fichiers *.php) de votre site.
- plugins/ :: dossier contenant les plugins utilisables par Atomik.
- views/ :: dossier contenant les vues (fichiers *.phtml) de votre site.
- config.php :: fichier de configuration principal d'Atomik.
- assets/ :: dossier contenant toutes les ressources de votre site.
- css/ :: dossier contenant les feuilles de style CSS.
- images/ :: dossier contenant les images.
- js/ :: dossier contenant les fichiers JavaScript.
- index.php :: fichier principal, toujours appelé, contenant le code d'Atomik.
Vous devez désormais être capable de vous repérer dans votre architecture de fichiers, et savoir où placer vos différents fichiers. Mais vous êtes encore loin de la maîtrise absolue de la Force...
Si vous avez regardé à l'intérieur du dossier
app/views/, vous aurez remarqué deux fichiers déjà existants :
index.phtml et
_layout.phtml. Si le premier, évidemment, contient la vue de la page d'accueil, le deuxième est plus intrigant. Sachez donc que ce fichier
_layout.phtml contient l'architecture HTML de vos pages ! Tout morceau de code HTML commun à chacune de vos pages se trouvera donc dans ce fichier. En fait, c'est un peu le même principe qu'avec le fichier
index.php : il est toujours appelé, et c'est lui qui appelle les autres fichiers. Le fichier
_layout.phtml, s'il n'appelle pas les autres vues, gère en revanche leur affichage.
Voici un exemple hyper-simplifié de
layout :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <!DOCTYPE html>
<html>
<head>
<title>Titre</title>
</head>
<body>
<header><!-- Entête de mon site --></header>
<nav><!-- Navigation --></nav>
<?php echo $contentForLayout; ?>
<footer><!-- Pied de page --></footer>
</body>
</html>
|
L'instruction PHP
echo $contentForLayout; insère le code HTML généré par la vue courante. Pour bien comprendre, regardez le fichier
_layout.phtml de votre projet, ainsi que de votre vue
hello.phtml, et comparez-les avec le code source de la page
index.php?action=hello. Vous constaterez ainsi que le code de
hello.phtml est bien inséré dans le code de
_layout.phtml. Je vous laisse le soin de bidouiller le
layout pour vous assurer que je vous dis bien la vérité.
Le fichier _layout.phtml commence par un underscore (_) : ceci signifie qu'il s'agit d'un fichier « privé », au même sens qu'en POO. Il n'est donc pas accessible directement. On ne peut par exemple pas accéder à la page index.php?action=_layout. Vous pouvez donc, si vous le souhaitez, créer des pages privées, en précédant simplement leur nom de cet underscore. L'utilité ? Les inclure dans vos autres pages « publiques », via des include() PHP.
Il en va de même pour les variables utilisées dans vos actions. Si vous ne souhaitez pas qu'une variable soit accessible depuis la vue, précédez-la d'un underscore.