Text im Bild:
Ziehe die Stecknadel per Drag and Drop an eine andere Position - sie ändert sich analog in einem anderen Fenster oder Computer. In diesem Tutorial erfolgt das Update alle 5 Sekunden.
Damit dies funktioniert, ist es nötig die Datenbank in einen mySQL-Server zu importieren und die Serveroptionen sowie die AJAX-URLs in der .capx-Datei anzupassen.
ÜBERSICHT
Dieses Tutorial wird dir zeigen, wie man eine einfache AJAX-basierte Demo-APP für mehrere gleichzeitige Nutzer anlegen kann, wie auch immer man das nennen mag. Es ist mehr eine Erklärung als ein Tutorial, jedoch finden sich alle für das Gelingen nötigen Dateien im Anhang des Tutorials.
Auf dem Bildschirm befindet sich eine Stecknadel, die jeder, der die selbe Webseite anschaut, bewegen kann. Jedes mal wenn die Stecknadel per Drag and Drop bewegt wird, wird die neue Position mittel AJAX an eine PHP-Seite übermittelt, welche anschließend den zugehörigen Datenbankeintrag aktualisiert.
Die Webseite startet alle 5 Sekunden eine AJAX-Anfrage an die PHP-Seite um die aktuelle Position der Stecknadel aus der Datenbank zu erhalten.
Diese Demo ist nicht dazu gedacht, von mehr als ein paar wenigen Leuten gleichzeitig benutzt zu werden, sonst wäre die Stecknadel überall und nirgendwo.
Abfolge:
1. Die .SQL-Datei mit dem source-Befehl in den mySQL-Server laden
2. Die .CAPX-Datei bearbeiten, damit sie die URL des Projekts enthält
3. In der .PHP-Datei die Zugangsdaten für die Datenbank einfügen
4. Das Projekt als HTML5-Webseite exportieren
5. Die HTML5-Webseite auf den Webserver hochladen
6. Die .PHP-Datei ins selbe Verzeichnis hochladen
7. Die Webseite auf/in 2 verschiedenen Computern, Browsern oder Tabs laden
8. Die Stecknadel bewegen; sie wird in den anderen Browserfenstern aller 5 Sekunden aktualisiert
0. (ich weiß, dass dies sehr langweilig ist, aber es ist ein sehr simples Tutorial)
CAPX INFORMATIONEN
Die .CAPX-Datei enthält
- 1 Spriteobjekt (Die Stecknadel)
- 1 TiledBackground-Objekt (Das Pinboard)
Wir legen 2 globale Variablen an, in denen wir die Position der Stecknadel speichern. Diese werden durch AJAX aktualisiert und die Stecknadel wird an die entsprechende Position verschoben.
Event 1: Aktualisiert die Stecknadelposition aus der Datenbank alle 5 Sekunden.
Event 2: Verarbeitet die erhaltenen Informationen aus Event 1 und platziert die Stecknadel an der korrekten Stelle. Es wird der "tokenat"-Ausdruck verwendet um die Infos in 2 Variablen aufzuteilen.
Event 3: Aktualisiert die Datenbank mit der neuen Position der Stecknadel nach vollendetem Drag and Drop.
Es ist notwendig, dass der 'YourURL'-Text in die URL geändert wird, unter der später die HTML5-Webseite (und PHP-Seite) zu finden sind, sonst findet er die PHP-Datei nicht.
mySQL INFORMATIONEN
Füge die SQL-Datei mit dem source-Befehl zu deiner mySQL-Datenbank hinzu. Dies geht über den Rahmen des Tutorials hinaus.
PHP INFORMATIONEN
Diese Datei muss ins selbe Verzeichnis wie die HTML5-Seite hochgeladen werden.
Ich hoffe das Tutorial hilft einigen Leuten dabei, grundlegendes AJAX-basiertes Aktualisieren in ihren Anwendungen einzubauen und ich hoffe in naher Zukunft einige bessere Tutorials einsenden zu können.
MWMDragon