Catégories
Astuces et Design

Soyez opérationnel avec Craft CMS – Smashing Magazine

Le choix du CMS à utiliser dans votre prochain projet de développement est une décision cruciale pour toute entreprise, grande ou petite. Dans ce guide, nous allons explorer le potentiel de Craft CMS, en configurant un environnement local et en créant un blog cat de base avec un point de terminaison API pour l'accompagner. C’est un point de départ idéal pour tous ceux qui souhaitent se développer à partir de leur système CMS actuel ou faire le saut depuis WordPress.

Le choix du CMS à utiliser dans votre prochain projet de développement est une décision cruciale pour toute entreprise, grande ou petite. Dans ce guide, nous allons explorer le potentiel de Craft CMS, en configurant un environnement local et en créant un blog cat de base avec un point de terminaison API pour l'accompagner. C’est un point de départ idéal pour tous ceux qui souhaitent se développer à partir de leur système CMS actuel ou faire le saut depuis WordPress.

Craft CMS vous est présenté par les talents de Pixel & Tonic. Il est activement maintenu et maintenu en phase avec les changements dans le monde du développement Web moderne et gagne en popularité parmi les CMS – avec une liste de clients impressionnante telle que Netflix. Il dispose également d'un serveur Discord très actif, atteignant plus de 5 000 membres en un an seulement après sa mise en ligne.

Pourquoi utiliser Craft CMS?

Craft CMS est notre CMS de référence depuis environ quatre ans maintenant; nous avons créé des sites Web clients et même notre propre entreprise sur Craft. En tant qu'entreprise, nous vérifions constamment le marché des CMS et nous sommes toujours revenus chez Craft. Voyons donc les raisons pour lesquelles nous avons choisi Craft CMS plutôt que les autres sur le marché:

  • Connaissance de l'interface, ce qui le rend assez facile pour quiconque vient de WordPress.
  • Communauté de développement active.
  • Champs flexibles, vous permettant de contrôler la structure de votre contenu.
  • Pas de blocage ni de frais mensuels. Juste des frais uniques si vous optez pour le Pro / eCommerce.
  • Extensibilité avec la boutique de plugins en pleine croissance de Craft.

Donc, avec l'introduction à l'écart, je vais vous montrer comment être opérationnel avec un environnement local Craft CMS entièrement configuré en environ quinze minutes. Une fois que nous aurons terminé les étapes suivantes, vous devriez avoir une bonne base pour démarrer votre prochain projet Web et, espérons-le, être prêt à quitter WordPress pour de bon.

Installation de notre environnement de développement

Craft CMS est livré avec un outil très pratique pour configurer votre environnement local. Cet outil s'appelle Craft Nitro et simplifie la configuration d'un environnement Craft CMS. C'est nouveau sur la scène artisanale, mais cela aide beaucoup.

Configuration du multipass

Craft Nitro nécessite quelque chose appelé Multipass qui crée une machine virtuelle Ubuntu sur votre système. (Ne vous inquiétez pas, vous n'aurez pas besoin de configurer ni d'ouvrir Ubuntu.)

  • Téléchargez le dernier programme d'installation de Multipass pour votre système d'exploitation sur le site officiel.
  • Une fois téléchargé, exécutez le programme d'installation. Lorsque cela est terminé, vous devriez être prêt à passer à l'étape suivante.

Configuration de Craft Nitro

La configuration de Craft Nitro est simple et implique un script de ligne de commande pour l'installer sur macOS et Linux, mais pour Windows, c'est un peu différent. Je vais vous expliquer comment le configurer pour les deux types de système d'exploitation ci-dessous. La bonne nouvelle est qu’une fois la configuration terminée, vous serez en mesure de créer facilement de nouvelles installations Craft sans avoir à recommencer.

Installation sur macOS et Linux

Ouvrez votre terminal et collez la ligne de script suivante. Une fois collé, suivez les invites d'option sur la ligne de commande pour créer votre machine virtuelle avec les préréglages de Craft Nitro. Cela devrait être parfait, mais si vous avez envie de peaufiner, allez-y. Gardez simplement à l'esprit que Craft a des exigences minimales pour fonctionner correctement.

Exécutez la ligne suivante dans Terminal:

bash 

Installation sur Windows 10 Professionnel

L'installation sous Windows est assez complexe, mais ne devrait pas prendre trop de temps pour être opérationnel. Assurez-vous simplement que Hyper-V est activé. Malheureusement, Hyper-V ne peut pas être installé sur la version Home Edition de Windows.

  1. Assurez-vous que Hyper-V est activé (plus de détails ici);
  2. Télécharger nitro_windows_x86_64.zip à partir de la dernière version;
  3. Créez un dossier Nitro dans votre home dossier s'il n'existe pas déjà (c.-à-d. C:UsersNitro);
  4. Extrayez le fichier zip et copiez nitro.exe dans le dossier Nitro que vous venez de créer dans votre dossier personnel;
  5. S'il s'agit de votre première installation, exécutez-la à partir de la ligne de commande pour ajouter Nitro à votre chemin global:
    setx path "%PATH%;%USERPROFILE%Nitro"
  6. Démarrez le terminal Windows (cmd.exe) avec des autorisations d'administrateur et exécutez Nitro dedans.

Une fois que vous avez terminé ce qui précède, suivez les instructions du terminal pour créer votre première machine. Les préréglages par défaut de Craft Nitro devraient être parfaitement adaptés à votre environnement.

Installer Craft CMS

Jusqu'à présent, nous avons installé Craft Nitro et créé notre machine virtuelle, et nous sommes maintenant prêts à installer Craft CMS. Dans les instructions suivantes, nous allons télécharger Craft et «monter» nos fichiers, ce qui nous permet de développer dans notre système actuel et de voir les changements reflétés dans notre machine virtuelle Ubuntu. Nous allons également configurer notre base de données initiale et obtenir un domaine local que nous pouvons utiliser, par exemple myfancyproject.test. Allons-y:

Créer un nouveau projet

  1. Créez un nouveau dossier dans lequel vous souhaitez développer / installer Craft;
  2. Téléchargez Craft CMS à partir de la dernière version (via Composer ou Zip);
  3. Décompressez / déplacez le contenu dans le dossier que nous venons de créer;
  4. Terminal ouvert / ligne de commande;
  5. Accédez à notre dossier créé. $ cd /path/to/project;
  6. Courir nitro add;
  7. Suivez les invites de la ligne de commande à l'écran. (Les préréglages sont généralement corrects mais modifient à votre guise.)

Pointe: Si vous rencontrez des problèmes "Non lisibles" sur macOS, Multipass doit disposer d'un accès complet au disque. Pour ce faire, assurez-vous que multipassd est coché sous Préférences système → Sécurité et confidentialité → Confidentialité → Accès complet au disque.

Connexion à notre base de données

Nous devrions maintenant avoir un domaine de test et nos fichiers de projet montés – je sais, assez facile jusqu'à présent, et c'est le plus difficile. La connexion à notre base de données nous oblige à ajouter les détails de notre base de données pour notre site nouvellement créé dans notre projet .env fichier.

  1. Ouvrez notre projet .env fichier (situé dans le dossier racine);
  2. Modifiez les détails de la base de données comme suit:
    DB_USER="nitro"
        DB_PASSWORD="nitro"
        # 'nitro' is the default database
        DB_DATABASE="nitro"
    

Pointe: Si vous souhaitez ouvrir la base de données dans le programme SQL de votre choix, tout ce que vous avez à faire est d'exécuter nitro info dans votre ligne de commande et vous verrez l'adresse IP de votre base de données sous «IPV4». Utilisez le nom d'utilisateur et le mot de passe ci-dessus (ainsi que le port que vous avez sélectionné lors de la configuration) pour vous connecter.

Installez Craft CMS

Nous avons configuré notre machine virtuelle, défini notre domaine de test et préparé notre base de données. Il est maintenant temps d'installer Craft CMS et d'entrer dans la section d'administration – tout devrait se dérouler en douceur à partir d'ici. Alors allons-y.

  1. Dirigez-vous vers le domaine de test que vous avez défini lors de la configuration, suivi de /admin (par exemple. testdomainyouset.test/admin);
  2. Vous devriez voir l'écran d'installation de Craft CMS (Hourra!);
  3. Suivez les instructions du programme d'installation à l'écran;
  4. Une fois terminé, vous devriez être redirigé vers votre nouveau panneau d'administration.

Pointe: Si vous n’avez pas installé Craft via Composer, vous serez peut-être invité à saisir une clé de sécurité. Pour générer une clé sécurisée par cryptographie, utilisez un gestionnaire de mots de passe tel que 1Password / LastPass. (Il n'y a pas de limite de longueur, donc cela peut être aussi complexe que vous le souhaitez). Ouvrez à nouveau notre fichier .env, trouvez la ligne suivante SECURITY_KEY="", collez votre clé générée entre les guillemets et enregistrez.

(Grand aperçu)

Vous devriez maintenant avoir un environnement de développement local entièrement configuré pour Craft CMS, qui fournira un excellent point de départ pour tout ce que vous essayez de développer, qu'il s'agisse de déplacer votre blog de chat de WordPress ou de créer une boutique de commerce électronique. N'oubliez pas d'éteindre votre serveur une fois que vous avez fini d'utiliser arrêt nitro dans votre ligne de commande.

Voici quelques commandes utiles pour Craft’s Nitro qui vous aideront pendant le développement:

  • nitro start (démarre le serveur de développement)
  • nitro stop (arrête le serveur de développement)
  • nitro context (vous montre des informations sur les environnements installés)
  • nitro info (informations sur l'environnement actuel, la version PHP, etc.)

Configurer notre blog sur les chats

Maintenant que Craft est opérationnel, nous pouvons commencer sur notre blog pour chats et commencer à profiter de la puissance que Craft nous offre. Dans cette section, nous allons configurer notre modèle de contenu, créer notre modèle de thème de base et créer notre page d'accueil et nos pages internes.

Les modèles de contenu semblent effrayants, mais dans Craft, c'est le contraire. il y a un système GUI facile à utiliser – pas besoin de code complexe ici! Pour notre blog sur les chats, nous devons mettre en place une section intitulée "Chats" qui nécessite le nom du chat, une photo et une petite description, puis une seule page "Page d'accueil".

Comment créer des sections et des pages
Comment créer un poteau de chat

Comment créer des sections et des pages

Nous allons créer notre section "Chats" et notre page d'accueil qui seront classées comme "single" dans la langue de Craft. Les sections sont exactement ce à quoi elles ressemblent – des sections de votre site Web – et les pages sont également des pages simples et explicites de votre site Web, telles que les mentions légales et notre page d'accueil.

Création de notre section chats
  1. Allez dans Paramètres dans le menu de gauche;
  2. Cliquez sur «Sections»;
  3. Cliquez sur «Nouvelle section»;
  4. Dans le "Nom", mettez Cats;
  5. Type de section Channel
    (Les canaux sont utilisés pour les flux de contenu similaire, tout comme nos chats.)
  6. Dans "Entry URI Format", nous allons nous assurer qu'il est /cats/{slug};
  7. Dans "Modèle", nous allons mettre cat;
  8. Sauver.

Ce que nous avons fait ci-dessus, c'est dire à Craft que nous souhaitons que tout message de la section Chats ait un format d'URL comme celui-ci: ourtestdomain.test/cats/fluffy, et le modèle que nous aimerions utiliser est cats.twig.

Créer notre page d'accueil
  1. Dans «Sections», cliquez sur «Nouvelle section»;
  2. Dans le "Nom", mettez Homepage;
  3. Type de section Single;
  4. Cochez la case «Page d'accueil»;
  5. Dans "Modèle", nous allons mettre index;
  6. Sauver.
Créer des champs

Craft est livré sans préjugés sur ce que vous voulez construire; cela vous donne une ardoise complètement vierge. Nous créons exactement ce que nous voulons que la structure de notre publication soit en générant nos propres «champs». Créons les "champs" de notre chat pour le nom, la description et la photo suivants.

  1. Rendez-vous dans la section admin de votre site en visitant yourchosendomain.test/admin;
  2. Accédez à Paramètres dans le menu de gauche;
  3. Cliquez sur «Champs»;
  4. En haut à droite, cliquez sur «Nouveau champ».
(Grand aperçu)
Configurer le nom du chat

Nous allons avoir besoin d'un nom pour nos chats, alors créons un name champ.

  • dans le Nom mettez "Nom du chat";
  • Choisissez "Texte brut" dans le type de champ;
  • Maintenant, économisez.
Configuration de la description du chat

Nos chats ont également besoin d'une description, mais limitons le nombre de caractères que nos auteurs peuvent saisir pour chaque chat.

  • Cliquez à nouveau sur «Nouveau champ»;
  • Dans le nom, mettez «Description du chat»;
  • Choisissez à nouveau le type de champ «Texte brut»;
  • Créez une limite en ajoutant «2000» dans la case Limite de champ;
  • Cliquez sur Enregistrer.
Configurer la photo du chat

Nous allons vouloir ajouter des photos à chacun de nos messages de chat, et il peut y avoir plusieurs photos par chat – pas de problème. Mais avant de créer un champ, nous devons indiquer à Craft où nous voulons que les photos soient stockées sur notre serveur. (Craft a également la possibilité de télécharger sur des solutions de stockage Cloud.)

  • Dirigez-vous vers «Paramètres» dans le menu de gauche;
  • Cliquez sur «Actifs»;
  • Cliquez sur «Nouveau volume»;
  • Dans le nom, mettez "Photo du chat";
  • Activez «Les éléments de ce volume ont des URL publiques»;
  • Dans "URL de base", mettez @web/uploads/;
  • Dans "File System Path", mettez @webroot/uploads/;
  • Sauver.

Les propriétés ci-dessus indiquent à Craft où nous souhaitons que nos fichiers téléchargés soient stockés. Vous pouvez les changer comme vous le souhaitez. Vous pouvez également en savoir plus sur la définition des variables d'environnement pour ces derniers dans la documentation.

Faire correspondre le champ aux sections

Maintenant que nos champs et nos sections sont configurés et exécutés, nous allons devoir combiner les deux en attribuant les champs que nous souhaitons que nos sections contiennent. C'est aussi simple que de glisser-déposer dans Craft.

  • Dirigez-vous vers les paramètres;
  • Cliquez sur «Sections»;
  • Cliquez maintenant sur «Modifier le type de section»;
  • Cliquez maintenant sur notre section «Chats»;
  • Sélectionnez l'onglet «Champs» dans le menu de droite;
  • Traîne sur les champs «Chats» que nous avons précédemment créés dans le volet de contenu;
  • Une fois traîné, enregistrez la section des chats.
(Grand aperçu)

Pointe: Vous pouvez supprimer le champ "Titre" de nos articles en désactivant l'option "Afficher le champ Titre". Vous voudrez peut-être le nom du chat comme titre par exemple.

Comment créer un poteau de chat

Il est maintenant temps pour nous de créer un poteau de chat moelleux. Dirigez-vous vers les «Entrées» dans le menu d'administration de gauche.

  • Cliquez sur «Nouvelle entrée»;
  • Dans le menu déroulant, sélectionnez «Chats»;
  • Créez votre message! (Le plus moelleux, mieux c'est.)
Liste de nos articles sur les chats

Maintenant que notre modèle de contenu est terminé, nous pouvons commencer à créer l'interface de base de notre blog de chat. Craft est écrit dans le langage Twig / Liquid. Si vous avez déjà essayé le développement de Shopify, cela devrait vous être familier; sinon, il est assez facile à récupérer. Mais d'abord, nous devons ouvrir notre dossier d'installation Craft dans notre éditeur de code préféré (où vous avez décompressé l'installation de Craft).

  1. Ouvrez Craft Install dans votre éditeur de code;
  2. Créez un nouveau fichier dans les modèles appelé index.twig
    (Craft peut avoir installé un index par défaut. Ouvrez-le à la place et essuyez-le.)
  3. Ajoutez le code suivant:



  




{# Créer une requête d'entrée avec les paramètres "section" et "limit" #}
{% set myEntryQuery = craft.entries ()
    .section ('chats')
    .limit (10)%}

{# Récupérer les entrées #}
{% set entries = myEntryQuery.all ()%}

{# Afficher les entrées #}

{% pour l'entrée dans les entrées%}
{% endfor%}

Dans le code ci-dessus, nous informons Craft de notre section «Chats» et limitons les publications à 10. Ensuite, nous récupérons les entrées de cette section et continuons à boucler sur chacun des chats dans les entrées de récupération dans le code suivant . Les images sont un peu différentes dans Craft: elles sont stockées sous forme de tableau, nous faisons donc une autre boucle dans notre code pour obtenir les images des chats.

Testons

Ouvrez votre URL de développement de test que nous avons créée lors de la configuration. (Assurez-vous que votre serveur nitro fonctionne en utilisant nitro start). Nous devrions maintenant voir les articles que nous avons créés affichés sur notre page d'index. Cliquer pour afficher plus d’informations nous donne une erreur 404, alors corrigeons la prochaine fois!

(Grand aperçu)

Pointe: Nous avons inclus Bootstrap pour le rendre un peu plus sophistiqué, mais n'hésitez pas à inclure n'importe quel framework que vous souhaitez.

Page de publication de chat

Nous allons faire la même chose que nous l'avons fait avec la page d'index. Créons le cat template en créant un nouveau fichier dans le dossier Templates appelé cat.twig. Comme nous sommes déjà dans le Entry contexte, nous n’avons pas à le réinterroger.


  
    
    {% block content%}
  
      {% set catImage = entry.catsPhoto.one ()%}
      {% if catImage%}
        ...
      {% fin si %}
  
      {{entry.title}}
      {{entry.catsName}}
      {{entry.catsDescription}}
      
    {% endblock%}
  

Enregistrez ceci et actualisez notre site Web de développement de tests. Nous devrions maintenant pouvoir accéder à notre page d'entrée sur les chats! Voila!

Aller sans tête

Si vous avez envie d'aller plus technique avec Craft et de l'utiliser comme système de gestion de contenu pour alimenter votre application Web, vous pouvez le faire en utilisant le package Pro de Craft CMS qui ajoute des comptes d'utilisateurs et GraphQL à votre configuration. La version Pro de Craft est gratuite à tester et à tester, ce qui signifie que vous pouvez lui faire un test approfondi avant de vous engager. Nous allons maintenant expliquer comment configurer une API GraphQL de base à l'aide de l'éditeur GraphQL intégré de Craft.

Démarrez Pro Trial

Une fois que vous avez installé Craft CMS, rendez-vous dans le "Plugin Store" et recherchez "Upgrade" dans les options du menu de gauche. Cliquez sur «Essai» dans la section «Pro» et exécutez le processus de mise à niveau.

La configuration de base

Une fois que vous avez commencé votre essai de Pro Craft CMS, vous devriez maintenant remarquer une nouvelle option de menu dans votre panneau latéral d'administration: GraphQL. Avant de nous lancer directement, nous avons besoin de modèles de contenu qui peuvent former la sortie. Lorsque vous avez créé vos modèles de contenu, Craft CMS vous créera automatiquement une API GraphQL prête à l'emploi. Pas besoin de définir les schémas non plus!

Créez votre point de terminaison d'API Cat

Nous avons trié notre contenu; maintenant, nous voulons créer le point de terminaison afin que nous puissions récupérer tout notre contenu de chat mignon. Faisons cela maintenant:

  1. Ouvrez votre projet Craft CMS routes.php dans votre IDE.
  2. L'ajout de la règle suivante rendra votre point de terminaison API disponible sur http://yourprojecturl.test/api:
    return (
        'api' => 'graphql/api',
        // ...
    );
    
  3. Sauver et fermer.
  4. Testez en envoyant une requête ping au point de terminaison:
    curl -H "Content-Type: application/graphql" -d '{ping}' http://yourprojecturl.test/api
  5. Vous devriez recevoir «pong» en réponse.

Activez votre contenu

Nous avons configuré notre point de terminaison pour recevoir les demandes. Il est maintenant temps pour nous d'activer / désactiver certaines parties de notre site que nous souhaitons rendre disponibles via notre API. Par exemple, vous souhaiterez peut-être désactiver certaines entrées contenant des informations sensibles. Craft rend ce processus extrêmement facile; c'est un cas de cocher / décocher. (Vous pouvez devenir plus complexe en écrivant également vos propres schémas.) Pour l'instant, nous allons créer un schéma public accessible au public. Vous pouvez créer des schémas privés qui nécessitent une clé secrète, mais cela est hors de portée de ce guide.

  1. Rendez-vous dans la section GraphQL via la barre latérale de votre panneau d'administration;
  2. Cliquez sur «Schéma public»;
  3. Activez la section «Chats».
    (Cela rendra notre contenu disponible via votre point de terminaison.)
  4. Sauver.
(Grand aperçu)

Tester notre point de terminaison

Maintenant que nous avons choisi les données que nous souhaitons rendre disponibles via notre point de terminaison, il est maintenant temps de les tester. Dans la liste déroulante GraphQL de votre panneau d'administration de gauche, vous remarquerez un élément appelé "GraphiQL". GraphiQL nous permet d'explorer notre API et de l'interroger dans notre tableau de bord.

  1. Ouvrez GraphiQL;
  2. Remplacez «Schéma complet» par «Schéma public»;
  3. Écrivez la requête GraphQL suivante dans le volet de gauche:
    query ($section: (String), $orderBy: String) {
      entries(section: $section, orderBy: $orderBy) {
        title
        slug
        id
      }
    }
    
  4. Cliquez sur le bouton "Play".

Pointe: Si vous n'êtes pas à 100% sur les requêtes GraphQL, ce n'est pas un problème; Craft est livré avec un guide pratique pour vous aider.

Emballer

Nous avons maintenant fait une plongée assez légère dans le monde de Craft CMS. Résumons ce que nous avons accompli dans le guide suivant:

  • Mettre en place un environnement de développement local avec Multipass;
  • Création et mise en place d'une toute nouvelle installation Craft;
  • Ajout d'un domaine de test dans lequel nous pouvons accéder à notre installation;
  • Créé un joli blog sur les chats;
  • Parti sans tête;
  • Création d'un point de terminaison API pour accéder à nos chats.

Si vous souhaitez vous impliquer davantage avec Craft CMS et faire partie de la communauté, vous devriez rejoindre le serveur Craft Discord très actif et en savoir plus via la documentation officielle.

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *