Magento2 beta version has been released by magento for developer understanding. We can get the setup from Git Gub https://github.com/magento/magento2
You can get setup guide from http://www.ubertheme.com/magento-news/magento-2-0-installation-guide/
In Magento2 there is a drastic change in the structure of the code. All the code pools are removed and also the Skin directory. There are many changes related to the theme folder as well. To understand how the structure of Magento2 works, let us check it by creating a simple helloworld module.
Before starting the code section, let us create the directory structure that we will need.
app/code/Webmull/Helloworld
app/code/Webmull/Helloworld/etc
app/code/Webmull/Helloworld/etc/frontend
app/code/Webmull/Helloworld/Controller
app/code/Webmull/Helloworld/view/frontend/layout
app/code/Webmull/Helloworld/view/frontend/templates
You can skip the Block directory if required. Will explain it in the end of the process. For now we will also create Block directory as under:
app/code/Webmull/Helloworld/Block
Now, as we have the directory structure ready, we will now create file as per module requirement in given sequence:
1.First, we have to create the module configuration file named module.xml in app/code/Webmull/Helloworld/etc
The content for the file will be as under, if it does not depend on any other module:
|
1 2 3 4 5 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Webmull_Helloworld" setup_version="2.0.0" /> </config> |
But, if our module depends on any other module then we will use a tag as under
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Webmull_Helloworld" setup_version="2.0.0" > <sequence>
 <module name="Magento_Eav"/>
 <module name="Magento_Directory"/>
 </sequence>
 </module> </config> |
2. Now, we will create a route configuration file named routes.xml in app/code/Webmull/Helloworld/etc/frontend
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd"> <router id="standard"> <route id="helloworld" frontName="helloworld"> <module name="Webmull_Helloworld" /> </route> </router> </config> |
3. As we have defined the route now, we will create the controller file. In Magento2, we need to create separate file for each action under the controller folder.
In our case we will create Index.php file in app/code/Webmull/Helloworld/Controller/Index
In every action file there will be a method name excute() that will be invoked when the action is called.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php namespace Webmull\Helloworld\Controller\Index; class Index extends \Magento\Framework\App\Action\Action { /** * Index action * * @return $this */ public function execute() { $this->_view->loadLayout(); $this->_view->renderLayout(); } } |
4. Further, we will create a Block file named Helloworld.php in app/code/Webmull/Helloworld/Block
|
1 2 3 4 5 6 7 8 9 |
<?php namespace Webmull\Helloworld\Block; class Helloworld extends \Magento\Framework\View\Element\Template { } |
5. Now, as we have our Controller and Block ready, we will create layout file named helloworld_index_index.xml in app/code/Webmull/Helloworld/view/frontend/layout
Here we will create separate file for each action in layout.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Webmull\Helloworld\Block\Helloworld" name="helloworld" template="helloworld.phtml" /> </referenceContainer> </body> </page> |
6. Further, we will create our phtml file that will be called named helloworld.phtml in app/code/Webmull/Helloworld/view/frontend/templates
|
1 2 3 4 |
<h1>Hello World!</h1> <div class="helloworld-cms"> <?php echo __('You are visiting the page of hello world'); ?> </div> |
7. Create composor.json file which will be located on  app/code/Webmull/Helloworld
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "name": "webmull/module-helloworld", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/module-config": "100.0.*", "magento/module-store": "100.0.*", "magento/module-backend": "100.0.*", "magento/module-customer": "100.0.*", "magento/module-cms": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-module", "version": "100.0.2", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "Webmull\\Helloworld\\": "" } } } |
8. Create registration.php file which will be located on app/code/Webmull/Helloworld
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Webmull_Helloworld', __DIR__ ); |
9. Now upgrade the setup using command line.
We can check the out put using www.domain.com/helloworld
As it is stated above that we can skip the block directory, we have to replace the layout xml file content with following this works similar to core/template that was in Magento 1.x
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Framework\View\Element\Template" name="helloworld" template="Webmull_Helloworld::helloworld.phtml" /> </referenceContainer> </body> </page> |
We have developed the Helloworld simple module successfully.
Cheers and Good Luck.
when i add ‘Webmull_Helloworld’ => 1, into config.php file, I can’t Clear chache
error log:
There has been an error processing your request
Exception printing is disabled by default for security reasons.
Error log record number: 900909347
please help me
Thank for your valuable feedback.
I will update “Hello World” module with latest package.
Thanks for the easy guidelines.
Just wanted to share since the block file name is “Helloworld.php” the block name defined under helloworld_index_index.xml should be
class=”Webmull\Helloworld\Block\Helloworld” instead of class=”Webmull\Helloworld\Block\HelloWorld”
i.e. the W of the World should be small. With capital W it works well in a non-linux environment, but in a linux environment it gives “Invalid block type:” error
Hello, Thanks for update.
I will update my blog with latest changes
Pleasure 🙂
hi,
I have try, this example but its not working. Gives the 404 page not found. can anyone help me?
Thanks for simple guidelines. i have a query , is the steps same for magentov2.0.7 . as i am getting 404 when i hit the link. i dont think i have missed any of the steps
Hello,
We have checked the code and updated. Now It is resolved and working fine.
Issue was we used the folder name “Controllers”. But we have to create folder name “Controller”