# Informatik Matura

### Themen:

#### [1. Netzwerke](#Netzwerke)

* Aufbau und Verbindungsprotokoll
TCP/IP: Schichten und Adressen, DHCP, VLAN
* Router
Statisches Routing

#### [2. Webdesign](#Webdesign)

* HTML5
Webseiten mit guter Accessibility und Responsibility
* CSS3
Modernes Design, Spaltenlayout

#### [3. Clientseitige Programmierung](#Clientseitige-Programmierung)

* Javascript
Einbettung in HTML Seiten, Algorithmen in einfache Programme umsetzen, einfache
Funktionen erstellen
Verwendung implementierter Funktionen

#### [4. Serverseitige Programmierung](#Serverseitige-Programmierung)

* PHP
Algorithmen in einfache Programme umsetzen, einfache Funktionen erstellen,
Verbindung zu SQL Servern

#### [5. Datenbanken](#Datenbanken)

* SQL
Basisbefehle: show, use, select, update, alter, create, insert, delete, truncate, drop
Verbinden von Tabellen, relationale Datenbanken

#### [6. Objektorientierte Programmierung](#Objektorientierte-Programmierung)

* Modellierung
Konstruktoren, Eigenschaften, Methoden, statische - nicht statische Klassen,
Vererbung, Instanzen
* Objekte
Erstellen und Verwenden eigener Objekte in Java

#### [7. Java Applikationen](#Java-Applikationen)

* (AWT Applikationen für Windows)
* FX Applikationen für Windows

#### [8. Sicherheit im Netz](#Sicherheit-im-Netz)

* Sicherheit
Verschlüsselung, VPN, Funkauthentifizierung, Port Security
* Firewall
Ports, trusted Nets, ~~SuSEfirewall2, Windows Firewall~~ (Teilweise)

---

## Netzwerke

### Rechnernetz

* Rechnernetz

* Topolgien:
* Stern-Topologie:
* Ein zentraler Verteilpunkt kann alles kontrollieren, aber ohne den nichts funktioniert (z.B. LANPartys)
* Baum-Topologie:
* Hierachische Kontrolle, je weiter oben, desto mehr kontrolle, wenn ein Knoten ausfällt, funktionieren die darunterliegenden auch nicht mehr
* Maschentopologie
* Jeder Rechner ist mit mehreren Nachbarn verbunden, wenn eine Leitung oder ein Knoten ausfällt, ist es nicht so schlimm, da das Netz auch noch über eine andere Leitung verunden ist

### Physikalische Komponenten

* Ethernet (kabelgebunden)

* Funknetze
* Mobilfunknetze
z.B.: GSM(Global System for Mobile Communications) oder UMTS (Universal Mobile telecommunications System)
* GSM: GPRS (0,171 Mbit/s) oder EDGE (0,473Mbit/s)
* LTE: 50 - 150 Mbit/s
* 5G: 2000 - 5000 Mbit/s

* WLANs
* 2,4 GHz Standards
IEEE 802.11g: 2 - 16 Mbit/s (6 - 54 Mbit/s)
IEEE 802.11n: 100 Mbit/s (600 Mbit/s)
* 5 GHz Standards
IEEE 802.11ac: 867 Mbit/s

* Weitere Physikalische Komponenten

### Verbindungsprotokoll TCP IP

* Verbindungsprotokoll
* Protokollschichten bei TCP/IP-Netzwerken
* Application Layer (Anwendungsschicht)
* Transport Layer (Transportschicht)
* Internet Layer (Internetschicht)
* Physical Layer (Netzzugangsschicht)

### IP Adressierung

