basecom GmbH & Co. KG Crashkurs: Webentwicklung Stand:!! Juli 2012 Copyright:!! basecom GmbH & Co. KG Autor:!! Simon Schröer

Transkript

1 Crashkurs: Webentwicklung Stand:!! Juli 2012 Copyright:!! basecom GmbH & Co. KG Autor:!! Simon Schröer

2 Inhaltsverzeichnis Vorwort! 4 Grundlagen! 5 HTML / CSS! 5 Aufgaben! 5 PHP! 6 Aufgaben: Arrays und Schleifen! 6 Aufgaben: Funktionen! 6 Aufgaben: Header & Cookies! 7 Aufgaben: Sessions! 7 JavaScript! 8 Aufgaben: Taschenrechner! 8 Aufgaben: AJAX! 8 Übungsprojekt 1: Mitarbeiterverwaltung! 9 Geschützter Bereich (Login)! 9 Aufgaben: Login / Logout! 9 Aufgaben: Datenbanken! 10 Aufgaben: Registration! 10 Aufgaben: Absicherung von Formularen und Passwörtern! 10 Mitarbeiterdaten anzeigen und bearbeiten! 11 Aufgaben: Mitarbeiter-Profil anzeigen! 11 Aufgaben: Mitarbeiterdaten ändern! 11 Benutzer-Bilder! 11 Aufgaben: Bild hochladen und ändern! 11 Aufgaben: Bild löschen! 11 Mitarbeitersuche! 12 Aufgaben: Ergebnisbegrenzung / Seitenwechsel! 12 2

3 Aufgaben: Suche mit AJAX! 12 Aufgaben: Ergebnisse verlinken! 12 Besucherzähler! 13 Aufgaben: Besucherzähler mit einzelner Datei! 13 Aufgaben: Zeitabhängige Datei-Erstellung / Modulo! 13 Template-Engines! 13 Aufgaben: Die Smarty Template-Engine! 13 Übungsprojekt 2: Deine eigene Community! 14 Anforderungen! 14 3

4 Vorwort Vorab sei gesagt, dass diese Übungen nur die Spitze des Eisbergs bilden. Direkt bei jeder einzelnen Übung in die Tiefe zu gehen, würde dich zu Beginn ehr behindern als dir eine schnelle Einarbeitung zu ermöglichen. Nach diesen Übungen weist Du aber auf jeden Fall schon einmal in welche Richtung es geht und nach welchen Stichpunkten Du suchen musst, wenn Du für eine Bestimmten Anwendungsfall weitere Informationen benötigst. Dieser Aufgabenkatalog ist - wie der Name schon sagt - ein Crashkurs. Die Routine und nötigen Feinheiten lernst Du schnell und ehr nebenbei im Alltagsgeschäft. Dieser Aufgabenkatalog besteht aus 2 Teilen. Der erste Teil soll die Grundlagen der Webentwicklung vermitteln und ein Verständnis für Programmabläufe fördern. Im 2. Teil sollst Du dann komplett eigenständig ein kleines Projekt erstellen, welches dann später auch wirklich online gestellt wird. Fast alle Aufgaben beinhalten das eigenständige Recherchieren im Internet, um eine Lösung für die gestellte Aufgabe zu finden. Recherchen gehören beim Programmieren genau so dazu, wie das Schreiben von Quellcode. Da sich das Web schnell weiterentwickelt und immer neue Methoden und Techniken zum Einsatz kommen, ist es für Dich unerlässlich immer auf dem aktuellen Stand zu sein. Als Entwickler lernt man - sprichwörtlich - nie aus. Generell sind folgende Dinge bei der Bearbeitung der Aufgaben zu beachten: Lösung der Aufgaben: Bitte gehe alle Übungen in der Reihenfolge durch, wie sie hier zu finden sind, da sie aufeinander aufbauen Versuche bei Problemen immer erst selbstständig eine Lösung zu erarbeiten und dokumentiere, wie Du zu einer Lösung des Problems gekommen bist Entwicklungsumgebung: Installiere und verwende in einer Windows-Umgebung das XAMPP Webserver- Paket mit den Dev -Erweiterungen. In einer Linux- oder Mac-Umgebung verwende das LAMP bzw. MAMP Webserver-Paket Als IDE verwenden wir NetBeans PHP oder Eclipse mit der PDT-Erweiterung Achte bei dem Projekt auf eine einheitliche UTF-8 Kodierung der Dateien und Datenbanken (MySQL: utf8_general_ci) Quellcode: Formatierung von Tabs: 4 Zeichen (nicht in Leerzeichen konvertieren) Achte auf sinnvoll benannte Variablen, Funktionen und Dateinamen Alle wichtigen Stellen müssen mit sinnvollen Kommentaren versehen sein Einheitliche Struktur (Einrücken, Absätze, etc.) Im Kopf der Datei eine kurze, stichwortartige Zusammenfassung, was in dieser Datei passiert und warum Du genau diesen Lösungsweg gewählt hast Wenn Code von anderen Seiten kopiert oder ein Tutorial zum Lösen einer Aufgabe verwendet wurde, ist die URL der Seite ebenfalls als Kommentar im Kopf der Datei anzugeben Wenn Du Funktionen verwendest, musst Du auf die Frage antworten können Was macht diese Funktion? Versuche immer eine Lösung zu finden, mit der Du selber 100% zufrieden bist (unabhängig davon ob Du dir sicher bist, dass dieser Ansatz der richtige ist) 4

