Michael Fretz - Interaction Designer » JavaScript

Using AJAX To Load Data From PHP Into Your Website

Michael Fretz — Wed, 21 Apr 2010 08:44:24 +0000

A few days ago I had to build a web-app for a mobile device. The problem was, that some external input device changed values in a database and I had to make this visible in my web-app.

I came across a good solution from the w3c school. The problem was that this only updated with a user input. Therefore I changed quite some part of their script and made it easy understandable. To keep the coding part as small and easy as possible, I will not access a database in my example. My PHP script only displays the PHP function date(“H:i:s”); which shows the current time. You could easy build what ever you want in the the PHP script but keep in mind that this code will be called often and could slow down your server if you have many users and a short refresh time and therefore to many requests to your server.

Whats do you need in order to see this example.
I created this example in three files.
- The HTML File
- The Javascript File
- The PHP File

The HTML File:
This File loads the Javascript File in order to access all the Javascript functions. In the tag we load the function startRefreshing() from the javascript File





Ajax Test



 
    
    	Placeholder which will be replaced by the PHP content

The Javascript File (test.js)
In the scripts I defined which PHP fill should be executed every time the Loop starts. The repeat time is also defined in this script as well as the id of the DIV tag which should be replaced by the data sent by the PHP file. Quite some part of this script are based from the w3c school but I got rid of many unnecessary stuff for my example.

// Config for the javascript part
 
var urlForPHP 			= "test.php";
var milsecondsTillRepeat 	= 1000;
var idForReplace		= "idForAJAXReplace";
 
function startRefreshing()
{
	setTimeout("startRefreshing()",milsecondsTillRepeat);
	reloadPHP();
}
 
/// the following code is based on http://www.w3schools.com/php/php_ajax_database.asp  but I shorted it quite some bit
var xmlhttp;
 
function reloadPHP()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Your Browser does not support HTTP Request");
		return;
	}
	var url=urlForPHP;
	url=url+"?random="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
 
function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
	document.getElementById(idForReplace).innerHTML=xmlhttp.responseText;
	}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

The PHP file (test.php)
This file gets called every 1000 ms (defined in the Javascript File). For the demo I only display the current server time. Of course you could display here data from the database or any other PHP script which you need to have repeat called by the website.


echo date("H:i:s");
?>

Download demo

St.Moritz TV

Michael Fretz — Thu, 04 Feb 2010 23:13:49 +0000

After being here in Los Angeles for about 7 months I think its time to show you some of the projects I worked on. The first project I want to show you is St Moritz TV.

What is this project?
The website www.StMoritzTV.ch is a Web TV station with short videos about St. Moritz and the Engadine. The main goal of the website is to inform tourists and locals about events, art, dinning and shopping in St Moritz and its surroundings.

What was the goal?
The current version is a Beta site. Its focus is to see what the needs of the users are and how we can build the final version and what we have to improve. Because this is a Beta site we are asking for any feedback about the site and would highly appreciate if as many of you can try it and give us a feedback. We want to find out how we can make it most enjoyable for its user.

But hey, let’s get geeky :)

What technology did I use?

Video player with Open Source Media Framework:

The player is built with the Adobes Open Source Media Framework. We had to add some functionality into the player as the version we used didn’t have all functions we needed by the time we developed it. For example we had to build in a video time calculator and a function to read the source for the videos from the XML. Furthermore I had to implement a function to allow jumping to a requested video. For this I used external interface in actionscript to send data into the player from the html page. In this way I do not have to reload the website again if a new video should be played. Of course the play-list is continuously loading the next video as soon as the current video finished playing.

Next Up
The “NextUp” area is build with flash and reads the same XML as the video player. Every time a new video starts to play the video player calls a Javascript function in the html site. This Javascript function send the current played video into the NextUp flash file where I update the view class. If one of the nodes will be pressed in the “Nextup”, it calls a Javascript function too and sends the requested video to the video player.

HTML, CSS and Javascript
I created, based on the delivered design by Almer/Blank, the HTML and CSS part of the website. Different Javascript functions are responsible for handling the requested videos and advertisement .

Web hosting
The current version of StMoritzTV is hosted byCubera Solutions GmbH. Hosting on a Swiss web hosting company helps us to keep ping time low and provides us with a reliable service.
Happy testing :)

User Centered Design – TouchPanel Applikation

Michael Fretz — Tue, 13 Jan 2009 09:57:36 +0000

Im Modul User Centered Design haben wir uns mit einer Applikation befasst, welche auf einem Touchscreen installiert ist.

Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.

Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.

Zu Beginn haben wir einen Paper-Prototyp entwickelt.

Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.

Prototyp Test

Printscreen der Touchscreen Applikation

Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com

Download Dokumentation :Dokumentation (PDF 2.7MB)

Download: Keynote Präsentation (ZIP 2MB)

Team: Christoph Brandin, Liliane Krauss, Michael Fretz

Web Interfaces – rum.Pirat

Michael Fretz — Thu, 29 May 2008 09:39:34 +0000

[See post to watch Flash video]

ZIEL
An der ZHdK mit einer Webapplikation eine Dienstleistung zu vereinfachen.

KONZEPT
Sinn und Ziel eines web-basierten Auftrages für eine verlängerte Raumbelegung ist es, das alte, (Gelbe-) Papierzettel-System an der ZHdK abzulösen. Der momentan vorhandene Zettel soll durch ein ähnlich aufgebautes Web-Formular ersetzt werden. Dies vor allem aus dem Grund, dass es oft zeitlich nicht möglich ist eine Raumverlängerung einzugeben. Auch der Weg um Raumverlängerungen zu beantragen kann gespart werden da die Räume ortsunabhängig eingegeben werden können.
Momentane Situation
Um eine Raumbelegungsanzeige ausfüllen zu können, muss sich ein Student im Hauptgebäude momentan ins Erdgeschoss begeben, um bis 17.00 Uhr ein solches Papierformular auszufüllen, was oft aus Zeitmangel ein Problem darstellt.
Da viele andere Dienste wie z. B. Bücherbestellungen auch bereits in eine digitale Form überführt wurden, erscheint es nur logisch, diese Dienstleistung ebenfalls zu digitalisieren. Die Vorteile für Nutzer währen vielfältig: es kann ein Raum bei Bedarf (auch ohne den Unterricht vor 17.00 Uhr zu verlassen) verlängert werden, und dies auch, wenn sich der Student nicht in demselben Gebäude befindet, in welchem er ein Zimmer verlängern möchte. Durch die eindeutige Identifikation mittels ITZ-Login kann exakt ermittelt werden, wer genau den Raum reserviert hat. Die für Raumreservationen zuständige Person muss sich nicht mit diversen “Zetteln“ herumschlagen, sondern erhält auf digitalem Weg eine geordnete Liste aller zur reservierenden Zimmer, welche ohne grossen Aufwand an weitere Personen wie z. B. Securitas weitergeleitet werden kann. Zudem wären Listen aller in ZHdK-Gebäuden reservierten Räume in digitaler (per Email versendbarer Form) bereits von Beginn des Prozesses an verfügbar.

Webseite für die Verlängerung der Räume mit geöffneter Hilfe.

FAZIT
Abschliessend könnte man sagen, dass wir mit unserem Projekt sehr zufrieden sind. Anfängliche Schwierigkeiten mit WordPress wurden relativ schnell behoben. Wir haben alle viel gelernt, wie man beispielsweise seine eigenen Ideen im Team besprechen und argumentieren kann. Technisch haben wir uns weiter entwickelt und WordPress als etwas grösseres als nur ein Blogsystem kennen gelernt.
Falls das Projekt weiter entwickelt werden darf, müssten wir noch ein paar Dinge anpassen. Zum einen würden wir das Raumerfassungsscript selber programmieren und nicht auf das TDO Mini Form zurück greifen. Dies hätte den Vorteil, dass wir die Daten in einer eigenen Tabelle in der Datenbank speichern können, welche besser auf unsere Bedürfnisse angepasst ist. Weiter würden wir eine Möglichkeit einbauen, um Raumreservationen nach Datum anzuzeigen. Eine Druckansicht für den Hausdienst wäre auch noch in Planung.

Webseite zum selber ausprobieren: rum.Pirat

rum.Pirat Dokumentation (PDF 2.3MB)

Screencast:

[See post to watch Flash video]

Web Interfaces / Information Architecture
Dozent: Dipl. Des. Stefano Vannotti
Studenten: Michael Fretz | Raphael Habbegger | Tobias Koller | Philippe Meier