How to create a new page without using CMS?

Question

Is there any way to create a new custom web page without using the Magento CMS Admin panel?

I'd like to create a new web page (let's say newsletter) using the 1 column layout. But I would like to create it from the backend (code view) without using the Admin panel.

Is there a way to do this?

From what I’ve read I’m suppose to create a module xml located in the following location:

app> ect> modules> Kind_World.xml

 <?xml version="1.0"?>
 <config>
 <modules>
 <My_World>
 <active>true</active>
 <codePool>local</codePool>
 </My_World>
 </modules>
 </config>

And then copy the code that’s in 1column.phtml

Create a page (mypage.phtml) in a location similar to:

/app/design/frontend/kind/enterprise/template/page/mypage.phtml

And paste the code from 1column.phtml into mypage.phtml

Create a template module config.xml. and place it in a location(not sure about the exact location) similar to:

/app/code/local/..

config code should be similar to code below. Note: I’m just using the code below as an example. I know the code below is incorrect. The code below is using home template. I just would like to create a page

 <?xml version="1.0"?>
 <config>
 <modules>
 <My_World>
 <version>0.1.0</version>
 </My_World>
 </modules>
 <global>
 <page>
 <layouts>
 <homepage translate="label">
 <label>Home_page</label>
 <template>page/myworld.phtml</template>
 <layout_handle>home_page</layout_handle>
 </homepage>
 <!-- add more layouts here -->
 </layouts>
 </page>
 </global>
 </config>

Add to my CMS Page and edit

Go to Magento back end admin. Go to CMS> Pages

Now go to the CMS homepage, I should then have ‘MY_World’ in my ‘layout’ dropdown. Select it and save my page

Now go back to my myworld.phtml and edit.

Not sure if this is close.

Please advise

Answer 1

You can achieve this by building a custom module. So our first step is to create a module folder and the necessary files required to register a Magento module.

1. Create the following folders:

   app/code/YourCompany
app/code/YourCompany/YourModule

The YourCompany folder is the module’s namespace, and YourModule is the module’s name.

Note: If you don’t have the code folder in your app directory, create it manually.

2. Now that we have a module folder, we need to create a module.xml file in the app/code/YourCompany/YourModule/etc folder with the following code:

    <?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="YourCompany_YourModule" setup_version="1.0.0">
    </module>
    </config> 
   

3. To register the module, create a registration.php file in the app/code/YourCompany/YourModule folder with the following code:

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

4. Open your terminal and go to the Magento 2 root. Run from there the following command:

php bin/magento setup:upgrade

If you want to make sure that the module is installed, you can go to Admin → Stores → Configuration → Advanced → Advanced and check that the module is present in the list or you can open app/etc/config.php and check the array for the ‘YourCompany_YourModule’ key, whose value should be set to 1.

Creating a controller

1. First we need to define the router. To do this, create a routes.xml file in the app/code/YourCompany/YourModule/etc/frontend folder with the following code:

<?xml version="1.0"?> 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard"> 
 <route id="yourmodule" frontName="yourmodule"> 
 <module name="YourCompany_YourModule" /> 
 </route> 
 </router> 
</config>

Here we’re defining our frontend router and route with an id "yourmodule".

The frontName attribute is going to be the first part of our URL.

In Magento 2 URL’s are constructed this way: <frontName>/<controler_folder_name>/<controller_class_name>

So in our example, the final URL will look like this:

yourmodule/index/index

2. Now we create the Index.php controller file in the app/code/YourCompany/YourModule/Controller/Index folder with the following code:

<?php 
 
namespace YourCompany\YourModule\Controller\Index; 
 
use Magento\Framework\App\Action\Context; 
 
class Index extends \Magento\Framework\App\Action\Action 
{ 
 protected $_resultPageFactory;
 
 public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory) 
 { 
 $this->_resultPageFactory = $resultPageFactory; 
 parent::__construct($context); 
 } 
 
 public function execute() 
 { 
 $resultPage = $this->_resultPageFactory->create(); 
 return $resultPage; 
 } 
}

In Magento 1 each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.

Creating a block

We'll create a simple block class with the getHelloWorldTxt() method which returns the "Hello world" string.

1. Create a Helloworld.php file in the app/code/YourCompany/YourModule/Block folder with the following code:

<?php 
namespace YourCompany\YourModule\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
{ 
 public function getHelloWorldTxt() 
 { 
 return 'Hello world!'; 
 } 
} 

Creating a layout and template files

In Magento 2, layout files and templates are placed in the view folder inside your module. Inside the view folder, we can have three subfolders: adminhtml, base and frontend. The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin and frontend files.

1. First we will create a yourmodule_index_index.xml file in the app/code/YourCompany/YourModule/view/frontend/layout folder with the following code:

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

Every page has a layout hand and for our controller action the layout handle is yourmodule_index_index. You can create a layout configuration file for every layout handle.

In our layout file we have added a block to the content container and set the template of our block to helloworld.phtml, which we will create in the next step.

2. Create a helloworld.phtml file in the app/code/Inchoo/Helloworld/view/frontend/templates folder with the following code:

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

$this variable is refrencing our block class and we are calling the method getHelloWorldTxt() which is returning the string ‘Hello world!’.

And that’s it. Open the /yourmodule/index/index URL in your browser

• codestr: There's lots of good examples/tutorials on creating a custom module. I'd recommend starting with one of them, as they will be far more in depth than I can be due to time constraints at the moment. inchoo.net/magento-2/how-to-create-a-basic-module-in-magento-2
• codestr: I also have a custom module we just built if it would be helpful if I zipped it up and sent it to you. It's relatively simple so you could probably piggy back off it.
• Mariton: Sure send it my way
• codestr: Mail me, [email protected] and I'll send it over.
• Mariton: @codestr, Can you copy and paste the examples or attach?

Answer 2

Try this tutorials for Magento 1.*:

• https://www.pierrefay.com/magento-training/create-a-controller-tutorial.html
• http://devdocs.magento.com/guides/m1x/magefordev/mage-for-dev-3.html

And this for Magento 2:

• http://inchoo.net/magento-2/how-to-create-a-basic-module-in-magento-2/