Magento 101Getting Started with Magento Development

Who you are

Magento 101Getting Started with Magento

DevelopmentCrash Course For PHP Developers

Mathew BeaneNovember 17th 2015

http://joind.in/link

2

Mathew Beane @aepod

Director of Systems Engineering - RobofirmZend Z-Team Volunteer – Magento Division

Family member – 3 Kids and a WifeMagento Certified Developer

• Open-source PHP E-Commerce Market Leader• Large community• Full Featured E-Commerce Platform• Incredibly Flexible• Highly Structured• Steep learning curve because of complexity • Enterprise Edition offers support and more

features So its not a color, super villain or an electrical

generator?

Magento is an open-source content management system for e-commerce web

sites. -  Wikipedia

Image: Marvel Comics

What is Magento?

Todays tl;dr The Magento application Common toolsets for Magento developers

Quick start Magento development• Brief overview• Install guide• Backend development• Frontend development

About training & certification Magento 2

4

Magento 101 – Mathew Beane – php[world] 2015

Magento ApplicationCore Overview – Directories and Designs

5

Magento 1Community Edition (CE): 1.9.2.1Enterprise Edition (EE): 1.14.2.0

Still primarily used on live sites.

Magento 22.0.0

Just Released, ready for use.

Full refactor, modern OO concepts.

Todays Magento

Community member John Knowles produced this amazing patch guide.

http://magento.com/security/news/which-security-patches-should-i-update-my-version-

magento

Scan for missing patches using the byte tool:

https://www.magereport.com/scan/

Over the last year there has been a serious uptick in hacker activity aimed at Magento.

Do not be caught unaware, patch today.

Patch Today!

Magento Design Patterns

Selected Design PatternsModel View Controller PatternBusiness logic happens in the models and the controller maps the model-data to the views. The block system helps with rendering because Magento is heavy on the Model/View side.

Front Controller PatternMagento uses an index.php which has a single point of entry Mage::app() which initializes the environment and routes the request to the controller.

Factory PatternHeavily used by Magento, a good example is the getModel() function which accesses models via aliases from the configuration XML.

Module PatternMagento relies on a very modular architecture, however a lot of functionality breaks this due to heavy usage of the Mage core class throughout the application.

More reading: http://magenticians.com/12-design-patterns-magento

Magento Core Code

Everything in the Magento zip file or installed by

Magento should be considered

core code.

Partial List of Core Files• index.php• app/code/core• app/design/[adminhtml,frontend]/[base,default]• js/jslib_installed_with_magento/• lib/library_installed_with_magento/• skin/[adminhtml,frontend]/[base,default]

For a complete list, download current Magento and look through the code.

How to Keep Core Clean

Source: https://joind.in/talk/view/16204

• Magento allows class overrides on nearly everything.

• Magento’s Event/Observer mechanism is pre-built into most business logic. You can add more if you need.

• Designs/Templates have a fallback system that allows you to utilize any of the core layouts and templates, or replace them in your current design.

• Untouched index.php. Outside of development and very rare implementations you should not “need” to edit this.

Core Changes That Are OK!

• Patches: Magento releases patches that are not controlled via composer or version number.

• Updating Shared Libraries: For instance CM_Redis, or a payment gateway that are included with core Magento.

On your local Copy:Careful not to commit any changes from core, employ a .gitignore strategy.

• Changing core to learn about Magento is OK

• Changing core to debug is OK.

Magento Core Directory Overview

Path Usage/app/ Where most of the PHP resides

/js/ External Javascript library. Typically only used by extensions that are including common assets.

/lib/ “External code library” With lots of core code, this can also contain 3rd party frameworks and other goodies.

/skin/ CSS, Images and Javascript

/var/ Contains logs, reports, session files and a variety of other goodies.

Path Usage/app/code/community

Downloaded modules built by Magento 3rd party developers.

/app/code/core/ Core modules, out of the box Magento, do not touch.

/app/code/local/ Modules built for the specific application/store.

Path Usage/app/etc/local.xml Master configuration file for Magento,

contains database, cache and other settings.

/app/etc/config.xml

Default settings, with some directory locations. Usually this is not touched.

app/etc/modules/ Modules loading configuration files.

/ - Directory Root /app/code/

/app/etc/

