Comment créer une extension Hello World dans Magento 2

Nous allons créer une extension très simple dans Magento 2. Une fois terminé, la sortie de l'extension dira "Bonjour Weblizar, Ceci est votre première extension hello world Magento ! ” dans le contenu du bloc sur une route frontale personnalisée. Apprenons à créer une extension dans magento 2 avec hello world comme sortie.

Exigence :

À la liste, vous avez la dernière version de Magento 2 qui est actuellement 2.1. Est installé sur votre système local.

Avant de commencer le développement d'une extension Magento 2, il y a deux choses que les gens oublient souvent et que nous vous recommandons de faire :

1. Désactiver le cache Magento

La désactivation du cache Magento pendant le développement vous fera gagner du temps car vous n'aurez pas besoin de vider manuellement le cache à chaque fois que vous apporterez des modifications à votre code.

Le moyen le plus simple de désactiver le cache est d'aller dans Admin => Système => Gestion du cache => sélectionnez tous les types de cache et désactivez-les.

2. Mettez Magento en mode développeur

Vous devez mettre Magento en mode développeur pour vous assurer que vous voyez toutes les erreurs que Magento vous lance.

Pour ce faire, ouvrez votre terminal et rendez-vous à la racine de Magento 2. À partir de là, vous devez exécuter la commande suivante :

php bin/magento deploy:mode:set développeur

Comment créer une extension dans Magento :

Création des fichiers et dossiers d'extension :
Configuration des extensions
La première étape consiste à créer le dossier d'extension et les fichiers nécessaires pour enregistrer une extension Magento.
1. Créez les dossiers suivants :

• application/code/Weblizar
• app/code/Weblizar/Helloworld

Le dossier Weblizar est l'espace de noms de l'extension et Helloworld est le nom de l'extension.
Remarque : Si vous n'avez pas le dossier de code dans le répertoire de votre application, créez-le manuellement.

2. Maintenant que nous avons un dossier d'extension, nous devons créer un fichier module.XML dans le dossier app/code/Weblizar/Helloworld/etc avec le code suivant :

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>
<module name=”Weblizar_Helloworld” setup_version=”1.0.0″></module>
</config>

3. Pour enregistrer le module, créez un fichier registration.php dans le dossier app/code/Weblizar/Helloworld avec le code suivant :

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Weblizar_Helloworld',
__DIR__
); ?>

4. Ouvrez votre terminal et rendez-vous à la racine de Magento 2. Exécutez à partir de là la commande suivante :

configuration de php bin/magento : mise à niveau

Si vous voulez vous assurer que l'extension est installée, vous pouvez aller dans Admin => Stores => Configuration => Advanced => Advanced et vérifier que l'extension est présente dans la liste ou vous pouvez ouvrir app/etc/config.php et vérifiez le tableau pour la clé 'Weblizar_Helloworld', dont la valeur doit être définie sur 1.

Création d'un contrôleur

1. Nous devons d'abord définir le routeur. Pour cela, créez un fichier routes.XML dans le dossier app/code/Weblizar/Helloworld/etc/frontend avec le code suivant :

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:App/etc/routes.xsd”>
<identifiant du routeur =”standard”>
<route id="helloworld" frontName="helloworld">
<module name="Weblizar_Helloworld" />
</route>
</routeur>
</config>

Ici, nous définissons notre routeur frontal et notre route avec un identifiant « helloworld ».

L'attribut frontName va être la première partie de notre URL.

Dans Magento 2, les URL sont construites de cette façon :
<frontName>/<controler_folder_name>/<controller_class_name>

Ainsi, dans notre exemple, l'URL finale ressemblera à ceci :

helloworld/index/index

2. Nous créons maintenant le fichier de contrôleur Index.php dans le dossier app/code/Weblizar/Helloworld/Controller/Index avec le code suivant :

<?php

espace de noms Weblizar\Helloworld\Controller\Index ;

utilisez Magento\Framework\App\Action\Context ;

la classe Index étend \Magento\Framework\App\Action\Action
{
protégé $_resultPageFactory ;

fonction publique __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
$this->_resultPageFactory = $resultPageFactory ;
parent ::__construct($context);
}

fonction publique exécuter()
{
$resultPage = $this->_resultPageFactory->create();
return $pageresultat ;
}
}

Dans Magento 2, chaque action a sa propre classe qui implémente la méthode execute().

Création d'un bloc

Nous allons créer une classe de bloc simple avec la méthode getHelloWorldTxt() qui renvoie la chaîne "Hello world".

1. Créez un fichier Helloworld.php dans le dossier app/code/Weblizar/Helloworld/Block avec le code suivant :

<?php
espace de noms Weblizar\Helloworld\Block ;

la classe Helloworld étend \Magento\Framework\View\Element\Template
{
fonction publique getHelloWorldTxt()
{
return 'Bonjour Weblizar, ceci est votre première extension magento hello world !';
}
}

Création d'une mise en page et de fichiers modèles

Dans Magento 2, les fichiers de mise en page et les modèles sont placés dans le dossier de vue à l'intérieur de votre extension. Dans le dossier de la vue, nous pouvons avoir trois sous-dossiers : adminhtml, base et frontend.
Le dossier adminhtml est utilisé pour l'admin, le dossier frontend est utilisé pour le frontend et le dossier de base est utilisé pour les fichiers admin et frontend.

1. Tout d'abord, nous allons créer un fichier helloworld_index_index.XML dans le dossier app/code/Weblizar/Helloworld/view/frontend/layout avec le code suivant :

<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../../../lib /interne/Magento/Framework/
Afficher/Layout/etc/page_configuration.xsd” layout=”1column”>
<corps>
<referenceContainer name="content">
<block class=”Weblizar\Helloworld\Block\Helloworld” name=”helloworld” template=”helloworld.phtml” />
</referenceContainer>
</body>
</page>

Chaque page a une main de mise en page et pour notre action de contrôleur, la poignée de mise en page est helloworld_index_index. Vous pouvez créer un fichier de configuration de disposition pour chaque poignée de disposition.

Dans notre fichier de mise en page, nous avons ajouté un bloc au conteneur de contenu et défini le modèle de notre bloc sur helloworld.phtml, que nous créerons à l'étape suivante.

2. Créez un fichier helloworld.phtml dans le dossier app/code/Weblizar/Helloworld/view/frontend/templates avec le code suivant :

<h1><?php echo $this->getHelloWorldTxt(); ?></h1>

$cette variable fait référence à notre classe de bloc et nous appelons la méthode getHelloWorldTxt() qui renvoie la chaîne 'Hello world!'.

Et c'est tout. Ouvrez l'URL /helloworld/index/index dans votre navigateur et vous devriez obtenir quelque chose comme ça et

Cliquez ici pour télécharger l'extension hello world magento