JSF Erstellen einer einfachen Bankanwendung mit Kontoübersicht und Überweisung

Universität Bayreuth Lehrstuhl für Angewandte Informatik IV Datenbanken und Informationssysteme Prof. Dr.-Ing. Jablonski JSF Erstellen einer einfachen Bankanwendung mit Kontoübersicht und Überweisung Dipl. Inf. Michael Igler Dipl. Inf. Manuel Götz Lehrstuhl für Angewandte Informatik IV Lehrstuhl für Mathematik und ihre Didaktik Didaktik der Informatik Universität Bayreuth Universität Bayreuth Fakultät für Mathematik, Physik und Informatik Fakultät für Mathematik, Physik und Informatik D-95440 Bayreuth D-95440 Bayreuth

Was wir heute machen wollen Homebanking Anwendung mit JSF Frontend : Login /Error Seiten Seite mit Homebanking (Kontenübersicht, Überweisung) Backend : Java Bean die mit den JSF Seiten kommuniziert Klassen : Bank, Konto, Überweisung Error Login Banking LoginBean Bank Konto Überweisung 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 2

Projekt anlegen Wir legen wieder ein neues Projekt(Dynamic Web Project) an : File >> New >> Project >> Dynamic Web Project >> Genauer Ablauf : siehe Folien 9 13 von Veranstaltung 5. Ergebnis : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 3

JSP Seiten anlegen Wir benötigen ein Login-Seite und eine Seite für das Homebanking. Hierfür erstellen wir 3 neue JSP Seiten (siehe Folien 13/14 letztes mal) : login.jsp banking.jsp error.jsp Ergebnis : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 4

Inhalte anlegen Wir wollen nun die login.jsp Seite mit Inhalt füllen. Wir benötigen ein Logo, und 2 Felder, wo wir unsere Daten eingeben können. Das Logo müssen wir ähnlich wie die Jar-Files importieren und zwar in den Ordner WebContent : Somit wird es in das Verzeichnis vom Tomcat automatisch mit exportiert Und steht zum Zeitpunkt der Ausführung der Webanwendung zur Verfügung 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 5

Logo hinzufügen Rechtsklick auf den Ordner WebContent >> Import >> FileSystem : Und danach auf Next klicken. 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 6

Logo hinzufügen 1) Hier den Ordner auswählen 2) Ordner erscheint dann hier 3) Auf den Ordner klicken (NICHT auf das Kästchen für den Haken!!) 4) Dann erscheint hier der Inhalt des Ordners 5) Wir wählen nun das Bild auf und klicken auf Finish 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 7

Logo hinzufügen Das eingefügte Logo erscheint dann im WebContent Ordner : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 8

Logo einbauen Nun bauen wir das Logo in die login.jsp Seite ein. Dazu ziehen wir ein Graphic Image aus dem Panel durch Drag & Drop auf unsere login.jsp. Das Graphic Image befindet sich im Panel unter JSF HTML. 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 9

Logo einbauen Wenn wir das Graphic Image die Login Seite gezogen haben, können wir unter Properties den Namen des importierten Bildes unter Value eintragen. Mit Entertaste bestätigen, danach erscheint es hier 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 10

Login/Passwort Die Login und Passwortfelder legen wir wie beim letzten mal (siehe Folien 17-21) an : Wenn man auf den Rahmen um die Logindaten klickt kann man diesen unter Properties und Style verschönern (z.b. Randfarbe, Strichstärke) 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 11

Style Wenn wir auf Edit klicken öffnet sich ein Fenster wo man die hinzugefügten Elemente wie Tabellen, Text, etc. verschönern kann : z.b. Breite des Login Feldes ändern 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 12

Code / Java Beans Die gemachten Eingaben sollen wieder von einer Java Bean überprüft werden. Nun hat aber jedes Konto seine eigenen Kontonummer und seine eigene PIN. Die Konten gehören alle zu einer Bank, welche die einzelnen Konten in einer Hashtable verwaltet. Das LoginBean schaut nach der Eingabe der Nutzerdaten und Drücken des Login-Buttons in dem Bank-Objekt nach, ob die Login-Daten passen. LoginBean kommuniziert mit Bank Konto Donald Duck Konto Goofy Konto Mini Mouse 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 13

