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:
Twig ist ein leistungsfähiges und flexibles Templating-System für PHP, das häufig in Symfony, aber auch in anderen PHP-Projekten verwendet wird. Es ermöglicht eine klare Trennung von Logik und Präsentation und bietet viele nützliche Features für die Frontend-Entwicklung.
{{ }})Twig verwendet doppelte geschweifte Klammern für die Ausgabe von Variablen:
<p>Hallo, {{ name }}!</p>→ Wenn name = "Max" ist, wird ausgegeben:
"Hallo, Max!"
{% %})Twig unterstützt if-else, Schleifen und andere Kontrollstrukturen:
{% if user.isAdmin %}
<p>Willkommen, Admin!</p>
{% else %}
<p>Willkommen, Nutzer!</p>
{% endif %}Schleifen (for)
<ul>
{% for user in users %}
<li>{{ user.name }}</li>
{% endfor %}
</ul>Twig unterstützt das Konzept von "Base-Layouts", ähnlich wie Blade in Laravel.
base.html.twig)<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Meine Seite{% endblock %}</title>
</head>
<body>
<header>{% block header %}Standard-Header{% endblock %}</header>
<main>{% block content %}{% endblock %}</main>
</body>
</html>Kind-Template (page.html.twig)
{% extends 'base.html.twig' %}
{% block title %}Startseite{% endblock %}
{% block content %}
<p>Willkommen auf meiner Seite!</p>
{% endblock %}→ Die Blöcke überschreiben die Standardinhalte des Basis-Templates.
Man kann wiederverwendbare Teile wie Header oder Footer einbinden:
{% include 'partials/navbar.html.twig' %}Twig enthält viele Filter, um Inhalte zu formatieren:
| Filter | Beispiel | Ausgabe |
|---|---|---|
upper |
`{{ "text" | upper }}` |
lower |
`{{ "TEXT" | lower }}` |
length |
`{{ "Hallo" | length }}` |
date |
`{{ "now" | date("d.m.Y") }}` |
Twig escapet HTML automatisch, um XSS-Angriffe zu verhindern:
{{ "<script>alert('XSS');</script>" }}→ Gibt nur <script>alert('XSS');</script> aus.
Möchtest du HTML ungefiltert ausgeben, nutze |raw:
{{ "<strong>Fett</strong>"|raw }}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.
Das Catalyst Framework ist ein flexibles und leistungsstarkes Web-Framework für Perl. Es ermöglicht die Entwicklung skalierbarer und wartbarer Webanwendungen und orientiert sich an dem Model-View-Controller (MVC)-Designmuster.
✅ MVC-Architektur – Saubere Trennung von Geschäftslogik, Darstellung und Datenverwaltung
✅ Flexibilität – Unterstützt verschiedene Template-Systeme und ORM-Lösungen wie DBIx::Class
✅ Erweiterbarkeit – Viele Plugins und Module verfügbar
✅ Asynchronität – Lässt sich mit Event-Driven Architekturen kombinieren
✅ REST-APIs & WebSockets – Unterstützung für moderne Web-Technologien
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.
Hot Module Replacement (HMR) ist eine Webentwicklungstechnik, die es ermöglicht, Codeänderungen in einer laufenden Anwendung sofort anzuwenden, ohne die gesamte Seite neu zu laden. Dies verbessert die Entwicklungsproduktivität erheblich, da der Zustand der Anwendung (z. B. Benutzereingaben oder UI-Zustand) erhalten bleibt.
HMR wird in modernen Build-Tools wie Webpack, Vite, Parcel oder esbuild verwendet. Der Prozess läuft folgendermaßen ab:
✅ Schnellere Entwicklungszeiten – Kein vollständiger Seitenreload nötig.
✅ Erhalt des Anwendungszustands – Besonders nützlich bei React, Vue oder anderen SPA-Frameworks.
✅ Direkte CSS-Updates – Änderungen an CSS-Dateien werden sofort sichtbar.
✅ Bessere DX (Developer Experience) – Weniger Unterbrechungen beim Coden.
Falls du Webpack nutzt, kannst du HMR aktivieren mit:
if (module.hot) {
module.hot.accept('./module.js', function() {
console.log('Module updated!');
});
}Dies stellt sicher, dass Änderungen an module.js geladen werden, ohne dass die gesamte Anwendung neu startet.
CORS (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus, der von Webbrowsern implementiert wird, um zu kontrollieren, welche Webseiten auf Ressourcen von anderen Domains zugreifen dürfen. Standardmäßig blockieren Browser aus Sicherheitsgründen sogenannte Cross-Origin-Anfragen, also Anfragen von einer Webseite an eine andere Domain, ein anderes Protokoll oder einen anderen Port.
Ohne CORS könnten bösartige Webseiten im Hintergrund Anfragen an andere Server senden (z. B. API-Server oder Banking-Seiten), wodurch sensible Daten gestohlen oder missbraucht werden könnten (Cross-Site Request Forgery, CSRF). CORS sorgt dafür, dass nur explizit erlaubte Webseiten auf Ressourcen zugreifen dürfen.
Wenn eine Webanwendung eine Cross-Origin-Anfrage stellt (z. B. von http://example.com an https://api.example.com), sendet der Browser automatisch eine CORS-Anfrage. Der Server kann dann in den HTTP-Headern antworten, ob die Anfrage erlaubt ist:
Ohne CORS-Header:
Der Browser blockiert die Anfrage.
Mit CORS-Headern:
Der Server kann mit Access-Control-Allow-Origin: * (alle Domains) oder einer bestimmten Domain (Access-Control-Allow-Origin: https://example.com) antworten. Damit wird der Zugriff erlaubt.
Für einige Anfragen (z. B. mit PUT, DELETE, speziellen Headern) führt der Browser einen Preflight-Request mit der OPTIONS-Methode aus. Der Server muss dann mit den richtigen CORS-Headern antworten, um die Hauptanfrage zu ermöglichen.
CORS ist eine wichtige Sicherheitsmaßnahme, die verhindert, dass unerlaubte Webseiten auf fremde Ressourcen zugreifen. Entwickler müssen serverseitig die richtigen Header setzen, um den Zugriff für legitime Clients zu erlauben.
Das Flask Framework ist ein beliebtes, leichtgewichtiges Webframework für die Programmiersprache Python. Es wird häufig für die Entwicklung von Webanwendungen und APIs verwendet und zeichnet sich durch seine Einfachheit und Flexibilität aus. Flask ist ein sogenanntes Micro-Framework, da es nur die grundlegenden Funktionen für die Webentwicklung bietet und keine unnötigen Zusatzfunktionen oder Bibliotheken enthält. Dadurch bleibt es schlank und anpassungsfähig.
Flask-SQLAlchemy oder Flask-Login hinzugefügt werden.Flask eignet sich besonders gut für:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=True)Im Vergleich zu Django (einem umfassenderen Python-Webframework) ist Flask weniger umfangreich, bietet jedoch mehr Freiheit. Während Django eine „Batteries included“-Philosophie verfolgt und viele Funktionen bereits integriert hat, ist Flask ideal, wenn du nur das benötigst, was du selbst einbauen möchtest.
Tailwind
