Ajout de champs personnalisés à une page

Dans la leçon précédente, nous avons développé une structure pour notre section Guides de voyage qui fournit une liste d'articles, avec chacun un lien vers leur propre page de détail. Cependant, la plupart de ces modèles sont encore codés en dur avec un contenu statique et doivent être intégrés au CMS. Dans cette leçon, nous allons voir comment ajouter des champs personnalisés à ces pages afin de les rendre plus vivants.

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

Faire l’inventaire des champs personnalisés

Dans la leçon précédente, nous avons développé une structure pour notre section Guides de voyage qui fournit une liste d’articles, avec chacun un lien vers leur propre page de détail. Cependant, la plupart de ces modèles sont encore codés en dur avec un contenu statique et doivent être intégrés au CMS. Dans cette leçon, nous allons voir comment ajouter des champs personnalisés à ces pages afin de les rendre plus vivants.

Regardons d’abord la page de liste et voyons si nous pouvons identifier certains champs qui devront être modifiables dans le CMS. À première vue, les champs suivants se démarquent:

La date de l’article : Chaque enregistrement est horodaté avec son heure de création, qui est contenue dans la $Createdvariable. Cela pourrait fonctionner à la rigueur, mais la plupart du temps, les auteurs de contenu voudront utiliser une date personnalisée pour les articles, car la date de création ne correspond pas nécessairement à leur publication sur le site. Nous devrons donc créer un champ personnalisé pour la date.

Le nombre de commentaires : nous pouvons ignorer celui-ci pour le moment, car cela sera traité lorsque nous ajouterons des commentaires aux articles.

La liste des catégories : C’est un autre élément que nous pourrons aborder dans une leçon à venir et qui traitera de la gestion des relations de données.

L’image : chaque article doit avoir sa propre image qui sera affichée sous forme de vignette dans la liste et de taille réelle dans la page de détail. Nous aurons besoin du CMS pour fournir un téléchargeur d’images pour chaque article, ce qui est un peu en dehors de la portée de cette leçon. Nous allons donc l’ignorer pour le moment.

Le teaser : Le court extrait de texte apparaissant dans la liste pour donner un aperçu du contenu de l’article est souvent appelé un “teaser”. Souvent, il ne s’agit que de la première phrase ou du premier paragraphe de l’article, mais pour permettre à l’auteur du contenu d’avoir plus de contrôle, nous fournissons un champ personnalisé pour l’annonce. S’il n’est pas renseigné, nous retomberons sur la première phrase de l’article. Cela couvrira bien nos bases.

En cliquant sur la page de détail, nous voyons qu’un champ supplémentaire a été ajouté pour l’ auteur du message.

 

Ajout de nouveaux champs de base de données

Puisque tous ces champs apparaissent dans les ArticlePage enregistrements, nous n’aurons besoin que de travailler avec cette classe.  N’oubliez pas que même si nous voyons les champs sur le ArticleHoldermodèle, cela ne signifie pas nécessairement que ces champs appartiennent à ArticleHolder. Dans ce cas, ils apparaissent dans une boucle d’ArticlePageenregistrements, c’est là que nous les définirons. Il est très important de maintenir une séparation conceptuelle claire entre le modèle et le modèle.

Définissons une nouvelle variable statique privée dans ArticlePage.phpappelé $db.  Définissez-le sur un tableau vide.

 

class ArticlePage extends Page 
{

  private static $db = [];

}

 

Le $dbtableau est la pierre angulaire de la modélisation des données dans SilverStripe. Sa fonction est assez simple: il mappe un nom de champ sur un type de champ. Ainsi , les clés du tableau vont représenter les variables que vous pouvez invoquer sur l’objet, tels que $Content$Title, etc., et les valeurs du tableau sera le type de champ. Nous parlerons davantage des types de champs dans un instant, mais pour le moment, peuplons ce tableau avec les champs dont nous avons besoin.

 

class ArticlePage extends Page 
{

