[GitHub/WoltLab/woltlab.github.io.git] / latest / getting-started / index.html


<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      <link rel="icon" href="../assets/default.favicon.ico">
      <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
    
    
        <title>Getting Started - WoltLab Suite Documentation</title>
      
    
      <link rel="stylesheet" href="../assets/stylesheets/main.33e2939f.min.css">
      
        
        <link rel="stylesheet" href="../assets/stylesheets/palette.ef6f36e2.min.css">
        
          
          <meta name="theme-color" content="#009485">
        
      
      <link rel="stylesheet" href="../stylesheets/extra.css">
    
    
  </head>
  
  
    <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  
    
    <script>function __prefix(e){return new URL("..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#creating-a-simple-package" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-announce">
          <div class="md-announce__inner md-grid md-typeset">
            
    <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>

          </div>
        </aside>
      
    </div>
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href=".." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            WoltLab Suite Documentation
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Getting Started
            
          </span>
        </div>
      </div>
    </div>
    
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
      </label>
      
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
      </label>
      <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        
<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
</header>
    
    <div class="md-container" data-md-component="container">
      
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    WoltLab Suite Documentation
  </label>
  
    <div class="md-nav__source">
      
<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
      
        
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Getting Started
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        Getting Started
      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#setup-and-requirements" class="md-nav__link">
    Setup and Requirements
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-packagexml-file" class="md-nav__link">
    The package.xml File
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-php-class" class="md-nav__link">
    The PHP Class
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-template" class="md-nav__link">
    The Template
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-page-definition" class="md-nav__link">
    The Page Definition
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#building-the-package" class="md-nav__link">
    Building the Package
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#installation" class="md-nav__link">
    Installation
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#developer-tools" class="md-nav__link">
    Developer Tools
  </a>
  
    <nav class="md-nav" aria-label="Developer Tools">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#registering-a-project" class="md-nav__link">
    Registering a Project
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#synchronizing" class="md-nav__link">
    Synchronizing
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#appendix" class="md-nav__link">
    Appendix
  </a>
  
    <nav class="md-nav" aria-label="Appendix">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#template-guessing" class="md-nav__link">
    Template Guessing
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
      
      <label class="md-nav__link" for="__nav_2">
        PHP API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="PHP API" data-md-level="1">
        <label class="md-nav__title" for="__nav_2">
          <span class="md-nav__icon md-icon"></span>
          PHP API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../php/pages/" class="md-nav__link">
        Pages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/database-objects/" class="md-nav__link">
        Database Objects
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/database-access/" class="md-nav__link">
        Database Access
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/exceptions/" class="md-nav__link">
        Exceptions
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
      
      <label class="md-nav__link" for="__nav_2_5">
        API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="API" data-md-level="2">
        <label class="md-nav__title" for="__nav_2_5">
          <span class="md-nav__icon md-icon"></span>
          API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
      
      <label class="md-nav__link" for="__nav_2_5_1">
        Caches
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Caches" data-md-level="3">
        <label class="md-nav__title" for="__nav_2_5_1">
          <span class="md-nav__icon md-icon"></span>
          Caches
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../php/api/caches/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/caches_persistent-caches/" class="md-nav__link">
        Persistent Caches
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/caches_runtime-caches/" class="md-nav__link">
        Runtime Caches
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/comments/" class="md-nav__link">
        Comments
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/cronjobs/" class="md-nav__link">
        Cronjobs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/events/" class="md-nav__link">
        Events
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
      
      <label class="md-nav__link" for="__nav_2_5_5">
        Form Builder
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
        <label class="md-nav__title" for="__nav_2_5_5">
          <span class="md-nav__icon md-icon"></span>
          Form Builder
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../php/api/form_builder/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/form_builder/structure/" class="md-nav__link">
        Structure
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/form_builder/form_fields/" class="md-nav__link">
        Fields
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/form_builder/validation_data/" class="md-nav__link">
        Validation and Data
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/form_builder/dependencies/" class="md-nav__link">
        Dependencies
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/package_installation_plugins/" class="md-nav__link">
        Package Installation Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/user_activity_points/" class="md-nav__link">
        User Activity Points
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/user_notifications/" class="md-nav__link">
        User Notifications
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/api/sitemaps/" class="md-nav__link">
        Sitemaps
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/code-style/" class="md-nav__link">
        Code Style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/apps/" class="md-nav__link">
        Apps
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../php/gdpr/" class="md-nav__link">
        GDPR
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
      
      <label class="md-nav__link" for="__nav_3">
        Languages, Templates & CSS
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
        <label class="md-nav__title" for="__nav_3">
          <span class="md-nav__icon md-icon"></span>
          Languages, Templates & CSS
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../view/languages/" class="md-nav__link">
        Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../view/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../view/template-plugins/" class="md-nav__link">
        Template Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../view/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
      
      <label class="md-nav__link" for="__nav_4">
        TypeScript and JavaScript API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
        <label class="md-nav__title" for="__nav_4">
          <span class="md-nav__icon md-icon"></span>
          TypeScript and JavaScript API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../javascript/general-usage/" class="md-nav__link">
        General Usage
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/typescript/" class="md-nav__link">
        TypeScript
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
      
      <label class="md-nav__link" for="__nav_4_3">
        New API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="New API" data-md-level="2">
        <label class="md-nav__title" for="__nav_4_3">
          <span class="md-nav__icon md-icon"></span>
          New API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../javascript/new-api_writing-a-module/" class="md-nav__link">
        Writing a module
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_data-structures/" class="md-nav__link">
        Data Structures
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_core/" class="md-nav__link">
        Core Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_dom/" class="md-nav__link">
        DOM
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_events/" class="md-nav__link">
        Event Handling
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_ajax/" class="md-nav__link">
        Ajax
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_dialogs/" class="md-nav__link">
        Dialogs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_browser/" class="md-nav__link">
        Browser and Screen Sizes
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/new-api_ui/" class="md-nav__link">
        User Interface
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/legacy-api/" class="md-nav__link">
        Legacy API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/helper-functions/" class="md-nav__link">
        Helper Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../javascript/code-snippets/" class="md-nav__link">
        Code Snippets
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
      
      <label class="md-nav__link" for="__nav_5">
        Package Components
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Package Components" data-md-level="1">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Package Components
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../package/package-xml/" class="md-nav__link">
        package.xml
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
      
      <label class="md-nav__link" for="__nav_5_2">
        PIPs
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="PIPs" data-md-level="2">
        <label class="md-nav__title" for="__nav_5_2">
          <span class="md-nav__icon md-icon"></span>
          PIPs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../package/pip/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/acl-option/" class="md-nav__link">
        aclOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/acp-menu/" class="md-nav__link">
        acpMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/acp-search-provider/" class="md-nav__link">
        acpSearchProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/acp-template/" class="md-nav__link">
        acpTemplate
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/bbcode/" class="md-nav__link">
        bbcode
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/box/" class="md-nav__link">
        box
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/clipboard-action/" class="md-nav__link">
        clipboardAction
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/core-object/" class="md-nav__link">
        coreObject
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/cronjob/" class="md-nav__link">
        cronjob
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/database/" class="md-nav__link">
        database
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/event-listener/" class="md-nav__link">
        eventListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/file/" class="md-nav__link">
        file
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/language/" class="md-nav__link">
        language
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/media-provider/" class="md-nav__link">
        mediaProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/menu/" class="md-nav__link">
        menu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/menu-item/" class="md-nav__link">
        menuItem
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/object-type/" class="md-nav__link">
        objectType
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/object-type-definition/" class="md-nav__link">
        objectTypeDefinition
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/option/" class="md-nav__link">
        option
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/page/" class="md-nav__link">
        page
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/pip/" class="md-nav__link">
        pip
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/script/" class="md-nav__link">
        script
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/smiley/" class="md-nav__link">
        smiley
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/sql/" class="md-nav__link">
        sql
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/style/" class="md-nav__link">
        style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/template/" class="md-nav__link">
        template
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/template-listener/" class="md-nav__link">
        templateListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/user-group-option/" class="md-nav__link">
        userGroupOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/user-menu/" class="md-nav__link">
        userMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/user-notification-event/" class="md-nav__link">
        userNotificationEvent
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/user-option/" class="md-nav__link">
        userOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/pip/user-profile-menu/" class="md-nav__link">
        userProfileMenu
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/database-php-api/" class="md-nav__link">
        Database PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
      
      <label class="md-nav__link" for="__nav_6">
        Migration
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migration" data-md-level="1">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Migration
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
      
      <label class="md-nav__link" for="__nav_6_1">
        Migrating from WSC 5.3
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_1">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 5.3
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../migration/wsc53/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc53/session/" class="md-nav__link">
        Session Handling and Authentication
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc53/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc53/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc53/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
      
      <label class="md-nav__link" for="__nav_6_2">
        Migrating from WSC 5.2
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_2">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 5.2
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../migration/wsc52/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc52/templates/" class="md-nav__link">
        Templates and Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc52/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
      
      <label class="md-nav__link" for="__nav_6_3">
        Migrating from WSC 3.1
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_3">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 3.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../migration/wsc31/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
      
      <label class="md-nav__link" for="__nav_6_4">
        Migrating from WSC 3.0
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_4">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 3.0
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../migration/wsc30/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc30/javascript/" class="md-nav__link">
        JavaScript API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc30/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc30/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wsc30/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
      
      <label class="md-nav__link" for="__nav_6_5">
        Migrating from WCF 2.1
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_5">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WCF 2.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../migration/wcf21/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wcf21/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wcf21/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../migration/wcf21/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
      
      <label class="md-nav__link" for="__nav_7">
        Tutorials
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          Tutorials
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
      
      <label class="md-nav__link" for="__nav_7_1">
        Tutorial Series
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
        <label class="md-nav__title" for="__nav_7_1">
          <span class="md-nav__icon md-icon"></span>
          Tutorial Series
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../tutorial/series/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../tutorial/series/part_1/" class="md-nav__link">
        Part 1
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../tutorial/series/part_2/" class="md-nav__link">
        Part 2
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../tutorial/series/part_3/" class="md-nav__link">
        Part 3
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#setup-and-requirements" class="md-nav__link">
    Setup and Requirements
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-packagexml-file" class="md-nav__link">
    The package.xml File
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-php-class" class="md-nav__link">
    The PHP Class
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-template" class="md-nav__link">
    The Template
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#the-page-definition" class="md-nav__link">
    The Page Definition
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#building-the-package" class="md-nav__link">
    Building the Package
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#installation" class="md-nav__link">
    Installation
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#developer-tools" class="md-nav__link">
    Developer Tools
  </a>
  
    <nav class="md-nav" aria-label="Developer Tools">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#registering-a-project" class="md-nav__link">
    Registering a Project
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#synchronizing" class="md-nav__link">
    Synchronizing
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#appendix" class="md-nav__link">
    Appendix
  </a>
  
    <nav class="md-nav" aria-label="Appendix">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#template-guessing" class="md-nav__link">
    Template Guessing
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content" data-md-component="content">
            <article class="md-content__inner md-typeset">
              
                
                  <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/getting-started.md" title="Edit this page" class="md-content__button md-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
                  </a>
                
                
                <h1 id="creating-a-simple-package">Creating a simple package<a class="headerlink" href="#creating-a-simple-package" title="Permanent link">#</a></h1>
<h2 id="setup-and-requirements">Setup and Requirements<a class="headerlink" href="#setup-and-requirements" title="Permanent link">#</a></h2>
<p>This guide will help you to create a simple package that provides a simple test
page. It is nothing too fancy, but you can use it as the foundation for your
next project.</p>
<p>There are some requirements you should met before starting:</p>
<ul>
<li>Text editor with syntax highlighting for PHP, <a href="https://notepad-plus-plus.org/">Notepad++</a> is a solid pick</li>
<li><code>*.php</code> and <code>*.tpl</code> should be encoded with ANSI/ASCII</li>
<li><code>*.xml</code> are always encoded with UTF-8, but omit the BOM (byte-order-mark)</li>
<li>Use tabs instead of spaces to indent lines</li>
<li>It is recommended to set the tab width to <code>8</code> spaces, this is used in the entire software and will ease reading the source files</li>
<li>An active installation of WoltLab Suite 3</li>
<li>An application to create <code>*.tar</code> archives, e.g. <a href="http://www.7-zip.org/">7-Zip</a> on Windows</li>
</ul>
<h2 id="the-packagexml-file">The package.xml File<a class="headerlink" href="#the-packagexml-file" title="Permanent link">#</a></h2>
<p>We want to create a simple page that will display the sentence "Hello World" embedded
into the application frame. Create an empty directory in the workspace of your choice
to start with.</p>
<p>Create a new file called <code>package.xml</code> and insert the code below:</p>
<div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="nt">&lt;package</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span> <span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span> <span class="na">xsi:schemaLocation=</span><span class="s">&quot;http://www.woltlab.com http://www.woltlab.com/XSD/2019/package.xsd&quot;</span> <span class="na">name=</span><span class="s">&quot;com.example.test&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;packageinformation&gt;</span>
        <span class="c">&lt;!-- com.example.test --&gt;</span>
        <span class="nt">&lt;packagename&gt;</span>Simple Package<span class="nt">&lt;/packagename&gt;</span>
        <span class="nt">&lt;packagedescription&gt;</span>A simple package to demonstrate the package system of WoltLab Suite Core<span class="nt">&lt;/packagedescription&gt;</span>
        <span class="nt">&lt;version&gt;</span>1.0.0<span class="nt">&lt;/version&gt;</span>
        <span class="nt">&lt;date&gt;</span>2019-04-28<span class="nt">&lt;/date&gt;</span>
    <span class="nt">&lt;/packageinformation&gt;</span>
    <span class="nt">&lt;authorinformation&gt;</span>
        <span class="nt">&lt;author&gt;</span>Your Name<span class="nt">&lt;/author&gt;</span>
        <span class="nt">&lt;authorurl&gt;</span>http://www.example.com<span class="nt">&lt;/authorurl&gt;</span>
    <span class="nt">&lt;/authorinformation&gt;</span>
    <span class="nt">&lt;excludedpackages&gt;</span>
        <span class="nt">&lt;excludedpackage</span> <span class="na">version=</span><span class="s">&quot;6.0.0 Alpha 1&quot;</span><span class="nt">&gt;</span>com.woltlab.wcf<span class="nt">&lt;/excludedpackage&gt;</span>
    <span class="nt">&lt;/excludedpackages&gt;</span>
    <span class="nt">&lt;instructions</span> <span class="na">type=</span><span class="s">&quot;install&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="nt">/&gt;</span>
        <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;template&quot;</span> <span class="nt">/&gt;</span>
        <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;page&quot;</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;/instructions&gt;</span>
<span class="nt">&lt;/package&gt;</span>
</code></pre></div>
<p>There is an <a href="../package/package-xml/">entire chapter</a> on the package system that explains what the code above
does and how you can adjust it to fit your needs. For now we'll keep it as it is.</p>
<h2 id="the-php-class">The PHP Class<a class="headerlink" href="#the-php-class" title="Permanent link">#</a></h2>
<p>The next step is to create the PHP class which will serve our page:</p>
<ol>
<li>Create the directory <code>files</code> in the same directory where <code>package.xml</code> is located</li>
<li>Open <code>files</code> and create the directory <code>lib</code></li>
<li>Open <code>lib</code> and create the directory <code>page</code></li>
<li>Within the directory <code>page</code>, please create the file <code>TestPage.class.php</code></li>
</ol>
<p>Copy and paste the following code into the <code>TestPage.class.php</code>:</p>
<div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
<span class="k">namespace</span> <span class="nx">wcf\page</span><span class="p">;</span>
<span class="k">use</span> <span class="nx">wcf\system\WCF</span><span class="p">;</span>

<span class="sd">/**</span>
<span class="sd"> * A simple test page for demonstration purposes.</span>
<span class="sd"> *</span>
<span class="sd"> * @author  YOUR NAME</span>
<span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
<span class="sd"> */</span>
<span class="k">class</span> <span class="nc">TestPage</span> <span class="k">extends</span> <span class="nx">AbstractPage</span> <span class="p">{</span>
    <span class="sd">/**</span>
<span class="sd">     * @var string</span>
<span class="sd">     */</span>
    <span class="k">protected</span> <span class="nv">$greet</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>

    <span class="sd">/**</span>
<span class="sd">     * @inheritDoc</span>
<span class="sd">     */</span>
    <span class="k">public</span> <span class="k">function</span> <span class="nf">readParameters</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">parent</span><span class="o">::</span><span class="na">readParameters</span><span class="p">();</span>

        <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_GET</span><span class="p">[</span><span class="s1">&#39;greet&#39;</span><span class="p">]))</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span> <span class="o">=</span> <span class="nv">$_GET</span><span class="p">[</span><span class="s1">&#39;greet&#39;</span><span class="p">];</span>
    <span class="p">}</span>

    <span class="sd">/**</span>
<span class="sd">     * @inheritDoc</span>
<span class="sd">     */</span>
    <span class="k">public</span> <span class="k">function</span> <span class="nf">readData</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">parent</span><span class="o">::</span><span class="na">readData</span><span class="p">();</span>

        <span class="k">if</span> <span class="p">(</span><span class="k">empty</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span><span class="p">))</span> <span class="p">{</span>
            <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span> <span class="o">=</span> <span class="s1">&#39;World&#39;</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="sd">/**</span>
<span class="sd">     * @inheritDoc</span>
<span class="sd">     */</span>
    <span class="k">public</span> <span class="k">function</span> <span class="nf">assignVariables</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">parent</span><span class="o">::</span><span class="na">assignVariables</span><span class="p">();</span>

        <span class="nx">WCF</span><span class="o">::</span><span class="na">getTPL</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">assign</span><span class="p">([</span>
            <span class="s1">&#39;greet&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span>
        <span class="p">]);</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>The class inherits from <a href="https://github.com/WoltLab/WCF/blob/master/wcfsetup/install/files/lib/page/AbstractPage.class.php">wcf\page\AbstractPage</a>, the default implementation of pages without form controls. It
defines quite a few methods that will be automatically invoked in a specific order, for example <code>readParameters()</code> before <code>readData()</code> and finally <code>assignVariables()</code> to pass arbitrary values to the template.</p>
<p>The property <code>$greet</code> is defined as <code>World</code>, but can optionally be populated through a GET variable (<code>index.php?test/&amp;greet=You</code> would output <code>Hello You!</code>). This extra code illustrates the separation of data
processing that takes place within all sort of pages, where all user-supplied data is read from within a single method. It helps organizing the code, but most of all it enforces a clean class logic that does not
start reading user input at random places, including the risk to only escape the input of variable <code>$_GET['foo']</code> 4 out of 5 times.</p>
<p>Reading and processing the data is only half the story, now we need a template to display the actual content for our page. You don't need to specify it yourself, it will be automatically guessed based on your
namespace and class name, you can <a href="#template-guessing">read more about it later</a>.</p>
<p>Last but not least, you must not include the closing PHP tag <code>?&gt;</code> at the end, it can cause PHP to break on whitespaces and is not required at all.</p>
<h2 id="the-template">The Template<a class="headerlink" href="#the-template" title="Permanent link">#</a></h2>
<p>Navigate back to the root directory of your package until you see both the <code>files</code> directory and the <code>package.xml</code>. Now create a directory called <code>templates</code>, open it and create the file <code>test.tpl</code>.</p>
<div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>

<span class="x">&lt;div class=&quot;section&quot;&gt;</span>
<span class="x">    Hello </span><span class="cp">{</span><span class="nv">$greet</span><span class="cp">}</span><span class="x">!</span>
<span class="x">&lt;/div&gt;</span>

<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
</code></pre></div>
<p>Templates are a mixture of HTML and Smarty-like template scripting to overcome the static nature of raw HTML. The above code will display the phrase <code>Hello World!</code> in the application frame, just as any other
page would render. The included templates <code>header</code> and <code>footer</code> are responsible for the majority of the overall page functionality, but offer a whole lot of customization abilities to influence their behavior and appearance.</p>
<h2 id="the-page-definition">The Page Definition<a class="headerlink" href="#the-page-definition" title="Permanent link">#</a></h2>
<p>The package now contains the PHP class and the matching template, but it is still missing the page definition. Please create the file <code>page.xml</code> in your project's root directory, thus on the same level as the <code>package.xml</code>.</p>
<div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="nt">&lt;data</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span> <span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span> <span class="na">xsi:schemaLocation=</span><span class="s">&quot;http://www.woltlab.com http://www.woltlab.com/XSD/2019/page.xsd&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;import&gt;</span>
        <span class="nt">&lt;page</span> <span class="na">identifier=</span><span class="s">&quot;com.example.test.Test&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;controller&gt;</span>wcf\page\TestPage<span class="nt">&lt;/controller&gt;</span>
            <span class="nt">&lt;name</span> <span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>Test Page<span class="nt">&lt;/name&gt;</span>
            <span class="nt">&lt;pageType&gt;</span>system<span class="nt">&lt;/pageType&gt;</span>
        <span class="nt">&lt;/page&gt;</span>
    <span class="nt">&lt;/import&gt;</span>
<span class="nt">&lt;/data&gt;</span>
</code></pre></div>
<p>You can provide a lot more data for a page, including logical nesting and dedicated handler classes for display in menus.</p>
<h2 id="building-the-package">Building the Package<a class="headerlink" href="#building-the-package" title="Permanent link">#</a></h2>
<p>If you have followed the above guidelines carefully, your package directory should now look like this:</p>
<div class="highlight"><pre><span></span><code>├── files
│   └── lib
│       ├── page
│       │   ├── TestPage.class.php
├── package.xml
├── page.xml
├── templates
│   └── test.tpl
</code></pre></div>
<p>Both files and templates are archive-based package components, that deploy their payload using tar archives rather than adding the raw files to the package file. Please create the archive <code>files.tar</code> and add the contents of the <code>files/*</code> directory, but not the directory <code>files/</code> itself. Repeat the same process for the <code>templates</code> directory, but this time with the file name <code>templates.tar</code>. Place both files in the root of your project.</p>
<p>Last but not least, create the package archive <code>com.example.test.tar</code> and add all the files listed below.</p>
<ul>
<li><code>files.tar</code></li>
<li><code>package.xml</code></li>
<li><code>page.xml</code></li>
<li><code>templates.tar</code></li>
</ul>
<p>The archive's filename can be anything you want, all though it is the general convention to use the package name itself for easier recognition.</p>
<h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">#</a></h2>
<p>Open the Administration Control Panel and navigate to <code>Configuration &gt; Packages &gt; Install Package</code>, click on <code>Upload Package</code> and select the file <code>com.example.test.tar</code> from your disk. Follow the on-screen instructions until it has been successfully installed.</p>
<p>Open a new browser tab and navigate to your newly created page. If WoltLab Suite is installed at <code>https://example.com/wsc/</code>, then the URL should read <code>https://example.com/wsc/index.php?test/</code>.</p>
<p>Congratulations, you have just created your first package!</p>
<h2 id="developer-tools">Developer Tools<a class="headerlink" href="#developer-tools" title="Permanent link">#</a></h2>
<div class="admonition warning">
<p class="admonition-title">This feature is available with WoltLab Suite 3.1 or newer only.</p>
</div>
<p>The developer tools provide an interface to synchronize the data of an installed package with a bare repository on the local disk. You can re-import most PIPs at any time and have the changes applied without crafting a manual update. This process simulates a regular package update with a single PIP only, and resets the cache after the import has been completed.</p>
<h3 id="registering-a-project">Registering a Project<a class="headerlink" href="#registering-a-project" title="Permanent link">#</a></h3>
<p>Projects require the absolute path to the package directory, that is, the directory where it can find the <code>package.xml</code>. It is not required to install an package to register it as a project, but you have to install it in order to work with it. It does not install the package by itself!</p>
<p>There is a special button on the project list that allows for a mass-import of projects based on a search path. Each direct child directory of the provided path will be tested and projects created this way will use the identifier extracted from the <code>package.xml</code>.</p>
<h3 id="synchronizing">Synchronizing<a class="headerlink" href="#synchronizing" title="Permanent link">#</a></h3>
<p>The install instructions in the <code>package.xml</code> are ignored when offering the PIP imports, the detection works entirely based on the default filename for each PIP. On top of that, only PIPs that implement the interface <code>wcf\system\devtools\pip\IIdempotentPackageInstallationPlugin</code> are valid for import, as it indicates that importing the PIP multiple times will have no side-effects and that the result is deterministic regardless of the number of times it has been imported.</p>
<p>Some built-in PIPs, such as <code>sql</code> or <code>script</code>, do not qualify for this step and remain unavailable at all times. However, you can still craft and perform an actual package update to have these PIPs executed.</p>
<h2 id="appendix">Appendix<a class="headerlink" href="#appendix" title="Permanent link">#</a></h2>
<h3 id="template-guessing">Template Guessing<a class="headerlink" href="#template-guessing" title="Permanent link">#</a></h3>
<p>The class name including the namespace is used to automatically determine the path to the template and its name. The example above used the page class name <code>wcf\page\TestPage</code> that is then split into four distinct parts:</p>
<ol>
<li><code>wcf</code>, the internal abbreviation of WoltLab Suite Core (previously known as WoltLab Community Framework)</li>
<li><code>\page\</code> (ignored)</li>
<li><code>Test</code>, the actual name that is used for both the template and the URL</li>
<li><code>Page</code> (page type, ignored)</li>
</ol>
<p>The fragments <code>1.</code> and <code>3.</code> from above are used to construct the path to the template: <code>&lt;installDirOfWSC&gt;/templates/test.tpl</code> (the first letter of <code>Test</code> is being converted to lower-case).</p>
                
                  
<hr>
<div class="md-source-date">
  <small>
    
      Last update: 2021-01-08
    
  </small>
</div>
                  
                
            </article>
          </div>
        </div>
        
      </main>
      
        
<footer class="md-footer">
  
    <nav class="md-footer__inner md-grid" aria-label="Footer">
      
      
        <a href="../php/pages/" class="md-footer__link md-footer__link--next" rel="next">
          <div class="md-footer__title">
            <div class="md-ellipsis">
              <span class="md-footer__direction">
                Next
              </span>
              Pages
            </div>
          </div>
          <div class="md-footer__button md-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
          </div>
        </a>
      
    </nav>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
          <div class="md-footer-copyright__highlight">
            Copyright © 2020 WoltLab GmbH
          </div>
        
        Made with
        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
          Material for MkDocs
        </a>
        
      </div>
      <div class="md-footer-copyright">
	<a href="https://www.woltlab.com/legal-notice/">Legal Notice</a> 
	<a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
</div>
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    <script id="__config" type="application/json">{"base": "..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
    
    
      <script src="../assets/javascripts/bundle.d892486b.min.js"></script>
      
    
  </body>
</html>