@@ -233,7 +233,7 @@ <h3 class="text-lg font-semibold mb-3">Creating the Migration</h3>
233233 < p class ="text-gray-600 mb-4 ">
234234 First, we'll create a migration for the todos table. Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Database/Migrations/2025_01_01_000000_CreateTodosTable.php</ code > :
235235 </ p >
236- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
236+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
237237
238238declare(strict_types=1);
239239
@@ -279,7 +279,7 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating the Todo Model</h3>
279279 < p class ="text-gray-600 mb-4 ">
280280 Now let's create our Todo model. Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Models/Todo.php</ code > :
281281 </ p >
282- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
282+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
283283
284284declare(strict_types=1);
285285
@@ -334,7 +334,7 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating a Repository</h3>
334334 < p class ="text-gray-600 mb-4 ">
335335 Let's create a repository for todo operations. Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Repositories/TodoRepository.php</ code > :
336336 </ p >
337- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
337+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
338338
339339declare(strict_types=1);
340340
@@ -439,7 +439,7 @@ <h3 class="text-lg font-semibold mb-3">Creating TodoController</h3>
439439 < p class ="text-gray-600 mb-4 ">
440440 Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Controllers/TodoController.php</ code > :
441441 </ p >
442- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
442+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
443443
444444declare(strict_types=1);
445445
@@ -604,10 +604,10 @@ <h3 class="text-lg font-semibold mb-3">Creating the Layout</h3>
604604<head>
605605 <meta charset="UTF-8">
606606 <meta name="viewport" content="width=device-width, initial-scale=1.0">
607- <title>< ?= e($title ?? 'Todos') ?></title>
607+ <title>< ?= e($title ?? 'Todos') ?></title>
608608 <link rel="stylesheet" href="/assets/css/app.css">
609- < ?= csrf_meta() ?>
610- < ?= window_csrf_token() ?>
609+ < ?= csrf_meta() ?>
610+ < ?= window_csrf_token() ?>
611611</head>
612612<body class="bg-gray-50">
613613 <nav class="bg-white shadow-sm mb-8">
@@ -617,27 +617,27 @@ <h3 class="text-lg font-semibold mb-3">Creating the Layout</h3>
617617 <a href="/todos" class="text-xl font-bold text-gray-900">Todo App</a>
618618 </div>
619619 <div class="flex items-center space-x-4">
620- <span class="text-gray-600">< ?= e($user-> email ?? 'Guest') ?></span>
620+ <span class="text-gray-600">< ?= e($user-> email ?? 'Guest') ?></span>
621621 <a href="/auth/logout" class="text-blue-600 hover:text-blue-800">Logout</a>
622622 </div>
623623 </div>
624624 </div>
625625 </nav>
626626
627627 <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
628- < ?php if (Flash::has('success')): ?>
628+ < ?php if (Flash::has('success')): ?>
629629 <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded mb-4">
630- < ?= e(Flash::get('success')) ?>
630+ < ?= e(Flash::get('success')) ?>
631631 </div>
632- < ?php endif; ?>
632+ < ?php endif; ?>
633633
634- < ?php if (Flash::has('error')): ?>
634+ < ?php if (Flash::has('error')): ?>
635635 <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded mb-4">
636- < ?= e(Flash::get('error')) ?>
636+ < ?= e(Flash::get('error')) ?>
637637 </div>
638- < ?php endif; ?>
638+ < ?php endif; ?>
639639
640- < ?= section('content') ?>
640+ < ?= section('content') ?>
641641 </main>
642642</body>
643643</html></ code > </ pre >
@@ -646,15 +646,15 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating the Todos Index View</h3>
646646 < p class ="text-gray-600 mb-4 ">
647647 Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/resources/views/todos/index.php</ code > :
648648 </ p >
649- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php layout('todos'); ?>
649+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php layout('todos'); ?>
650650
651- < ?php section('content'); ?>
651+ < ?php section('content'); ?>
652652<div class="bg-white rounded-lg shadow p-6">
653653 <h1 class="text-2xl font-bold mb-6">My Todos</h1>
654654
655655 <!-- Create Todo Form -->
656656 <form method="POST" action="/todos" class="mb-6">
657- < ?= csrf_input() ?>
657+ < ?= csrf_input() ?>
658658 <div class="flex gap-4">
659659 <input
660660 type="text"
@@ -680,29 +680,29 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating the Todos Index View</h3>
680680
681681 <!-- Todos List -->
682682 <div class="space-y-3">
683- < ?php foreach ($todos as $todo): ?>
684- <div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md < ?= $todo-> completed ? 'bg-gray-50 opacity-75' : 'bg-white' ?>">
683+ < ?php foreach ($todos as $todo): ?>
684+ <div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md < ?= $todo-> completed ? 'bg-gray-50 opacity-75' : 'bg-white' ?>">
685685 <div class="flex-1">
686- <h3 class="font-semibold < ?= $todo-> completed ? 'line-through text-gray-500' : 'text-gray-900' ?>">
687- < ?= e($todo-> title) ?>
686+ <h3 class="font-semibold < ?= $todo-> completed ? 'line-through text-gray-500' : 'text-gray-900' ?>">
687+ < ?= e($todo-> title) ?>
688688 </h3>
689- < ?php if ($todo-> description): ?>
690- <p class="text-sm text-gray-600 mt-1">< ?= e($todo-> description) ?></p>
691- < ?php endif; ?>
689+ < ?php if ($todo-> description): ?>
690+ <p class="text-sm text-gray-600 mt-1">< ?= e($todo-> description) ?></p>
691+ < ?php endif; ?>
692692 </div>
693693
694- <form method="POST" action="/todos/< ?= $todo-> id ?>/toggle" class="inline">
695- < ?= csrf_input() ?>
694+ <form method="POST" action="/todos/< ?= $todo-> id ?>/toggle" class="inline">
695+ < ?= csrf_input() ?>
696696 <button
697697 type="submit"
698- class="px-4 py-2 < ?= $todo-> completed ? 'bg-yellow-600' : 'bg-green-600' ?> text-white rounded-md hover:opacity-80"
698+ class="px-4 py-2 < ?= $todo-> completed ? 'bg-yellow-600' : 'bg-green-600' ?> text-white rounded-md hover:opacity-80"
699699 >
700- < ?= $todo-> completed ? 'Undo' : 'Complete' ?>
700+ < ?= $todo-> completed ? 'Undo' : 'Complete' ?>
701701 </button>
702702 </form>
703703
704- <form method="POST" action="/todos/< ?= $todo-> id ?>" class="inline">
705- < ?= csrf_input() ?>
704+ <form method="POST" action="/todos/< ?= $todo-> id ?>" class="inline">
705+ < ?= csrf_input() ?>
706706 <input type="hidden" name="_method" value="DELETE">
707707 <button
708708 type="submit"
@@ -713,14 +713,14 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating the Todos Index View</h3>
713713 </button>
714714 </form>
715715 </div>
716- < ?php endforeach; ?>
716+ < ?php endforeach; ?>
717717
718- < ?php if (empty($todos)): ?>
718+ < ?php if (empty($todos)): ?>
719719 <p class="text-gray-500 text-center py-8">No todos yet. Create your first todo above!</p>
720- < ?php endif; ?>
720+ < ?php endif; ?>
721721 </div>
722722</div>
723- < ?php section('content'); ?></ code > </ pre >
723+ < ?php section('content'); ?></ code > </ pre >
724724 </ section >
725725
726726 <!-- ForgeWire Components -->
@@ -734,7 +734,7 @@ <h3 class="text-lg font-semibold mb-3">Creating the TodoList Wire Component</h3>
734734 < p class ="text-gray-600 mb-4 ">
735735 Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Components/Wire/TodoList.php</ code > :
736736 </ p >
737- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
737+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
738738
739739declare(strict_types=1);
740740
@@ -886,44 +886,44 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating the Wire Component View</h3
886886
887887 <!-- Todos List -->
888888 <div class="space-y-3">
889- < ?php foreach ($todos as $todo): ?>
890- <div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md < ?= $todo['completed'] ? 'bg-gray-50 opacity-75' : 'bg-white' ?>">
889+ < ?php foreach ($todos as $todo): ?>
890+ <div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md < ?= $todo['completed'] ? 'bg-gray-50 opacity-75' : 'bg-white' ?>">
891891 <div class="flex-1">
892- <h3 class="font-semibold < ?= $todo['completed'] ? 'line-through text-gray-500' : 'text-gray-900' ?>">
893- < ?= e($todo['title']) ?>
892+ <h3 class="font-semibold < ?= $todo['completed'] ? 'line-through text-gray-500' : 'text-gray-900' ?>">
893+ < ?= e($todo['title']) ?>
894894 </h3>
895- < ?php if ($todo['description']): ?>
896- <p class="text-sm text-gray-600 mt-1">< ?= e($todo['description']) ?></p>
897- < ?php endif; ?>
895+ < ?php if ($todo['description']): ?>
896+ <p class="text-sm text-gray-600 mt-1">< ?= e($todo['description']) ?></p>
897+ < ?php endif; ?>
898898 </div>
899899
900900 <button
901- wire:click="toggleTodo(< ?= $todo['id'] ?>)"
902- class="px-4 py-2 < ?= $todo['completed'] ? 'bg-yellow-600' : 'bg-green-600' ?> text-white rounded-md hover:opacity-80"
901+ wire:click="toggleTodo(< ?= $todo['id'] ?>)"
902+ class="px-4 py-2 < ?= $todo['completed'] ? 'bg-yellow-600' : 'bg-green-600' ?> text-white rounded-md hover:opacity-80"
903903 >
904- < ?= $todo['completed'] ? 'Undo' : 'Complete' ?>
904+ < ?= $todo['completed'] ? 'Undo' : 'Complete' ?>
905905 </button>
906906
907907 <button
908- wire:click="deleteTodo(< ?= $todo['id'] ?>)"
908+ wire:click="deleteTodo(< ?= $todo['id'] ?>)"
909909 class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
910910 >
911911 Delete
912912 </button>
913913 </div>
914- < ?php endforeach; ?>
914+ < ?php endforeach; ?>
915915
916- < ?php if (empty($todos)): ?>
916+ < ?php if (empty($todos)): ?>
917917 <p class="text-gray-500 text-center py-8">No todos yet. Add one above!</p>
918- < ?php endif; ?>
918+ < ?php endif; ?>
919919 </div>
920920</div></ code > </ pre >
921921
922922 < h3 class ="text-lg font-semibold mb-3 mt-6 "> Using the Wire Component</ h3 >
923923 < p class ="text-gray-600 mb-4 ">
924924 In your view, use the < code class ="bg-gray-100 px-2 py-1 rounded "> wire()</ code > helper to render the component:
925925 </ p >
926- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?= wire('TodoList') ?></ code > </ pre >
926+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?= wire('TodoList') ?></ code > </ pre >
927927 </ section >
928928
929929 <!-- Events -->
@@ -992,7 +992,7 @@ <h3 class="text-lg font-semibold mb-3 mt-6">Creating Event Listeners</h3>
992992 < p class ="text-gray-600 mb-4 ">
993993 Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/Services/TodoNotificationService.php</ code > :
994994 </ p >
995- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
995+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
996996
997997declare(strict_types=1);
998998
@@ -1089,7 +1089,7 @@ <h3 class="text-lg font-semibold mb-3">Creating Todo Tests</h3>
10891089 < p class ="text-gray-600 mb-4 ">
10901090 Create < code class ="bg-gray-100 px-2 py-1 rounded "> app/tests/TodoTest.php</ code > :
10911091 </ p >
1092- < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
1092+ < pre class ="bg-gray-100 p-4 rounded mb-4 "> < code class ="language-php "> < ?php
10931093
10941094declare(strict_types=1);
10951095
0 commit comments