LevensLoop Applicatie publieke release 1.0

Met dank aan alle goede ideetjes die er op mijn kabouter plankje waren gekomen...

Beste volgers,
Eindelijk heb ik iets te melden waar ik aan gewerkt heb: mijn ‘LevensLoop’ applicatie is nu publiek!

Het is een tool waarmee je op een interactieve tijdlijn je levensgebeurtenissen visueel in kaart kunt brengen, compleet met ‘impactscores’ om trends te ontdekken. Ik hoop dat het functioneel nuttig kan zijn, of anders kan dienen als demonstratie van mijn recent opgevijzelde kennis van o.a. PHP en Git.
Mijn dank aan het team van Mentaal.nl voor hun goede ideeën tijdens de ontwikkeling.
Ik heb dit op twee manieren beschikbaar gemaakt:

Deel 1: De Open Source Code (voor ontwikkelaars)
De volledige applicatie is Open Source (MIT-licentie). Je kunt de code bekijken, downloaden of er zelf aan verder bouwen.
🔗 GitHub Repository:
Release Levensloop v1.0 - Eerste publieke release · PCPal-nl/LevensLoop

Deel 2: De Live Demo (om direct te proberen)
Voor wie de applicatie live wil uitproberen, heb ik ook een demonstratie-omgeving. Je kunt inloggen met een demo-account of je eigen account aanmaken.
🔗 Live Demo URL: https://verhalenherstel.nl/LevensLoop/

Demo Login:
Gebruikersnaam: demo
Wachtwoord: Demonstratie01

Belangrijke Disclaimer

(Lees dit s.v.p.): Je kunt vrij ‘spelen’ met de demo of een eigen account aanmaken, maar dit is geheel op eigen initiatief en risico.
Dit is een project in ontwikkeling. Ik ben geen hulpverlener of grote zorgorganisatie, slechts iemand met een klein datacentrum in zijn woning. Dat betekent enerzijds dat ik persoonlijk geen industrie te werk stel met je data, maar anderzijds ook dat ik (nog) niet dezelfde rigide veiligheidsnormen hanteer als een grote instelling.
Deel dus geen zeer gevoelige data.

📄 Documentatie: Interactieve Levensloop Tijdlijn (Multi-User)

Dit document beschrijft de installatie, configuratie en het gebruik van de Interactieve Levensloop Tijdlijn applicatie.

Het doel van deze tool is om op een visuele en interactieve manier een levensloop in kaart te brengen, waarbij de impact van gebeurtenissen (zowel positief als moeilijk) wordt gevisualiseerd.

Deze documentatie is bedoeld om je te helpen de tool te installeren, te begrijpen en, indien gewenst, verder te ontwikkelen.

1. 💡 Het Concept

De applicatie bestaat uit drie kerndelen:

1. Een Invoerpagina (gebeurtenissen.php): Een formulier waar je gebeurtenissen kunt invoeren. Elke gebeurtenis heeft een datum, een titel, een optionele omschrijving en een “impactscore” (een cijfer van -10 tot +10).

2. Een Visualisatiepagina (index.php): Een interactieve tijdlijn die alle ingevoerde punten toont.

   • Positieve punten staan boven de nullijn, negatieve eronder.

   • De grafiek berekent een “netto gemiddelde trendlijn” die de ontwikkeling van de gemiddelde impact toont.

   • Klik op een punt om de volledige details te lezen.

   • De grafiek is zoom- en sleepbaar.

3. Verbanden leggen: Op de invoerpagina kun je ook twee gebeurtenissen met elkaar verbinden door een lijn te tekenen in de grafiek, inclusief een omschrijving van het verband.

2. 🔐 Beveiliging & Multi-User

De applicatie is nu een multi-user platform, wat betekent dat meerdere gebruikers zich kunnen registreren en elk hun eigen, volledig gescheiden levensloop kunnen bijhouden.

