Laravel 1 | Basis | Nog in ontwikkeling

Laravel CRUD - Game Collection

Module Laravel 1: Bouw je eigen Game Collection app

🎯 Leerdoelen

📖 Uitleg

In deze module bouw je stap voor stap een web-app waarmee je je game-collectie kunt beheren. De app heet Game Collection. Je kunt games toevoegen, bekijken, aanpassen en verwijderen.

Je gebruikt hiervoor Laravel, een PHP-framework. Een framework is een verzameling afspraken, mappen en hulpmiddelen waardoor je sneller en netter een webapplicatie kunt bouwen.

Daarnaast gebruik je Git en GitHub. Git houdt wijzigingen in je code bij. GitHub is de plek waar je je project online opslaat.

✅ Wat moet je al kunnen?

Les 1 - Laravel installeren

Module 1.1: Installatie, Composer en Git

🎯 Leerdoelen

📖 Uitleg

Je gaat een app bouwen waarmee je je game-collectie kunt bijhouden. Je kunt games toevoegen, bekijken, bewerken en verwijderen.

Laravel wordt geïnstalleerd via Composer. Composer is de package manager voor PHP. Een package manager downloadt automatisch alle bestanden (codebibliotheken) die jouw project nodig heeft.

Vergelijk het met een boodschappenlijst voor je project: Laravel zegt welke onderdelen nodig zijn, Composer haalt ze op en zet ze in de juiste map.

🧩 Startercode

Controleer eerst of Composer al is geïnstalleerd. Open de terminal in VS Code en typ:

composer --version

Zie je een versienummer? Dan is Composer geïnstalleerd. Krijg je een foutmelding zoals composer is not recognized? Installeer Composer dan eerst via de officiële downloadpagina.

Download Composer hier:

https://getcomposer.org/download/

Gebruik op Windows meestal de Composer-Setup.exe. Laat de installer PHP zoeken in je XAMPP-map. Dat is meestal:

C:\xampp\php\php.exe

Sluit na de installatie VS Code en open VS Code opnieuw. Controleer daarna opnieuw:

composer --version

🛠️ Opdracht - Nieuw Laravel-project maken

composer create-project laravel/laravel games
cd games
code .

Start daarna de development server:

php artisan serve

Open in je browser:

http://localhost:8000

Als alles goed staat, zie je de Laravel-welkomstpagina.

📖 Uitleg

php artisan serve start een kleine lokale server. Die server is alleen bedoeld om tijdens het ontwikkelen je Laravel-app te testen.

Je stopt de server met Ctrl + C in de terminal.

🛠️ Opdracht - Git opzetten

💡 Let op: Laravel maakt automatisch een .gitignore bestand aan. Hierin staat welke bestanden Git niet moet uploaden, bijvoorbeeld tijdelijke bestanden of geheime instellingen zoals wachtwoorden etc.

📦 Inleveren

Les 2 - MVC in Laravel

Module 1.2: Model, View, Controller en Router

🎯 Leerdoelen

📖 Uitleg

Laravel werkt volgens het MVC-patroon. MVC staat voor Model, View, Controller. Laravel gebruikt daarnaast ook een Router.

📖 Uitleg

Een voorbeeld: de gebruiker gaat naar /games. Laravel zoekt in routes/web.php welke controllerfunctie bij die URL hoort. De controller haalt via het model games op uit de database en stuurt die naar een Blade-view. De view maakt daar HTML van voor de browser.

🧩 Startercode

routes/web.php                     // routes
app/Http/Controllers               // controllers
app/Models                         // models
resources/views                    // views
database/migrations                // database-aanpassingen
.env                               // lokale instellingen

🛠️ Opdracht - MVC herkennen

📦 Inleveren

Les 3 - Database & migraties

Module 1.3: Database koppelen aan Laravel

🎯 Leerdoelen

📖 Uitleg

Een database bewaart de gegevens van je app. In deze les maak je een database met de naam games. Laravel gebruikt een migratie om tabellen aan te maken.

Een migratie is een PHP-bestand waarin staat hoe een databasetabel eruit moet zien. Je kunt het zien als een bouwtekening voor je tabel.

🛠️ Opdracht - Database aanmaken

http://localhost/phpmyadmin

🧩 Startercode

Open het bestand .env en pas de database-instellingen aan:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=games
DB_USERNAME=root
DB_PASSWORD=

💡 Let op: Bij een standaard XAMPP-installatie is de MySQL-gebruiker vaak root zonder wachtwoord.

⚠️ Let op: Het .env bestand staat in .gitignore en wordt niet gecommit. Het kan wachtwoorden bevatten. Dus omdat het in het bestand .gitignore staat, wordt het niet op Github geplaatst.

🛠️ Opdracht - Model en migratie maken

Voer dit commando uit in de terminal:

php artisan make:model Game --migration

Dit maakt twee bestanden:

🧩 Startercode

Open de migratie en pas de up() functie aan:

public function up()
{
    Schema::create('games', function (Blueprint $table) {
        $table->increments('id');
        $table->string('game_name');
        $table->string('platform');
        $table->string('genre');
        $table->decimal('rating', 3, 1);
        $table->timestamps();
    });
}

Voer daarna de migratie uit via je terminal. De tabel zoals die in het migratiebestand staat wordt aangemaakt in de database 'games'. De eerste keer dat je dit commando uitvoert, worden ook de standaard Laravel tabellen aangemaakt, zoals die van user.

php artisan migrate

Controleer in phpMyAdmin of de tabel games bestaat.

🧩 Startercode

Open app/Models/Game.php en zet dit erin:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Game extends Model
{
    use HasFactory;

    protected $fillable = [
        'game_name',
        'platform',
        'genre',
        'rating'
    ];

    protected $table = 'games';
}

$fillable bepaalt welke velden veilig via een formulier ingevuld mogen worden. $table koppelt dit model aan de tabel games.

🛠️ Opdracht - Git commit

📦 Inleveren

Les 4 - Read: games tonen

Module 1.4: Data uit de database tonen

🎯 Leerdoelen

📖 Uitleg

Read betekent: gegevens bekijken. In deze les toon je alle games uit de database in een tabel.

🛠️ Opdracht - Controller aanmaken

php artisan make:controller GameController --resource

Open de controller (in de map \app\http\controllers) en voeg bovenaan toe:

use App\Models\Game;

Pas daarna de functie index() aan:

public function index()
{
    $games = Game::all();
    return view('games.index', compact('games'));
}

🧩 Startercode

Maak de map resources/views/games en daarin het bestand index.blade.php:

@foreach en @endforeach vormen een loop in Blade. {{ }} drukt een variabele af en beveiligt automatisch tegen ongewenste HTML.

🧩 Startercode

Voeg deze route toe in routes/web.php:

Route::get('games', [App\Http\Controllers\GameController::class, 'index']);

🛠️ Opdracht - Testdata toevoegen

Voer deze SQL uit in phpMyAdmin via het tabblad SQL:

INSERT INTO `games` (`id`, `game_name`, `platform`, `genre`, `rating`, `created_at`, `updated_at`) VALUES
(1, 'The Legend of Zelda: TotK', 'Switch', 'Adventure', 9.5, NULL, NULL),
(2, 'Elden Ring', 'PS5', 'RPG', 9.0, NULL, NULL),
(3, 'Minecraft', 'PC', 'Sandbox', 8.5, NULL, NULL),
(4, 'FIFA 25', 'PS5', 'Sports', 7.0, NULL, NULL),
(5, 'GTA V', 'PC', 'Action', 9.5, NULL, NULL);

Ga daarna naar:

http://localhost:8000/games

🛠️ Opdracht - Git commit

🛠️ Opdracht - Oeps!!  We zijn 'genre' vergeten in de view. 

1. Voeg deze toe in het kopje van de tabel en als veld in de rij.
2. Daarna nogmaals comitten met een relevante message en syncen naar Github.

📦 Inleveren

Les 5 - Create: game toevoegen

Module 1.5: Formulier maken en data opslaan

🎯 Leerdoelen

📖 Uitleg

Create betekent: nieuwe gegevens toevoegen. Je maakt een formulier waarmee de gebruiker een nieuwe game kan opslaan.

Een formulier verstuurt data met POST. Laravel gebruikt @csrf om te controleren of het formulier echt van jouw website komt.

@csrf voegt in Laravel een beveiligingstoken toe aan een formulier, zodat Laravel kan controleren dat het verzoek echt van jouw website komt en niet van een kwaadwillende externe site.

🧩 Startercode

Voeg deze routes toe aan routes/web.php:

Route::get('games/create', [App\Http\Controllers\GameController::class, 'create']);
Route::post('games/store', [App\Http\Controllers\GameController::class, 'store']);

Voeg deze functies toe aan GameController:

public function create()
{
    return view('games.create');
}

public function store(Request $request)
{
    $request->validate([
        'game_name' => 'required',
        'platform' => 'required',
        'genre' => 'required',
        'rating' => 'required|numeric|min:0|max:10'
    ]);

    $game = new Game([
        'game_name' => $request->get('game_name'),
        'platform' => $request->get('platform'),
        'genre' => $request->get('genre'),
        'rating' => $request->get('rating')
    ]);

    $game->save();

    return redirect('/games')->with('success', 'Game added!');
}

Voeg bovenaan de controller toe als dat nog niet bestaat:

use Illuminate\Http\Request;

🧩 Startercode

Voeg in index.blade.php boven de tabel deze knop toe:

<a href="/games/create" class="btn btn-success mb-3">🎮 Add Game</a>

🧩 Startercode

Maak resources/views/games/create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <title>Add Game</title>
</head>
<body>
    <div class="container" style="margin:40px;">
        <h1 class="display-4">🎮 Add Game</h1>
        <form method="post" action="/games/store">
            @csrf
            <div class="form-group">
                <label>Game Name *</label>
                <input type="text" class="form-control" name="game_name" />
            </div>
            <div class="form-group">
                <label>Platform *</label>
                <input type="text" class="form-control" name="platform" placeholder="PS5, Xbox, PC, Switch..." />
            </div>
            <div class="form-group">
                <label>Genre *</label>
                <input type="text" class="form-control" name="genre" placeholder="Action, RPG, Sports..." />
            </div>
            <div class="form-group">
                <label>Rating (0-10)</label>
                <input type="number" step="0.1" min="0" max="10" class="form-control" name="rating" />
            </div>
            <button type="submit" class="btn btn-success">Add Game</button>
        </form>
    </div>
</body>
</html>

🛠️ Opdracht - Game toevoegen

🛠️ Opdracht - Git commit

📦 Inleveren

Les 6 - Update: game bewerken

Module 1.6: Bestaande data aanpassen

🎯 Leerdoelen

📖 Uitleg

Update betekent: bestaande gegevens aanpassen. Je maakt een edit-formulier waarin de huidige gegevens van een game al ingevuld zijn.

🧩 Startercode

Voeg in de tabel van index.blade.php een kolom Edit toe:

<th>Edit</th>

Voeg in de loop deze knop toe:

<td>
    <a href="/games/edit/{{ $game->id }}" class="btn btn-primary btn-sm">Edit</a>
</td>

🧩 Startercode

Voeg deze routes toe aan routes/web.php:

Route::get('games/edit/{id}', [App\Http\Controllers\GameController::class, 'edit']);
Route::post('games/update/{id}', [App\Http\Controllers\GameController::class, 'update']);

Voeg deze functies toe aan de controller:

public function edit($id)
{
    $game = Game::find($id);
    return view('games.edit', ['game' => $game]);
}

public function update(Request $request, $id)
{
    $request->validate([
        'game_name' => 'required',
        'platform' => 'required',
        'genre' => 'required',
        'rating' => 'required|numeric|min:0|max:10'
    ]);

    $game = Game::find($id);
    $game->game_name = $request->get('game_name');
    $game->platform = $request->get('platform');
    $game->genre = $request->get('genre');
    $game->rating = $request->get('rating');
    $game->save();

    return redirect('/games');
}

🧩 Startercode

Maak resources/views/games/edit.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <title>Edit Game</title>
</head>
<body>
    <div class="container" style="margin:40px;">
        <h1 class="display-4">✏️ Edit Game</h1>
        <form method="post" action="/games/update/{{ $game->id }}">
            @csrf
            <div class="form-group">
                <label>Game Name *</label>
                <input type="text" class="form-control" name="game_name" value="{{ $game->game_name }}" />
            </div>
            <div class="form-group">
                <label>Platform *</label>
                <input type="text" class="form-control" name="platform" value="{{ $game->platform }}" />
            </div>
            <div class="form-group">
                <label>Genre *</label>
                <input type="text" class="form-control" name="genre" value="{{ $game->genre }}" />
            </div>
            <div class="form-group">
                <label>Rating (0-10)</label>
                <input type="number" step="0.1" min="0" max="10" class="form-control" name="rating" value="{{ $game->rating }}" />
            </div>
            <button type="submit" class="btn btn-primary">Update</button>
        </form>
    </div>
</body>
</html>

Het verschil met create: de velden zijn al ingevuld via value="{{ $game->... }}".

🛠️ Opdracht - Game bewerken

🛠️ Opdracht - Git commit

📦 Inleveren

Les 7 - Delete: game verwijderen

Module 1.7: Data veilig verwijderen

🎯 Leerdoelen

📖 Uitleg

Delete betekent: gegevens verwijderen. Omdat verwijderen een gevaarlijke actie is, doe je dit niet via een gewone link. Een link gebruikt meestal GET. Verwijderen moet via POST met een @csrf token.

Daarom maken we een formulier met een knop. De gebruiker krijgt ook eerst een bevestigingsvraag.

🧩 Startercode

Voeg in de tabel van index.blade.php een kolom Delete toe:

<th>Delete</th>

Voeg in de loop deze delete-knop toe:

<td>
    <form action="/games/destroy/{{ $game->id }}" method="post">
        @csrf
        <button onclick="return confirm('Weet je het zeker?')" class="btn btn-danger btn-sm" type="submit">Delete</button>
    </form>
</td>

🧩 Startercode

Voeg deze route toe aan routes/web.php:

Route::post('games/destroy/{id}', [App\Http\Controllers\GameController::class, 'destroy']);

Voeg deze functie toe aan de controller:

public function destroy($id)
{
    $game = Game::find($id);
    $game->delete();
    return redirect('/games');
}

🛠️ Opdracht - Game verwijderen

🛠️ Opdracht - Git commit

📦 Inleveren

Les 8 - Blade templates optimaliseren

Module 1.8: Herhaling verminderen met een base template

🎯 Leerdoelen

📖 Uitleg

Je hebt nu meerdere views met dezelfde HTML-structuur. Als je bijvoorbeeld Bootstrap of een menu wilt aanpassen, moet dat in meerdere bestanden. Dat is foutgevoelig.

De oplossing is een base template. Daarin zet je de gedeelde HTML. De losse pagina's vullen alleen hun eigen titel en inhoud in.

🧩 Startercode

Maak resources/views/base.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <title>Game Collection</title>
</head>
<body>
    <div class="container" style="margin:40px;">
        <h1 class="display-4">@yield('title')</h1>
        @yield('content')
    </div>
</body>
</html>

@yield('content') is een plekhouder. Child-views vullen die plekhouder later in.

🧩 Startercode

Pas index.blade.php aan:

@extends('base')

@section('title', '🎮 Game Collection')

@section('content')
    <a href="/games/create" class="btn btn-success mb-3">Add Game</a>

    <table class="table">
        <!-- tabelinhoud blijft hetzelfde -->
    </table>
@endsection

Pas create.blade.php en edit.blade.php op dezelfde manier aan:

🧩 Startercode

Voeg onderaan de tabel een gemiddelde rating toe. Zet vóór de loop:

@php( $sum = 0 )

Zet in de loop:

@php( $sum += $game->rating )

Zet na de loop:

<tr>
    <td colspan="4"><strong>Gemiddelde rating:</strong></td>
    <td><strong>{{ count($games) > 0 ? number_format($sum / count($games), 1) : 0 }}/10</strong></td>
    <td></td>
</tr>

🛠️ Opdracht - Views optimaliseren

🛠️ Opdracht - Git commit

📦 Inleveren

Les 9 - Mini Challenge

Module 1.9: Zelf een show-pagina maken

🎯 Leerdoelen

📖 Uitleg

In deze mini challenge ga je zelf een show-pagina maken voor één game.

Tot nu toe kun je games toevoegen, bekijken in een overzicht, aanpassen en verwijderen. Nu ga je ervoor zorgen dat een gebruiker op een knop kan klikken om de details van één specifieke game te bekijken.

Je maakt deze opdracht zoveel mogelijk zelf. Gebruik de eerdere lessen als voorbeeld.

🛠️ Opdracht - Show Game maken

PLAATJE!!

💡 Tips

🧠 Denk zelf na

Je krijgt deze keer geen volledige startercode. Probeer zelf te bedenken welke code waar moet komen.

Denk aan deze onderdelen:

🛠️ Opdracht - Testen

🛠️ Opdracht - Git commit

📦 Inleveren