Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp09/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2009 - Gruppe 3 - Team 1

Layout mit CSS und jQuery, Autocomplete-Funktion und Veranstaltung-Formular

Inna Janz, Deniz Kruppe

Dynamische Effekte durch JavaScript-Libraries

Einführung

Wir stellen kurz die JavaScript-Frameworks Prototype, Script.aculo.us und jQuery vor. Grundsätzlich ist die Funktionalität der verschiedenen Frameworks relativ ähnlich, sprich: im Prinzip kann man benutzen, was man möchte. Wir werden deshalb in jedem Framework verschiedene Effekte vorstellen, da sie mehr oder weniger analog auch in einem der anderen darstellbar wären.

Sprachunterschiede bestehen jedoch in der Syntax und vor allem in der Dateigröße. Scriptaculous-Dateien sind oftmals um einiges größer als eine entsprechende Lösung mit JQuery. Es gibt noch weitere kleine Unterschiede (zB. überlädt Prototype/Scriptaculous Standardobjekte von JavaScript, JQuery nicht), insgesamt verfolgen JQuery und Scriptaculous jedoch einen ähnlichen Ansatz. Bei der Implementierung haben wir uns für das JQuery-Framework entschieden.

Zunächst müssen die verschiedenen Libraries eingebunden werden. Während man Prototype auch allein nutzen kann, baut Scriptaculous auf Prototype auf und erweitert dieses (unter anderem um viele hübsche Grafik-Effekte). Um Scriptaculous zu nutzen, müssen also beide Libraries im Header eines HTML- bzw. PHP-Dokuments eingebunden werden (analoge Einbindung gibt es bei JQuery):

<script type="text/javascript" src="lib/prototype/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous/scriptaculous.js"></script>

Das Document Object Model

Alle genannten Frameworks verwenden das Document Object Model (DOM), einen objektorientierten Ansatz der eine Schnittstelle für den Zugriff auf XML- und HTML-Dokumente spezifiziert. Die Spezifizierung besitzt verschiedene Verionen (Level), ab DOM Level 2 kann man DOM-Objekte zB. mittels der CSS-Formatierungssprache manipulieren, die später noch erwähnt wird. Zunächst werden DOM-Objekte in HTML-Containern gespeichert, die einen Identifier haben, mit dem sie nachher angesprochen werden können:

<div id="kurzer_text">Hallo Welt!</div>
<div id="text_in_block" style="padding:10px; border:2px solid #ccc; background:#ffaaff;">
    Hier steht ein Beispieltext. Ein paar Wörter,<br />
    die von einem hübschen Kasten umrahmt werden.			
</div>

Diese DOM-Objekte werden zunächst mit Hilfe des $-Selectors ausgewählt, wobei DOM-Objekte als Knoten in Bäumen oragnisiert sind, und somit auch Children oder Parent-Knoten des aktuellen Objektes selektiert werden können. Danach wird die Auswahl bearbeitet.

Beispiel für Textmanipulation in Prototype

Fügt einen Beispiel-Text in ein DOM-Objekt ein.

<a href="#" onclick="$('text_in_block').insert({top: 
'<font color=#00AA11>Dieser Text wurde vorne eingefügt.<br></font>'});">
    Hier klicken um Text vorne einzufügen.<br />
</a>
<br />
 
<a href="#" onclick="$('text_in_block').insert({bottom: 
'<font color=#FF0000><br>Dieser Text wurde hinten eingefügt.</font>'});">
    Hier klicken um Text anzuhängen.<br />
</a>

Ein paar graphische Effekte in script.aculo.us

(für eine allgemeine Übersicht siehe hier)

Erstellt eine Textbox, die flüchtet, wenn man sie anklickt:

<style type="text/css">
    a#textbox { background:#1111ff; color:#afa; padding:5px; border:1px solid #555;
</style>
<div class="bewegbare_box">
    <a href="#" id="textbox" onclick="new Effect.Move(this, { x: 100, y: -60 }); 
    return false;">
        Klick mich!
    </a>
</div>

Beispiele für jQuery

Aufbau der HTML Seite

<html>
  <head>
    <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript">
      // Hier kommt dein Code rein
    </script>
  </head>
  <body>
      // Hier kommt dein Div-Container rein
  </body>
 </html>

Für folgende jQuery UI Beispiele muss dies im head-Bereich zusätzlich eingebunden werden:

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.autocomplete.js"></script>

Beispielcode: Datepicker zeigt einen Kalender mit dem aktuellen Datum

$(document).ready(function(){    
    $("#datepicker").datepicker();
});
 
<div type="text" id="datepicker"></div>

weitere Beispiele und Tutorials unter: http://docs.jquery.com, http://visualjquery.com, http://jqueryui.com

Layout und CSS

Layout durch das Box-Modell

Zuerst wird das grobe Layout festgelegt, das nacher noch durch das spezielle Design verfeinert wird. Hier werden nun zunächst mal die einzelnen Strukturelemente in Div-Container abgelegt, die im vorherigen Abschnitt erwähnt wurden.

Das grobe Schema sieht nun so aus:


Die einzelnen Div-container

Es empfielt sich unter Umständen, eine (für den User nicht sichtbaren) Wrapper-Container zu erstellen, der dann die Einzlenen Container enthält. Die Container werden nun mit Hilfe von CSS-Stylesheets in ihren Eigenschaften (Farbe, Ausrichtung, Umrandung etc.) festgelegt. Dabei werden die Div-Container im Sinne des Box-Modells von CSS verwendet:


Das Box-Modell

CSS

