-Website

ÜK 307

Formulare

Aufbau HTML-Formular

<form method=’get’></form>

Um ein Formular erstmal zu erstellen braucht man den Tag <form></form> in diesem tag kann man noch die method angeben entweder get oder post, zwischen den form Tags kann man auch verschiedene andere Tags reinschreiben die verschiedene Formular Elemente hinzufügen.

Der Input Tag

<input type=’text’>

Mit dem Tag Input kann man ein Eingabe Feld erstellen, im Input Tag steht was für ein Typ der Inhalt ist hier gibt es verschiedene:
Text
textarea
password
radio
checkbox
file
submit
dem input kann man auch ids und namen vergeben man kann auch angeben ob das feld required ist oder nicht aussderdem kann man einen standart value festlegen. so sieht dann der code aus
<input type=’password’ name="derName" id="dieId" required=required value="hier steht der Value">

Der Select Tag

<select>
<option value="derValue" selected disabled>das sieht man</option>
</select>

mit dem select Tag kann man ein dropdown menu erstellen. ein select tag brauch zwingend auch option tags diese sind dann im dropdown zu sehen. im option tag kann man wie auch beim input ein value angeben aber hier kann man auch noch die attribute disabled und selected

GET/POST

Bei einem Formular in HTML muss man angeben wie die Daten im Formular übertragen werden. Es gibt zwei verschiedene Methoden, nämlich GET und POST. Bei der Methode GET werden alle Informationen des Formulars in der URL angezeigt, dies ist gut für Suchfelder oder ähnliches aber für Formulare die Persönliche Daten beinhalten ist das sehr unsicher. Bei Formularen mit wichtigen Daten wird POST verwendet bei dieser Methode stehen die Daten nicht in der URL und man kann POST auch verschlüsseln, denn wenn es nicht verschlüsselt ist kann man die Daten in der Konsole sehen.

<form action="form.php" method="POST"></form>

Clientseitige Validierung

Clientseitge Formular Validierung Die clientseitige Validierung wird mit Javascript/jQuery realisiert. Mit serverseitiger Scriptsprache wird der ganze Code beim Rechner ausgerechnet. Ein Beispiel für Serverseitige Validierung ist folgendes.: Ein Muss Feld aus einem Formular ist leer aber wird trotzdem abgeschickt. Mit der Browservalidierung kommt einfach ein Hinweis was nicht ausgefüllt wurde. Wenn man allerdings die Rahmen rot färben will sobald ein Muss Feld nicht ausgefüllt abgeschickt wird. Dann muss man das mit jQuery lösen. Um das zu erreichen muss man als erste das gewünschte Element ansprechen. In unserem Beispiel wollen wir eine Reaktion auf einen click erreichen also:

