IT Zertifikat Wintersemester 2010/2011 Allgemeine Informationstechnologien II. Abschlussprojekt Ein kleines Redaktionssystem

Transkript

1 IT Zertifikat Wintersemester /11 Allgemeine Informationstechnologien II Abschlussprojekt Ein kleines Redaktionssystem

2 Das Abschlussprojekt basiert auf der im Kurs Allgemeine Informationstechnologien II entwickelten Webseitenvorlage. Die unterschiedlichen Bereiche des Templates werden im Abschlussprojekt mit Funktionalität und Inhalt gefüllt. Hauptnavigation Logo Teaserbereich Inhaltsbereich Login-Bereich Footer 2

3 Formale Anforderungen Ihre Arbeit liegt auf dem externen Server sandbox.hki.uni-koeln.de und ist über die Adresse Benutzername>/abschlussarbeit zu erreichen. Der Quellcode (PHP, JavaScript, jquery) ist dokumentiert: Jede wichtige Anweisung, jede wichtige Zeile im Quelltext ist durch einen Kommentar beschrieben. Sie arbeiten mit Tabellen innerhalb Ihrer eigenen Datenbank <Ihr Benutzername> auf dem MySQL- Server sandbox.hki.uni-koeln.de. 2 Sie verwenden keine Tabellen, um Ihre Website zu gestalten, sondern div-container und Stylesheets. 3 Der CSS- und Gestaltungspart Gestalten Sie die Seitenvorlage nach Ihrem Geschmack. Ergänzen Sie Ihre Website um eine Hintergrundtextur oder Hintergrundgrafik und bringen Sie Farbe und Leben in die graue Website. Verwenden Sie ein externes Stylesheet, um den Inhalt Ihrer Website klar von der Darstellung Ihrer Website zu trennen. Sie verwenden ein externes Stylesheet, um die Druckdarstellung anzupassen: Gedruckt werden soll nur der Inhalt des Inhaltsbereiches. Sowohl Hauptnavigation, Logo, Teaser- und Login-Bereich als auch der Footerbereich werden über das Druckstylesheet ausgeblendet

