latest/tutorial/series/part_1/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
  14
  15
  16
  17         <title>Part 1 - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../../assets/stylesheets/main.33e2939f.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#tutorial-series-part-1-base-structure" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Part 1
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <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>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <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>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <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>
 120         <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>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <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>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <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>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <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>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595     <li class="md-nav__item md-nav__item--nested">
 596
 597
 598         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 599
 600       <label class="md-nav__link" for="__nav_3">
 601         Languages, Templates & CSS
 602         <span class="md-nav__icon md-icon"></span>
 603       </label>
 604       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 605         <label class="md-nav__title" for="__nav_3">
 606           <span class="md-nav__icon md-icon"></span>
 607           Languages, Templates & CSS
 608         </label>
 609         <ul class="md-nav__list" data-md-scrollfix>
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../../view/languages/" class="md-nav__link">
 617         Languages
 618       </a>
 619     </li>
 620
 621
 622
 623
 624
 625
 626
 627     <li class="md-nav__item">
 628       <a href="../../../view/templates/" class="md-nav__link">
 629         Templates
 630       </a>
 631     </li>
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../../view/template-plugins/" class="md-nav__link">
 641         Template Plugins
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item">
 652       <a href="../../../view/css/" class="md-nav__link">
 653         CSS
 654       </a>
 655     </li>
 656
 657
 658
 659         </ul>
 660       </nav>
 661     </li>
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673     <li class="md-nav__item md-nav__item--nested">
 674
 675
 676         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 677
 678       <label class="md-nav__link" for="__nav_4">
 679         TypeScript and JavaScript API
 680         <span class="md-nav__icon md-icon"></span>
 681       </label>
 682       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 683         <label class="md-nav__title" for="__nav_4">
 684           <span class="md-nav__icon md-icon"></span>
 685           TypeScript and JavaScript API
 686         </label>
 687         <ul class="md-nav__list" data-md-scrollfix>
 688
 689
 690
 691
 692
 693     <li class="md-nav__item">
 694       <a href="../../../javascript/general-usage/" class="md-nav__link">
 695         General Usage
 696       </a>
 697     </li>
 698
 699
 700
 701
 702
 703
 704
 705     <li class="md-nav__item">
 706       <a href="../../../javascript/typescript/" class="md-nav__link">
 707         TypeScript
 708       </a>
 709     </li>
 710
 711
 712
 713
 714
 715
 716
 717
 718     <li class="md-nav__item md-nav__item--nested">
 719
 720
 721         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 722
 723       <label class="md-nav__link" for="__nav_4_3">
 724         New API
 725         <span class="md-nav__icon md-icon"></span>
 726       </label>
 727       <nav class="md-nav" aria-label="New API" data-md-level="2">
 728         <label class="md-nav__title" for="__nav_4_3">
 729           <span class="md-nav__icon md-icon"></span>
 730           New API
 731         </label>
 732         <ul class="md-nav__list" data-md-scrollfix>
 733
 734
 735
 736
 737
 738     <li class="md-nav__item">
 739       <a href="../../../javascript/new-api_writing-a-module/" class="md-nav__link">
 740         Writing a module
 741       </a>
 742     </li>
 743
 744
 745
 746
 747
 748
 749
 750     <li class="md-nav__item">
 751       <a href="../../../javascript/new-api_data-structures/" class="md-nav__link">
 752         Data Structures
 753       </a>
 754     </li>
 755
 756
 757
 758
 759
 760
 761
 762     <li class="md-nav__item">
 763       <a href="../../../javascript/new-api_core/" class="md-nav__link">
 764         Core Functions
 765       </a>
 766     </li>
 767
 768
 769
 770
 771
 772
 773
 774     <li class="md-nav__item">
 775       <a href="../../../javascript/new-api_dom/" class="md-nav__link">
 776         DOM
 777       </a>
 778     </li>
 779
 780
 781
 782
 783
 784
 785
 786     <li class="md-nav__item">
 787       <a href="../../../javascript/new-api_events/" class="md-nav__link">
 788         Event Handling
 789       </a>
 790     </li>
 791
 792
 793
 794
 795
 796
 797
 798     <li class="md-nav__item">
 799       <a href="../../../javascript/new-api_ajax/" class="md-nav__link">
 800         Ajax
 801       </a>
 802     </li>
 803
 804
 805
 806
 807
 808
 809
 810     <li class="md-nav__item">
 811       <a href="../../../javascript/new-api_dialogs/" class="md-nav__link">
 812         Dialogs
 813       </a>
 814     </li>
 815
 816
 817
 818
 819
 820
 821
 822     <li class="md-nav__item">
 823       <a href="../../../javascript/new-api_browser/" class="md-nav__link">
 824         Browser and Screen Sizes
 825       </a>
 826     </li>
 827
 828
 829
 830
 831
 832
 833
 834     <li class="md-nav__item">
 835       <a href="../../../javascript/new-api_ui/" class="md-nav__link">
 836         User Interface
 837       </a>
 838     </li>
 839
 840
 841
 842         </ul>
 843       </nav>
 844     </li>
 845
 846
 847
 848
 849
 850
 851
 852     <li class="md-nav__item">
 853       <a href="../../../javascript/legacy-api/" class="md-nav__link">
 854         Legacy API
 855       </a>
 856     </li>
 857
 858
 859
 860
 861
 862
 863
 864     <li class="md-nav__item">
 865       <a href="../../../javascript/helper-functions/" class="md-nav__link">
 866         Helper Functions
 867       </a>
 868     </li>
 869
 870
 871
 872
 873
 874
 875
 876     <li class="md-nav__item">
 877       <a href="../../../javascript/code-snippets/" class="md-nav__link">
 878         Code Snippets
 879       </a>
 880     </li>
 881
 882
 883
 884         </ul>
 885       </nav>
 886     </li>
 887
 888
 889
 890
 891
 892
 893
 894
 895
 896
 897
 898     <li class="md-nav__item md-nav__item--nested">
 899
 900
 901         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 902
 903       <label class="md-nav__link" for="__nav_5">
 904         Package Components
 905         <span class="md-nav__icon md-icon"></span>
 906       </label>
 907       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 908         <label class="md-nav__title" for="__nav_5">
 909           <span class="md-nav__icon md-icon"></span>
 910           Package Components
 911         </label>
 912         <ul class="md-nav__list" data-md-scrollfix>
 913
 914
 915
 916
 917
 918     <li class="md-nav__item">
 919       <a href="../../../package/package-xml/" class="md-nav__link">
 920         package.xml
 921       </a>
 922     </li>
 923
 924
 925
 926
 927
 928
 929
 930
 931     <li class="md-nav__item md-nav__item--nested">
 932
 933
 934         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 935
 936       <label class="md-nav__link" for="__nav_5_2">
 937         PIPs
 938         <span class="md-nav__icon md-icon"></span>
 939       </label>
 940       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 941         <label class="md-nav__title" for="__nav_5_2">
 942           <span class="md-nav__icon md-icon"></span>
 943           PIPs
 944         </label>
 945         <ul class="md-nav__list" data-md-scrollfix>
 946
 947
 948
 949
 950
 951     <li class="md-nav__item">
 952       <a href="../../../package/pip/" class="md-nav__link">
 953         Overview
 954       </a>
 955     </li>
 956
 957
 958
 959
 960
 961
 962
 963     <li class="md-nav__item">
 964       <a href="../../../package/pip/acl-option/" class="md-nav__link">
 965         aclOption
 966       </a>
 967     </li>
 968
 969
 970
 971
 972
 973
 974
 975     <li class="md-nav__item">
 976       <a href="../../../package/pip/acp-menu/" class="md-nav__link">
 977         acpMenu
 978       </a>
 979     </li>
 980
 981
 982
 983
 984
 985
 986
 987     <li class="md-nav__item">
 988       <a href="../../../package/pip/acp-search-provider/" class="md-nav__link">
 989         acpSearchProvider
 990       </a>
 991     </li>
 992
 993
 994
 995
 996
 997
 998
 999     <li class="md-nav__item">
