The Whoops PHP library is a powerful and user-friendly error handling tool for PHP applications. It provides clear and well-structured error pages, making it easier to debug and fix issues.
✅ Beautiful, interactive error pages
✅ Detailed stack traces with code previews
✅ Easy integration into existing PHP projects
✅ Support for various frameworks (Laravel, Symfony, Slim, etc.)
✅ Customizable with custom handlers and loggers
You can install Whoops using Composer:
composer require filp/whoops
Here's a simple example of how to enable Whoops in your PHP project:
require 'vendor/autoload.php';
use Whoops\Run;
use Whoops\Handler\PrettyPageHandler;
$whoops = new Run();
$whoops->pushHandler(new PrettyPageHandler());
$whoops->register();
// Trigger an error (e.g., calling an undefined variable)
echo $undefinedVariable;
If an error occurs, Whoops will display a clear and visually appealing debug page.
You can extend Whoops by adding custom error handling, for example:
use Whoops\Handler\CallbackHandler;
$whoops->pushHandler(new CallbackHandler(function ($exception, $inspector, $run) {
error_log($exception->getMessage());
}));
This version logs errors to a file instead of displaying them.
Whoops is mainly used in development environments to quickly detect and fix errors. However, in production environments, it should be disabled or replaced with a custom error page.
The Fetch API is a modern JavaScript interface for retrieving resources over the network, such as making HTTP requests to an API or loading data from a server. It largely replaces the older XMLHttpRequest
method and provides a simpler, more flexible, and more powerful way to handle network requests.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json()) // Convert response to JSON
.then(data => console.log(data)) // Log the data
.catch(error => console.error('Error:', error)); // Handle errors
Making a POST Request
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: 'New Post', body: 'Post content', userId: 1 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
✅ Simpler syntax compared to XMLHttpRequest
✅ Supports async/await
for better readability
✅ Flexible request and response handling
✅ Better error management using Promises
The Fetch API is now supported in all modern browsers and is an essential technique for web development.
A Single Page Application (SPA) is a web application that runs entirely within a single HTML page. Instead of reloading the entire page for each interaction, it dynamically updates the content using JavaScript, providing a smooth, app-like user experience.
✅ Faster interactions after the initial load
✅ Improved user experience (no full page reloads)
✅ Offline functionality possible via Service Workers
❌ Initial load time can be slow (large JavaScript bundle)
❌ SEO challenges (since content is often loaded dynamically)
❌ More complex implementation, especially for security and routing
Popular frameworks for SPAs include React, Angular, and Vue.js.
CSS Media Queries are a technique in CSS that allows a webpage layout to adapt to different screen sizes, resolutions, and device types. They are a core feature of Responsive Web Design.
@media (condition) {
/* CSS rules that apply only under this condition */
}
1. Adjusting for different screen widths:
/* For screens with a maximum width of 600px (e.g., smartphones) */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
2. Detecting landscape vs. portrait orientation:
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}
3. Styling for print output:
@media print {
body {
font-size: 12pt;
color: black;
background: none;
}
}
✅ Mobile-first design: Optimizing websites for small screens first and then expanding for larger screens.
✅ Dark mode: Adjusting styles based on user preference (prefers-color-scheme
).
✅ Retina displays: Using high-resolution images or specific styles for high pixel density screens (min-resolution: 2dppx
).
A Bearer Token is a type of access token used for authentication and authorization in web applications and APIs. The term "Bearer" means "holder," which implies that anyone in possession of the token can access protected resources—without additional verification.
Authorization: Bearer <token>
.GET /protected-data HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456
💡 Tip: To enhance security, use short-lived tokens and transmit them only over HTTPS.
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.