Editing and Updating Notes using PATCH Request Method

As a follow-up to creating new notes using forms and request methods, we will now explore how to edit and update existing notes in the database using the PATCH request method.

When a user wants to edit a note, we need to provide a way for them to access the edit screen. This is where the edit button comes in.

Adding an Edit Button

First, we need to add an edit button below the note on the single note screen in the show.view.php by removing the delete button code from the file. This button will move the user to the edit screen.

<footer class="mt-6">
    <a href="/note/edit?id=<?= $note['id'] ?>" class="inline-flex justify-center rounded-md border border-transparent bg-gray-500 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Edit</a>
</footer>

The edit button is placed in the footer section of the note display page. When clicked, it redirects the user to the edit screen, passing the note ID as a parameter in the URL.

Editing Notes

The edit.php file controls the editing process. It retrieves the note from the database and authorizes the user to edit the note. If the user is authorized, the edit screen is displayed, allowing the user to make changes to the note.

<?php
use Core\App;
use Core\Database;

$db = App::resolve(Database::class);
$currentUserId = 1;

$note = $db->query('select * from notes where id = :id', [
    'id' => $_GET['id']
])->findOrFail();

authorize($note['user_id'] === $currentUserId);

view("notes/edit.view.php", [
    'heading' => 'Edit Note',
    'errors' => [],
    'note' => $note
]);

The edit.php file uses the Database class to retrieve the note from the database. It then checks if the user is authorized to edit the note by comparing the user_id with the currentuserID. If authorized, the edit screen is displayed.

Edit Note View

The edit.view.php file contains the code to display the note body for editing, with two buttons: Update and Cancel.

• Update button: submits the updated note to the server and store it in database

• Cancel button: cancels the editing process and redirects the user back to the notes screen.
  

<label for="body" class="block text-sm font-medium text-gray-700">Body</label>
<div class="mt-1">
    <textarea id="body" name="body" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Here's an idea for a note..."><?= $note['body'] ?></textarea>
    <?php if (isset($errors['body'])) : ?>
        <p class="text-red-500 text-xs mt-2"><?= $errors['body'] ?></p>
    <?php endif; ?>
</div>

<div class="bg-gray-50 px-4 py-3 text-right sm:px-6 flex gap-x-4 justify-end items-center">
    <button type="button" class="text-red-500 mr-auto" onclick="document.querySelector('#delete-form').submit()">Delete</button>
    <a href="/notes" class="inline-flex justify-center rounded-md border border-transparent bg-gray-500 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Cancel</a>
    <button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Update</button>
</div>

The edit note view displays the note body in a textarea, allowing the user to make changes. The update button submits the updated note to the server and store it in database.

Updating Notes

To update a note, we need to create a new file named update.php that checks the validation of the note and also checks the authorization of the user. This file will only allow authorized users to view and edit notes that are already present in the database.

<?php
use Core\App;
use Core\Database;
use Core\Validator;

$db = App::resolve(Database::class);
$currentUserId = 1;

// find the corresponding note
$note = $db->query('select * from notes where id = :id', [
    'id' => $_POST['id']
])->findOrFail();

// Check authorization
authorize($note['user_id'] === $currentUserId);

// Check validation
$errors = [];
if (!Validator::string($_POST['body'], 1, 100000)) {
    $errors['body'] = 'A body of no more than 1,000 characters is required.';
}

// if no validation errors, then update
if (count($errors)) {
    return view('notes/edit.view.php', [
        'heading' => 'Edit Note',
        'errors' => $errors,
        'note' => $note
    ]);
}

$db->query('update notes set body = :body where id = :id', [
    'id' => $_POST['id'],
    'body' => $_POST['body']
]);

// redirect the user
header('location: /notes');
die();

Adding Routes

To enable the editing and updating of notes, we need to add the following routes in route.php:

$router->get('/note/edit', 'controllers/notes/edit.php');
$router->patch('/note', 'controllers/notes/update.php');

These routes will enable the editing and updating of notes using the PATCH request method.

How it Works

When a user wants to edit a note, the user will be taken to the edit screen where user can make changes to the note. When a user submit changes, the update.php file will be called. This file will check if the user is authorized to edit the note and if the validation of the note is correct. If both checks pass, the note will be updated in the database and the user will be redirected back to the notes screen. If either check fails, the user will be redirected back to the edit screen with error messages.

By following these steps a user can easily edit and update the note using PATCH request method.

I hope that you have clearly understood it.