5 Grundlagen Ohne Grundlagen kommt man natürlich nicht sehr weit, gerade wenn man nur wenig oder keine Programmiererfahrung hat. Daher wird in diesem Kapitel erst einmal das Basis- Wissen geschaffen, welches Du für das erste Übungsprojekt benötigst. HTML / CSS Viele Wege führen nach Rom, aber kein Weg führt an HTML und CSS vorbei ;) Es sind DIE Grundlagen für alle Webentwickler und sollten mit verbundenen Augen beherrscht werden. Um die Grundlagen von HTML und CSS zu lernen, findest unter dieser Aufgabe eine Auswahl an Tutorials die Du durcharbeiten kannst. Wenn Du lieber ein Buch oder andere Tutorials verwenden möchtest, steht dir das natürlich frei. Wichtig ist nur, dass Du am Ende dieser Übung die Aufgaben korrekt gelöst hast und folgende Fragen beantworten kannst: Wofür steht die Abkürzung HTML? Welche Typen von HTML gibt es und welche ist die aktuellste? Was versteht man unter dem Begriff Browserkompatibilität und wie beeinflusst dich, als Webentwickler, dieses Thema bei der Umsetzung einer Webseite? Tutorials Aufgaben 1. Erstelle eine einfache Webseite (Dateiname: index.html) mit allen minimal nötigen Elementen, um HTML-konform zu sein, sowie einer einzelnen Überschrift: Mitarbeiterverwaltung. 2. Style den Inhalt der Webseite so, dass er horizontal und vertikal zentriert ist. Benutze dazu DIV-Elemente, welche via CSS formatiert sind. Die CSS-Formatierungen sollen in einer 2. Datei ausgelagert werden. 3. Unter der Überschrift soll nun eine vertikale Tabelle angezeigt werden, welche folgende Daten von dir beinhaltet (benutze die Kopf-Tags der Tabelle für die Bezeichnungen!): Name Anschrift Alter Geschlecht -Adresse 4. Ersetze die statischen HTML-Werte zu den Bezeichnungen durch sinnvolle Formular- Elemente und lasse sie mit deinen Daten vorausgefüllt ausgeben. 5. Kontrolliere die erstelle Webseite in allen Browsern und sorge dafür, dass die Seite überall gleich aussieht 5