4 Datenbankdesign mit phpmyadmin Die Ihres Redaktionssystemes besteht zum einen darin, Neuigkeiten -Beiträge in einer MySQL-Datenbank zu speichern, zu verändern und auszugeben. Zum anderen können sich Benutzer an Ihrem Redaktionssystem über den Login -Bereich anmelden. Die Benutzerdaten werden in einer MySQL-Datenbank gespeichert. Neuigkeiten -Beiträge bestehen aus einer BeitragsID einer Überschrift einem Bild und einem längeren Text Generieren Sie eine Tabelle in Ihrer MySQL-Datenbank unter Verwendung von phpmyadmin, um die Informationen aufzunehmen. Benutzer sollen sich mit einem Benutzernamen und einem Passwort an Ihrem Redaktionssystem anmelden können. Bereiten Sie eine Tabelle in Ihrer MySQL-Datenbank vor, die die folgenden Informationen speichert: BenutzerID Benutzername Passwort -Adresse PHP und Sicherheit Wichtig: Verwenden Sie immer die PHP-Funktion mysql_real_escape_string ( um den Inhalt der Textfelder vor dem Senden an Ihre MySQL-Datenbank zu validieren! 4

5 Hauptnavigation Die Hauptnavigation am oberen Rand der Website besteht aus den vier Menupunkten Startseite Neuigkeiten-NEU Neuigkeiten-ADMIN Benutzerverwaltung Realisieren Sie die Navigationspunkte als Hyperlinks. Verlinken Sie hierfür Text oder Bilder (<img>). Befindet sich der Mousezeiger über einem Navigationselement, so soll das entsprechende Navigationselement markiert, d.h. in einer anderen Farbe oder über eine andere Grafik dargestellt werden, als das ürsprüngliche Navigationselement. Verwenden Sie hierfür CSS oder jquery. Das Navigationselement der aktuell besuchten Website wird hervorgehoben bzw. als aktiv markiert. Ein Beispiel: Wurde die Seite Neuigkeiten über das entsprechende Navigationselement aufgerufen, so wird das Navigationselement Neuigkeiten farblich (oder über ein anderes Bild als das ursprüngliche Bild des Navigationselementes) hervorgehoben. Logobereich Erstellen Sie eine Logografik mit einer Bildbearbeitungssoftware Ihrer Wahl (oder verwenden Sie ein lizenzfreies Bild als Ihr Logo) und binden Sie Ihr Webseitenlogo ein. Verlinken Sie das Logo auf die Startseite Ihrer Website.

6 Teaserbereich Der Teaserbereich dient dazu, die fünf neuesten Newsbeiträge in ansprechender Form auf Ihrer Website zu präsentieren. Überschriften, Variante A: Laden Sie die fünf neuesten Überschriften der Neuigkeiten -Rubrik aus der MySQL-Datenbank und stellen Sie die Überschriften im Teaserbereich oberhalb der Grafik dar. Die Grafik rückt in dieser Variante nach unten. Überschrift 1 Verwenden Sie jquery, um die einzelnen Überschriften per Mouseklick auf die fünf Symbole im Teaserbereich anzuzeigen bzw. auszublenden. Überschriften, Variante B: Laden Sie die fünf neuesten Überschriften der Neuigkeiten -Rubrik aus der MySQL-Datenbank und stellen Sie die Überschriften im Teaserbereich auf der Grafik dar. Verwenden Sie CSS, um die gewünschte Darstellung zu erhalten. Überschrift 1 (auf Grafik) Verwenden Sie jquery, um die einzelnen Überschriften per Mouseklick auf die fünf Symbole im Teaserbereich anzuzeigen bzw. auszublenden. Laden Sie die mit den Neuigkeiten -Beiträgen verknüpften Bilder aus der Datenbank (bzw. die Verweise auf die Adresse der Bilder auf dem Server) und stellen Sie die Bilder situationsabhängig, d.h. per Klick auf die fünf unterschiedlichen Symbole (jquery) dar. Bei einem Klick auf die Überschrift wird die Startseiteseite aufgerufen und an die entsprechende Stelle bzw. Überschrift des Neuigkeiten -Beitrages gesprungen. 30 6

7 Inhaltsbereich Der Inhaltsbereich hat - je nach aufgerufener PHP-Seite unterschiedliche Funktion: Startseite Neuigkeiten-NEU Neuigkeiten-ADMIN Benutzerverwaltung Inhaltsbereich Startseite Auf der Startseite dient der Inhaltsbereich dazu, die Neuigkeiten -Beiträge auszugeben. Laden Sie Überschrift, Inhalt und Bild der Neuigkeiten -Beiträge aus der Datenbank. Ordnen Sie die Beiträge in zeitlicher Reihenfolge: Neue Beiträge finden sich ganz oben in der Auflistung, ältere Beiträge werden zum Ende der Auflistung dargestellt. Beschränken Sie die Anzahl der maximal dargestellten Neuigkeiten -Beiträge auf zehn. Beschränken Sie die Anzahl der maximal dargestellten Neuigkeiten -Beiträge auf zehn und fügen Sie unter die Auflistung der Beiträge weiter - und zurück -Buttons ein, um jeweils zehn Einträge zurück- bzw. vorzuspringen. 40 7

8 Inhaltsbereich Neuigkeiten-NEU Über ein Formular macht s die Seite Neuigkeiten-NEU möglich, neue Neuigkeiten -Beiträge Ihrer Datenbank hinzuzufügen. Erstellen Sie ein Formular, um die einzelnen Informationen der entsprechenden Tabelle Ihrer Datenbank hinzuzufügen. Statten Sie den Absenden -Button Ihres Neuigkeiten -Formulares mit Funktionalität aus: Bei Klick auf den Button werden die eingegebenen Informationen in der Datenbank gespeichert. Lassen Sie das Textfeld Ihres Eingabeformulares über einen WYSIWYG Editor (z.b. CKEditor ( oder TinyMCE ( ) darstellen und verarbeiten. 0 Inhaltsbereich Neuigkeiten-ADMIN Analog der Startseite listet die Neuigkeiten-ADMIN Seite alle Neuigkeiten -Beiträge auf, ermöglicht über die Auflistung hinaus die Bearbeitung von Neuigkeiten -Beiträgen und das Löschen einzelner Neuigkeiten -Beiträge. Lassen Sie wie auf der Startseite alle Neuigkeiten -Beiträge in chronologischer Reihenfolge ausgeben. Ergänzen Sie die Ausgabe aller Beiträge um Formularelemente (i.e. Button, Checkbox, etc.), um die Funktionalität für das Bearbeiten und Löschen von Beiträgen vorzubereiten. Implementieren Sie Funktionalität zur Bearbeitung von Beiträgen. Der Arbeitsfluss könnte sich hierbei wie folgend gestalten: Ein Benutzer Ihres Redaktionssystemes ruft die Seite Neuigkeiten- ADMIN auf und erhält auf der Website eine Auflistung aller vorhandenen Neuigkeiten -Beiträge. Bei einem Klick auf den Button Beitrag ändern wird eine PHP-Seite aufgerufen, die den entsprechenden Beitrag in Textfelder lädt und über einen Klick auf Absenden die geänderten Informationen des Neuigkeiten -Beitrages in die Datenbank schreibt. 2 Ermöglichen Sie das Löschen einzelner Beiträge aus der Neuigkeiten -Tabelle Ihrer Datenbank. 2 Ermöglichen Sie das Löschen mehrerer Beiträge aus der Neuigkeiten -Tabelle Ihrer Datenbank. 80 8

9 Inhaltsbereich Benutzerverwaltung Die Seite Benutzerverwaltung Ihres Redaktionssystemes (CMS) dient dazu, ihrem CMS neue Benutzer hinzuzufügen. Lassen Sie alle Benutzer Ihres CMS ausgeben, z.b. in der Form BenutzerID Benutzername Adresse Fügen Sie unterhalb der Ausgabe der Benutzer Ihres Systems ein Formular ein, um neue Benutzer Ihrem CMS hinzuzufügen. Verwenden Sie für die Eingabe des Passwortes ein Passwort-Eingabefeld, um die Anzeige des Kennwortes im Klartext zu verhindern. Statten Sie das Formular mit Funktionalität aus: Bei einem Klick auf den Absenden -Button wird ein neuer Eintrag mit dem Inhalt der Formularfelder in die Tabelle Ihrer Datenbank geschrieben. Verschlüsseln Sie das Kennwort, z.b. über md. Prüfen Sie (mit PHP oder jquery / JavaScript), ob eine reguläre adresse eingegeben wurde. 60 Login-Bereich Der Login-Bereich dient dazu, Benutzer an Ihrem Redaktionssystem anzumelden. Erstellen Sie ein Formular, über das sich Benutzer in der rechten Seitenleiste Ihrer Website an Ihrem Redaktionssystem anmelden können. Lagern Sie das Formular in einer externen PHP-Datei aus und binden Sie den Code über die PHP-Funktion include_once ( ein. Bei einem Klick auf den Absenden -Button des Benutzerformulares wird eine PHP-Seite aufgerufen, auf der geprüft wird, ob die eingegebenen Werte (Benutzername und Kennwort) in der Datenbank vorhanden sind

10 Footer Ergänzen Sie den Fußbereich Ihrer Website um Ihren Namen (oder Ihre Matrikelnummer, wenn Sie sich nicht mit Ihrem Namen verewigen möchten). Der Fußbereich Ihrer Website soll sich ein- und ausklappen lassen: Ergänzen Sie den Fußbereich um ein Symbol, über das die entsprechende jquery-funktionalität zum Ein- und Ausklappen des Fußbereiches angesprochen wird.

11 Wertungsübersicht nbereich Maximal erreichbare Erzielte Formale Anforderungen Der CSS- und Gestaltungspart Datenbankdesign mit phpmyadmin PHP und Sicherheit Hauptnavigation Logobereich Teaserbereich 30 Inhaltsbereich Startseite 40 Inhaltsbereich Neuigkeiten-NEU 0 Inhaltsbereich Neuigkeiten-ADMIN 80 Inhaltsbereich Benutzerverwaltung 60 Login-Bereich 0 Footer -/Notenrelation 440 Erzielte Punktzahl Note , , , , , , , , , bestanden 11