Créer votre premier projet

Dans ce tutoriel, nous expliquerons comment créer votre premier thème dans SilverStripe. Le programme d’installation de SilverStripe est livré avec son propre thème par défaut - Simple, mais plus que probable, vous voudrez le remplacer pour utiliser votre propre conception personnalisée.

Dépôt de code à télécharger

Créer votre premier projet

Dans ce tutoriel, nous verrons comment construire votre premier projet dans SilverStripe. Le programme d’installation de SilverStripe est livré avec son propre thème par défaut – Simple , mais il est plus probable que vous souhaitiez le remplacer pour utiliser votre propre conception personnalisée.

 

Thèmes versus projets

Dans un projet SilverStripe conventionnel, le code et la logique métier (backend) d’un site Web sont conservés séparément de l’interface utilisateur et des éléments de conception (front-end). Plus spécifiquement, les classes PHP et les fichiers de configuration sont conservés dans le répertoire du projet , tandis que les modèles sont conservés dans le répertoire du thème .

Dans une installation par défaut de SilverStripe, votre répertoire de projet s’appelle mysite / et réside à la racine du projet. Cependant, votre répertoire de thèmes sera situé à un niveau plus profond, sous le dossier themes / . Étant donné que la couche de code est séparée de l’interface utilisateur, un projet donné peut avoir plusieurs thèmes.

 

Construire la structure du thème

Nous pouvons créer un thème en ajoutant un nouveau dossier sous themes / . Le nom du dossier est arbitraire, mais ne doit comporter que des caractères alphanumériques, des tirets ou des traits de soulignement.

Sous le dossier de thèmes, nous pouvons créer de nouveaux dossiers pour nos modèles et ressources.

 

themes/
  my-theme/
    css/
    images/
    javascript/
    templates/
      Includes/
      Layout/

La plupart de ces dossiers sont auto-descriptifs, mais notez que les seuls dossiers avec des noms obligatoires sont templates/, ainsi que ses sous Includes/– Layout/dossiers.

 

Qu’en est-il / public /?

Vous avez peut-être remarqué que bon nombre des dossiers ci-dessus devraient être des ressources accessibles sur le Web. Dans l’ themes/annuaire, ils ne seront pas. Ce serait très bien si nous distribuions ce thème pour que d’autres l’installent sur leurs projets (par exemple, un thème de blog), car lors de l’installation, un plug-in composer spécial exposera toutes les ressources accessibles sur le Web au public/répertoire par le biais de liens symboliques. La plupart du temps, cependant, votre thème est une conception unique et personnalisée pour votre projet et ne sera pas distribué. Dans ce cas, nous devrions déplacer tous ces répertoires vers public/. Faisons cela.

Voici notre nouvelle structure:

 

public/
    css/
    images/
    javascript/
themes/
  my-theme/
    templates/
      Includes/
      Layout/

Utiliser le projet comme thème

Maintenant que nous avons migré toutes les ressources accessibles depuis le themes/répertoire public/, vous remarquerez peut-être que le répertoire du thème est plutôt clairsemé. C’est vraiment juste un support pour les modèles.

Nous pourrions le laisser tel quel, mais comme nous n’avons qu’un seul thème, le fait de conserver tous les modèles dans un endroit distinct ajoute probablement plus de temps d’organisation en plus qu’il n’en vaut la peine. Avançons l’ensemble de templates/répertoire dans notre répertoire de projet, mysite/.

 

public/
    css/
    images/
    javascript/
mysite/
  _config/
  code/
  templates/
    Includes/
    Layout/

Vous pouvez maintenant supprimer le themes/répertoire.

C’est tout à fait un changement préférentiel. Vous voudrez peut-être conserver les modèles themes/, et c’est bien. Sachez simplement que les tutoriels suivants supposent que vos modèles sont dans le répertoire de votre projet.

 

Garder le themes/répertoire

Si vous souhaitez continuer à utiliser le répertoire themes, vous devrez peut-être apporter quelques modifications à votre projet pour exposer ces fichiers sur le Web. Par exemple, vous devrez ajouter ceci à votre composeur racine.json pour chaque dossier contenant des fichiers publics.

 

{
    "extra": {
        "expose": [
            "themes/my-theme/css"
        ]
    }
}

 

Ensuite, si vous effectuez une mise à jour ou une exécution du composeur composer vendor-expose, vous verrez un dossier créé dans public/resources/themes/my-theme/csslequel vos fichiers CSS (et uniquement ces fichiers CSS) de votre thème seront disponibles sur le Web.

 

Création de votre premier modèle

Ensuite, nous allons créer le composant le plus fondamental d’un thème: un modèle. Dans SilverStripe, les modèles ne sont pas des documents HTML, mais plutôt du code PHP compilé à partir de la syntaxe de modèle propre à SilverStripe. Conformément à cette distinction clé, il est impératif que les fichiers de modèle utilisent l’ .ssextension.

Dans votre templates/répertoire, créez un fichier appelé Page.ss. Dans ce fichier, créez un document HTML de base.

 

<html>
  <body>
    <h1>Hello, world</h1>
  </body>
</html>

 

Pourquoi Page.ss? Une installation par défaut de SilverStripe est livrée avec un type de page appelé Page. Généralement, ce type de page est utilisé pour afficher la forme de contenu la plus élémentaire d’un projet. Un cas d’utilisation courant concerne la page «À propos de nous», ou même quelque chose de plus simple, tel que «Conditions générales».

 

Activer le thème

