Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Anatomy of TYPO3 Sitepackages

The Anatomy of TYPO3 Sitepackages

Modern website building in TYPO3

Sitepackage Builder
http://www.sitepackagebuilder.com

Example Package
https://github.com/benjaminkott/example_package

Bootstrap Package
https://github.com/benjaminkott/bootstrap_package

Benjamin Kott

May 09, 2015
Tweet

More Decks by Benjamin Kott

Other Decks in Programming

Transcript

  1. THE ANATOMY OF
    SITEPACKAGES
    Modern website building in TYPO3

    View Slide

  2. Benjamin Kott
    Front-end Developer at TeamWFP
    Member of the TYPO3 UX Team
    Düsseldorf, Germany
    facebook.com/benjamin.kott
    twitter.com/benjaminkott
    github.com/benjaminkott
    bk2k.info
    THE ANATOMY OF SITEPACKAGES
    2

    View Slide

  3. Benjamin Kott
    Front-end Developer at TeamWFP
    Member of the TYPO3 UX Team
    Düsseldorf, Germany
    facebook.com/benjamin.kott
    twitter.com/benjaminkott
    github.com/benjaminkott
    bk2k.info
    THE ANATOMY OF SITEPACKAGES
    3
    That is Dave.
    Dave is Frank Näglers
    personal Minion. Every time
    Frank commits bullshit to the
    TYPO3 Core, it was Dave.
    Dave really, really wanted
    to be part of this presentation.

    View Slide

  4. 4 THE ANATOMY OF SITEPACKAGES
    Build #6480 (fcec4ef) of
    TYPO3/[email protected]
    by Frank Nägler failed in 10 min
    32 sec
    It´s not my fault!
    Eh. Banana?

    View Slide

  5. 5 THE ANATOMY OF SITEPACKAGES
    Agenda
      
    The what and why? Lots of technical stuff! Final Conclusion.

    View Slide

  6. 6 THE ANATOMY OF SITEPACKAGES
    W
    The what and why?

    View Slide

  7. What is a Sitepackage?
    It´s all about definition.
    7 THE ANATOMY OF SITEPACKAGES

    View Slide

  8. Different names for
    the same @!?#&%§ shit.
    Base Extension
    Template Extension
    Sitepackage
    Site Foundation
    Distribution*

    8 THE ANATOMY OF SITEPACKAGES
    * A Distribution normally contains a pre-set of pages and assets,
    in this case we will not make use of it. It´s listed for sake of completeness.

    View Slide

  9. „A sitepackage is an extension
    for TYPO3 that contains
    all relevant configurations
    for a website.“
    9 THE ANATOMY OF SITEPACKAGES

    View Slide

  10. Why should you care
    about a Sitepackage?
    It @!?#&%§ works for me™ to put
    everything in the fileadmin.
    10 THE ANATOMY OF SITEPACKAGES

    View Slide

  11. Your configuration files
    are indexed by FAL.
    All files you upload into the fileadmin are automatically
    indexed from the file abstraction layer if not disabled.
    Lots of totally useless records that should not
    be there at any point.
    11 THE ANATOMY OF SITEPACKAGES

    View Slide

  12. FAL records are not updated
    if files are uploaded via FTP.
    The only way FAL recognizes file changes or deletions
    is if they are done using the backend or the API directly.
    Files that are changed outside can cause fatal error,
    if this file is referenced and deleted via FTP.
    12 THE ANATOMY OF SITEPACKAGES

    View Slide

  13. 13 THE ANATOMY OF SITEPACKAGES

    View Slide

  14. Fileadmin is userspace.
    Files within the fileadmin directory are edited and maintained by an
    editor who usually does not have the knowledge to so it properly.
    It´s better to protect the editor from
    accidentally breaking a part of the internet.
    14 THE ANATOMY OF SITEPACKAGES

    View Slide

  15. Configurations should be
    in your version control.
    Having the configuration files in the fileadmin is a
    strong indicator for missing version control.
    We should talk about that…
    15 THE ANATOMY OF SITEPACKAGES

    View Slide

  16. 16 THE ANATOMY OF SITEPACKAGES
    Source: http://www.commitstrip.com/en/2013/11/05/git-svn-ou/

    View Slide

  17. You are not able to handle
    Extension dependencies.
    Without dependency management you have no idea which extensions
    and which version is needed to maintain a running website.
    17 THE ANATOMY OF SITEPACKAGES

    View Slide

  18. Dependencies
    The Extension Manager is your friend.
    18 THE ANATOMY OF SITEPACKAGES
    For example sitepackage extension could
    require Bootstrap Package, News & Seo
    Basics in the newest available version on
    installation.

    View Slide

  19. Your TypoScript
    Setup and Constants are saved
    in the template record.
    The setup and constant field of a template record is
    the last possibility to override the TypoScript configuration
    of your TYPO3 page within that record.
    19 THE ANATOMY OF SITEPACKAGES

    View Slide

  20. 20 THE ANATOMY OF SITEPACKAGES
    Template Record
    Static template sorting.
    Instead of putting your setup and constants
    directly in the template record or include it
    there its more easy to make use of Static
    Templates.
    General Options Includes Access
    Template
    Include static (from extensions)
    CSS Styled Content
    (css_styled_content)
    Selected Items Available Items
    Bootstrap Package
    (bootstrap_package)
    Example Package
    (example_package)
    General Options Includes Access
    Template
    Constants

    Setup

    Static Templates
    and loading order.

    View Slide

  21. Your configuration is
    @!?#&%§ public accessible.
    Most users that put their configuration files in the
    fileadmin folder, forget to protect it from external access.
    Want so see how not to do it?
    Bing „fileadmin setup.txt“ or „fileadmin setup.ts“
    21 THE ANATOMY OF SITEPACKAGES

    View Slide

  22. plugin.tx_odstwitter_pi1 {
    consumerKey = XXXXXX
    consumerSecret = XXXXXX
    accessToken = XXXXXX
    accessTokenSecret = XXXXXX
    }
    22 THE ANATOMY OF SITEPACKAGES

    View Slide

  23. plugin.ldap.auth {
    username = admin
    password = XXXXXX
    }
    23 THE ANATOMY OF SITEPACKAGES

    View Slide

  24. You don´t want your
    configuration to be
    public accessible!
    NEVER. EVER. EVERERERERER!
    24 THE ANATOMY OF SITEPACKAGES

    View Slide

  25. … we could do this for hours.
    25 THE ANATOMY OF SITEPACKAGES

    View Slide

  26. Benefits of Sitepackages!
    Yummy, yummy!
    26 THE ANATOMY OF SITEPACKAGES

    View Slide

  27. Facts
    Config files editable through file module
    Config files not accessible by editors
    Config files are protected *
    Autoload PageTS
    Autoload TypoScript
    Static TypoScript Template
    Dependency Management
    Distrubution through TER possible
    Deployment through Extension Manager
    Clean Version Control possible
    Sitepackage










    27 THE ANATOMY OF SITEPACKAGES
    Fileadmin










    * Possible but not common practice

    View Slide

  28. 28 THE ANATOMY OF SITEPACKAGES
    T
    Technical Stuff

    View Slide

  29. Structure
    Stick to the Conventions.
    29 THE ANATOMY OF SITEPACKAGES

    View Slide

  30. Basic Structure
     Classes
     Configuration
     Documentation
     Initialisation
     Resources
     ext_conf_template.txt
     ext_emconf.php
     ext_icon.png
     ext_localconf.php
     ext_tables.php
     ext_tables.sql
    Controller, ViewHelpers
    TypoScript, PageTS, TCA
    Manual in reStructuredText format
    Data / Assets for Fileadmin
    Templates, Images, CSS, JS, …
    Extension Manager Configuration
    Extension Configuration
    Extension Icon
    Executed in FE and BE
    Executed in BE
    Database Schema
    30 THE ANATOMY OF SITEPACKAGES

    View Slide

  31.  Classes
     Controller
     Domain
     Model
     Repository
     Hook
     ViewHelpers
    MVC Controller
    MVC Domain Model
    Data Repositorys
    Core Manipulation Scripts
    Custom Fluid ViewHelper
    31 THE ANATOMY OF SITEPACKAGES

    View Slide

  32.  Configuration
     PageTS
     RTE.txt
     TCEFORM.txt
     TCA
     Overrides
     tt_content.php
     tx_myext_record.php
     TypoScript
     setup.txt
     constants.txt
     .htaccess
    PageTS for your Website
    TCA Definition for your own
    tables
    TCA Overrides for existing
    tables
    TypoScript Static Template
    Protect your stuff!
    32 THE ANATOMY OF SITEPACKAGES

    View Slide

  33.  Documentation
    docs.typo3.org/typo3cms/CoreApiReference/ExtensionArchitecture/Documentation/I
    ndex.html
    Call for help!
    [email protected]
    twitter.com/T3docTeam
    Documentation is hard and we are all really bad in this.
    It helps you to remember and others to understand what
    and how things work.
    33 THE ANATOMY OF SITEPACKAGES

    View Slide

  34.  Initialisation
     Files
     Images
     Example_1.png
     Example_2.jpg
     Example_3.txt
     data.t3d
    Files added here, they will be
    copied to fileadmin/extension/
    during installation
    Export of your database it will
    be imported at page root level
    during installation
    34 THE ANATOMY OF SITEPACKAGES

    View Slide

  35.  Resources
     Private
     Languages
     Layouts
     Partials
     Templates
     .htaccess
     Public
     Css
     Images
     JavaScript
    Private protected files
    XLIFF/XML files for localized labels
    Main layouts for the views
    Partial templates for repetitive use
    Templates for the views
    Protect your stuff!
    Public accessible files
    Any CSS file used by the extension
    Any images used by the extension
    Any JS file used by the extension
    35 THE ANATOMY OF SITEPACKAGES

    View Slide

  36. Minimal Setup
    Let´s start small.
    36 THE ANATOMY OF SITEPACKAGES

    View Slide

  37. Example Package
    Just enough to get the party starting.
    Extension
    Dependency to CSS Styled Content
    Basic TypoScript
    Basic PageTS
    Fluid Template
    CSS file
    JavaScript file
    37 THE ANATOMY OF SITEPACKAGES

    View Slide

  38. typo3conf/ext/example_package
    Head to the directory and create a folder with a name of your choice like
    „example_package“. This will be the container of your sitepackage and
    also your extension key.
    38 THE ANATOMY OF SITEPACKAGES
    Extension Directory Your Extension

    View Slide

  39.  example_package
     Configuration
     Resources
     ext_emconf.php
     ext_icon.png
     ext_localconf.php
     ext_tables.php
    TypoScript, PageTS, TCA
    Templates, Images, CSS, JS, …
    Extension Configuration
    Extension Icon
    Executed in FE and BE
    Executed in BE
    39 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext

    View Slide

  40.  ext_emconf.php
    $EM_CONF[$_EXTKEY] = array(
    'title' => 'Example Package',
    'description' => '',
    'category' => 'templates',
    'version' => '1.0.0',
    'state' => 'stable',
    'clearcacheonload' => 1,
    'author' => 'Benjamin Kott',
    'author_email' => '[email protected]',
    'author_company' => '',
    'constraints' => array(
    'depends' => array(
    'typo3' => '6.2.12-7.99.99',
    'css_styled_content' => '6.2.0-7.99.99',
    ),
    'conflicts' => array(
    'fluidpages' => '*',
    'themes' => '*',
    ),
    ),
    );
    Title
    A title for your extension.
    Category
    Type of category the extension should be
    listed in. Use template for general usage
    and distribution for a listing in the
    distributions section.
    Dependencies
    Additional Extensions, for example like a
    news extension or a specific core version.
    Conflicts
    Known issues with other extensions can
    be placed here to avoid that these
    extension are running parallel in your
    system.
    40 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package

    View Slide

  41.  ext_icon.png
    41 THE ANATOMY OF SITEPACKAGES
    Make it pretty. Please.
    64x64 PNG are welcome.
     typo3conf /  ext /  example_package

    View Slide

  42.  ext_localconf.php
    if (!defined('TYPO3_MODE')) {
    die('Access denied.');
    }
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
    ''
    );
    42 THE ANATOMY OF SITEPACKAGES
    Add PageTS by default*
    * You should really know what you are doing before adding global PageTS.
    After adding its set for all Websites in your TYPO3 instance.
     typo3conf /  ext /  example_package

    View Slide

  43.  ext_tables.php
    if (!defined('TYPO3_MODE')) {
    die('Access denied.');
    }
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
    $_EXTKEY, // Extension Key
    'Configuration/TypoScript', // Path to setup.txt and constants.txt
    'Example Package' // Title in the selector box
    );
    43 THE ANATOMY OF SITEPACKAGES
    Add static template to
    the template record
    General Options Includes Access
    Template
    Include static (from extensions)
    Example Package (example_package)
    CSS Styled Content (css_styled_content)
    Bootstrap Package (bootstrap_package)
    Selected Items Available Items
     typo3conf /  ext /  example_package

    View Slide

  44.  Configuration
     PageTS
     TCEFORM.txt
     TypoScript
     setup.txt
     constants.txt
    Basic PageTS
    Basic Setup
    Basic Constants
    44 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package

    View Slide

  45.  TCEFORM.txt
    ## TCEFORM
    TCEFORM {
    pages {
    layout.disabled = 1
    }
    tt_content {
    // NOBODY wants or should edit this
    // really, let them disappear
    table_bgColor.disabled = 1
    table_border.disabled = 1
    table_cellspacing.disabled = 1
    table_cellpadding.disabled = 1
    pi_flexform.table.sDEF {
    acctables_nostyles.disabled = 1
    acctables_tableclass.disabled = 1
    }
    }
    }
    45 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  PageTS
    You should really know what you are
    doing before adding global PageTS
    like in this example. After adding its set
    for all Websites in your TYPO3
    instance.
    See ext_localconf.php as example how
    to add PageTS globally.

    View Slide

  46.  constants.txt
    ## PAGE
    page {
    template {
    # cat=example package: advanced/100/100; type=string; label=Layout Root Path: Path to layouts
    layoutRootPath = EXT:example_package/Resources/Private/Layouts/
    # cat=example package: advanced/100/110; type=string; label=Partial Root Path: Path to partials
    partialRootPath = EXT:example_package/Resources/Private/Partials/
    # cat=example package: advanced/100/120; type=string; label=Template Root Path: Path to templates
    templateRootPath = EXT:example_package/Resources/Private/Templates/
    }
    }
    46 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  TypoScript
    Use TypoScript Constants and
    configuration for the Constant Editor to
    have your Sitepackage ready for
    multisite usage or to easily make
    adjustments to your website.

    View Slide

  47.  setup.txt
    ## DEPENDENCIES

    47 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  TypoScript
    Load the needed TypoScript from
    dependant extensions to avoid sorting
    of static tempates in the template
    record.
    To avoid unnecessary work we are
    depending css_styled_content for the
    content rendering in this example.

    View Slide

  48.  setup.txt
    ## CONTENT SELECTION
    lib.dynamicContent = COA
    lib.dynamicContent {
    5 = LOAD_REGISTER
    5.colPos.cObject = TEXT
    5.colPos.cObject {
    field = colPos
    ifEmpty.cObject = TEXT
    ifEmpty.cObject {
    value.current = 1
    ifEmpty = 0
    }
    }
    20 < styles.content.get
    20.select.where = colPos={register:colPos}
    20.select.where.insertData = 1
    90 = RESTORE_REGISTER
    }
    48 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  TypoScript
    Content selection for use in Fluid
    cObject ViewHelper with data pass-
    through.
    typoscriptObjectPath="lib.dynamicCont
    ent“ data="{colPos: '0'}" />

    View Slide

  49.  setup.txt
    ## PAGE – Part 1
    page = PAGE
    page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    default = TEXT
    default.value = {$page.template.templateRootPath}Default.html
    default.insertData = 1
    }
    partialRootPath = {$page.template.partialRootPath}
    layoutRootPath = {$page.template.layoutRootPath}
    }
    }
    49 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  TypoScript
    Page-Templates based
    on Fluid for super
    easy templating.
    BackendLayouts used
    to select the Template.

    View Slide

  50.  setup.txt
    ## PAGE – Part 2
    page {
    includeCSS {
    main = EXT:example_package/Resources/Public/Css/main.css
    }
    includeJSFooterlibs {
    main = EXT:example_package/Resources/Public/JavaScript/main.js
    }
    }
    50 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Configuration /  TypoScript
    Include CSS and
    JavaScript files with
    the EXT: notation from
    the extension
    directory.

    View Slide

  51.  Resources
     Private
     Layouts
     Default.html
     Templates
     Default.html
     Public
     Css
     main.css
     JavaScript
     main.js
    Default Layout
    Default Template
    Basic CSS
    Basic JavaScript
    51 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package

    View Slide

  52.  Default.html

    52 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Resources /  Private /  Layouts
     Default.html


    HELLO WORLD


     typo3conf /  ext /  example_package /  Resources /  Private /  Templates
    Render the Section

    Select the Layout

    View Slide

  53.  main.css
    body {
    background-color: #ffffff;
    color: #333333;
    }
    53 THE ANATOMY OF SITEPACKAGES
     typo3conf /  ext /  example_package /  Resources /  Public /  Css
     main.js
    console.log('I LOVE TYPO3');
     typo3conf /  ext /  example_package /  Resources /  Public /  JavaScript

    View Slide

  54. That is everything you need!
    A minimum configuration with 11 files in total.
    54 THE ANATOMY OF SITEPACKAGES

    View Slide

  55. Download
    github.com/benjaminkott/example_package
    55 THE ANATOMY OF SITEPACKAGES

    View Slide

  56. Create your very own
    Sitepackage now.
    S/PKG/BLD
    sitepackagebuilder.com
    56 THE ANATOMY OF SITEPACKAGES

    View Slide

  57. 57 THE ANATOMY OF SITEPACKAGES
    F
    Final Words

    View Slide

  58. Wrapping up
    Getting to an end.
    58 THE ANATOMY OF SITEPACKAGES

    View Slide

  59. It may surprise you…
    …but everything you find in this
    presentation is not new.
    59 THE ANATOMY OF SITEPACKAGES

    View Slide

  60. Questions?
    Ask me anything! But not now…I think we don’t have any time left.
    60 THE ANATOMY OF SITEPACKAGES

    View Slide

  61. Thank you for your patience
    63 slides in 45 minutes, sorry about that.
    61 THE ANATOMY OF SITEPACKAGES

    View Slide

  62. Resources
    Sitepackage Builder
    sitepackagebuilder.com
    Example Package
    github.com/benjaminkott/example_package
    Boostrap Package
    github.com/benjaminkott/bootstrap_package
    Distribution Management
    wiki.typo3.org/Blueprints/DistributionManagement
    Extension Architecture
    docs.typo3.org/typo3cms/CoreApiReference/ExtensionArchitecture/Index.html
    62 THE ANATOMY OF SITEPACKAGES

    View Slide

  63. www.teamwfp.de
     @benjaminkott

    View Slide