6 PHP Neben HTML und CSS gehört PHP mittlerweile ebenso zu einem Standard für Webentwickler. PHP ermöglicht es auf dem Server Logik und Prozesse zu hinterlegen, um den Anforderungen an eine dynamischen Webseiten gerecht zu werden. Mit Hilfe von PHP werden die HTML-Seiten zur Laufzeit erzeugt und manipuliert. Dies ermöglicht es z.b. einen Login, ein Gästebuch oder Forum zu programmieren. Einige der Aufgaben die Du nachfolgend findest, sind eventuell nicht in dem Tutorial behandelt worden. Versuche hier selbstständig eine Lösung zu finden bzw. zu recherchieren. Tutorials Aufgaben: Arrays und Schleifen 1. Erstelle in der neuen Datei index.php ein assoziatives-array, welches als Schlüssel die aus der HTML-Übung bekannten Felder enthält und als Schlüssel-Wert den jeweiligen Wert zuweist 2. Füge nach dem Array einen neuen Zeile hinzu, die einen einzelnen Schlüssel (Homepage) und den jeweiligen Wert dem Array hinzufügt. 3. Erstelle ein verschachteltes - mehrdimensionales - Array ($mitarbeiter), um in dem Haupt-Array beliebig viele Mitarbeiter speichern zu können. Füge 2 weitere Test- Personen dem Array hinzu. 4. Lasse das Array mit Hilfe einer verschachtelten Schleife als HTML-Tabelle ausgeben, ohne die Werte des Unter-Arrays direkt über die Schlüssel anzusprechen Aufgaben: Funktionen 1. Erstelle eine neue Datei (functions.php), welche welche eine Funktion enthält, die zu dem zuvor erstellen Mitarbeiter-Array ($mitarbeiter) einen neuen Mitarbeiter hinzufügt. Als Parameter soll diese Funktion nur das Array mit den neuen Mitarbeiterdaten übergeben bekommen. Das Mitarbeiter-Array selbst soll nicht an die Funktion übergeben werden, dies aber bearbeiten können. 2. Binde die Datei mit der Funktion in die index.php-datei ein, so dass ein Fehler ausgegeben wird, sollte die Datei - aus welchen Gründen auch immer - nicht geladen werden können 3. Schreibe eine zweite Funktion, welche als Parameter nur den Vor- und Nachnamen übergeben bekommt und anhand dessen aus dem Mitarbeiter-Array den passenden Mitarbeiter-Datensatz zurückgibt 4. Schreibe eine Funktion, die die Bezeichnung eines Array-Schlüssels als Parameter erhält und das Mitarbeiter-Array anhand des Schlüssel-Wertes des jeweiligen Mitarbeiters absteigend sortiert. Als Ergebnis der Funktion soll eine sortiert Kopie des Mitarbeiter-Arrays zurückgegeben werden. 6

7 Aufgaben: Header & Cookies 1. Was sind HTTP-Header, wozu dienen sie und wo sind sie zu finden? 2. Nenne den Unterschied zwischen dem GET- und dem POST-Request 3. Was sind Cookies, wo und von wem werden diese im HTTP-Requst untergebracht? 4. Für welche Anwendungsfälle werden Cookies häufig verwendet? 5. Wie kann man in einem Browser Cookies und HTTP-Requests debuggen? Aufgaben: Sessions 1. Starte eine PHP-Session mit dem Namen MV (Mitarbeiterverwaltung) 2. Setze einen Cookie, der die Uhrzeit des ersten Aufrufs der Webseite enthält und nach schließen des Browser verfällt 3. Setze einen Cookie, der die Uhrzeit des ersten Aufrufs der Webseite enthält und nach schließen des Browser NICHT verfällt 4. Lasse die Werte der beiden Cookies auf der Startseite ausgeben 5. Speichere in der PHP-Session die aktuelle UNIX-Timestamp und aktualisiere sie nur einmal pro Minute. Gib Sie immer unterhalb der Cookie-Daten auf der Startseite aus. 7

8 JavaScript Um dem statischen HTML-Code im Browser mehr Dynamik und Funktionalität zu geben, wird JavaScript verwendet. Es ermöglicht das Manipulieren des HTML-DOMs und bietet eine große Palette an Möglichkeiten mit dem Benutzer interaktiv zu kommunizieren. Wie immer findest Du nachfolgend Links zu Tutorials und einige Übungsaufgaben zu diesem Thema. (Verwende für die folgenden Aufgaben bitte KEIN JavaScript-Framework wie jquery oder andere.) Tutorials Aufgaben: Taschenrechner 1. Erstelle eine neue HTML-Seite namens rechner.html und programmiere einen voll funktionstüchtigen JavaScript-Taschenrechner mit den Grundrechenarten sowie einer Ergebnisausgabe. Als optische Referenz kann der einfache Taschenrechner des Betriebssystems verwendet werden. 2. Style den Taschenrechner über CSS und verwende JavaScript, um die Elemente des Taschenrechners mit CSS-Klassen, IDs oder inline-styles zu füllen Aufgaben: AJAX 1. Erstelle auf der Startseite einen temporären Link, mit dem man den Taschenrechner per AJAX laden kann. Der Taschenrechner soll innerhalb der Seite eingebettet werden und voll funktionstüchtig sein. 2. Über einen zweiten temporären Link soll der Taschenrechner wieder entfernt werden können, wenn er zuvor geladen wurde. 3. Die Ergebnisberechnung des Taschenrechners soll mit Hilfe von PHP gelöst werden. Erstelle dazu die Datei rechner.php und sende über einen AJAX-Call die Rechenoperationen (via POST) an das PHP script und lasse diese dort berechnen. Das resultierende Ergebnis soll via JavaScript im Taschenrechner angezeigt werden. 8

