PHP Denkanstoß klick-Bild->PHP-Funktion->Reload

te one

Lt. Commander
Registriert
Apr. 2009
Beiträge
1.252
Hallo,

ich habe eine Seite mit 4 Frames.
Im einen Frame ist eine "Weltkarte" (nenn ich jetzt mal so).
Folgendes soll passieren wenn man auf ein Bild (sind ganz viele kleine Grafiken) klickt:

-Ausführen einer PHP-Funktion (move() trägt die neuen Werte in die Datenbank ein)
-reload des kompletten Frames+eines anderen Frames (im anderen Frame werden Infos zum aktuellen Standort angegeben)

Wie löse ich das am elegantesten?

Noch so am Rande: Bin noch nicht so der größte Javascript-Checker ;)

Danke schonmal.
mfg
 
Am elegantesten wäre es erstmal die Frames zu entfernen ;)

Ansonsten: Wenn die Seite eh komplett neu geladen werden soll reicht es ja einfach das Bild als Link und die entsprechenden Werte per Get zu übertragen. Der browser schickt dann ja in dem Frame die Anfrage und gibt dort das Ergebnis wieder aus.

Aber wie du schon andeutest wäre das mit JS am super elegantesten.

ich kann dir da z.b. sehr das Framework jQuery empfehen.

Da würde das in etwa so aussehen:

Code:
function move(para1, para2) {
	$.ajax({
		url: "pfad/zu/php/script.php",
		data: {x: para1, y: para2},
		type: "get",
		success: function(data) {
			top.NAME_DES_FRAMES.reload();
			top.NAME_DIESES_FRAMES.realod();
		}
	});
}

jetzt müsstest du dann jedem bild den handler "oncklick" zuweisen. Z.b.

Code:
<img src="" oncklick="move(1,9)">

das führt dann dazu das ein request an den server geschickt wird und du dort in diesem beispiel folgende Variablen hast:

$_GET['x'] = 1
$_GET['y'] = 9

das kannst du dir ja beleibig anpassen.

top.NAME_EINES_FRAMES.reload() lädt den frame mit dem namen "NAME_EINES_FRAMES" neu.

jQuery gibts hier: http://jquery.com/

einfach als script einbinden und dann kannst du über die $-Notation auf alle funktionen zugreifen. Ist allerdings eine sehr umfangreiche bibliothek, ansonsten solltest du dir einmal das XMLHttpRequest Objekt und document.getElementById ansehen.

dazu muss man jetzt natürlich gucken in wie weit es sinn macht den Frame neuladen und ob man die veränderte anzeoge nicht auch mit JS erzeugen kann.

Alles was nach der Anfrage vom server zurück kommt steht später in der variablen data (die wird bei success: function(data) übergeben)
Das kann HTMl oder Text oder ein JSON Objekt sein.
 
Zuletzt bearbeitet:
Was haben denn alle gegen Frames.
Ist doch super. Dann kann man zB als User auch die Grenzen dazwischen verschieben usw.

Nur in der Programmierung ist es echt manchmal etwas nervig...
Wie sollte ich das am besten umbauen einfach divs und dort die files includen? (Hätte den Vorteil, dass die ganze Seite als eine komplett auftritt). Müsste dann also einfach die komplette Seite reloaden.
Oder mit object die dateien einfügen?

Wollte eigentlich wenn möglich komplett ohne fremde Frameworks auskommen.
Vielleicht gibt es ja eine gute Alternative zu den Frames womit es dann besser geht?

edit: Der User sollte die Variablen die mit dem Bild übergeben werden nicht ändern/sehen können (sonst könnte er sich teleportieren^^)
 
zu den frames, oberflächlich aber das ist mir als erstes eingefallen:
http://de.wikipedia.org/wiki/Frame_(HTML)#Nachteile

Zu den links:
Also ganz verhindern wirst du das leider nicht können, das der user den parameter sieht. Du kannst natürlich statt direkten koordinaten eine ID nehmen oder einen beliebigen string der dann vom Server ausgewertet wird.
z.b. statt move(1,9) dann move('blablubb') und der server weiß dann das blablubb = 1;9 ist.

