DH_Alumni/overview.php

<?php
require_once 'general.php';

returnHeader();

$file = file_get_contents("MOCK_DATA.json");
if ($file === false) {
    die();
}

$entries = json_decode($file, true);
if ($entries === null) {
    die();
}

$config = getConfig();

?>

    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg relative space-y-32">

                    <div class="md:mt-6 top-0 right-0 absolute">
                        <button class="bg-blue-500 px-2 py-2 text-lg font-semibold tracking-wider text-white rounded hover:bg-blue-600">als CSV exportieren</button>
                        <button class="bg-blue-500 px-4 py-2 text-lg font-semibold tracking-wider text-white rounded hover:bg-blue-600">ausloggen</button>
                    </div>

                    <table id="overviewTable" class="display">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Tätigkeit</th>
                            <th>E-Mail Adresse</th>
                            <th>Jahrgang</th>
                            <th>Alter</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php



                        foreach ($entries as $entry) {
                            ?>
                            <tr>
                                <td><?php echo $entry["name"] ?></td>
                                <td><?php echo $entry["vocation"] ?></td>
                                <td><?php echo $entry["email"] ?></td>
                                <td><?php echo $entry["year"] ?></td>
                                <td><?php echo $entry["age"] ?></td>
                            </tr>
                            <?php
                        }
                        ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#overviewTable').DataTable({
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/German.json'
                }
            });
        });
    </script>

<?php

returnFooter();