Web-Technologien. Fachbereich AI, Web-Technologien 1

Transkript

1 Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Fachbereich AI, Web-Technologien 1

2 Inhalt 1. Einleitung 2. PHP (OOP, I/O, Datenbanken) 3. ASP.net: Web-Forms (kurz) 4. ASP.net: MVC 5. jquery 6. Ajax 7. Java (wenn Zeit vorhanden ist) Fachbereich AI, Web-Technologien 2

3 Lernziele Kennenlernen der verschiedenen Techniken für Webserver PHP JSP ASP: WebPages ASP: WebForms ASP: MVC Zusätzliche Techniken Ajax jquery HTML 5 und CSS3 JSON (JavaScript Object Notation) Fachbereich AI, Web-Technologien 3

4 Literatur Einstieg in PHP 5.5 und MySQL 5.6 Thomas Theis, Galileo Computing ISBN: PHP für Fortgeschrittene Harry Fuecks, dpunkt.verlag ISBN: X Professionelle Softwareentwicklung mit PHP 5 Sebastian Bergmann, dpunkt.verlag ISBN: Fachbereich AI, Web-Technologien 4

5 Literatur Learn Java für Web Development Vishal Layka, Apress-Verlag ISBN: Beginning ASP.net, WebPages with WebMatrix Mike Brind, Imar Spaanjaars ISBN: Building ASP.net, WebPages with MS WebMatrix Steve Lydford ISBN: , Apress-Verlag Fachbereich AI, Web-Technologien 5

6 Literatur Beginning ASP.net MVC 4 José Rolando Guay Paz, Apress-Verlag ISBN: Pro ASP.net MVC 5 Adam Freeman, Apress-Verlag ISBN: C. Strobel: Web-Technologien in ECommerce-Systemen, Oldenbourg, Schwerpunke: JSP, Enterprise JavaBeans und CORBA) Fachbereich AI, Web-Technologien 6

7 Links Barrierefreiheit: BITV-Beschreibung: BITV-Testkriterien: Anleitung zum BITV-Test: Datenbanken: (Bestandteil von xampp) Fachbereich AI, Web-Technologien 7

8 Links Server: (Bestandteil von xampp) PHP: JSP: en/jee-ue-01.pdf bis 05.pdf JQuery: ASP: Fachbereich AI, Web-Technologien 8

9 Vorteile von Webapplikationen mit einen Server: Bei den Anwendern muss keine Software installiert werden, ein einfacher Webbrowser reicht, PC, Laptop, PDA, Smartphone und Handy können eingesetzt werden Die Server-Anwendungen sind multiuser- und netzwerkfähig (Intranet und Internet). Die Integration mit vorhandenen Datenbanken, Textdateien etc. ist so einfach. Realisierung von Verteilung, Transaktionsmanagement, Sicherheit, Skalierung, Load Balancing, Ausfallsicherheit, Failover. Anwendungen auf einem zentralen Application Server sind leichter wartbar. Webanwendungen werden typischerweise in drei Schichten realisiert (3-Tier): Fachbereich AI, Web-Technologien 9

10 Die drei Schichten einer Webanwendungen Präsentationsschicht (Webbrowser) Applikationslogik (Businesslogik) Datenbankschicht Fachbereich AI, Web-Technologien 10

11 Aktuelle Webtechnologien Perl Einfach zu verstehen (Perl, DBMS) PHP (prozedural) Einfach zu verstehen (PHP, DBMS) PHP (OOP) Sinnvolle Alternative Fachbereich AI, Web-Technologien 11

12 Aktuelle Webtechnologien Java EE Zusammenführung verschiedener Techniken Java Server Pages Benutzt JSP-Views, Java, Tomcat, DBMS Java Server Pages Compiler erstellt Java-Quellcode. Dann wird dieser übersetzt in Java-Bytecode. Laut Oracle: deprecated. Java Server Faces Benutzt Facelet, JSF-Framework, Java, Tomcat, DBMS Komponenten Facelet-Technik Ersetzt die Java-Server-Pages für die Definition der Views. Fachbereich AI, Web-Technologien 12

13 Aktuelle Webtechnologien Microsoft: WebPages Alternative von Microsoft zu PHP Microsoft: ASP.net Webforms Microsoft Elemente kapseln HTML-Formulare Microsoft: ASP.net MVC Microsoft Elemente kapseln HTML-Formulare Mit Modell View Controller-Konzept Fachbereich AI, Web-Technologien 13