das teleportieren könntest du umgehen wenn du vorher regeln festlegst nach denen sich der user bewegen kann.

z.b. (alles ausgedacht), ich bin auf Feld 3;3 dann kann ich nur auf 3;2, 3;4; 2;3 und 4;3 gehen.
Wenn man also einen ungültigen link anklickt gibts nen fehler.
Das ist aber ein grundsätzliches Problem was man in der Webentwicklung hat, da die gesamte Darstellung Clientseitig erfolgt. Der Server generiert ja ledeglich Text, der vom Browser als HTML interpretuert wird und entsprechend Formatiert.
Da jetzt aber auch keine feste Verbidnung zum Server besteht (obwohl WebSockets das können...) muss man anschließend alle daten die man ändern will wieder zum Server zurück senden. Zudem schickt der browser auf jeden fall ein HTTP request raus, das kann man recht einfach abfangen und auslesen, also selbst wenn du den link irgendwie geheimhalten könntest, verbergen was da hin und her geschickt wird kannst du nicht. Das musst du auf jedenfall Serverseitig regeln.

Aber weiter im Text, ich sagte doch bereits was du dir angucken musst wenn auf jQuery verzichten willst, nämlich das XMLHttpRequest Objekt ;)

Aber da ich gerade gut drauf bin hier ein kleines Script:

Code:
xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {
		antwort = xhr.responseText;
		// Jetzt alles machen, z.b. Frames laden
		// Besser wäre es aber noch die antwort des
		// Servers auszuwerten
	}
}

function move(linkid) {
	xhr.open("GET", "pfad/zu/script.php?id="+linkid, true);
	xhr.send();
}

habs jetzt nicht gestestet aber sollte stimmen, auch wenn es quick & dirty ist.

wenn du jetzt ein bild nach folgendem schema hast:
Code:
<img src="" onclick="move(5)">

wird ein asynchroner (also im hintergrund laufender)request an den server geschickt.

sobald dieser erfolgreich war wird die function die wir oben definiert haben ausgeführt. Denn dann ist der readyState = 4 und der Status Code des HTTP Requests ist 200 (alternativen sind z.b. 404 etc....)

in antwort steht dann alles was vom server zurückgeschickt wird.

im beispiel hast du jetzt die variable $_GET['id'] = 5 zur verfügung

Für alles weitere zum XMLHttpRequest würde ich mal google bemühen, wobei ich dennoch zu jQuery raten würde oder einem ähnlichen framework, bei 1~2 requests gehts noch die selber zu machen, aber jQuery erleichtert dir das bei mehreren enorm.

Und die XHR api ist wirklich verdammt kurz, dauert keine 10 minuten sich dort einzuarbeiten ;)

Edit:
du könntest natürlich auch zufällig erzeugte Parameter nutzen und dir diese auf dem Server in einer Session speichern, wobei man das prinzip dahinter auch schnell rauskriegen könnte und wieder schummeln....
das ist auch wirklich das nervige an dieser Web 2.0 kacke. Man muss jede Arbeit mindestens doppelt machen, da man JS einfach manipulieren kann, oder gar aus einem ganz anderen Programm eine Anfrage an den Server schicken.
 
Zuletzt bearbeitet:
Vielen Dank für die gute Einweisung.

Also ich denke ich löse das mit divs wobei ich als Inhalt der DIVs andere Seiten include.
Zum Teleportationsproblem:
Klickt der User lade ich die Seite neu und prüfe ganz am Anfang ob die Person überhaupt so laufen kann. Des Weiteren bekommt halt move() noch einen optionalen Parameter, damit man als Admin tatsächlich User teleportieren kann :)

Leider wird das ganze immer weiter verkompliziert... Überall muss man Dinge prüfen. Aber da beißt man als Webentwickler leider immer in den sauren Apfel.
 
Also habe es nun so gelöst, dass im Formular das abgesendet wird, die buchstabe l,r,o und u übergeben werden können.
Wird beispielsweiße lu übergeben, geht der User nach links unten (der kann immer nur ein Feld weiter).
Dadurch ist ein Schummeln garnicht erst möglich und eine Entfernungsprüfung (gegen Teleportation) entfällt.
 
Zurück
Oben