Kleiner Formhandler in node.js

Das ganze läuft getestet nur unter node 0.41

Und wieder .. die node.js Doku empfiehlt sich

In meiner spärlichen Zeit habe ich etwas mit Formularverarbeitung in node.js rumgespielt .. mein Ziel war es Daten nach der Eingabe abzuspeichern und auf einer Folgeseite wieder auszugeben.

Beschränkt habe ich mich erst mal auf die Node Core Module ohne ein extra Modul (das es sicher gibt) einzubinden.

Die Eingabe erfolgt über ein normales HTML File (input.html) die Form ruft mit der Methode “Post” den Pfad “/formhandler” auf.

Die Eingabe wird dann verarbeitet und in einem .json File abgespeichert. (json.json)

Die Ausgabe erfolgt der Einfachheit halber mit einem AJAX Request auf das JSON File und dem Einsatz von JQUERY (output.html).

Hier könnt ihr alle Files runterladen.

Lesen von vorhandenen Files und Ausgabe

function readFile (req, res, filename) {
  var readFile = path.join(process.cwd(), filename); 
  fs.readFile(readFile, function (err, data) {	
    if(err) {  
      res.writeHead(500, {"Content-Type": "text/plain"});  
      res.end(err + "\n");    
      return;  
    }
    res.writeHead(200); 
    res.write(data, "binary");
    res.end();
  });
}
  • keine Magie 🙂 process.cwd() gibt den aktuellen Pfad auf dem Rechner zurück
  • Errors werden abgefangen
  • Ausgabe per res.write

Schreiben des Files

function writeFile (decoded) {	
  var writeFile = path.join(process.cwd(), SAVEFILE); 
  decoded = util.inspect(decoded);
  fs.writeFile(writeFile, decoded, function(err) {
    if(err) {
	   console.log(err);
	} else {
	   console.log("File gespeichert!");
	}
  });		
}
  • ich ermittle das aktuelle Verzeichnis adde den Dateinamen
  • Errorhandling
  • Konsolenausgabe bei Erfolg

Auslesen des Form Submits und der Rest

function readFormSubmit(req, res) {
  if (req.method  'POST') {
    var fullBody = '';
	req.on('data', function(chunks) {
	  fullBody += chunks.toString();
	});
	req.on('end', function() {
	  var decoded = querystring.parse(fullBody);
	  writeFile(decoded);
          readFile(req, res, "output.html");      
	});
  } else {
    res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
	res.end('Method not supported');
  }	
}
  • per Formsubmit wird /formhandler aufgerufen und daraufhin diese Funktion
  • node.js ist Non Blocking d.h. wenn nicht alle Elemente auf einmal geliefert werden können läuft eine Schleife die auf neue Elemente wartet und diese aufnimmt (req.on -> data)
  • die “chunks” werden zu einem Ganzen zusammengebaut
  • wenn alle da sind wird das File geschrieben
  • danach rufen wir output.html auf

Der komplette Quelltext:

HOST = null; // localhost
PORT = 8000;
SAVEFILE = "json.json";
var sys = require("sys"),  
    http = require("http"),  
    url = require("url"),  
    path = require("path"), 
    querystring = require("querystring"),
    util = require ("util"), 
    fs = require("fs");