Magento Core Design Directories

Path Usage/app/design/frontend/base/ Default Templates, falls back from any package.

/app/design/frontend/default/ Old pre-rwd base theme default package.

/app/design/frontend/rwd/ RWD is a responsive template package.

Path Usage/skin/frontend/default/default/css

Default theme CSS files

/skin/frontend/default/default/images

Default theme image files.

/skin/frontend/default/default/js Default theme javascript files

/app/design/frontend

/skin/frontend/

Magento Core Designs Pattern

Frontend design directories fall into this pattern: app/design/<area>/<package>/<theme>/[css,images,js] skin/<area>/<package>/<theme>/[css,images,js]

• Area: Typically frontend or adminhtml.

• Package / Theme: Accommodates Magento’s theme fallback logic.

Package and Theme Fallback Logic

Graph from: http://blog.belvg.com/magento-fallback-configuration-default-and-specific-themes-packages-design-exceptions-temporary-theme-configuration.html

Package: custom_package

Theme: custom_theme

Never edit base/default, or default/default. These should be considered core code. (Extensions also install in here)

When creating a new design use the override system creating a custom_package and custom_theme.

Magento 101 – Mathew Beane – php[world] 2015

Magento ApplicationCore Overview – Configuration and Database

16

Magento Configuration Structure

• XML Based• xpaths are used as keys in core_config_data table in

mysql• Hierarchical with overrides and scope• In the app you can call any final config value using

the xpath• Used for configuration values (cached via

Configuration Cache)• Also used for layout rules (cached via Layout Cache)

Magento Configuration Scope

• Global Scope• Default Values• Used if not found in scope

• Website Scope• Website scope is used to override global

scope per website.• Used to support Multi-Store

environments• View Scope (subset of website scope)• Used for currency, tax, and language

settings• Typically shown as a dropdown for

Language/Currency • Limited Configuration Values Available

Magento Admin – Choosing Configuration Scope

Magento Database Interface

Magento uses a basic CRUD ModelThere are three basic components to the data interface

Model: Doesn’t contain database codeResource Model: Read/Write adapters for communicating to databaseCollection: PHP Object used to hold model instances, implements several PHP Standard Library interfaces to work with the collection.

“Most Magento Models can be categorized in one of two ways. There's a basic, ActiveRecord-like/one-object-one-table Model, and there's also an Entity Attribute Value (EAV) Model.“

- http://devdocs.magento.com/guides/m1x/magefordev/mage-for-dev-5.html

Magento’s CRUD Resource Model:

Mage_Core_Model_Abstract• Create & Update: save()• Read: load()• Delete: delete()

Magento Database Structure

• Most of the tables are InnoDB• Several Hundred Tables • The DB can grow very large due to logging,

carts, and other data• Typically not edited by hand in any way at

any time.

Selected Tablespace Areas:core_ : Many of the core system settings tables reside here.catalog_ : Stores products, categories, associations, and other data.customer_ : Stores the customer informationsales_ : Quotes, invoices and orders, and related dataImage Source: https://wiki.smu.edu.sg/is480/2012T2_Team_Chm%3A_Project_Design

Magento 101 – Mathew Beane – php[world] 2015

Magento Common Toolsets

Overview & Best Practices

21

Magento Development IDE Choices

PHPStorm with Magicento PluginPHPStorm with the Magicento is also very popular.https://www.jetbrains.com/phpstorm/http://magicento.com/

Zend StudioBuilt in support for Magento, built on eclipse and a very nice platform for editing Magento.http://www.zend.com/en/products/studio

Magento Server Stack Tools

• Magento does well on the Zend Server platform. Zend provides great PHP support. It has Z-Ray, tools for deployment, monitoring and other features which make it very nice in production.

• Newrelic: Magento even has an official plugin to send data to newrelic. http://newrelic.com/robofirm

• blackfire.io : Used for tracing code, like newrelic + xhprof.• Z-Ray: Standalone works very well with the Magento plugin, add to apache/nginx

stack.

Z-Ray and the Magento Plugin

• Full Database Queries• Debug Production & Mobile

Devices with Z-Ray Live• Fully Extensible – Framework

Support• All Function calls – with details• Errors and Warnings

• Magento Plugin Provides:• Detailed Overview• Events / Observers• Layouts / Blocks• Logs / Modules