• Registratie & Inloggen: Elke gebruiker maakt een eigen account aan via de register.php pagina. Inloggen gebeurt met een unieke gebruikersnaam en wachtwoord.

• Data-isolatie: De gegevens van elke gebruiker zijn strikt gescheiden. Je kunt alleen je eigen gebeurtenissen en verbanden zien.

• Sessiebeheer: Na het inloggen blijf je standaard 6 uur ingelogd.

• Wachtwoordbeveiliging: Wachtwoorden worden veilig opgeslagen als een cryptografische ‘hash’.

3. 🛠️ Technische Componenten

De tool is gebouwd met:

• Backend: PHP

• Database: MySQL / MariaDB

• Frontend: HTML, JavaScript, TailwindCSS, Chart.js

• Beveiliging: Google reCAPTCHA v3

Alle externe libraries worden via een CDN geladen, dus er zijn geen complexe installatieprocessen (zoals npm) nodig.

4. 🚀 Installatie & Configuratie

Stap 1: Systeemeisen

• Een webserver (Apache, Nginx) met PHP (v7.4+) en de pdo_mysql extensie.

• Een MySQL- of MariaDB-database.

Stap 2: Database Opzetten

1. Log in op je databasebeheer (bijv. phpMyAdmin).

2. Maak een nieuwe database aan.

3. Maak een databasegebruiker aan en geef deze alle rechten op de nieuwe database.

4. Importeer het levensloop.sql bestand. Dit maakt de benodigde tabellen (users, gebeurtenissen, verbanden) aan.

Stap 3: Bestanden Plaatsen

Plaats alle projectbestanden op de webserver.

Stap 4: De Applicatie Configureren

1. Hernoem config.example.php naar config.php.

2. Open config.php en vul de volgende gegevens in:

   • Database Verbinding: DB_HOST, DB_NAME, DB_USER, DB_PASS.

   • Google reCAPTCHA v3: Maak je eigen (gratis) keys aan via google.com/recaptcha/admin en plak de SITE KEY en SECRET KEY.

   • Sessie Duur: SESSION_TIMEOUT_SECONDS (standaard 6 uur).

Let op: De oude AUTH_USERNAME en AUTH_PASSWORD_HASH constanten zijn niet meer in gebruik. Gebruikersbeheer gaat nu via de users tabel in de database.

Stap 5: Gebruik

1. Ga naar de URL van de applicatie. Je wordt naar de inlogpagina (login.php) geleid.

2. Maak een nieuw account aan via de registratie-link.

3. Log in met je nieuwe account.

4. Je kunt nu je eigen levensloop bekijken, gebeurtenissen toevoegen en verbanden leggen.

5. 🗂️ Uitleg van de Bestanden

• levensloop.sql: Bevat de structuur voor de drie tabellen:

  • users: Slaat accountinformatie op (gebruikersnaam, wachtwoord-hash, volledige naam, geboortedatum).

  • gebeurtenissen: Slaat de gebeurtenissen op, met een user_id die verwijst naar de gebruiker.

  • verbanden: Slaat de links tussen gebeurtenissen op, ook met een user_id.

• config.php: Centrale configuratie voor database en reCAPTCHA.

• register.php: De registratiepagina voor nieuwe gebruikers.

• login.php, logout.php, auth.php: Het inlogsysteem dat sessies beheert.

• gebeurtenissen.php: De pagina voor het invoeren van gebeurtenissen en het aanmaken van verbanden.

• index.php: De hoofdpagina die de tijdlijn visualiseert op basis van de data van de ingelogde gebruiker.

6. ✨ Nieuwe Functionaliteit: Verbanden

Met de “Verbanden” functionaliteit kun je twee gebeurtenissen op je tijdlijn visueel met elkaar verbinden. Dit is handig om oorzaak-gevolg relaties of langdurige processen te tonen.

Hoe werkt het?

1. Ga naar de invoerpagina (gebeurtenissen.php).

2. Onder het formulier voor nieuwe gebeurtenissen vind je een tweede formulier: “Breng Verband aan”.

