N Dynamisch zoeken (optioneel)

Als je zoekt naar iets zijn we tegenwoordig gewend om de resultaten direct te krijgen terwijl we aan het typen zijn. Dit kan niet met een eenvoudig formulier met submit button.

We gaan nu stap voor stap een dynamisch zoekveld maken. We gebruiken voor deze code de tabel 'users' en we gaan er vanuit dat de kolommen email en name bestaan.

Stap 1

Zorg ervoor dat je parts/header.view.php in de <head> de volgende scripts toevoegd. Een iets andere versie zal waarschijnlijk ook werken.

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

In de map controllers maken we een nieuw map met de naam 'api'

Stap 2

In onze controller directory maken we een bestand controllers/api/users-search.php met de volgende inhoud

<?php
//gebruik van database object
$db = new Database();

//users opzoeken die aan onze zoek query voldoen en deze in $users zetten
$users = $db->query(
    "SELECT id, name, email 
           FROM users 
           WHERE name LIKE ?
          LIMIT 10", [
      "%" . $_GET['name'] . "%"  //zoeken naar alles wat er op lijkt
    ] //we hebben twee plekken waar we $name in moeten vullen
)->fetchAll();

// het resultaat geven we terug in json formaat
echo json_encode($users);

Stap 3

Aan onze router.php voegen we twee nieuwe routes toe

if (auth()) { //alleen als je ingelogd bent kan je dit doen
  $route->get('api/users-search', "controllers/api/users-search.php");
  $route->get('users', "views/users-search.view.php");
}

Stap 4

We maken een bestand views/users-search.view.php

<?php
view("parts/header", ['title' => 'Zoek gebruikers']);
view("parts/navigatie-menu");
?>
    <h1 class="font-2xl font-bold m-10">Zoek users</h1>

    <div x-data="searchUsers()" class="m-10">
        Zoek gebruikers: <input type="text" @keyup="fetchUsers()" x-model="searchfield">
        <!-- indien er resultaten gevonden zijn dan tonen -->
        <template x-if="users.length">
            <table class="w-1/2">
                <tr>
                    <td class="font-bold">Email</td>
                    <td class="font-bold">Naam</td>
                </tr>
                <!-- Loop door alle gevonden users -->
                <template x-for="user in users">
                    <tr @click="goto(user.id)" class="hover:cursor-pointer hover:bg-blue-50">
                        <td x-text="user.email"></td>
                        <td x-text="user.name"></td>
                    </tr>
                </template>
            </table>
        </template>
        <!-- Geen resultaten -->
        <template x-if="!users.length">
            <div class="mt-10">Geen gebruikers gevonden</div>
        </template>
    </div>

    <script>

        function searchUsers() {
            return {
                searchfield: '', //inhoud van het zoekveld
                users: [], //dit wordt gevuld met de resultaten afkomstig van api/users.search.php
                ok: false, //gaat alles goed?

                fetchUsers() {
                    axios.get('/api/users-search?name=' + this.searchfield)
                        .then((response) => {
                            this.ok = true;
                            this.users = response.data;
                            setTimeout(() => {
                                this.ok = false;
                            }, 5000);

                        }).catch((e) => {
                        console.log(e);
                    })
                },
                goto(id) {
                    //Deze url bestaat nog niet maar kan je zelf aanmaken
                    location.href = '/user-profile?id=' + id;
                }
            }
        }

    </script>

<?php
view("parts/footer");

Je kan nu naar http://localhost/users navigeren en uitproberen.

Door gebruik van axios en alpinejs wordt ons zoekveld dynamisch. Lees de documentatie van alpinejs om de code beter te begrijpen. Of kijk een in een video hoe het werkt.