Ein SUT (System Under Test) ist das System oder die Komponente, die in einem Testprozess geprüft wird. Der Begriff wird häufig in der Softwareentwicklung und Qualitätssicherung verwendet.

Bedeutung und Anwendung:

• In Softwaretests bezeichnet der SUT das gesamte Programm, ein einzelnes Modul oder eine spezifische Funktion, die getestet wird.
• In Hardwaretests kann der SUT ein elektronisches Gerät oder eine Maschine sein, die überprüft wird.
• In automatisierten Tests wird der SUT oft mit Testframeworks und Tools getestet, um Fehler oder unerwartetes Verhalten zu identifizieren.

Ein typischer Testprozess umfasst:

1. Definition der Testfälle basierend auf den Anforderungen.
2. Ausführung der Tests auf dem SUT.
3. Überprüfung der Testergebnisse und Abgleich mit den erwarteten Werten.

SSH (Secure Shell) ist ein Netzwerkprotokoll, das eine verschlüsselte Verbindung zwischen zwei Computern herstellt. Es wird hauptsächlich verwendet, um sich sicher auf entfernte Systeme (z. B. Server) einzuloggen und Befehle auszuführen.

Wichtige Eigenschaften von SSH

• Sicherheit: Daten werden verschlüsselt übertragen, was vor Abhören und Manipulation schützt.
• Authentifizierung: Zugriff kann über Passwörter oder SSH-Schlüssel erfolgen.
• Tunnel-Funktionalität: Kann zur sicheren Weiterleitung von Datenverkehr genutzt werden.
• Dateitransfer: Ermöglicht mit SCP oder SFTP das Übertragen von Dateien zwischen Rechnern.

SSH-Befehle (Grundlagen)

• Verbindung herstellen:

ssh benutzername@server-ip

• Dateiübertragung mit SCP:

scp datei.txt benutzername@server-ip:/zielverzeichnis/

• Öffentlichen SSH-Schlüssel hinterlegen (für passwortlose Anmeldung):

ssh-copy-id benutzername@server-ip

SSH wird oft von Entwicklern und Administratoren genutzt, um Server zu verwalten oder sichere Verbindungen für andere Anwendungen aufzubauen.

TortoiseGit ist eine grafische Benutzeroberfläche (GUI) für Git, die speziell für Windows entwickelt wurde. Es handelt sich um eine Erweiterung für den Windows Explorer, mit der sich Git-Repositories direkt per Kontextmenü verwalten lassen.

Hauptmerkmale von TortoiseGit:

✅ Integration in den Windows Explorer → Kein separates Tool nötig, alles über das Rechtsklick-Menü erreichbar
✅ Einfache Bedienung → Ideal für Nutzer, die sich mit der Git-Kommandozeile nicht auskennen
✅ Visuelle Unterstützung → Änderungen, Diffs, Logs und Branches werden grafisch dargestellt
✅ Push, Pull, Commit & Merge → Standard-Git-Funktionen über eine Benutzeroberfläche
✅ Unterstützung für mehrere Repositories → Verwaltung mehrerer Projekte parallel

Für wen ist TortoiseGit geeignet?

• Windows-Nutzer, die mit Git arbeiten, aber nicht die Kommandozeile nutzen möchten
• Webentwickler & Softwareentwickler, die eine einfache Git-Verwaltung suchen
• Teams, die Git nutzen, aber eine visuelle Unterstützung benötigen

Voraussetzung:

TortoiseGit benötigt eine Git-Installation (z. B. Git for Windows), um zu funktionieren.

➡ Download & Infos: https://tortoisegit.org/

Eine Single Page Application (SPA) ist eine Webanwendung, die vollständig innerhalb einer einzigen HTML-Seite läuft. Statt bei jeder Benutzerinteraktion eine neue Seite vom Server zu laden, werden Inhalte dynamisch über JavaScript aktualisiert. Dies führt zu einer schnellen, flüssigen Benutzererfahrung, ähnlich wie bei nativen Apps.

Merkmale einer SPA:

• Dynamisches Nachladen von Inhalten: Neue Inhalte werden per AJAX oder Fetch API geladen, ohne die Seite neu zu laden.
• Client-seitiges Routing: Die Navigation erfolgt über JavaScript (z. B. mit React Router oder Vue Router).
• State-Management: SPAs nutzen oft Bibliotheken wie Redux, Vuex oder Zustand zur Verwaltung des Anwendungszustands.
• Trennung von Frontend und Backend: Das Backend dient meist nur als API (z. B. REST oder GraphQL).

Vorteile:

✅ Schnelle Ladezeiten nach dem ersten Aufruf
✅ Bessere Benutzererfahrung (keine Seiten-Neuladungen)
✅ Offline-Funktionalität durch Service Worker möglich

Nachteile:

❌ Erster Ladevorgang kann langsam sein (größerer JavaScript-Bundle)
❌ SEO-Probleme (da Inhalte oft erst per JavaScript geladen werden)
❌ Komplexere Implementierung, insbesondere bei Sicherheit und Routing