9 Übungsprojekt 1: Mitarbeiterverwaltung Dieses Übungsprojekt soll die Grundlagen der Webentwicklung vermitteln. Es kann später als kleine Referenz dienen, wenn ähnliche Problemstellungen in der realen Entwicklung auftreten. Achte daher - aus eigenem Interesse - darauf, dass der Quellcode korrekt und vollständig kommentiert ist und so funktioniert wie es die Aufgaben vorgeben. Nachdem Du mit einer Aufgabe fertig bist, solltest Du dir einen Moment Zeit nehmen und den Code noch einmal genau durchschauen und soweit optimieren, dass Du mit dem erzielten Ergebnis zufrieden bist. Sprich bitte nach jeder abgeschlossenen Aufgabe mit deinem Ausbilder / Betreuer, um das Ergebnis gemeinsam durchzusprechen. Geschützter Bereich (Login) Um eine Webseite vor unbefugten Zugriff zu schützen, soll ein Login für die Mitarbeiter eingerichtet werden. Aufgaben: Login / Logout 1. Erweitere das Mitarbeiter-Array, aus den Vorbereitungs-Übungen, um zwei Felder: username und password und fülle die Felder je Mitarbeiter mit sinnvollen Werten 2. Schreibe eine Funktion, der Du als Parameter einen Benutzernamen und das zugehörige Passwort übergibst. Die Funktion soll zu den Login-Daten den passenden Mitarbeiter suchen und dessen Daten in der Session speichern. Je nach dem ob ein Mitarbeiter mit diesen Zugangsdaten gefunden wurde, soll die Funktion einen Status (boolean) zurückgeben. Typischerweise wird true im Erfolgsfall und false bei Fehlern oder Misserfolg zurückgegeben. 3. Erstelle eine neue Datei (login.php) auf der ein HTML-Formular zu finden ist, in dem der Benutzer seine Zugangsdaten eintragen kann. Das Formular soll per POST abgeschickt werden und das Passwort soll nicht in Klartext in dem Formularfeld erscheinen wenn es eingetragen wird. 4. Benutze beim Absenden des Formulars die soeben geschriebene Funktion, um den Benutzer einzuloggen. Wenn die Zugangsdaten falsch waren, gib über dem Formular einen Fehler in roter Schrift aus. Ist der Login erfolgreich, leite den Benutzer auf die Startseite um. 5. Prüfe auf jeder Seite, ob der Benutzer eingeloggt ist und leite ihn auf die login.php- Seite um, sollte dies nicht der Fall sein. 6. Gib den Benutzernamen des aktuell eingeloggten Benutzers oben rechts auf jeder Seite aus. Neben dem Benutzernamen soll ein Logout-Link angezeigt werden. Wenn der Benutzer auf diesen Link klickt soll die Session beendet und der Benutzer ausgeloggt werden. 7. Achte darauf, dass der Login auch funktioniert, wenn der Benutzer Cookies in seinem Browser deaktiviert hat! 9

10 Aufgaben: Datenbanken 1. Lies dich in das Thema der Datenbanken ein. In unserem Fall soll eine MySQL- Datenbank eingesetzt werden, um zukünftig die Mitarbeiter zu verwalten. 2. Erstelle lokal eine neue MySQL-Datenbank mit sinnvollem Namen und überlege, wie die Tabelle zur Verwaltung der Mitarbeiterdaten aussehen müsste. 3. Achte bei dem Tabellen-Design auf die Feld-Typen und Indizes. Wähle beides mit Bedacht und recherchiere den Zweck des unsigned -Falg bei den Feld-Attributen. 4. Erstelle ein kleines Test-Script (test_datenbank.php) mit dem Du dich via PHP zu der Datenbank verbindest und den Tabellenstatus auf der Seite ausgibst (Query: SHOW TABLE STATUS ). 5. Pflege in die Datenbank die bislang in dem Mitarbeiter-Array hinterlegten Mitarbeiterdaten ein Aufgaben: Registration 1. Erstelle ein neues Script (registration.php) welches es neuen Mitarbeitern ermöglicht sich in dem System einen Account einzurichten 2. Erstelle ein Formular in dem Benutzer alle erforderlichen Angaben machen können. Verwende für das Formular das jeweils sinnvollste HTML-Element. 3. Wenn der Benutzer das Formular abgeschickt hast sollen alle eingegebenen Daten validiert werden (alle Pflichtfelder ausgefüllt?, Name zu kurz/lang?, valide - Adresse?,...) 4. Sollten bei der Überprüfung Fehler aufgetreten sein, soll unter dem jeweiligen Formularfeld eine Fehlermeldung ausgegeben werden, die genau beschreibt warum die Prüfung fehlgeschlagen ist ( Name zu kurz etc.). Außerdem sollen bereits eingetragene Felder vorausgefüllt werden, damit der Benutzer nicht immer alle Felder neu ausfüllen muss, wenn ein Fehler aufgetreten ist. 5. Wenn keine Fehler aufgetreten sind, sollen die Daten in der Datenbank gespeichert werden und der Benutzer auf die Login-Seite umgeleitet werden und eine Bestätigungs-Nachricht angezeigt bekommen, dass die Registration erfolgreich war und er sich nun mit den Daten einloggen kann. 6. Baue die Login-Funktion so um, dass der Login über die Datenbank-Tabelle und nicht mehr über das Array läuft Aufgaben: Absicherung von Formularen und Passwörtern 1. Führe zu den folgenden Themen eine Recherche durch: 1.1. SQL-Injection 1.2. XSS (Cross-Site-Scripting) 1.3. Passwort-Hashing 2. Sichere dein Script so ab, dass weder SQL-Injections noch XSS-Hacks erfolgreich sind 3. Modifiziere die Registration, den Login und die Datenbank-Tabelle so, dass kein Passwörter mehr in Klartext in der Datenbank gespeichert werden 10

11 Mitarbeiterdaten anzeigen und bearbeiten Aufgaben: Mitarbeiter-Profil anzeigen 1. Erstelle eine Script (profil.php) welches die Daten des aktuell eingeloggten Benutzers in einer HTML-Tabelle ausgibt. 2. Verwende für die Tabelle sinnvolle Überschriften / Bezeichnungen und nutze die korrekten HTML-Elemente um diese zu kennzeichnen 3. Die des Benutzers soll so verlinkt sein, dass sich beim klicken auf den Link das -Programm öffnet und der Betreff der mit Kontaktanfrage vorausgefüllt ist Aufgaben: Mitarbeiterdaten ändern 1. In dem Script einstellungen.php soll dem Mitarbeiter die Möglichkeit gegeben werden seine relevanten Daten zu ändern. Dazu soll ein Formular ausgegeben werden, welches - ähnlich der Registration - alle Felder anzeigt und mit den aktuellen Daten des eingeloggten Benutzers vorausgefüllt ist. 2. Nach dem Absenden des Formulars soll auch hier wieder eine Validierung der Daten vorgenommen werden. 3. Wenn keine Fehler aufgetreten sind, sollen die Daten in der Datenbank aktualisiert werden. Es sollen jedoch nur die Felder aktualisiert werden, die sich wirklich geändert haben. 4. Gestallte deine Datenbank-Query so, dass nur eine einzige Anfrage abgesetzt werden muss, um alle geänderten Felder zu aktualisieren 5. Beachte die Daten in der Session, über die der Benutzer eingeloggt ist und finde eine bessere Möglichkeit als den kompletten Datensatz in der Session zu speichern Benutzer-Bilder Aufgaben: Bild hochladen und ändern 1. In dem einstellungen.php-script soll dem Benutzer die Möglichkeit gegeben werden ein Benutzerbild (nur jpg, max. 2MB Dateigröße) hochzuladen. Recherchiere dazu im Internet nach entsprechenden PHP-Funktionen und Abläufen 2. Das Bild soll im Ordner./upload gespeichert werden und als Namen die User-ID sowie das Datei-Kürzel erhalten (z.b. 123.jpg). Beachte die Möglichkeit, dass der Benutzer evtl schon ein Bild hochgeladen hat. In diesem Fall soll das bereits bestehende Bild überschreiben werden. 3. Das Bild ist kein Pflichtfeld, hat ein Benutzer allerdings ein Bild hochgeladen, so soll dieses in der Tabelle auf der profil.php-seite angezeigt werden. Finde dazu eine performante Möglichkeit, um herauszufinden ob für den Benutzer ein Profilbild existiert Aufgaben: Bild löschen 1. Sofern der Benutzer ein Bild hat, soll es auf der einstellungen.php-seite einen Link geben, mit dem der Benutzer sein Bild löschen kann. 2. Recherchiere dazu im Internet und sichere den Vorgang so ab, dass nichts anderes als diese Bild gelöscht werden kann 11

