1.
ExtBase Workshop

2.
This is the plan...
• Hour 1: Create a basic shop extension
• Hour 2: Frontend & templating
• Hour 3: Writing code and add functionality
... and now the plan meets reality!

3.
Part 1: Basics

4.
Your working environment
• TYPO3 7.6
– use local installation if you have one
– use the jweiland starter package
• IDE: PHPStorm
• install Extensions: "extension_builder" and
"phpmyadmin"
• Code for this project:
https://github.com/aschmutt/t3extbase

5.
Extension Builder

6.
Extension Builder: Modelling
• New Model Object = table in database
• Domain Object Settings: aggregate root?
Yes means: Controller will be created
– use for central objects where controller makes sense
– do not use for subtables like: size, color,...
• Default Actions:
– if checked, code will be generated
– add more if you want - this can be done manually later
• Properties:
– fields like title, name, description
– generates: SQL for table fields, TCA for TYPO3 Backend, Object
properties with getter and setter

7.
Extension Builder: Relations
• Add a field
– Type: database type of relation 1:1, 1:n, n:1, n:m
– Drag&Drop the dot to the other table (blue line)

8.
Extension Builder Do's and Don't
• It looks like a UML modelling tool and/or code generator - but
it's not!!!
Its just some sample code, has versioning errors, etc.
Always read and understand the generated code!
• Good for:
– getting started
– first start of a extension, concept phase
– Code generation for tables, sql, Object model, TCA
• Bad for:
– difficult relations
– Anything that breaks the Object=Table pattern
– overwrite/merge options are available - but I don't trust them.
Make backups and use diff tools!

9.
Our Project: NerdShop
• Create a small shop with items to make a nerd
happy!
• Product: our products we want to sell, like
shirts and gadgets
– Properties: title, description, image
• Order: a list of the items in our shopping cart
– Properties: orderNumber, name, address
– Relation: products n:m

10.
Install Extension in TYPO3
• Extension Manager -> Install
– creates Database Tables
– every table change needs install again
• create a Page and add a Plugin Content Element
– choose your Frontend Plugin in Plugin Tab
– Page settings -> disable cache (for development)
• create a Data Folder and add some products
• Template configuration:
– add Extension Template on this page
– Info/Modify -> Edit the whole template record -> Include Static (from
extensions)
This adds our Configuration files: Configuration/TypoScript/setup.txt and
constants.txt
– add Data Folder UID to setup (31 is my example folder UID):
plugin.tx_nerdshop_shop.persistence.storagePid = 31

11.
Practical Part
• Todo:
– Load your Plugin page in Frontend and see if page
shows "Listing..." of your plugin
– Add some products in Frontend and see if they are
in list view in backend
– edit products in backend, add images and see if
they appear in frontend

12.
MVC
• Controller: Program Flow, Actions
• View: Templates & Fluid
• Model: Code, Repository, Database

13.
Basic Setup ExtBase/Fluid
Model
Controller
Fluid Template
public function getTitle() {
return $this->title;
}
public function listAction() {
$products = $this->productRepository-
>findAll();
$this->view->assign('products', $products);
}
<f:for each="{products}" as="product">
<tr>
<td>
<f:link.action action="show"
arguments="{product : product}">
{product.title}
</f:link.action>
</td>
</tr>
</f:for>

14.
Folder Structure
• Main Files:
– ext_emconf*: Extension
Manager config
– ext_icon*: Extension icon
– ext_localconf: Frontend config
– ext_tables.php: Backend config
– ext_tables.sql: SQL Statements
* required fields for a extension

15.
Folder Structure
• Model
– /Classes Folder (without
Controller)
• View
– /Resources/Private:
Templates, Partials, Layouts
• Controller
– Classes/Controller

16.
Folder Structure
• Configuration
– TCA: Backend Tables
– TypoScript
• Documentation
• Resources
– Language: Resources/Language
– Assets: Resources/Public
• Tests
– PHPUnit Tests

17.
Practical part
• Download your generated code and open it in
PHPStorm (/typo3conf/ext/nerdshop)
• Read generated Code, identify Controller -
View - Model
• Click around in Frontend, URL shows name of
Controller and Action, and find where it is in
the code

18.
Part 2: Frontend

