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-Pages 4. ASP.net: Web-Forms 5. ASP.net: MVC 6. jquery 7. Ajax 8. Java (wenn Zeit vorhanden ist) Fachbereich AI, Web-Technologien 2

3 Literatur 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 3

4 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 4

5 Dateitypen in einem Projekt CSHTML Beinhaltet die cshtml-dateien mit der Razor-Technologie HTML / XHTML Beinhaltet statische Seiten CSS Beinhaltet CSS-Dateien Class Beinhaltet eigene c#-dateien (ohne HMTL-Code) Web.Config Beinhaltet die Projekt-Ini-Datei JScript Beinhaltet externe MS-Java-Skript XML Beinhaltet Projektbezogene XML-Dateien ASPX Beinhaltet weitere Zusatzdateien (php, jsp etc.) Fachbereich AI, Web-Technologien 5

6 Ordner im Projekt App_Code Beinhaltet eigene c#-dateien (ohne HMTL-Code) App_Data Beinhaltet Projektdaten (Datenbanken, Textdateien) Bin Beinhaltet die Binärdateien des Projektes und optional die von Drittanwendern Account Beinhaltet Sicherheitsdateien (Membership-Features) Content Beinhaltet Bilder, Filme und zusätzliche CSS-Dateien Scripts Beinhaltet die JScript-Dateien Shared Beinhaltet Layout-Dateien Root Hauptordner im Projekt, ist Root im Server Fachbereich AI, Web-Technologien 6

7 Vorhandene Templates (WebMatrix) Fachbereich AI, Web-Technologien 7

8 Vorhandene Templates (WebMatrix) The Starter Site Leeres Projekt Konditorei / The Bakery Site Beispiel für ein e-commerce-projekt The Calendar Beispiel für eine Verwaltung von Terminen Persönliche Webseite Beispiel für eine Verwaltung von Terminen Fotogallerie / The Photo Gallery Beinhaltet eine Foto-Verwaltung Beinhaltet Sicherheitsmechanismen Beinhaltet Zugriff auf eine Datenbank Fachbereich AI, Web-Technologien 8

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

10 WebPages mit WebMatrix, 1.Beispiel "C:\Program Files (x86)\microsoft WebMatrix\WebMatrix.exe" Fachbereich AI, Web-Technologien 10

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

15 Fachbereich AI, Web-Technologien 15

17 Neue Datei/Seite: Strg+N C# HTML Fachbereich AI, Web-Technologien 17

18 Seite Page.cshtml Fachbereich AI, Web-Technologien 18

19 Seite Page.cshtml: Code-Erweiterung Fachbereich AI, Web-Technologien 19

22 Seite Page.cshtml: Ergebnis im Browser Fachbereich AI, Web-Technologien 22

23 Seite Page.cshtml: // Razor c# Code var currentdatetime = DateTime.Now; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>meine erste MS-Seite</title> </head> <body> <h1>meine erste MS-Seite</h1> <p>das aktuelle Datum </body> </html> Fachbereich AI, Web-Technologien 23

25 Seite Page.cshtml: Fachbereich AI, Web-Technologien 25

