Auftrag 1: Entwicklungsumgebung einrichten

Einzelarbeit, Zeit: 20 Minuten

Einleitung

Ziel dieser Aufgabe ist es, die nötigen Tools für die weiteren Arbeiten bereitzuhaben und zu verstehen. Dies umfasst:

  • XAMPP (Webserver mit allen nötigen Tools, um Websites auszuliefern und PHP auszuführen)
  • Visual Studio Code (Code Editor)
  • Google Chrome (Browser mit starken Devtools – also Werkzeugen um Websites zu debuggen)

Arbeitsschritte

  ACHTUNG, bitte folgende Schritte bei der Installation beachten:

VS Code: Alle Haken der Installation aktivieren!
XAMPP: Nach Abschluss der Installation und beim ersten Starten der Dienste erscheinen Windows Sicherheitshinweise. Auch hier alle Haken aktivieren und mit Klick auf „Zugriff erlauben“ bestätigen.

  1. Richten Sie sich Ihre Entwicklungsumgebung ein, indem Sie die nötige Software (gemäss obenstehender Liste) auf Ihrem Geräte installieren.
  2. Starten Sie Ihren XAMPP-Server über das Control Panel (Apache) und überprüfen Sie, ob ihr Webserver über die localhost-Adresse erreichbar ist. Falls es Probleme beim Starten des Webservers (=Apache) gibt, so wird sehr wahrscheinlich der Port 80 bereits von einer anderen Software auf Ihrem Rechner genutzt.
  3. Finden Sie heraus, wo sich das Webroot („htdocs“) Ihres Webservers befindet und erstellen Sie eine Testdatei in einem eigenen Unterordner
  4. Rufen Sie die soeben erstellte Testdatei im Browser auf: z.B. http://localhost/ihrunterordner/ihredatei.html
  5. Prüfen Sie, ob die Ausführung von PHP auf dem Webserver funktioniert: Erstellen Sie dazu eine Datei test.php mit dem folgenden Inhalt: <?php echo 3 + 7; ?>
  6. Rufen Sie die soeben erstelle Datei auf unter http://localhost/ihrunterordner/test.php. Die Ausführung von PHP funktioniert, wenn das Ergebnis der Rechnung angezeigt wird (also einfach die Zahl 10).
  7. Richten Sie sich daraufhin die wichtigsten Nachschlagewerke als Lesezeichen ein (https://www.w3schools.com/ und https://developer.mozilla.org/de/) und machen Sie sich mit den Nachschlagewerke etwas vertraut.
  8. Öffnen Sie nun die Devtools („Entwicklerkonsole“) von Chrome indem Sie zuerst eine beliebige Website aufrufen und dann die Taste F12 drücken auf Windows resp. Alt+CMD+i auf OSX. Erkunden Sie die Möglichkeiten in den Devtools und machen Sie sich wieder etwas damit vertraug. Wo können Sie die HTML Struktur anschauen und bestimmte Elemente markieren? Wo sehen Sie die angewendeten CSS Regeln?