{"id":37,"date":"2018-03-22T11:10:55","date_gmt":"2018-03-22T11:10:55","guid":{"rendered":"http:\/\/codeinnovers.com\/blog\/?p=37"},"modified":"2018-03-22T11:15:31","modified_gmt":"2018-03-22T11:15:31","slug":"creating-a-hello-world-module-in-magento-2","status":"publish","type":"post","link":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/","title":{"rendered":"how to create a hello world module in magento-2"},"content":{"rendered":"

In Today’s tutorial we will see how to create a hello world module in Magento-2. We will print hello world on the screen.<\/p>\n

The objective of today’s tutorial is to understand the module structure of Magento-2 and we will show a hello world text on screen.<\/p>\n

First of all we will have to follow these steps:<\/p>\n

    \n
  1. \n

    Disable Magento Cache:<\/h3>\n

    Magento 2 has implemented cache in very awesome way which results into quick page load and fast speed . Whenever we will make any change in code , it will not be reflected on site because Magento’s Caching system will be loading it from cache so we will have to flush the cache every time which results into wasting of time. To save our time we will disable the cache. To disable cache go to Admin \u2192 System \u2192 Cache Management \u2192 select all cache types and disable them.<\/li>\n

  2. \n

    Enable Developer Mode:<\/h3>\n

    By default Magento runs in default mode , and we need to make it run into developer mode. Why developer mode ? because enabling developer mode will show all the errors . Run below command to enable developer mode.<\/p>\n

    php bin\/<\/span>magento deploy:<\/span>mode:<\/span>set developer<\/code><\/pre>\n
    If you are using xampp on your localthen run this command\u00a0 <\/code><\/p>\n
    \/opt\/lampp\/bin\/php bin\/<\/span>magento deploy:<\/span>mode:<\/span>set developer<\/code><\/li>\n<\/ol>\n
    Magento-2 Module Structure<\/h2>\n
    For those who are familiar with Magento-1 , module structure of Magento-2 is bit different. In Magento 1 our code used to split in various folders and creating an install-able package was a tough job , but in Magento-2 code of one module resides inside one folder and can be easily used to create install-able package.<\/p>\n
    Directory Structure of Magento Module:<\/strong><\/h4>\n
    app\/code\/<namespace>\/<module_name><\/p>\n
    <namespace> which may also be called as vendor_name is the name of folder which contains module. A namespace may have any number of modules. For this tutorial we will be using Mega<\/strong> as namespace or say vendor_name<\/p>\n
    <module_name>\u00a0 is the name of module which we are building. Always chose a name for module which reflects the module functionality. It is considered as best practice. We will be using HelloWorld<\/strong> as module name<\/p>\n
    So detailed directory structure will be:<\/p>\n
    Mega\/HelloWorld\/<\/strong><\/p>\n
    Block : <\/strong>This folder contains the block files<\/p>\n
    Controller: <\/strong>This folder contains the Controller Files<\/p>\n
    Helper : <\/strong>This folder contains the helper Files<\/p>\n
    Model: <\/strong>This folder contains the Model Files<\/p>\n
    Observer:\u00a0 <\/strong>This folder contains the Observer Files which are used to hook any event. In Magento 2 we use di.xml<\/strong> for hooking events. Event System is not in the scope of this post. We will discuss event system in near future posts.<\/p>\n
    Setup:<\/strong>\u00a0This setup folder is equivalent to Magento-1’s sql folder. This folder holds the installData and InstallSchema file ffor manipulating the database. With the help of these files we can create , alter table and other operations at Database level<\/p>\n
    etc : <\/strong>This folder contains the configuration for front-end as well as admin area.<\/p>\n
    view: <\/strong>This folder has 2 sub folders. adminhtml and frontend. These folders contains the layout , template files as well as javascript and css files.<\/p>\n
    Creating Hello World Module in Magento-2<\/strong><\/p>\n
    We will be creating these files for creating a hello world module. For fresh Magento-2 installation you notice that there is no code<\/strong> folder , you may create it manually.<\/p>\n
      \n
    1. \u00a0app\/code\/Mega\/HelloWorld\/etc\/module.xml file<\/li>\n
    2. \u00a0app\/code\/Mega\/HelloWorld\/registration.php<\/li>\n
    3. app\/code\/Mega\/HelloWorld\/etc\/frontend\/routes.xml<\/li>\n
    4. app\/code\/Mega\/HelloWorld\/Controller\/Index\/Index.php<\/li>\n
    5. app\/code\/Mega\/HelloWorld\/Block\/Hello.php<\/li>\n
    6. app\/code\/Mega\/HelloWorld\/view\/frontend\/layout\/helloworld_index_index.xml<\/li>\n
    7. app\/code\/Mega\/HelloWorld\/view\/frontend\/templates\/hello.phtml<\/li>\n<\/ol>\n
       <\/p>\n
      Creating app\/code\/Mega\/HelloWorld\/module.xml<\/h4>\n
      <?xml<\/span> version<\/span>=\"1.0\"<\/span>?><\/span><\/span>\r\n<config<\/span> xmlns:xsi<\/span>=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi:noNamespaceSchemaLocation<\/span>=\"urn:magento:framework:Module\/etc\/module.xsd\"<\/span>><\/span><\/span>\r\n    <module<\/span> name<\/span>=\"Mega_HelloWorld\"<\/span> setup_version<\/span>=\"1.0.0\"<\/span>><\/span><\/span>\r\n    <\/module><\/span><\/span><\/span>\r\n<\/config><\/span><\/span><\/span><\/code><\/pre>\n
      In above code , setup_version is the setup version of the module. This version is checked when we want to create a table or we want to do some database level operations.<\/p>\n
      Registering the module<\/strong><\/h4>\n
      To register a module we will create a registration.php<\/strong> file with below contents:<\/p>\n
      <?php<\/span>\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::<\/span>register<\/span>(<\/span>\r\n    \\Magento\\Framework\\Component\\ComponentRegistrar::<\/span>MODULE<\/span>,<\/span>\r\n    'Mega_HelloWorld'<\/span>,<\/span>\r\n    __DIR__\r\n)<\/span>;<\/span><\/code><\/pre>\n
      After performing above steps our module is created and registered in Magento. Now we will confirm that our module is registered. By default when we create a module , it is disabled. So we have to enabled the module too.<\/p>\n
      Open terminal and change directory to your magento root and run this command<\/p>\n
      php<\/span> bin<\/span>\/<\/span>magento<\/span> module<\/span>:<\/span>status<\/span><\/code><\/p>\n
      This command will show some output and last of the output will look like this<\/p>\n
      List of disabled modules: Mega_HelloWorld<\/strong><\/p>\n
      now we will enable the module by running this command<\/p>\n
      php<\/span> bin<\/span>\/<\/span>magento<\/span> module<\/span>:<\/span>enable<\/span> Mega_HelloWorld<\/span><\/code>\r\n<\/code><\/pre>\n
      Now if we check file app\/etc\/config.php we will find this<\/p>\n
      'Mega_HelloWorld'<\/span> =><\/span> 1<\/span><\/code> This confirms that our module is now enabled and registered. After this we will define a route for our module. In this we will define a frontname of the module. In Magento url is comprises of module frontname , controller name and action name. Now we will register frontname for our module. Create routes.xml<\/strong> in app\/code\/local\/Mega\/HelloWorld\/etc\/frontend\/routes.xml<\/strong><\/pre>\n
      <?xml<\/span> version<\/span>=\"1.0\"<\/span>?><\/span><\/span>\r\n<config<\/span> xmlns:xsi<\/span>=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi:noNamespaceSchemaLocation<\/span>=\"urn:magento:framework:App\/etc\/routes.xsd\"<\/span>><\/span><\/span>\r\n    <router<\/span> id<\/span>=\"standard\"<\/span>><\/span><\/span>\r\n        <route<\/span> id<\/span>=\"helloworld\"<\/span> frontName<\/span>=\"helloworld\"<\/span>><\/span><\/span>\r\n            <module<\/span> name<\/span>=\"Mega_HelloWorld\"<\/span> \/><\/span><\/span>\r\n        <\/route><\/span><\/span><\/span>\r\n    <\/router><\/span><\/span><\/span>\r\n<\/config><\/span><\/span><\/span><\/code><\/pre>\n
      Now we will create index controller and index action\r\ncreate a folder inside Controller folder . Name the folder Index and create a file index.php in it\r\n\r\nAdd below code in file\r\n\r\n<\/pre>\n
      <?php<\/span>\r\nnamespace<\/span> Mega\\HelloWorld\\Controller\\Index;<\/span>\r\nuse<\/span> Magento\\Framework\\App\\Action\\Context;<\/span>\r\nclass<\/span> Index extends<\/span> \\Magento\\Framework\\App\\Action\\Action\r\n{<\/span>\r\n    protected<\/span> $_resultPageFactory<\/span>;<\/span>\r\n\u00a0\r\n    public<\/span> function<\/span> __construct(<\/span>Context $context<\/span>,<\/span> \\Magento\\Framework\\View\\Result\\PageFactory $resultPageFactory<\/span>)<\/span>\r\n    {<\/span>\r\n        $this<\/span>-><\/span>_resultPageFactory =<\/span> $resultPageFactory<\/span>;<\/span>\r\n        parent::<\/span>__construct(<\/span>$context<\/span>)<\/span>;<\/span>\r\n    }<\/span>\r\n\u00a0\r\n    public<\/span> function<\/span> execute(<\/span>)<\/span>\r\n    {<\/span>\r\n        $resultPage<\/span> =<\/span> $this<\/span>-><\/span>_resultPageFactory-><\/span>create<\/span>(<\/span>)<\/span>;<\/span>\r\n        return<\/span> $resultPage<\/span>;<\/span>\r\n    }<\/span>\r\n}<\/span><\/code> Now Let's create a block file that will provide the hello world text to our template file that will print the text screen. Create a file Hello.php in Block folder in module and add the below contents<\/pre>\n
      <?php<\/span>\r\nnamespace<\/span> Mega\\HelloWorld\\Block;<\/span>\r\n\u00a0\r\nclass<\/span> Hello extends<\/span> \\Magento\\Framework\\View\\Element\\Template\r\n{<\/span>\r\n    public<\/span> function<\/span> getTextToPrint(<\/span>)<\/span>\r\n    {<\/span>\r\n        return<\/span> 'Hello world!'<\/span>;<\/span>\r\n    }<\/span>\r\n}\r\n\r\n<\/span><\/code>Now we will create a layout file to include our block and template for our module for url of index controller and index action. In Magento-2 this is done a bit differently than magento-1. in Magento-2 for every controller action we create a separate layout file. we will create file hellowold_index_index.xml<\/strong> in view\/frontend\/layout<\/em><\/strong> folder and add the below contents<\/pre>\n
      <page<\/span> xmlns:xsi<\/span>=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi:noNamespaceSchemaLocation<\/span>=\"..\/..\/..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/View\/Layout\/etc\/page_configuration.xsd\"<\/span> layout<\/span>=\"1column\"<\/span>><\/span><\/span>\r\n    <body><\/span><\/span><\/span>\r\n        <referenceContainer<\/span> name<\/span>=\"content\"<\/span>><\/span><\/span>\r\n            <block<\/span> class<\/span>=\"Mega\\HelloWorld\\Block\\Hello\"<\/span> name<\/span>=\"megahelloworld\"<\/span> template<\/span>=\"hello.phtml\"<\/span> \/><\/span><\/span>\r\n        <\/referenceContainer><\/span><\/span><\/span>\r\n    <\/body><\/span><\/span><\/span>\r\n<\/page>\r\n\r\n<\/span><\/span><\/span><\/code>Now we will create a template file hello.phtml<\/strong> in view\/frontend\/templates<\/em><\/strong> folder. We will add the below content<\/pre>\n
      <p><?php echo $this-><\/span>getTextToPrint<\/code>(); ?><\/<\/span>p<\/span>>\r\n\r\n<\/span><\/code><\/pre>\n

      \nWe are done with all sort of codes and now if we open the below url \/helloworld\/index\/index
      \nwe will see a hello world text printed on screen. That’s all for today’s post. If you face any issue or you have any doubt feel free to post it in comments and we will help you out. If you need any service or you are looking for customization in your magento store feel free to drop us a line using the form on  http:\/\/www.codeinnovers.com\/contact-us
      \n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
      In Today’s tutorial we will see how to create a hello world module in Magento-2. We will print hello world on the screen. The objective of today’s tutorial is to understand the module structure of Magento-2 and we will show a hello world text on screen. First of all we will have to follow these […]<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[10,12,13,9],"yoast_head":"\nhow to create a hello world module in magento-2 - CodeInnovers<\/title>\n<meta name=\"description\" content=\"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"how to create a hello world module in magento-2\" \/>\n<meta property=\"og:description\" content=\"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeInnovers\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-22T11:10:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-22T11:15:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2018\/03\/hello.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sam Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/\",\"url\":\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/\",\"name\":\"how to create a hello world module in magento-2 - CodeInnovers\",\"isPartOf\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/#website\"},\"datePublished\":\"2018-03-22T11:10:55+00:00\",\"dateModified\":\"2018-03-22T11:15:31+00:00\",\"author\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8\"},\"description\":\"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2\",\"breadcrumb\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codeinnovers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"how to create a hello world module in magento-2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#website\",\"url\":\"https:\/\/codeinnovers.com\/blog\/\",\"name\":\"CodeInnovers\",\"description\":\"Developing the impossible\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codeinnovers.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8\",\"name\":\"Sam Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g\",\"caption\":\"Sam Parker\"},\"url\":\"https:\/\/codeinnovers.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"how to create a hello world module in magento-2 - CodeInnovers","description":"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"how to create a hello world module in magento-2","og_description":"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2","og_url":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/","og_site_name":"CodeInnovers","article_published_time":"2018-03-22T11:10:55+00:00","article_modified_time":"2018-03-22T11:15:31+00:00","og_image":[{"width":200,"height":250,"url":"https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2018\/03\/hello.jpg","type":"image\/jpeg"}],"author":"Sam Parker","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sam Parker","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/","url":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/","name":"how to create a hello world module in magento-2 - CodeInnovers","isPartOf":{"@id":"https:\/\/codeinnovers.com\/blog\/#website"},"datePublished":"2018-03-22T11:10:55+00:00","dateModified":"2018-03-22T11:15:31+00:00","author":{"@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8"},"description":"In this post we will create a hello world module in magento 2 to understand the flow and module structure of magento 2","breadcrumb":{"@id":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codeinnovers.com\/blog\/creating-a-hello-world-module-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeinnovers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"how to create a hello world module in magento-2"}]},{"@type":"WebSite","@id":"https:\/\/codeinnovers.com\/blog\/#website","url":"https:\/\/codeinnovers.com\/blog\/","name":"CodeInnovers","description":"Developing the impossible","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeinnovers.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8","name":"Sam Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g","caption":"Sam Parker"},"url":"https:\/\/codeinnovers.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":12,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions\/50"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}