Entwicklung einer Webapplikation mittels HTML, PHP, MySQL, jQuery, und Smarty-Templates am Beispiel einer Studienarbeitsverwaltung

Ausgangssituation Bisherige Verwaltung von Studienarbeiten:  Jeweils mindestens eine Datei für jede einzelne Studienarbeit – Lokal von jedem Assistent selbst verwaltet – Stellungnahme von Hand – Viel Arbeitsaufwand für den gesamten Vorgang

Anforderungen Übersichtstabelle aller Studienarbeiten Neue Studienarbeiten hinzufügen/editieren Bewertung zu einer Arbeit erstellen/editieren  Berechnung der Endnote aus den Teilnoten, abhängig vom Typ der Arbeit  Export als PDF  Generierung einer Stellungnahme auf Knopdruck Mail versenden

Entwicklung als Webapplikation Anschluss an die Institut-Webseite:  Verwendung des vorhandenen Loginsystems  Keine Distribution von Software nötig  Schnelle Zurechtfindung, da bekannte Oberfläche  Zugriff von überall (Internetzugang benötigt) Entwicklung einer Applikation:  Leicht um weitere Funktionalitäten erweiterbar  Verknüpfung bisher getrennter Daten ermöglicht die Vereinfachungen einiger Arbeitsschritte

HTML Auszeichnungssprache Verwendung von Tags für vordefinierte Elemente (Listen, Tabellen, Blockelemente, Links, Formulare) Werden von einem Browser interpretiert und für den Anwender erkenntlich dargestellt Einfache Darstellung graphischer Inhalte auch ohne Programmierkenntnisse

Code-Beispiel HTML (Ausschnitt) Erstelle oder bearbeite einen Eintrag Titel deutsch: Zugehöriger Assistent : {section name=assi loop=$assi_uebersicht} {$assi_uebersicht[assi].Name} {/section} Zurück zur Übersicht

Footer Header

PHP Weltweit am meisten verbreitete serverseitige Skriptsprache (circa 75%) Skripte werden zeilenweiße durchlaufen und interpretiert API stellt viele Funktionen zur Verfügung, z.B. Verbindung und Zugriff auf MySQL-Datenbank große Anzahl verfügbarer Frameworks