Die Formatierungssprache Cascading Style Sheets legt eigenstädnige Dateien an, die im Prinzip lediglich Definitionen der eben erwähnten Boxen enthalten. Boxen werden entweder über einen eindeutigen Identifier angesprochen (in der CSS-Datei dann #name{eigenschaften}) oder über einen Klassennamen (es dürfen mehrere Klassenobjekte existieren, in der CSS-Datei dann .klassenname{eigenschaften}).

So würde beispielsweise ein "Footer"-Container im HTML-Code aussehen..

<div id="footer">
Hier Steht der Footer-Text, der angezeigt werden soll.
</div>

..der nun in der "main.css" definiert wird:

#footer {
	width: 100%;
	border-top: 1px solid;
       	padding-right: 6px;
	background-color: #c0c0c0;
        font-size: 100%;
        font-style:italic;
        font-family: Helvetica,Arial,sans-serif;
}

Außerdem wird hier die Schrift-Familie definiert (wenn mehrere angegeben werden, wird die erste, die auch installiert ist angezeigt).

Auch HTML-native Container können gestylt werden, zB. die Überschrift 2:

h2 {
    font-size:130%;
    color:#665874;
    margin:0;
    padding:4px;
    padding-bottom:16px;
}

Das Veranstaltungs-Formular

Eine Veranstaltung kann nur von Dozenten und Übungsleitern angelegt, bearbeitet und gelöscht werden.

Beim Anlegen einer neuen Veranstalung kann man zwischen Vorlesung und Seminar/Praktikum wählen, falls eine Vorlesung als Veranstaltungstyp gewählt wurde, wird das Formular um neue Attributfelder erweitert. Dies geschieht mit Hilfe der Methoden show() und hide() aus dem JQuery-Framework, welche das Ein- und Ausblenden von Teilstücken ermöglicht.

$('#veranstaltungstyp').change(function () {
   if($('#veranstaltungstyp').val() == 1) {
      $('#extra_form').show();
   }
   else {
      $('#extra_form').hide();
   }		  
}).change();

Smarty erlaubt eine automatische Wiedergabe des aktuellen Jahres und z.B. 4 der darauf folgenden Jahre in einer Selectbox, dieses verwenden wir für die Auswahl des Semesterjahres.

{html_select_date end_year="+4" display_days=false display_months=false}

Das Formular

In dem Veranstaltungs-Controller wird in der Methode new() abgefragt, ob es sich um eine Vorlesung oder ein Seminar handelt und dann der ensprechende Typ angelegt. Außerdem können bis zu 2 Übungsleiter und mehrere Tutoren für eine Veranstaltung angelegt werden, da diese jedoch nicht in dem Datenbankschema für eine Veranstaltung aufgeführt werden, müssen diese einzelnd behandelt werden.

Nachdem eine Veranstaltung erfolgreich eingetragen wurde, erscheint eine Liste mit allen Veranstaltungen, hier hat man zusäzlich die Auswahl nur die Vorlesunsliste (vorlesung_list.tpl) oder nur die Seminarliste (seminar_list.tpl) anzuschauen. Zu jedem Listeneintrag kann man sich Informationen, mit der Methode show() anzeigen lassen, dass Formular hierfür ist in der vorlesung_view.tpl bzw. seminar_view.tpl festgelegt, sowie einen Eintrag bearbeiten oder löschen. Beim Letzterem wird zunächst die Methode delrequest() im entsprechenden Model aufgerufen, welche eine Abfrage enthält, ob die Veranstaltung wirklich gelöscht werden soll. Falls dies der Fall ist, wird dann die Methode delete() aufgerufen.

Die Autocomplete-Funktion

Das Formular bietet die Möglichkeit Übungsleiter und Tutoren per Autocomplete anzugeben. Durch das Eingeben eines Buchstaben werden alle Vor- und Nachnamen von Studenten bzw. Angestellten aufgelistet, deren Nachname mit diesem Buchstaben beginnt.

Autocompletefunktion für Tutoren:

$('#tutor').autocomplete("autocomplete_tutor.php",          
    width: 146,                                              
    multiple: true,                                       
    matchContains: true,			             
});

Hier wird das Login des Tutors in ein verstecktes Feld übertragen

$("#tutor").result(function(event, data, formatted) {       
    if(data) {                                             
	$(document).find("input#tutor_login").val(data[1]); 
 
    }                                                       
});

PHP-Code dazu:

{$db = new DB($dsn);
$q = strtolower($_GET["q"]);
 
$sql = "SELECT a.Login AS Login,
               b.Vorname AS Vorname,
               b.Nachname AS Nachname 
        FROM Studenten AS a, Personen AS b
        WHERE a.Login = b.Login AND b.Nachname LIKE ?";
 
$result = mysql_query($sql);
while($res=mysql_fetch_row($result)) {
   echo $res[1]." ".$res[2]."|".$res[0]."\n";
}

Diese Tutoren bzw Übungsleiter werden anschließend aus der Datenbank geholt und in die Vorlesungs- bzw. Seminarview eingebunden:

<tr>
   <td><strong>Tutoren:</strong></td>
   <td>
       {foreach from=$tutoren item=tutor}
          {$tutor.Vorname} {$tutor.Nachname}<br />
       {/foreach}
   </td>
</tr>
 
<tr>
   <td><strong>&Uuml;bungsleiter_1:</strong></td>			  
   <td>{$leiter[0].Vorname} {$leiter[0].Nachname}</td>
</tr>
<tr>
   <td><strong>&Uuml;bungsleiter_2:</strong></td>			  
   <td>{$leiter[1].Vorname} {$leiter[1].Nachname}</td>
</tr>


Page last modified on September 07, 2009, at 08:45 AM