1000       <a href="../../../package/pip/acp-template/" class="md-nav__link">
1001         acpTemplate
1002       </a>
1003     </li>
1004
1005
1006
1007
1008
1009
1010
1011     <li class="md-nav__item">
1012       <a href="../../../package/pip/bbcode/" class="md-nav__link">
1013         bbcode
1014       </a>
1015     </li>
1016
1017
1018
1019
1020
1021
1022
1023     <li class="md-nav__item">
1024       <a href="../../../package/pip/box/" class="md-nav__link">
1025         box
1026       </a>
1027     </li>
1028
1029
1030
1031
1032
1033
1034
1035     <li class="md-nav__item">
1036       <a href="../../../package/pip/clipboard-action/" class="md-nav__link">
1037         clipboardAction
1038       </a>
1039     </li>
1040
1041
1042
1043
1044
1045
1046
1047     <li class="md-nav__item">
1048       <a href="../../../package/pip/core-object/" class="md-nav__link">
1049         coreObject
1050       </a>
1051     </li>
1052
1053
1054
1055
1056
1057
1058
1059     <li class="md-nav__item">
1060       <a href="../../../package/pip/cronjob/" class="md-nav__link">
1061         cronjob
1062       </a>
1063     </li>
1064
1065
1066
1067
1068
1069
1070
1071     <li class="md-nav__item">
1072       <a href="../../../package/pip/database/" class="md-nav__link">
1073         database
1074       </a>
1075     </li>
1076
1077
1078
1079
1080
1081
1082
1083     <li class="md-nav__item">
1084       <a href="../../../package/pip/event-listener/" class="md-nav__link">
1085         eventListener
1086       </a>
1087     </li>
1088
1089
1090
1091
1092
1093
1094
1095     <li class="md-nav__item">
1096       <a href="../../../package/pip/file/" class="md-nav__link">
1097         file
1098       </a>
1099     </li>
1100
1101
1102
1103
1104
1105
1106
1107     <li class="md-nav__item">
1108       <a href="../../../package/pip/language/" class="md-nav__link">
1109         language
1110       </a>
1111     </li>
1112
1113
1114
1115
1116
1117
1118
1119     <li class="md-nav__item">
1120       <a href="../../../package/pip/media-provider/" class="md-nav__link">
1121         mediaProvider
1122       </a>
1123     </li>
1124
1125
1126
1127
1128
1129
1130
1131     <li class="md-nav__item">
1132       <a href="../../../package/pip/menu/" class="md-nav__link">
1133         menu
1134       </a>
1135     </li>
1136
1137
1138
1139
1140
1141
1142
1143     <li class="md-nav__item">
1144       <a href="../../../package/pip/menu-item/" class="md-nav__link">
1145         menuItem
1146       </a>
1147     </li>
1148
1149
1150
1151
1152
1153
1154
1155     <li class="md-nav__item">
1156       <a href="../../../package/pip/object-type/" class="md-nav__link">
1157         objectType
1158       </a>
1159     </li>
1160
1161
1162
1163
1164
1165
1166
1167     <li class="md-nav__item">
1168       <a href="../../../package/pip/object-type-definition/" class="md-nav__link">
1169         objectTypeDefinition
1170       </a>
1171     </li>
1172
1173
1174
1175
1176
1177
1178
1179     <li class="md-nav__item">
1180       <a href="../../../package/pip/option/" class="md-nav__link">
1181         option
1182       </a>
1183     </li>
1184
1185
1186
1187
1188
1189
1190
1191     <li class="md-nav__item">
1192       <a href="../../../package/pip/page/" class="md-nav__link">
1193         page
1194       </a>
1195     </li>
1196
1197
1198
1199
1200
1201
1202
1203     <li class="md-nav__item">
1204       <a href="../../../package/pip/pip/" class="md-nav__link">
1205         pip
1206       </a>
1207     </li>
1208
1209
1210
1211
1212
1213
1214
1215     <li class="md-nav__item">
1216       <a href="../../../package/pip/script/" class="md-nav__link">
1217         script
1218       </a>
1219     </li>
1220
1221
1222
1223
1224
1225
1226
1227     <li class="md-nav__item">
1228       <a href="../../../package/pip/smiley/" class="md-nav__link">
1229         smiley
1230       </a>
1231     </li>
1232
1233
1234
1235
1236
1237
1238
1239     <li class="md-nav__item">
1240       <a href="../../../package/pip/sql/" class="md-nav__link">
1241         sql
1242       </a>
1243     </li>
1244
1245
1246
1247
1248
1249
1250
1251     <li class="md-nav__item">
1252       <a href="../../../package/pip/style/" class="md-nav__link">
1253         style
1254       </a>
1255     </li>
1256
1257
1258
1259
1260
1261
1262
1263     <li class="md-nav__item">
1264       <a href="../../../package/pip/template/" class="md-nav__link">
1265         template
1266       </a>
1267     </li>
1268
1269
1270
1271
1272
1273
1274
1275     <li class="md-nav__item">
1276       <a href="../../../package/pip/template-listener/" class="md-nav__link">
1277         templateListener
1278       </a>
1279     </li>
1280
1281
1282
1283
1284
1285
1286
1287     <li class="md-nav__item">
1288       <a href="../../../package/pip/user-group-option/" class="md-nav__link">
1289         userGroupOption
1290       </a>
1291     </li>
1292
1293
1294
1295
1296
1297
1298
1299     <li class="md-nav__item">
1300       <a href="../../../package/pip/user-menu/" class="md-nav__link">
1301         userMenu
1302       </a>
1303     </li>
1304
1305
1306
1307
1308
1309
1310
1311     <li class="md-nav__item">
1312       <a href="../../../package/pip/user-notification-event/" class="md-nav__link">
1313         userNotificationEvent
1314       </a>
1315     </li>
1316
1317
1318
1319
1320
1321
1322
1323     <li class="md-nav__item">
1324       <a href="../../../package/pip/user-option/" class="md-nav__link">
1325         userOption
1326       </a>
1327     </li>
1328
1329
1330
1331
1332
1333
1334
1335     <li class="md-nav__item">
1336       <a href="../../../package/pip/user-profile-menu/" class="md-nav__link">
1337         userProfileMenu
1338       </a>
1339     </li>
1340
1341
1342
1343         </ul>
1344       </nav>
1345     </li>
1346
1347
1348
1349
1350
1351
1352
1353     <li class="md-nav__item">
1354       <a href="../../../package/database-php-api/" class="md-nav__link">
1355         Database PHP API
1356       </a>
1357     </li>
1358
1359
1360
1361         </ul>
1362       </nav>
1363     </li>
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375     <li class="md-nav__item md-nav__item--nested">
1376
1377
1378         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1379
1380       <label class="md-nav__link" for="__nav_6">
1381         Migration
1382         <span class="md-nav__icon md-icon"></span>
1383       </label>
1384       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1385         <label class="md-nav__title" for="__nav_6">
1386           <span class="md-nav__icon md-icon"></span>
1387           Migration
1388         </label>
1389         <ul class="md-nav__list" data-md-scrollfix>
1390
1391
1392
1393
1394
1395
1396     <li class="md-nav__item md-nav__item--nested">
1397
1398
1399         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1400
1401       <label class="md-nav__link" for="__nav_6_1">
1402         Migrating from WSC 5.3
1403         <span class="md-nav__icon md-icon"></span>
1404       </label>
1405       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1406         <label class="md-nav__title" for="__nav_6_1">
1407           <span class="md-nav__icon md-icon"></span>
1408           Migrating from WSC 5.3
1409         </label>
1410         <ul class="md-nav__list" data-md-scrollfix>
1411
1412
1413
1414
1415
1416     <li class="md-nav__item">
1417       <a href="../../../migration/wsc53/php/" class="md-nav__link">
1418         PHP API
1419       </a>
1420     </li>
1421
1422
1423
1424
1425
1426
1427
1428     <li class="md-nav__item">
1429       <a href="../../../migration/wsc53/session/" class="md-nav__link">
1430         Session Handling and Authentication
1431       </a>
1432     </li>
1433
1434
1435
1436
1437
1438
1439
1440     <li class="md-nav__item">
1441       <a href="../../../migration/wsc53/javascript/" class="md-nav__link">
1442         TypeScript and JavaScript
1443       </a>
1444     </li>
1445
1446
1447
1448
1449
1450
1451
1452     <li class="md-nav__item">
1453       <a href="../../../migration/wsc53/templates/" class="md-nav__link">
1454         Templates
1455       </a>
1456     </li>
1457
1458
1459
1460
1461
1462
1463
1464     <li class="md-nav__item">
1465       <a href="../../../migration/wsc53/libraries/" class="md-nav__link">
1466         Third Party Libraries
1467       </a>
1468     </li>
1469
1470
1471
1472         </ul>
1473       </nav>
1474     </li>
1475
1476
1477
1478
1479
1480
1481
1482
1483     <li class="md-nav__item md-nav__item--nested">
1484
1485
1486         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1487
1488       <label class="md-nav__link" for="__nav_6_2">
1489         Migrating from WSC 5.2
1490         <span class="md-nav__icon md-icon"></span>
1491       </label>
1492       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1493         <label class="md-nav__title" for="__nav_6_2">
1494           <span class="md-nav__icon md-icon"></span>
1495           Migrating from WSC 5.2
1496         </label>
1497         <ul class="md-nav__list" data-md-scrollfix>
1498
1499
1500
1501
1502
1503     <li class="md-nav__item">
1504       <a href="../../../migration/wsc52/php/" class="md-nav__link">
1505         PHP API
1506       </a>
1507     </li>
1508
1509
1510
1511
1512
1513
1514
1515     <li class="md-nav__item">
1516       <a href="../../../migration/wsc52/templates/" class="md-nav__link">
1517         Templates and Languages
1518       </a>
1519     </li>
1520
1521
1522
1523
1524
1525
1526
1527     <li class="md-nav__item">
1528       <a href="../../../migration/wsc52/libraries/" class="md-nav__link">
1529         Third Party Libraries
1530       </a>
1531     </li>
1532
1533
1534
1535         </ul>
1536       </nav>
1537     </li>
1538
1539
1540
1541
1542
1543
1544
1545
1546     <li class="md-nav__item md-nav__item--nested">
1547
1548
1549         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1550
1551       <label class="md-nav__link" for="__nav_6_3">
1552         Migrating from WSC 3.1
1553         <span class="md-nav__icon md-icon"></span>
1554       </label>
1555       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1556         <label class="md-nav__title" for="__nav_6_3">
1557           <span class="md-nav__icon md-icon"></span>
1558           Migrating from WSC 3.1
1559         </label>
1560         <ul class="md-nav__list" data-md-scrollfix>
1561
1562
1563
1564
1565
1566     <li class="md-nav__item">
1567       <a href="../../../migration/wsc31/php/" class="md-nav__link">
1568         PHP API
1569       </a>
1570     </li>
1571
1572
1573
1574         </ul>
1575       </nav>
1576     </li>
1577
1578
1579
1580
1581
1582
1583
1584
1585     <li class="md-nav__item md-nav__item--nested">
1586
1587
1588         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1589
1590       <label class="md-nav__link" for="__nav_6_4">
1591         Migrating from WSC 3.0
1592         <span class="md-nav__icon md-icon"></span>
1593       </label>
1594       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1595         <label class="md-nav__title" for="__nav_6_4">
1596           <span class="md-nav__icon md-icon"></span>
1597           Migrating from WSC 3.0
1598         </label>
1599         <ul class="md-nav__list" data-md-scrollfix>
1600
1601
1602
1603
1604
1605     <li class="md-nav__item">
1606       <a href="../../../migration/wsc30/php/" class="md-nav__link">
1607         PHP API
1608       </a>
1609     </li>
1610
1611
1612
1613
1614
1615
1616
1617     <li class="md-nav__item">
1618       <a href="../../../migration/wsc30/javascript/" class="md-nav__link">
1619         JavaScript API
1620       </a>
1621     </li>
1622
1623
1624
1625
1626
1627
1628
1629     <li class="md-nav__item">
1630       <a href="../../../migration/wsc30/templates/" class="md-nav__link">
1631         Templates
1632       </a>
1633     </li>
1634
1635
1636
1637
1638
1639
1640
1641     <li class="md-nav__item">
1642       <a href="../../../migration/wsc30/css/" class="md-nav__link">
1643         CSS
1644       </a>
1645     </li>
1646
1647
1648
1649
1650
1651
1652
1653     <li class="md-nav__item">
1654       <a href="../../../migration/wsc30/package/" class="md-nav__link">
1655         Package Components
1656       </a>
1657     </li>
1658
1659
1660
1661         </ul>
1662       </nav>
1663     </li>
1664
1665
1666
1667
1668
1669
1670
1671
1672     <li class="md-nav__item md-nav__item--nested">
1673
1674
1675         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1676
1677       <label class="md-nav__link" for="__nav_6_5">
1678         Migrating from WCF 2.1
1679         <span class="md-nav__icon md-icon"></span>
1680       </label>
1681       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1682         <label class="md-nav__title" for="__nav_6_5">
1683           <span class="md-nav__icon md-icon"></span>
1684           Migrating from WCF 2.1
1685         </label>
1686         <ul class="md-nav__list" data-md-scrollfix>
1687
1688
1689
1690
1691
1692     <li class="md-nav__item">
1693       <a href="../../../migration/wcf21/php/" class="md-nav__link">
1694         PHP API
1695       </a>
1696     </li>
1697
1698
1699
1700
1701
1702
1703
1704     <li class="md-nav__item">
1705       <a href="../../../migration/wcf21/templates/" class="md-nav__link">
1706         Templates
1707       </a>
1708     </li>
1709
1710
1711
1712
1713
1714
1715
1716     <li class="md-nav__item">
1717       <a href="../../../migration/wcf21/css/" class="md-nav__link">
1718         CSS
1719       </a>
1720     </li>
1721
1722
1723
1724
1725
1726
1727
1728     <li class="md-nav__item">
1729       <a href="../../../migration/wcf21/package/" class="md-nav__link">
1730         Package Components
1731       </a>
1732     </li>
1733
1734
1735
1736         </ul>
1737       </nav>
1738     </li>
1739
1740
1741
1742         </ul>
1743       </nav>
1744     </li>
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1759
1760
1761         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" checked>
1762
1763       <label class="md-nav__link" for="__nav_7">
1764         Tutorials
1765         <span class="md-nav__icon md-icon"></span>
1766       </label>
1767       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1768         <label class="md-nav__title" for="__nav_7">
1769           <span class="md-nav__icon md-icon"></span>
1770           Tutorials
1771         </label>
1772         <ul class="md-nav__list" data-md-scrollfix>
1773
1774
1775
1776
1777
1778
1779
1780
1781     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
1782
1783
1784         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" checked>
1785
1786       <label class="md-nav__link" for="__nav_7_1">
1787         Tutorial Series
1788         <span class="md-nav__icon md-icon"></span>
1789       </label>
1790       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1791         <label class="md-nav__title" for="__nav_7_1">
1792           <span class="md-nav__icon md-icon"></span>
1793           Tutorial Series
1794         </label>
1795         <ul class="md-nav__list" data-md-scrollfix>
1796
1797
1798
1799
1800
1801     <li class="md-nav__item">
1802       <a href="../overview/" class="md-nav__link">
1803         Overview
1804       </a>
1805     </li>
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815     <li class="md-nav__item md-nav__item--active">
1816
1817       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
1818
1819
1820
1821
1822         <label class="md-nav__link md-nav__link--active" for="__toc">
1823           Part 1
1824           <span class="md-nav__icon md-icon"></span>
1825         </label>
1826
1827       <a href="./" class="md-nav__link md-nav__link--active">
1828         Part 1
1829       </a>
1830
1831
1832 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1833
1834
1835
1836
1837
1838     <label class="md-nav__title" for="__toc">
1839       <span class="md-nav__icon md-icon"></span>
1840       Table of contents
1841     </label>
1842     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1843
1844         <li class="md-nav__item">
1845   <a href="#package-functionality" class="md-nav__link">
1846     Package Functionality
1847   </a>
1848
1849 </li>
1850
1851         <li class="md-nav__item">
1852   <a href="#used-components" class="md-nav__link">
1853     Used Components
1854   </a>
1855
1856 </li>
1857
1858         <li class="md-nav__item">
1859   <a href="#package-structure" class="md-nav__link">
1860     Package Structure
1861   </a>
1862
1863 </li>
1864
1865         <li class="md-nav__item">
1866   <a href="#person-modeling" class="md-nav__link">
1867     Person Modeling
1868   </a>
1869
1870     <nav class="md-nav" aria-label="Person Modeling">
1871       <ul class="md-nav__list">
1872
1873           <li class="md-nav__item">
1874   <a href="#database-table" class="md-nav__link">
1875     Database Table
1876   </a>
1877
1878 </li>
1879
1880           <li class="md-nav__item">
1881   <a href="#database-object" class="md-nav__link">
1882     Database Object
1883   </a>
1884
1885     <nav class="md-nav" aria-label="Database Object">
1886       <ul class="md-nav__list">
1887
1888           <li class="md-nav__item">
1889   <a href="#person" class="md-nav__link">
1890     Person
1891   </a>
1892
1893 </li>
1894
1895           <li class="md-nav__item">
1896   <a href="#personaction" class="md-nav__link">
1897     PersonAction
1898   </a>
1899
1900 </li>
1901
1902           <li class="md-nav__item">
1903   <a href="#personeditor" class="md-nav__link">
1904     PersonEditor
1905   </a>
1906
1907 </li>
1908
1909           <li class="md-nav__item">
1910   <a href="#personlist" class="md-nav__link">
1911     PersonList
1912   </a>
1913
1914 </li>
1915
1916       </ul>
1917     </nav>
1918
1919 </li>
1920
1921       </ul>
1922     </nav>
1923
1924 </li>
1925
1926         <li class="md-nav__item">
1927   <a href="#acp" class="md-nav__link">
1928     ACP
1929   </a>
1930
1931     <nav class="md-nav" aria-label="ACP">
1932       <ul class="md-nav__list">
1933
1934           <li class="md-nav__item">
1935   <a href="#acp-menu" class="md-nav__link">
1936     ACP Menu
1937   </a>
1938
1939 </li>
1940
1941           <li class="md-nav__item">
1942   <a href="#people-list" class="md-nav__link">
1943     People List
1944   </a>
1945
1946     <nav class="md-nav" aria-label="People List">
1947       <ul class="md-nav__list">
1948
1949           <li class="md-nav__item">
1950   <a href="#personlistpage" class="md-nav__link">
1951     PersonListPage
1952   </a>
1953
1954 </li>
1955
1956           <li class="md-nav__item">
1957   <a href="#personlisttpl" class="md-nav__link">
1958     personList.tpl
1959   </a>
1960
1961 </li>
1962
1963       </ul>
1964     </nav>
1965
1966 </li>
1967
1968           <li class="md-nav__item">
1969   <a href="#person-add-form" class="md-nav__link">
1970     Person Add Form
1971   </a>
1972
1973     <nav class="md-nav" aria-label="Person Add Form">
1974       <ul class="md-nav__list">
1975
1976           <li class="md-nav__item">
1977   <a href="#personaddform" class="md-nav__link">
1978     PersonAddForm
1979   </a>
1980
1981 </li>
1982
1983           <li class="md-nav__item">
1984   <a href="#personaddtpl" class="md-nav__link">
1985     personAdd.tpl
1986   </a>
1987
1988 </li>
1989
1990       </ul>
1991     </nav>
1992
1993 </li>
1994
1995           <li class="md-nav__item">
1996   <a href="#person-edit-form" class="md-nav__link">
1997     Person Edit Form
1998   </a>
1999
2000     <nav class="md-nav" aria-label="Person Edit Form">
2001       <ul class="md-nav__list">
2002
2003           <li class="md-nav__item">
2004   <a href="#personeditform" class="md-nav__link">
2005     PersonEditForm
2006   </a>
2007
2008 </li>
2009
2010       </ul>
2011     </nav>
2012
2013 </li>
2014
2015       </ul>
2016     </nav>
2017
2018 </li>
2019
2020         <li class="md-nav__item">
2021   <a href="#frontend" class="md-nav__link">
2022     Frontend
2023   </a>
2024
2025     <nav class="md-nav" aria-label="Frontend">
2026       <ul class="md-nav__list">
2027
2028           <li class="md-nav__item">
2029   <a href="#pagexml" class="md-nav__link">
2030     page.xml
2031   </a>
2032
2033 </li>
2034
2035           <li class="md-nav__item">
2036   <a href="#menuitemxml" class="md-nav__link">
2037     menuItem.xml
2038   </a>
2039
2040 </li>
2041
2042           <li class="md-nav__item">
2043   <a href="#people-list_1" class="md-nav__link">
2044     People List
2045   </a>
2046
2047     <nav class="md-nav" aria-label="People List">
2048       <ul class="md-nav__list">
2049
2050           <li class="md-nav__item">
2051   <a href="#personlistpage_1" class="md-nav__link">
2052     PersonListPage
2053   </a>
2054
2055 </li>
2056
2057           <li class="md-nav__item">
2058   <a href="#personlisttpl_1" class="md-nav__link">
2059     personList.tpl
2060   </a>
2061
2062 </li>
2063
2064       </ul>
2065     </nav>
2066
2067 </li>
2068
2069       </ul>
2070     </nav>
2071
2072 </li>
2073
2074         <li class="md-nav__item">
2075   <a href="#usergroupoptionxml" class="md-nav__link">
2076     userGroupOption.xml
2077   </a>
2078
2079 </li>
2080
2081         <li class="md-nav__item">
2082   <a href="#packagexml" class="md-nav__link">
2083     package.xml
2084   </a>
2085
2086 </li>
2087
2088     </ul>
2089
2090 </nav>
2091
2092     </li>
2093
2094
2095
2096
2097
2098
2099
2100     <li class="md-nav__item">
2101       <a href="../part_2/" class="md-nav__link">
2102         Part 2
2103       </a>
2104     </li>
2105
2106
2107
2108
2109
2110
2111
2112     <li class="md-nav__item">
2113       <a href="../part_3/" class="md-nav__link">
2114         Part 3
2115       </a>
2116     </li>
2117
2118
2119
2120         </ul>
2121       </nav>
2122     </li>
2123
2124
2125
2126         </ul>
2127       </nav>
2128     </li>
2129
2130
2131
2132   </ul>
2133 </nav>
2134                   </div>
2135                 </div>
2136               </div>
2137
2138
2139
2140               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2141                 <div class="md-sidebar__scrollwrap">
2142                   <div class="md-sidebar__inner">
2143
2144 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2145
2146
2147
2148
2149
2150     <label class="md-nav__title" for="__toc">
2151       <span class="md-nav__icon md-icon"></span>
2152       Table of contents
2153     </label>
2154     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2155
2156         <li class="md-nav__item">
2157   <a href="#package-functionality" class="md-nav__link">
2158     Package Functionality
2159   </a>
2160
2161 </li>
2162
2163         <li class="md-nav__item">
2164   <a href="#used-components" class="md-nav__link">
2165     Used Components
2166   </a>
2167
2168 </li>
2169
2170         <li class="md-nav__item">
2171   <a href="#package-structure" class="md-nav__link">
2172     Package Structure
2173   </a>
2174
2175 </li>
2176
2177         <li class="md-nav__item">
2178   <a href="#person-modeling" class="md-nav__link">
2179     Person Modeling
2180   </a>
2181
2182     <nav class="md-nav" aria-label="Person Modeling">
2183       <ul class="md-nav__list">
2184
2185           <li class="md-nav__item">
2186   <a href="#database-table" class="md-nav__link">
2187     Database Table
2188   </a>
2189
2190 </li>
2191
2192           <li class="md-nav__item">
2193   <a href="#database-object" class="md-nav__link">
2194     Database Object
2195   </a>
2196
2197     <nav class="md-nav" aria-label="Database Object">
2198       <ul class="md-nav__list">
2199
2200           <li class="md-nav__item">
2201   <a href="#person" class="md-nav__link">
2202     Person
2203   </a>
2204
2205 </li>
2206
2207           <li class="md-nav__item">
2208   <a href="#personaction" class="md-nav__link">
2209     PersonAction
2210   </a>
2211
2212 </li>
2213
2214           <li class="md-nav__item">
2215   <a href="#personeditor" class="md-nav__link">
2216     PersonEditor
2217   </a>
2218
2219 </li>
2220
2221           <li class="md-nav__item">
2222   <a href="#personlist" class="md-nav__link">
2223     PersonList
2224   </a>
2225
2226 </li>
2227
2228       </ul>
2229     </nav>
2230
2231 </li>
2232
2233       </ul>
2234     </nav>
2235
2236 </li>
2237
2238         <li class="md-nav__item">
2239   <a href="#acp" class="md-nav__link">
2240     ACP
2241   </a>
2242
2243     <nav class="md-nav" aria-label="ACP">
2244       <ul class="md-nav__list">
2245
2246           <li class="md-nav__item">
2247   <a href="#acp-menu" class="md-nav__link">
2248     ACP Menu
2249   </a>
2250
2251 </li>
2252
2253           <li class="md-nav__item">
2254   <a href="#people-list" class="md-nav__link">
2255     People List
2256   </a>
2257
2258     <nav class="md-nav" aria-label="People List">
2259       <ul class="md-nav__list">
2260
2261           <li class="md-nav__item">
2262   <a href="#personlistpage" class="md-nav__link">
2263     PersonListPage
2264   </a>
2265
2266 </li>
2267
2268           <li class="md-nav__item">
2269   <a href="#personlisttpl" class="md-nav__link">
2270     personList.tpl
2271   </a>
2272
2273 </li>
2274
2275       </ul>
2276     </nav>
2277
2278 </li>
2279
2280           <li class="md-nav__item">
2281   <a href="#person-add-form" class="md-nav__link">
2282     Person Add Form
2283   </a>
2284
2285     <nav class="md-nav" aria-label="Person Add Form">
2286       <ul class="md-nav__list">
2287
2288           <li class="md-nav__item">
2289   <a href="#personaddform" class="md-nav__link">
2290     PersonAddForm
2291   </a>
2292
2293 </li>
2294
2295           <li class="md-nav__item">
2296   <a href="#personaddtpl" class="md-nav__link">
2297     personAdd.tpl
2298   </a>
2299
2300 </li>
2301
2302       </ul>
2303     </nav>
2304
2305 </li>
2306
2307           <li class="md-nav__item">
2308   <a href="#person-edit-form" class="md-nav__link">
2309     Person Edit Form
2310   </a>
2311
2312     <nav class="md-nav" aria-label="Person Edit Form">
2313       <ul class="md-nav__list">
2314
2315           <li class="md-nav__item">
2316   <a href="#personeditform" class="md-nav__link">
2317     PersonEditForm
2318   </a>
2319
2320 </li>
2321
2322       </ul>
2323     </nav>
2324
2325 </li>
2326
2327       </ul>
2328     </nav>
2329
2330 </li>
2331
2332         <li class="md-nav__item">
2333   <a href="#frontend" class="md-nav__link">
2334     Frontend
2335   </a>
2336
2337     <nav class="md-nav" aria-label="Frontend">
2338       <ul class="md-nav__list">
2339
2340           <li class="md-nav__item">
2341   <a href="#pagexml" class="md-nav__link">
2342     page.xml
2343   </a>
2344
2345 </li>
2346
2347           <li class="md-nav__item">
2348   <a href="#menuitemxml" class="md-nav__link">
2349     menuItem.xml
2350   </a>
2351
2352 </li>
2353
2354           <li class="md-nav__item">
2355   <a href="#people-list_1" class="md-nav__link">
2356     People List
2357   </a>
2358
2359     <nav class="md-nav" aria-label="People List">
2360       <ul class="md-nav__list">
2361
2362           <li class="md-nav__item">
2363   <a href="#personlistpage_1" class="md-nav__link">
2364     PersonListPage
2365   </a>
2366
2367 </li>
2368
2369           <li class="md-nav__item">
2370   <a href="#personlisttpl_1" class="md-nav__link">
2371     personList.tpl
2372   </a>
2373
2374 </li>
2375
2376       </ul>
2377     </nav>
2378
2379 </li>
2380
2381       </ul>
2382     </nav>
2383
2384 </li>
2385
2386         <li class="md-nav__item">
2387   <a href="#usergroupoptionxml" class="md-nav__link">
2388     userGroupOption.xml
2389   </a>
2390
2391 </li>
2392
2393         <li class="md-nav__item">
2394   <a href="#packagexml" class="md-nav__link">
2395     package.xml
2396   </a>
2397
2398 </li>
2399
2400     </ul>
2401
2402 </nav>
2403                   </div>
2404                 </div>
2405               </div>
2406
2407
2408           <div class="md-content" data-md-component="content">
2409             <article class="md-content__inner md-typeset">
2410
2411
2412                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/tutorial/series/part_1.md" title="Edit this page" class="md-content__button md-icon">
2413                     <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>
2414                   </a>
2415
2416
2417                 <h1 id="tutorial-series-part-1-base-structure">Tutorial Series Part 1: Base Structure<a class="headerlink" href="#tutorial-series-part-1-base-structure" title="Permanent link">#</a></h1>
2418 <p>In the first part of this tutorial series, we will lay out what the basic version of package should be able to do and how to implement these functions.</p>
2419 <h2 id="package-functionality">Package Functionality<a class="headerlink" href="#package-functionality" title="Permanent link">#</a></h2>
2420 <p>The package should provide the following possibilities/functions:</p>
2421 <ul>
2422 <li>Sortable list of all people in the ACP</li>
2423 <li>Ability to add, edit and delete people in the ACP</li>
2424 <li>Restrict the ability to add, edit and delete people (in short: manage people) in the ACP</li>
2425 <li>Sortable list of all people in the front end</li>
2426 </ul>
2427 <h2 id="used-components">Used Components<a class="headerlink" href="#used-components" title="Permanent link">#</a></h2>
2428 <p>We will use the following package installation plugins:</p>
2429 <ul>
2430 <li><a href="../../../package/pip/acp-template/">acpTemplate package installation plugin</a>,</li>
2431 <li><a href="../../../package/pip/acp-menu/">acpMenu package installation plugin</a>,</li>
2432 <li><a href="../../../package/pip/file/">file package installation plugin</a>,</li>
2433 <li><a href="../../../package/pip/language/">language package installation plugin</a>,</li>
2434 <li><a href="../../../package/pip/menu-item/">menuItem package installation plugin</a>,</li>
2435 <li><a href="../../../package/pip/page/">page package installation plugin</a>,</li>
2436 <li><a href="../../../package/pip/sql/">sql package installation plugin</a>,</li>
2437 <li><a href="../../../package/pip/template/">template package installation plugin</a>,</li>
2438 <li><a href="../../../package/pip/user-group-option/">userGroupOption package installation plugin</a>,</li>
2439 </ul>
2440 <p>use <a href="../../../php/database-objects/">database objects</a>, create <a href="../../../php/pages/">pages</a> and use <a href="../../../view/templates/">templates</a>.</p>
2441 <h2 id="package-structure">Package Structure<a class="headerlink" href="#package-structure" title="Permanent link">#</a></h2>
2442 <p>The package will have the following file structure:</p>
2443 <div class="highlight"><pre><span></span><code>├── acpMenu.xml
2444 ├── acptemplates
2445 │   ├── personAdd.tpl
2446 │   └── personList.tpl
2447 ├── files
2448 │   └── lib
2449 │       ├── acp
2450 │       │   ├── form
2451 │       │   │   ├── PersonAddForm.class.php
2452 │       │   │   └── PersonEditForm.class.php
2453 │       │   └── page
2454 │       │       └── PersonListPage.class.php
2455 │       ├── data
2456 │       │   └── person
2457 │       │       ├── PersonAction.class.php
2458 │       │       ├── Person.class.php
2459 │       │       ├── PersonEditor.class.php
2460 │       │       └── PersonList.class.php
2461 │       └── page
2462 │           └── PersonListPage.class.php
2463 ├── install.sql
2464 ├── language
2465 │   ├── de.xml
2466 │   └── en.xml
2467 ├── menuItem.xml
2468 ├── package.xml
2469 ├── page.xml
2470 ├── templates
2471 │   └── personList.tpl
2472 └── userGroupOption.xml
2473 </code></pre></div>
2474 <h2 id="person-modeling">Person Modeling<a class="headerlink" href="#person-modeling" title="Permanent link">#</a></h2>
2475 <h3 id="database-table">Database Table<a class="headerlink" href="#database-table" title="Permanent link">#</a></h3>
2476 <p>As the first step, we have to model the people we want to manage with this package.
2477 As this is only an introductory tutorial, we will keep things simple and only consider the first and last name of a person.
2478 Thus, the database table we will store the people in only contains three columns:</p>
2479 <ol>
2480 <li><code>personID</code> is the unique numeric identifier of each person created,</li>
2481 <li><code>firstName</code> contains the first name of the person,</li>
2482 <li><code>lastName</code> contains the last name of the person.</li>
2483 </ol>
2484 <p>The first file for our package is the <code>install.sql</code> file used to create such a database table during package installation:</p>
2485 <div class="highlight"><pre><span></span><code><span class="k">DROP</span> <span class="k">TABLE</span> <span class="k">IF</span> <span class="k">EXISTS</span> <span class="n">wcf1_person</span><span class="p">;</span>
2486 <span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">wcf1_person</span> <span class="p">(</span>
2487     <span class="n">personID</span> <span class="nb">INT</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> <span class="k">NOT</span> <span class="k">NULL</span> <span class="n">AUTO_INCREMENT</span> <span class="k">PRIMARY</span> <span class="k">KEY</span><span class="p">,</span>
2488     <span class="n">firstName</span> <span class="nb">VARCHAR</span><span class="p">(</span><span class="mi">255</span><span class="p">)</span> <span class="k">NOT</span> <span class="k">NULL</span><span class="p">,</span>
2489     <span class="n">lastName</span> <span class="nb">VARCHAR</span><span class="p">(</span><span class="mi">255</span><span class="p">)</span> <span class="k">NOT</span> <span class="k">NULL</span>
2490 <span class="p">);</span>
2491 </code></pre></div>
2492 <h3 id="database-object">Database Object<a class="headerlink" href="#database-object" title="Permanent link">#</a></h3>
2493 <h4 id="person"><code>Person</code><a class="headerlink" href="#person" title="Permanent link">#</a></h4>
2494 <p>In our PHP code, each person will be represented by an object of the following class:</p>
2495 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2496 <span class="k">namespace</span> <span class="nx">wcf\data\person</span><span class="p">;</span>
2497 <span class="k">use</span> <span class="nx">wcf\data\DatabaseObject</span><span class="p">;</span>
2498 <span class="k">use</span> <span class="nx">wcf\system\request\IRouteController</span><span class="p">;</span>
2499
2500 <span class="sd">/**</span>
2501 <span class="sd"> * Represents a person.</span>
2502 <span class="sd"> * </span>
2503 <span class="sd"> * @author  Matthias Schmidt</span>
2504 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2505 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2506 <span class="sd"> * @package WoltLabSuite\Core\Data\Person</span>
2507 <span class="sd"> * </span>
2508 <span class="sd"> * @property-read   integer     $personID   unique id of the person</span>
2509 <span class="sd"> * @property-read   string      $firstName  first name of the person</span>
2510 <span class="sd"> * @property-read   string      $lastName   last name of the person</span>
2511 <span class="sd"> */</span>
2512 <span class="k">class</span> <span class="nc">Person</span> <span class="k">extends</span> <span class="nx">DatabaseObject</span> <span class="k">implements</span> <span class="nx">IRouteController</span> <span class="p">{</span>
2513     <span class="sd">/**</span>
2514 <span class="sd">     * Returns the first and last name of the person if a person object is treated as a string.</span>
2515 <span class="sd">     * </span>
2516 <span class="sd">     * @return  string</span>
2517 <span class="sd">     */</span>
2518     <span class="k">public</span> <span class="k">function</span> <span class="fm">__toString</span><span class="p">()</span> <span class="p">{</span>
2519         <span class="k">return</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">getTitle</span><span class="p">();</span>
2520     <span class="p">}</span>
2521
2522     <span class="sd">/**</span>
2523 <span class="sd">     * @inheritDoc</span>
2524 <span class="sd">     */</span>
2525     <span class="k">public</span> <span class="k">function</span> <span class="nf">getTitle</span><span class="p">()</span> <span class="p">{</span>
2526         <span class="k">return</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span> <span class="o">.</span> <span class="s1">&#39; &#39;</span> <span class="o">.</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span><span class="p">;</span>
2527     <span class="p">}</span>
2528 <span class="p">}</span>
2529 </code></pre></div>
2530 <p>The important thing here is that <code>Person</code> extends <code>DatabaseObject</code>.
2531 Additionally, we implement the <code>IRouteController</code> interface, which allows us to use <code>Person</code> objects to create links, and we implement PHP's magic <a href="https://secure.php.net/manual/en/language.oop5.magic.php#object.tostring">__toString()</a> method for convenience.</p>
2532 <p>For every database object, you need to implement three additional classes:
2533 an action class, an editor class and a list class.</p>
2534 <h4 id="personaction"><code>PersonAction</code><a class="headerlink" href="#personaction" title="Permanent link">#</a></h4>
2535 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2536 <span class="k">namespace</span> <span class="nx">wcf\data\person</span><span class="p">;</span>
2537 <span class="k">use</span> <span class="nx">wcf\data\AbstractDatabaseObjectAction</span><span class="p">;</span>
2538
2539 <span class="sd">/**</span>
2540 <span class="sd"> * Executes person-related actions.</span>
2541 <span class="sd"> * </span>
2542 <span class="sd"> * @author  Matthias Schmidt</span>
2543 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2544 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2545 <span class="sd"> * @package WoltLabSuite\Core\Data\Person</span>
2546 <span class="sd"> *</span>
2547 <span class="sd"> * @method  Person      create()</span>
2548 <span class="sd"> * @method  PersonEditor[]  getObjects()</span>
2549 <span class="sd"> * @method  PersonEditor    getSingleObject()</span>
2550 <span class="sd"> */</span>
2551 <span class="k">class</span> <span class="nc">PersonAction</span> <span class="k">extends</span> <span class="nx">AbstractDatabaseObjectAction</span> <span class="p">{</span>
2552     <span class="sd">/**</span>
2553 <span class="sd">     * @inheritDoc</span>
2554 <span class="sd">     */</span>
2555     <span class="k">protected</span> <span class="nv">$permissionsDelete</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;admin.content.canManagePeople&#39;</span><span class="p">];</span>
2556
2557     <span class="sd">/**</span>
2558 <span class="sd">     * @inheritDoc</span>
2559 <span class="sd">     */</span>
2560     <span class="k">protected</span> <span class="nv">$requireACP</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;delete&#39;</span><span class="p">];</span>
2561 <span class="p">}</span>
2562 </code></pre></div>
2563 <p>This implementation of <code>AbstractDatabaseObjectAction</code> is very basic and only sets the <code>$permissionsDelete</code> and <code>$requireACP</code> properties.
2564 This is done so that later on, when implementing the people list for the ACP, we can delete people simply via AJAX.
2565 <code>$permissionsDelete</code> has to be set to the permission needed in order to delete a person.
2566 We will later use the <a href="../../../package/pip/user-group-option/">userGroupOption package installation plugin</a> to create the <code>admin.content.canManagePeople</code> permission.
2567 <code>$requireACP</code> restricts deletion of people to the ACP.</p>
2568 <h4 id="personeditor"><code>PersonEditor</code><a class="headerlink" href="#personeditor" title="Permanent link">#</a></h4>
2569 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2570 <span class="k">namespace</span> <span class="nx">wcf\data\person</span><span class="p">;</span>
2571 <span class="k">use</span> <span class="nx">wcf\data\DatabaseObjectEditor</span><span class="p">;</span>
2572
2573 <span class="sd">/**</span>
2574 <span class="sd"> * Provides functions to edit people.</span>
2575 <span class="sd"> * </span>
2576 <span class="sd"> * @author  Matthias Schmidt</span>
2577 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2578 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2579 <span class="sd"> * @package WoltLabSuite\Core\Data\Person</span>
2580 <span class="sd"> * </span>
2581 <span class="sd"> * @method static   Person  create(array $parameters = [])</span>
2582 <span class="sd"> * @method      Person  getDecoratedObject()</span>
2583 <span class="sd"> * @mixin       Person</span>
2584 <span class="sd"> */</span>
2585 <span class="k">class</span> <span class="nc">PersonEditor</span> <span class="k">extends</span> <span class="nx">DatabaseObjectEditor</span> <span class="p">{</span>
2586     <span class="sd">/**</span>
2587 <span class="sd">     * @inheritDoc</span>
2588 <span class="sd">     */</span>
2589     <span class="k">protected</span> <span class="k">static</span> <span class="nv">$baseClass</span> <span class="o">=</span> <span class="nx">Person</span><span class="o">::</span><span class="na">class</span><span class="p">;</span>
2590 <span class="p">}</span>
2591 </code></pre></div>
2592 <p>This implementation of <code>DatabaseObjectEditor</code> fulfills the minimum requirement for a database object editor:
2593 setting the static <code>$baseClass</code> property to the database object class name.</p>
2594 <h4 id="personlist"><code>PersonList</code><a class="headerlink" href="#personlist" title="Permanent link">#</a></h4>
2595 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2596 <span class="k">namespace</span> <span class="nx">wcf\data\person</span><span class="p">;</span>
2597 <span class="k">use</span> <span class="nx">wcf\data\DatabaseObjectList</span><span class="p">;</span>
2598
2599 <span class="sd">/**</span>
2600 <span class="sd"> * Represents a list of people.</span>
2601 <span class="sd"> * </span>
2602 <span class="sd"> * @author  Matthias Schmidt</span>
2603 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2604 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2605 <span class="sd"> * @package WoltLabSuite\Core\Data\Person</span>
2606 <span class="sd"> * </span>
2607 <span class="sd"> * @method  Person      current()</span>
2608 <span class="sd"> * @method  Person[]    getObjects()</span>
2609 <span class="sd"> * @method  Person|null search($objectID)</span>
2610 <span class="sd"> * @property    Person[]    $objects</span>
2611 <span class="sd"> */</span>
2612 <span class="k">class</span> <span class="nc">PersonList</span> <span class="k">extends</span> <span class="nx">DatabaseObjectList</span> <span class="p">{}</span>
2613 </code></pre></div>
2614 <p>Due to the default implementation of <code>DatabaseObjectList</code>, our <code>PersonList</code> class just needs to extend it and everything else is either automatically set by the code of <code>DatabaseObjectList</code> or, in the case of properties and methods, provided by that class.</p>
2615 <h2 id="acp">ACP<a class="headerlink" href="#acp" title="Permanent link">#</a></h2>
2616 <p>Next, we will take care of the controllers and views for the ACP.
2617 In total, we need three each:</p>
2618 <ol>
2619 <li>page to list people,</li>
2620 <li>form to add people, and</li>
2621 <li>form to edit people.</li>
2622 </ol>
2623 <p>Before we create the controllers and views, let us first create the menu items for the pages in the ACP menu.</p>
2624 <h3 id="acp-menu">ACP Menu<a class="headerlink" href="#acp-menu" title="Permanent link">#</a></h3>
2625 <p>We need to create three menu items:</p>
2626 <ol>
2627 <li>a “parent” menu item on the second level of the ACP menu item tree,</li>
2628 <li>a third level menu item for the people list page, and</li>
2629 <li>a fourth level menu item for the form to add new people.</li>
2630 </ol>
2631 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
2632 <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/tornado/acpMenu.xsd&quot;</span><span class="nt">&gt;</span>
2633     <span class="nt">&lt;import&gt;</span>
2634         <span class="nt">&lt;acpmenuitem</span> <span class="na">name=</span><span class="s">&quot;wcf.acp.menu.link.person&quot;</span><span class="nt">&gt;</span>
2635             <span class="nt">&lt;parent&gt;</span>wcf.acp.menu.link.content<span class="nt">&lt;/parent&gt;</span>
2636         <span class="nt">&lt;/acpmenuitem&gt;</span>
2637         <span class="nt">&lt;acpmenuitem</span> <span class="na">name=</span><span class="s">&quot;wcf.acp.menu.link.person.list&quot;</span><span class="nt">&gt;</span>
2638             <span class="nt">&lt;controller&gt;</span>wcf\acp\page\PersonListPage<span class="nt">&lt;/controller&gt;</span>
2639             <span class="nt">&lt;parent&gt;</span>wcf.acp.menu.link.person<span class="nt">&lt;/parent&gt;</span>
2640             <span class="nt">&lt;permissions&gt;</span>admin.content.canManagePeople<span class="nt">&lt;/permissions&gt;</span>
2641         <span class="nt">&lt;/acpmenuitem&gt;</span>
2642         <span class="nt">&lt;acpmenuitem</span> <span class="na">name=</span><span class="s">&quot;wcf.acp.menu.link.person.add&quot;</span><span class="nt">&gt;</span>
2643             <span class="nt">&lt;controller&gt;</span>wcf\acp\form\PersonAddForm<span class="nt">&lt;/controller&gt;</span>
2644             <span class="nt">&lt;parent&gt;</span>wcf.acp.menu.link.person.list<span class="nt">&lt;/parent&gt;</span>
2645             <span class="nt">&lt;permissions&gt;</span>admin.content.canManagePeople<span class="nt">&lt;/permissions&gt;</span>
2646             <span class="nt">&lt;icon&gt;</span>fa-plus<span class="nt">&lt;/icon&gt;</span>
2647         <span class="nt">&lt;/acpmenuitem&gt;</span>
2648     <span class="nt">&lt;/import&gt;</span>
2649 <span class="nt">&lt;/data&gt;</span>
2650 </code></pre></div>
2651 <p>We choose <code>wcf.acp.menu.link.content</code> as the parent menu item for the first menu item <code>wcf.acp.menu.link.person</code> because the people we are managing is just one form of content.
2652 The fourth level menu item <code>wcf.acp.menu.link.person.add</code> will only be shown as an icon and thus needs an additional element <code>icon</code> which takes a FontAwesome icon class as value.</p>
2653 <h3 id="people-list">People List<a class="headerlink" href="#people-list" title="Permanent link">#</a></h3>
2654 <p>To list the people in the ACP, we need a <code>PersonListPage</code> class and a <code>personList</code> template.</p>
2655 <h4 id="personlistpage"><code>PersonListPage</code><a class="headerlink" href="#personlistpage" title="Permanent link">#</a></h4>
2656 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2657 <span class="k">namespace</span> <span class="nx">wcf\acp\page</span><span class="p">;</span>
2658 <span class="k">use</span> <span class="nx">wcf\data\person\PersonList</span><span class="p">;</span>
2659 <span class="k">use</span> <span class="nx">wcf\page\SortablePage</span><span class="p">;</span>
2660
2661 <span class="sd">/**</span>
2662 <span class="sd"> * Shows the list of people.</span>
2663 <span class="sd"> * </span>
2664 <span class="sd"> * @author  Matthias Schmidt</span>
2665 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2666 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2667 <span class="sd"> * @package WoltLabSuite\Core\Acp\Page</span>
2668 <span class="sd"> */</span>
2669 <span class="k">class</span> <span class="nc">PersonListPage</span> <span class="k">extends</span> <span class="nx">SortablePage</span> <span class="p">{</span>
2670     <span class="sd">/**</span>
2671 <span class="sd">     * @inheritDoc</span>
2672 <span class="sd">     */</span>
2673     <span class="k">public</span> <span class="nv">$activeMenuItem</span> <span class="o">=</span> <span class="s1">&#39;wcf.acp.menu.link.person.list&#39;</span><span class="p">;</span>
2674
2675     <span class="sd">/**</span>
2676 <span class="sd">     * @inheritDoc</span>
2677 <span class="sd">     */</span>
2678     <span class="k">public</span> <span class="nv">$neededPermissions</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;admin.content.canManagePeople&#39;</span><span class="p">];</span>
2679
2680     <span class="sd">/**</span>
2681 <span class="sd">     * @inheritDoc</span>
2682 <span class="sd">     */</span>
2683     <span class="k">public</span> <span class="nv">$objectListClassName</span> <span class="o">=</span> <span class="nx">PersonList</span><span class="o">::</span><span class="na">class</span><span class="p">;</span>
2684
2685     <span class="sd">/**</span>
2686 <span class="sd">     * @inheritDoc</span>
2687 <span class="sd">     */</span>
2688     <span class="k">public</span> <span class="nv">$validSortFields</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;personID&#39;</span><span class="p">,</span> <span class="s1">&#39;firstName&#39;</span><span class="p">,</span> <span class="s1">&#39;lastName&#39;</span><span class="p">];</span>
2689 <span class="p">}</span>
2690 </code></pre></div>
2691 <p>As WoltLab Suite Core already provides a powerful default implementation of a sortable page, our work here is minimal:</p>
2692 <ol>
2693 <li>We need to set the active ACP menu item via the <code>$activeMenuItem</code>.</li>
2694 <li><code>$neededPermissions</code> contains a list of permissions of which the user needs to have at least one in order to see the person list.
2695    We use the same permission for both the menu item and the page.</li>
2696 <li>The database object list class whose name is provided via <code>$objectListClassName</code> and that handles fetching the people from database is the <code>PersonList</code> class, which we have already created.</li>
2697 <li>To validate the sort field passed with the request, we set <code>$validSortFields</code> to the available database table columns.</li>
2698 </ol>
2699 <h4 id="personlisttpl"><code>personList.tpl</code><a class="headerlink" href="#personlisttpl" title="Permanent link">#</a></h4>
2700 <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="na">pageTitle</span><span class="o">=</span><span class="s1">&#39;wcf.acp.person.list&#39;</span><span class="cp">}</span><span class="x"></span>
2701
2702 <span class="x">&lt;header class=&quot;contentHeader&quot;&gt;</span>
2703 <span class="x">    &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2704 <span class="x">        &lt;h1 class=&quot;contentTitle&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.person.list</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/h1&gt;</span>
2705 <span class="x">    &lt;/div&gt;</span>
2706
2707 <span class="x">    &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2708 <span class="x">        &lt;ul&gt;</span>
2709 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonAdd&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.menu.link.person.add</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2710
2711 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2712 <span class="x">        &lt;/ul&gt;</span>
2713 <span class="x">    &lt;/nav&gt;</span>
2714 <span class="x">&lt;/header&gt;</span>
2715
2716 <span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
2717 <span class="x">    &lt;div class=&quot;paginationTop&quot;&gt;</span>
2718 <span class="x">        </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="nf">pages</span> <span class="na">print</span><span class="o">=</span><span class="kc">true</span> <span class="na">assign</span><span class="o">=</span><span class="na">pagesLinks</span> <span class="na">controller</span><span class="o">=</span><span class="s2">&quot;PersonList&quot;</span> <span class="na">link</span><span class="o">=</span><span class="s2">&quot;pageNo=%d&amp;sortField=$sortField&amp;sortOrder=$sortOrder&quot;</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
2719 <span class="x">    &lt;/div&gt;</span>
2720 <span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
2721
2722 <span class="cp">{</span><span class="nf">if</span> <span class="nv">$objects</span><span class="o">|</span><span class="na">count</span><span class="cp">}</span><span class="x"></span>
2723 <span class="x">    &lt;div class=&quot;section tabularBox&quot; id=&quot;personTableContainer&quot;&gt;</span>
2724 <span class="x">        &lt;table class=&quot;table&quot;&gt;</span>
2725 <span class="x">            &lt;thead&gt;</span>
2726 <span class="x">                &lt;tr&gt;</span>
2727 <span class="x">                    &lt;th class=&quot;columnID columnPersonID</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;personID&#39;</span><span class="cp">}</span><span class="x"> active </span><span class="cp">{</span><span class="o">@</span><span class="nv">$sortOrder</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&quot; colspan=&quot;2&quot;&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="cp">}</span><span class="x">&amp;sortField=personID&amp;sortOrder=</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;personID&#39;</span> <span class="o">&amp;&amp;</span> <span class="nv">$sortOrder</span> <span class="o">==</span> <span class="s1">&#39;ASC&#39;</span><span class="cp">}</span><span class="x">DESC</span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x">ASC</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.objectID</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/a&gt;&lt;/th&gt;</span>
2728 <span class="x">                    &lt;th class=&quot;columnTitle columnFirstName</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;firstName&#39;</span><span class="cp">}</span><span class="x"> active </span><span class="cp">{</span><span class="o">@</span><span class="nv">$sortOrder</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&quot;&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="cp">}</span><span class="x">&amp;sortField=firstName&amp;sortOrder=</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;firstName&#39;</span> <span class="o">&amp;&amp;</span> <span class="nv">$sortOrder</span> <span class="o">==</span> <span class="s1">&#39;ASC&#39;</span><span class="cp">}</span><span class="x">DESC</span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x">ASC</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.firstName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/a&gt;&lt;/th&gt;</span>
2729 <span class="x">                    &lt;th class=&quot;columnTitle columnLastName</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;lastName&#39;</span><span class="cp">}</span><span class="x"> active </span><span class="cp">{</span><span class="o">@</span><span class="nv">$sortOrder</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&quot;&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="cp">}</span><span class="x">&amp;sortField=lastName&amp;sortOrder=</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;lastName&#39;</span> <span class="o">&amp;&amp;</span> <span class="nv">$sortOrder</span> <span class="o">==</span> <span class="s1">&#39;ASC&#39;</span><span class="cp">}</span><span class="x">DESC</span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x">ASC</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.lastName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/a&gt;&lt;/th&gt;</span>
2730
2731 <span class="x">                    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;columnHeads&#39;</span><span class="cp">}</span><span class="x"></span>
2732 <span class="x">                &lt;/tr&gt;</span>
2733 <span class="x">            &lt;/thead&gt;</span>
2734
2735 <span class="x">            &lt;tbody class=&quot;jsReloadPageWhenEmpty&quot;&gt;</span>
2736 <span class="x">                </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$objects</span> <span class="na">item</span><span class="o">=</span><span class="na">person</span><span class="cp">}</span><span class="x"></span>
2737 <span class="x">                    &lt;tr class=&quot;jsPersonRow&quot;&gt;</span>
2738 <span class="x">                        &lt;td class=&quot;columnIcon&quot;&gt;</span>
2739 <span class="x">                            &lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonEdit&#39;</span> <span class="na">object</span><span class="o">=</span><span class="nv">$person</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; title=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.edit</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; class=&quot;jsTooltip&quot;&gt;&lt;span class=&quot;icon icon16 fa-pencil&quot;&gt;&lt;/span&gt;&lt;/a&gt;</span>
2740 <span class="x">                            &lt;span class=&quot;icon icon16 fa-times jsDeleteButton jsTooltip pointer&quot; title=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.delete</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; data-object-id=&quot;</span><span class="cp">{</span><span class="o">@</span><span class="nv">$person</span><span class="o">-&gt;</span><span class="na">personID</span><span class="cp">}</span><span class="x">&quot; data-confirm-message-html=&quot;</span><span class="cp">{</span><span class="nf">lang</span> <span class="na">__encode</span><span class="o">=</span><span class="kc">true</span><span class="cp">}</span><span class="x">wcf.acp.person.delete.confirmMessage</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot;&gt;&lt;/span&gt;</span>
2741
2742 <span class="x">                            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;rowButtons&#39;</span><span class="cp">}</span><span class="x"></span>
2743 <span class="x">                        &lt;/td&gt;</span>
2744 <span class="x">                        &lt;td class=&quot;columnID&quot;&gt;</span><span class="cp">{</span><span class="err">#</span><span class="nv">$person</span><span class="o">-&gt;</span><span class="na">personID</span><span class="cp">}</span><span class="x">&lt;/td&gt;</span>
2745 <span class="x">                        &lt;td class=&quot;columnTitle columnFirstName&quot;&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonEdit&#39;</span> <span class="na">object</span><span class="o">=</span><span class="nv">$person</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span><span class="cp">{</span><span class="nv">$person</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="cp">}</span><span class="x">&lt;/a&gt;&lt;/td&gt;</span>
2746 <span class="x">                        &lt;td class=&quot;columnTitle columnLastName&quot;&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonEdit&#39;</span> <span class="na">object</span><span class="o">=</span><span class="nv">$person</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span><span class="cp">{</span><span class="nv">$person</span><span class="o">-&gt;</span><span class="na">lastName</span><span class="cp">}</span><span class="x">&lt;/a&gt;&lt;/td&gt;</span>
2747
2748 <span class="x">                        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;columns&#39;</span><span class="cp">}</span><span class="x"></span>
2749 <span class="x">                    &lt;/tr&gt;</span>
2750 <span class="x">                </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
2751 <span class="x">            &lt;/tbody&gt;</span>
2752 <span class="x">        &lt;/table&gt;</span>
2753 <span class="x">    &lt;/div&gt;</span>
2754
2755 <span class="x">    &lt;footer class=&quot;contentFooter&quot;&gt;</span>
2756 <span class="x">        </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
2757 <span class="x">            &lt;div class=&quot;paginationBottom&quot;&gt;</span>
2758 <span class="x">                </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="o">@</span><span class="nv">$pagesLinks</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
2759 <span class="x">            &lt;/div&gt;</span>
2760 <span class="x">        </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
2761
2762 <span class="x">        &lt;nav class=&quot;contentFooterNavigation&quot;&gt;</span>
2763 <span class="x">            &lt;ul&gt;</span>
2764 <span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonAdd&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.menu.link.person.add</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2765
2766 <span class="x">                </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentFooterNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2767 <span class="x">            &lt;/ul&gt;</span>
2768 <span class="x">        &lt;/nav&gt;</span>
2769 <span class="x">    &lt;/footer&gt;</span>
2770 <span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2771 <span class="x">    &lt;p class=&quot;info&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.noItems</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/p&gt;</span>
2772 <span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2773
2774 <span class="x">&lt;script data-relocate=&quot;true&quot;&gt;</span>
2775 <span class="x">    $(function() </span><span class="cp">{</span>
2776         <span class="na">new</span> <span class="na">WCF</span><span class="o">.</span><span class="na">Action</span><span class="o">.</span><span class="na">Delete</span><span class="o">(</span><span class="s1">&#39;wcf\\data\\person\\PersonAction&#39;</span><span class="o">,</span> <span class="s1">&#39;.jsPersonRow&#39;</span><span class="o">);</span>
2777     <span class="cp">}</span><span class="x">);</span>
2778 <span class="x">&lt;/script&gt;</span>
2779
2780 <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>
2781 </code></pre></div>
2782 <p>We will go piece by piece through the template code:</p>
2783 <ol>
2784 <li>We include the <code>header</code> template and set the page title <code>wcf.acp.person.list</code>.
2785    You have to include this template for every page!</li>
2786 <li>We set the content header and additional provide a button to create a new person in the content header navigation.</li>
2787 <li>As not all people are listed on the same page if many people have been created, we need a pagination for which we use the <code>pages</code> template plugin.
2788    The <code>{hascontent}{content}{/content}{/hascontent}</code> construct ensures the <code>.paginationTop</code> element is only shown if the <code>pages</code> template plugin has a return value, thus if a pagination is necessary.</li>
2789 <li>Now comes the main part of the page, the list of the people, which will only be displayed if any people exist.
2790    Otherwise, an info box is displayed using the generic <code>wcf.global.noItems</code> language item.
2791    The <code>$objects</code> template variable is automatically assigned by <code>wcf\page\MultipleLinkPage</code> and contains the <code>PersonList</code> object used to read the people from database.</li>
2792 </ol>
2793 <p>The table itself consists of a <code>thead</code> and a <code>tbody</code> element and is extendable with more columns using the template events <code>columnHeads</code> and <code>columns</code>.
2794    In general, every table should provide these events.
2795    The default structure of a table is used here so that the first column of the content rows contains icons to edit and to delete the row (and provides another standard event <code>rowButtons</code>) and that the second column contains the ID of the person.
2796    The table can be sorted by clicking on the head of each column.
2797    The used variables <code>$sortField</code> and <code>$sortOrder</code> are automatically assigned to the template by <code>SortablePage</code>.
2798 1. The <code>.contentFooter</code> element is only shown if people exist as it basically repeats the <code>.contentHeaderNavigation</code> and <code>.paginationTop</code> element.
2799 1. The JavaScript code here fulfills two duties:
2800    Handling clicks on the delete icons and forwarding the requests via AJAX to the <code>PersonAction</code> class, and setting up some code that triggers if all people shown on the current page are deleted via JavaScript to either reload the page or show the <code>wcf.global.noItems</code> info box.
2801 1. Lastly, the <code>footer</code> template is included that terminates the page.
2802    You also have to include this template for every page!</p>
2803 <p>Now, we have finished the page to manage the people so that we can move on to the forms with which we actually create and edit the people.</p>
2804 <h3 id="person-add-form">Person Add Form<a class="headerlink" href="#person-add-form" title="Permanent link">#</a></h3>
2805 <p>Like the person list, the form to add new people requires a controller class and a template.</p>
2806 <h4 id="personaddform"><code>PersonAddForm</code><a class="headerlink" href="#personaddform" title="Permanent link">#</a></h4>
2807 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2808 <span class="k">namespace</span> <span class="nx">wcf\acp\form</span><span class="p">;</span>
2809 <span class="k">use</span> <span class="nx">wcf\data\person\PersonAction</span><span class="p">;</span>
2810 <span class="k">use</span> <span class="nx">wcf\form\AbstractForm</span><span class="p">;</span>
2811 <span class="k">use</span> <span class="nx">wcf\system\exception\UserInputException</span><span class="p">;</span>
2812 <span class="k">use</span> <span class="nx">wcf\system\request\LinkHandler</span><span class="p">;</span>
2813 <span class="k">use</span> <span class="nx">wcf\system\WCF</span><span class="p">;</span>
2814 <span class="k">use</span> <span class="nx">wcf\util\StringUtil</span><span class="p">;</span>
2815
2816 <span class="sd">/**</span>
2817 <span class="sd"> * Shows the form to create a new person.</span>
2818 <span class="sd"> * </span>
2819 <span class="sd"> * @author  Matthias Schmidt</span>
2820 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
2821 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2822 <span class="sd"> * @package WoltLabSuite\Core\Acp\Form</span>
2823 <span class="sd"> */</span>
2824 <span class="k">class</span> <span class="nc">PersonAddForm</span> <span class="k">extends</span> <span class="nx">AbstractForm</span> <span class="p">{</span>
2825     <span class="sd">/**</span>
2826 <span class="sd">     * @inheritDoc</span>
2827 <span class="sd">     */</span>
2828     <span class="k">public</span> <span class="nv">$activeMenuItem</span> <span class="o">=</span> <span class="s1">&#39;wcf.acp.menu.link.person.add&#39;</span><span class="p">;</span>
2829
2830     <span class="sd">/**</span>
2831 <span class="sd">     * first name of the person</span>
2832 <span class="sd">     * @var string</span>
2833 <span class="sd">     */</span>
2834     <span class="k">public</span> <span class="nv">$firstName</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2835
2836     <span class="sd">/**</span>
2837 <span class="sd">     * last name of the person</span>
2838 <span class="sd">     * @var string</span>
2839 <span class="sd">     */</span>
2840     <span class="k">public</span> <span class="nv">$lastName</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2841
2842     <span class="sd">/**</span>
2843 <span class="sd">     * @inheritDoc</span>
2844 <span class="sd">     */</span>
2845     <span class="k">public</span> <span class="nv">$neededPermissions</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;admin.content.canManagePeople&#39;</span><span class="p">];</span>
2846
2847     <span class="sd">/**</span>
2848 <span class="sd">     * @inheritDoc</span>
2849 <span class="sd">     */</span>
2850     <span class="k">public</span> <span class="k">function</span> <span class="nf">assignVariables</span><span class="p">()</span> <span class="p">{</span>
2851         <span class="k">parent</span><span class="o">::</span><span class="na">assignVariables</span><span class="p">();</span>
2852
2853         <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>
2854             <span class="s1">&#39;action&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;add&#39;</span><span class="p">,</span>
2855             <span class="s1">&#39;firstName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="p">,</span>
2856             <span class="s1">&#39;lastName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span>
2857         <span class="p">]);</span>
2858     <span class="p">}</span>
2859
2860     <span class="sd">/**</span>
2861 <span class="sd">     * @inheritDoc</span>
2862 <span class="sd">     */</span>
2863     <span class="k">public</span> <span class="k">function</span> <span class="nf">readFormParameters</span><span class="p">()</span> <span class="p">{</span>
2864         <span class="k">parent</span><span class="o">::</span><span class="na">readFormParameters</span><span class="p">();</span>
2865
2866         <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;firstName&#39;</span><span class="p">]))</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span> <span class="o">=</span> <span class="nx">StringUtil</span><span class="o">::</span><span class="na">trim</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;firstName&#39;</span><span class="p">]);</span>
2867         <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;lastName&#39;</span><span class="p">]))</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span> <span class="o">=</span> <span class="nx">StringUtil</span><span class="o">::</span><span class="na">trim</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">[</span><span class="s1">&#39;lastName&#39;</span><span class="p">]);</span>
2868     <span class="p">}</span>
2869
2870     <span class="sd">/**</span>
2871 <span class="sd">     * @inheritDoc</span>
2872 <span class="sd">     */</span>
2873     <span class="k">public</span> <span class="k">function</span> <span class="nf">save</span><span class="p">()</span> <span class="p">{</span>
2874         <span class="k">parent</span><span class="o">::</span><span class="na">save</span><span class="p">();</span>
2875
2876         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">objectAction</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PersonAction</span><span class="p">([],</span> <span class="s1">&#39;create&#39;</span><span class="p">,</span> <span class="p">[</span>
2877             <span class="s1">&#39;data&#39;</span> <span class="o">=&gt;</span> <span class="nb">array_merge</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">additionalFields</span><span class="p">,</span> <span class="p">[</span>
2878                 <span class="s1">&#39;firstName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="p">,</span>
2879                 <span class="s1">&#39;lastName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span>
2880             <span class="p">])</span>
2881         <span class="p">]);</span>
2882         <span class="nv">$returnValues</span> <span class="o">=</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">objectAction</span><span class="o">-&gt;</span><span class="na">executeAction</span><span class="p">();</span>
2883
2884         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">saved</span><span class="p">();</span>
2885
2886         <span class="c1">// reset values</span>
2887         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2888         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2889
2890         <span class="c1">// show success message</span>
2891         <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>
2892             <span class="s1">&#39;success&#39;</span> <span class="o">=&gt;</span> <span class="k">true</span><span class="p">,</span>
2893             <span class="s1">&#39;objectEditLink&#39;</span> <span class="o">=&gt;</span> <span class="nx">LinkHandler</span><span class="o">::</span><span class="na">getInstance</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">getControllerLink</span><span class="p">(</span><span class="nx">PersonEditForm</span><span class="o">::</span><span class="na">class</span><span class="p">,</span> <span class="p">[</span><span class="s1">&#39;id&#39;</span> <span class="o">=&gt;</span> <span class="nv">$returnValues</span><span class="p">[</span><span class="s1">&#39;returnValues&#39;</span><span class="p">]</span><span class="o">-&gt;</span><span class="na">personID</span><span class="p">]),</span>
2894         <span class="p">]);</span>
2895     <span class="p">}</span>
2896
2897     <span class="sd">/**</span>
2898 <span class="sd">     * @inheritDoc</span>
2899 <span class="sd">     */</span>
2900     <span class="k">public</span> <span class="k">function</span> <span class="nf">validate</span><span class="p">()</span> <span class="p">{</span>
2901         <span class="k">parent</span><span class="o">::</span><span class="na">validate</span><span class="p">();</span>
2902
2903         <span class="c1">// validate first name</span>
2904         <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">firstName</span><span class="p">))</span> <span class="p">{</span>
2905             <span class="k">throw</span> <span class="k">new</span> <span class="nx">UserInputException</span><span class="p">(</span><span class="s1">&#39;firstName&#39;</span><span class="p">);</span>
2906         <span class="p">}</span>
2907         <span class="k">if</span> <span class="p">(</span><span class="nb">mb_strlen</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">255</span><span class="p">)</span> <span class="p">{</span>
2908             <span class="k">throw</span> <span class="k">new</span> <span class="nx">UserInputException</span><span class="p">(</span><span class="s1">&#39;firstName&#39;</span><span class="p">,</span> <span class="s1">&#39;tooLong&#39;</span><span class="p">);</span>
2909         <span class="p">}</span>
2910
2911         <span class="c1">// validate last name</span>
2912         <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">lastName</span><span class="p">))</span> <span class="p">{</span>
2913             <span class="k">throw</span> <span class="k">new</span> <span class="nx">UserInputException</span><span class="p">(</span><span class="s1">&#39;lastName&#39;</span><span class="p">);</span>
2914         <span class="p">}</span>
2915         <span class="k">if</span> <span class="p">(</span><span class="nb">mb_strlen</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">255</span><span class="p">)</span> <span class="p">{</span>
2916             <span class="k">throw</span> <span class="k">new</span> <span class="nx">UserInputException</span><span class="p">(</span><span class="s1">&#39;lastName&#39;</span><span class="p">,</span> <span class="s1">&#39;tooLong&#39;</span><span class="p">);</span>
2917         <span class="p">}</span>
2918     <span class="p">}</span>
2919 <span class="p">}</span>
2920 </code></pre></div>
2921 <p>The properties here consist of two types:
2922 the “housekeeping” properties <code>$activeMenuItem</code> and <code>$neededPermissions</code>, which fulfill the same roles as for <code>PersonListPage</code>, and the “data” properties <code>$firstName</code> and <code>$lastName</code>, which will contain the data entered by the user of the person to be created.</p>
2923 <p>Now, let's go through each method in execution order:</p>
2924 <ol>
2925 <li><code>readFormParameters()</code> is called after the form has been submitted and reads the entered first and last name and sanitizes the values by calling <code>StringUtil::trim()</code>.</li>
2926 <li><code>validate()</code> is called after the form has been submitted and is used to validate the input data.
2927    In case of invalid data, the method is expected to throw a <code>UserInputException</code>.
2928    Here, the validation for first and last name is the same and quite basic:
2929    We check that any name has been entered and that it is not longer than the database table column permits.</li>
2930 <li><code>save()</code> is called after the form has been submitted and the entered data has been validated and it creates the new person via <code>PersonAction</code>.
2931    Please note that we do not just pass the first and last name to the action object but merge them with the <code>$this-&gt;additionalFields</code> array which can be used by event listeners of plugins to add additional data.
2932    After creating the object, the <code>saved()</code> method is called which fires an event for plugins and the data properties are cleared so that the input fields on the page are empty so that another new person can be created.
2933    Lastly, a <code>success</code> variable is assigned to the template which will show a message that the person has been successfully created.</li>
2934 <li><code>assignVariables()</code> assigns the values of the “data” properties to the template and additionally assigns an <code>action</code> variable.
2935    This <code>action</code> variable will be used in the template to distinguish between adding a new person and editing an existing person so that which minimal adjustments, we can use the template for both cases.</li>
2936 </ol>
2937 <h4 id="personaddtpl"><code>personAdd.tpl</code><a class="headerlink" href="#personaddtpl" title="Permanent link">#</a></h4>
2938 <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="na">pageTitle</span><span class="o">=</span><span class="s1">&#39;wcf.acp.person.&#39;</span><span class="o">|</span><span class="na">concat</span><span class="o">:</span><span class="nv">$action</span><span class="cp">}</span><span class="x"></span>
2939
2940 <span class="x">&lt;header class=&quot;contentHeader&quot;&gt;</span>
2941 <span class="x">    &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
2942 <span class="x">        &lt;h1 class=&quot;contentTitle&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.person.</span><span class="cp">{</span><span class="nv">$action</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/h1&gt;</span>
2943 <span class="x">    &lt;/div&gt;</span>
2944
2945 <span class="x">    &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
2946 <span class="x">        &lt;ul&gt;</span>
2947 <span class="x">            &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-list&quot;&gt;&lt;/span&gt; &lt;span&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.menu.link.person.list</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
2948
2949 <span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
2950 <span class="x">        &lt;/ul&gt;</span>
2951 <span class="x">    &lt;/nav&gt;</span>
2952 <span class="x">&lt;/header&gt;</span>
2953
2954 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;formNotice&#39;</span><span class="cp">}</span><span class="x"></span>
2955
2956 <span class="x">&lt;form method=&quot;post&quot; action=&quot;</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$action</span> <span class="o">==</span> <span class="s1">&#39;add&#39;</span><span class="cp">}{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonAdd&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}{</span><span class="nf">else</span><span class="cp">}{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonEdit&#39;</span> <span class="na">object</span><span class="o">=</span><span class="nv">$person</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
2957 <span class="x">    &lt;div class=&quot;section&quot;&gt;</span>
2958 <span class="x">        &lt;dl</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;firstName&#39;</span><span class="cp">}</span><span class="x"> class=&quot;formError&quot;</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span>
2959 <span class="x">            &lt;dt&gt;&lt;label for=&quot;firstName&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.firstName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2960 <span class="x">            &lt;dd&gt;</span>
2961 <span class="x">                &lt;input type=&quot;text&quot; id=&quot;firstName&quot; name=&quot;firstName&quot; value=&quot;</span><span class="cp">{</span><span class="nv">$firstName</span><span class="cp">}</span><span class="x">&quot; required autofocus maxlength=&quot;255&quot; class=&quot;long&quot;&gt;</span>
2962 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;firstName&#39;</span><span class="cp">}</span><span class="x"></span>
2963 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span>
2964 <span class="x">                        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorType</span> <span class="o">==</span> <span class="s1">&#39;empty&#39;</span><span class="cp">}</span><span class="x"></span>
2965 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.form.error.empty</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2966 <span class="x">                        </span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2967 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.person.firstName.error.</span><span class="cp">{</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2968 <span class="x">                        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2969 <span class="x">                    &lt;/small&gt;</span>
2970 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2971 <span class="x">            &lt;/dd&gt;</span>
2972 <span class="x">        &lt;/dl&gt;</span>
2973
2974 <span class="x">        &lt;dl</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;lastName&#39;</span><span class="cp">}</span><span class="x"> class=&quot;formError&quot;</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span>
2975 <span class="x">            &lt;dt&gt;&lt;label for=&quot;lastName&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.lastName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/label&gt;&lt;/dt&gt;</span>
2976 <span class="x">            &lt;dd&gt;</span>
2977 <span class="x">                &lt;input type=&quot;text&quot; id=&quot;lastName&quot; name=&quot;lastName&quot; value=&quot;</span><span class="cp">{</span><span class="nv">$lastName</span><span class="cp">}</span><span class="x">&quot; required maxlength=&quot;255&quot; class=&quot;long&quot;&gt;</span>
2978 <span class="x">                </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorField</span> <span class="o">==</span> <span class="s1">&#39;lastName&#39;</span><span class="cp">}</span><span class="x"></span>
2979 <span class="x">                    &lt;small class=&quot;innerError&quot;&gt;</span>
2980 <span class="x">                        </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$errorType</span> <span class="o">==</span> <span class="s1">&#39;empty&#39;</span><span class="cp">}</span><span class="x"></span>
2981 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.form.error.empty</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2982 <span class="x">                        </span><span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
2983 <span class="x">                            </span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.acp.person.lastName.error.</span><span class="cp">{</span><span class="nv">$errorType</span><span class="cp">}{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"></span>
2984 <span class="x">                        </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2985 <span class="x">                    &lt;/small&gt;</span>
2986 <span class="x">                </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
2987 <span class="x">            &lt;/dd&gt;</span>
2988 <span class="x">        &lt;/dl&gt;</span>
2989
2990 <span class="x">        </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;dataFields&#39;</span><span class="cp">}</span><span class="x"></span>
2991 <span class="x">    &lt;/div&gt;</span>
2992
2993 <span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;sections&#39;</span><span class="cp">}</span><span class="x"></span>
2994
2995 <span class="x">    &lt;div class=&quot;formSubmit&quot;&gt;</span>
2996 <span class="x">        &lt;input type=&quot;submit&quot; value=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.submit</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; accesskey=&quot;s&quot;&gt;</span>
2997 <span class="x">        </span><span class="cp">{</span><span class="nf">csrfToken</span><span class="cp">}</span><span class="x"></span>
2998 <span class="x">    &lt;/div&gt;</span>
2999 <span class="x">&lt;/form&gt;</span>
3000
3001 <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>
3002 </code></pre></div>
3003 <p>We will now only concentrate on the new parts compared to <code>personList.tpl</code>:</p>
3004 <ol>
3005 <li>We use the <code>$action</code> variable to distinguish between the languages items used for adding a person and for creating a person.</li>
3006 <li>Including the <code>formError</code> template automatically shows an error message if the validation failed.</li>
3007 <li>The <code>.success</code> element is shown after successful saving the data and, again, shows different a text depending on the executed action.</li>
3008 <li>The main part is the <code>form</code> element which has a common structure you will find in many forms in WoltLab Suite Core.
3009    The notable parts here are:</li>
3010 <li>The <code>action</code> attribute of the <code>form</code> element is set depending on which controller will handle the request.
3011      In the link for the edit controller, we can now simply pass the edited <code>Person</code> object directly as the <code>Person</code> class implements the <code>IRouteController</code> interface.</li>
3012 <li>The field that caused the validation error can be accessed via <code>$errorField</code>.</li>
3013 <li>The type of the validation error can be accessed via <code>$errorType</code>.
3014      For an empty input field, we show the generic <code>wcf.global.form.error.empty</code> language item.
3015      In all other cases, we use the error type to determine the object- and property-specific language item to show.
3016      The approach used here allows plugins to easily add further validation error messages by simply using a different error type and providing the associated language item.</li>
3017 <li>Input fields can be grouped into different <code>.section</code> elements.
3018      At the end of each <code>.section</code> element, there should be an template event whose name ends with <code>Fields</code>.
3019      The first part of the event name should reflect the type of fields in the particular <code>.section</code> element.
3020      Here, the input fields are just general “data” fields so that the event is called <code>dataFields</code>.</li>
3021 <li>After the last <code>.section</code> element, fire a <code>section</code> event so that plugins can add further sections.</li>
3022 <li>Lastly, the <code>.formSubmit</code> shows the submit button and <code>{csrfToken}</code> contains a CSRF token that is automatically validated after the form is submitted.</li>
3023 </ol>
3024 <h3 id="person-edit-form">Person Edit Form<a class="headerlink" href="#person-edit-form" title="Permanent link">#</a></h3>
3025 <p>As mentioned before, for the form to edit existing people, we only need a new controller as the template has already been implemented in a way that it handles both, adding and editing.</p>
3026 <h4 id="personeditform"><code>PersonEditForm</code><a class="headerlink" href="#personeditform" title="Permanent link">#</a></h4>
3027 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
3028 <span class="k">namespace</span> <span class="nx">wcf\acp\form</span><span class="p">;</span>
3029 <span class="k">use</span> <span class="nx">wcf\data\person\Person</span><span class="p">;</span>
3030 <span class="k">use</span> <span class="nx">wcf\data\person\PersonAction</span><span class="p">;</span>
3031 <span class="k">use</span> <span class="nx">wcf\form\AbstractForm</span><span class="p">;</span>
3032 <span class="k">use</span> <span class="nx">wcf\system\exception\IllegalLinkException</span><span class="p">;</span>
3033 <span class="k">use</span> <span class="nx">wcf\system\WCF</span><span class="p">;</span>
3034
3035 <span class="sd">/**</span>
3036 <span class="sd"> * Shows the form to edit an existing person.</span>
3037 <span class="sd"> * </span>
3038 <span class="sd"> * @author  Matthias Schmidt</span>
3039 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
3040 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
3041 <span class="sd"> * @package WoltLabSuite\Core\Acp\Form</span>
3042 <span class="sd"> */</span>
3043 <span class="k">class</span> <span class="nc">PersonEditForm</span> <span class="k">extends</span> <span class="nx">PersonAddForm</span> <span class="p">{</span>
3044     <span class="sd">/**</span>
3045 <span class="sd">     * @inheritDoc</span>
3046 <span class="sd">     */</span>
3047     <span class="k">public</span> <span class="nv">$activeMenuItem</span> <span class="o">=</span> <span class="s1">&#39;wcf.acp.menu.link.person&#39;</span><span class="p">;</span>
3048
3049     <span class="sd">/**</span>
3050 <span class="sd">     * edited person object</span>
3051 <span class="sd">     * @var Person</span>
3052 <span class="sd">     */</span>
3053     <span class="k">public</span> <span class="nv">$person</span> <span class="o">=</span> <span class="k">null</span><span class="p">;</span>
3054
3055     <span class="sd">/**</span>
3056 <span class="sd">     * id of the edited person</span>
3057 <span class="sd">     * @var integer</span>
3058 <span class="sd">     */</span>
3059     <span class="k">public</span> <span class="nv">$personID</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
3060
3061     <span class="sd">/**</span>
3062 <span class="sd">     * @inheritDoc</span>
3063 <span class="sd">     */</span>
3064     <span class="k">public</span> <span class="k">function</span> <span class="nf">assignVariables</span><span class="p">()</span> <span class="p">{</span>
3065         <span class="k">parent</span><span class="o">::</span><span class="na">assignVariables</span><span class="p">();</span>
3066
3067         <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>
3068             <span class="s1">&#39;action&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;edit&#39;</span><span class="p">,</span>
3069             <span class="s1">&#39;person&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span>
3070         <span class="p">]);</span>
3071     <span class="p">}</span>
3072
3073     <span class="sd">/**</span>
3074 <span class="sd">     * @inheritDoc</span>
3075 <span class="sd">     */</span>
3076     <span class="k">public</span> <span class="k">function</span> <span class="nf">readData</span><span class="p">()</span> <span class="p">{</span>
3077         <span class="k">parent</span><span class="o">::</span><span class="na">readData</span><span class="p">();</span>
3078
3079         <span class="k">if</span> <span class="p">(</span><span class="k">empty</span><span class="p">(</span><span class="nv">$_POST</span><span class="p">))</span> <span class="p">{</span>
3080             <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span> <span class="o">=</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="p">;</span>
3081             <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span> <span class="o">=</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span><span class="o">-&gt;</span><span class="na">lastName</span><span class="p">;</span>
3082         <span class="p">}</span>
3083     <span class="p">}</span>
3084
3085     <span class="sd">/**</span>
3086 <span class="sd">     * @inheritDoc</span>
3087 <span class="sd">     */</span>
3088     <span class="k">public</span> <span class="k">function</span> <span class="nf">readParameters</span><span class="p">()</span> <span class="p">{</span>
3089         <span class="k">parent</span><span class="o">::</span><span class="na">readParameters</span><span class="p">();</span>
3090
3091         <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_REQUEST</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">]))</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">personID</span> <span class="o">=</span> <span class="nb">intval</span><span class="p">(</span><span class="nv">$_REQUEST</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">]);</span>
3092         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">personID</span><span class="p">);</span>
3093         <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span><span class="o">-&gt;</span><span class="na">personID</span><span class="p">)</span> <span class="p">{</span>
3094             <span class="k">throw</span> <span class="k">new</span> <span class="nx">IllegalLinkException</span><span class="p">();</span>
3095         <span class="p">}</span>
3096     <span class="p">}</span>
3097
3098     <span class="sd">/**</span>
3099 <span class="sd">     * @inheritDoc</span>
3100 <span class="sd">     */</span>
3101     <span class="k">public</span> <span class="k">function</span> <span class="nf">save</span><span class="p">()</span> <span class="p">{</span>
3102         <span class="nx">AbstractForm</span><span class="o">::</span><span class="na">save</span><span class="p">();</span>
3103
3104         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">objectAction</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PersonAction</span><span class="p">([</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">person</span><span class="p">],</span> <span class="s1">&#39;update&#39;</span><span class="p">,</span> <span class="p">[</span>
3105             <span class="s1">&#39;data&#39;</span> <span class="o">=&gt;</span> <span class="nb">array_merge</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">additionalFields</span><span class="p">,</span> <span class="p">[</span>
3106                 <span class="s1">&#39;firstName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">firstName</span><span class="p">,</span>
3107                 <span class="s1">&#39;lastName&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">lastName</span>
3108             <span class="p">])</span>
3109         <span class="p">]);</span>
3110         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">objectAction</span><span class="o">-&gt;</span><span class="na">executeAction</span><span class="p">();</span>
3111
3112         <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">saved</span><span class="p">();</span>
3113
3114         <span class="c1">// show success message</span>
3115         <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;success&#39;</span><span class="p">,</span> <span class="k">true</span><span class="p">);</span>
3116     <span class="p">}</span>
3117 <span class="p">}</span>
3118 </code></pre></div>
3119 <p>In general, edit forms extend the associated add form so that the code to read and to validate the input data is simply inherited.</p>
3120 <p>After setting a different active menu item, we declare two new properties for the edited person:
3121 the id of the person passed in the URL is stored in <code>$personID</code> and based on this ID, a <code>Person</code> object is created that is stored in the <code>$person</code> property.</p>
3122 <p>Now let use go through the different methods in chronological order again:</p>
3123 <ol>
3124 <li><code>readParameters()</code> reads the passed ID of the edited person and creates a <code>Person</code> object based on this ID.
3125    If the ID is invalid, <code>$this-&gt;person-&gt;personID</code> is <code>null</code> and an <code>IllegalLinkException</code> is thrown.</li>
3126 <li><code>readData()</code> only executes additional code in the case if <code>$_POST</code> is empty, thus only for the initial request before the form has been submitted.
3127    The data properties of <code>PersonAddForm</code> are populated with the data of the edited person so that this data is shown in the form for the initial request.</li>
3128 <li><code>save()</code> handles saving the changed data.</li>
3129 </ol>
3130 <p>!!! warning "Do not call <code>parent::save()</code> because that would cause <code>PersonAddForm::save()</code> to be executed and thus a new person would to be created! In order for the <code>save</code> event to be fired, call <code>AbstractForm::save()</code> instead!"</p>
3131 <p>The only differences compared to <code>PersonAddForm::save()</code> are that we pass the edited object to the <code>PersonAction</code> constructor, execute the <code>update</code> action instead of the <code>create</code> action and do not clear the input fields after saving the changes.
3132 1. In <code>assignVariables()</code>, we assign the edited <code>Person</code> object to the template, which is required to create the link in the form’s action property.
3133    Furthermore, we assign the template variable <code>$action</code> <code>edit</code> as value.</p>
3134 <p>!!! info "After calling <code>parent::assignVariables()</code>, the template variable <code>$action</code> actually has the value <code>add</code> so that here, we are overwriting this already assigned value."</p>
3135 <h2 id="frontend">Frontend<a class="headerlink" href="#frontend" title="Permanent link">#</a></h2>
3136 <p>For the front end, that means the part with which the visitors of a website interact, we want to implement a simple sortable page that lists the people.
3137 This page should also be directly linked in the main menu.</p>
3138 <h3 id="pagexml"><code>page.xml</code><a class="headerlink" href="#pagexml" title="Permanent link">#</a></h3>
3139 <p>First, let us register the page with the system because every front end page or form needs to be explicitly registered using the <a href="../../../package/pip/page/">page package installation plugin</a>:</p>
3140 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
3141 <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/tornado/page.xsd&quot;</span><span class="nt">&gt;</span>
3142     <span class="nt">&lt;import&gt;</span>
3143         <span class="nt">&lt;page</span> <span class="na">identifier=</span><span class="s">&quot;com.woltlab.wcf.people.PersonList&quot;</span><span class="nt">&gt;</span>
3144             <span class="nt">&lt;pageType&gt;</span>system<span class="nt">&lt;/pageType&gt;</span>
3145             <span class="nt">&lt;controller&gt;</span>wcf\page\PersonListPage<span class="nt">&lt;/controller&gt;</span>
3146             <span class="nt">&lt;name</span> <span class="na">language=</span><span class="s">&quot;de&quot;</span><span class="nt">&gt;</span>Personen-Liste<span class="nt">&lt;/name&gt;</span>
3147             <span class="nt">&lt;name</span> <span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>Person List<span class="nt">&lt;/name&gt;</span>
3148
3149             <span class="nt">&lt;content</span> <span class="na">language=</span><span class="s">&quot;de&quot;</span><span class="nt">&gt;</span>
3150                 <span class="nt">&lt;title&gt;</span>Personen<span class="nt">&lt;/title&gt;</span>
3151             <span class="nt">&lt;/content&gt;</span>
3152             <span class="nt">&lt;content</span> <span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
3153                 <span class="nt">&lt;title&gt;</span>People<span class="nt">&lt;/title&gt;</span>
3154             <span class="nt">&lt;/content&gt;</span>
3155         <span class="nt">&lt;/page&gt;</span>
3156     <span class="nt">&lt;/import&gt;</span>
3157 <span class="nt">&lt;/data&gt;</span>
3158 </code></pre></div>
3159 <p>For more information about what each of the elements means, please refer to the <a href="../../../package/pip/page/">page package installation plugin page</a>.</p>
3160 <h3 id="menuitemxml"><code>menuItem.xml</code><a class="headerlink" href="#menuitemxml" title="Permanent link">#</a></h3>
3161 <p>Next, we register the menu item using the <a href="../../../package/pip/menu-item/">menuItem package installation plugin</a>:</p>
3162 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
3163 <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/tornado/menuItem.xsd&quot;</span><span class="nt">&gt;</span>
3164     <span class="nt">&lt;import&gt;</span>
3165         <span class="nt">&lt;item</span> <span class="na">identifier=</span><span class="s">&quot;com.woltlab.wcf.people.PersonList&quot;</span><span class="nt">&gt;</span>
3166             <span class="nt">&lt;menu&gt;</span>com.woltlab.wcf.MainMenu<span class="nt">&lt;/menu&gt;</span>
3167             <span class="nt">&lt;title</span> <span class="na">language=</span><span class="s">&quot;de&quot;</span><span class="nt">&gt;</span>Personen<span class="nt">&lt;/title&gt;</span>
3168             <span class="nt">&lt;title</span> <span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>People<span class="nt">&lt;/title&gt;</span>
3169             <span class="nt">&lt;page&gt;</span>com.woltlab.wcf.people.PersonList<span class="nt">&lt;/page&gt;</span>
3170         <span class="nt">&lt;/item&gt;</span>
3171     <span class="nt">&lt;/import&gt;</span>
3172 <span class="nt">&lt;/data&gt;</span>
3173 </code></pre></div>
3174 <p>Here, the import parts are that we register the menu item for the main menu <code>com.woltlab.wcf.MainMenu</code> and link the menu item with the page <code>com.woltlab.wcf.people.PersonList</code>, which we just registered.</p>
3175 <h3 id="people-list_1">People List<a class="headerlink" href="#people-list_1" title="Permanent link">#</a></h3>
3176 <p>As in the ACP, we need a controller and a template.
3177 You might notice that both the controller’s (unqualified) class name and the template name are the same for the ACP and the front end.
3178 This is no problem because the qualified names of the classes differ and the files are stored in different directories and because the templates are installed by different package installation plugins and are also stored in different directories.</p>
3179 <h4 id="personlistpage_1"><code>PersonListPage</code><a class="headerlink" href="#personlistpage_1" title="Permanent link">#</a></h4>
3180 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
3181 <span class="k">namespace</span> <span class="nx">wcf\page</span><span class="p">;</span>
3182 <span class="k">use</span> <span class="nx">wcf\data\person\PersonList</span><span class="p">;</span>
3183
3184 <span class="sd">/**</span>
3185 <span class="sd"> * Shows the list of people.</span>
3186 <span class="sd"> * </span>
3187 <span class="sd"> * @author  Matthias Schmidt</span>
3188 <span class="sd"> * @copyright   2001-2019 WoltLab GmbH</span>
3189 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
3190 <span class="sd"> * @package WoltLabSuite\Core\Page</span>
3191 <span class="sd"> */</span>
3192 <span class="k">class</span> <span class="nc">PersonListPage</span> <span class="k">extends</span> <span class="nx">SortablePage</span> <span class="p">{</span>
3193     <span class="sd">/**</span>
3194 <span class="sd">     * @inheritDoc</span>
3195 <span class="sd">     */</span>
3196     <span class="k">public</span> <span class="nv">$defaultSortField</span> <span class="o">=</span> <span class="s1">&#39;lastName&#39;</span><span class="p">;</span>
3197
3198     <span class="sd">/**</span>
3199 <span class="sd">     * @inheritDoc</span>
3200 <span class="sd">     */</span>
3201     <span class="k">public</span> <span class="nv">$objectListClassName</span> <span class="o">=</span> <span class="nx">PersonList</span><span class="o">::</span><span class="na">class</span><span class="p">;</span>
3202
3203     <span class="sd">/**</span>
3204 <span class="sd">     * @inheritDoc</span>
3205 <span class="sd">     */</span>
3206     <span class="k">public</span> <span class="nv">$validSortFields</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;personID&#39;</span><span class="p">,</span> <span class="s1">&#39;firstName&#39;</span><span class="p">,</span> <span class="s1">&#39;lastName&#39;</span><span class="p">];</span>
3207 <span class="p">}</span>
3208 </code></pre></div>
3209 <p>This class is almost identical to the ACP version.
3210 In the front end, we do not need to set the active menu item manually because the system determines the active menu item automatically based on the requested page.
3211 Furthermore, <code>$neededPermissions</code> has not been set because in the front end, users do not need any special permission to access the page.
3212 In the front end, we explicitly set the <code>$defaultSortField</code> so that the people listed on the page are sorted by their last name (in ascending order) by default.</p>
3213 <h4 id="personlisttpl_1"><code>personList.tpl</code><a class="headerlink" href="#personlisttpl_1" title="Permanent link">#</a></h4>
3214 <div class="highlight"><pre><span></span><code><span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentTitle&#39;</span><span class="cp">}{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.list</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x"> &lt;span class=&quot;badge&quot;&gt;</span><span class="cp">{</span><span class="err">#</span><span class="nv">$items</span><span class="cp">}</span><span class="x">&lt;/span&gt;</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
3215
3216 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;headContent&#39;</span><span class="cp">}</span><span class="x"></span>
3217 <span class="x">    </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$pageNo</span> <span class="o">&lt;</span> <span class="nv">$pages</span><span class="cp">}</span><span class="x"></span>
3218 <span class="x">        &lt;link rel=&quot;next&quot; href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="o">+</span><span class="m">1</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
3219 <span class="x">    </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
3220 <span class="x">    </span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$pageNo</span> <span class="o">&gt;</span> <span class="m">1</span><span class="cp">}</span><span class="x"></span>
3221 <span class="x">        &lt;link rel=&quot;prev&quot; href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}{</span><span class="nf">if</span> <span class="nv">$pageNo</span> <span class="o">&gt;</span> <span class="m">2</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="o">-</span><span class="m">1</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
3222 <span class="x">    </span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
3223 <span class="x">    &lt;link rel=&quot;canonical&quot; href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}{</span><span class="nf">if</span> <span class="nv">$pageNo</span> <span class="o">&gt;</span> <span class="m">1</span><span class="cp">}</span><span class="x">pageNo=</span><span class="cp">{</span><span class="o">@</span><span class="nv">$pageNo</span><span class="cp">}{</span><span class="nf">/if</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
3224 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
3225
3226 <span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;sidebarRight&#39;</span><span class="cp">}</span><span class="x"></span>
3227 <span class="x">    &lt;section class=&quot;box&quot;&gt;</span>
3228 <span class="x">        &lt;form method=&quot;post&quot; action=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot;&gt;</span>
3229 <span class="x">            &lt;h2 class=&quot;boxTitle&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.sorting</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/h2&gt;</span>
3230
3231 <span class="x">            &lt;div class=&quot;boxContent&quot;&gt;</span>
3232 <span class="x">                &lt;dl&gt;</span>
3233 <span class="x">                    &lt;dt&gt;&lt;/dt&gt;</span>
3234 <span class="x">                    &lt;dd&gt;</span>
3235 <span class="x">                        &lt;select id=&quot;sortField&quot; name=&quot;sortField&quot;&gt;</span>
3236 <span class="x">                            &lt;option value=&quot;firstName&quot;</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;firstName&#39;</span><span class="cp">}</span><span class="x"> selected</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.firstName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/option&gt;</span>
3237 <span class="x">                            &lt;option value=&quot;lastName&quot;</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortField</span> <span class="o">==</span> <span class="s1">&#39;lastName&#39;</span><span class="cp">}</span><span class="x"> selected</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.person.lastName</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/option&gt;</span>
3238 <span class="x">                            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;sortField&#39;</span><span class="cp">}</span><span class="x"></span>
3239 <span class="x">                        &lt;/select&gt;</span>
3240 <span class="x">                        &lt;select name=&quot;sortOrder&quot;&gt;</span>
3241 <span class="x">                            &lt;option value=&quot;ASC&quot;</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortOrder</span> <span class="o">==</span> <span class="s1">&#39;ASC&#39;</span><span class="cp">}</span><span class="x"> selected</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.sortOrder.ascending</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/option&gt;</span>
3242 <span class="x">                            &lt;option value=&quot;DESC&quot;</span><span class="cp">{</span><span class="nf">if</span> <span class="nv">$sortOrder</span> <span class="o">==</span> <span class="s1">&#39;DESC&#39;</span><span class="cp">}</span><span class="x"> selected</span><span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x">&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.sortOrder.descending</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/option&gt;</span>
3243 <span class="x">                        &lt;/select&gt;</span>
3244 <span class="x">                    &lt;/dd&gt;</span>
3245 <span class="x">                &lt;/dl&gt;</span>
3246
3247 <span class="x">                &lt;div class=&quot;formSubmit&quot;&gt;</span>
3248 <span class="x">                    &lt;input type=&quot;submit&quot; value=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.submit</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; accesskey=&quot;s&quot;&gt;</span>
3249 <span class="x">                &lt;/div&gt;</span>
3250 <span class="x">            &lt;/div&gt;</span>
3251 <span class="x">        &lt;/form&gt;</span>
3252 <span class="x">    &lt;/section&gt;</span>
3253 <span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
3254
3255 <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>
3256
3257 <span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
3258 <span class="x">    &lt;div class=&quot;paginationTop&quot;&gt;</span>
3259 <span class="x">        </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}</span><span class="x"></span>
3260 <span class="x">            </span><span class="cp">{</span><span class="nf">pages</span> <span class="na">print</span><span class="o">=</span><span class="kc">true</span> <span class="na">assign</span><span class="o">=</span><span class="na">pagesLinks</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;PersonList&#39;</span> <span class="na">link</span><span class="o">=</span><span class="s2">&quot;pageNo=%d&amp;sortField=$sortField&amp;sortOrder=$sortOrder&quot;</span><span class="cp">}</span><span class="x"></span>
3261 <span class="x">        </span><span class="cp">{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
3262 <span class="x">    &lt;/div&gt;</span>
3263 <span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
3264
3265 <span class="cp">{</span><span class="nf">if</span> <span class="nv">$items</span><span class="cp">}</span><span class="x"></span>
3266 <span class="x">    &lt;div class=&quot;section sectionContainerList&quot;&gt;</span>
3267 <span class="x">        &lt;ol class=&quot;containerList personList&quot;&gt;</span>
3268 <span class="x">            </span><span class="cp">{</span><span class="nf">foreach</span> <span class="na">from</span><span class="o">=</span><span class="nv">$objects</span> <span class="na">item</span><span class="o">=</span><span class="na">person</span><span class="cp">}</span><span class="x"></span>
3269 <span class="x">                &lt;li&gt;</span>
3270 <span class="x">                    &lt;div class=&quot;box48&quot;&gt;</span>
3271 <span class="x">                        &lt;span class=&quot;icon icon48 fa-user&quot;&gt;&lt;/span&gt;</span>
3272
3273 <span class="x">                        &lt;div class=&quot;details personInformation&quot;&gt;</span>
3274 <span class="x">                            &lt;div class=&quot;containerHeadline&quot;&gt;</span>
3275 <span class="x">                                &lt;h3&gt;</span><span class="cp">{</span><span class="nv">$person</span><span class="cp">}</span><span class="x">&lt;/h3&gt;</span>
3276 <span class="x">                            &lt;/div&gt;</span>
3277
3278 <span class="x">                            </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
3279 <span class="x">                                &lt;ul class=&quot;inlineList commaSeparated&quot;&gt;</span>
3280 <span class="x">                                    </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;personData&#39;</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
3281 <span class="x">                                &lt;/ul&gt;</span>
3282 <span class="x">                            </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
3283
3284 <span class="x">                            </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
3285 <span class="x">                                &lt;dl class=&quot;plain inlineDataList small&quot;&gt;</span>
3286 <span class="x">                                    </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;personStatistics&#39;</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
3287 <span class="x">                                &lt;/dl&gt;</span>
3288 <span class="x">                            </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
3289 <span class="x">                        &lt;/div&gt;</span>
3290 <span class="x">                    &lt;/div&gt;</span>
3291 <span class="x">                &lt;/li&gt;</span>
3292 <span class="x">            </span><span class="cp">{</span><span class="nf">/foreach</span><span class="cp">}</span><span class="x"></span>
3293 <span class="x">        &lt;/ol&gt;</span>
3294 <span class="x">    &lt;/div&gt;</span>
3295 <span class="cp">{</span><span class="nf">else</span><span class="cp">}</span><span class="x"></span>
3296 <span class="x">    &lt;p class=&quot;info&quot;&gt;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.noItems</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&lt;/p&gt;</span>
3297 <span class="cp">{</span><span class="nf">/if</span><span class="cp">}</span><span class="x"></span>
3298
3299 <span class="x">&lt;footer class=&quot;contentFooter&quot;&gt;</span>
3300 <span class="x">    </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
3301 <span class="x">        &lt;div class=&quot;paginationBottom&quot;&gt;</span>
3302 <span class="x">            </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="o">@</span><span class="nv">$pagesLinks</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
3303 <span class="x">        &lt;/div&gt;</span>
3304 <span class="x">    </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
3305
3306 <span class="x">    </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
3307 <span class="x">        &lt;nav class=&quot;contentFooterNavigation&quot;&gt;</span>
3308 <span class="x">            &lt;ul&gt;</span>
3309 <span class="x">                </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentFooterNavigation&#39;</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
3310 <span class="x">            &lt;/ul&gt;</span>
3311 <span class="x">        &lt;/nav&gt;</span>
3312 <span class="x">    </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>
3313 <span class="x">&lt;/footer&gt;</span>
3314
3315 <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>
3316 </code></pre></div>
3317 <p>If you compare this template to the one used in the ACP, you will recognize similar elements like the <code>.paginationTop</code> element, the <code>p.info</code> element if no people exist, and the <code>.contentFooter</code> element.
3318 Furthermore, we include a template called <code>header</code> before actually showing any of the page contents and terminate the template by including the <code>footer</code> template.</p>
3319 <p>Now, let us take a closer look at the differences:</p>
3320 <ul>
3321 <li>We do not explicitly create a <code>.contentHeader</code> element but simply assign the title to the <code>contentTitle</code> variable.
3322   The value of the assignment is simply the title of the page and a badge showing the number of listed people.
3323   The <code>header</code> template that we include later will handle correctly displaying the content header on its own based on the <code>$contentTitle</code> variable.</li>
3324 <li>Next, we create additional element for the HTML document’s <code>&lt;head&gt;</code> element.
3325   In this case, we define the <a href="https://en.wikipedia.org/wiki/Canonical_link_element">canonical link of the page</a> and, because we are showing paginated content, add links to the previous and next page (if they exist).</li>
3326 <li>We want the page to be sortable but as we will not be using a table for listing the people like in the ACP, we are not able to place links to sort the people into the table head.
3327   Instead, usually a box is created in the sidebar on the right-hand side that contains <code>select</code> elements to determine sort field and sort order.</li>
3328 <li>The main part of the page is the listing of the people.
3329   We use a structure similar to the one used for displaying registered users.
3330   Here, for each person, we simply display a FontAwesome icon representing a person and show the person’s full name relying on <code>Person::__toString()</code>.
3331   Additionally, like in the user list, we provide the initially empty <code>ul.inlineList.commaSeparated</code> and <code>dl.plain.inlineDataList.small</code> elements that can be filled by plugins using the templates events. </li>
3332 </ul>
3333 <h2 id="usergroupoptionxml"><code>userGroupOption.xml</code><a class="headerlink" href="#usergroupoptionxml" title="Permanent link">#</a></h2>
3334 <p>We have already used the <code>admin.content.canManagePeople</code> permissions several times, now we need to install it using the <a href="../../../package/pip/user-group-option/">userGroupOption package installation plugin</a>:</p>
3335 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
3336 <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/tornado/userGroupOption.xsd&quot;</span><span class="nt">&gt;</span>
3337     <span class="nt">&lt;import&gt;</span>
3338         <span class="nt">&lt;options&gt;</span>
3339             <span class="nt">&lt;option</span> <span class="na">name=</span><span class="s">&quot;admin.content.canManagePeople&quot;</span><span class="nt">&gt;</span>
3340                 <span class="nt">&lt;categoryname&gt;</span>admin.content<span class="nt">&lt;/categoryname&gt;</span>
3341                 <span class="nt">&lt;optiontype&gt;</span>boolean<span class="nt">&lt;/optiontype&gt;</span>
3342                 <span class="nt">&lt;defaultvalue&gt;</span>0<span class="nt">&lt;/defaultvalue&gt;</span>
3343                 <span class="nt">&lt;admindefaultvalue&gt;</span>1<span class="nt">&lt;/admindefaultvalue&gt;</span>
3344                 <span class="nt">&lt;usersonly&gt;</span>1<span class="nt">&lt;/usersonly&gt;</span>
3345             <span class="nt">&lt;/option&gt;</span>
3346         <span class="nt">&lt;/options&gt;</span>
3347     <span class="nt">&lt;/import&gt;</span>
3348 <span class="nt">&lt;/data&gt;</span>
3349 </code></pre></div>
3350 <p>We use the existing <code>admin.content</code> user group option category for the permission as the people are “content” (similar the the ACP menu item).
3351 As the permission is for administrators only, we set <code>defaultvalue</code> to <code>0</code> and <code>admindefaultvalue</code> to <code>1</code>.
3352 This permission is only relevant for registered users so that it should not be visible when editing the guest user group.
3353 This is achieved by setting <code>usersonly</code> to <code>1</code>.</p>
3354 <h2 id="packagexml"><code>package.xml</code><a class="headerlink" href="#packagexml" title="Permanent link">#</a></h2>
3355 <p>Lastly, we need to create the <code>package.xml</code> file.
3356 For more information about this kind of file, please refer to <a href="../../../package/package-xml/">the <code>package.xml</code> page</a>.</p>
3357 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
3358 <span class="nt">&lt;package</span> <span class="na">name=</span><span class="s">&quot;com.woltlab.wcf.people&quot;</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/tornado/package.xsd&quot;</span><span class="nt">&gt;</span>
3359     <span class="nt">&lt;packageinformation&gt;</span>
3360         <span class="nt">&lt;packagename&gt;</span>WoltLab Suite Core Tutorial: People<span class="nt">&lt;/packagename&gt;</span>
3361         <span class="nt">&lt;packagedescription&gt;</span>Adds a simple management system for people as part of a tutorial to create packages.<span class="nt">&lt;/packagedescription&gt;</span>
3362         <span class="nt">&lt;version&gt;</span>3.1.0<span class="nt">&lt;/version&gt;</span>
3363         <span class="nt">&lt;date&gt;</span>2018-03-30<span class="nt">&lt;/date&gt;</span>
3364     <span class="nt">&lt;/packageinformation&gt;</span>
3365
3366     <span class="nt">&lt;authorinformation&gt;</span>
3367         <span class="nt">&lt;author&gt;</span>WoltLab GmbH<span class="nt">&lt;/author&gt;</span>
3368         <span class="nt">&lt;authorurl&gt;</span>http://www.woltlab.com<span class="nt">&lt;/authorurl&gt;</span>
3369     <span class="nt">&lt;/authorinformation&gt;</span>
3370
3371     <span class="nt">&lt;requiredpackages&gt;</span>
3372         <span class="nt">&lt;requiredpackage</span> <span class="na">minversion=</span><span class="s">&quot;3.1.0&quot;</span><span class="nt">&gt;</span>com.woltlab.wcf<span class="nt">&lt;/requiredpackage&gt;</span>
3373     <span class="nt">&lt;/requiredpackages&gt;</span>
3374
3375     <span class="nt">&lt;excludedpackages&gt;</span>
3376         <span class="nt">&lt;excludedpackage</span> <span class="na">version=</span><span class="s">&quot;3.2.0 Alpha 1&quot;</span><span class="nt">&gt;</span>com.woltlab.wcf<span class="nt">&lt;/excludedpackage&gt;</span>
3377     <span class="nt">&lt;/excludedpackages&gt;</span>
3378
3379     <span class="nt">&lt;compatibility&gt;</span>
3380         <span class="nt">&lt;api</span> <span class="na">version=</span><span class="s">&quot;2018&quot;</span> <span class="nt">/&gt;</span>
3381     <span class="nt">&lt;/compatibility&gt;</span>
3382
3383     <span class="nt">&lt;instructions</span> <span class="na">type=</span><span class="s">&quot;install&quot;</span><span class="nt">&gt;</span>
3384         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;acpTemplate&quot;</span> <span class="nt">/&gt;</span>
3385         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="nt">/&gt;</span>
3386         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;sql&quot;</span> <span class="nt">/&gt;</span>
3387         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;template&quot;</span> <span class="nt">/&gt;</span>
3388         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;language&quot;</span> <span class="nt">/&gt;</span>
3389
3390         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;acpMenu&quot;</span> <span class="nt">/&gt;</span>
3391         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;page&quot;</span> <span class="nt">/&gt;</span>
3392         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;menuItem&quot;</span> <span class="nt">/&gt;</span>
3393         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;userGroupOption&quot;</span> <span class="nt">/&gt;</span>
3394     <span class="nt">&lt;/instructions&gt;</span>
3395 <span class="nt">&lt;/package&gt;</span>
3396 </code></pre></div>
3397 <p>As this is a package for WoltLab Suite Core 3, we need to require it using <code>&lt;requiredpackage&gt;</code>.
3398 We require the latest version (when writing this tutorial) <code>3.0.0 RC 4</code>.
3399 Additionally, we disallow installation of the package in the next major version <code>3.1</code> by excluding the <code>3.1.0 Alpha 1</code> version.
3400 This ensures that if changes from WoltLab Suite Core 3.0 to 3.1 require changing some parts of the package, it will not break the instance in which the package is installed.</p>
3401 <p>The most important part are to installation instructions.
3402 First, we install the ACP templates, files and templates, create the database table and import the language item.
3403 Afterwards, the ACP menu items and the permission are added.
3404 Now comes the part of the instructions where the order of the instructions is crucial:
3405 In <code>menuItem.xml</code>, we refer to the <code>com.woltlab.wcf.people.PersonList</code> page that is delivered by <code>page.xml</code>.
3406 As the menu item package installation plugin validates the given page and throws an exception if the page does not exist, we need to install the page before the menu item! </p>
3407 <hr />
3408 <p>This concludes the first part of our tutorial series after which you now have a working simple package with which you can manage people in the ACP and show the visitors of your website a simple list of all created people in the front end.</p>
3409 <p>The complete source code of this part can be found on <a href="https://github.com/WoltLab/docs.woltlab.com/tree/5.4/snippets/tutorial/tutorial-series/part-1">GitHub</a>.</p>
3410
3411
3412
3413
3414 <hr>
3415 <div class="md-source-date">
3416   <small>
3417
3418       Last update: 2021-04-07
3419
3420   </small>
3421 </div>
3422
3423
3424
3425
3426
3427
3428
3429
3430             </article>
3431           </div>
3432         </div>
3433
3434       </main>
3435
3436
3437 <footer class="md-footer">
3438
3439     <nav class="md-footer__inner md-grid" aria-label="Footer">
3440
3441         <a href="../overview/" class="md-footer__link md-footer__link--prev" rel="prev">
3442           <div class="md-footer__button md-icon">
3443             <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>
3444           </div>
3445           <div class="md-footer__title">
3446             <div class="md-ellipsis">
3447               <span class="md-footer__direction">
3448                 Previous
3449               </span>
3450               Overview
3451             </div>
3452           </div>
3453         </a>
3454
3455
3456         <a href="../part_2/" class="md-footer__link md-footer__link--next" rel="next">
3457           <div class="md-footer__title">
3458             <div class="md-ellipsis">
3459               <span class="md-footer__direction">
3460                 Next
3461               </span>
3462               Part 2
3463             </div>
3464           </div>
3465           <div class="md-footer__button md-icon">
3466             <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>
3467           </div>
3468         </a>
3469
3470     </nav>
3471
3472   <div class="md-footer-meta md-typeset">
3473     <div class="md-footer-meta__inner md-grid">
3474       <div class="md-footer-copyright">
3475
3476           <div class="md-footer-copyright__highlight">
3477             Copyright © 2020 WoltLab GmbH
3478           </div>
3479
3480         Made with
3481         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
3482           Material for MkDocs
3483         </a>
3484
3485       </div>
3486       <div class="md-footer-copyright">
3487         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
3488         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
3489 </div>
3490     </div>
3491   </div>
3492 </footer>
3493
3494     </div>
3495     <div class="md-dialog" data-md-component="dialog">
3496       <div class="md-dialog__inner md-typeset"></div>
3497     </div>
3498     <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>
3499
3500
3501       <script src="../../../assets/javascripts/bundle.d892486b.min.js"></script>
3502
3503
3504   </body>
3505 </html>