CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Bootcamp</title>  <meta name="title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta name="description" content="Together let's walk through building and deploying a modern Laravel application from scratch.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://bootcamp.laravel.com/"> <meta property="og:title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta property="og:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="og:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://bootcamp.laravel.com/"> <meta property="twitter:title" content="Laravel - Learn the PHP Framework for Web Artisans"> <meta property="twitter:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="twitter:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light">  <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">  <link rel="stylesheet" href="https://bootcamp.laravel.com/build/assets/app.1fe37668.css" /><script type="module" src="https://bootcamp.laravel.com/build/assets/app.f1116ac0.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="KRRQTWHM" defer></script>  <script> window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (localStorage.theme === 'system') { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } }); function updateTheme() { if (!('theme' in localStorage)) { localStorage.theme = 'system'; } switch (localStorage.theme) { case 'system': if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } document.documentElement.setAttribute('color-theme', 'system'); break; case 'dark': document.documentElement.classList.add('dark'); document.documentElement.setAttribute('color-theme', 'dark'); break; case 'light': document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('color-theme', 'light'); break; } } updateTheme(); </script> </head> <body x-data="{ navIsOpen: false }" class="font-sans text-gray-900 antialiased" > <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="min-h-screen dark:bg-dark-700"> <div class="relative lg:flex lg:items-start"> <aside id="sidebar" class="min-h-screen hidden fixed top-0 bottom-0 left-0 z-20 h-full w-16 bg-gradient-to-b from-gray-100 to-white transition-all duration-300 overflow-hidden lg:sticky lg:w-80 lg:shrink-0 lg:flex lg:flex-col lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full dark:from-dark-800 dark:to-dark-700" > <div class="relative min-h-0 flex-1 flex flex-col xl:w-80"> <a href="/" class="flex items-center py-8 px-4 lg:px-8 xl:px-16"> <img class="w-8 h-8 shrink-0 transition-all duration-300 lg:w-12 lg:h-12" :class="{ 'w-12 h-12': navIsOpen }" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52" > Bootcamp </a> <div class="overflow-y-auto overflow-x-hidden px-4 lg:overflow-hidden lg:px-8 xl:px-16"> <nav id="indexed-nav" class="hidden lg:block lg:mt-4"> <div class="docs_sidebar"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> <div class="flex-grow flex flex-col justify-end"> <div class="hidden 2xl:block mb-12 pl-16"> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 0); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 ml-8" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 2000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-6 ml-32" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 1000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-12" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> </div> </div> </div> </aside> <header id="header" class="lg:hidden" @keydown.window.escape="navIsOpen = false" @click.away="navIsOpen = false" > <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700"> <div class="mx-auto px-8 sm:px-16 flex items-center justify-between"> <a href="/" class="flex items-center"> <img class="" src="/img/logomark.min.svg" alt="Laravel"> Bootcamp </a> <div class="flex-1 flex items-center justify-end"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> <button class="ml-2 relative w-10 h-10 p-2 text-red-600 lg:hidden focus:outline-none focus:shadow-outline" aria-label="Menu" @click.prevent="navIsOpen = !navIsOpen"> <svg x-show="! navIsOpen" x-transition.opacity class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg x-show="navIsOpen" x-transition.opacity x-cloak class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </div> </div> <div x-show="navIsOpen" x-transition:enter="duration-150" x-transition:leave="duration-100 ease-in" x-cloak > <nav x-show="navIsOpen" x-cloak class="absolute w-full transform origin-top shadow-sm z-10" x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-8 scale-75" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 -translate-y-8 scale-75" > <div class="relative p-8 bg-white docs_sidebar dark:bg-dark-600"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> </header> <section class="flex-1 dark:bg-dark-700"> <div class="px-8 sm:px-16 lg:px-24"> <div class="max-w-screen-lg flex flex-col items-end transition-colors dark:border-gray-700 lg:mt-8 lg:flex-row-reverse"> <div class="fixed top-8 hidden lg:flex items-center justify-center"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> </div> </div> <section class="pt-8 pb-8 md:pt-16 md:pb-16 flex"> <section class="docs_main flex-1 max-w-full"> <div id="main-content"> <div class="prose dark:prose-invert relative"> <aside class="table-of-contents-sidebar-wrapper not-prose"><aside class="table-of-contents-sidebar not-prose"><h2>On this page</h2><ul class="table-of-contents"> <li> <a href="#routing">Routing</a> </li> <li> <a href="#updating-our-component">Updating our component</a> </li> <li> <a href="#updating-our-controller">Updating our controller</a> </li> <li> <a href="#authorization">Authorization</a> </li> <li> <a href="#testing-it-out">Testing it out</a> </li> </ul></aside></aside> <h1>05. Editing Chirps</h1> Let's add a feature that's missing from other popular bird-themed microblogging platforms — the ability to edit Chirps! <h2><a id="routing" href="#routing" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Routing</h2> First we will update our routes file to enable the <code>chirps.update</code> route for our resource controller: <div class="code-container"> <div class="code-container-filename">routes/web.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-remove-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> use App\Http\Controllers\ChirpController;</div><div class='line'> use App\Http\Controllers\ProfileController;</div><div class='line'> use Illuminate\Foundation\Application;</div><div class='line'> use Illuminate\Support\Facades\Route;</div><div class='line'> use Inertia\Inertia;</div><div class='line'>  </div><div class='line'> Route::get('/', function () {</div><div class='line'> return Inertia::render('Welcome', [</div><div class='line'> 'canLogin' => Route::has('login'),</div><div class='line'> 'canRegister' => Route::has('register'),</div><div class='line'> 'laravelVersion' => Application::VERSION,</div><div class='line'> 'phpVersion' => PHP_VERSION,</div><div class='line'> ]);</div><div class='line'> });</div><div class='line'>  </div><div class='line'> Route::get('/dashboard', function () {</div><div class='line'> return Inertia::render('Dashboard');</div><div class='line'> })->middleware(['auth', 'verified'])->name('dashboard');</div><div class='line'>  </div><div class='line'> Route::middleware('auth')->group(function () {</div><div class='line'> Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');</div><div class='line'> Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');</div><div class='line'> Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');</div><div class='line'> });</div><div class='line'>  </div></details><div class='line'> Route::resource('chirps', ChirpController::class)</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- ->only(['index', 'store'])</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ ->only(['index', 'store', 'update'])</div><div class='line'> ->middleware(['auth', 'verified']);</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> require __DIR__.'/auth.php';</div><div class='line'>  </div></details></code></pre> </div> Our route table for this controller now looks like this: <table> <thead> <tr> <th>Verb</th> <th>URI</th> <th>Action</th> <th>Route Name</th> </tr> </thead> <tbody> <tr> <td>GET</td> <td><code>/chirps</code></td> <td>index</td> <td>chirps.index</td> </tr> <tr> <td>POST</td> <td><code>/chirps</code></td> <td>store</td> <td>chirps.store</td> </tr> <tr> <td>PUT/PATCH</td> <td><code>/chirps/{chirp}</code></td> <td>update</td> <td>chirps.update</td> </tr> </tbody> </table> <h2><a id="updating-our-component" href="#updating-our-component" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Updating our component</h2> Next, let's update our <code>Chirp</code> component to have an edit form for existing Chirps. We're going to use the <code>Dropdown</code> component that comes with Breeze, which we'll only display to the Chirp author. We'll also display an indication if a Chirp has been edited by comparing the Chirp's <code>created_at</code> date with its <code>updated_at</code> date: <div class="tabbed-code" data-group="f86d679141246e9825a8f6c067a5f5a8"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Vue" onClick="setTab('Vue', 'f86d679141246e9825a8f6c067a5f5a8')">Vue</button> <button class="tabbed-code-nav-button" data-tab="React" onClick="setTab('React', 'f86d679141246e9825a8f6c067a5f5a8')">React</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Vue"> <div class="code-container-filename">resources/js/Components/Chirp.vue</div> <pre><code data-theme="olaolu-palenight" data-lang="vue" class='torchlight has-add-lines has-remove-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <script setup></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import Dropdown from '@/Components/Dropdown.vue';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import InputError from '@/Components/InputError.vue';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import PrimaryButton from '@/Components/PrimaryButton.vue';</div><div class='line'> import dayjs from 'dayjs';</div><div class='line'> import relativeTime from 'dayjs/plugin/relativeTime';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import { useForm } from '@inertiajs/vue3';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import { ref } from 'vue';</div><div class='line'>  </div><div class='line'> dayjs.extend(relativeTime);</div><div class='line'>  </div><div class='line line-remove line-has-background' style='background-color: #ef535033'>-defineProps(['chirp']);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+const props = defineProps(['chirp']);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+const form = useForm({</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ message: props.chirp.message,</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+});</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+const editing = ref(false);</div><div class='line'> </script></div><div class='line'>  </div><div class='line'> <template></div><div class='line'> <div class="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"></div><div class='line'> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div class="flex-1"></div><div class='line'> <div class="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span class="text-gray-800">{{ chirp.user.name }}</span></div><div class='line'> <small class="ml-2 text-sm text-gray-600">{{ dayjs(chirp.created_at).fromNow() }}</small></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <small v-if="chirp.created_at !== chirp.updated_at" class="text-sm text-gray-600"> &middot; edited</small></div><div class='line'> </div></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Dropdown v-if="chirp.user.id === $page.props.auth.user.id"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <template #trigger></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </svg></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </template></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <template #content></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 transition duration-150 ease-in-out" @click="editing = true"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ Edit</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </template></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </Dropdown></div><div class='line'> </div></div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- <p class="mt-4 text-lg text-gray-900">{{ chirp.message }}</p></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <form v-if="editing" @submit.prevent="form.put(route('chirps.update', chirp.id), { onSuccess: () => editing = false })"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <textarea v-model="form.message" class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <InputError :message="form.errors.message" class="mt-2" /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <div class="space-x-2"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <PrimaryButton class="mt-4">Save</PrimaryButton></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button class="mt-4" @click="editing = false; form.reset(); form.clearErrors()">Cancel</button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </form></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <p v-else class="mt-4 text-lg text-gray-900">{{ chirp.message }}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> </template></div></code></pre> </div> <div class="code-container" data-tab="React"> <div class="code-container-filename">resources/js/Components/Chirp.jsx</div> <pre><code data-theme="olaolu-palenight" data-lang="javascript" class='torchlight has-add-lines has-remove-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line line-remove line-has-background' style='background-color: #ef535033'>-import React from 'react';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import React, { useState } from 'react';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import Dropdown from '@/Components/Dropdown';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import InputError from '@/Components/InputError';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import PrimaryButton from '@/Components/PrimaryButton';</div><div class='line'> import dayjs from 'dayjs';</div><div class='line'> import relativeTime from 'dayjs/plugin/relativeTime';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import { useForm, usePage } from '@inertiajs/react';</div><div class='line'>  </div><div class='line'> dayjs.extend(relativeTime);</div><div class='line'>  </div><div class='line'> export default function Chirp({ chirp }) {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ const { auth } = usePage().props;</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ const [editing, setEditing] = useState(false);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ const { data, setData, patch, clearErrors, reset, errors } = useForm({</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ message: chirp.message,</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ });</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ const submit = (e) => {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ e.preventDefault();</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ patch(route('chirps.update', chirp.id), { onSuccess: () => setEditing(false) });</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ };</div><div class='line'>  </div><div class='line'> return (</div><div class='line'> <div className="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"></div><div class='line'> <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div className="flex-1"></div><div class='line'> <div className="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span className="text-gray-800">{chirp.user.name}</span></div><div class='line'> <small className="ml-2 text-sm text-gray-600">{dayjs(chirp.created_at).fromNow()}</small></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ { chirp.created_at !== chirp.updated_at && <small className="text-sm text-gray-600"> &middot; edited</small>}</div><div class='line'> </div></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {chirp.user.id === auth.user.id &&</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Dropdown></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Dropdown.Trigger></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </svg></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </Dropdown.Trigger></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Dropdown.Content></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 transition duration-150 ease-in-out" onClick={() => setEditing(true)}></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ Edit</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </Dropdown.Content></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </Dropdown></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ }</div><div class='line'> </div></div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- <p className="mt-4 text-lg text-gray-900">{chirp.message}</p></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {editing</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ ? <form onSubmit={submit}></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <textarea value={data.message} onChange={e => setData('message', e.target.value)} className="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <InputError message={errors.message} className="mt-2" /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <div className="space-x-2"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <PrimaryButton className="mt-4">Save</PrimaryButton></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <button className="mt-4" onClick={() => { setEditing(false); reset(); clearErrors(); }}>Cancel</button></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </form></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ : <p className="mt-4 text-lg text-gray-900">{chirp.message}</p></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ }</div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> )</div><div class='line'> }</div></code></pre> </div> </div> </div> <h2><a id="updating-our-controller" href="#updating-our-controller" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Updating our controller</h2> We can now update the <code>update</code> method on our <code>ChirpController</code> class to validate the request and update the database. Even though we're only displaying the edit button to the author of the Chirp, we also need to authorize the request to make sure it's actually the author that is updating it: <div class="code-container"> <div class="code-container-filename">app/Http/Controllers/ChirpController.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-remove-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> namespace App\Http\Controllers;</div><div class='line'>  </div><div class='line'> use App\Models\Chirp;</div><div class='line'> use Illuminate\Http\RedirectResponse;</div><div class='line'> use Illuminate\Http\Request;</div></details><div class='line line-add line-has-background' style='background-color: #99b76d23'>+use Illuminate\Support\Facades\Gate;</div><div class='line'> use Inertia\Inertia;</div><div class='line'> use Inertia\Response;</div><div class='line'>  </div><div class='line'> class ChirpController extends Controller</div><div class='line'> {</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> /**</div><div class='line'> * Display a listing of the resource.</div><div class='line'> */</div><div class='line'> public function index(): Response</div><div class='line'> {</div><div class='line'> return Inertia::render('Chirps/Index', [</div><div class='line'> 'chirps' => Chirp::with('user:id,name')->latest()->get(),</div><div class='line'> ]);</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Show the form for creating a new resource.</div><div class='line'> */</div><div class='line'> public function create()</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Store a newly created resource in storage.</div><div class='line'> */</div><div class='line'> public function store(Request $request): RedirectResponse</div><div class='line'> {</div><div class='line'> $validated = $request->validate([</div><div class='line'> 'message' => 'required|string|max:255',</div><div class='line'> ]);</div><div class='line'>  </div><div class='line'> $request->user()->chirps()->create($validated);</div><div class='line'>  </div><div class='line'> return redirect(route('chirps.index'));</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Display the specified resource.</div><div class='line'> */</div><div class='line'> public function show(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Show the form for editing the specified resource.</div><div class='line'> */</div><div class='line'> public function edit(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> /**</div><div class='line'> * Update the specified resource in storage.</div><div class='line'> */</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- public function update(Request $request, Chirp $chirp)</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ public function update(Request $request, Chirp $chirp): RedirectResponse</div><div class='line'> {</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- //</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ Gate::authorize('update', $chirp);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $validated = $request->validate([</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ 'message' => 'required|string|max:255',</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ ]);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $chirp->update($validated);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ return redirect(route('chirps.index'));</div><div class='line'> }</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> /**</div><div class='line'> * Remove the specified resource from storage.</div><div class='line'> */</div><div class='line'> public function destroy(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> }</div></code></pre> </div> <aside class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center bg-white dark:bg-dark-700"><div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 bg-purple-600 lg:mb-0"><img src="/img/callouts/lightbulb.min.svg" class="opacity-75"></img></div><div class="lg:ml-6 prose-p:m-0"> You may have noticed the validation rules are duplicated with the <code>store</code> method. You might consider extracting them using Laravel's <a href="https://laravel.com/docs/validation#form-request-validation">Form Request Validation</a>, which makes it easy to re-use validation rules and to keep your controllers light.</div></aside> <h2><a id="authorization" href="#authorization" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Authorization</h2> By default, the <code>authorize</code> method will prevent everyone from being able to update the Chirp. We can specify who is allowed to update it by creating a <a href="https://laravel.com/docs/authorization#creating-policies">Model Policy</a> with the following command: <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'>php artisan make:policy ChirpPolicy --model=Chirp</div></code></pre> </div> This will create a policy class at <code>app/Policies/ChirpPolicy.php</code> which we can update to specify that only the author is authorized to update a Chirp: <div class="code-container"> <div class="code-container-filename">app/Policies/ChirpPolicy.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-remove-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> namespace App\Policies;</div><div class='line'>  </div><div class='line'> use App\Models\Chirp;</div><div class='line'> use App\Models\User;</div><div class='line'> use Illuminate\Auth\Access\HandlesAuthorization;</div><div class='line'>  </div></details><div class='line'> class ChirpPolicy</div><div class='line'> {</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> use HandlesAuthorization;</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can view any models.</div><div class='line'> */</div><div class='line'> public function viewAny(User $user): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can view the model.</div><div class='line'> */</div><div class='line'> public function view(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can create models.</div><div class='line'> */</div><div class='line'> public function create(User $user): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> /**</div><div class='line'> * Determine whether the user can update the model.</div><div class='line'> */</div><div class='line'> public function update(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- //</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ return $chirp->user()->is($user);</div><div class='line'> }</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> /**</div><div class='line'> * Determine whether the user can delete the model.</div><div class='line'> */</div><div class='line'> public function delete(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can restore the model.</div><div class='line'> */</div><div class='line'> public function restore(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can permanently delete the model.</div><div class='line'> */</div><div class='line'> public function forceDelete(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> }</div></code></pre> </div> <h2><a id="testing-it-out" href="#testing-it-out" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Testing it out</h2> Time to test it out! Go ahead and edit a few Chirps using the dropdown menu. If you register another user account, you'll see that only the author of a Chirp can edit it. <img src="/img/screenshots/chirp-editted.png" alt="An editted chirp" class="rounded-lg border dark:border-none shadow-lg" /> <a href="/inertia/deleting-chirps">Continue to allow deleting of Chirps...</a><script> function setTab(tab, group, save) { save = typeof save === 'undefined' ? true : save document .querySelectorAll(`.tabbed-code[data-group="${group}"] .tabbed-code-nav-button`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] .code-container`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] [data-tab="${tab}"]`) .forEach(el => el.classList.add('active')) if (save) { saveTab(tab, group) } } function getTabs() { try { return JSON.parse(localStorage.tabs) } catch { return {} } } function saveTab(tab, group) { localStorage.tabs = JSON.stringify({ ...getTabs(), [group]: tab, }) } function restoreTabs() { Object.entries(getTabs()).forEach(([group, tab]) => setTab(tab, group, false)) } restoreTabs() </script> </div> <script> // Set the active navigation state... Array.from(document.querySelectorAll('#header a, #sidebar a')).forEach(link => { if (link.hostname === location.hostname && (link.pathname === location.pathname || (link.pathname === '/introduction' && location.pathname === '/')) ) { link.classList.add('active') if (link.parentNode.tagName === 'LI') { link.parentNode.parentNode.parentNode.classList.add('sub--on') } } }) // Make the navigation headings expandable... Array.from(document.querySelectorAll('.docs_sidebar h2')).forEach(el => { if (el.children.length > 1) { return } el.addEventListener('click', (e) => { const active = el.parentNode.classList.contains('sub--on'); [...document.querySelectorAll('.docs_sidebar ul li')].forEach(el => el.classList.remove('sub--on')); if (! active) { el.parentNode.classList.add('sub--on'); } }) }) // Highlight the active section in the table of contents... function setActiveTableOfContents () { const links = Array.from(document.querySelectorAll('.table-of-contents a')) const lastVisible = links .slice() .reverse() .find(link => { const el = document.querySelector(link.hash) return el.getBoundingClientRect().top <= 56; }) ?? links[0] links.forEach(link => { if (link === lastVisible) { link.classList.add('active') } else { link.classList.remove('active') } }) } setActiveTableOfContents() window.addEventListener('scroll', setActiveTableOfContents, { passive: true }) </script> </div> </section> </section> </div> </section> </div> <footer class="relative mt-12 pt-12 bg-gradient-to-b from-gray-50 to-white dark:from-dark-800 dark:to-dark-700"> <div class="max-w-screen-2xl mx-auto w-full px-8"> <div> <a href="https://laravel.com" class="inline-flex"> <img class="h-14" src="/img/logo.min.svg" alt="Laravel" loading="lazy"> </a> </div> <div class="mt-6 sm:mt-12"> Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in most web projects. <ul class="mt-6 flex items-center space-x-3"> <li> <a href="https://twitter.com/laravelphp"> <img id="footer__twitter_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/twitter.dark.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> <img id="footer__twitter" class="inline-block dark:hidden w-6 h-6" src="/img/social/twitter.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> </a> </li> <li> <a href="https://github.com/laravel"> <img id="footer__github_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/github.dark.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> <img id="footer__github" class="inline-block dark:hidden w-6 h-6" src="/img/social/github.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> </a> </li> <li> <a href="https://discord.gg/mPZNm7A"> <img id="footer__discord_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/discord.dark.min.svg" alt="Discord" loading="lazy" width="21" height="24"> <img id="footer__discord" class="inline-block dark:hidden w-6 h-6" src="/img/social/discord.min.svg" alt="Discord" loading="lazy" width="21" height="24"> </a> </li> <li> <a href="https://www.youtube.com/laravelphp"> <img id="footer__youtube_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/youtube.dark.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> <img id="footer__youtube" class="inline-block dark:hidden w-6 h-6" src="/img/social/youtube.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> </a> </li> </ul> </div> <div class="mt-10 border-t pt-6 pb-16 border-gray-200 dark:border-dark-500"> Laravel is a Trademark of Laravel Holdings Inc. Copyright © Laravel Holdings Inc. Code highlighting provided by <a href="https://torchlight.dev">Torchlight</a> </div> </div> </footer> </div> </body> </html>