• Details, details… details!

Magento Application Stack Tools

N98-magerun:https://github.com/netz98/n98-magerunA must have CLI tool, the swiss army knife for Magento Developers.

Alan Storm’s Commerce Bug:http://store.pulsestorm.net/products/commerce-bug-2

This thing is amazing, best $50 I ever spent on Magento.

N98-magerun in action.

Don’t miss Alan Storms Blog: http://alanstorm.com/

Magento 101 – Mathew Beane – php[world] 2015

Magento Quick StartGetting Started With Magento Development

26

Magento Quick Start - Itinerary

• Installation: Manual and automated methods. Revision control and workflow.

• Development: The basic parts of an extension.

• Theming and Designs: Frontend development for Magento. MTG Card c/o Wizards of the Coast

Magento Quick Start – “The App”

DesignsLayouts: XML ConfigurationsTemplates: PHTML templatesStatic Files: CSS, JS and Images

ExtensionsBlocks: Template Business LogicControllers: Request RoutingHelpers: General FunctionsModels: Data and Database Interface

Magento Extension Developers GuideFigure 3: MVC design pattern for Magento

Magento System Requirements

Operating SystemLinux x86-64

Web ServerApache 2.xNginx 1.7.x

DatabaseMySQL 5.6 (Oracle or Percona)

PHPPHP 5.4 – 5.5

• Optional Services Redis Memcache Apache SOLR

• Required PHP Extensions CURL DOM gd hash Iconv mcrypt pcre pdo pdo_mysql simplexml

Magento 101 – Mathew Beane – php[world] 2015

Magento Quick StartInstallation Guide

30

Magento Manual Installation

Installing Magento from scratch is really only a couple basic steps.

1.Create database, database user and proper grants.2.Copy source files into the webroot.

(Optional) Add sample data to database, and media to webroot/media

3.Set and confirm permissions on all files for webserver.4.Point web browser at your webroot.5.Step through the installer.6.Do any post install tasks, because your done.http://devdocs.magento.com/guides/m1x/install/installing_install.html

Magento Automated Installation

• https://github.com/rjbaker/simple-magento-vagrantName says it all, no puppet or chef. Virtualbox + Vagrant. Magento 1.9.1.0 with sample data. A little stale.

• https://github.com/mike182uk/magento-dev-vagrant-chef-soloA more active and configurable vagrant install. Virtualbox, Vagrant and Chef. Magento 1.9.2.1 with sample data.

• https://hub.docker.com/r/alexcheng/magento/Ready to go docker container, you will have to do a little configuration to make this one work. Magento 1.9.1.0, no sample data.

Magento Loves Composer

https://github.com/Cotya/magento-composer-installerManage all your extensions, designs, and other stuff via composer.

https://github.com/AydinHassan/magento-core-composer-installerManage core install with this community package. It makes it easy to update your core if you require it using composer.

http://packages.firegento.com/A community repository of a lot of the common extensions that are used by a lot of Magento developers.

Keeping Magento Clean Using Git

• git is really required for managing a Magento installation.

• Use symbolic links and .gitignore for volatile directories and sensitive files.

• When used with composer gitignore will require a more complex strategy.

• Checkout Fabrizo Branca’s presentations on this for a very in depth study:http://www.slideshare.net/aoepeople/rock-solid-magentohttp://www.slideshare.net/aoepeople/2014-04-magento-meetup-composerhttp://www.slideshare.net/aoepeople/continuous-development-and-deployment-workflows-and-patterns

• Sonassi hass another great guide:https://www.sonassi.com/knowledge-base/our-magento-git-guide-and-work-flow/

Magento 101 – Mathew Beane – php[world] 2015

Magento Quick StartDevelopment Guide

35

Magento Extension Structure

Extension / Module Code

Configuration: Module configuration and status valuesBlocks: Classes for interfacing with phtml templatesControllers: Classes that handle request routingHelpers: General functions and helpersModels: Resource Models and Collections for DBInstallers/Upgrades: Install, upgrade and even remove extension data

Magento Extensions - Configuration

Module Status/app/etc/modules/demo_example.xml

<?xml version="1.0"?><config> <modules> <Demo_Example> <active>true</active> <codePool>community</codePool> </Demo_Example> </modules></config>

