IFD:WebAdvancedII/Carlo Enke

OFG oder SV OFFROAD FREUNDE GREIZ e.V.

Idee und Konzept

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein. Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt. Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Techniken

Die gesamte Website wurde mit Hilfe von HTML 5 und CSS 3 erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem PHP und jQuery verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes CMS hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer SQL-Datenbank gespeichert und abgerufen.

Inhalte

Startseite

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<?php
  $sql = "
  (
  SELECT
    news.news_id AS id,
    news.news_title AS title,
    LEFT(news.news_body, 100) AS body,
    news.time AS time,
    'news' AS `type`
  FROM
    news
  )
  UNION ALL
  (
  SELECT
    posts.post_id AS id,
    posts.post_title AS title,
    LEFT(posts.post_body, 300) AS body,
    posts.time AS time,
    'posts' AS `type`
  FROM
    posts	
  )
  UNION ALL
  (
  SELECT
    albums.album_id AS id,
    albums.album_title AS title,
    LEFT(albums.album_body, 200) AS body,
    albums.time AS time,
    'albums' AS `type`
  FROM
    albums	
  )
  ORDER BY
    time desc
  ";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}

angezeigt und nach Datum des Eintrages sortiert. Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden. Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

Über uns

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

Events

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.