OAuth (Open Authorization) is an open standard protocol for authorization that allows applications to access a user's resources without knowing their credentials (e.g., password). It is commonly used for Single Sign-On (SSO) and API access.
OAuth operates using tokens, which allow an application to access a user's data on their behalf. The typical flow is as follows:
Twig is a powerful and flexible templating engine for PHP, commonly used in Symfony but also in other PHP projects. It helps separate logic from presentation and offers many useful features for frontend development.
{{ }}
)Twig uses double curly braces to output variables:
<p>Hello, {{ name }}!</p>
→ If name = "Max"
, the output will be:
"Hello, Max!"
{% %}
)Twig supports if-else statements, loops, and other control structures.
{% if user.isAdmin %}
<p>Welcome, Admin!</p>
{% else %}
<p>Welcome, User!</p>
{% endif %}
Loops (for
)
<ul>
{% for user in users %}
<li>{{ user.name }}</li>
{% endfor %}
</ul>
Twig supports "Base Layouts", similar to Laravel's Blade.
base.html.twig
)<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Page{% endblock %}</title>
</head>
<body>
<header>{% block header %}Default Header{% endblock %}</header>
<main>{% block content %}{% endblock %}</main>
</body>
</html>
Child Template (page.html.twig
)
{% extends 'base.html.twig' %}
{% block title %}Homepage{% endblock %}
{% block content %}
<p>Welcome to my website!</p>
{% endblock %}
→ The blocks override the default content from the base template.
You can include reusable components like a navbar or footer:
{% include 'partials/navbar.html.twig' %}
Twig provides many filters to format content:
Filter | Beispiel | Ausgabe |
---|---|---|
upper |
`{{ "text" | upper }}` |
lower |
`{{ "TEXT" | lower }}` |
length |
`{{ "Hallo" | length }}` |
date |
`{{ "now" | date("d.m.Y") }}` |
Twig automatically escapes HTML to prevent XSS attacks:
{{ "<script>alert('XSS');</script>" }}
→ Outputs: <script>alert('XSS');</script>
To output raw HTML, use |raw
:
{{ "<strong>Bold</strong>"|raw }}
The View is the presentation layer in the MVC architecture. It is responsible for displaying data from the Model in a user-friendly format.
✅ Displaying Data: Shows information from the Model (e.g., a list of blog posts).
✅ Reacting to User Interactions: Accepts user input and sends it to the Controller.
✅ Formatting & Layout: Structures content using HTML, CSS, or templating engines (e.g., Laravel Blade or Twig).
✅ Avoiding Business Logic: Contains only presentation logic, not data processing.
<!-- 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
: Loops through the list of blog posts and displays them.
🔹 {{ $post->title }}
: Outputs the title of the blog post.
✔ The View is responsible for presentation but does not process data.
✔ It ensures a clear separation between logic and display.
✔ Using templates or frontend technologies (e.g., Vue.js, React), the View can be dynamically rendered.
The Model is the data and logic layer in the MVC architecture. It manages the application's data and ensures that it is correctly stored, retrieved, and processed.
✅ Data Management: Stores and handles data, often in a database.
✅ Business Logic: Contains rules and calculations (e.g., discount calculation for orders).
✅ Data Validation: Checks if input is correct (e.g., if an email address is valid).
✅ Database Communication: Performs CRUD operations (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
: Specifies which fields can be saved.
🔹 belongsTo(User::class)
: Indicates that each blog post belongs to a user.
✔ The Model handles all data and business logic of the application.
✔ It ensures a clear separation between data and presentation.
✔ Changes to the data structure only need to be made in the Model, not throughout the entire application.
A Controller is a key component in the Model-View-Controller (MVC) architecture. It acts as an intermediary between the user interface (View) and the business logic or data (Model).
Handling User Input
Processing the Request
Interacting with the Model
Updating the View
Suppose a user wants to create a new blog post:
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!');
}
}
✔ A controller manages the flow of an application and separates business logic from presentation.
✔ It ensures clean code structure, as each component (Model, View, Controller) has a specific responsibility.
✔ Modern frameworks like Laravel, Django, or ASP.NET often include built-in routing mechanisms that automatically direct requests to the appropriate controllers.
The Catalyst Framework is a flexible and powerful web framework for Perl. It enables the development of scalable and maintainable web applications and follows the Model-View-Controller (MVC) design pattern.
✅ MVC Architecture – Clear separation of business logic, presentation, and data management
✅ Flexibility – Supports various templating systems and ORM solutions like DBIx::Class
✅ Extensibility – Many plugins and modules available
✅ Asynchronous Capabilities – Can be integrated with event-driven architectures
✅ REST APIs & WebSockets – Support for modern web technologies
Request headers are HTTP headers sent by a client (e.g., a web browser or API request) to the server, providing additional information about the request, the client, or the desired content.
1. Host
Host: www.example.com
2. User-Agent
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
3. Accept
Accept: text/html, application/json
4. Accept-Language
Accept-Language: de-DE, en-US
5. Accept-Encoding
Accept-Encoding: gzip, deflate, br
6. Referer
Referer: https://www.google.com/
7. Authorization
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
8. Cookie
Cookie: sessionId=abc123; theme=dark
9. Content-Type
(for POST/PUT-Anfragen)
Content-Type: application/json
10. Origin
Origin: https://www.example.com
These headers help the server understand the request and respond accordingly by providing details about the client, preferred content, and security aspects.
Hot Module Replacement (HMR) is a web development technique that allows code changes to be applied instantly in a running application without requiring a full page reload. This significantly improves development productivity since the application's state (e.g., user input or UI state) is preserved.
HMR is used in modern build tools like Webpack, Vite, Parcel, or esbuild. The process works as follows:
✅ Faster development cycles – No need for full-page reloads.
✅ Preserved application state – Useful for React, Vue, and other SPA frameworks.
✅ Instant CSS updates – Style changes appear immediately.
✅ Improved DX (Developer Experience) – Reduces workflow interruptions.
If you're using Webpack, you can enable HMR like this:
if (module.hot) {
module.hot.accept('./module.js', function() {
console.log('Module updated!');
});
}
This ensures that changes to module.js
are applied without restarting the entire application.
CORS (Cross-Origin Resource Sharing) is a security mechanism implemented by web browsers to control which websites can access resources from other domains. By default, browsers block cross-origin requests—requests made from one website to another domain, protocol, or port—for security reasons.
Without CORS, malicious websites could secretly send requests to other servers (e.g., API servers or banking sites), potentially stealing or misusing sensitive data (Cross-Site Request Forgery, CSRF). CORS ensures that only explicitly allowed websites can access resources.
When a web application makes a cross-origin request (e.g., from http://example.com
to https://api.example.com
), the browser automatically sends a CORS request. The server must then respond with specific HTTP headers to indicate whether the request is allowed:
Without CORS headers:
The browser blocks the request.
With CORS headers:
The server can respond with Access-Control-Allow-Origin: *
(allowing all domains) or a specific domain (Access-Control-Allow-Origin: https://example.com
). This enables access.
For certain requests (e.g., PUT
, DELETE
, or requests with custom headers), the browser sends a preflight request using the OPTIONS
method. The server must respond with the correct CORS headers to allow the main request.
CORS is a crucial security measure that prevents unauthorized websites from accessing foreign resources. Developers must configure the correct server-side headers to allow legitimate clients to access the data.
The Flask Framework is a popular, lightweight web framework for the Python programming language. It's widely used for developing web applications and APIs and is known for its simplicity and flexibility. Flask is a micro-framework, meaning it provides only the core functionalities needed for web development without unnecessary extras. This keeps it lightweight and customizable.
Flask-SQLAlchemy
or Flask-Login
.Flask is particularly suited for:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
if __name__ == '__main__':
app.run(debug=True)
Compared to Django (a more comprehensive Python web framework), Flask is less opinionated and provides more freedom. While Django follows a "batteries-included" philosophy with many features built-in, Flask is ideal when you want to build only the parts you need.