AJAX Adressbuch – Tutorial Teil 1

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>RE-Design - AJAX - Adressbuch</title>
  6. <link rel="stylesheet" href="adressbook.css" type="text/css" media="screen" />
  7. </head>
  8. <body>
  9. <div class="RED_Adrbook">
  10. <h1>Adressbuch Demo</h1>
  11. <noscript>
  12. <p>Ohne JavaScript ist hier nix los.</p>
  13. </noscript>
  14. <form id="RED_Book">
  15. <table>
  16. <tr>
  17. <th>ID:</th>
  18. <td><span></span></td>
  19. </tr>
  20. <tr>
  21. <th>Name:</th>
  22. <td><span></span></td>
  23. </tr>
  24. <tr>
  25. <th>Vorname:</th>
  26. <td><span></span></td>
  27. </tr>
  28. <tr>
  29. <th>Email:</th>
  30. <td><span></span></td>
  31. </tr>
  32. <tr>
  33. <th>Telefon:</th>
  34. <td><span></span></td>
  35. </tr>
  36. </table>
  37. <ul class="RED_Buttons">
  38. <li><a id="btn_prev">previous</a></li>
  39. <li><a id="btn_next">next</a></li>
  40. <li><a id="btn_edit">edit</a></li>
  41. <li><a id="btn_add">add</a></li>
  42. <li><a id="btn_remove">delete</a></li>
  43. </ul>
  44. </form>
  45. </div>
  46. </body>
  47. </html>

Wie ihr seht ist in diesem Quellcode keine besonderen Tricks enthalten. An Anfang lade ich noch das externe Design. Die gesamte Anwendung ist dann in eine <div>-Container gebettet und die einzelnen Ein- und Ausgabefelder sind in eine Tabelle integriert. Dort wo später die Ein- und Ausgabe erfolgen soll habe ich <span>-Tags gesetzt um später einfacher per JavaScript darauf zu zugreifen.

Die Button zur Steuerung dieser Anwendung habe ich dann unterhalb der Tabelle un eine Liste leget. Es sind einfache Links, die aber kein Ziel haben. Klar sie sollen ja auch nicht irgendwohin anderes gehen!

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body
  4. {
  5. margin:0 auto;
  6. padding:0;
  7. text-align:center;
  8. width:28em;
  9. }
  10. th, td
  11. {
  12. vertical-align:top;
  13. }

Als erstes lege ich in der CSS-Datei fest wie die gesamte Seite auszusehen hat. Dabei beschränke ich mich hier erstmal nur auf die Zentrierung des Inhaltes und die Definierung der Gesamtbreite. Weiterhin werden alle Zellen der Tabelle vertikal oben ausgerichtet.

  1. .RED_Adrbook
  2. {
  3. margin: 1em 0 0;
  4. padding:1em;
  5. background-color:#fc3;
  6. border:thin solid #960;
  7. text-align:left;
  8. font-family: Verdana, Arial, Helvetica, sans-serif;
  9. }
  10. .RED_Book table {
  11. width:28em;
  12. border-collapse:collapse;
  13. }
  14. .RED_Book th
  15. {
  16. text-align:left;
  17. width: 6em;
  18. }
  19. .RED_Book h1
  20. {
  21. font-size:1.0em;
  22. text-decoration:underline;
  23. }

Als nächstes definiere ich das Aussehen des eigentlichen Adressbuches. Hier wird die allgemeine Schriftart, Hintergrundfarbe etc. angegeben. Zusätzlich mache ich Angaben über die Breite der Tabellen und ihre Tabellenköpfe. Als letztes lege ich noch das Aussehen der Überschrift meiner Anwendung fest.

  1. .RED_Buttons
  2. {
  3. margin:1em 0 0;
  4. padding:0;
  5. }
  6. .RED_Buttons li
  7. {
  8. margin:0;
  9. padding:0;
  10. list-style-type:none;
  11. display:inline;
  12. }

Nun zur Button-Liste, auch hier verwende ich nur rudimentäre Formatierung. Alle Buttons sollen nebeneinander und nicht untereinander stehen. Am einfachsten geht das mit dem inline-Wert der display-Eigenschaft.

  1. #btn_prev,
  2. #btn_next,
  3. #btn_edit,
  4. #btn_add,
  5. #btn_remove,
  6. #btn_save,
  7. #btn_cancel
  8. {
  9. cursor:pointer;
  10. padding:.2em;
  11. background-color:#c63;
  12. color:#fff;
  13. text-decoration:none;
  14. border:thin outset;
  15. font-weight:normal;
  16. }
  17. #btn_prev:hover,
  18. #btn_next:hover,
  19. #btn_edit:hover,
  20. #btn_add:hover,
  21. #btn_remove:hover,
  22. #btn_save:hover,
  23. #btn_cancel:hover
  24. {
  25. background-color:#804000;
  26. }
  27. #btn_prev:active,
  28. #btn_next:active,
  29. #btn_edit:active,
  30. #btn_add:active,
  31. #btn_remove:active,
  32. #btn_save:active,
  33. #btn_cancel:active
  34. {
  35. border:thin inset;
  36. }

Zum Schluss nach das Aussehen der eigentlichen Buttons. Da es ja offiziell Links sind, wird ihre Darstellung komplett geändert. Zusätzlich bekommen sie noch eine hover– und einen active-Effekt, um das Feeling einer Interaktion weiter zu unterstützen.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mitarbeiter>
  3. <person id="1">
  4. <nachname>Reinsdorf</nachname>
  5. <vorname>Enrico</vorname>
  6. <email>enrico@re-design.de</email>
  7. <telefon>0177 - 2822557</telefon>
  8. </person>
  9. <person id="2">
  10. <nachname>Doe</nachname>
  11. <vorname>John</vorname>
  12. <email>john@doe.com</email>
  13. <telefon>0123 - 1234567</telefon>
  14. </person>
  15. <person id="3">
  16. <nachname>Doe</nachname>
  17. <vorname>Jane</vorname>
  18. <email>jane@doe.de</email>
  19. <telefon>0123 - 1234567</telefon>
  20. </person>
  21. </mitarbeiter>

Als letztes möchte ich euch noch die XML-Datei zeigen, die ich zur ersten Verarbeitung in der Anwendung benutzt habe. Späte wird diese komplett dynamisch von PHP bzw. in ähnlicher Form von JavaScript, erzeugt. Und spielt in der finalen Version keine große Rolle mehr.

Zum Schluss noch die gerade besprochenen Dateien zum Download:

8 Kommentare

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.