12 Mitarbeitersuche Aufgaben: Suchformular 1. Auf einer neuen Seite (suche.php) soll ein einfaches Formular ausgegeben werden, in dem man einen Suchbegriff eingeben und einen Los -Button klicken kann 2. Die Suche soll nur starten, wenn mindestens 3 Zeichen eingegeben wurden, wenn weniger Zeichen vorhanden sind soll unter dem Suchen-Feld ein entsprechender Hinweis ausgegeben werden 3. Recherchiere zu Such-Möglichkeiten in einer MySQL-Datenbank und verarbeite die Suchanfrage. Nach dem Absenden des Formulars soll in folgenden Feldern gesucht werden: 3.1. Vorname 3.2. Nachname Adresse 4. Zeige als Ergebnis der Suche eine Liste aller übereinstimmenden Mitarbeiter an. Es Soll der Vor- und Nachname sowie in der nächsten Zeile die Adresse und des Mitarbeiters angezeigt werden 5. Der gefundene Suchbegriff soll innerhalb der Ergebnisliste rot markiert werden. Beispiel: Suchbegriff: mann ; Im Ergebnis Max Mustermann, Musterweg 123, Mannheim... muss also der teil mann in Mustermann sowie Mannheim rot markiert werden (unabhängig von der Groß-/Kleinschreibung!) Aufgaben: Ergebnisbegrenzung / Seitenwechsel 1. Begrenze die Ergebnisliste auf maximal 5 Einträge je Seite 2. Um alle Ergebnisse ansehen zu können recherchiere zum Thema Seitenwechsel bzw. Pagination und implementiere dies in die Ergebnisliste der Suche 3. Erweitere den Seitenwechseln um ein Auswahlfeld, welches ein direktes springen zu der gewünschten Seite ermöglicht. Sobald in dem Auswahlfeld eine Seite gewählt wurde soll sofort die entsprechende Seite geladen werden, ohne vorher ein Formular abschicken zu müssen Aufgaben: Suche mit AJAX 1. Baue das Such-Formular so um, dass die Ergebnisse der Suche per AJAX nachgeladen werden. Recherchiere hierzu auch zum Thema jquery und verwende dieses JavaScript-Framework für die Implementierung 2. Baue ebenfalls den Seitenwechsel so um, dass die einzelnen Ergebnis-Seiten per AJAX nachgeladen werden können Aufgaben: Ergebnisse verlinken 1. Passe die profil.php-seite so an, dass sie neben dem aktuell eingeloggten Benutzer nun auch die Daten anderer Mitarbeiter anzeigen kann (die per ID übergeben werden) 2. Verlinke den Vor- und Nachnamen der Ergebnisse auf die profil.php-seite so, dass das Profil des Benutzers angezeigt wird, der angeklickt wurde 12

