Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ExtBase Workshop
This is the plan...
• Hour 1: Create a basic shop extension
• Hour 2: Frontend & templating
• Hour 3: Writing code and add...
Part 1: Basics
Your working environment
• TYPO3 7.6
– use local installation if you have one
– use the jweiland starter package
• IDE: PH...
Extension Builder
Extension Builder: Modelling
• New Model Object = table in database
• Domain Object Settings: aggregate root?
Yes means: C...
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...
Extension Builder Do's and Don't
• It looks like a UML modelling tool and/or code generator - but
it's not!!!
Its just som...
Our Project: NerdShop
• Create a small shop with items to make a nerd
happy!
• Product: our products we want to sell, like...
Install Extension in TYPO3
• Extension Manager -> Install
– creates Database Tables
– every table change needs install aga...
Practical Part
• Todo:
– Load your Plugin page in Frontend and see if page
shows "Listing..." of your plugin
– Add some pr...
MVC
• Controller: Program Flow, Actions
• View: Templates & Fluid
• Model: Code, Repository, Database
Basic Setup ExtBase/Fluid
Model
Controller
Fluid Template
public function getTitle() {
return $this->title;
}
public funct...
Folder Structure
• Main Files:
– ext_emconf*: Extension
Manager config
– ext_icon*: Extension icon
– ext_localconf: Fronte...
Folder Structure
• Model
– /Classes Folder (without
Controller)
• View
– /Resources/Private:
Templates, Partials, Layouts
...
Folder Structure
• Configuration
– TCA: Backend Tables
– TypoScript
• Documentation
• Resources
– Language: Resources/Lang...
Practical part
• Download your generated code and open it in
PHPStorm (/typo3conf/ext/nerdshop)
• Read generated Code, ide...
Part 2: Frontend
Templates
• Idea: separate Code from HTML, use extra template
files
• Fluid is a template language to handle content (like...
Templates
• There is a Template hierarchy for a better structure:
• Layout:
– at least one empty file "Default.html"
– gen...
Practical Part
• edit this Template files:
Resources/Private/Templates/Product/List.ht
ml
• edit some HTML and see result ...
Let's add some Fluid
• show preview image:
<f:image
src="{product.image.originalResource.publi
cUrl}" width="100"/>
• pars...
Add TypoScript, Css, Jss
• Create a nerdshop.js and nerdshop.css in
Resources folder
• Configuration/TypoScript/setup.txt:...
Part 3: CRUD
Create - Read - Update - Delete
Database: Repository
• Lots of default functions:
– findAll = SELECT * FROM table
– findByName($val) =
SELECT * FROM table...
Controller: new Action
• new Action: addToCart Button
• ProductController: add new function
public function addToCartActio...
PHPDoc
• PHP Doc comments were made for code documentation, helper function popups,
class documentation:
@param int $numbe...
Namespaces
• without namespaces, unique class names were like this:
class Tx_MyExtensionName_Controller_ContactController
...
Where do I find documentation?
• Extension Builder: the kickstarter for Extbase
• Books and links:
– Developing TYPO3 Exte...
Nächste SlideShare
Wird geladen in …5
×

ExtBase workshop

747 Aufrufe

Veröffentlicht am

Workshop ExtBase for beginners, estimated time 3h
Codes are in: https://github.com/aschmutt/t3extbase

Veröffentlicht in: Software
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

ExtBase workshop

  1. 1. ExtBase Workshop
  2. 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. 3. Part 1: Basics
  4. 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. 5. Extension Builder
  6. 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. 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. 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. 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. 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. 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. 12. MVC • Controller: Program Flow, Actions • View: Templates & Fluid • Model: Code, Repository, Database
  13. 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. 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. 15. Folder Structure • Model – /Classes Folder (without Controller) • View – /Resources/Private: Templates, Partials, Layouts • Controller – Classes/Controller
  16. 16. Folder Structure • Configuration – TCA: Backend Tables – TypoScript • Documentation • Resources – Language: Resources/Language – Assets: Resources/Public • Tests – PHPUnit Tests
  17. 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. 18. Part 2: Frontend
  19. 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. 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. 21. Practical Part • edit this Template files: Resources/Private/Templates/Product/List.ht ml • edit some HTML and see result in Frontend
  22. 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. 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. 24. Part 3: CRUD Create - Read - Update - Delete
  25. 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. 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. 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. 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. 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

×