Twig-Konzept#

Um repetitive UI-Elemente zu Komponenten umzuwandeln wird eine Template Engine verwendet. Dafür eignet sich Twig sehr gut, da der Syntax sehr einfach ist. Wie die Views aufgebaut sind wurde bereits im MVC-Konzept beschrieben. Für das Stylen des Frontends wird TailwindCSS verwendet. Im folgendem Diagramm geht es um den Aufbau der Komponenten:

UI Konzept

Ordnerstruktur#

Die Ordnerstruktur ist wie folgt:

app
├── Controller
├── Repository
├── Models
├── Core
├── Helpers
├── Views
│   ├── Base
│   │   ├── Main
│   │   ├── CoreJS
│   │   └── NavBar
│   ├── Layout
│   │   ├── BaseLayout
│   │   ├── SplitImageLayout
│   │   └── ContentLayout
│   ├── Components
│   │   ├── Button
│   │   ├── ButtonGroup
│   │   ├── Templates
│   │   │   └── ProjectView
│   │   ├── Form
│   │   ├── ProgressBar
│   │   ├── Upload
│   │   ├── Inputs
│   │   │   ├── Checkbox
│   │   │   ├── DatePicker
│   │   │   ├── Dropdown
│   │   │   ├── Password
│   │   │   ├── URL
│   │   │   └── Email
│   │   ├── Error
│   │   └── Input
│   ├── Helpers
│   │   └── AdminOnly
│   └── Pages
│       ├── Welcome
│       ├── NotFound
│       ├── Forbidden
│       ├── Kibana
│       ├── Login
│       ├── Register
│       ├── Profile
│       ├── Overview
│       ├── ProjectGeneral
│       ├── ProjectAppearance
│       ├── ProjectStructure
│       └── ProjectConfirm
└── Utils