function readFile (req, res, filename) {
  var readFile = path.join(process.cwd(), filename); 
  fs.readFile(readFile, function (err, data) {	
    if(err) {  
      res.writeHead(500, {"Content-Type": "text/plain"});  
      res.end(err + "\n");    
      return;  
    }
    res.writeHead(200); 
    res.write(data, "binary");
    res.end();
  });
}
function writeFile (decoded) {	
  var writeFile = path.join(process.cwd(), SAVEFILE); 
  decoded = util.inspect(decoded);
  fs.writeFile(writeFile, decoded, function(err) {
    if(err) {
	   console.log(err);
	} else {
	   console.log("File gespeichert!");
	}
  });		
}
function readFormSubmit(req, res) {
  if (req.method  'POST') {
    var fullBody = '';
	req.on('data', function(chunks) {
	  fullBody += chunks.toString();
	});
	req.on('end', function() {
	  var decoded = querystring.parse(fullBody);
	  writeFile(decoded);
      readFile(req, res, "output.html");      
	});
  } else {
    res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
	res.end('Method not supported');
  }	
}
function startServer() {
  http.createServer(function (req, res) {
    var uri = url.parse(req.url).pathname; //Dateiname
    var filename = path.join(process.cwd(), uri); //Pfad und Filename
    if (uri = '/formhandler') {
      readFormSubmit(req, res);         
    } else {
      path.exists(filename, function (exists) {	
      if(!exists) {  
	    res.writeHead(404, { "Content-Type": "text/plain"});
	    res.end("Not Found");
      } else {
        readFile(req, res, uri);
      }
    });
    }    
  }).listen(PORT, HOST);
  console.log('Server running');
} 
startServer();

Das Programm startet ihr mir -> node formhandler.js
Dann input.html aufrufen .. z.b. so -> http://localhost:8000/input.html und probieren.

Simpler Form Handler in Node.js als ZIP

Statischer Webserver in node.js

Das ganze hier läuft getestet nur unter node 0.41

Mein erstes Ziel in node.js war es einen simplen Webserver zu bauen der vorhandene Files an den Browser ausliefert und auf nicht vorhandene Files mit einem 404 .. oder was auch immer antwortet.

Dazu empfiehlt es sich die API von Node mal durchzusehen .. da ich ja einige Funktionen brauche die Client JS nicht vorsieht. Ich muss im Filesystem schauen ob die Datei da ist oder nicht .. und ich muss sie ausliefern.

Das Herz dieses kleinen Servers ist folgender Abschnitt:

var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname; 
  var filename = path.join(process.cwd(), uri);  
  path.exists(filename, function (exists) {	
    if(!exists) {  
	  res.writeHead(404, { "Content-Type": "text/plain"});
  	  res.end("Not Found");
    }
    fs.readFile(filename, function (err, data) {	
        if(err) {  
            res.writeHead(500, {"Content-Type": "text/plain"});  
            res.end(err + "\n");    
            return;  
        }
        res.writeHead(200); 
        res.write(data, "binary");
        res.end();
	});
  });
});
  • parsen der URL und abspeichern des Dateinamens (/beispiel.html)
  • process.cwd gibt das aktuelle directory zurück
  • und wir fügen den den Dateinamen an
  • dann schauen wir ob das File auch wirklich auf der Kiste liegt
  • wenn nicht dann Not Found 404
  • wenn ja lesen wir das File aus
  • sollte beim Auslesen noch was schief gehen (err) geben wir das aus
  • ansonsten liefern wir nen 200 an den Browser und geben das File aus

Hier der komplette Quelltext meines statischen Webservers in Node.js:

HOST = null; // localhost
PORT = 8000;
var sys = require("sys"),  
    http = require("http"),  
    url = require("url"),  
    path = require("path"),  
    fs = require("fs");
var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname; 
  var filename = path.join(process.cwd(), uri);  
  path.exists(filename, function (exists) {	
    if(!exists) {  
	  res.writeHead(404, { "Content-Type": "text/plain"});
  	  res.end("Not Found");
    }
    fs.readFile(filename, function (err, data) {	
        if(err) {  
            res.writeHead(500, {"Content-Type": "text/plain"});  
            res.end(err + "\n");    
            return;  
        }
        res.writeHead(200); 
        res.write(data, "binary");
        res.end();
	});
  });
});
listen = function (port, host) {
  server.listen(port, host);
  sys.puts("Server at http://" + (host || "127.0.0.1") + ":" + port.toString() + "/");
};
listen(Number(PORT), HOST);

Hallo Welt in node.js

