Laravel Customer Management - Studenten Hub

Een Laravel applicatie voor het beheren van klanten, ontwikkeld als leeromgeving voor studenten om te oefenen met Laravel, Livewire en moderne web development technieken.

📋 Over de Applicatie

Deze applicatie is een Customer Management Systeem dat dient als praktijkomgeving voor studenten om hun Laravel vaardigheden te ontwikkelen. Het bevat zowel een functioneel klantenbeheer systeem als een interactieve opdrachten pagina waar studenten kunnen oefenen met verschillende Laravel concepten.

Doel van de Applicatie

• Leeromgeving: Biedt studenten een praktische omgeving om Laravel te leren door middel van hands-on opdrachten
• Customer Management: Functioneel systeem voor het beheren van klantgegevens met filtering, paginatie en detailweergave
• Moderne Stack: Gebruikt moderne Laravel technologieën zoals Livewire, Flux UI en Eloquent ORM

✨ Features

Customer Management

• 📊 Dashboard met klantstatistieken
• 👥 Klantenoverzicht met geavanceerde filtering (zoeken, status, stad, land)
• 🔍 Zoekfunctionaliteit op naam, email en bedrijf
• 📄 Paginatie voor grote datasets
• 🔎 Detailweergave in modals
• 📱 Responsive design voor alle apparaten

Studenten Opdrachten Hub

• 📝 21 praktische opdrachten verdeeld in twee categorieën:
  • 11 Uitzoek Opdrachten: Vragen over hoe de applicatie werkt (code analyse)
  • 10 Doe Opdrachten: Implementatie opdrachten om nieuwe functionaliteit toe te voegen
• 💡 Stap-voor-stap hints voor elke opdracht
• ✅ Progress tracking met status (voltooid/vastgelopen/pending)
• 💾 Automatisch opslaan van voortgang en antwoorden in localStorage
• 📝 Antwoordvelden voor uitzoek-opdrachten

Authenticatie & Gebruikersbeheer

• 🔐 Inloggen/Registreren met Laravel Fortify
• 👤 Profiel beheer
• 🔑 Wachtwoord wijzigen
• ⚙️ Instellingen (appearance, profile)

🛠️ Technologie Stack

• Backend: Laravel 12.x
• Frontend: Livewire 3.x, Flux UI
• Database: SQLite (standaard), MySQL/PostgreSQL mogelijk
• Authentication: Laravel Fortify
• Styling: Tailwind CSS (via Flux UI)
• JavaScript: Alpine.js
• Testing: Pest PHP

📦 Vereisten

Voordat je begint, zorg ervoor dat je de volgende software op je systeem hebt geïnstalleerd:

• PHP >= 8.2
• Composer (latest version)
• Node.js >= 18.x en npm
• SQLite (meestal al geïnstalleerd op Linux/Mac, voor Windows kan SQLite nodig zijn)

Optioneel:

• Git (voor versiebeheer)

🚀 Installatie Instructies

Volg deze stappen om de applicatie lokaal te draaien:

Stap 1: Clone of Download het Project

Als je Git gebruikt:

git clone <repository-url>
cd customers

Of download en pak het project uit in een directory naar keuze.

Stap 2: Installeer PHP Dependencies

composer install

Dit installeert alle benodigde PHP packages zoals Laravel, Livewire, Flux UI, etc.

Stap 3: Kopieer Environment Bestand

cp .env.example .env

Of op Windows:

copy .env.example .env

Stap 4: Genereer Application Key

php artisan key:generate

Dit genereert een unieke applicatie sleutel die nodig is voor encryptie.

Stap 5: Maak Database Bestand Aan

De applicatie gebruikt SQLite als standaard database. Maak het database bestand aan:

touch database/database.sqlite

Of op Windows:

type nul > database\database.sqlite

Stap 6: Configureer Database (optioneel)

Als je SQLite gebruikt (standaard), hoef je niets te wijzigen in .env. Het database pad staat al goed:

DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite

Als je MySQL of PostgreSQL wilt gebruiken, pas dan de database instellingen aan in .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

Stap 7: Run Database Migrations

Dit maakt alle database tabellen aan:

php artisan migrate

Stap 8: Seed de Database

Dit vult de database met testdata (400 fake klanten en een test gebruiker):

php artisan db:seed

Of gebruik:

php artisan migrate:fresh --seed

Dit reset de database en seed opnieuw (handig tijdens ontwikkeling).

Stap 9: Installeer Node Dependencies

npm install

Stap 10: Build Assets

Voor development:

npm run dev

Dit start Vite in watch mode, zodat CSS/JS automatisch worden gecompileerd bij wijzigingen.

Voor production:

npm run build

Dit compileert en minified alle assets eenmalig.

Stap 11: Start de Development Server

In een nieuwe terminal, start de Laravel server:

php artisan serve

De applicatie is nu beschikbaar op: http://localhost:8000

Tip: Als je zowel npm run dev als php artisan serve wilt draaien, open dan twee terminal vensters, of gebruik de composer dev command die beide tegelijk start.

👤 Inloggen

Na het seeden van de database is er een test gebruiker aangemaakt:

• Email: test@example.com
• Wachtwoord: password

Je kunt direct inloggen met deze credentials, of je kunt een nieuw account aanmaken via de registratie pagina.

📁 Project Structuur

customers/
├── app/
│   ├── Livewire/
│   │   └── Customers/
│   │       └── Index.php          # Customer listing component
│   ├── Models/
│   │   ├── Customer.php           # Customer model
│   │   └── User.php               # User model
│   └── ...
├── database/
│   ├── migrations/                # Database migrations
│   ├── seeders/
│   │   ├── CustomerSeeder.php     # Seeds 400 customers
│   │   └── DatabaseSeeder.php     # Main seeder
│   └── factories/
│       └── CustomerFactory.php    # Customer factory voor fake data
├── resources/
│   ├── views/
│   │   ├── welcome.blade.php      # Landing page
│   │   ├── opdrachten.blade.php   # Studenten opdrachten pagina
│   │   ├── dashboard.blade.php    # Dashboard
│   │   └── livewire/
│   │       └── customers/
│   │           └── index.blade.php # Customer listing view
│   └── ...
├── routes/
│   └── web.php                    # Web routes
└── ...

🎓 Gebruik als Student

Opdrachten Pagina

Bezoek /opdrachten voor de interactieve opdrachten hub. Hier vind je:

1. Uitzoek Opdrachten: Beantwoord vragen over hoe de applicatie werkt

   • Analyseer de codebase
   • Beantwoord vragen in de tekstvelden
   • Antwoorden worden automatisch opgeslagen

2. Doe Opdrachten: Implementeer nieuwe functionaliteit

   • Volg de beschrijving en hints
   • Pas de code aan
   • Markeer opdrachten als voltooid of vastgelopen

Voorbeeld Opdrachten

• Nieuwe klant toevoegen
• Klantgegevens bewerken
• Filtering verbeteren
• Export functionaliteit
• Dashboard statistieken
• En nog veel meer!

🧪 Testing

Run de tests met:

php artisan test

Of met Pest specifiek:

./vendor/bin/pest

🔧 Development Commands

Database Reset

php artisan migrate:fresh --seed

Clear Cache

php artisan config:clear
php artisan cache:clear
php artisan view:clear

Generate New Livewire Component

php artisan make:livewire ComponentName

Generate New Migration

php artisan make:migration create_table_name

📝 Aanpassingen Maken

Nieuwe Klant Velden Toevoegen

1. Maak een migration: php artisan make:migration add_field_to_customers_table
2. Voeg het veld toe aan app/Models/Customer.php in $fillable
3. Update de factory in database/factories/CustomerFactory.php
4. Update de views in resources/views/livewire/customers/

Nieuwe Opdrachten Toevoegen

Bewerk resources/views/opdrachten.blade.php en voeg nieuwe opdrachten toe aan de uitzoekOpdrachten of doeOpdrachten arrays in de JavaScript functie.

🤝 Troubleshooting

Probleem: "Class not found"

Oplossing: Run composer dump-autoload

Probleem: "SQLite database niet gevonden"

Oplossing: Zorg dat database/database.sqlite bestaat (zie Stap 5)

Probleem: "Assets niet geladen"

Oplossing: Run npm run build of npm run dev in een aparte terminal

Probleem: "Permission denied" op storage/logs

Oplossing: Run chmod -R 775 storage bootstrap/cache (Linux/Mac)

Probleem: Port 8000 al in gebruik

Oplossing: Gebruik een andere poort: php artisan serve --port=8001

📚 Leermiddelen

• Laravel Documentatie
• Livewire Documentatie
• Flux UI Documentatie

📄 Licentie

Dit project is open source en beschikbaar onder de MIT licentie.

💡 Tips voor Studenten

1. Begin met de uitzoek-opdrachten: Dit helpt je begrijpen hoe de applicatie werkt
2. Gebruik de hints: Elke opdracht heeft stap-voor-stap instructies
3. Test je code: Zorg dat alles werkt voordat je doorgaat
4. Experimenteer: Voeg extra features toe die niet in de opdrachten staan
5. Lees de code: Bekijk hoe bestaande functionaliteit is geïmplementeerd

Veel succes met leren! 🚀