Erstellen Sie Ihre erste Anwendung!

Lernen Sie das Nette Framework kennen, indem Sie einen einfachen Blog mit Kommentaren erstellen. Fangen wir an!

Nach den ersten beiden Kapiteln haben Sie Ihren eigenen funktionierenden Blog und können Ihre großartigen Beiträge veröffentlichen, auch wenn die Funktionen nach diesen beiden Kapiteln noch recht begrenzt sind. Sie sollten auch die folgenden Kapitel lesen, in denen wir das Hinzufügen von Kommentaren, das Bearbeiten von Beiträgen und schließlich das Absichern des Blogs umsetzen.

Dieses Tutorial setzt voraus, dass Sie das Dokument Installation durchgearbeitet und Ihre Werkzeuge erfolgreich eingerichtet haben. Es setzt außerdem voraus, dass Sie die objektorientierte Programmierung in PHP verstehen.

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

Die Willkommensseite

Beginnen wir damit, ein neues Projekt im Verzeichnis nette-blog zu erstellen:

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

Zu diesem Zeitpunkt sollte die Willkommensseite des Web Project laufen. Probieren Sie es aus, indem Sie Ihren Browser öffnen und zu folgender URL navigieren:

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

und Sie sollten die Willkommensseite des Nette Frameworks sehen:

Die Anwendung funktioniert, und Sie können nun beginnen, Änderungen daran vorzunehmen.

Wenn Sie ein Problem haben, versuchen Sie diese paar Tipps.

Inhalt des Web Project

Das Web Project hat die folgende Struktur:

nette-blog/
├── app/              ← Verzeichnis der Anwendung
│   ├── Core/         ← grundlegende notwendige Klassen
│   ├── Presentation/ ← Presenter, Templates und Co.
│   │   └── Home/     ← Verzeichnis des Home-Presenters
│   └── Bootstrap.php ← Startklasse Bootstrap
├── assets/           ← rohe Assets (SCSS, TypeScript, Quellbilder)
├── bin/              ← Skripte für die Kommandozeile
├── config/           ← Konfigurationsdateien
├── log/              ← Fehlerlogs
├── temp/             ← temporäre Dateien, Cache, …
├── vendor/           ← von Composer installierte Bibliotheken
│   └── autoload.php  ← Autoloading aller installierten Pakete
└── www/              ← öffentlicher Ordner - der einzige, der vom Browser aus zugänglich ist
    ├── assets/       ← kompilierte statische Dateien (CSS, JS, Bilder, …)
    └── index.php     ← Startdatei, die die Anwendung startet

Das Verzeichnis www/ ist zum Speichern von Bildern, JavaScript-Dateien, CSS-Styles und anderen öffentlich zugänglichen Dateien gedacht. Es ist das einzige Verzeichnis, das direkt aus dem Internet zugänglich ist, richten Sie den Document-Root Ihres Webservers also so ein, dass er hierher zeigt (das können Sie in Apache oder Nginx einstellen, aber machen wir das später, denn im Moment ist es nicht entscheidend).

Das wichtigste Verzeichnis für Sie ist app/. Hier finden Sie die Datei Bootstrap.php, die eine Klasse enthält, die das Framework lädt und die Anwendung konfiguriert. Sie aktiviert das Autoloading, richtet den Debugger ein und konfiguriert die Routen.

Aufräumen

Das Web Project enthält eine Willkommensseite, die wir entfernen, bevor wir mit dem Programmieren beginnen. Ersetzen Sie den Inhalt der Datei app/Presentation/Home/default.latte ruhig durch “Hello world!”.

Tracy (Debugger)

Ein außerordentlich wichtiges Werkzeug für die Entwicklung ist das Debugging-Werkzeug Tracy. Versuchen Sie, in Ihrer Datei app/Presentation/Home/HomePresenter.php einen Fehler einzubauen (entfernen Sie zum Beispiel eine geschweifte Klammer aus der Definition der Klasse HomePresenter) und sehen Sie, was passiert. Es erscheint eine Seite mit einem roten Bildschirm und einer verständlichen Fehlerbeschreibung.

Tracy hilft Ihnen beim Beheben von Fehlern erheblich. Beachten Sie außerdem die schwebende Tracy Bar in der rechten unteren Ecke des Bildschirms, die wichtige Informationen zur Laufzeit anzeigt.

Im Produktionsmodus ist Tracy natürlich abgeschaltet und zeigt keinerlei sensible Informationen an. Alle Fehler werden stattdessen im Verzeichnis log/ gespeichert. Probieren wir das aus. Suchen Sie in der Datei app/Bootstrap.php den folgenden Codeabschnitt, kommentieren Sie die Zeile ein und ändern Sie den Parameter des Methodenaufrufs auf false, sodass es so aussieht:

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

Nach dem Aktualisieren der Webseite sehen Sie den roten Bildschirm nicht mehr. Stattdessen wird eine benutzerfreundliche Meldung angezeigt:

Sehen Sie nun in das Verzeichnis log/. Hier (in der Datei exception.log) finden Sie den protokollierten Fehler und außerdem die bekannte Fehlerseite (als HTML-Datei gespeichert, deren Name mit exception- beginnt).

Kommentieren Sie die Zeile // $this->configurator->setDebugMode(false); wieder aus. Tracy aktiviert den Entwicklungsmodus in einer localhost-Umgebung automatisch und schaltet ihn anderswo ab.

Nun können wir den eingebauten Fehler beheben und mit dem Aufbau unserer Anwendung weitermachen.

Senden Sie ein Dankeschön

Wir zeigen Ihnen einen Trick, der Open-Source-Autoren erfreut. Sie können den Bibliotheken, die Ihr Projekt verwendet, auf einfache Weise einen Stern auf GitHub geben. Führen Sie einfach aus:

composer thanks

Probieren Sie es aus!