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

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>";
											}
										}
									?>

aufgerufen und nach Datum des Eintrages sortiert.