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):
    create the directory structure

  • Edit the module config file (containing both the frontend and admin part of this module) at app\code\local\Bluecliff\HelloWorld\etc\config.xml:
    The <helloworld> tag should by convention be the lowercase version of the module name.
    The <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:
    database table called helloworld_users

    Populate the table with some dummy data.

  • Add the model declaration to config.xml (under the global tag 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:
    Magento models:
    In this example an ActiveRecord-like model (one row, one object) is used because our class extends Mage_Core_Model_Resource_Db_Abstract. Another model is the Entity Attribute Value (EAV) Model. In this case a class extends Mage_Eav_Model_Entity_Abstract.
  • 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:
    The Magento frontend work flow:
    Routing in config.xml -> Controller (maybe get database data with a model, based on automatically parsed key/value pairs from the URL as parameters) -> get database data to a block (four possible methods: 1) register 2) model [with the Mage::getSingleton() method] 3) 'dumbview' and 4) assign) -> in a block are public funtions called from the actual view files (.phtml files).

    The Magento admin work flow with a form:
    Initial Get:
    block (parameter is edit, else add) -> controller -> create a block -> renderLayout()

    Subsequent POST:
    POST data to controller -> ok, and 'The user has been saved' on either edit or add form -> redirect to last edit or add form
  • 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 allAction() method:
  • 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 loadLayout() and renderLayout() as stated in the method getAction() in UserController.php so create app\design\frontend\rwd\default\layout\bluecliff.xml:
    Magento's View:
    The view in Magento consists of .phtml files getting data from block classes. When loadLayout() and renderLayout() are called by default a skeleton site structure (with blocks like 'content' or 'before_body_end' - see app\design\frontend\rwd\default\layout\page.xml for a complete list) is rendered.
    Get the layout handle with a var_dump($this->getLayout()->getUpdate()->getHandles()); right after $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) for handling $this->getContent() in content.phtml:
  • 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'):
    your result

  • 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'):
    Admin: main grid overview

    - edit form (after clicking a grid row or clicking the Edit link):
    Admin: edit / form overview

    - add form (after clicking 'Add New' link):
    Admin: add / form overview

  • 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:
    Admin: make an admin block

  • 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 at app\code\local\Bluecliff\HelloWorld\Block\Adminhtml\Users\Edit\Form.php:
  • 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.

comments powered by Disqus