* IP-Adressen werden von dem DHCP-Server zugewiesen
* IP-Adressen bestehen aus 4 Oktetten, welche von 0-255 reichen (minimum `0.0.0.0`, maximum `255.255.255.255`)
* Oft werden die IP-Adressen auch als bits angeschrieben z.b. `192.168.0.17` → `11000000.1010100.00000000.00010001"
* Es wird unterschieden zwischen:
* A-Klasse Netzwerk: 8-15 Bits für Netzwerk, 24-17 Bits für Hosts
* B-Klasse Netzwerk: 16-23 Bits für Netzwerk, 16-9 Bits für Hosts
* C-Klasse Netzwerk: 24-32 Bits für Netzwerk, 8-0 Bits für Hosts
* Aber es kann auch eine beliebige Anzahl an Bits für das Netzwerk verwendet werden, diese wird dann mit einem \ angeschrieben. z.B. `171.124.89.249\21` = ==`10101011.01111100.01011`==`001.11111001` (gelb markierte Bits → Bits für Netzwerk) (Klasse B Netzwerk)
* Es gibt 3 IP-Adressen-Bereiche, welche für private Netze reserviert sind, der rest sind öffentliche IP-Adressen. Diese sind:
* `10.0.0.0 – 10.255.255.255`
* `172.16.0.0 – 172.31.255.255`
* `192.168.0.0 – 192.168.255.255`
* Außerdem gibt es noch ein paar besondere IP-Adressen:
* `127.0.0.0` - localhost
* `255.255.255.255` - broadcast
* `169.x.x.x` - keine Verbindung

### DHCP

* Die Aufgabe des <span style='color:#f00;'>DHCP</span> ist es, den Geräten in einem Netzwerk eine IP-Adresse zuzuweisen. Der DHCP ist meistens die zweite Adresse in einem Netz (e.g. 192.168.0.1)
* Der DHCP merkt sich die Adressen für eine limitierte Zeit, meist werden sie nach 24 Stunden wieder freigegeben, und die Geräte müssen sich eine neue IP-Adresse holen

### Router

* Der Router ist eine Schnittstelle zwischen zwei Netzwerken.
* Alle Geräte in einem Netz haben normalerweise die IP-Adresse des Routers gespeichert, um nach außen hin kommunizieren zu können, und um vom DHCP eine ID-Adresse zugewiesen zu bekommen.

### WLAN

* Ein Wlan ist ein drahtloses Verbindungsprotokoll für Geräte, welches meist verwendet wird um Internetzugang für normale Leute einzurichten.
* Es wird unterschieden zwischen:
* 2,4 GHz Standards
* IEEE 802.11g: 2 – 16Mbit/s (6-54Mbit/s)
* IEEE 802.11n: 100Mbit/(s (600Mbit/s)
* 5 GHz Standards
* IEEE 802.11ac: 867Mbit/s

## Webdesign

* Das Web besteht hauptsächlich aus 3 Sprachen:
* [HTML](#Basisseite)
* [CSS](#CSS)
* [JavaScript](#Clientseitige-Programmierung)

#### Basisseite

<!DOCTYPE html>
<html>

<head>
    <!--Unicode (Wichtig für ä, ö, ü)-->
    <meta charset="UTF-8">
    
    <!--Websitetitel-->
    <title>Titel</title>
    
    <!--JavaScript-->
    <scrip></scrip>
    
    <!--Css-->
    <style></style>
    
    <!--Externes CSS-->
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

</html>

#### Basistags

<!--Kommentar-->


<!--Absatz (paragraph)-->
<p></p>


<!--Überschrift (header)-->
<h1></h1>
<h2></h2>
...
<h6></h6>


<!--Link (ankor)-->
<a href="https://quelle.com"></a>

<!--Listen (ordered list)-->
<ol>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ol>

<!--Listen (unordered list)-->
<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ul>


<!--Bild (image)-->
<img src="bildquelle.jpg" alt="Alternativer Text falls bild nicht gefunden">


<!--Artikel-->
<article></article>


<!--Platzhaltercontainer (division; divides a page into logical containers)
    Eher nicht verwenden weil der Jägi sonst schleeeecht 🙌 sagen wird
    (offenbar veraltet)-->

<div></div>


<!--Formular + inputs + labels-->
<form action="verarbeiten.php" method="POST">
    <label for="benutzID">Benutzername: </label>
    <input type="text" name="benutzername" id="benutzID">
    <input type="password" name="passwort">
    <input type="number" name="captcha">
    <input type="submit" value="Best&auml;tigen">
</form>


<!--Select aka Dropdown-->
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<!--Radio aka diese Kreise die man auswählen kann
    (IMMER DEN SELBEN NAMEN WÄHLEN!)-->
<input type="radio" id="age1" name="age" value="30">
<input type="radio" id="age2" name="age" value="60">
<input type="radio" id="age3" name="age" value="100">


<!--Tabellen-->
<table>
    <!--Table row-->
    <tr>
        <!--Table header-->
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <!--Table data-->
        <td rowspan="2"></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

#### Basisattribute

<!--ID's sind einzigartig!-->
<div id="beispielid"></div>

<!--Klassen können bei mehreren elementen verwendet werden-->
<div class="beispielclass"></div>

<!--CSS inline-->
<div style="background-color:red;"></div>

<!--JavaScript events-->
<div onclick="meineFunktion();"></div>
<div onmouseover="meineFunktion();"></div>
<div onfocus="meineFunktion();"></div>

<!--Namen (hauptsächlich für inputs)-->
<input type="text" name="benutzername">

### CSS

* Beispiele:

h1 {
    font-family: „Arial“;
    color: red;
    font-size: 50px;
    text-align: center;
}

img {
    width: 500px;
    height: 300px;
    border: black solid 2px;
}

body {
    background-color: #A338FF;
}

p {
    text-align: justify;
}

element {
    background-image: url("hintergrund.jpg");
    background-repeat: repeat/none;
}

#### CSS Margin, Padding, Border

element {
    margin-top: 5px;
    padding: 10px 20px;
    margin: 2px;
    margin: 1px 2px 3px 4px;
}


#### CSS responsive web design

/*FLOAT*/
element {
    float: left/right;
}

parentElement {
    display: flex;
    flex-wrap: wrap;
    justify-content: center/space-around/etc;
}

#### CSS fonts

@font-face {
  font-family: beispielName;
  src: url("fontFile.woff");
}

element {
    font-family: beispielName;
}

## Clientseitige Programmierung

* JavaScript ist die wichtigste Sprache in der Client seitigen Programmierung
* Der Code des Programmes wird bei dem Aufrufen einer Website an den User (Browser) geschickt, und dort interpretiert und ausgeführt
* Daher ist JavaScript eine Programmiersprache die sehr eingeschränkt ist, und nicht auf Systemressourcen (Files, Terminal) zugreifen kann, da das ein Sicherheitsrisiko für den average Joe sein würde
* Man programmiert ca. so in JavaScript:

### Variablen

exampleString = "Hallo"; //String
exampleBoolean = false / true; //Boolean
exampleNumber = 123.456; //Number
exampleArray = ["Erstes Element", "Zweites Element"]; //Array

//Zufällige Zahlen
randomNumber = Math.random(); //Zufällige Zahl zwischen 0 und 1 exklusive 1

Math.floor(spannweiteDerZahlen * Math.random() + startZahl)
//z.b.
Math.floor(10 * Math.random() + 5) //Zufällige Zahl zwischen
                                   //5 und 15 (Exklusive 15)


//Globale Variablen vs lokale Variablen
exampleString = "Hallo"; //Diese Variable ist aus jedem Programmteil abrufbar
let exampleString = "Hallo"; //Diese Variable ist nur aus dem momentanen
                             //Programmteil Abrufbar (z.b. in einer Funktion)
                             //Das ist vor allem Wichtig in rekursiven
                             //Funktionen


//Rechnen mit Variablen
exampleString + 1; // "Hallo1"
exampleNumber + 1.9; // 125.356
exampleArray[0] + " " + exampleArray[1]; //"Erstes Element Zweites Element"

exampleNumber = exampleNumber + 2; //Plus
exampleNumber = exampleNumber - 2; //Minus
exampleNumber = exampleNumber * 2; //Mal
exampleNumber = exampleNumber / 2; //Dividiert
exampleNumber = exampleNumber % 2; //Modulo
exampleNumber = Math.pow(exampleNumber, 2); //exampleNumber hoch 2

### Schleifen

//for Schleifen
for(i = 0; i < exampleArray.length; i+=1) {
    //Hier läuft die for Schleife für jedes Element aus exampleArray durch
}

//ist das selbe wie:
i = 0;
while(i<exampleArray.length) {
    
    i+=1;
}

### If

//if statements
if(exampleBoolean) { 
    //wird ausgeführt wenn die Variable exampleBoolean true ist
} else if (exampleNumber >= 100) {
    //wird ausgeführt wenn die Variable exampleNumber größer gleich 100 ist
} else if (exampleString == "Hallo") {
    //wird ausgeführt wenn die Variable exampleString "Hallo" entspricht
} else {
    //wird ausgeführt wenn alles andere falsch war
}

//auch als switch ausführbar:
switch(exampleString) {
    case "Hallo":
        //wird ausgeführt wenn die Variable exampleString "Hallo" entspricht
        break;
    case "Hallo1":
        //wird ausgeführt wenn die Variable exampleString "Hallo1" entspricht
        break;
    default:
        //wird ausgeführt wenn alles andere falsch war
        break;
}

### Funktionen

function codeHier() {
    //Hier kann code stehen, der aus einem beliebigen Programmteil mit
    //codeHier(); aufgerufen werden kann
}
codeHier();


function funktionMitRueckgabe() {
    return 10;
}
ergebnis = funktionMitRueckgabe(); //Ergebnis erhält den Wert 10


function funktionMitParametern(var1, var2) {
    return var1 + var2;
}
ergebnis = funktionMitParametern(2, 1); //Ergebnis erhält den Wert 3

### HTML Elemente

//Auf Html elemente zugreifen:
element = document.getElementById("id"); //Ein element
elements = document.getElementsByTagName("article"); //array von elementen
elements = document.getElementsByClassName("wichtig"); //array von elementen

//Text in dem Element verändern:
document.getElementById("id").innerHTML = "Neuer Text";

//Style von dem Element verändern:
document.getElementById("id").style.width = "500px";
document.getElementById("id").style.fontSize = "2em";
//em = Standardschriftgröße des Gerätes aka. doppelte Schriftgröße

//An die Stelle des Scripts etwas schreiben
document.write("<p>Ein neuer Absatz</p>");

//Wert eines Inputs im Formular lesen
document.getElementById("inputId").value;


//Html Elemente in JavaScript erstellen
bildElement = document.createElement("img");
bildElement.src = "https://shorturl.at/dnwU1";
document.getElementById("htmlElementId").appendChild(bildElement);

* Event Listener

<button onclick="knopfdruck()">Drück Mich!</button>
<img src="https://shorturl.at/dnwU1" style="width: 200px"
onmouseover="bildZoom(this)" onmouseout="unZoom(this)">

<script>
function knopfdruck() {
    alert("Der Knopf wurde gedrückt!");
}

function bildZoom(element) {
    element.style.width = "300px";
}

function unZoom(element) {
    element.style.width = "200px";
}
</script>

### Algorithmen

#### Zyklischer Tausch

* Zwei Elemente in einem Array werden vertauscht. Dabei muss eine temporäre Variable erstellt werden, um den Wert des einen Elementes zwischenzuspeichern

array = ["erster wert", "zweiter wert"]

temp = array[0];
array[0] = array[1];
array[1] = temp;

#### Bubblesort

* Vom Anfang des Arrays anfangend werden immer zwei nebeneinander liegende elemente i und i+1 überprüft. Sind sie in der falschen Reihenfolge, so werden sie vertauscht, und i wird um 2 verringert.

function bubblesort(ungeordnetesArray) {
    arr = ungeordnetesArray;
    for(i = 0; i < arr.length - 1; i++) {
        if(i < 0) {
            i = 0;
        }
        if(arr[i] > arr[i + 1]) {
            temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
            i -= 2;
        }
    }
    return arr;
}
console.log(bubblesort([17, 3, 2, 54, 12])); //[2, 3, 12, 17, 54]

#### QuickSort

* Das Array wird in zwei Teile entlang dem mittleren Element geteilt. Alle elemente die größer als das Element sind kommen in das neue Array a, alle anderen in das neue Array b. Mit den neuen Arrays wird der selbe Vorgang wiederholt, bis jedes Array nur noch 1 Element hat und geordnet ist.

function quickSort(arr) {
    if (arr.length == 1 || arr.length == 0) {
        return arr;
    }
    let pivot = arr[Math.floor(arr.length / 2)];
    arr.splice(Math.floor(arr.length / 2), 1);
    let lowerThanPivot = [];
    let higherThanPivot = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            lowerThanPivot[lowerThanPivot.length] = arr[i];
        } else {
            higherThanPivot[higherThanPivot.length] = arr[i];
        }
    }
    lowerThanPivot = quickSort(lowerThanPivot);
    higherThanPivot = quickSort(higherThanPivot);
    let result = lowerThanPivot.concat(pivot); //concat = An das Array anhängen
    result = result.concat(higherThanPivot);
    return result;
}

console.log(quickSort([17, 3, 2, 54, 12]));

## Serverseitige Programmierung
* PHP vs Javascript

| Server | Client |
| -------- | -------- |
| Webserver hat php Interpretor, führt den Code aus und schickt das ergebnis an den Client | Browser, html + Javascript |

* Eingebaute Variablen

$_POST["form_name"]; //Greift auf Variablen aus einem HTML Formular zu

//z.b.
//index.html
<form action="verarbeiten.php" method="POST">
    <input type="text" placeholder="Username hier eingeben" name="username">
    <input type="submit" value="Best&auml;tigen">
</form>
//verarbeiten.php
$_POST["username"];

$_GET["parameter"]; //Greift auf variablen aus der URL zu

//z.b.
//index.html
<form action="verarbeiten.php" method="GET">
    <input type="text" placeholder="Username hier eingeben" name="username">
    <input type="submit" value="Best&auml;tigen">
</form>
//verarbeiten.php
$_GET["username"];

* Schleifen

<!DOCTYPE html>
<html>
    <head>
        <?php
        function xxx(){
            for ($i = 0;$i < 10; $i += 1){
                print"<p>$i</p>";
            }
        }
        ?>
    </head>
    <body>
      <?php
        echo "<h1>Test</h1>";
        xxx();
        ?>
    </body>
</html>

* Formular

<!DOCTYPE html>
<html>
    <head>
        <?php
        function xxx(){
            $botschaft = $_POST["angabe"];
            echo "<article><h2>$botschaft</h2></article>"
        }
        ?>
    </head>
<body>
    <main>
      <?php
        if ($_POST["knopf"]=="Schicken"){
            xxx();
        }
        ?>
        <article>
        <form action="index.php" methode="POST">
            <p><input type="text" name="angabe"></p>
            <p><input type="submit" name="knopf" value="Schicken"></p>
            </form>
        </article>
    </main>
</body>
</html>

* Arrays

<!DOCTYPE html>
<html>
    <head>
        <?php
        function xxx(){
            $liste = array("Franz","Jochen","Hilde");
            $liste[3] = "Emilie";
        for($i = 0;$i<count($liste);$i+=1){
            print "<p>$liste[$i]</p>"
            }
        }
        foreach ($liste as $index)
        ?>
    </head>
<body>
    <main>
      <?php
        xxx();
        ?>
    </main>
</body>
</html>

## Datenbanken
* MYSQL - Einstieg
`mysql -h 192.168.X.X -u user -p`
* Tabellen liegen in Datenbanken
`show databases;` - zeigt alle Datenbanken
``use DBXY;`` - verbindet mit der Datenbank
``show tables;`` - zeigt alle Tabellen einer Datenbank
``show fields from tabellenname`` - zeigt alle Datenfelder einer Tabelle
* Erstellen einer Tabelle: create
``create table w6 (ID int not null, Vorname varchar(30), Nachname varchar(20),
Klasse varchar(2), primary key(ID));``
- int = ganze Zahl
- double(6,2) = Zahl mit zwei Kommastellen
- varchar(255) = Wort mit 255 Buchstaben
* Anlegen eines Datensatzes: insert
``insert into w6 (Nachname, Vorname, Klasse, ID) values
('Forcher','Sepp','9x',1); ``
``insert into w6 values (1,'Sepp','Forcher','9x');``
* Anzeigen der Datensätze: select
``select * from tabellenname;``
``select nachnme,klasse from tabellenname;``
* Bedingungen in SQL:
``select * from tabellenname where Datenfeldname = 'Wert'`` - Buchstaben under einfache Hochkomme '' und Zahlen ohne
``where Datenfeldname = 'Wert' and Datenfeldname2 = 'Wert2'``
``where Datenfeldname = 'Wert' or Datenfeldname2 = 'Wert2'``
``where Datenfeldnamen like 'W%'`` - werte die mit W beginnen
* Sortierung in SQL:
``order By Datenfeld asc`` - asc = aufsteigend, desc = absteigend
* Andern der Datensätze: update
``update tabellenname set datenfeld = 'neuer Wert' where ...`` - Bedingung nicht vergessen
* Löschen der Datensätze: delete
``delete from tabellenname`` - Bedingung nicht vergessen
* Gleiche Datensätze zusammenziehen = Gruppieren: group by
``select klasse from tabelle group by klasse;``
* Löschen der Tabelle: drop
``drop table tabellenname;``
* Ändern einer Tabelle: alter
``alter table tabellenname add xxx varchar(5);`` - Gibt das Datenfeld xxx dazu
``alter table tabellenname modify xxx varchar(50);`` - Ändert das Datenfeld xxx auf varchar(50)
``alter table tabellenname drop xxx;`` - löscht das Datenfeld xx
``alter table tabellenname rename neuername;`` - benennt die Tabelle um
* Zwei Tabellen zusammenführen: join
``SELECT * FROM Tabelle1
INNER JOIN Tabelle2 ON Tabelle1.ID=Tabelle2.ID;``
* Aggregatfunktion
- Count
- Sum
- min
- max
- avg
``select klasse, count(klasse) from kandidaten group by klasse;``

### SQL in PHP
* PHP - Mysql Verbindung

<?php
//Verbindung zum Server Aufbauen
$vb = mysql_connect("192.168.0.150","user","passwd") or die("VB Fehler");

//Auswahl der Datenbank
mysql_select_db("datenbank",$vb) or die ("DB fehler");

//Ausführen eines SQL Befehls und speichern der Tabelle in $tab
$tab = mysql_query("SQL Befehl");

//Holen vom ersten Datensatz als numerisches Array
$ds = mysql_fetch_row($tab);
echo "<p>$datensatz[0] $datensatz[1]</p>";

// Holen vom nächsten Datensatz als assiozatives Array
$ds2 = mysql_fetch_assoc($tab);
echo "<p>$datensatz[ID] $datensatz[Name]</p>";

//$ds oder $ ds2 in einer while schleife um die ganze Datenbank zu bekommen
while($datensatz = mysql_fetch_assoc($tab)){
    echo "<p>$datensatz[ID] $datensatz[Name]</p>";
}
//Schließen der Serververbindung
mysql_close($vb);
?>

* Selectbox aus einer Tabelle
Webshop Beispiel

<article>
    <form action="index.php" methode="POST" name="F"> 
        <p>
            <select name="auswahl" onchange="document.F.submit()">
    <?php
    $vb = mysql_connect("192.168.0.150","user","passwd") or die ("keine VB");
    mysql_select_db("datenbank",$vb) or die ("Db fehler");
    $tabelle = mysql_query("select ID, Name from tabelle oder bei Name asc");
    while($datensatz = mysql_fetch_assoc($tabelle)){
        echo "<option value=$datensatz[ID]>
        
        
        $datensatz[Name]</option>";
        
        
    }
    mysql_close($vb);
    ?>
            </select>
        </p>
    </form>
</article>


<article>
    <?php
    $vb = mysql_connect("192.168.0.150","user","passwd") or die ("VB Fehler 2");
   mysql_select_db("datenbank",$vb) or die ("DB fehler 2");
    if (isset($_POST["auswahl"])){
        $tabelle=mysql_query("select * from tabelle where ID='$_POST[auswahl]';");
        $datensatz = mysql_fetch_assoc($tabelle);
        echo "<p>$datensatz[ID] $datensatz[Name]"
    }
    mysql_close($vb);
    ?>
</article>

* Insert

* Daten speicher

* MYSQLi

<?php
$vb = mysqli_connect("192.168.1.26","user","passwd","datenbank") or die("keine VB");
$tab = mysqli_query($vb,"select * from tabelle");
while($ds = mysqli_fetch_assoc($tab)){
    echo "<p>$ds[id] $ds[Name]</p>";
}
mysqli_close($vb);
?>

## Objektorientierte Programmierung

## Java Applikationen

### Java - FX
Bei JAVA FX ist jedes Fenster eine `Stage`(Bühne).
Eine Stage kann eine oder mehrere `Scene` haben.
In einer Scene kann man eine oder mehrere `Layout` machen.
* Grundprogramm

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;


public class start extends Application{
    @Override
    public void start(Stage S){
        
        S.setTitle("Einstieg in FX");
        S.setMinWidth(300);
        S.setWidth(400); //die Weite beim Start
        S.setMaxWidth(500);
        S.setMinHeight(300);
        S.setMaxHeight(500);
        
        Group G = new Group();
        Scene scene = new Scene(G);
        S.setScene(scene);
        
        Line L1 = new Line(0,150,300,150);
        Line L2 = new Line(150,0,150,300);
        G.getChildren().addAll(L1,L2);
        
        S.show();
    }
    public static void main(String[] args){
        launch(args);
    }
}

* Funktionen

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.stage.*;

public class Fkt extends Application {
    
    @Override
    public void start(Stage s){
        s.setTitle("Funktionsgraph");
        s.setMinWidth(520);
        s.setMaxWidth(520);
        s.setMinHeight(520);
        s.setMaxHeight(520);
        
        Group g = new Group();
        Scene sc = new Scene(g);
        s.setScene(sc);
        
        Line xA = new Line(0,250,500,250);
        Line yA = new Line(250,0,250,500);
        Line xA1 = new Line(280,245,280,255);
        Line yA1 = new Line(245,220,255,220);
        g.getChildren().addAll(xA,yA,xA1,yA1);
        
        Line[] l = new Line[500];
        int xa = 0, ya = 0;
        for(int i = 0;i <= 500; i++){
            double x = ((double) i - 250) / 30.0;
            double y = poly3.f(x);
            int yK = 250 - (int) (y * 30.0);
            if(i > 0){
                l[i - 1] = new Line(xa,ya,i,yK);                
            }
            xa = i;
            ya = yK;
        }
        g.getChildren().addAll(l);
        s.show();        
    }
    public static void main(String[] args){
        launch(args);
    }
}

- poly3.java

public class poly3{
    public static double f(double x){
        return Math.pow(x,3) - 2.0 * Math.pow(x,2) - 3.0 * x + 2.0;
    }
}

#### FlowPane

* Funktioniert wie die Flexbox in CSS

Beispiel von der [Seite](https://codestory.de/10627/javafx-flowpane) die er uns empfohlen hat:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class FlowLayout extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        FlowPane root = new FlowPane();
        
        /*Mit denen macht man Margin (Zwischen den Kindern)
        und Padding (Innenabstand)*/
        root.setHgap(10);
        root.setVgap(20);
        root.setPadding(new Insets(15,15,15,15));
       
        // Button 1
        Button button1= new Button("Button1");
        root.getChildren().add(button1);
       
       
        // Button 2
        Button button2 = new Button("Button2");
        button2.setPrefSize(100, 100);
        root.getChildren().add(button2);
       
        // TextField
        TextField textField = new TextField("Text Field");
        textField.setPrefWidth(110);
         
       
        root.getChildren().add(textField);
       
        // CheckBox
        CheckBox checkBox = new CheckBox("Check Box");
         
        root.getChildren().add(checkBox);
       
        // RadioButton
        RadioButton radioButton = new RadioButton("Radio Button");
        root.getChildren().add(radioButton);
       
        Scene scene = new Scene(root, 550, 250);

        primaryStage.setTitle("FlowPane Layout Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

   
    public static void main(String[] args) {
        launch(args);
    }
   
}

#### Text, Buttons und Eingabefelder

Im Beispielprogramm von Netbeans 8.2 ist schon ein Beispielprogramm mit einem Knopf mit einer Action.

Ich hab das ein bisschen bearbeitet und Text(``Label``) und ein Eingabefeld (``TextField``) eingebaut:

(Hab statt StackPane FlowPane gemacht)

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.FlowPane;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.geometry.Insets;
import javafx.geometry.Pos;

public class ButtonsandStuff extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        //Hier erstelle ich den Label einfach "new Label()"
        Label label = new Label();
        //setText halt
        label.setText("Text-Duplicator");
        /*Padding kann nie schaden
        Bei Insets nicht "new" davor vergessen!*/
        label.setPadding(new Insets(10,10,10,10));
        //Ich center alles weil centern gut ist.
        label.setAlignment(Pos.CENTER);
        
        //Hier erstelle ich das TextField "new TextField()"
        TextField textfield = new TextField();
        textfield.setPadding(new Insets(10,10,10,10));
        textfield.setAlignment(Pos.CENTER);
        
        Button btn = new Button();
        btn.setText("Duplicate Text in Textfield");
        btn.setPadding(new Insets(10,10,10,10));
        btn.setAlignment(Pos.CENTER);
        
        btn.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                /*Hier ist die Aktion vom Knopf -
                in dem Fall hängt es an das TextField
                den Inhalt nochmal dran*/
                textfield.appendText(textfield.getText());
            }
        });
        
        FlowPane root = new FlowPane();
        /*Hgap und Vgap damit die Elemente nicht
        aneindander picken*/
        root.setHgap(10);
        root.setVgap(10);
        //Die Kinder herholen
        root.getChildren().add(label);
        root.getChildren().add(btn);
        root.getChildren().add(textfield);
        
        Scene scene = new Scene(root, 300, 250);
        
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

#### BorderPane

Die BorderPane lässt Layouts oder Elemente Links, Rechts, Oben, Unten oder in der Mitte ausrichten. In dem Fall sind es 5 Knöpfe die maximal groß sind.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class FlowLayout extends Application {
    
    @Override
    public void start(Stage stage) {
        
        //Button on Top
        Button btnt = new Button();
        btnt.setText("Button on top");
        btnt.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        
        //Button on Bottom
        Button btnb = new Button();
        btnb.setText("Button on bottom");
        btnb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        
        //Button left
        Button btnl = new Button();
        btnl.setText("Button left");
        btnl.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        
        //Button right
        Button btnr = new Button();
        btnr.setText("Button right");
        btnr.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        
        //Button Center
        Button btnc = new Button();
        btnc.setText("Button in center");
        btnc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        
        
        BorderPane root = new BorderPane();
        root.setTop(btnt);
        root.setBottom(btnb);
        root.setLeft(btnl);
        root.setRight(btnr);
        root.setCenter(btnc);
        root.setPadding(new Insets(10,10,10,10));
        
        Scene scene = new Scene(root, 300, 250);
        
        stage.setTitle("Hello World!");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}

#### Layout

In Layout geht es eigentlich nur darum, dass man eben die Layouts ineinander geben kann und wie man Layouts machen kann.

Der Zweite wichtige Punkt ist aber, dass man CSS einbauen kann. Das geht mit:

scene.getStylesheets().add(getClass().getResource("(Pfad ab src)/name.css").toString());

Das CSS schreibt man nach dem Prinzip:

.root {
    -fx-padding: 20px;
    -fx-font-family: "Courier New";
    -fx-background: #1E2529;
}

.label {
    -fx-text-fill: #000;
    -fx-min-Width: 500px;
    -fx-font-family: "Arial Bold";
    -fx-font-size: 30px;
    -fx-background-color: #FFF;
    -fx-background-radius: 20;
    -fx-alignment: center;
    -fx-padding: 10px;
}

#left {
    -fx-min-Width:250px;
    -fx-max-Width:250px;
    -fx-padding: 10px;
}


#right {
    -fx-min-Width:500px;
    -fx-padding: 10px;
}

#### GridPane

Das GridPane ist nach dem Prinzip von einem Grid aufgebaut. Es bietet sich an eine Schleife zu verwenden:

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPane extends Application {
    
    @Override
    public void start(Stage s) {
        s.setTitle("Liste");
        s.setMinWidth(400);
        s.setMaxWidth(400);
        s.setMinHeight(200);
        
        BorderPane B = new BorderPane();
        Scene S = new Scene(B);
        S.getStylesheets().add(getClass().getResource("look.css").toString());
        
        Label L = new Label("Liste");
        L.getStyleClass().add("schrift");
        B.setTop(L);
        BorderPane.setAlignment(L, Pos.CENTER);
        
        GridPane G = new GridPane();
        G.setPadding(new Insets(20,20,30,20));
        G.setVgap(20);
        G.setHgap(20);
        
        String[] pers = {"Huber", "Robert", "Schiller", "Franz"};
        Label [] LL = new Label[pers.length];
        for (int i = 0; i < pers.length; i++) {
            LL[i] = new Label(pers[i]);
            LL[i].setId("grid");
            G.add(LL[i], (i % 2), (int) (i / 2));
            GridPane.setHalignment(LL[i], HPos.LEFT);
        }
        B.setBottom(G);
        BorderPane.setAlignment(G, Pos.CENTER);
        
        s.setScene(S);
        s.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}

#### SQL

##### Einbinden

Zuerst muss SQL eingebunden werden. Das geht indem man zuerst den Connector z.B. direkt ins src Verzeichnis gibt und dann mit rechtsclick auf den Projektordner unter Properties -> Libraries -> Add Jar/Folder auswählt.

Bei mir war ich im File-Browser nicht in src. Das ist kein Problem, einfach auf die Properties vom Connector gehen DateiPfad kopieren und einfügen.

##### Verwenden

Mit diesen beiden Funktionen kann man SQL dann verwenden:

try {
            Class.forName("org.gjt.mm.mysql.Driver");
        } catch (Exception ex) {
            System.out.println("Driver nicht geladen");
        }

try {
            Connection vb = DriverManager.getConnection("jdbc:mysql://192.168.1.17:3306/dbw8", "Userw8", "abcd1234");
            Statement Q = vb.createStatement();
            String query = "select nachname, vorname from schueler where klasse = '" + klasse + "' order by nachname asc";
            ResultSet ein = Q.executeQuery(query);
            while (ein.next()) {
                Vorname = push(Vorname, ein.getString("vorname"));
                Nachname = push(Nachname, ein.getString("nachname"));
            }
            vb.close();
        } catch (Exception e) {
            System.out.print(e);
        }

Dabei wird die push Funktion verwendet:

    private static String[] push(String[] eingabe, String zusatz) {
        String[] ausgabe = new String[eingabe.length + 1];
        for (int i = 0; i < eingabe.length; i += 1) {
            ausgabe[i] = eingabe[i];
        }
        ausgabe[eingabe.length] = zusatz;
        return ausgabe;
    }

#### Auswahlfelder

Beim Video über Auswahlfelder geht es darum, dass man ein TextField als Auswahlfeld verwenden kann. Das ist auch der Fall bei dieser Java Application, bei der GridPane, SQL, CSS und ein Auswahlfeld vorkommen:

import java.sql.DriverManager;
import java.sql.Connection;
import java.sql.Statement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.geometry.HPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class mitschueler extends Application{
    
    String klasse = "8b";
    
    @Override
    public void start(Stage stage) {
        
        try {
            Class.forName("org.gjt.mm.mysql.Driver");
        } catch (Exception ex) {
            System.out.println("Driver nicht geladen");
        }
        
        stage.setTitle("Mitschüler");
        
        BorderPane bp = new BorderPane();
        Scene scene = new Scene(bp);
        stage.setScene(scene);
        stage.setMinWidth(1120);
        stage.setMaxWidth(1120);
        scene.getStylesheets().add(getClass().getResource("style.css").toString());
        
        BorderPane bpbottom = new BorderPane();
        bp.setBottom(bpbottom);
        
        Label label = new Label("Mitschüler aus Klasse: " + klasse);
        bp.setTop(label);
        bp.setAlignment(label, Pos.CENTER);
        
        Label Klasse = new Label("Klasse:");
        Klasse.setId("left");
        bpbottom.setLeft(Klasse);
        
        TextField textfield = new TextField(klasse);
        textfield.setId("left");
        bpbottom.setCenter(textfield);
        
        Button btn = new Button("anzeigen");
        btn.setId("right");
        bpbottom.setRight(btn);
        bpbottom.setAlignment(btn, Pos.CENTER_RIGHT);
        
        btn.setOnAction(new EventHandler<ActionEvent>(){
            @Override
            public void handle(ActionEvent event) {
               stage.close();
               klasse = textfield.getText();
               start(stage);
            }
            
        });
               
        GridPane gp = new GridPane();
        gp.setPadding(new Insets(20,20,20,20));
        gp.setVgap(20);
        gp.setHgap(20);
        
        String [] Vorname = new String[0];
        String [] Nachname = new String[0];
        
        try {
            Connection vb = DriverManager.getConnection("jdbc:mysql://192.168.1.17:3306/dbw8", "Userw8", "abcd1234");
            Statement Q = vb.createStatement();
            String query = "select nachname, vorname from schueler where klasse = '" + klasse + "' order by nachname asc";
            ResultSet ein = Q.executeQuery(query);
            while (ein.next()) {
                Vorname = push(Vorname, ein.getString("vorname"));
                Nachname = push(Nachname, ein.getString("nachname"));
            }
            vb.close();
        } catch (Exception e) {
            System.out.print(e);
        }
        
        Label[] label0 = new Label[Vorname.length];
        for (int i = 0; i < Vorname.length; i++) {
            label0[i] = new Label(Vorname[i] + " " + Nachname[i]);
            label0[i].setId("grid");
            gp.add(label0[i], (i % 2), (int) (i/2));
            GridPane.setHalignment(label0[i], HPos.CENTER);
            GridPane.setValignment(label0[i], VPos.CENTER);
        }
        bp.setCenter(gp);
        BorderPane.setAlignment(gp, Pos.CENTER);
        
        stage.show();
    }
    
    
    public static void main(String[] args) {
            launch(args);
    }
    
    private static String[] push(String[] eingabe, String zusatz) {
        String[] ausgabe = new String[eingabe.length + 1];
        for (int i = 0; i < eingabe.length; i += 1) {
            ausgabe[i] = eingabe[i];
        }
        ausgabe[eingabe.length] = zusatz;
        return ausgabe;
    }
    
}

## Sicherheit im Netz

### RSA

### Port Security

* Unter port security versteht man, wenn ein Ethernet Port abgesichert wird. Dabei wird er normalerweise auf die Ethernet Adresse des Gerätes eingeschränkt, welches sich als erstes verbindet.
* In CISCO Packet Tracer funktioniert das so:

//In der switch Konsole eingeben
//Schaltet den port ein?
enable

//Geht ins Terminal der Konfigurationen
conf t

//Zeigt aktive Port-Security konfigurationen an
show port-security

//Welches Interface konfiguriert wird
int fa0/5
int range fa0/0-24

    switchport mode access
    //Schaltet Port security ein
    switchport port-security
    //Maximale Anzahl der Geräte pro Port
    switchport port-security maximum 1

    switchport port-security mac-address sticky

    switchport port-security violation shutdown
    switchport port-security violation protect
    switchport port-security violation restrict

    //Dreht den Port manuell ab / an
    shutdown
    no shutdown