Öffnet eine Textdatei und kopiert folgendes hinein ..

 http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hallo Welt'); 
}).listen(8000);
console.log('Server running at http://127.0.0.1:8000/');

Das dann unter hallowelt.js abspeichern.
Nun in der Konsole einfach

node hallowelt.js

aufrufen.

Wenn ihr alles richtig gemacht habt gibt die Konsole: Server running at http://127.0.0.1:8124/ aus und ihr solltet euer HalloWelt im Browser unter folgender URL erreichen: http://localhost:8000/

Er erscheint eine weiße Seite in der “Hallo Welt” steht.

Den Server stoppt ihr übrigens mit CONTROL-C wieder.

Node.js unter MacOS X

1. Xcode ist notwendig .. also die Entwicklungsumgebung für OSX .. dazu müsst ihr euch bei Apple registrieren (kostenlos) oder ihr schaut auf eurer OSX DVD ob ihr XCode findet.

2. GIT installieren -> gibts hier git ist ne Versionsverwaltung ähnlich wie SVN .. ihr brauchts zum auschecken der diversen Module

3. Ein Terminal Fenster öffnen und dann per git clone das Repo auschecken .. vorher natürlich ein Arbeitsverzeichnis erstellen und auf der Konsole dort hinein wechseln. Der ganze Befehl im Terminal ->

git clone https://github.com/joyent/node.git

4. Wechsel in das node Verzeichnis und dann folgendes .. nacheinander:

 ./configure
 make 
 make install

Damit baut und installiert ihr Node auf eurem Mac. Sollte das Probleme machen oder ein Fehler im Terminal erscheinen das make mit sudo aufrufen .. also sudo make install. Danach müsst ihr euer OSX Passwort eingeben.

Mit folgendem schaut ihr dann welche Version ihr euch installiert habt:

node --version

Node.js

node.js ist serverseitiges JavaScript

Quellen für node.js für mich und andere:

Alle Node Module -> Node.js Module
node.js -> nodejs.org
Node Buch -> Mastering Node
Der Start mit Node -> in 3 Minuten
Node by Example -> 5 Minuten?
Node unter MacOS X -> hier
express.js -> Framework für node
fab.js -> weiteres Framework
Node Package Manager -> npm
Test Framework für Node -> Vows
UNIT Tests in Node -> gibts auch
DOM in JS -> JSDom

Suchmaschinenoptimierung – 2 – Webdesign

Wichtig ist in erster Line ein ausführlicher, guter Text in dem die ausgewählen Keywords sinnvoll, im Kontext und nicht zu häufig eingesetzt werden.

Ein Bild/Grafik kann derzeit noch von keiner Suchmaschine durchsucht werden. Desshalb sollte man sich Bilder und Grafiken dort sparen wo man seinen Inhalt den Suchmaschinen nahebringen will.

Spiderfreundlich

Das ist kein Witz! Der Spider ist ein kleines Program das Webseiten für Suchmaschinen durchsucht. Je einfacher der Spider durch deine Website durchkommt, und umso einfacher er Content erfasssen kann, umso besser.

Man kann es dem Spider auch so einrichten das er sich richtig wohl fühlt. Dazu gehöhren in erster Line valides Markup und korrekte Auszeichnung von Textmerkmalen.
Wenn ihr nicht sicher seit checkt jede eurer Seiten beim W3C und entfernt jeden Fehler den der Validator ausspuckt.

Ein wichiger Textbereich sollte mit strong ausgezeichnet wird, man sollte Tags für Überschriften benutzten: h1 .. h4 und relevante Textstellen kann man gerne mal kurisv oder unterstrichen formatieren. Nur so kann der Spider wichtigen Inhalt von weniger wichtigem unterscheiden.

Macht aber nicht den Fehler nun alles fett oder kursiv auszuzeichnen … Suchmaschinen und deren Spider sind nicht doof und würden dies merken und eine höhere Bewertung des Inhalts wäre dahin.