Klassen einfügen Was brauchen wir an Klassen? Bank Konto Überweisung LoginBean Diese Klassen legen wir wie bisher an : Rechtklick auf den Projekt-Ordner >> New >> Class Package und Name eintragen Das machen wir auch für alle anderen Klassen bis auf die LoginBean. Diese kommuniziert direkt mit den jsp-seiten und muss daher über die faces-config.xml angelegt werden! 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 14

Klassen einfügen Angelegte Java Klassen : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 15

Bean anlegen Über das Register ManagedBean in der faces-config.xml legen wir eine neue Java Bean Klasse an : Name ist LoginBean Package wie bei den anderen Klassen auch Scope ist session 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 16

Code Nun habe wir alle Klassen und können den Code eingeben Klasse Konto : Die Klasse Konto hat die Attribute : 1) Kontonummer 2) Inhaber 3) PIN 4) Kontostand Wir brauchen noch get-methoden um auf die Attribute zuzugreifen Den Kontostand kann man durch die Methoden Einzahlen(Betrag) und Abheben(Betrag) verändern 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 17

Code Klasse Ueberweisung : Die Klasse Ueberweisung hat die Attribute : 1) AnInhaber 2) Kontonummer 3) Betrag Getter - und setter - Methoden um auf die Attribute zuzugreifen 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 18

Code Klasse Bank : Die Klasse Bank hat die Attribute : 1) aktuelleskonto dient dazu, dass Konto des eingeloggten Benutzers zu haben 2) ueberweisung hält ein leeres Überweisungsformular vor 3) Kontoverwaltung enthält alle Konten der Bank In der Konstruktor-Methode(d.h. sobald wir eine neue Bank erzeugen) legen wir gleich ein paar Konten an und speichern diese in der Kontoverwaltung 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 19

Code Klasse Bank (Fortsetzung) : Die Methode Überweisung schaut nach was in der Klassenvariable uebweisung steht, und überweist den Betrag auf das entsprechende Konto. Die Methode logincorrect holt sich das Konto zur angegebenen Kontonummer aus der Kontoverwaltung und überprüft die PIN. Ist diese korrekt, wird true zurückgegeben, sonst false. 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 20

Code Bean loginbean : Attribute der Bean sind 1) Kontonummer 2) PIN 3) bank Sobald die Bean erzeugt wird, legen wir auch gleich eine neue Bank mit an (welche wiederum beim erzeugen gleich neue Konten anlegt). Die Methode loginaction ruft die Methode logincorrect in dem Bank-Objekt mit den eingegebenen Daten auf. Sind die Daten korrekt und wir bekommen ein true zurück so gibt die Methode loginaction den String LoginErfolgreich zurück. Diesen String wollen wir wieder als Navigation zur Seite mit den Kontodaten/Überweisung benutzen. 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 21

Homebanking Die Seite zum Homebanking soll wie folgt aussehen : 2 Panel Grids (Kontodaten, Überweisung) jeweils 3 Felder bei Kontodaten nur AusgabeText, bei Überweisung auch EingabeText Überweisen - Button 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 22

Homebanking Wie bereits auf der vorherigen Folie gesehen, wollen wir die Ausgaben(Kontodaten) und Eingaben(Überweisung) mit der LoginBean verknüpfen. Die geht über die Properties und die Value des jeweiligen Elementes : Die bei Inhaber gemachten Eingaben werden an das LoginBean übergeben. Eingabe erfolgt in Value unter Properties 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 23

Homebanking Der Überweisen-Button ruft die Methode Ueberweisen im Bank-Objekt auf : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 24

Navigation Nun verbinden wir wieder alle Seiten miteinander in der faces-config.xml : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 25

Bankanwendung testen Wir starten nun die Bankanwenung auf dem Tomcat-Server : links klicken auf login.jsp rechts klicken >> Run As >> Run on server Zugangsdaten eines beliebigen Kontos eingeben (siehe Bank.java) 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 26

Bankanwendung testen Mit den richtigen Zugangsdaten kommen wir auf die Homebanking-Seite : Die Kontodaten von Mini Mouse Wir tragen hier etwas ins Überweisungsformular ein Nachdem wir auf Überweisen geklickt haben verändern sich die Kontodaten 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 27

Bankanwendung testen Falls die Login-Daten mal nicht passen sollten : 27.01.2008 2007 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 28