Typische Frameworks für SPAs sind React, Angular und Vue.js.

CSS Media Queries sind eine Technik in CSS, mit der sich das Layout einer Webseite an verschiedene Bildschirmgrößen, Auflösungen und Gerätetypen anpassen lässt. Sie sind ein zentraler Bestandteil des Responsive Web Designs.

Syntax:

@media (Bedingung) {
    /* CSS-Regeln, die nur unter dieser Bedingung gelten */
}

Beispiele:

1. Anpassung an verschiedene Bildschirmbreiten:

/* Für Bildschirme mit maximal 600px Breite (z. B. Smartphones) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

2. Unterscheidung zwischen Hoch- und Querformat:

@media (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

3. Spezielle Stile für Druckausgabe:

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: none;
    }
}

Typische Anwendungsfälle:

✅ Mobile-First-Design: Webseiten für kleine Displays optimieren und dann für größere Bildschirme erweitern.
✅ Dark Mode: Stile je nach Nutzerpräferenz anpassen (prefers-color-scheme).
✅ Retina-Displays: Hochauflösende Bilder oder spezielle Stile für Displays mit hoher Pixeldichte (min-resolution: 2dppx).

Was ist Responsive Design?

Responsive Design ist eine Technik im Webdesign, bei der sich eine Website automatisch an verschiedene Bildschirmgrößen und Geräte anpasst. Dadurch bleibt die Benutzerfreundlichkeit sowohl auf großen Desktop-Monitoren als auch auf Tablets und Smartphones erhalten, ohne dass separate Versionen der Website erforderlich sind.

Wie funktioniert Responsive Design?

Responsive Design wird durch folgende Techniken umgesetzt:

1. Flexible Layouts

• Die Website verwendet prozentuale Breiten anstelle fester Pixelwerte, sodass sich Elemente dynamisch anpassen.

2. Media Queries (CSS)

• Über CSS Media Queries kann das Layout je nach Bildschirmgröße angepasst werden. Beispiel:

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

• → Dieser Code ändert die Hintergrundfarbe für Bildschirme kleiner als 768px.

3. Flexible Bilder und Medien

• Bilder und Videos passen sich automatisch der Bildschirmbreite an, oft mit:

img {
    max-width: 100%;
    height: auto;
}

4. Mobile-First Ansatz

• Das Design wird zuerst für kleine Bildschirme entwickelt und anschließend für größere Displays erweitert.

Vorteile von Responsive Design

✅ Bessere Nutzererfahrung auf allen Geräten
✅ SEO-Vorteile, da Google mobilfreundliche Seiten bevorzugt
✅ Keine doppelte Wartung für Desktop- und Mobile-Versionen
✅ Höhere Conversion-Rate, weil Nutzer die Seite einfacher bedienen können

Fazit

Responsive Design ist heute Standard im modernen Webdesign, da es eine optimale Darstellung und Bedienbarkeit auf allen Geräten ermöglicht.

Ein Bearer Token ist eine Art von Zugriffstoken, das zur Authentifizierung und Autorisierung in Webanwendungen und APIs verwendet wird. Der Begriff "Bearer" bedeutet „Inhaber“, was bedeutet, dass jeder, der dieses Token besitzt, Zugriff auf die geschützten Ressourcen hat – ohne zusätzliche Überprüfung.

Merkmale eines Bearer Tokens:

• Selbsttragend: Enthält alle nötigen Informationen zur Authentifizierung.
• Keine zusätzliche Identitätsprüfung: Wer das Token hat, kann es nutzen.
• Wird in HTTP-Headern übertragen: Normalerweise als Authorization: Bearer <token>.
• Oft zeitlich begrenzt: Hat eine Ablaufzeit, um Missbrauch zu reduzieren.
• Wird häufig mit OAuth 2.0 verwendet: Zum Beispiel bei der Authentifizierung mit Drittanbieterdiensten.

Beispiel einer HTTP-Anfrage mit Bearer Token:

GET /geschuetzte-daten HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456

Risiken:

• Kein Schutz bei Diebstahl: Wenn jemand das Token abfängt, kann er sich ausgeben.
• Muss sicher gespeichert werden: Sollte nicht im Client-Code oder in URLs stehen.

💡 Tipp: Um die Sicherheit zu erhöhen, kann man Token mit kurzen Laufzeiten verwenden und sie nur über HTTPS übertragen.

OAuth (Open Authorization) ist ein offenes Standardprotokoll für Autorisierungen, das es Anwendungen ermöglicht, auf Ressourcen eines Nutzers zuzugreifen, ohne dessen Zugangsdaten (z. B. Passwort) direkt zu kennen. Es wird häufig für Single Sign-On (SSO) und API-Zugriffe verwendet.

Wie funktioniert OAuth?

OAuth arbeitet mit Tokens, die einer Anwendung erlauben, im Namen eines Nutzers auf eine Ressource zuzugreifen. Der typische Ablauf sieht so aus:

1. Anfrage auf Autorisierung: Eine Anwendung (Client) möchte auf geschützte Daten eines Nutzers zugreifen (z. B. Facebook-Kontakte).
2. Nutzer-Authentifizierung: Der Nutzer wird zur Anmeldeseite des Anbieters (z. B. Google, Facebook) weitergeleitet und gibt seine Login-Daten ein.
3. Erteilung einer Erlaubnis: Der Nutzer bestätigt, dass die Anwendung auf bestimmte Daten zugreifen darf.
4. Token-Erhalt: Die Anwendung erhält ein Access Token, mit dem sie auf die freigegebenen Daten zugreifen kann.
5. Zugriff auf Ressourcen: Die Anwendung verwendet das Token, um Anfragen an den API-Server zu stellen, ohne das Nutzerpasswort zu kennen.

OAuth 1.0 vs. OAuth 2.0

• OAuth 1.0: Komplexer mit kryptografischer Signatur, aber sicher.
• OAuth 2.0: Einfacher, nutzt HTTPS zur Absicherung, wird heute meist verwendet.

Beispiel-Anwendungen von OAuth

• "Mit Google/Facebook/Apple anmelden"-Buttons
• Drittanbieter-Apps, die auf APIs von Google Drive, Dropbox oder Twitter zugreifen
• Zahlungsdienste wie PayPal, die sich in andere Apps integrieren

Die View ist die Präsentationsschicht in der MVC-Architektur. Sie ist dafür verantwortlich, die Daten aus dem Model in einer für den Benutzer verständlichen Form darzustellen.

Hauptaufgaben der View

✅ Darstellung von Daten: Zeigt Informationen aus dem Model an (z. B. eine Liste von Blogartikeln).
✅ Reaktion auf Benutzerinteraktionen: Nimmt Eingaben entgegen und leitet sie an den Controller weiter.
✅ Formatierung & Layout: Strukturiert Inhalte mit HTML, CSS oder Templates (z. B. in Laravel Blade oder Twig).
✅ Vermeidung von Geschäftslogik: Enthält keine Datenverarbeitung, sondern nur Darstellung.

Wie funktioniert die View in MVC?

1. Der Benutzer sendet eine Anfrage (z. B. „Zeige alle Blogartikel“).
2. Der Controller ruft das Model auf, um die Daten abzurufen.
3. Das Model liefert die benötigten Daten zurück.
4. Die View erhält die Daten vom Controller und stellt sie dar.

Beispiel: Blog-System (View in Laravel Blade)

<!-- resources/views/blog/index.blade.php -->
@extends('layouts.app')

@section('content')
    <h1>Blog Posts</h1>
    @foreach ($posts as $post)
        <div>
            <h2>{{ $post->title }}</h2>
            <p>{{ $post->content }}</p>
        </div>
    @endforeach
@endsection

🔹 @foreach: Durchläuft die Liste der Blogartikel und zeigt sie an.
🔹 {{ $post->title }}: Gibt den Titel des Blogartikels aus.

Fazit

✔ Die View sorgt für die Darstellung der Daten, ohne sie selbst zu verarbeiten.
✔ Sie hilft, die Trennung von Logik und Darstellung sauber umzusetzen.
✔ Durch Templates oder Frontend-Technologien (z. B. Vue.js, React) kann die View dynamisch gestaltet werden.

Das Model ist die Daten- und Logikschicht in der MVC-Architektur. Es verwaltet die Daten der Anwendung und stellt sicher, dass sie korrekt gespeichert, abgerufen und verarbeitet werden.

Hauptaufgaben des Models

✅ Datenverwaltung: Speichert und verwaltet Daten, z. B. in einer Datenbank.
✅ Geschäftslogik: Enthält Regeln und Berechnungen (z. B. Rabattberechnung für Bestellungen).
✅ Datenvalidierung: Überprüft, ob Eingaben korrekt sind (z. B. ob eine E-Mail-Adresse gültig ist).
✅ Kommunikation mit der Datenbank: Führt CRUD-Operationen aus (Create, Read, Update, Delete).

Wie funktioniert das Model in MVC?

1. Der Benutzer sendet eine Anfrage (z. B. „Zeige alle Blogartikel“).
2. Der Controller verarbeitet die Anfrage und ruft das Model auf.
3. Das Model fragt die Datenbank ab und liefert die Daten zurück.
4. Der Controller übergibt die Daten an die View zur Anzeige.

Beispiel: Blog-System (Model in Laravel)

class BlogPost extends Model {
    protected $fillable = ['title', 'content']; // Erlaubte Felder für Massenverarbeitung

    // Beziehung: Ein Blogpost gehört zu einem Benutzer
    public function user() {
        return $this->belongsTo(User::class);
    }
}

🔹 fillable: Bestimmt, welche Felder gespeichert werden dürfen.
🔹 belongsTo(User::class): Zeigt an, dass jeder Blogpost zu einem Benutzer gehört.

Fazit

✔ Das Model verwaltet alle Daten und Geschäftslogik der Anwendung.
✔ Es sorgt für eine klare Trennung von Daten und Darstellung.
✔ Änderungen an der Datenstruktur müssen nur im Model erfolgen, nicht in der gesamten Anwendung.