Entfernt alle Formatierungen aus dem Quelltext. Wozu gibt es CSS? Macht davon Gebrauch … Formatangaben behindern nur den Spider bei seiner Arbeit und vergrößern unötig die Datei. Das gleiche gilt für Javascript usw. lagert alles was nicht direkt mit dem Inhalt zu tun hat in externe Dateien aus.

Flache Verzeichnisstrukturen

Verschachtelt euer Projekt nicht unötig in zig Unterordner. Bei kleinen Webseiten (bis 30 Seiten) würde ich persönlich alles auf eine Ebene legen. Auch sonst würde ich mich weigern mehr als 3 Hierachieebenen zu erstellen. Selbstverständlich sind natürlich sprechende Ordnernamen.

Sprechende Dateinamen

Nennt eure HTML Seiten nicht fsk_234_x2c.html wenn es darin um Apfelsaft geht sondern z.b. naturtrueber_apfelsaft.html. Alles klar? Weißt schon im Dateinamen klar und eindeutig auf den Inhalt euerer Website hin.

TITLE Tags

Mit einer der wichtigsten Tags für die Suchmaschinenoptimierung. Macht nicht den Fehler durch die komlette Website den gleichen TITLE Tag zu verwenden. Jede einzelne euerer Webseiten sollte Ihren eigenen Title Tag mit einer einzigartigen Beschreibung erhalten. Hier gilt ebenso .. weniger ist mehr. Schreibt keine Romane in den Title Tag sondern mit ein paar Stichworten den Inhalt der Website.

META Tags

sind zweitrangig. Pflegt sie aber trotzdem (der Vollständigkeit halber). Viele große Suchmaschinen ignorieren sie komplett und konzentrieren sich lieber auf den Inhalt .. also was zwischen body und /body steht.

Interne Links sind toll

Verlinkt euren Inhalt quer .. wichtige und relevante webseiteninterne Links (vieleicht die Keywords) mag der Spider und machen es ihm einfach weiteren Themenbezogenen Inhalt unter eurer Domain zu finden.

ALT Tags / TITLE Tags usw.

Helft dem Spider und pflegt mit stoischer Gewissheit alle beschreibenden Tags eures Projektes .. am besten mit sich nicht wiederholenden Beschreibungen. Beschreibt was ihr auf einem Bild sieht und pflegt den Alt Tag auf keinen Fall mit einem simplen “Foto”.

Erstellt Sitemaps

Eine Sitemapt ist eine vollständige hierarchisch strukturierte Darstellung aller Webseiten euren Projekts. Macht genau 2 Sitemaps. Eine richtige HTML Sitemap für eure Besucher und eine XML Sitemap für Suchmaschinen. Dies kann man auch über einen Sitemap Generator machen.

Reicht eure Sitemap bei allen Suchmaschinen ein für die ihr optimiert z.b. bei Google oder Yahoo und nehmt eine Info in eure robots.txt auf.

Sitemap: sitemap_url

Forget Flash

Stand Anfang 2009 ist noch keine Suchmaschine in der Lage Flash Inhalt zu lesen.
Mehr gibts hierzu nicht zu sagen.

Kompakt:

  • keine gleichen TITLE und META Tags verwenden, eine Description pro Dokument
  • auslagern sämtlicher Formatierungen in CSS Dateien da somit der Quelltext verkleinert wird und die relevanten Infos weiter oben im Dokument stehen
  • eliminieren von sämtlichen Dubletten
  • alle “alt” Tags pflegen
  • erstellen einer flachen Verzeichnisstruktur über maximal 3 Ebenen
  • eindeutige Dateinamen auch in Fremdsprachen
  • W3C Check für jede Seite
  • erstellen von Sitemaps
  • mach es dem Spider so einfach wie möglich

Suchmaschinenoptimierung – 1 – Einstieg