26 @{ var currentdatetime = DateTime.Now; var filecontent= File.ReadAllText(@"D:\progs\webpages\WebPage1\Page.cshtml"); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>meine erste MS-Seite</title> </head> <body> <h1>meine erste MS-Seite</h1> <p>das aktuelle Datum <pre>@filecontent</pre> </body> </html> Fachbereich AI, Web-Technologien 26

27 Fachbereich AI, Web-Technologien 27

28 Beispiel WebPages2 Fachbereich AI, Web-Technologien 28

29 Beispiel // 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 29

30 <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> Beispiel WebPages2 Fachbereich AI, Web-Technologien 30

31 </head> <body> Beispiel WebPages2 <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 31

32 Beispiel WebPages2: Anzeige im IExplorer Fachbereich AI, Web-Technologien 32

33 Beispiel WebPagesLayout Fachbereich AI, Web-Technologien 33

34 Beispiel WebPagesLayout: Struktur _PageStart _SiteLayout _Header _SiteLayout RenderBody _Footer Default / Page12 RenderBody Fachbereich AI, Web-Technologien 34

35 Beispiel WebPagesLayout: Struktur Die Seite _PageStart ist die automatische Basis eines Projektes. Dort wird das Layout der Seite definiert, _SiteLayout In _SiteLayout steht die gesamte Struktur. Für die einzelnen Abschnitte sind jeweils Render-Links, also Die Seite _Default entspricht der normalen Datei Index.html Ähnlich sind: Page1 Page2 Die aufgerufenden Seiten _Default, Page1, Page2, sind jeweils nur der BODY-Anteil. Fachbereich AI, Web-Technologien 35

36 Beispiel WebPagesLayout: Ablauf Erstellen eines neuen Projektes Name: WebPageLayout Anlegen der Ordner Shared Anklicken des Eintrags WebPageLayout im Projektexplorer Rechte Maustaste Eintrag Neue Ordner Name: Shared Anlegen der Ordner Content Anklicken des Eintrags WebPageLayout im Projektexplorer Rechte Maustaste Eintrag Neue Ordner Name: Content Fachbereich AI, Web-Technologien 36

37 Beispiel WebPagesLayout: Popupmenu, neuer Ordner Name: Shared und Content Fachbereich AI, Web-Technologien 37

38 Beispiel WebPagesLayout: Erstellen der Seiten Ordner Root Root, WebPageLayout, anklicken Strg+N CSHTML anklicken Name: _PageStart Weitere Seiten im Root _SiteLayout _SiteLayoutMobil Page1 Page2 Fachbereich AI, Web-Technologien 38

39 Beispiel WebPagesLayout: Neue Datei Ordner: Root Name: _SiteLayout.cshtml Fachbereich AI, Web-Technologien 39

40 Beispiel WebPagesLayout: Erstellen der Seiten Ordner Shared Ordner Shared anklicken Strg+N CSHTML anklicken Name: _Header Weitere Seiten im Ordner Shared _Navigator _Footer Fachbereich AI, Web-Technologien 40

41 Beispiel WebPagesLayout: Erstellen der CSS-Seite Ordner Content Ordner Content anklicken Strg+N CSS anklicken Name: StyleSheet Fachbereich AI, Web-Technologien 41

42 Aktueller Stand Fachbereich AI, Web-Technologien 42

43 Layout = "~/_SiteLayout.cshtml"; } Page.Title = "StartPage"; } <h1>hier ist die Startseite</h1> <ul> <li><a href="~/page1">1. Seite</a></li> <li><a href="~/page2">2. Seite</a></li> </ul> Fachbereich AI, Web-Technologien 43

44 _SiteLayout.cshtml (1) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/xicon" /> <link rel="stylesheet" type="text/css"/> </head> <body> Fachbereich AI, Web-Technologien 44

45 _SiteLayout.cshtml (2) <div id="main">  </body> </html> Fachbereich AI, Web-Technologien 45

46 _Header.cshtml <header> <h1>hier steht das Firmen-Logo</h1> </header> _Navigator.cshtml <ul> <li><a href="~/page1">1. Seite</a></li> <li><a href="~/page2">2. Seite</a></li> </ul> _Footer.cshtml <footer> Bei Fragen senden Sie bitte eine an: <a </footer> Fachbereich AI, Web-Technologien 46

47 Page.Title = "Page1"; } <h1>@page.title</h1> Page.Title = "Page2"; } <h1>@page.title</h1> Fachbereich AI, Web-Technologien 47

