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