Suchmaschinenoptimierung ist ein permanenter Prozess der ständiger Verbesserung und Anpassung bedarf. Einmalige Maßnahmen führen aus meiner Sicht über lange Zeit zu nichts und können sogar kontraproduktiv (wenn neue Entwicklungen nicht berücksichtigt werden) sein.

Wie fängt man an – Keywords?

Für Newbies im Thema SEO würde empfehlen bei der Neuerstellung einer Website mit SEO zu beginnen. Wieso? Es ist einfacher Fehler gleich von Anfang an zu vermeiden als vorhandene Webseiten so hinzubiegen das sie Suchmaschinenfreundlich sind.

Zuallererst sollte man sich über das Thema seiner Website im klaren sein. Draufhin überlegt man sich die Keywords mit denen man in Suchmaschinen gefunden werden will. Am besten bittet man Freunde, Bekannte, potentiellen Kunden etc. die 10 Begriffe aufzuschreiben, die sie selbst benutzen würden, um nach der neuen Website zu suchen.

Im Idealfall überschneiden sich einige Begriffe und man kommt am Ende auf eine Liste von vielleicht 20 – 40 Keywords. Die Keywords die am häufigsten genannt wurden sind auch die, die höchstwahrscheinlich am häufigsten gesucht werden wenn es um den Inhalt der neuen Website geht.

Ich klau mir die Keywords vom Wettbewerber?

Klar .. kein Problem .. das sollte man auch tun. Nur sollte man nicht geschütze Begriffe oder Produkteigennamen des Wettbewerbers verwenden. Am einfachsten geht die Suche nach den Keywords des Wettbewerbers in dem man sich dessen INDEX Seite im Quelltext ansieht und die Keywords aus den META TAGs mopst.

Keywordgeneratoren

Einfach mal nach Keyword Generator suchen und sich die Links anschauen. Hier kann man sich dann Themenrelevante Keywords ausgeben lassen und sehen welche man vielleicht noch nicht beachtet hat.

Eine weitere Möglichkeit ist sich ein kostenloses Google Adwords Konto anzulegen. Unter Tools gibt es ein Keyword-Tool das jede Menge guter und relevanter Keywords ausspuckt.

Weniger ist mehr

Man sollte sich, wenn es viele starke Konkurrenten um die besten Plätze in Suchmaschinen gibt, lieber auf 2-4 Keywords beschränken und dann für diese optimieren. Je mehr Keywords man hat, nach denen man seine Seite optimieren will, desto aufwändiger wird dies und man arbeitet irgendwann nach dem Gieskannenprinzip.

Wenn möglich lokalisieren

Wenn sich euer Angebot nur auf einen geographisch begrenzten Bereich ersteckt dann sollte man dies konsequent nutzen. Wenn ihr einen Fahrradladen in Berlin betreibt bringen euch virtuelle Besucher aus Hamburg oder München nichts. Ihr solltet also lieber auf Fahrradladen Berlin optimieren. Die meisten User sind ebenfalls so clever zusätzlich zum Suchbegriff den Namen einer Stadt oder eines Landesteils einzugeben wenn sie lokal etwas suchen.

Kompakt:

  • Analyse: Wie viel Dokumente bietet Google für das Keyword? (Google Suche)
  • Analyse: Wie viele Suchanfragen gibt es für das Keyword? (Adwords)
  • Keyword Generatoren von Overture/Google/wordtracker.com
  • verschiedene Schreibweisen oder lokale Unterschiede berücksichtigen
  • gezielt Keywords vergeben anstatt Heilpraktiker -> Heilpraktiker Heidelberg
  • ein Dokument immer nur für die Keywords optimieren die auch im “natürlichen” Text vorkommen
  • Definition von 3-5 Keywords für jedes Dokument
  • die wichtigsten Keywords müssen ganz am Anfang stehen
  • zusammenhängende Keywords in einen Kontext/Beziehung bringen
  • Verhältnis Keywords/Restliche Wörter von 1/10 bis 1/7
  • Ermitteln der Keyworddichte: keyworddensity.com

