osdata.org - Webentwicklung und mehr

osdata.org --> TechTalk --> AXAJ Part 3

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP
Part III - PHP und CSS

Unser XMLHttp-Objekt hat eben eine Datei namens db.php geöffnet. Auch hier werfen wir noch einen kurzen Blick drauf, auch wenn es sich eigentlich gar nicht lohnt:

Oben stehen die Verbindungsparameter zur Datenbank. Danach werden die übergebenen Variablen empfangen und der entsprechende Datensatz wird upgedatet. Dieses Beispiel setzt natürlich vorraus, dass ein Datensatz mit der Element-Id schon vorhanden ist.
Hier ist ein kleines SQL-Script zur Erstellung der Tabelle:

Interessanter ist sicherlich unsere Stylesheet-Datei, welche ja, wie bereits erwähnt, eigentlich eine PHP-Datei ist:

header("Content-Type: text/css");

$host = 'localhost';
$user = 'db_user';
$password = 'db_password';
$database = 'osdata_tut';

//Verbindung zu mySQL aufbauen
//Prüfungen sind der Übersicht wegen in diesem Beispiel weggelassen worden.
$db = mysql_connect($host, $user, $password);
$mydb = mysql_select_db($database, $db);
$sql = "SELECT * FROM position";

$rs = mysql_query($sql);
while ($row= mysql_fetch_array($rs, MYSQL_ASSOC)) {
		echo '#'.$row['elemID'].'{position:absolute;';
		echo 'left:'.$row['elem_x'].'px; top:'.$row['elem_y'].'px;}'."\r\r";
}	
mysql_close($db);

body{
	font-family:Tahoma, Arial, courier, sans-serif; 
	font-size: 10pt; 
	background-color: #B1B1B1;
}

#container{
	width: 100%;
	margin:0px auto;
	text-align:left;
	height:100%;
}

#headerContainer{
	background-color:#FFE4C4;
	width: 95%;
	height: 50px;
	text-align:right;
	
	border-top:1px solid #669999;
	border-bottom:3px solid #2F4F4F;
	border-right:3px solid #2F4F4F;
	border-left:1px solid #669999;
	-moz-border-radius:10px;
}

h1{
	color:#2F4F4F;
	margin-right:10px;
}

#menueContainer{
	background-color:#efefef;
	width: 100px;
	min-height:200px;
	float:left;
	line-height:18px;
	border-top:1px solid #669999;
	border-bottom:3px solid #2F4F4F;
	border-right:3px solid #2F4F4F;
	border-left:1px solid #669999;
	-moz-border-radius:10px;
}

.menue{
	margin-left:10px;
}

#submenueContainer{
	background-color: #ffffff;
	border-top:1px solid #669999;
	border-bottom:3px solid #2F4F4F;
	border-right:3px solid #2F4F4F;
	border-left:1px solid #669999;
	-moz-border-radius:10px;
	width: 25%;
	height: 20px;

}

.submenue{
	margin-left:10px;
	text-decoration:underline;
	font-weight:bold;
	color:blue;
	margin-height:10px;
}

#mainContainer{
}

.main{
	width:400px;
}

Diese Datei wird bei jedem Seiten-Refresh aufgerufen. Damit unsere Elemente auch bei einem erneuten Besuch der Seite wieder dort zu finden sind, wo wir sie abgelegt haben, werden die Style-Eigenschaften des Elements nun dynamisch aus der Datenbank zusammengebaut. Oben haben wir als erstes eine Header-Angabe, wo wir definieren, dass es sich bei dieser Datei um ein Stylesheet handelt. Danach kommen wieder unsere Verbindungsparameter (jaja, ich weiß, dass hätte man mit einer Include-Datei auch eleganter lösen können... ;-))
Wir fragen die komplette Tabelle ab, und bilden in einer While-Schleife unser Stylesheet-Element.

Geparst sieht das ganze dann so aus:

	#menueContainer{position:absolute;left:5px;top:87px;}
				
	#submenueContainer{position:absolute;left:116px;top:91px;}
					
	#mainContainer{position:absolute;left:219px;top:206px;}
					
	#headerContainer{position:absolute;left:3px;top:29px;}

Das war´s. Bleibt nur noch zu erwähnen, dass es sich bei dem Beispiel lediglich um eine technische Demo handelt, die selbstverständlich noch weiter verfeinert werden muss. An dieser Stelle werden sich 2 Benutzer die gesetzten Koordinaten immer wieder gegenseitig überschreiben, weil u.a. eine Funktion zur Usererkennung hier nicht berücksichtigt ist.

Kommentar schreiben ( Verbindung zur Datenbank nicht möglich
Access denied for user 'osdata_org'@'localhost' (using password: YES)

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP Part III - PHP und CSS

Frei positionierbare Elemente mit AJAX und PHP
Part III - PHP und CSS