Module Config/app/code/community/Demo/Example/etc/config.xml

• Merged into with the rest of the configuration• Defines all models, blocks and classes for the

module• Similar to the app/etc/local.xml or data in the

core_config_data table• Controls installation and updates of module data

Magento Extensions - Designs

• Configuration Files: /app/etc/modules/demo_example.xmlDefinitions for Blocks, Layouts and Assets should be declared here.• Blocks: app/etc/code/community/Demo/Example/Blocks

Classes for interfacing with the templates. • Layouts:

app/design/frontend/base/default/layout/demo_example.xmlXML Configurations for Blocks.• Templates:

app/design/frontend/base/default/template/demo/template.phtmlXML Configurations for Blocks.• Media:

skin/frontend/base/default/[css,images,js]/demo/filenameExtension specific media assets

Magento Extensions - Code

• Controller: /app/code/community/Demo/Example/controllers/Router.phpDispatched through Front Controller object. Action is matched to class and method. Controller instances Layout Object which in turn calls Block classes.

• Helper: /app/code/community/Demo/Example/Helper/Data.phpUsed whenever you either are too lazy to make a model, or it just doesn’t make sense in the context of a model. (Does it have an internal state – It’s a model)

• Model: /app/code/community/Demo/Example/Model/Thing.phpUsed to model data structures. Oftentimes calling database through Resource Models. Resource Models wrap all database transactions. Additionally Magento uses collections to create and iterate through lists of Models.

Using Core Class Overrides

Easy and “Safe” way to override core functionalityFiles are placed in:

/app/code/local/Mage/Catalog/Block/Navigation.php

This will override and replace/app/code/core/Mage/Catalog/Block/Navigation.php

• Copy the file from the original and edit as you would expect.

• Use this method very sparingly. • It creates technical debt, because you

have to maintain your “copy” of the core file.

• Not the preferred method and some still consider this editing core.

Extensions - Rewriting Core Classes

• Still easy and a “Safer” way to override core functionality

• Requires an extension to create a class rewrite

• Rewrite class extends core class• Preserves code through upgrade• Much safer than just overriding

the whole class because its isolated in an extension.

• Chain rewrites together to create complex dependencies

• Winner takes all strategy makes this bothersome as site grows.

/app/code/community/Demo/Example/etc/config.xml<config> <global> <models> <catalog> <rewrite> <product>Demo_Example_Model_Product</product> </rewrite> </catalog> </models> </global></config>