14 Beispiel mit PHP <html> <head> <title> Beispiel 01.php </title> </head> <body> <! > <h2> Erste PHP-Datei </h2> <?php $nr=12; echo "Hier ist meine erste PHP-Datei <br />" ; echo 'Nummer: '. $nr ;?> </body> </html> Fachbereich AI, Web-Technologien 14

15 Beispiel mit PHP <html> <head> <title> Beispiel 02.php </title> </head> <body> <! > <h2> Zweite PHP-Datei </h2> <?php $nr=12;?> Hier ist meine zweite PHP-Datei <br /> Nummer: <?php $nr?>?> </body> </html> Fachbereich AI, Web-Technologien 15

16 Beispiel mit PHP Fachbereich AI, Web-Technologien 16

17 Formular-Beispiel mit PHP <html> <head> <title>1. Beispiel Formulare mit PHP</title> </head> <body> <h2>1. Beispiel Formulare mit PHP</h2> <?php echo '<form method="get" action="bsp03.php"> '; echo '<p>eingabe:'; echo ' <input type="text" name="eingabe"> '; echo '</p>'; echo '<p><input type="submit" value=\" Submit"> '; echo '<input type="reset" value="loeschen">'; echo '</p>'; echo '</form> ';?> </body> </html> Fachbereich AI, Web-Technologien 17