Code-Beispiel PHP function getArrayFromDB($query){ $result = mysql_query($query); if(!$result)throw new Exception(„Anfrage konnte nicht ausgeführt werden"); $array = array(); while($row = mysql_fetch_assoc($result)){ $array[]= $row; } if(count($array)==0){ throw new Exception("keine daten vorhanden"); }else if(count($array)==1){//falls nur ein Eintrag(zeile) zurückgegeben wird return $array[0]; }else{ return $array; }

MySQL relationales Datenbanksystem(Datenbank und Verwaltunssystem) Datenbank besteht aus Tabellen Spalten sind Attribute und Zeilen sind Einträge Verknüpfungen von Tabellen durch Fremdschlüssel Einträge werden eingefügt oder abgerufen mit SQL-Statements

Graphische Darstellung einer Tabelle Bildschirmausschnitte, Verwendete GUI: phpMyAdmin Tabelle: Studienarbeiten, Inhalt Tabelle: Mitarbeiter, Struktur

Beispiel SQL-Code Einfache Abfrage: „ SELECT Name,ID FROM mitarbeiter WHERE blocked=0 AND Abteilung IN('WiMi','Leitung') “ (Update/Insert) Abfrage im Verbund: „ SELECT g.*,m.Name as 'Assistent',m.ID as 'AssiID' from Studienarbeiten g,mitarbeiter m Where g.Assistent_ID=m.ID „

Smarty Template-Engine für PHP Trennt Darstellung von Anwendungslogik Vereinfachtes Einfügen dynamischer Inhalte in HTML-Dokumente Rudimentäre Logik vorhanden: Schleifen+Bedingungen Eigene Syntax, die auf Tags aufbaut

Beispiel Smarty-Code Zuweisung von Inhalt mittels PHP: $smarty->assign(„vorschlagStellungnahme“, erstelleStellungnahme($bewertung)); Zugriff innerhalb eines HTML-Templates: {foreach from=$vorschlagStellungnahme item=zeile} {$zeile} {/foreach}

Javascript und jQuery Skriptsprache, die vom Browser des Anwenders ausgeführt wird Manipulation und Operationen auf dem DOM- Baum einer HTML-Seite jQuery ist ein Framework für Javascript – Einfache AJAX-Funktionen – Viele einfach zu verwendende Selektoren – Trennung von Javascript-Code und HTML-Code

Javascript/jQuery-Code Beispiel $(document).ready( function() { $('#submitForm').submit(function(){ return checkEintragFormular(); }); function checkEintragFormular(){ var titel_de = ($("#submitForm").prop("titel_de")); if(titel_de.value===""){ alert("deutscher Titel darf nicht leer sein!"); titel_de.focus(); return false; } […] }

Beispielablauf Klick auf „editieren“ ->

[…] if(($action == "newEntry") || ($action == "edit")){ //bereite den Inhalt für die Dropdownlisten vor $smarty->assign("staende",getStaende()); $smarty->assign("typen",getTypen()); if($userid=getUserID($user)){ $smarty->assign("currentUserID",$userid); } $smarty->assign("assi_uebersicht", getAssis());//aus functions.php //Buttons fürs Anlegen einer neuen Studienarbeiten $smarty->assign("reset", getResetButton());//aus functions.php $smarty->assign("submit", getSubmitButton());//aus functions.php if($action==="edit"){ $id = $_GET["id"]; //ID der Studienarbeit $smarty->assign("id",$id); $daten = getAlleStudienarbeiten($id); $smarty->assign("daten",$daten); //Ist der aktuelle Anwender berechtigt Änderungen zu machen? if(($user == $daten["Assistent"]) || $isAdmin){ //Weise entsprechende Buttons fürs Editieren zu (und überschreibe Anlege-Buttons) $smarty->assign("reset", getResetButton());//aus functions.php $smarty->assign("submit", getChangeButton());//aus functions.php }else{ $smarty->assign("reset", ""); //keine Buttons $smarty->assign("submit", ""); } $smarty->display("eingabeformular.htm"); //rufe das neue Template auf […] Ausgeführter PHP-Code (Ausschnitt)

Aufgerufenes HTML-Template (vorheriges HTML-Code Beispiel) Erstelle oder bearbeite einen Eintrag Titel deutsch: Zugehöriger Assistent : {section name=assi loop=$assi_uebersicht} {$assi_uebersicht[assi].Name} {/section} Zurück zur Übersicht

Klick auf „Eintragen“ -> Javascript-Überprüfung Wenn die Arbeit vergeben wurde, dann muss Autor und Matrikelnummer eingetragen werden

var stand = $("#Stand").val(); //wenn der stand !offen ist, dann muss Autor und Matrikelnummer gesetzt sein if(stand!="offen"){ if($("#Autor").val()==""){ alert("Autor darf nicht leer sein, wenn Status nicht offen ist !"); $("#Autor").focus(); return false; } if($("#MatNr").val()==""){ alert("Matrikelnummer darf nicht leer sein, wenn Status nicht offen ist !"); $("#MatNr").focus(); return false; } if(!checkNumber($("#MatNr").val())){ alert("Matrikelnummer darf nur Zahlen enthalten !"); $("#MatNr").focus(); return false; } }else{ //Inputfelder leeren, falls was eingetragen wurde $("#Autor").val(""); $("#MatNr").val(""); }

function updateStudienarbeit($studienarbeit,$id){ $query = "Update gutencontrol_Studienarbeiten SET "; $counter=0; foreach($studienarbeit as $key=>$value){ $value=empty($value)?"null":"'$value'"; $query.="$key=$value"; if($counter!=count($studienarbeit)-1){ $query.=","; } $counter++; } $query.=" WHERE ID=$id"; if(!mysql_query($query))throw new Exception("Update konnte nicht durchgeführt werden, weil ".mysql_error()); } Trage die Änderungen in die Datenbank ein: $titel_de = strip_tags(mysql_real_escape_string($_POST["titel_de"])); $titel_en= strip_tags(mysql_real_escape_string($_POST["titel_en"])); $assi_id= strip_tags(mysql_real_escape_string($_POST["selectedAssi"])); $stand= strip_tags(mysql_real_escape_string($_POST["Stand"])); $typ= strip_tags(mysql_real_escape_string($_POST["Typ"])); $autor= isset($_POST["Autor"])?strip_tags(mysql_real_escape_string($_POST["Autor"])):Null; $matnr= isset($_POST["MatNr"])?strip_tags(mysql_real_escape_string($_POST["MatNr"])):Null; Empfange Formulardaten:

Schlusswort benutzerfreundliche Verwaltung von Studienarbeiten gelungen bereits um einige neue Funktionalitäten erweitert weitere in Entwicklung