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

Transkript

1 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 Bayreuth D Bayreuth

2 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 2

3 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 : Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 3

4 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 : Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 4

5 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 5

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

7 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 7

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

9 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 9

10 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 10

11 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) Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 11

12 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 12

13 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 13

14 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! Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 14

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

16 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 16

17 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 17

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

19 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 19

20 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 20

21 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 21

22 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 22

23 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 23

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

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

26 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) Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 26

27 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 Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 27

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