Wir schreiben die erste Anwendung!

Lernen wir gemeinsam das Nette Framework kennen, indem wir einen einfachen Blog mit Kommentaren erstellen. Los geht's!

Bereits nach den ersten beiden Kapiteln werden wir unseren eigenen funktionierenden Blog haben und unsere großartigen Beiträge veröffentlichen können, auch wenn die Funktionen vorerst noch stark eingeschränkt sind. Sie sollten auch die folgenden Kapitel lesen, in denen wir das Hinzufügen von Kommentaren, das Bearbeiten von Artikeln und schließlich die Absicherung des Blogs programmieren werden.

Diese Anleitung setzt voraus, dass Sie die Seite Installation gelesen und die erforderlichen Werkzeuge erfolgreich vorbereitet haben. Sie setzt auch voraus, dass Sie objektorientierte Programmierung in PHP verstehen.

Bitte verwenden Sie PHP 8.1 oder neuer. Die vollständige Anwendung finden Sie auf GitHub.

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 Startseite des Webprojekts bereits funktionieren. Probieren wir es aus, indem wir den Browser unter folgender URL öffnen:

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

und wir sehen die Startseite des Nette Frameworks:

Die Anwendung funktioniert und Sie können mit den Änderungen beginnen.

Wenn ein Problem aufgetreten ist, versuchen Sie diese Tipps.

Inhalt des Webprojekts

Das Webprojekt hat folgende Struktur:

nette-blog/
├── app/              ← Verzeichnis mit der Anwendung
│   ├── Core/         ← grundlegende Klassen, die für den Betrieb notwendig sind
│   ├── Presentation/ ← Presenter, Templates & Co.
│   │   └── Home/     ← Verzeichnis des Home-Presenters
│   └── Bootstrap.php ← Bootstrap-Klasse zum Starten
├── bin/              ← Skripte, die von der Kommandozeile ausgeführt werden
├── config/           ← Konfigurationsdateien
├── log/              ← Fehlerprotokollierung
├── temp/             ← temporäre Dateien, Cache, …
├── vendor/           ← Bibliotheken, die von Composer installiert wurden
│   └── autoload.php  ← Autoloading aller installierten Pakete
└── www/              ← öffentliches Verzeichnis - das einzige, das vom Browser zugänglich ist
    └── index.php     ← Startdatei, mit der die Anwendung gestartet wird

Das Verzeichnis www/ ist zum Speichern von Bildern, JavaScript-Dateien, CSS-Stilen und anderen öffentlich zugänglichen Dateien vorgesehen. Nur dieses Verzeichnis ist aus dem Internet zugänglich, also stellen Sie das Stammverzeichnis Ihrer Anwendung so ein, dass es genau hierhin zeigt (dies können Sie in der Konfiguration von Apache oder Nginx tun, aber lassen Sie uns das später machen, jetzt ist es nicht wichtig).

Der wichtigste Ordner für uns ist app/. Hier finden wir die Datei Bootstrap.php, in der sich die Klasse befindet, die zum Laden des gesamten Frameworks und zur Konfiguration der Anwendung dient. Hier wird das Autoloading aktiviert, der Debugger und die Routen werden hier eingestellt.

Aufräumen

Das Webprojekt enthält eine Startseite, die wir löschen, bevor wir mit dem Programmieren beginnen. Ersetzen Sie also bedenkenlos den Inhalt der Datei app/Presentation/Home/default.latte durch “Hello world!”.

Tracy (Debugger)

Ein extrem wichtiges Werkzeug für die Entwicklung ist das Debugging-Tool Tracy. Versuchen Sie, einen Fehler in der Datei app/Presentation/Home/HomePresenter.php zu provozieren (z. B. durch Entfernen einer geschweiften Klammer in der Definition der Klasse HomePresenter) und sehen Sie, was passiert. Es erscheint eine Benachrichtigungsseite, die den Fehler verständlich beschreibt.

Tracy wird uns enorm helfen, wenn wir Fehler in der Anwendung suchen. Beachten Sie auch die schwebende Tracy Bar in der unteren rechten Ecke des Bildschirms, die Informationen zum Lauf der Anwendung enthält.

Im Produktionsmodus ist Tracy natürlich deaktiviert und zeigt keine sensiblen Informationen an. Alle Fehler werden in diesem Fall im Ordner log/ gespeichert. Probieren wir es aus. In der Datei app/Bootstrap.php kommentieren wir die folgende Zeile aus und ändern den Parameter des Aufrufs auf false, sodass der Code wie folgt aussieht:

...
$this->configurator->setDebugMode(false);
...

Nach dem Neuladen der Seite sehen wir Tracy nicht mehr. Stattdessen wird eine benutzerfreundliche Meldung angezeigt:

Schauen wir nun in das Verzeichnis log/. Hier (in der Datei exception.log) finden wir den protokollierten Fehler und auch die bereits bekannte Seite mit der Fehlermeldung (gespeichert als HTML-Datei mit einem Namen, der mit exception- beginnt).

Kommentieren wir die Zeile // $configurator->setDebugMode(false); wieder ein. Tracy aktiviert den Entwicklermodus automatisch auf localhost und deaktiviert ihn überall sonst.

Den Fehler, den wir erstellt haben, können wir beheben und mit dem Schreiben der Anwendung fortfahren.

Senden Sie ein Dankeschön

Wir zeigen Ihnen einen Trick, mit dem Sie Open-Source-Autoren eine Freude machen können. Geben Sie den Bibliotheken, die Ihr Projekt verwendet, einfach einen Stern auf GitHub. Führen Sie einfach Folgendes aus:

composer thanks

Probieren Sie es aus!