18 2. Formular-Beispiel mit PHP <?php echo '<form method="get" action="bsp04.php"> '; if ( isset($_get['eingabe']) ){ // Ist gesetzt? $eingabe = $_GET['eingabe']; echo 'Eingabe: '. $eingabe ; } else { echo "<p>eingabe:"; echo ' <input type="text" name="eingabe"> '; echo "</p>"; echo '<p><input type="submit" value=" Submit"> '; echo '<input type="reset" value="cancel">'; echo '</p>'; echo '</form> '; }?> </body> </html> Fachbereich AI, Web-Technologien 18

19 <form method="get" action="bsp05.php"> <?php if ( isset($_get['eingabe']) ){ // Ist gesetzt? $eingabe = $_GET['eingabe']; echo 'Eingabe: '. $eingabe ; } else {?> <p>eingabe:" <input type="text" name="eingabe"> </p> <p><input type="submit" value=" Submit"> <input type="reset" value="cancel"> </p> </form> <?php }?> </body> </html> Fachbereich AI, Web-Technologien 19

20 OOP mit PHP <?php class mypoint { private $x=1; private $y=1; public function getx() { return $x; } public function gety() { return $y; } public void setx($value) { $x=$value; } public void sety($value) { $y=$value; } } // class mypoint $p1 = new mypoint; $p1->setx(100); echo ("p1(x): ". $p1->getx() ;?> Fachbereich AI, Web-Technologien 20

21 Java Server Pages Ist ähnlich wie PHP, nur anders Tag s: <% %> Compile PHP wird direkt interpretiert JSP-Seiten werden erst übersetzt (Servlets) Mächtigkeit PHP ist benutzt einfach gehalten Java hat sehr komplexe Strukturen Servlets <% out.println( new java.util.date() ); %> Ausdruck <p> <%= new java.util.date() %> </p> Zusätzliche Frameworks Struts, Java Server Faces, Spring, Grails Fachbereich AI, Web-Technologien 21

22 Java Server Pages Directives directive {attr="value"}* %> Direktiven erlauben Festlegungen, z.b. import-befehle. Beispiel: page language="java" %> declarations <%! declaration %> Deklaration von Variablen und Methoden. Es ist keine Ausgabe möglich. Beispiel: <%! int i=0;%> scriptlets <% scriptlet %> Beliebige Java-Befehle. Befehle der Form "System.out.println("Text");" oder "out.println("cheerio");" erzeugen eine Ausgabe in der HTML-Seite. Beispiel: <% i=i+1; %> Fachbereich AI, Web-Technologien 22

23 Java Server Pages expressions <%= expression %> Gültige Java-Ausdrücke. Das Ergebnis wird in die HTML-Seite eingefügt. Beispiel: <%= preis*0.16; %> comments <%-- jsp comment --%> Kommentare, sind in der HTML-Seite nicht sichtbar. Beispiel: <%-- Berechnung des Maximums in einer Schleife --%> Fachbereich AI, Web-Technologien 23

24 Beispiel mit Java Server Pages <html> <head> <title> 01. Beispiel mit JSP </title> </head> <body> <! > <h2> Erste PHP-Datei </h2> <% // beliebiger Java-Code out.println( "Hier ist meine erste JSP-Datei <br />" ); int nr=12; out.println( "Nummer: " + nr ); %> </body> </html> Fachbereich AI, Web-Technologien 24

25 2. Beispiel mit Java Server Pages <html><body> page import = "java.util.*" %> <b>parameters:</b><br> <% Enumeration parameterlist = request.getparameternames(); while( parameterlist.hasmoreelements() ) { String sname = parameterlist.nextelement().tostring(); String[] smultiple = request.getparametervalues( sname ); // Formular liste if( 1 >= smultiple.length ) out.println( sname + " = " + request.getparameter( sname ) + "<br>" ); else for( int i=0; i<smultiple.length; i++ ) out.println( sname + "[" + i + "] = " + smultiple[i] + "<br>" ); } %> </body></html> Fachbereich AI, Web-Technologien 25

26 3. Beispiel mit Java Server Pages <html><body> page import = "java.util.*" %> <b>parameters:</b><br> <% Enumeration parameterlist = request.getparameternames(); while( parameterlist.hasmoreelements() ) { String sname = parameterlist.nextelement().tostring(); String[] smultiple = request.getparametervalues( sname ); // Formular liste if( 1 >= smultiple.length ) out.println( sname + " = " + request.getparameter( sname ) + "<br>" ); else for( int i=0; i<smultiple.length; i++ ) out.println( sname + "[" + i + "] = " + smultiple[i] + "<br>" ); } %> </body></html> Fachbereich AI, Web-Technologien 26

27 page import = "java.util.*" %> <% final String s1 = "<tr bgcolor='#ebeeee'><td>"; final String s2 = "</td><td>"; final String s3 = "</td></tr>\n"; StringBuffer sb = new StringBuffer(); Enumeration parameterlist = request.getparameternames(); while( parameterlist.hasmoreelements() ) { String sname = parameterlist.nextelement().tostring(); String[] smultiple = request.getparametervalues( sname ); if( 1 >= smultiple.length ) sb.append( s1 + sname + s2 + request.getparameter( sname ) + s3 ); else for( int i=0; i<smultiple.length; i++ ) { sb.append( s1 + sname + "[" + i + "]" + s2 + smultiple[i] + s3 ); } } 4. Beispiel mit Java Server Pages Fachbereich AI, Web-Technologien 27

28 4. Beispiel mit Java Server Pages if( 0 < sb.length() ) sb.insert( 0, "<table border=0 cellspacing=3 cellpadding=3>\n" + "<tr bgcolor='#ebeeee'><th colspan='2'>" + "<big>erhaltene Parameter</big></th></tr>\n" ).append( "</table>\n" ); %> <html> <body>  Fachbereich AI, Web-Technologien 28

29 4. Beispiel mit Java Server Pages <form action="bsp_jsp_03.jsp?urlparm=seeurl#scroll" method="post"> <input type="hidden" name="hidden" value="hid"> <table border=0 cellspacing=3 cellpadding=3> <tr bgcolor='#ebeeee'><th colspan='2'> <big>formular</big><br> Bitte Eingaben ändern und Submit betätigen</th></tr> <tr bgcolor="#ebeeee"><td>selectdropdown</td> <td> <select name="selectdropdown" size=1> <option value="1">opt. 1</option> <option value="2" selected>opt. 2</option> <option value="3">opt. 3</option> <option value="4">opt. 4</option> </select> </td></tr> Fachbereich AI, Web-Technologien 29

30 4. Beispiel mit Java Server Pages <tr bgcolor="#ebeeee"><td>selectmultiple</td> <td> <select name="selectmultiple" size=3 multiple> <option value="1">opt. 1</option> <option value="2">opt. 2</option> <option value="3" selected>opt. 3</option> <option value="4" selected>opt. 4</option> </select> </td></tr> <tr bgcolor="#ebeeee"><td>textarea</td> <td> <textarea name="textarea" cols=20 rows=3>text...</textarea> </td></tr> <tr bgcolor="#ebeeee"><td>textfeld</td> <td> <input type="text" name="textfeld" value="text..." size=20 maxlength=50> </td></tr> Fachbereich AI, Web-Technologien 30

31 4. Beispiel mit Java Server Pages <tr bgcolor="#ebeeee"><td>passwort</td> <td> <input type="password" name="passwort" value="xx" size=20 maxlength=10> </td></tr> <tr bgcolor="#ebeeee"><td>checkboxen cb1...cb3</td> <td> <input type="checkbox" name="cb1"> <input type="checkbox" name="cb2" checked> <input type="checkbox" name="cb3"> </td></tr> <tr bgcolor="#ebeeee"><td>radiobuttons ra</td> <td> <input type="radio" name="ra" value="1"> <input type="radio" name="ra" value="2" checked> <input type="radio" name="ra" value="3"> </td></tr> Fachbereich AI, Web-Technologien 31

32 4. Beispiel mit Java Server Pages <tr bgcolor="#ebeeee"><td>submit</td> <td> <button type="submit" name="submit" value="submitimg"> <img src=" alt="submit"> </button> <input type="submit" name="submit" value="submit1"> <input type="submit" name="submit" value="submit2"> </td></tr> </table> </form> <a name="scroll"></a> <%= sb.tostring() %> </body> </html> Fachbereich AI, Web-Technologien 32

33 Microsoft: WebPages Erlaubt dynamische Webseiten Benutzt die IDE-Webmatrix Install-Software Install-Software Visual Studio: Express 2013 for Web Tag s } Speichern reicht zum Ausführen Fachbereich AI, Web-Technologien 33

34 WebPages mit WebMatrix, 1.Beispiel Fachbereich AI, Web-Technologien 34

42 WebPages mit WebMatrix, // Razor c# Code var currentdatetime = DateTime.Now; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>my First Page</title> </head> <body> <h1>my first page</h1> <p>dies ist Text</p> <p>das aktuelle Datum </body> </html> Fachbereich AI, Web-Technologien 42

44 WebPages mit WebMatrix, Fachbereich AI, Web-Technologien 44

45 WebPages mit WebMatrix, Übersicht Quelle: Fachbereich AI, Web-Technologien 45

46 Fachbereich AI, Web-Technologien 46

48 WebPages mit WebMatrix, // hier Razor-Code // Working with numbers var a = 4; var b = 5; var thesum = a + b; // Working with characters (strings) var technology = "ASP.NET"; var product ="Web Pages"; } // Working with objects var rightnow = DateTime.Now; Fachbereich AI, Web-Technologien 48

49 <style> body { font-family:verdana; margin-left:50px; margin-top:50px; } div { border: 1px solid black; width:50%; margin:1.2em; padding:1em; } span.bright { color:red; } </style> WebPages mit WebMatrix, 2.Beispiel Fachbereich AI, Web-Technologien 49

50 </head> <body> WebPages mit WebMatrix, 2.Beispiel <h1>testing Razor Syntax</h1> <div> <p>the value of <em>a</em> <p>the value of <em>b</em> <p>the sum of <em>a</em> and <em>b</em> is <p>the product of <em>a</em> and <em>b</em> is </div> <div> <p>the technology and the product <p>together they are <span + " " + product)</span></p> </div> <div> <p>the current date and time <p>the URL of the current page is<br/><br/><code>@request.url</code></p> </div> </body> </html> Fachbereich AI, Web-Technologien 50

52 @{ WebPages mit WebMatrix, 3.Beispiel var message = "Dies ist die Nachricht, die Sie beim ersten Anklicken erhalten."; if(ispost) message = "Dies ist die Nachricht, beim nächsten Anklicken."; } <body> <h1>3. Web Page</h1> <form method="post"> <div> <p>@message</p> <p><input type="submit" value="submit" /></p> </div> </form> </body> </html> Fachbereich AI, Web-Technologien 52

53 Microsoft: WebPages Zusammenfassung: Tag s } C#-Code mit.net Framework Sehr umfangreiche Framework Einfache Anbindung an Datenbanken C#-Code kann auch in HTML-Code eingetragen werden Verwendet die originalen HTML-Formulare Mit WebMatrix steht ein einfaches Tool zur Verfügung Einfach strukturiert Kein vorgefertigtes MVC vorhanden Fachbereich AI, Web-Technologien 53

54 Microsoft: WebForms Erlaubt dynamische Webseiten Dateierweiterung:.apsx Kapselt die HTML-Formulare Statischer Text: <asp:label> Eingabefeld: <asp:textbox> Listenauswahl: <asp:dropdownlist> Auswahlfeld: <asp:checkbox> Einfache Schaltfläche: <asp:button> Radiobutton: <asp:radiobutton> Hyperlink: <asp:hyperlink> Erlaubt neue und bessere UI-Elemente Trennung HTML- und C#-Code Erlaubt Master-Pages (Vererbung) Fachbereich AI, Web-Technologien 54

55 Microsoft: WebForms Eingebauter WYSIWYG-Editor Tasten: Taste F5: starten Shift-F5: stoppen Strg+F5: aktuelle Seite starten Links: Fachbereich AI, Web-Technologien 55

56 WebForms: Toolbox Fachbereich AI, Web-Technologien 56

58 Microsoft WebForms: neues Projekt Fachbereich AI, Web-Technologien 58

59 Microsoft WebForms: neues Projekt Fachbereich AI, Web-Technologien 59

60 Microsoft WebForms: default.aspx Fachbereich AI, Web-Technologien 60

61 Page Title="Willkommen" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="bsp1._Default" %> <asp:content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <h1><%: Title %>.</h1> <h2>2. Überschrift</h2> <p class="lead">hier steht Text</p> </asp:content> Fachbereich AI, Web-Technologien 61

63 Microsoft WebForms: Strg+Shift+A Fachbereich AI, Web-Technologien 63

64 2. WebForms-Seite: Strg+Shift+A Fachbereich AI, Web-Technologien 64

65 2. WebForms-Seite: Strg+Shift+A Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bsp1.WebForm1" %> <asp:content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <h1>meine zweite Seite mit Webforms</h1> <a runat="server" href="~/webform2">webform2</a> </asp:content> Fachbereich AI, Web-Technologien 65

66 Neue Seite (pure WebForms-Seite, ohne Master.Pages Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="bsp1.WebForm2" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <title></title> </head> <body> <h3>seite WebForm2</h3> </body> </html> Fachbereich AI, Web-Technologien 66

67 WebForms2 <form id="form1" runat="server"> <div> <asp:label ID="Label1" runat="server" Text="Label"> </asp:label><asp:textbox ID="TextBox1" runat="server"></asp:textbox> <asp:button ID="Button1" runat="server" Text="Button" /> </div> </form> Fachbereich AI, Web-Technologien 67

68 WebForms2 Fachbereich AI, Web-Technologien 68

70 WebForms2 Doppelklick auf dem Schalter erzeugt das Event: namespace bsp1 { public partial class WebForm2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } } protected void Button1_Click(object sender, EventArgs e) { } Label1.Text = "Hier der Text aus der Textbox: "+TextBox1.Text ; Fachbereich AI, Web-Technologien 70

72 WebForms2: Calender-UI mittels table Fachbereich AI, Web-Technologien 72

73 WebForms2: Die Logik ist schon vorhanden Fachbereich AI, Web-Technologien 73

74 protected void Calendar1_SelectionChanged(object sender, EventArgs e) { } Label2.Text = Calendar1.SelectedDate.ToLongDateString(); Fachbereich AI, Web-Technologien 74

75 <asp:label id="label1" runat="server" /> <asp:textbox id="txt1" runat="server" /> <asp:textbox id="txt1" Text="Hello World!" Font_Face="verdana" BackColor="#0000ff" ForeColor="white" TextMode="MultiLine" Height="50" runat="server" /> <asp:textbox id="txt1" runat="server" text="hello World!" ontextchanged="change" autopostback="true"/> <asp:radiobutton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/> <asp:radiobuttonlist id="radiolist1" runat="server"> <asp:listitem selected="true">item 1</asp:ListItem> <asp:listitem>item 2</asp:ListItem> <asp:listitem>item 3</asp:ListItem> </asp:radiobuttonlist> Fachbereich AI, Web-Technologien 75

76 <asp:checkbox id="check1" Text="Same as home phone" TextAlign="Right" AutoPostBack="True" OnCheckedChanged="Check" runat="server" /> <asp:checkboxlist id="check1" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="Check" runat="server"> <asp:listitem>item 1</asp:ListItem> <asp:listitem>item 2</asp:ListItem> <asp:listitem>item 3</asp:ListItem> <asp:listitem>item 4</asp:ListItem> <asp:listitem>item 5</asp:ListItem> <asp:listitem>item 6</asp:ListItem> </asp:checkboxlist> Fachbereich AI, Web-Technologien 76

77 <asp:table id="table1" BorderWidth="1" GridLines="Both" runat="server" /> <asp:table runat="server" CellPadding="5" GridLines="horizontal" HorizontalAlign="Center"> <asp:tablerow> <asp:tablecell>1</asp:tablecell> <asp:tablecell>2</asp:tablecell> </asp:tablerow> <asp:tablerow> <asp:tablecell>3</asp:tablecell> <asp:tablecell>4</asp:tablecell> </asp:tablerow> </asp:table> <asp:hyperlink ImageUrl="img_w6.gif" NavigateUrl=" Text="Visit W3Schools!" Target="_blank" runat="server" /> <asp:button id="b1" Text="Copy to Label" OnClick="submit" runat="server" /> Fachbereich AI, Web-Technologien 77