13 Besucherzähler Aufgaben: Besucherzähler mit einzelner Datei 1. Schreibe eine PHP-Funktion, welche eine Datei (zaehler.txt) ausliest, den enthalten Wert inkrementiert und ihn wieder in die Datei schreibt. Sollte die Datei nicht existieren soll sie automatisch erstellt werden 2. Die Funktion soll außerdem als Ergebnis die inkrementierte Zahl zurückgeben 3. Rufe die Funktion bei jedem Seitenaufruf auf und gebe sie im Fuß der Seite aus Aufgaben: Komplexer Besucherzähler auf Datei-Basis 1. Erweitere die Zuvor geschriebene Funktion um einen Parameter. Dieser Parameter soll der Name der Datei sein, in dem die Funktion aufgerufen wurde. 2. Das Inkrementieren soll jetzt nicht mehr global, über alle Dateien hinweg, passieren sondern nur noch auf Basis des übergebenen Parameters. Das heisst, es wird je Datei die Anzahl der Aufrufe gespeichert (Startseite: 13x, Profil: 37x, Suche: 42x,...) 3. Die Funktion soll jetzt nur noch die Besucherzahl der übergebenen Seite zurück liefern Aufgaben: Zeitabhängige Datei-Erstellung / Modulo 1. Integriere eine Logik in die Zähler-Funktion, die alle 5 Minuten (1:00 Uhr, 1:05 Uhr, 1:10 Uhr, 1:15 Uhr,...) eine neue Datei verwendet - die alten Dateien allerdings nicht überschreibt oder löscht. Stichwort: Modulo Template-Engines Wie dir evtl. bereits aufgefallen ist, wird das mischen von PHP-Logik und HTML-Code schnell unübersichtlich und anfällig für Fehler. Um dieses Problem zu lösen, gibt es sog. Templates-Engines. Mit deren Hilfe lässt sich das Design (HTML, CSS, JS) von der Programmlogik (PHP) abkapseln, um das Projekt so wesentlich übersichtlicher zu gestallten. Aufgaben: Die Smarty Template-Engine 1. Erkundige dich über die aktuellste Version der Smarty-Engine und binde diese in dein Projekt ein. 2. Baue dein Komplettes Projekt so um, dass kein PHP-Code mehr mit HTML gemischt ist, sondern nur noch Smarty verwendet wird, um die HTML-Ausgabe zu erzeugen 13

14 Übungsprojekt 2: Deine eigene Community Dieses Projekt soll das bislang erlernte festigen und wird komplett selbstständig von dir programmiert. Einzig die Rahmenbedingungen sind vorgegeben, den Rest kannst Du ganz nach deinen eigenen Vorstellungen umsetzen. Am Besten erstellst Du dir zunächst ein neues Projekt in deiner IDE. Bitte beachte, dass Du das 1. Projekte gerne als Referenz zur Hilfe nehmen kannst wenn du nicht weiter kommst. Du solltest es aber nicht einfach nur kopieren, damit tust Du dir selber keinen Gefallen. Der Quellcode soll natürlich wieder Kommentiert und so übersichtlich und schlank wie möglich sein. Verwende alle bislang erlernten Techniken, um das Projekt so optimal wie möglich umzusetzen. In der nachfolgenden Liste findet sich die ein oder andere Anforderung, mit der Du in dem ersten Projekt noch nicht konfrontiert wurdest. Versuche hier selbstständig eine Lösung zu finden, mit der sich die Anforderung umsetzen lassen und angemessen erscheint. Anforderungen Registration (mit für eine Community sinnvollen Feldern) Login / Logout über PHP-Sessions (auch ohne aktivierte Browser-Cookies) Benutzerprofil Benutzerdaten die per AJAX bearbeitet werden können jeder Benutzer bekommt ein eigenes Gästebuch. Das Gästebuch soll auf der Profil-Seite des Benutzers, unter seinen Benutzerdaten angezeigt werden. Nach 10 Gästebuch- Einträgen soll ein Seitenwechsel erscheinen, der per AJAX funktioniert. jeder Benutzer kann ein Profilbild hochladen jeder Benutzer hat ein Fotoalbum, in das er beliebig viele Fotos hochladen und auch wieder löschen kann Auf der Community-Startseite sollen zufällig 10 Bilder aus den Fotoalben der Benutzer angezeigt werden Auf jeder Seite soll ein Zufalls-Benutzer angezeigt werden. Nur Benutzer mit einem Profilbild sollen angezeigt werden. Mit einem Klick auf das Bild oder den Benutzernamen kommt man dann auf das Profil desjenigen Es soll eine Benutzersuche geben. Die Ergebnisliste soll ebenfalls nach 10 Einträgen einen AJAX-Seitenwechsel haben jeder Benutzer kann beliebig viele Freunde haben. Auf der Profil-Seite eines fremden Benutzers soll ein Link erscheinen, der es dem Besucher ermöglich den Benutzer als Freund zu markieren. Außerdem soll auf dem Profil des Benutzers eine Liste aller seiner Freunde angezeigt werden. Wenn ich den Benutzer als Freund hinzufüge, bedeutet es jedoch nicht, dass auch er mich als Freund hinzugefügt hat. Designe deine Community nach deinen Wünschen, achte dabei aber auf ein harmonisches Gesamtbild Versuche alles Wissen das Du über die Webentwicklung bislang gelernt hast, in diesem Projekt zu verwenden! 14