$(‘[type=’’submit’’]’).on(‘click’ function(){)

Nun muss man noch ein if else Statement setzen, weil man Nachfragen will: Wenn man das Formular abschickt und ‘’dieses Feld’’ leer ist, dann färbe den Rahmen rot, sonst grün. Das sieht in jQuery folgendermassen aus:

$(‘[type=’’submit’’]’).on(‘click’ function(){
if($(‘#feldID’).val() ==’’ ’’){
$(‘#feldID’).css(‘border-color’ , ‘red’)
}
Else{
$(‘#feldID’).css(‘border-color’ , green)
});

Serverseitige Validierung

Um Daten vom Formular anzeigen und bearbeiten zu lassen bindet man noch ein .php File in den form Tag im HTML ein, sowie oben gezeigt.
Damit die Daten aber auch noch angezeigt werden braucht es noch folgenden Befehl:

<?php echo $_REQUEST["fname"]; ?>

Javascript

Funktionen

Mit Funktionen grupppiert man Anweisungen, die zusammen eine Aufgabe ausführen. Mit Funktionen wird der Code kürzer und die Übersichtlichkeit wird besser.

Eine Funktion ist folgendermassen aufgebaut.

function sayHello() {
document.write('Hallo');
}

Rot = Schlüsselwort function
Gelb = Funktionname
Pink = Codeblock

Um Funktionen zu deklarieren, sollte das Schlüsselwort "function" benutzt werden. Nachher gibt man den Namen der Funktion an, gefolgt von runden Klammern. In den geschweiften Klammern stehen die verschiedenen Anweisungen.

Wir haben jetzt zwar die Funktion, aber wir müssen sie auch aufrufen können. Das kann man mit folgendem Befehl:

sayHello();

Es besteht aus dem Funktionsnamen. Man kann auch diese Funktion aufrufen, bevor sie überhaupt deklariert wurde, weil der Interpreter zuerst nach allen Funktionen sucht und sie im Cache abspeichert.

Man kann auch eine Funktion erstellen, die Werte brauchen, bevor sie laufen können.

function getArea(width, height) {
return width * height;
}

Hier geben wir den Werten Variablen. Damit kann man beim Abrufen in den Klammern die benötigten Werte eingeben. Diese Funktion berechnet width mal height. return wird benötigt, damit der berechnete Wert ausgegeben werden kann. Sonst wird es berechnet, aber der Wert wird nicht angezeigt.

So kann man eine Funktion aufrufen, die mit Variablen funktioniert:

getArea(3, 5);

Man kann auch mehrere Werte ausgeben. Dies funktioniert mit Arrays. Dafür muss man eine zusätzliche Variable mit einem Array erstellen.

function getSize(width, height, depth) {
var area = width * height;
var volume = width * height * depth;
var sizes = [area, volume];
return sizes;
}

Das ganze kann man dann so ausgeben

getSize(3, 2, 3)[0];

Variablen/Arrays

Variablen

Bei Variablen, werden bestimmte Daten gespeichert um sie mehrmals oder nochmals anzugeben.

Skelett:
Var «Variablenname» = «Variablenwert»;
Beispiel:
var number = 3;

Regeln von Variablen

Arrays

Arrays sind grundsätzlich gleich aufgebaut wie eine Variable, der einzige unterschied das man mehrere Daten eingibt.

Skelett:
Var «variablenname» = [wert, wert];
Beispiel:
Var colors = [green, blue, yellow] ;

Objekte

Objekte sind so gesehen Variablen in welchen man verschiedene Objekte, sowie deren Werte festlegen kann.

Skelett:
var "variablenname" = {
"objektname" = "Wert"
}
Beispiel:
var hotel = {
name = 'Stars'
rooms = 40
};

Entscheidungen/Schleifen

Entscheidungen

Entscheidungen schreibt man mit if und else.

if (score > 50) {
document.write('Bestanden!');
} else {
document.write('Versuche es erneut...');
}

nach dem "if" kommt in klammern die bedingung hier ist sie "score > 50" das heisst nur wenn der score grösser als 50 wird die bedingung weitergeführt. Als nächstet kommt in geschweiften klammern der Code welcher dann ausgeführt wird. Danach kommt das "else", das bedeutet, wenn das if nicht vorkommt wird, das else ausgeführt wird. Hier kann man dann auch in geschweiften Klammern den Code schreiben der ausgeführt werden soll.

Schleifen

Loops oder auch Schleifen werden gebraucht um denselben Code mehrmals zu wiederholen

Ohne Loops

Mit Loops

text += cars[0] + "
"; text += cars[1] + "
"; text += cars[2] + "
"; text += cars[3] + "
"; text += cars[4] + "
"; text += cars[5] + "
";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "
"; }

Die drei verschiedenen Arten von Schleifen

Schleifen Definition
FOR Durchläuft einen Codeblock mehrmals.
WHILE Durchläuft einen Codeblock, während eine bestimmte Bedingung erfüllt ist.
DO/WHILE Durchläuft auch einen Codeblock, während eine bestimmte Bedingung erfüllt ist.

Die drei Schleifenzähler

Schleifenzähler Definition
Initialisierung Die Variabel die als Zähler dient, wird gesetzt und auf null gesetzt. Für Gewöhnlich ist das sie Variabel i. Zum Besipiel: i=0.
Bedingung Die Schleife wird ausgeführt, bis der Zähler einen festen Wert bekommt. Zum Besipiel: i < 10.
Aktualisierung Jedes Mal, wenn der Code durchgespielt wird erhöht sich die Zahl um 1. Zum Beispiel: i++.

Eingabe im Code

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "
"; } document.getElementById("demo").innerHTML = text;

Ausgabe des Codes

Loops Ausgabe

Operatoren/Anweisungen

Logische Operatoren

Logische Operatoren
((2 < 5 ) && ( 3 >= 2))

Wenn beide Werte true ergeben, dann wird true angezeigt

((2 < 5 ) || ( 2 < 1)) ergibt true

Wenn ein Wert true ist und der andere false oder wenn beide Werte true sind, dann wird true angezeigt.

!(2 < 1) ergibt true

Wenn ein Wert true ist, wird er als false angezeigt.

Wenn ein Wert false ist, wird er als true angezeigt

Vergleichsoperatoren

Vergleichsoperatoren

Heisst "Ist gleich". Prüft ob zwei Werte gleiche Sind.

('Moin' == 'Servus' ergibt false)
('Moin' == 'Moin' ergibt true)

Heisst "Ist ungleich".Prüft ob zwei Werte ungleich sind.

('Moin' != 'Servus' ergibt true)
('Moin' != 'Moin' ergibt false)

Heisst "Ist strikt gleich" Prüft ob zwei Werte Identisch und den gleichen Datentyp haben.

('3' === 3 ergibt false)
('3' === '3' ergibt true)

Heisst "Ist strikt ungleich".Prüft ob zwei Werte von unterschiedlichen Datentyp oder Wert sind.

('3' !== 3 ergibt true)
('3' !== '3' ergibt false)

Heisst "Kleiner als". Prüft, ob der Wert auf der linken Seite kleiner ist, als der Wert auf der rechten Seite.

(8 < 10 ergibt true)
(10 < 8 ergibt false)

Heisst "Grösser als".Prüft, ob der Wert auf der linken Seite grösser ist, als der Wert auf der rechten Seite.

(8 > 10 ergibt false)
(10 > 8 ergibt true)

Heisst "Kleiner oder Gleich".Prüft, ob die Zahl auf der linken Seite kleiner oder gleich ist, als der Wert auf der rechten Seite.

(8 <= 10 ergibt true)
(8 <= 8 ergibt true)
(10 <= 8 ergibt false)

Heisst "Kleiner oder Gleich".Prüft, ob die Zahl auf der linken Seite grösser oder gleich ist, als der Wert auf der rechten Seite.

(8 >= 10 ergibt false)
(8 >= 8 ergibt true)
(10 >= 8 ergibt true)

If...else Anweisungen

var Mindestpunktzahl = 50;
var Punktzahl = 35;
var Msg;


if (Punktzahl >Mindestpunktzahl) {
Msg = 'Gratuliere du hast es geschafft';
} else {
Msg = 'Nochmals versuchen bitte!';
}

var el = document.getElementById('antwort3');
el.textContent = Msg;

Switch Anweisung

Eine Switch Anweisung prüft eine Variable(switch-Wert).
Ein Fall(case) gibt eine variable an & den Codeblock der ausgeführt werden soll.
var nachricht;
var aufgabe = 1;


switch (aufgabe) {
case 1:
nachricht = 'Du hast das erste Aufgabe erledigt';
break;

case 2:
nachricht = 'Die zweite Aufgabe haben sie nun auch schon erledigt!';
break;

case 3:
nachricht = 'Du bist nun an der dritten Aufgabe';
break;
default:
nachricht = 'Dieser Text kommt, weil Sie keine Zahlen von 1 bis 3 eingegeben haben.';
break;
} var el = document.getElementById('antwort');
el.textContent = nachricht;

JQuery

Ereignismethoden

Mit hilfe von Ereignismethoden können durch Aktionen, scripts ausgehührt werden. Nach einbinden von JQuery kann zum beispiel, mit hilfe dieses Codes durch klicken auf ein li Element, die Farbe geändert werden.

$("li").on("click", func() {
$(this).css("color", "red");
});

Selektoren/Funktionen

Mit jQuery-Selektoren kann man HTML-Elemente auswählen und bearbeiten.
jQuery-Selektoren werden verwendet, um HTML-Elemente anhand ihres Namens, ihrer ID, ihrer Klassen, Typen, Attribute, Werte von Attributen und vielem mehr zu finden (oder auszuwählen).
Alle Selektoren in jQuery beginnen mit dem Dollarzeichen und den Klammern: $().
Danach kann eine Aktion (oder Funktion) folgen wie zum Beispiel so:

$("button").click(function(){
$("div").animate({left: '250px'});
});

Elemente wählt man so aus:

$("textarea")

Klassen wählt man so aus:

$(".textarea")

IDs wählt man so aus:

$("#textarea")

Attribute mit beliebigem Wert wählt man so aus:

$("[type]")

Attribute mit bestimmtem Wert wählt man so aus:

$("[type='text']")

Es ist wichtig, dass hier man zwei verschiedene Zeichen benutzt um zwei Strings kennzuzeichen. Sonst versteht der Browser die Anweisung nicht.

PHP

PHP ist eine Serverseitige Sprache welcher in einer .php datei geschrieben wird. Ein Tag wird wie folgt geschrieben.

<?php ?>

Um einen Text in php einzufügen benutzt man vor dem Text ein ECHO. Alle funktionien wie zum beispiel echo ist die Grossschreibung egal. Inhalb der apostrophe kann man auch ganz normal mit HTML Tags schreiben.

<?php echo "Hallo Welt" ?>

Die Variabel wird vorne mit einem Dollarzeichen($) geschrieben, hierbei achte php wiederrum auf die Gross und Kleinschreibung.

<?php $color = 'red' ?>

Comments können wie folgt geschrieben werden.

<?php //thats a Comment
#thats a Comment
/* Thats a Comment */ ?>

Datentypen

Datentyp Beschreibung Beispiel
String Dieser Daten typ ist für eine ganz normale Zeichenfolge. $x = "Hallo Welt!"
Integer Das ist ein Datentype für alle Ganzenzahlen zwischen -2'147'483'648 und 2'147'483'647, aber es darf keinen Dezimalpunkt haben. $x = 5356
Float Das ist ein Datentyp welcher sich Gleitkommazahlen beinhaltet, also alle Zahlen mit Dezimalpunkt oder Zahlen mit Exponentialform. $x = 12.4142
Boolean Dieser Datentyp beinhaltet nur true oder false. $x = true
Array Ein Array speichert mehrere werte in einer einzigen Variabel. $colors = array('blue', 'green', 'red');
Objekt Ein Array speichert mehrere werte in einer einzigen Variabel. $colors = array('blue', 'green', 'red');
NULL Wert Der Datentyp NULL Wert ist alle, wo nichts drin ist. $x = null

Schutz

SQL Injection

Bei allen Webseiten sind die Logindaten in einer Datenbank gespeichert. Der Hacker versucht, die SQL Anfraage im PHP Code zu erweitern.

Es kann folgender SQL Code in ein Formularfeld geschrieben werden:

SELECT passwort FROM tblUsers WHERE User = admin OR 1=1

Schutz vor SQL Injection

Folgende Punkte nützen vor SQL Injection:

XSS: Cross-Site-Scripting

Über das Formularfeld wird Code in die Seite gepflanzt

Besonders gefährdet sind Seiten, bei denen die Eingeabe direkt auf der Seite publiziert wird. (CMS,Kommentarseiten, etc.)

Schutz vor XSS

Folgende Punkte nützen gegen XSS:

Brute Force Attack

Bei Brute Force Attacken wird mithilfe von Wörterlisten aus der Hackercommunity mit roher Gewalt alle Möglichkeiten ausprobiert. Dies ist natütlich automatisiert.

Ziel ist es Passwörter oder Schlüssel herauszufinden.

Schutz vor Brute Force Attacken mit folgenden Punkten:

SSL/TLS

Mit SSL/TLS kann man Webseiten verschlüsseln

Seit Mitte 2018 braucht man unbedingt ein Zertifikat, ansonsten wird die Webseite als "unsicher" bezeichnet und es kommt eine Meldung auf, dass diese Webseite unsicher ist.

Wie so eine Verschlüsselung funktioniert wird hier mit einem Bild erklärt: