IFD:WebApps/ProjekteWS10/SvenSom: Difference between revisions

From Medien Wiki
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 11: Line 11:
* PHP 5
* PHP 5
* Javascript
* Javascript
* jQuery
* jQuery 1.4.4
* MySQL
* MySQL
* HTML
* xHTML
* CSS
* CSS


Line 19: Line 19:


Das Design soll ohne große Spielereien auskommen. Klar definierte Formen und Farben stehen im Vordergrund.  
Das Design soll ohne große Spielereien auskommen. Klar definierte Formen und Farben stehen im Vordergrund.  
<gallery><br/>
File:b1_1.jpg | ''Signup/Login''<br/>
File:b1_2.jpg | ''Profil''<br/>
File:b1_3.jpg | ''Stadtplan''<br/>
</gallery>


== Datenbank ==
== Datenbank ==
Line 107: Line 113:


=== Stadtplan ===
=== Stadtplan ===
Beim Stadtplan können Studenten, die in Weimar (zentrumsnah) wohnen, ihren Wohnort bestimmen. Ihnen wird daraufhin eine Liste von Personen zur Verfügung gestellt, die in ihrer Nähe wohnen - sortiert nach Entfernungen (<1km, <2km, <3km, usw). Nicht-Weimarer und andere können diese Funktion etwas eingeschränkt nutzen, indem sie auswählen, wo sie sonst wohnen (Weimarer Umland, Erfurt, Jena, Woanders).
Beim Klick auf die Karte öffnet sich mithilfe vom jQuery-Plugin Colorbox ein weiteres Fenster, mit dem Stadtplan in größerer Auflösung. Beim Klick auf den Wohnort, werden X- und Y-Koordinaten weiterverarbeitet und via PHP in die Datenbank geschrieben.
<source lang="php" line start="1">
if(isset($_POST['x']) and isset($_POST['y']))
{
    $update = mysql_query("UPDATE `wohnort` SET `stadt`=1, `x`='$_POST[x]', `y`='$_POST[y]' WHERE `uid`='$uid'");
}
</source>

Latest revision as of 12:03, 14 December 2010

BAUHAUS-ERSTI.de

Kurzbeschreibung

Im Rahmen des Projektes möchte ich eine Art soziales Netzwerk erstellen, welches sich speziell an Erstsemester der Bauhaus-Universität richtet. Da ich selber "Ersti" war, habe ich festgestellt, dass überall Fragen und Probleme auftreten. Diese fangen schon beim Umzug an und gehen bis zur Modulbörse bzw. Einschreibung in jeweilige Vorlesungen. Mir persönlich ist dies nicht einfach gefallen bzw. habe immer noch kleine Probleme bei der Orientierung.

Mit dieser Plattform möchte ich den Erstis helfen. Es gibt verschiedene Checklisten, Erinnerungen und Hilfe bei Fragen. Diese Seite würde es möglich machen Erstsemestler besser untereinander kommunizieren zu lassen und der Uni eine weitere Plattform der Kommunikation zu bieten.

Verwendete Sprachen / Techniken

  • PHP 5
  • Javascript
  • jQuery 1.4.4
  • MySQL
  • xHTML
  • CSS

Design

Das Design soll ohne große Spielereien auskommen. Klar definierte Formen und Farben stehen im Vordergrund.

Datenbank

Im Hintergrund der Platform arbeitet eine Datenbank, die via phpMyAdmin verwaltet wird. Auf dem Webserver läuft Apache mit der MySQL-Client-Version 5.0.51a. PHP Erweiterung ist mysql.

Ausschnitte

Sicherheitsfunktionen gegen XSS

//Sicherheitsfunktionen gegen XSS
if(is_array($_GET) && count($_GET)>1)
{
	foreach($_GET as $key=>$get_var)
	{
		unset($_GET[$key]);
		$_GET[$key] = mysql_real_escape_string(str_replace("\\", "", htmlspecialchars(str_replace("\'", "", $get_var), ENT_QUOTES)));
	}
}

if(is_array($_POST) && count($_POST)>1)
{
	foreach($_POST as $key=>$post_var)
	{
		unset($_POST[$key]);
		$_POST[$key] = htmlspecialchars(str_replace("\'", "", $post_var), ENT_QUOTES);
	}
}

Datenbankanbindung

define("BASEHREF","");
define("FROMEMAIL","info@bauhaus-ersti.de>");
define("MYSQLUSER","..."); //mysql Username
define("MYSQLPASS","..."); //mysql Passwort
define("MYSQLDB","..."); //mysql Datenbank-Name

function db_connect()
{
	global $db;

	if($db)
		return;
	
	if(!@mysql_connect("localhost", MYSQLUSER, MYSQLPASS)){
		echo "Es ist ein Fehler mit der Datenbank aufgetreten! Es konnte keine Verbindung hergestellt werden.";
		exit();
	}
	
	$db = mysql_connect("localhost", MYSQLUSER, MYSQLPASS);

	mysql_select_db(MYSQLDB, $db);

	if(!$db)
	{
		echo "Es konnte keine Verbindung mit der Datenbank hergestellt werden!\n";
		exit();
	}
}

Registrierung/Login

Bei der Registrierung wurde großer Wert auf Einfachheit gelegt. Der User soll sich schnell registrieren, ohne unnötig Daten zu seiner Person anzugeben. Diese können nach dem ersten Login angepasst und ergänzt werden.

Dabei wird dem User ein Passwort automatisch aus einem Pool generiert und anschließend via md5 verschlüsselt:

$pool = "qwertzupasdfghkyxcvbnm";
$pool .= "23456789"; 
$pool .= "WERTZUPLKJHGFDSAYXCVBNM";
    
srand ((double)microtime()*1000000);
    
for($index = 0; $index < 9; $index++)
{
    $pass_word .= substr($pool,(rand()%(strlen ($pool))), 1);
}
    
$pwd_md5    = md5($pass_word);

Profil

Im Profil kann der User alles zu seinen persönlichen Daten einstellen. Ausserdem gibt es eine Funktion, die es ihm erlaubt, ein eigenes Userbild hochzuladen. Dieses wird automatisch auf max. 200x300px (BxH) reduziert. Die maximale Bildgröße darf 100kb nicht überschreiten.

Stadtplan

Beim Stadtplan können Studenten, die in Weimar (zentrumsnah) wohnen, ihren Wohnort bestimmen. Ihnen wird daraufhin eine Liste von Personen zur Verfügung gestellt, die in ihrer Nähe wohnen - sortiert nach Entfernungen (<1km, <2km, <3km, usw). Nicht-Weimarer und andere können diese Funktion etwas eingeschränkt nutzen, indem sie auswählen, wo sie sonst wohnen (Weimarer Umland, Erfurt, Jena, Woanders).

Beim Klick auf die Karte öffnet sich mithilfe vom jQuery-Plugin Colorbox ein weiteres Fenster, mit dem Stadtplan in größerer Auflösung. Beim Klick auf den Wohnort, werden X- und Y-Koordinaten weiterverarbeitet und via PHP in die Datenbank geschrieben.

if(isset($_POST['x']) and isset($_POST['y']))
{
    $update = mysql_query("UPDATE `wohnort` SET `stadt`=1, `x`='$_POST[x]', `y`='$_POST[y]' WHERE `uid`='$uid'");
}