Stappenplan
Route aanmaken
$route->delete('items/{id}', 'controllers/items-destroy.php');
Controller items-destroy.php
<?php $db = new Database(); $db->query("DELETE FROM items WHERE id = :id", [ 'id' => $_POST['id'] ]); flash("Item is verwijderd"); //doorsturen naar de index pagina header("location: /items");
Verwijderen kan via een formulier
<form method="post" action="/items/<?= $item['id'] ?>"> <?= csrf(); ?> <?= method_delete(); ?> <input type="submit" value="Verwijderen" class="bg-red-600 text-white rounded py-1 px-2 hover:bg-red-400 cursor-pointer"> </form>
Uiteraard is het prettig als er voordat er een verwijder actie wordt gedaan een bevestiging wordt gevraagd.
Je zou dit bv kunnen realiseren door gebruik te maken van een view delete-button.view.php
We plaatsen deze view in parts, want deze zou overal in de applicatie gebruikt moeten kunnen worden. De view heeft één variabele nodig dat is de action. Eventueel zou je nog meer variabele kunnen toevoegen. Bijvoorbeeld de tekst die wordt getoond bij de bevestiging.
Code voor views/parts/delete-button.view.php (eenmalig)
<div x-data="{ modelConfirm: false }"> <button @click="modelConfirm =!modelConfirm" class="flex justify-center text-white text-md bg-red-500 hover:bg-red-600 border border-gray-200 focus:ring-4 focus:outline-none shadow-md focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center "> <span> Verwijder </span> </button> <div x-show="modelConfirm" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0"> <div x-cloak @click="modelConfirm = true" x-show="modelConfirm" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-60" aria-hidden="true" ></div> <div x-cloak x-show="modelConfirm" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block w-full max-w-md p-6 my-10 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl xl:max-w-xl" > <div class="flex items-center justify-between space-x-4"> <h1 class="text-xl font-bold text-gray-800 ">Verwijderen</h1> </div> <p class="mt-2 text-md text-gray-800 "> Wanneer je verder gaat, wordt dit item permanent verwijderd. Weet je het zeker? </p> <x-text-input name="id" type="hidden" value="{{ $site->id }}"/> <div class="flex justify-end mt-6"> <button for="show" @click="modelConfirm = false" type="button" class="mr-2 px-2 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-500 hover:bg-gray-600 rounded-md shadow-md"> Annuleren </button> <form action="<?= $action ?>" method="post"> <?= csrf(); ?> <?= method_delete(); ?> <button for="show" type="submit" @click="modelConfirm = false" class="mr-2 px-2 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-red-500 hover:bg-red-600 rounded-md shadow-md"> Verwijderen </button> </form> </div> </div> </div> </div> </div>
Uiteraard kan je dit bewerken en opmaken met de style die jij zelft wilt.
Code voor de verwijder button ergens te plaatsen
<?php view('parts/delete-button', ['action' => "/items/{$item['id']}"]); ?>