3. Selecteer een beginpunt en een eindpunt uit de dropdown-menu’s. De menu’s tonen al je ingevoerde gebeurtenissen, herkenbaar aan hun visuele ID (VID), datum en titel.

4. Schrijf een korte omschrijving van het verband. Bijvoorbeeld: “Door deze gebeurtenis heb ik besloten om...”.

5. Klik op “Verband Opslaan”.

In de grafiek op de hoofdpagina (index.php) verschijnt nu een stippellijn tussen de twee geselecteerde punten. Als je met je muis over het midden van de lijn zweeft, verschijnt de omschrijving die je hebt ingevoerd.

---

7. 👋 Afsluiting

Hopelijk is deze documentatie nuttig. Veel succes met het gebruik van de applicatie! Wil je bijdragen in financieel geld? Dan kan dat hier:

8. 💻 Overzicht van de Codebase

Dit gedeelte biedt een meer gedetailleerde uitleg van de projectbestanden voor ontwikkelaars.

Kernapplicatiebestanden

• index.php: De hoofdpagina van de applicatie, verantwoordelijk voor het visualiseren van de tijdlijn van de gebruiker. Het haalt gegevens uit de database en gebruikt Chart.js om de interactieve grafiek te renderen.

• gebeurtenissen.php: De pagina waar gebruikers gebeurtenissen kunnen toevoegen, bewerken en verwijderen, en verbindingen tussen hen kunnen maken.

• profile.php: De profielpagina van de gebruiker, die functionaliteiten zoals het exporteren van gegevens bevat.

• export.php: Een script dat de logica afhandelt voor het exporteren van gebruikersgegevens naar een downloadbaar formaat.

• print.php: Een script dat een printervriendelijke versie van de tijdlijn genereert.

Authenticatie en Gebruikersbeheer

• register.php: De registratiepagina voor gebruikers. Het handelt formuliervalidatie af en maakt nieuwe gebruikersaccounts aan.

• login.php: De inlogpagina voor gebruikers. Het authenticeert gebruikers en maakt een sessie aan.

• logout.php: Het script dat de sessie van de gebruiker vernietigt en hen uitlogt.

• auth.php: Een cruciaal bestand dat in elke beschermde pagina wordt opgenomen. Het controleert of een gebruiker is ingelogd en stuurt hen naar de inlogpagina als dat niet het geval is.

• generate_hash.php: Een hulpprogramma voor het genereren van veilige wachtwoord-hashes. Dit is een ontwikkelaarstool en geen onderdeel van de hoofdapplicatiestroom.

Configuratie en Database

• config.example.php: Een sjabloon voor het configuratiebestand. Het moet worden gekopieerd naar config.php en worden gevuld met de juiste databasegegevens en andere instellingen.

• config.php: Het hoofdconfiguratiebestand. Het bevat gevoelige informatie en wordt genegeerd door Git (zie .gitignore).

• levensloop.sql: Het SQL-bestand met het databaseschema. Het definieert de tabellen users, gebeurtenissen en verbanden.

• ini.user.ini: Een bestand om PHP-instellingen per map te overschrijven. Het kan bijvoorbeeld worden gebruikt om de limieten voor het uploaden van bestanden te verhogen.

Frontend en Styling

• style.css: Het belangrijkste stylesheet voor de applicatie. Het bevat alle CSS-regels voor de lay-out, typografie en visuele elementen.

• logo.png: Het logobestand van de applicatie.

• footer.inc.php: Een herbruikbaar PHP-include-bestand voor de voettekst van de applicatie.

Ontwikkeling

• router.php: Een eenvoudig routerscript voor de ingebouwde webserver van PHP. Hiermee kan de applicatie lokaal worden uitgevoerd zonder dat een volledige webserver zoals Apache of Nginx hoeft te worden geconfigureerd. Om de applicatie lokaal uit te voeren, gebruik je het volgende commando in je terminal:

php -S localhost:8000 router.php