19.
Templates
• Idea: separate Code from HTML, use extra template
files
• Fluid is a template language to handle content (like
Smarty or Twig)
• Controller:
$title = $product->getTitle();
$this->view->assign('title',$title);
• View:
<h1>{title}</h1>
• https://docs.typo3.org/typo3cms/ExtbaseGuide/Flui
d/ViewHelper

20.
Templates
• There is a Template hierarchy for a better structure:
• Layout:
– at least one empty file "Default.html"
– general layout, for example a extension wrapper
<div class="myextension>...</div>
• Templates
– one template for every action
– other templates are possible, e.g. Mail templates
• Partials
– reusable subparts
– example: Extension Builder generates "Properties.html" for show
action

21.
Practical Part
• edit this Template files:
Resources/Private/Templates/Product/List.ht
ml
• edit some HTML and see result in Frontend

22.
Let's add some Fluid
• show preview image:
<f:image
src="{product.image.originalResource.publi
cUrl}" width="100"/>
• parse HTML from RTE:
<f:format.html>{product.description}
</f:format.html>
• use Bootstrap buttons for some links:
<f:link.action class="btn btn-default"
action="edit" arguments="{product :
product}">Edit</f:link.action>

23.
Add TypoScript, Css, Jss
• Create a nerdshop.js and nerdshop.css in
Resources folder
• Configuration/TypoScript/setup.txt:
page {
includeCSS {
nerdshop = EXT:nerdshop/Resources/Public/Css/nerdshop.css
}
includeJS {
nerdshop = EXT:nerdshop/Resources/Public/Js/nerdshop.js
}
}
• Template: Include Static (we did this in install
step already...)

24.
Part 3: CRUD
Create - Read - Update - Delete

25.
Database: Repository
• Lots of default functions:
– findAll = SELECT * FROM table
– findByName($val) =
SELECT * FROM table where name like „$val
– findOneByArticleNo($id)
SELECT … limit 1
– Add, remove, update, replace
• Query Syntax (same principle as doctrine):
$query->createQuery;
$query->matching(),
constraints,
$query->execute
• SQL Statements for raw queries:
$query->statement('SELECT ... HAVING ...')
• https://docs.typo3.org/typo3cms/ExtbaseFluidBook/6-Persistence/3-implement-
individual-database-queries.html

26.
Controller: new Action
• new Action: addToCart Button
• ProductController: add new function
public function addToCartAction(Product $product)
{ }
• ext_localconf.php: add Action-Name (function name without the string
"Action")
• HTML Template: add new file in View folder, 1. letter uppercase!
Resource/Private/Templates/Product/AddToCart.html

27.
PHPDoc
• PHP Doc comments were made for code documentation, helper function popups,
class documentation:
@param int $number number for size
@return string
• You can generate automated documentation from phpdoc
• ExtBase uses PHPDoc Comments also for operations - so they are required now!
@validate
@inject
• Attention: PHP Opcode like
"eAccelerator" needs to be
configured, in default setting
the comments are removed!

28.
Namespaces
• without namespaces, unique class names were like this:
class Tx_MyExtensionName_Controller_ContactController
extends Tx_Extbase_MVC_Controller_ActionController {...}
• with Namespace, it is like this:
namespace VendorMyExtensionNameController;
class ContactController extends
TYPO3CMSExtbaseMvcControllerActionController {...}
• shortcut for long namespaces:
use TYPO3CMSCoreUtilityGeneralUtility;
GeneralUtility::underscoredToUpperCamelCase($var);
• Learn more about Namespaces
– in PHP: http://php.net/manual/en/language.namespaces.php
– in TYPO3: https://docs.typo3.org/typo3cms/CoreApiReference/latest/
ApiOverview/Namespaces/

29.
Where do I find documentation?
• Extension Builder: the kickstarter for Extbase
• Books and links:
– Developing TYPO3 Extensions with Extbase and Fluid, Sebastian
Kurfürst
Buch: O'Reilly Press
Online: https://docs.typo3.org/typo3cms/ExtbaseFluidBook/
– TYPO3 ExtBase, Patric Lobacher
Buch: Amazon Print OnDemand
eBook: https://leanpub.com/typo3extbase
– TYPO3 docs https://docs.typo3.org
• Extension Code
– News, Blog example extension
– sysext of Extbase and Fluid