Erstellen Sie Ihre erste Bewerbung!

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.

Dieses Tutorial setzt voraus, dass Sie das Dokument Installation abgeschlossen und Ihr Tooling erfolgreich eingerichtet haben. Außerdem wird vorausgesetzt, dass Sie mit der objektorientierten Programmierung in PHP vertraut sind.

Bitte verwenden Sie PHP 8.1 oder höher. Sie finden die vollständige Anwendung auf GitHub.

Die Willkommensseite

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

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:

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

Wenn Sie ein Problem haben, versuchen Sie die folgenden Tipps.

Inhalt des Webprojekts

Web Project hat die folgende Struktur:

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

Aufräumen

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!”.

Tracy (Debugger)

Ein äußerst wichtiges Werkzeug für die Entwicklung ist ein Debugger namens 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.

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.

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:

...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...

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

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

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:

composer thanks

Probieren Sie es aus!