jQuery – 3 – Bildergalerie mit XML und Thickbox

So ich bin aus dem Urlaub zurück und habe mich gleich dran gemacht meine Bilder ins Web zu stellen. Hierzu habe ich mich natürlich jQuery bedient.

Bildergalerie mit jQuery

Hier findet ihr das XML indem sämtliche Informationen gespeichert sind die nachher auf der Seite ausgegeben werden.

Der Code – als erstes holen wir uns mal das XML File:

$.ajax({
type: "GET",
url: "mali2008.xml",
dataType: "xml",
success: function(xml) {

Ich denke hierzu muss ich nichts weiter sagen.

Parsen von Namen und die Erklärung auf dem ersten Knoten

$(xml).find('galry').each(function(){
var name = $(this).find('name').text();
var expl = $(this).find('expl').text();
$('<div class="galryhead"></div>').html('<h1>'+name+'</h1>
<br /><p>'+expl+'</p><br />').appendTo('#content');

NAME und EXPL des XMLs werden ausgelesen .. am Ende mit HTML formatiert und in den Content DIV des body Bereichs gehängt.

Suchen nach den verschiedenen Fotosets im XML

$(xml).find('set').each(function(){
var id = $(this).attr('id');
var title = $(this).find('title').text();
var sub = $(this).find('sub').text();
$('<div class="galryset" id="set_'+id+'"></div>').html('<br />
<h2>'+title+'</h2><hr /><p>'+sub+'</p><br />')
.appendTo('#content');

Wichtig in diesem Teil ist das jedes Set im XML seine FESTE ID hat. Den DIV den wir am Ende mit Inhalt füllen bekommt exakt diese ID zugewiesen. Das ist wichtig da ja jedes SET n-Fotos haben kann und das Programm wissen muss bei welchen Set diese angezeigt werden sollen. Am Ende hängen wir auch das in den Content DIV.

Suchen nach den verschiedenen Fotosets im XML

$(this).find('photo').each(function(){							
var pic = $(this).find('pic').text();
var desc = $(this).find('desc').text();							
$('<div class="galrypic"><a href="pic/'+pic+'" title="'+desc+'" class="thickbox" rel="gallery">
<img src="thumb/'+pic+'" alt="'+desc+'" /></a><br /><span>'+ desc +'</span></div>')
.appendTo('#set_'+id);

Hier wird nun jedes Foto einzeln geparst und mit HTML formatiert. Wichtig ist der Schluss durch .appendTo(’#set_’+id); wird jedes Foto dem RICHTIGEN Set zugeordnet. Das Resultat wird dem SET+ID aus der vorangegangen Funktion zugewiesen.

Thickbox abschließen initialisieren

tb_init('#content a.thickbox, #content area.thickbox, #content input.thickbox');

Wenn wir das nicht abschließend notieren funktioniert die Thickbox im Script nicht. Dadurch das die Thickbox als erstes (im Head) geladen wird kann sie nicht wissen was alles im Body bereich steht .. da das Galeriescript ja danach läuft. Hier wird nun die Thickbox gestartet NACHDEM das Galeriescript gelaufen ist.

So nun schaut euch hier den Quelltext an und probiert aus.

Über dieses Blog ..

.. schreibt man ja in der Regel was.

Mein Name ist Matthias und ich komme aus Karlsruhe. 1997 habe ich meine erste Website gebaut und seit 1999 arbeite ich als Frontend Entwickler und SEO.

In meiner Freizeit lässt mich dieses Thema auch nicht los und ich betreibe Just For Fun Wikis, Foren, Blogs über meine Hobbies und Interessen.

Nebenberuflich erstelle ich auch noch Webseiten für Firmen, Vereine und Privatpersonen.

Warum dieses Blog?

Das schöne an HTML ist das es jeder schnell erlernen kann und somit auch schnell seine eigene Website basteln kann.

Das doofe an HTML ist das man es “falsch” schreiben kann. Also das man viele Fehler im Quelltext machen kann, der Browser es aber meistens trotzdem zu ner funktionierenden Website zusammenbaut.

Wenn man jemanden nicht auf seine Fehler hinweist kann er sich nicht verbessern und es lernen richtig zu machen.

Und hier möchte ich ansetzen .. ich möchte jedem der mein Blog lesen will quasi helfen zukünftig bessern Quelltext zu schreiben und Fehler, die schon tausende von Webdesignern vor ihm gemacht haben, zu vermeiden.

jQuery – 2 – XML verarbeiten

In diesem Beispiel möchte ich zeigen wie man mit jQuery eine externe XML Datei verarbeiten kann.

Mein Beispiel soll eine kleine Bildergallerie zum Ergebnis haben. Alle Daten für die Bilder (Pfad und weitere Infos) werden in einem leicht zu bearbeitendem XML File gespeichert. Die Verarbeitung erfolgt mit jQuery und die Darstellung natürlich in HTML.

Hier mein Beispiel zum ausprobieren: XML Bildergallerie mit jQuery

Hier findet ihr die dazugehörige XML Datei.

Los gehts

$(document).ready(function(){
 $.get("jquery_xml.xml",{},function(xml){
  $('photo',xml).each(function(i) {

Die erste Zeile sollte nun klar sein. Mit $(document).ready(function() {}); wird sichergestellt daß das Dokument soweit geladen ist das es ohne Fehler manipuliert werden kann.

Dann holen wir uns das XML mit der Methode get. In der dritten Zeile bauen wir eine kleine Schleife mit each. Für jedes Element im XML File mit dem Namen photo soll eine Funktion i ausgeführt werden.

Die Funktion – XML auslesen

var imgPlace = $(this).find("place").text();
var imgTitle = $(this).find("desc").text();
var imgAddi = $(this).find("addi").text();

Hier schaut ihr euch am besten das zugehörige XML File an. Ich lege 3 neue Variablen an und weise diesen die Elemente place, desc und addi aus dem XML zu.

find sucht nach allen Elementen die in der Klammer folgen.
text legt fest das ich als Rückgabewert einen String haben möchte.

Die Funktion – HTML bauen

var output = '<div style="float:left; border:1px solid #c0c0c0; margin:10px;">';	
output += '<img class="loading" src="loading.gif" />';
output += '<img src="'+ imgPlace + '" /><br />';
output += '<b>'+ imgTitle +'</b><br />';
output += '<i>'+ imgAddi +'</i><br />';	
output += '<u>Bild: '+ ++i +'</u><br />';					
output += '</div>';

Wir beginnen einen DIV Tag .. faul wie ich bin hab ich die CSS Angaben einfach direkt reingeschrieben. Natürlich sollte man die CSS Angaben in ein externes Stylesheet auslagern.

img class=“loading” src=“loading.gif” zeigt die kleine Preloadgrafik an die nach kurzer Zeit ausgeblendet wird. In den folgenden Zeilen werden die vorher angelegten Variablen nun im HTML verarbeitet. Mit *Bild: ‘+ ++i +’ lege ich eine fortlaufende Bildnummer fest dich bei jedem Durchlauf um 1 erhöhe. Am Ende wird der DIV Tag wieder geschlossen.

In den Quelltext hängen

$("#inhalt").append(output);
$('.loading').fadeOut(1400);

In der ersten Zeile wird der Inhalt der Variablen output dem DIV Element inhalt im BODY Tag angehängt. Dies geschieht für jeden Durchlauf.

In der zweiten Zeile wir das Element mit der Klasse loading nach 1400 Millisekunden ausgeblendet. Somit verschwindet die Loading Grafik.

Hier nochmal die verwendeten Files:

Quelltext als HTML
Hier der Quelltext als TXT
Und das XML