ExtBase Workshop

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!

Part 1: Basics

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

Extension Builder

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

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)

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!

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

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

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

MVC

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

Basic Setup ExtBase/FluidModel

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>

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

Folder Structure

• Model– /Classes Folder (without

Controller)• View– /Resources/Private:

Templates, Partials, Layouts• Controller– Classes/Controller

Folder Structure

• Configuration– TCA: Backend Tables– TypoScript

• Documentation• Resources– Language: Resources/Language– Assets: Resources/Public

• Tests– PHPUnit Tests

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

Part 2: Frontend

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/Fluid/ViewHelper

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

Practical Part

• edit this Template files: Resources/Private/Templates/Product/List.html

• edit some HTML and see result in Frontend

Let's add some Fluid• show preview image:<f:image src="{product.image.originalResource.publicUrl}" 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>

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...)

Part 3: CRUD

Create - Read - Update - Delete

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

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

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!

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 Vendor\MyExtensionName\Controller;class ContactController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController {...}

• shortcut for long namespaces:use TYPO3\CMS\Core\Utility\GeneralUtility; 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/

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 LobacherBuch: Amazon Print OnDemandeBook: https://leanpub.com/typo3extbase

– TYPO3 docs https://docs.typo3.org• Extension Code

– News, Blog example extension – sysext of Extbase and Fluid