Let's explore Magento a little further by creating a Magento module which consists of an admin manageable frontend view. The view in this example displays the firstname of a user (i.e. 'greets the user') from a custom database table (of course, rather than just a firstname this could be any field). First we will create the frontend / cart view and after that the admin part of this extension called 'Bluecliff_HelloWorld'. This module is build on Magento Community Edition 1.9 with it's nice new default responsive design. For Magento installation instructions see Setting up your own Magento webshop.
- First let Magento know of the module 'Bluecliff_HelloWorld' (where 'Bluecliff' is the Package name or Namespace and
'HelloWorld' the module name) at app\etc\modules\Bluecliff_HelloWorld.xml:
After that create the directory and file structure under app/code/local (the design part, under app/design, will be created later):
- Edit the module config file (containing both the frontend and admin part of this module) at app\code\local\Bluecliff\HelloWorld\etc\config.xml:
<helloworld>tag should by convention be the lowercase version of the module name.
<frontName>tag often matches the module name. This part shows up as the first URL segment after the base URL.
Now check in the admin panel at System/Configuration/Advanced/Advanced whether the module is enabled. If not, make sure the cache is disabled (System/Cache Management) and check again.
- Create a database table called 'helloworld_users' (because of the file HelloWorld/Model/Users.php) with 6 fields:
Populate the table with some dummy data.
- Add the model declaration to config.xml (under the
globaltag because it's used both frontend and admin side):
<users>refers to the file HelloWorld/Model/Users.php. The string 'helloworld/users' is called a grouped class name (or classgroup) or URI and consists of the module name and the class (Magento's Context-Based URI Model Loading).
- Edit the model (containing the logic for a distinct object, like a Customer or Product) at app\code\local\Bluecliff\HelloWorld\Model\Users.php:
- Edit the model resource (actually runs queries against the database) at app\code\local\Bluecliff\HelloWorld\Model\Resource\Users.php:
- In this example a specific url displays a user from table 'helloworld_users' based on it's id. E.g. visiting http://magento1.local/helloworld/user/get/id/6 would show the data (for this example only the firstname is displayed) of the user with id 6. Edit UserController.php, the controller created for this example:
- We also want an url that displays all our created users, the collection, at http://magento1.local/helloworld/user/all.
Edit UserController.php to show all our users by adding the
- To use this collection edit the collection model at app\code\local\Bluecliff\HelloWorld\Model\Resource\Users\Collection.php:
- We want a custom layout rendered through
renderLayout()as stated in the method
getAction()in UserController.php so create app\design\frontend\rwd\default\layout\bluecliff.xml:
Get the layout handle with a
$this->loadLayout();in the UserController::getAction().
- Time to create our own template (the .phtml file) C:\xampp\htdocs\magento1\app\design\frontend\rwd\default\template\bluecliff\helloworld\content.phtml:
- Edit app\code\local\Bluecliff\HelloWorld\etc\config.xml to declare the block and to declare the layout (update):
- And subsequently edit the block at Block/content.php (C:\xampp\htdocs\magento1\app\code\local\Bluecliff\HelloWorld\Block\content.php)
- Since we use a helper (to display 'Hi some firstname', e.g. 'Hi John') we have to edit config.xml and subsequently edit the (default) data.php file:
- Visit http://magento1.local/helloworld/user/get/id/6 and you should see your result e.g. (if a user with id 6 exists in your table and has the firstname 'John'):
- Let's build the admin side to create, update and delete users from our table 'helloworld_users'
and get these changes reflected at the frontend.
- First, an overview of the admin panel we will be creating:
- main grid overview (with our new menu item 'Users Directory' at the far left, just after 'Dashboard'):
- edit form (after clicking a grid row or clicking the Edit link):
- add form (after clicking 'Add New' link):
- Let's start again with our model containing the logic. Edit app\code\local\Bluecliff\HelloWorld\Model\Users.php:
- We don't have to edit the model resource to actually query the database (at app\code\local\Bluecliff\HelloWorld\Model\Resource\Users.php).
(Used previously for the frontend.)
- We also don't have to edit the collection model (app\code\local\Bluecliff\HelloWorld\Model\Resource\Users\Collection.php) because we have
used it for the frontend already.
- Make sure your Block Adminhtml part looks like this:
- Just as earlier when we edited our content.php block to get data in the content.phtml template we need to make an admin block to get
data in our main grid overview admin template.
(The admin template is already predefined in Magento so we don't have to make a custom admin .phtml template.)
This part is the grid container block (the page title at the left 'Users Directory' and the 'Add New' button at the right, both automatically added). Let's edit app\code\local\Bluecliff\HelloWorld\Block\Adminhtml\Users.php:
- To actually render the grid in the main grid overview we need Grid.php in the dir Users.
In Grid.php, the grid block, we get the desired (collection) data from our table (the Filter and Search functionality
is once again automatically added).
Let's edit app\code\local\Bluecliff\HelloWorld\Block\Adminhtml\Users\Grid.php:
Notice how both clicking on a row and clicking on the Edit link triggers the
editAction()in controllers/Adminhtml/UsersController.php. Also, clicking on the Add new link (see the previous image), triggers this method. So, what is passed to
editAction()? The id if there's an edit and nothing if it's a new user.
- Now it's time to code the form container.
This container is used as a container for both the edit and add form.
Edit the form container block at app\code\local\Bluecliff\HelloWorld\Block\Adminhtml\Users\Edit.php
to add or edit an user:
- Again, to actually add or edit an user (the 'two' forms using one container) edit the form block
Edit the admin controller app\code\local\Bluecliff\HelloWorld\controllers\Adminhtml\UsersController.php to initially
render either the edit or add form and possibly handle POST request (to edit, add or delete users):
- In config.xml define
1) the adminhtml block definition,
2) the model definition (already defined for the frontend),
3) the helper definition (we already had it for the frontend),
4) the router - admin controller definition:
- As final step add our module as a menu tab in the admin panel. Edit app\code\local\Bluecliff\HelloWorld\etc\adminhtml.xml:
- Done! This was an example of how to get data, of any kind, in a Magento cart view which can be managed through the admin panel.
If you need additional help in setting up and running your own custom Magento modules please contact Blue Cliff Concepts or read some more about hands-on extension development in the book Getting Started with Magento Extension Development.