Pour activer le thème, nous allons devoir fouiller dans le répertoire du projet. Ouvrez le fichier theme.ymldans le mysite/_configrépertoire. Sous l’en-tête SilverStripe\View\SSViewer, prenez note du réglage pour themes. Tout ce que nous avons besoin de faire ici est de fournir la variable $publicsous forme de thème, de sorte que les ressources accessibles par le Web ne 404 pas dans certains cas.

 

SilverStripe\View\SSViewer:
  themes:
    - '$public'
    - '$default'

 

Si vous avez choisi de conserver votre themes/répertoire, vous devrez fournir le nom du thème dans cette liste.

 

SilverStripe\View\SSViewer:
  themes:
    - 'my-theme'
    - '$public'
    - '$default'

 

Dans ce fichier de configuration, le thème my-themereçoit la priorité la plus élevée. Si un modèle ne peut pas être trouvé dans ce thème, SilverStipe continuera à travailler en bas de la liste, en essayant chaque thème jusqu’à ce qu’il trouve une correspondance. En guise de solution de rechange, vous souhaiterez avoir $defaultla dernière entrée de votre liste pour vous assurer que les modèles de base sont chargés.

N’oubliez pas de?

Ces fichiers sont écrits en YAML, qui est un langage de balisage, très similaire à JSON ou XML, très bien documenté . La configuration est un sujet très riche dans SilverStripe que nous aborderons dans des tutoriels ultérieurs, mais pour le moment, le seul élément important que vous devez savoir est que toutes les modifications que vous apportez à ces fichiers nécessitent une actualisation de la mémoire cache pour être utilisées. Pour effacer le cache, accédez simplement à n’importe quelle page de votre site et ajoutez? Flush à l’URL, par exemple:http://{your localhost}/tutorial/public/?flush

Une fois la page chargée, vous devriez voir votre modèle de page «Hello, world».

 

Renommer le projet

Ceci est une autre amélioration entièrement facultative qui varie en fonction des préférences du développeur. Le projet par défaut, “monsite”, est un peu ironique, et a la connotation d’un projet de bac à sable qui ne sera jamais mis en production. De plus, comme il commence par la lettre “m”, il est enterré à un endroit peu commode dans la liste des répertoires. Il est assez courant pour les développeurs de changer le nom du projet en quelque chose comme “app”, ce qui est cohérent avec les autres frameworks et présente l’avantage de figurer en haut de la liste de vos répertoires, ce qui vous fera économiser de précieuses secondes dans votre éditeur de code.

Pour renommer le projet, changez d’abord le nom du répertoire lui-même. Ensuite, par souci de cohérence, passez _config/mysite.ymlà _config/app.yml. Enfin, ouvrez ce fichier et enregistrez le projet comme “app”.

 

---
Name: myproject
---
SilverStripe\Core\Manifest\ModuleManifest:
  project: app

Encore une fois, ce changement est entièrement facultatif. Si vous choisissez de ne pas le faire, sachez que les prochains tutoriels supposent que votre projet est nommé app/.

Exécutez à ?flushnouveau pour mettre à jour la configuration.

Le vernis final

Comme nous avons renommé le projet de bout en bout mysite/afin app/de le rendre plus conforme aux normes communes, nous devons également remplacer le code/dossier par src/, qui est beaucoup plus courant et conforme à la plupart des modules SilverStripe, à la fois de base et supportés par la communauté. . Dans les futures versions de SilverStripe, attendez-vous à ce que le code/dossier soit supprimé en faveur de src/. À l’heure actuelle, il existe toujours pour des raisons d’héritage.

 

app/
  _config/
  src/
  templates/


Enfin, ajoutons une spécification de chargement automatique. SilverStripe a son propre chargeur automatique, cette étape est donc facultative, mais il est judicieux d’adopter des normes autant que possible. L'utilisation d'une déclaration standard d' autoloader PSR-4 contribuera à rendre votre projet plus interpolable et plus résistant aux mises à niveau. Les subtilités du chargement automatique du PSR-4 sont hors de portée de ce tutoriel, mais la documentation est très accessible et facile à comprendre. Fondamentalement, PSR-4 établit un contrat entre l’espace de noms d’une classe et son emplacement dans le système de fichiers.

Pour spécifier une déclaration de chargement automatique PSR-4, nous devons placer un composer.jsonfichier dans notre projet. C’est aussi généralement une bonne idée, dans l’esprit de rendre notre code aussi modulaire que possible.

app / composer.json

 

{
    "name": "silverstripe/lessons",
    "description": "The silverstripe.org lessons example code",
    "license": "BSD-3-Clause",
    "authors": [
        {
            "name": "Uncle Cheese",
            "email": "aaron@silverstripe.com"
        }
    ],
    "require": {
        "silverstripe/recipe-cms": "^1.1"
    },
    "autoload": {
        "psr-4": {
            "SilverStripe\\Lessons\\": "src/"
        }
    }
}

 

La plupart de ces informations sont remplies d’informations génériques, mais la section la plus importante est le "autoload":nœud. Il mappe l’espace de noms SilverStripe\Lessonsdans le répertoire src/. Si nous avions besoin d’un autre niveau d’espacement de noms, par exemple SilverStripe\Lessons\Controllers, nous placerions ces définitions de classe src/Controllers. Le PSR-4 n’est qu’une méthode simple pour rendre le chargement automatique plus prévisible et déterministe.

 

C’est tout

Nous avons maintenant créé notre premier projet. Cela nous met sur notre propre, et prêt à commencer à construire des choses.

TOUT VOIR Ajouter une remarque
VOUS
Ajoutez votre commentaire
 
© Academy EdTech. 2019 All rights reserved.
X