Erstellen Sie Ihre erste Bewerbung!
***********************************

.[perex]
Lernen Sie das Nette Framework kennen, indem Sie einen einfachen Blog mit Kommentaren erstellen. Los geht's!

Nach den ersten beiden Kapiteln haben Sie Ihren eigenen funktionierenden Blog und können Ihre tollen Beiträge veröffentlichen, auch wenn der Funktionsumfang nach Abschluss dieser beiden Kapitel ziemlich eingeschränkt ist. Um die Dinge für Ihre Nutzer schöner zu machen, sollten Sie auch die folgenden Kapitel lesen und Ihre Anwendung weiter verbessern.

.[tip]
Dieses Tutorial setzt voraus, dass Sie das Dokument [Installation |nette:installation] abgeschlossen und Ihr Tooling erfolgreich eingerichtet haben. Außerdem wird vorausgesetzt, dass Sie mit der [objektorientierten Programmierung in PHP |nette:introduction-to-object-oriented-programming] vertraut sind.

Bitte verwenden Sie PHP 8.1 oder höher. Sie finden die vollständige Anwendung [auf GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


Die Willkommensseite .[#toc-the-welcome-page]
=============================================

Beginnen wir mit der Erstellung eines neuen Projekts im Verzeichnis `nette-blog`:

```shell
composer create-project nette/web-project nette-blog
```

Zu diesem Zeitpunkt sollte die Willkommensseite des Webprojekts laufen. Probieren Sie es aus, indem Sie Ihren Browser öffnen und die folgende URL aufrufen:

```
http://localhost/nette-blog/www/
```

und Sie sollten die Nette Framework Willkommensseite sehen:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

Die Anwendung funktioniert und Sie können nun Änderungen vornehmen.

.[note]
Wenn Sie ein Problem haben, [versuchen Sie die folgenden Tipps |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


Inhalt des Webprojekts .[#toc-web-project-s-content]
====================================================

Web Project hat die folgende Struktur:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← Anwendungsverzeichnis
│   ├── <b>Core/</b>         ← grundlegende notwendige Klassen
│   ├── <b>UI/</b>           ← Presenter, Vorlagen & Co.
│   │   └── <b>Home/</b>     ← Home Presenter Verzeichnis
│   └── <b>Bootstrap.php</b> ← bootende Klasse Bootstrap
├── <b>bin/</b>              ← Skripte für die Kommandozeile
├── <b>config/</b>           ← Konfigurationsdateien
├── <b>log/</b>              ← Fehlerprotokolle
├── <b>temp/</b>             ← temporäre Dateien, Cache, …
├── <b>vendor/</b>           ← vom Composer installierte Bibliotheken
│   └── <b>autoload.php</b>  ← Automatisches Laden der vom Composer installierten Bibliotheken
└── <b>www/</b>              ← öffentlicher Ordner - der einzige Ort, der vom Browser aus zugänglich ist
    └── <b>index.php</b>     ← Anfangsdatei, die die Anwendung startet
\--

Das Verzeichnis `www` ist für Bilder, JavaScript, CSS und andere öffentlich verfügbare Dateien vorgesehen. Dies ist das einzige Verzeichnis, auf das der Browser direkt zugreift. Sie können also das Stammverzeichnis Ihres Webservers hierher verweisen (Sie können es im Apache konfigurieren, aber das machen wir später, da es im Moment nicht wichtig ist).

Das wichtigste Verzeichnis für Sie ist `app/`. Dort finden Sie die Datei `Bootstrap.php`, in der sich eine Klasse befindet, die das Framework lädt und die Anwendung konfiguriert. Sie aktiviert das [Autoloading |robot-loader:] und richtet den [Debugger |tracy:] und die [Routen |application:routing] ein.


Aufräumen .[#toc-cleanup]
=========================

Das Webprojekt enthält eine Willkommensseite, die wir entfernen können - löschen Sie die Datei `app/UI/Home/default.latte` und ersetzen Sie sie durch den Text "Hello world!".


[* qs-hello.webp .{url:-} *]


Tracy (Debugger) .[#toc-tracy-debugger]
=======================================

Ein äußerst wichtiges Werkzeug für die Entwicklung ist [ein Debugger namens Tracy |tracy:]. Versuchen Sie, einige Fehler in Ihrer `app/UI/Home/HomePresenter.php` Datei zu machen (z.B. entfernen Sie eine geschweifte Klammer aus der Definition der Klasse HomePresenter) und sehen Sie, was passiert. Es wird eine rote Bildschirmseite mit einer verständlichen Fehlerbeschreibung erscheinen.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy wird Ihnen bei der Fehlersuche sehr helfen. Beachten Sie auch die schwebende Tracy-Leiste in der unteren rechten Ecke, die Sie über wichtige Laufzeitdaten informiert.

[* qs-tracybar.webp .{url:-} *]

Im Produktionsmodus ist Tracy natürlich deaktiviert und gibt keine sensiblen Informationen preis. Alle Fehler werden stattdessen im Verzeichnis `log/` gespeichert. Probieren Sie es einfach aus. Suchen Sie in `app/Bootstrap.php` das folgende Codestück, heben Sie die Kommentare in der Zeile auf und ändern Sie den Parameter für den Methodenaufruf in `false`, so dass es wie folgt aussieht:

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

Nach dem Aktualisieren der Webseite wird die Seite mit dem roten Bildschirm durch die benutzerfreundliche Meldung ersetzt:

[* qs-fatal.webp .{url:-}(error screen) *]

Schauen Sie nun in das Verzeichnis `log/`. Dort finden Sie das Fehlerprotokoll (in der Datei exception.log) und auch die Seite mit der Fehlermeldung (gespeichert in einer HTML-Datei mit einem Namen, der mit `exception` beginnt).

Kommentieren Sie die Zeile `// $configurator->setDebugMode(false);` erneut aus. Tracy aktiviert automatisch den Entwicklungsmodus in der Umgebung `localhost` und deaktiviert ihn an anderer Stelle.

Jetzt können wir den Fehler beheben und mit der Entwicklung unserer Anwendung fortfahren.


Dank senden .[#toc-send-thanks]
===============================

Wir werden Ihnen einen Trick zeigen, der Open-Source-Autoren glücklich machen wird. Sie können den Bibliotheken, die Ihr Projekt verwendet, auf GitHub ganz einfach einen Stern geben. Führen Sie einfach aus:

```shell
composer thanks
```

Probieren Sie es aus!

{{priority: -1}}
{{sitename: Nette Quickstart}}