RE-Design – Enrico Reinsdorf

Archiv für die Kategorie „Adventskalender 2007“

In meinem Adventskalender habe ich ein kleines Tutorial über die Erstellung eines Adressbuch per AJAX geschrieben. Leider waren aber die Demodateien nicht direkt benutzbar. Ich habe sie nun korrigiert und stelle sie euch hiermit zur Verfügung.

• AJAX Adressbuch 1.1

Bugfix:

1. Ich habe eine SQL-Datei hinzugefügt, um die Datenbank schneller zu installieren. Jetzt muss nur noch in der include-Datei der Zugriff auf die Datenbank geregelt werden.
2. Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
3. Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
4. Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
5. Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
6. Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.

Nun ist es soweit, heute ist Weihnachten und das letzte Türchen hat sich geöffnet. Der letzte Teil meine Adressbuches steht noch aus und das möchte ich euch jetzt geben. Es ist der serverseitige Teil meine kleinen Weanwendung. Ich habe dazu eine mySQL-Datenbank angelegt und greife mit PHP auf den Datenbestand zu.

Diesen Beitrag weiterlesen »

Im dritten Teil meines Tutorials möchte ich euch zeigen wie ich per JavaScript eine Verbindung zum Server aufbaue und Daten zum Server schicke bzw. vom Server hole. Durch die Beschreibung in Teil 1 und Teil 2 meines Tutorials habe ich hoffentlich eine gute Basis geschaffen einen Schritt weiter zu gehen.

Diesen Beitrag weiterlesen »

Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.

Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Diesen Beitrag weiterlesen »

Nun möchte ich euch wieder einmal ein Tutorial schenken in dem ich zeigt wie man eine kleine Mini-Webanwendung erstellt. Da ich euch letztens schon mal eine kleine Slideshow mit HTML, CSS (Teil 1) und JavaScript (Teil 2) gezeigt habe, glaube ich dass dieses hier auch sehr interessant sein dürfte.

In diesem Tutorial möcht ich euch die Entwicklung, bzw. die wichtigsten Schritt zum Erstellen eines Web-Adressbuches zeigen. Dabei habe ich alles in 3 Teile aufgeteilt. Dass heißt heute zeige ich euch das Interface der Webanwendung, also die HTML-Datei und das dazugehörige Design. Morgen gibt es dann die clientseitige und übermorgen die serverseitige Programmierung.

Diesen Beitrag weiterlesen »

Schon seit längerem wusste ich das es den <button>-Tag gibt, aber erst jetzt habe ich seine Vielseitigkeit erkannt und schätzen gelernt.

Diesen Tag gibt es schon seit der HTML 4.0 Version. Bis dahin konnten die Designer immer nur über den <input>-Tag mit den type-Attribut Buttons erzeugen. Zulässige Werte um einen Button zu erzeugen sind submit, reset und image, Erst ab der 4er Version von HTML bezeichnet man Buttons auch in ihrer Bezeichnung so was sie auch tatsächlich sind, nämlich Buttons. Und das Schöne daran ist, sie funktionieren zusätzlich auch noch in allen gängigen Browsern.

Diesen Beitrag weiterlesen »

Nachdem ich gestern im ersten Teil den Aufbau der HTML-Seite und das Design mit CSS beschrieben habe, folgt nun die Programmierung das Ganzen. Es ist gar nicht so schwer wie man Denken könnte. Nur ganze 4 Funktionen brauche ich für meine einfache Slideshow.

Diesen Beitrag weiterlesen »

Im nächsten Beispiel möchte ich zeigen wie man mit JavaScript wunderbar das DOM einer HTML-Datei ändern kann. Dazu habe ich mich für den Nachbau von S5 entschieden. Im ersten Teil werde ich den Aufbau der HTML- und CSS-Datei erklären, um dann morgen in die JavaScript-Programmierung einzusteigen.

Diesen Beitrag weiterlesen »

Hier nun ein weiterer Artikel zum Thema XML-Erzeugung mit Web-Programmiersprachen. Im Gegensatz zu gestern konzentriere ich mich heute auf das Erstellen mit JavaScript. Aber auch das ist nicht sehr schwierig.

Anders als bei PHP gibt es in JavaScript keine direkte DOM-Objekte, sondern alles muss über das document-Objekt laufen. Auch hier gibt es nur ein paar wichtige Methoden die man kennen sollte:

• document.createElement();
• document.createTextNode();
• element.appendChild();
• element.setAttribute();

Diesen Beitrag weiterlesen »

Das Verarbeiten von XML-Daten ist zwar prinzipiell sehr einfach, wenn man die Verarbeitung komplett mit dem DOM macht, aber trotzdem möchte ich hier und jetzt das Thema aufgreifen. In den späteren Artikeln meines Adventskalenders werde ich immer mal wieder serverseitiges Erzeugen und Verarbeiten von XML-Daten brauchen, weswegen hier die Basis gelegt werden soll.

Diesen Beitrag weiterlesen »