48 body { font-family: Verdana, Helvetica, sans-serif; font-size: 0.8em; color: #5F5F5F; } #main{ width: 900px; } header { background-color: #4B4B4B; color: white; width: 100%; font: normal 2em Tahoma; } nav { border-bottom: 2px solid #C3C4C8; float: left; width: 180px; background-color: #E8E8E8; } StyleSheet.css Fachbereich AI, Web-Technologien 48

49 nav ul{ list-style-type:none; } nav a, nav a:hover, nav a:visited { color: blue; background-color: white; text-decoration: none; text-transform: uppercase; } nav a:focus, nav a:active { color: white; background-color:blue; text-decoration:none; } header, nav, arcticle { margin: auto; } StyleSheet.css Fachbereich AI, Web-Technologien 49

50 #wrapper { padding-top: 1px; width: 100%; } article { border: 2px solid #717171; width: 700px; background-color: white; margin-left:180px; } article a, article a:hover, article a:visited { color: white; background-color: blue; text-decoration: none; text-transform: uppercase; } StyleSheet.css Fachbereich AI, Web-Technologien 50

51 article a:focus, article a:active { color: blue; background-color:white; text-decoration:none; } header, nav, arcticle { margin: auto; } nav, article { min-height: 400px; } StyleSheet.css footer { clear:both; /* Ausrichtung an die oberen Elemente */ font-size:0.9em; text-align: center; color: green; } Fachbereich AI, Web-Technologien 51

52 Eintragen des Titels mittels einer Hashtable Layout = "~/Shared/_Layout.cshtml"; Page.Title="Home"; } _Layout.cshtml <head> <meta charset="utf-8" /> <title>@page.title</title> <link href="@href("~/content/stylesheet.css")" rel="stylesheet" type="text/css"/> </head> Fachbereich AI, Web-Technologien 52

53 WebPages mit WebMatrix, 4.Beispiel Formulare Post Get Überprüfung Mittels JavaSkript Auf dem Server Verwendung von HTML5 pattern required Fachbereich AI, Web-Technologien 53

54 4.Beispiel: var message = ""; var outputmessage="leer"; if(request.querystring["input"].isempty() ) { message = "Keine Nachricht übergeben"; } else { String input = Request.QueryString["input"]; message = "Eine Nachricht wurde übergeben"; outputmessage = input; } } Fachbereich AI, Web-Technologien 54

55 4.Beispiel: Page.cshtml <body> <h1>4. Web Page</h1> <form method="get"> <div> Eingabe: <input type="text" name="input" value="" size="12" /> <p><input type="submit" value="submit" /></p> Ergebnis: <input type="text" id="idoutput" size="42" /> </div> </form> </body> </html> Fachbereich AI, Web-Technologien 55

56 4.Beispiel: Page.cshtml Fachbereich AI, Web-Technologien 56

57 5.Beispiel: Addition in einem Zahlensystem Fachbereich AI, Web-Technologien 57

58 5.Beispiel: Addition in einem Zahlensystem Fachbereich AI, Web-Technologien 58

59 5.Beispiel: Ablauf Erstellen eines neuen Projektes Name: WebPageZahlen Erstellen eines neuen Ordners Name: App_Code Erstellen einer neuen Seite Name: Page1.cshtml Erstellen einer neuen CSS-Seite Name: Page1.css Erstellen einer neuen Seite Name: Page2.cshtml Erstellen einer neuen CSS-Seite Name: Page2.css Erstellen einer neuen Seite im Ordner App_code Name: Basis.cshtml Fachbereich AI, Web-Technologien 59

60 Schalter Veröffentlichung bzw. Publishing Fachbereich AI, Web-Technologien 60

61 Schalter Nach Windows-Webhosting suchen Fachbereich AI, Web-Technologien 61

62 Schalter Nach Windows-Webhosting suchen Fachbereich AI, Web-Technologien 62

63 Schalter Einstellungen eingeben Fachbereich AI, Web-Technologien 63

64 Veröffentlichung starten Fachbereich AI, Web-Technologien 64

70 Veröffentlichung gestartet Fachbereich AI, Web-Technologien 70

71 Veröffentlichung gestartet Fachbereich AI, Web-Technologien 71

72 Veröffentlichung abgeschlossen Fachbereich AI, Web-Technologien 72

73 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 73

74 asp.net Web Forms asp.net Web Pages asp.net MVC asp.net.net Framework Fachbereich AI, Web-Technologien 74

75 _PageStart _SiteLayout _Header _SiteLayout RenderBody _Footer Default / Page12 RenderBody Fachbereich AI, Web-Technologien 75