Jest ist ein JavaScript-Testing-Framework, das von Meta (Facebook) entwickelt wurde. Es wird hauptsächlich zum Testen von JavaScript- und TypeScript-Anwendungen verwendet, insbesondere für React-Anwendungen, eignet sich aber auch für Node.js-Backends.
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
// sum.test.js
const sum = require('./sum');
test('addiert 1 + 2 und ergibt 3', () => {
expect(sum(1, 2)).toBe(3);
});Um den Test auszuführen, nutzt du:
jestOder falls du es in einem Projekt installiert hast:
npx jestCSS 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.
@media (Bedingung) {
/* CSS-Regeln, die nur unter dieser Bedingung gelten */
}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;
}
}✅ 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).
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.
Authorization: Bearer <token>.GET /geschuetzte-daten HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456💡 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.
OAuth arbeitet mit Tokens, die einer Anwendung erlauben, im Namen eines Nutzers auf eine Ressource zuzugreifen. Der typische Ablauf sieht so aus:
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.
✅ 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.
<!-- 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.
✔ 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.
✅ 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).
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.
✔ 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.
Ein Controller ist eine zentrale Komponente im Model-View-Controller (MVC)-Architekturmuster. Er fungiert als Vermittler zwischen der Benutzeroberfläche (View) und der Geschäftslogik bzw. den Daten (Model).
Empfangen von Benutzereingaben
Verarbeiten der Anfrage
Kommunikation mit dem Model
Aktualisieren der View
Angenommen, ein Benutzer möchte einen neuen Blogbeitrag erstellen:
class BlogController extends Controller {
public function store(Request $request) {
// Validierung der Benutzereingabe
$request->validate([
'title' => 'required|max:255',
'content' => 'required',
]);
// Neues Blog-Post-Model erstellen und speichern
BlogPost::create([
'title' => $request->input('title'),
'content' => $request->input('content'),
]);
// Weiterleitung zur Blog-Übersicht
return redirect()->route('blog.index')->with('success', 'Post erstellt!');
}
}✔ Ein Controller steuert den Ablauf einer Anwendung und trennt Geschäftslogik von der Präsentation.
✔ Er ermöglicht eine saubere Code-Struktur, da jede Komponente (Model, View, Controller) eine klare Aufgabe hat.
✔ In modernen Frameworks wie Laravel, Django oder ASP.NET gibt es oft vorgefertigte Routing-Mechanismen, die automatisch Anfragen den richtigen Controllern zuordnen.
Model-View-Controller (MVC) ist ein Software-Architekturmuster, das Anwendungen in drei Hauptkomponenten unterteilt:
Model (Daten & Logik)
View (Benutzeroberfläche)
Controller (Steuerung & Interaktion)
✔ Bessere Wartbarkeit durch klare Trennung von Logik, UI und Steuerung.
✔ Wiederverwendbarkeit der Komponenten.
✔ Einfache Testbarkeit, da Logik vom Interface getrennt ist.
✔ Flexibilität, da verschiedene Views für dasselbe Model genutzt werden können.
MVC wird häufig in Webentwicklung und Desktop-Anwendungen verwendet, z. B.:
Anfrage-Header (Request Headers) sind HTTP-Header, die ein Client (z. B. ein Webbrowser oder eine API-Anfrage) an den Server sendet, um zusätzliche Informationen über die Anfrage, den Client oder die gewünschten Inhalte bereitzustellen.
1. Host
Host: www.example.com2. User-Agent
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)3. Accept
Accept: text/html, application/json4. Accept-Language
Accept-Language: de-DE, en-US5. Accept-Encoding
Accept-Encoding: gzip, deflate, br6. Referer
Referer: https://www.google.com/7. Authorization
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=8. Cookie
Cookie: sessionId=abc123; theme=dark9. Content-Type (bei POST/PUT-Anfragen)
Content-Type: application/json10. Origin
Origin: https://www.example.comDiese Header helfen dem Server, die Anfrage zu verstehen und entsprechend zu reagieren, indem sie Details über den Client, die bevorzugten Inhalte und Sicherheitsaspekte liefern.
Allgemeine HTTP-Header sind Header, die sowohl in HTTP-Anfragen als auch in HTTP-Antworten verwendet werden können. Sie enthalten allgemeine Informationen zur Verbindung und Datenübertragung, die nicht spezifisch für den Client, den Server oder den Inhalt sind.
1. Cache-Control
Cache-Control: no-cache, no-store, must-revalidate2. Connection
Connection: keep-alive3. Date
Date: Wed, 31 Jan 2025 12:34:56 GMT4. Pragma (veraltet, aber noch genutzt)
Cache-Control, wird aber hauptsächlich für rückwärtskompatible Caching-Regeln genutzt.Pragma: no-cache5. Trailer
Trailer: Expires6. Transfer-Encoding
Transfer-Encoding: chunked7. Upgrade
Upgrade: websocket8. Via
Via: 1.1 proxy.example.comDiese Header sorgen für eine effizientere Kommunikation zwischen Client und Server, steuern das Caching und ermöglichen Protokoll-Upgrades.
Redux
