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 cherchent à se développer à partir de leur système CMS actuel ou à passer de WordPress.

Craft CMS vous est proposé 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 impressionnante de clients tels que Netflix. Il dispose également d'un serveur Discord très actif qui compte plus de 5 000 membres en un an seulement.

Pourquoi utiliser Craft CMS?

Craft CMS est notre CMS de référence pour 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. Alors, passons aux 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 donnant le contrôle sur la façon dont votre contenu est structuré.
• Pas de blocage ni de frais mensuels. Juste des frais uniques si vous passez à Pro / eCommerce.
• Extensibilité avec le magasin de plugins en pleine croissance de Craft.

Donc, avec l'introduction à l'écart, je vais vous montrer comment vous lever et fonctionnant avec un environnement local Craft CMS entièrement configuré en une quinzaine de minutes. Une fois les étapes suivantes terminées, vous devriez avoir une bonne base pour démarrer votre prochain projet Web et, espérons-le, être prêt à abandonner définitivement WordPress.

Installer notre environnement de développement

Craft CMS est livré avec un outil très pratique pour mettre en place 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 Craft, mais cela aide beaucoup.

Configurer 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 ou 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 l'installateur. Une fois cette opération terminée, 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 pourrez facilement créer de nouvelles installations de Craft sans avoir à recommencer.

Installation sous 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 le 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 de la dernière version ;
3. Créez un dossier Nitro dans votre dossier home s'il n'existe pas déjà (par exemple C: Users Nitro );
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-le à partir de la commande ligne pour ajouter Nitro à votre chemin global:

    setx path "% PATH%;% USERPROFILE%  Nitro"  

6. Démarrez le terminal Windows ( cmd.exe ) avec 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 convenir parfaitement à votre environnement.

Installation de 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éation d'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. Ouvrez le terminal / la ligne de commande;
5. Allez dans notre dossier créé. $ cd / chemin / vers / projet ;
6. Exécutez nitro add ;
7. Suivez les invites de la ligne de commande à l'écran. (Les préréglages sont généralement corrects, mais modifiez à votre guise.)

Astuce : Si vous rencontrez des problèmes «Not Readable» sur macOS, Multipass doit avoir 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'ici, et c'est le plus dur terminé. La connexion à notre base de données nous oblige à ajouter les détails de la base de données de notre nouveau site dans le fichier .env de notre projet.

1. Ouvrez le fichier .env de notre projet (situé à la racine dossier);
2. Modifiez les détails de la base de données comme suit:

    DB_USER = "nitro"
       DB_PASSWORD = "nitro"
       # 'nitro' est la base de données par défaut
       DB_DATABASE = "nitro"
    

Astuce : 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 votre adresse IP de 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 pendant l'installation, suivi de / admin (par exemple testdomainyouset.test / admin );
2. Vous devriez voir Craft Écran d'installation de CMS ( Hourra! );
3. Suivez les instructions d'installation à l'écran;
4. Une fois terminé, vous devriez être redirigé vers votre nouveau panneau d'administration.

Astuce ]: Si vous n'avez pas installé Craft via Composer, vous pouvez être invité à entrer 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, recherchez la ligne suivante SECURITY_KEY = "" collez la clé générée entre les guillemets et enregistrez-la.

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 terminé en utilisant nitro stop 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 (affiche des informations sur les environnements installés)
• nitro info (informations sur l'environnement actuel, la version PHP, etc.)

Configuration de notre blog Cat

Maintenant que Craft est opérationnel, nous pouvons démarrer notre chat blog, et commencez à 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 construire notre page d'accueil et nos pages de publication interne.

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 créer 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 message de chat

Comment créer des sections et des pages

Nous allons créer notre section "Chats" et notre page d'accueil qui sera classée 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 la section de nos chats

1. Allez dans Paramètres dans le menu de gauche ;
2. Cliquez sur “Sections”;
3. Cliquez sur “New Section”;
4. Dans le “Name” mettez Cats ;
5. Section Type 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 que c'est / cats / {slug} ; [19659007] Dans "Template", nous allons mettre cat ;
7. Save.

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

Création de notre page d'accueil

1. Dans "Sections", cliquez sur "Nouveau Section ”;
2. Dans le“ Nom ”, mettez Page d'accueil ;
3. Type de section Unique ;
4. Cochez la case“ Page d'accueil ”;
5. Dans“ Modèle ”Nous allons mettre index ;
6. Save.

Création de 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 aux paramètres sur la gauche menu manuel;
3. Cliquez sur «Champs»;
4. En haut à droite, cliquez sur «Nouveau champ».

Configurer le nom du chat

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

• Dans le Name insérez "Cat's Name";
• Choisissez "Plain Text" dans le type de champ;
• Maintenant, enregistrez.

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 entrer pour chaque chat.

• Cliquez sur «Nouveau champ »À nouveau;
• Dans le nom, insérez« Description du chat »;
• Choisissez à nouveau le type de champ« Texte brut »;
• Créez une limite en ajoutant« 2000 »dans la zone Limite de champ;
• Cliquez sur Enregistrer . [19659108] Configuration de 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 vers des solutions de stockage Cloud.)

  • Allez dans «Paramètres» dans le menu de gauche;
  • Cliquez sur «Actifs»;
  • Cliquez sur «Nouveau volume»;
  • Dans le nom, mettez «Cat's Photo»;
  • Activez «Les ressources de ce volume ont des URL publiques»;
  • Dans «Base URL», mettez @ web / uploads / ;
  • In «File System Path ”put @ webroot / uploads / ;
  • Save.

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

  Matching Field to Sections

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

  • Allez dans Paramètres;
  • Cliquez sur «Sections»;
  • Cliquez maintenant sur «Edit Section Type»;
  • Cliquez maintenant sur notre section «Cats»;
  • ] Sélectionnez l'onglet «Champs» dans le menu de droite;
  • Faites glisser sur les champs «Chats» que nous avons précédemment créés dans le volet de contenu;
  • Une fois glissé, enregistrez la section des chats. [19659128] ( Grand aperçu )

    Astuce : Vous pouvez supprimer le champ "Titre" de nos messages 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. Rendez-vous sur "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! ( Plus il est moelleux, mieux c'est. )

    Liste des articles de notre chat

    Maintenant que nous avons terminé notre modèle de contenu, 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 de 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 Templates 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éez une requête d'entrée avec la 'section' et paramètres '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%}
          
    
              
    
    
                   {% set catImage = entry.catsPhoto.one ()%}
                  {% if catImage%}
                    
                  {% fin si %}
    
                  
    
                    
     {{entry.title}} 
                    
     {{entry.catsName}} 
                    
     {{entry.catsDescription}} 
                     Afficher {{entry.catsName}} 
                  
    
              
          
         {% endfor%}
      
    
    
    
    
    

    Dans le code ci-dessus, nous informons Craft de notre section «Chats» et limitons le nombre de messages à 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 pendant installer. (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 voir plus d'informations nous donne une erreur 404, donc corrigeons ça ensuite!

    

    Astuce : Nous avons inclus Bootstrap pour faire cela a l'air un peu plus sophistiqué, mais n'hésitez pas à inclure le cadre de votre choix.

    Page de message de Cat

    Nous allons faire la même chose que nous l'avons fait avec la page d'index. Créons le modèle cat en créant un nouveau fichier dans le dossier Modèles appelé cat.twig . Comme nous nous trouvons déjà dans le contexte de Entry 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!

    Going Headless

    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 utilisateur et GraphQL à votre config. 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 la version d'essai Pro

    Une fois que vous avez installé Craft CMS, rendez-vous dans le «Plugin Store» et recherchez «Mettre à jour» 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 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. Inutile 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 à l'adresse http: //yourprojecturl.test / api :

        return [
           'api' => 'graphql/api',
           // ...
       ];
        

    3. Enregistrer et fermer.
    4. Test en envoyant un ping au point final:

        curl -H "Content-Type: application / graphql" -d '{ping}' http: // yourprojecturl. test / api  

    5. Vous devriez recevoir "pong" en réponse.

    Activer votre contenu

    Nous avons configuré notre endpoint 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. Accédez à la section GraphQL via la barre latérale de votre panneau d'administration;
    2. Cliquez sur «Schéma public»;
    3. Activez le Section "Chats".
       ( Cela rendra notre contenu disponible via votre point de terminaison. )
    4. Enregistrer.

    

    Test de notre point de terminaison

    Maintenant que nous avons choisi les données que nous souhaitons rendre disponibles via notre endpoint, 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: [19659185] query ($ section: [String]$ orderBy: String) {
       entrées (section: $ section, orderBy: $ orderBy) {
       Titre
       limace
       id
       }
       }
       
    4. Cliquez sur le bouton "Lire".

    Astuce : 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.

    Conclusion

    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:

    • Configurer un environnement de développement local avec Multipass;
    • Créer et configurer une toute nouvelle installation de Craft;
    • Ajout d'un domaine de test auquel nous pouvons accéder notre installation;
    • A créé un joli blog sur les chats;
    • Sans tête;
    • A créé un point de terminaison d'API pour accéder à nos chats.

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

    (ra, il)