  private static $db = [
    'Date' => 'Date',
    'Teaser' => 'Text',
    'Author' => 'Varchar',
  ];

 

Nous avons défini un champ appelé $Datequi stockera, de manière appropriée, la date. Le $Teaserchamp sera un texte simple, et le $Authorchamp sera également du texte, mais comme nous savons qu’il contiendra une courte chaîne de caractères (le nom d’une personne), nous pouvons le déclarer comme un mot-clé Varcharqui, par défaut, est limité à 100 caractères.

Depuis que nous avons modifié la base de données, exécutons-le /dev/build et voyons un texte en vert indiquant que de nouveaux champs ont été créés.

 

A propos des types de champs

Si vous avez fait un peu de base de données, vous êtes probablement familier avec les types de champs.  En un mot, c’est un peu de métadonnées qui indique à la base de données quel type de données sera stocké dans une colonne donnée.  Il y a plusieurs raisons pour lesquelles c’est une bonne idée. Premièrement, il ne serait pas logique d’allouer la même quantité de mémoire à un champ qui ne contiendra jamais qu’un code postal, contrairement à un champ contenant 100 000 mots de contenu.  Deuxièmement, en affectant un type de champ, la base de données peut interagir avec chaque colonne à sa manière. Par exemple, deux champs de date se comparent différemment de deux champs de texte, et essayer de stocker le texte “lol fail” dans un champ décimal va simplement … échouer.

 

Les types de champs communs dans MySQL incluent:

  • Varchar : une chaîne de caractères, de longueur variable
  • Boolean : valeurs true ou false
  • Entier : Un nombre, sans décimales
  • Date : l’année, le mois et le jour

Et beaucoup plus encore.

SilverStripe place sa propre couche d’abstraction sur ces types de champs de base de données. Alors que beaucoup d’entre eux se chevauchent, tels que “Varchar”, “Boolean” et “Date”, beaucoup d’entre eux sont également uniques au cadre SilverStripe. En effet, un type de champ dans SilverStripe indique non seulement à la base de données comment stocker les données, mais également comment le modèle doit afficher les données. Par exemple, un champ avec le type Textéchappera à tout code HTML, mais HTMLText ne le fera pas. Dans la base de données, ils sont tous deux stockés sous Text, mais le type de champ personnaliséHTMLText a un effet très important sur la manière dont SilverStripe gère le rendu des données. Nous parlerons davantage de toutes les fonctionnalités offertes par les types de champs personnalisés dans les prochaines leçons, mais pour le moment, il est important de garder à l’esprit le type de données que vous vous attendez à stocker dans chaque champ et la façon dont vous les afficherez.

Alors, comment savoir quels types de champs sont disponibles? Votre meilleure ressource dans ce cas est le code source. Il suffit de parcourir framework/src/ORM/FieldTypeet vous verrez une liste de classes PHP dont les noms peuvent tous être utilisés comme types de champs. Dans la version 4, ils incluent:

 

  • DBBigint
  • DBBooléen
  • DBClassName
  • DBComposite
  • DBCurrency
  • DBDate
  • DBDatetime
  • DBDecimal
  • DBDouble
  • DBEnum
  • DBField
  • DBFloat
  • DBForeignKey
  • DBHTMLText
  • DBHTMLVarchar
  • DBIndexable
  • DBInt
  • DBLocale
  • DBMoney
  • DBMultiEnum
  • DBPourcentage
  • DBPolymorphicForeignKey
  • DBPrimaryKey
  • DBString
  • DBText
  • DBTime
  • DBVarchar
  • DBYear

 

Notez que bien que tous ces types de champs soient préfixés avec DB, la plupart d’entre eux sont aliasés de sorte qu’ils fonctionneront dans le $dbtableau sans ce préfixe, par exemple, ils SilverStripe\ORM\FieldType\DBVarcharpeuvent simplement être référencés Varchar.

Cela semble un peu intimidant, mais soyez assuré que dans 90% des cas, vous utiliserez l’un des six ou sept types de champs courants.

 

Ajout d’une interface CMS

Notre base de données est prête à stocker ces nouveaux champs sur notre type de page. Il est donc temps d’offrir à l’utilisateur un moyen de remplir ces champs dans le CMS. Une fois encore, nous traiterons strictement avec la classe ArticlePage .

Définissons une nouvelle méthode qui expose l’API pour la mise à jour de l’interface CMS pour cette page.

 

class ArticlePage extends Page 
{
  private static $db = [
    'Date' => 'Date',
    'Teaser' => 'Text',
    'Author' => 'Varchar',
  ];

  public function getCMSFields() 
  {
    $fields = parent::getCMSFields();

    return $fields;
  }

 

La méthode getCMSFieldsest ce que le CMS appelle pour créer tous les onglets et champs que nous voyons dans l’interface d’édition. Il devrait retourner un FieldListobjet. En stockant le résultat de parent::getCMSFields()dans une variable, nous pouvons commencer par tous les champs de la classe parente. Si nous avons sauté cette étape, la page manquerait de nombreux domaines critiques, tels que le titre, ContentURLSegment, etc. On peut toujours supprimer certains de ces champs coup par coup, mais il est préférable de commencer avec tout dans la classe parent et que nos changements de là .

Dans ce cas, nous allons vouloir trois nouveaux champs. Utilisons l’ FieldListAPI pour ajouter de nouvelles entrées de formulaire.

 

use SilverStripe\Forms\DateField;
use SilverStripe\Forms\TextareaField;
use SilverStripe\Forms\TextField;

// ...

  public function getCMSFields() 
  {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Main', DateField::create('Date','Date of article'));   
    $fields->addFieldToTab('Root.Main', TextareaField::create('Teaser'));
    $fields->addFieldToTab('Root.Main', TextField::create('Author','Author of article'));

    return $fields;
  }

 

Passons en revue cette étape par étape:

addFieldToTab (‘Root.Main’) : les onglets d’une liste de champs sont identifiés à l’aide d’une syntaxe séparée par des points. En effet, les onglets peuvent être imbriqués dans d’autres, et il serait fastidieux de creuser à travers plusieurs niveaux pour obtenir le jeu d’onglets que vous souhaitez ajouter. L’identificateur de chaîne séparé par des points vous permet de parcourir le jeu d’onglets de manière ancestrale, le niveau le plus élevé se trouvant à gauche et l’onglet auquel vous souhaitez ajouter étant entièrement à droite. L’onglet ‘Racine’ est le jeu d’onglets de niveau le plus élevé attribué à toutes les pages. La plupart des champs du CMS se trouvent dans l’onglet “Principal”, notamment Titre, MenuTitre et Contenu, mais si vous deviez choisir un nom quelconque, tel que “Root.Sausages”, la liste de champs créerait automatiquement ce nouvel onglet.

[SilverStripe\Forms\FormField]::create () : chaque entrée de formulaire a sa propre classe dans SilverStripe et le nombre de champs de formulaire disponibles dépasse de loin ceux se trouvant dans la spécification HTML5, par exemple l’éditeur de texte enrichi voir dans le CMS est un HtmlEditorField. Les champs de formulaire ne concernent pas tant l’abstraction HTML que la création d’une interface utilisateur pour stocker des données. Il n’est pas rare dans un projet SilverStripe de créer vos propres champs de formulaire personnalisés offrant la riche expérience d’édition que vous souhaitez.

Le premier argument du constructeur de champ de formulaire est le nom du champ. Cela devrait correspondre exactement au $dbchamp dans lequel vous enregistrez. Le deuxième argument est une étiquette facultative pour le champ. Si elle est laissée nulle, l’étiquette sera le nom du champ, comme nous le voyons dans le cas de notre Teaserchamp.

Entrons dans le CMS et éditons n’importe quelle page d’article. Notez nos nouveaux champs au bas de la page. Essayez de les remplir et assurez-vous que cela enregistre l’état.

Nous pouvons aborder ici quelques problèmes d’utilisabilité. La première est que les champs sont tous épinglés au bas de la page, sous l’éditeur de contenu, ce qui rend la recherche difficile pour l’utilisateur. Heureusement, la addFieldToTab()méthode accepte un argument facultatif pour spécifier un champ existant avant le nouveau champ. Dans ce cas, nous voulons ces champs avant le Contentchamp.

 

  public function getCMSFields() 
  {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Main', DateField::create('Date','Date of article'),'Content');
    $fields->addFieldToTab('Root.Main', TextareaField::create('Teaser'),'Content');
    $fields->addFieldToTab('Root.Main', TextField::create('Author','Author of article'),'Content');

    return $fields;
  }

 

Deuxièmement, l’utilisateur ne comprend peut-être pas ce que veut dire “bande-annonce”. Ajoutons un texte d’aide.

 

  public function getCMSFields()
  {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Main', DateField::create('Date','Date of article'), 'Content');
    $fields->addFieldToTab('Root.Main', TextareaField::create('Teaser')
     ->setDescription('This is the summary that appears on the article list page.'),
        'Content'
    );
    $fields->addFieldToTab('Root.Main', TextField::create('Author','Author of article'),'Content');

    return $fields;
  }

 

Chaque champ de formulaire expose une API publique que vous pouvez utiliser pour configurer le champ. D’autres méthodes utiles incluent setMaxLength()or setRows()et setCols()for textareas.

Rechargez l’écran d’édition dans le CMS et vérifiez que nos modifications ont pris effet.

Ajout des champs au modèle

La majeure partie du travail est terminée maintenant. Il est temps d’insérer toutes les variables dans nos modèles pour extraire le contenu du CMS. Dans ArticleHolder.sset ArticlePage.ssremplacer toutes les références à la date avec $Date, l’auteur $Authoret le teaser avec $Teaser. Rechargez la page pour voir les articles qui sont tirés dans le nouveau contenu.

L’un des problèmes que nous pouvons constater est que la date n’est pas formatée comme elle le devrait. Depuis que nous avons défini le champ comme Date, nous avons un certain contrôle sur celui-ci au niveau du modèle. La méthode Long nous donnera ce dont nous avons besoin. Remplacez $ Date par $Date.Long.

Un certain nombre d’autres méthodes sont disponibles dans la classe Date pour vous aider à obtenir le format souhaité. Vous pouvez essayer $Date.Nice, ou, si vous êtes aux États-Unis, $Date.NiceUSde choisir un format qui met le mois en premier. Si tout échoue, vous pouvez toujours invoquer, $Date.Formatce qui expose essentiellement la méthode date () de PHP, vous permettant ainsi de transmettre une chaîne de texte pour obtenir le format dont vous avez besoin.

Enfin, nous avons dit précédemment que nous aimerions que l’objet teaser soit un champ facultatif, reprenant la première phrase du contenu s’il n’est pas rempli. Réglons cela.

 

    <div class="info-blog">
      <ul class="top-info">
        <li><i class="fa fa-calendar"></i> July 30, 2014</li>
        <li><i class="fa fa-comments-o"></i> 2</li>
        <li><i class="fa fa-tags"></i> Properties, Prices, best deals</li>
      </ul>
      <h3>
        <a href="$Link">$Title</a>
      </h3>
        <% if $Teaser %>
          <p>$Teaser</p>
        <% else %>
          <p>$Content.FirstSentence</p>
        <% end_if %>
    </div>

 

Tous les types de champs à base de texte dans les méthodes d’offre SilverStripe tels que FirstSentenceFirstParagraphLimitCharacterCountet plus, pour vous donner un certain contrôle sur la présentation du modèle. L’utilisation de ces méthodes pour créer des teasers est très courante.

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