Tech Stack
Functies
Publieke website
- Overzichtspagina — PROJECTEN 2026 met projectenlijst
- Rood hover-effect op de projectenlijst
- Links naar fratsemacher.nl en vettebeeldenmedia.nl
- Projectdetailpagina — foto's, omschrijving, datums, locatie
- Medewerkers, subsidiegevers, sponsoren en website-URL per project
Admin-paneel
- Beveiligd admin-paneel op /admin (Manus OAuth)
- Rolgebaseerde toegang (admin / gebruiker)
- Projecten aanmaken, bewerken en verwijderen
- Foto's uploaden per project (max. 3 per project, S3)
- Beheer-knop in de footer van alle publieke pagina's
API & Integraties
- Publieke JSON REST API: /api/json/projecten
- Publieke JSON REST API: /api/json/projecten/:id
- WordPress-plugin v2.0.0 (.zip) — shortcode [vettebeelden_projecten]
- Foto-thumbnails in plugin (zwart-wit, kleur bij hover)
- Aanpasbare accentkleur via WordPress admin
- Automatische cache-verversing via webhook bij projectwijziging
Database-schema
projecten
Primaire sleutel, auto-increment
Projectnaam (verplicht)
Startdatum (verplicht)
Einddatum (optioneel)
Locatie (verplicht)
Beschrijving (verplicht)
Externe URL (optioneel)
Komma-gescheiden namen (optioneel)
Komma-gescheiden namen (optioneel)
Komma-gescheiden namen (optioneel)
| Veld | Type | Opmerking |
|---|---|---|
| id | INT | Primaire sleutel, auto-increment |
| naam | VARCHAR | Projectnaam (verplicht) |
| startdatum | DATE | Startdatum (verplicht) |
| einddatum | DATE | Einddatum (optioneel) |
| locatie | VARCHAR | Locatie (verplicht) |
| omschrijving | TEXT | Beschrijving (verplicht) |
| websiteUrl | VARCHAR | Externe URL (optioneel) |
| medewerkers | TEXT | Komma-gescheiden namen (optioneel) |
| subsidiegevers | TEXT | Komma-gescheiden namen (optioneel) |
| sponsoren | TEXT | Komma-gescheiden namen (optioneel) |
fotos
Primaire sleutel, auto-increment
FK → projecten.id (cascade delete)
S3-opslag URL
S3-sleutel voor beheer
Weergavevolgorde (0–2)
| Veld | Type | Opmerking |
|---|---|---|
| id | INT | Primaire sleutel, auto-increment |
| projectId | INT | FK → projecten.id (cascade delete) |
| url | VARCHAR | S3-opslag URL |
| sleutel | VARCHAR | S3-sleutel voor beheer |
| volgorde | INT | Weergavevolgorde (0–2) |
URL-structuur
/
Publieke projectenlijst
/project/:id
Publieke projectdetailpagina
/admin
Admin-login (Manus OAuth)
/admin/dashboard
Admin-dashboard (projectbeheer)
/admin/project/nieuw
Nieuw project aanmaken
/admin/project/:id/bewerken
Bestaand project bewerken
/api/json/projecten
REST API — alle projecten (JSON)
/api/json/projecten/:id
REST API — één project (JSON)
| Pad | Beschrijving |
|---|---|
| / | Publieke projectenlijst |
| /project/:id | Publieke projectdetailpagina |
| /admin | Admin-login (Manus OAuth) |
| /admin/dashboard | Admin-dashboard (projectbeheer) |
| /admin/project/nieuw | Nieuw project aanmaken |
| /admin/project/:id/bewerken | Bestaand project bewerken |
| /api/json/projecten | REST API — alle projecten (JSON) |
| /api/json/projecten/:id | REST API — één project (JSON) |
Volgende stappen
Webhook instellen: WORDPRESS_WEBHOOK_URL en WORDPRESS_WEBHOOK_SECRET toevoegen als omgevingsvariabelen
Admin-account aanmaken: log in via /admin en promoveer uw e-mailadres naar admin-rol in de database
Projecten toevoegen via het admin-paneel
WordPress-plugin installeren en shortcode [vettebeelden_projecten] plaatsen op uw WordPress-site
WordPress-integratie
Plugin installatie
- 01Download de plugin-zip via het admin-paneel
- 02Upload via WordPress → Plugins → Nieuwe plugin → Plugin uploaden
- 03Activeer de plugin en stel de API-URL in
- 04Plaats de shortcode op een pagina of bericht
Shortcode opties
Standaard weergave met foto-thumbnails en aanpasbare accentkleur.