Hvis du har en DB 'teams', kan du lave en tabel som denne:
CREATE TABLE setups (
user char(20) NOT NULL DEFAULT '0' ,
choords char(100) NOT NULL DEFAULT '0' ,
UNIQUE KEY user (user)
);
Derudover skal du bruge et login system, som sætter en session med en variabel 'userName'. Led lidt på Eksperten, der er masser - og der ligger sikkert også en artikel eller to under PHP-artkler.
Nu kan du lave et dokument noget lignende dette:
<?php
// Tjek, om brugeren er logget ind her
$conn = mysql_connect("server", "username", "password") or die (mysql_error());
$db = mysql_select_db("teams", $conn);
if (isset($_POST["contxt"]) && $_POST["contxt"]=="savePlayerPositions") {
$sPlyrChoords = $_POST["plyrpos"];
$sql = "INSERT INTO `setups` (`user`, `choords`) VALUES ('".$_SESSION["userName"]."', '".$sPlyrChoords."')";
@mysql_query($sql);
if (mysql_errno()==1062) {
$sql = "UPDATE `setups` SET `choords` = '".$sPlyrChoords."' WHERE `user`='".$_SESSION["userName"]."' LIMIT 1";
mysql_query($sql) or die (mysql_error()."<br>".$sql);
}
} else {
$sql = "SELECT `choords` FROM `setups` WHERE `user`='".$_SESSION["userName"]."' LIMIT 1";
$res = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_assoc($res);
$sPlyrChoords = $row["choords"];
if ($sPlyrChoords=="") $sPlyrChoords = "0,0|60,0|120,0|180,0|240,0|300,0|360,0|420,0|480,0|540,0|600,0";
}
$aPos = explode("|", $sPlyrChoords);
$sPlayerPositions = "";
for ($i=0,$j=count($aPos); $i<$j; $i++) {
$aCss = explode(",", $aPos[$i]);
$sPlayerPositions .= "<div style='left:".($aCss[0])."px;top:".($aCss[1])."px' id='plyr_".($i+1)."' class='player'>".($i+1)."</div>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Set Players</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 0.85em verdana, sans-serif;
}
#playerCont {
position: relative;
width: 800px;
height: 400px;
background: green;
}
.player {
position: absolute;
width: 50px;
height: 38px;
padding-top: 12px;
background: yellow;
font: bold 20px arial, sans-serif;
text-align: center;
cursor: move;
}
</style>
<script type="text/javascript">
function dragDown(e) {
e = e ? e : window.event;
var oPlyr = e.target||e.srcElement;
aMax = [oCont.offsetWidth-oPlyr.offsetWidth, oCont.offsetHeight-oPlyr.offsetHeight];
oPlyr.setAttribute("clPoint", (e.clientX-oPlyr.offsetLeft)+","+(e.clientY-oPlyr.offsetTop));
oActPlyr = oPlyr;
}
function playerMove(e) {
if (!oActPlyr) return;
e = e ? e : window.event;
var aClPoint = oActPlyr.getAttribute("clPoint").split(",");
var css = oActPlyr.style;
var nX = e.clientX-aClPoint[0], nY = e.clientY-aClPoint[1];
css.left = (nX<0 ? 0 : nX>aMax[0] ? aMax[0] : nX) + "px";
css.top = (nY<0 ? 0 : nY>aMax[1] ? aMax[1] : nY) + "px";
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
function playerDisable() {
oActPlyr = null;
}
function saveResult(oF) {
var oPlyr, aPlyrs = oCont.getElementsByTagName("div");
var aPlyrPos = [];
for (var i=1; i<12; i++) { // tallet 5 rettes til 12, når der er 11 spillere
oPlyr = document.getElementById("plyr_" + i);
aPlyrPos.push(oPlyr.offsetLeft + "," + oPlyr.offsetTop);
}
oF.plyrpos.value = aPlyrPos.join("|");
return true;
}
var oCont = oPos = oActPlyr = aMax = null;
window.onload = function(){
oCont = document.getElementById("playerCont");
var aDiv = oCont.getElementsByTagName("div");
for (var i=0; i<11; i++) aDiv[i].onmousedown = dragDown;
document.onmousemove = playerMove;
document.onmouseup = playerDisable;
}
</script>
</head>
<body>
<div style="padding:50px">
<div id="playerCont">
<?php
print $sPlayerPositions;
?>
</div>
<form action="" method="post" onsubmit="return saveResult(this)">
<input type="hidden" name="contxt" value="savePlayerPositions">
<input type="hidden" name="plyrpos">
<button type="submit">Gem positioner</button>
</form>
</div>
</body>
</html>
- og alle andre kan se opstillingen med dokumentet her, hvis det kaldes med:
'
http://www.domain.dk/sti/til/showplayer.php?userName=OleBole'<?php
$db = mysql_connect("server", "username", "password") or die (mysql_error());
mysql_select_db("teams", $db);
$sql = "SELECT `choords` FROM `setups` WHERE `user`='".$_GET["userName"]."' LIMIT 1";
$res = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_assoc($res);
$aPos = explode("|", $row["choords"]);
$sPlayerPositions = "";
for ($i=0,$j=count($aPos); $i<$j; $i++) {
$aCss = explode(",", $aPos[$i]);
$sPlayerPositions .= "<div style='left:".($aCss[0])."px;top:".($aCss[1])."px' id='plyr_".($i+1)."' class='player'>".($i+1)."</div>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Show Players</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 0.85em verdana, sans-serif;
}
#playerCont {
position: relative;
width: 800px;
height: 400px;
background: green;
}
.player {
position: absolute;
width: 50px;
height: 38px;
padding-top: 12px;
background: yellow;
font: bold 20px arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div style="padding:50px">
<div id="playerCont">
<?php
print $sPlayerPositions;
?>
</div>
</div>
</body>
</html>