/app/code/community/Demo/Example/Product.php<?php include(‘Mage/Catalog/Model/Product.php’); class Demo_Example_Model_Product extends Mage_Catalog_Model_Product{ // Functions here will rewrite the Magento Catalog Product Model Class }

Extensions - Events / Observers

• The proper way to hook into Magento Business Logic

• Declared in config.xml• Many Observers to One Event• Observers are Models in the

modules Model/ directory• Events are declared for most

things you will need to hook into• You can add your own Events,

combining this with the Rewrite or Override methods

/app/code/community/Demo/Example/etc/config.xml<config> <global> <events> <checkout_cart_product_add_after> <observers> <Demo_Example_Model_Observer> <type>singleton</type> <class>Demo_Example_Model_Observer</type> <method>addtocartEvent</method> </Demo_Example_Model_Observer> </observers > </checkout_cart_product_add_after> </events> </global></config>

/app/code/community/Demo/Example/Model/Observer.php class Demo_Example_Model_Observer { public function addtoCartEvent(Varien_Event_Observer $observer){ // Observer Code goes here } }

List of events in CE 1.9https://wiki.magento.com/display/m1wiki/Magento+1.x+Events+Reference

Extensions - Blocks

• Blocks are PHP Objects• Each block is tied to a single

Template file.• Inside the Template, $this

keyword refers to the Template’s Block object.

• Blocks can include Blocks nesting them utilizing the getChildHtml() method.

• Blocks are instanced from the Layout configuration, typically from layout XML files.

/app/code/community/Demo/Example/etc/config.xml<config> <global> <blocks> <exampleblock> <class>Demo_Example_Block</class> </exampleblock> </blocks> </global></config>

/app/code/community/Demo/Example/Block/Product.php<?phpclass Demo_Example_Block_Product extends Mage_Core_Block_Template{

//Functions that would be called in phtml// they would use the $this->functionName to call them

}

Extensions - Controllers

• Controllers are used to route requests.

• Controllers should be lightweight, keep business logic out of your controllers.

• No really, keep your logic in helpers or models.• Controller matches route• Class/Method is fired• Layout Object is instanced, it creates

all the blocks.• You can extend core controllers:

http://inchoo.net/dev-talk/how-to-extend-magento-core-controller/

• Learn more:http://alanstorm.com/magento_controller_hello_world

/app/code/community/Demo/Example/etc/config.xml<config> <frontend> <routers> <examplerouter> <args> <module>Demo_Example</module> <frontName>demoexample</frontname> </args> </ examplerouter > </routers> </frontend></config>

/app/code/community/Demo/Example/controllers/IndexController.php<?phpclass Demo_Example_Block_Product extends Mage_Core_Controller_Front_action {

public function indexAction(){ // would fire on http://site.com/demoexample

}}

Extensions – Install / Upgrade Scripts

• Uses the module version in app/etc/module/Demo_Example.xml and compares against the value in the core_resource table

• Requires resource models to be setup properly

• Install and upgrade scripts live in:app/code/community/Demo/Example/sql/uniquename/ Install-0.1.0.1.php would contain and $installer

• This will fire off on ANY request if the config_cache is cleared, “upgrading” modules, which can be confusing.

• Good Write up on this:http://alanstorm.com/magento_setup_resources

Installer scripts can be really confusing.

Magento 101 – Mathew Beane – php[world] 2015

Magento Quick StartTheme and Design Guide

46

Designs and Design Choices

• Designs can easily become extensions and become dependent on extensions easily.

• Designs are also highly dependent on the front-end HTML choices that are made.

• Magento has a built in Responsive Design(RWD)

• When designing for an existing or new site, there are a lot more constraints than when looking at extensions.

Layout XML Files

Layouts can drive how the page is displayedThis example is setting the homepage to be 1 column wide:

<demo_index_index>

<reference name=“root”>

<action method=“setTemplate”>

<template>page/1column.php</template>

</action>

</reference>

</demo_index_index>Use Commercebug to track

down which pieces of Layout are being rendered.

Layout XML - Templates and Blocks

Layouts also drive what loads where (blocks / templates)Here is an example of displaying the demo module content block:

<demo_index_index>

<reference name=“content”>

<block type=“core/template” name=“demo_content”

template=“demo/demo_content.phtml”>

</reference>

</demo_index_index>

Toggle on Template Path Hints to find out which piece is loading

where on the page, this can also show block class.

More on Templates and Blocks

Templates are the key to theming in Magento• Templates are created as “.phtml” documents

• Magic variable “$this” allows us to access parent block class

• Template best practices: Frontend components should be as modular as possible Logic should only be used when coming directly from parent block class Backend logic (i.e. querying data) should NEVER live in templates Responsive frameworks make prototyping easier and faster Don’t use hard URL paths, or include assets in templates.

One key component to designs we have

skipped over today is Handles, which are used to generate the layout

that will be used to render the templates

and blocks.

Acumen – A great starting design

http://themeforest.net/item/acumen-the-highly-extensible-magento-theme/978466

Acumen is a 5 year old theme by Gravity Department • 960 Grid• HTML5 + CSS3• High Quality• Loaded to the gills with widgets and

features• Maintained by author• Not Responsive Design

Magento 101 – Mathew Beane – php[world] 2015

Magento Training and Certification

Learning Magento

52

Magento Training

StackExchange: https://magento.stackexchange.com/Very active community, easy to get answers.

Magento site: http://magento.com/training/overviewTons of resources, documentations for Magento 1 is in a great spot. The on-demand videos are cheap and amazing.

Blogs:Alan Storm: http://alanstorm.com/ Belvg: http://blog.belvg.com/ Ichoo: http://inchoo.net/category/magento/Alan MacGregor: http://coderoncode.com/Alan Kent: http://alankent.me/

Magento Certification

Magento Certifications:• CERTIFIED SOLUTION SPECIALIST• FRONT END DEVELOPER• CERTIFIED DEVELOPER• CERTIFIED DEVELOPER PLUS

“Experienced Magento professionals can validate their real-world skills by earning a Magento Certification. Magento Certification Exams are geared toward professionals

who want to differentiate themselves from the competition with the ultimate Magento credential.”

- http://magento.com/training/catalog/certification

Magento Certification Subjects

Basics: Introduction to Magento code hierarchies, modules and configuration.Request Flow: Learn how Magento bootstraps itself and handles requests.Rendering: Understand how pages are rendered - themes, layouts, blocks and templates.Databases: Discover models, resources models and collections.EAV: Entity Attribute Value tables, explained.Adminhtml: Manage admin area forms and grids.Catalog: Find out about categories, products, layered navigation and taxes.Checkout: Covering quotes, orders and shipping and payment methods.Sales: Order creation and management.Advanced: API and Widgets etc.

Magento Certification Study Guides

http://info.magento.com/rs/magentocommerce/images/Certification-Study-Guide-MCD-v1.pdfOfficial study guide, a good starting point for studying for the exam. It will give you a broad overview of the subjects.

http://magento.com/training/catalog/technical-trackOn-demand course, really quite a good course even if a bit dated. Then again, so is the test.

http://magecert.com/Put together by some of the community as a way to dig into examples for each of the subjects in the test.

http://magento.com/training/catalog/moderators-kitCheap alternative, covers the entire gamut of the test and is really a great learning tool for teams.

https://shop.vinaikopp.com/grokking-magento/A great companion to the moderators kit, with Vinai Kopp taking you through each of the examples for the first part of the moderator kit.

Magento 101 – Mathew Beane – php[world] 2015

Magento 2It’s GO TIME!

57

Magento 2.0.0-RC1 Being Released

Magento 2 – Release Information

Six basic Goals of Magento 2• Modern Tech Stack• Improved Performance and

Scalability• Streamline Customizations• Simplify Integrations• Cleaner Install and Upgrades• High Quality Code & Testing

http://www.elevateweb.co.uk/magento-2/magento-live-uk-2014-magento-2-update

Magento 2 – Under the Hood

http://devdocs.magento.com/guides/v2.0/architecture/archi_perspectives/arch_diagrams.html

• PHP 5.7 / 7 / HHVM Support

• Dependency Injection• Service Layer/Contracts• Jquery• HTML 5, CSS, LESS• Require.js• Symfony & other 3rd

Party libraries• Composer• Full Test Coverage

Magento 2 – Features Overview

• Very modular with a strong backbone in open-source

• CE will not have all of the scalability and clustering features

• Many Client-side and frontend enhancements• Up to 3 master databases for separate business

domainsMain (Catalog),Checkout and Order

• Varnish support out of the box (Swapable for FPC)

• Support for RabbitMQ and other queueing systemsPresent in the deferred stock update feature

• Asynchronous order insertion

Magento 2.0.0-RC1 Being Released

Magento 2 – Get Involved

https://github.com/magento/magento2You can branch, make Pull Requests and they are actively participating in issues there.

http://magento.com/developers/magento2Central hub for all the official Magento 2 information

http://devdocs.magento.com/guides/v2.0/architecture/arch_whatis.htmlDocumentation, which is still being developed actively. You can branch and PR here as well.

http://magento.com/training/catalog/fundamentals-of-magento-2-developmentMagento 2 training course, on-demand. Still in development, however its very inexpensive right now.

Magento 2 – Learn More Here

Magento 2 Talks at php[world]• Magento 2 Dependency Injection, Interceptors, and You

Joshua Warren – Today @ 4:30 PM in Ash Grove C

• Magento 2: New and Innovative?David Alger – Wednesday @ 4:30pm in Potomac

• Extending Magento: Fundamentals of Development in Magento 2David Alger – Thursday @ 10:00am in Ash Grove C

63

Mathew Beane Tweeter: @aepod

mbeane@robofirm.com

https://joind.in/talk/view/14815

You – For attending. Thanks for showing up. My Family – For putting up with me making these slides. Magento Community – Very good people, deserve a lot of thanks. PHP Community – For just being so damned cool. Ben Marks - Community Magento @benmarks on twitter PHP Architect: Great conferences and real community leadership. Robofirm – They also put up with me making these slides.

THANKS TO THE FOLLOWING: