Skip to content

Commit 00d6594

Browse files
committed
fixed
1 parent 565048e commit 00d6594

1 file changed

Lines changed: 53 additions & 53 deletions

File tree

tutorial-building-todo-app.html

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -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">&lt;?php
237237

238238
declare(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">&lt;?php
283283

284284
declare(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">&lt;?php
338338

339339
declare(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">&lt;?php
443443

444444
declare(strict_types=1);
445445

@@ -604,10 +604,10 @@ <h3 class="text-lg font-semibold mb-3">Creating the Layout</h3>
604604
&lt;head&gt;
605605
&lt;meta charset="UTF-8"&gt;
606606
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
607-
&lt;title&gt;<?= e($title ?? 'Todos') ?&gt;&lt;/title&gt;
607+
&lt;title&gt;&lt;?= e($title ?? 'Todos') ?&gt;&lt;/title&gt;
608608
&lt;link rel="stylesheet" href="/assets/css/app.css"&gt;
609-
<?= csrf_meta() ?&gt;
610-
<?= window_csrf_token() ?&gt;
609+
&lt;?= csrf_meta() ?&gt;
610+
&lt;?= window_csrf_token() ?&gt;
611611
&lt;/head&gt;
612612
&lt;body class="bg-gray-50"&gt;
613613
&lt;nav class="bg-white shadow-sm mb-8"&gt;
@@ -617,27 +617,27 @@ <h3 class="text-lg font-semibold mb-3">Creating the Layout</h3>
617617
&lt;a href="/todos" class="text-xl font-bold text-gray-900"&gt;Todo App&lt;/a&gt;
618618
&lt;/div&gt;
619619
&lt;div class="flex items-center space-x-4"&gt;
620-
&lt;span class="text-gray-600"&gt;<?= e($user->email ?? 'Guest') ?&gt;&lt;/span&gt;
620+
&lt;span class="text-gray-600"&gt;&lt;?= e($user->email ?? 'Guest') ?&gt;&lt;/span&gt;
621621
&lt;a href="/auth/logout" class="text-blue-600 hover:text-blue-800"&gt;Logout&lt;/a&gt;
622622
&lt;/div&gt;
623623
&lt;/div&gt;
624624
&lt;/div&gt;
625625
&lt;/nav&gt;
626626

627627
&lt;main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"&gt;
628-
<?php if (Flash::has('success')): ?&gt;
628+
&lt;?php if (Flash::has('success')): ?&gt;
629629
&lt;div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded mb-4"&gt;
630-
<?= e(Flash::get('success')) ?&gt;
630+
&lt;?= e(Flash::get('success')) ?&gt;
631631
&lt;/div&gt;
632-
<?php endif; ?&gt;
632+
&lt;?php endif; ?&gt;
633633

634-
<?php if (Flash::has('error')): ?&gt;
634+
&lt;?php if (Flash::has('error')): ?&gt;
635635
&lt;div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded mb-4"&gt;
636-
<?= e(Flash::get('error')) ?&gt;
636+
&lt;?= e(Flash::get('error')) ?&gt;
637637
&lt;/div&gt;
638-
<?php endif; ?&gt;
638+
&lt;?php endif; ?&gt;
639639

640-
<?= section('content') ?&gt;
640+
&lt;?= section('content') ?&gt;
641641
&lt;/main&gt;
642642
&lt;/body&gt;
643643
&lt;/html&gt;</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'); ?&gt;
649+
<pre class="bg-gray-100 p-4 rounded mb-4"><code class="language-php">&lt;?php layout('todos'); ?&gt;
650650

651-
<?php section('content'); ?&gt;
651+
&lt;?php section('content'); ?&gt;
652652
&lt;div class="bg-white rounded-lg shadow p-6"&gt;
653653
&lt;h1 class="text-2xl font-bold mb-6"&gt;My Todos&lt;/h1&gt;
654654

655655
&lt;!-- Create Todo Form --&gt;
656656
&lt;form method="POST" action="/todos" class="mb-6"&gt;
657-
<?= csrf_input() ?&gt;
657+
&lt;?= csrf_input() ?&gt;
658658
&lt;div class="flex gap-4"&gt;
659659
&lt;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
&lt;!-- Todos List --&gt;
682682
&lt;div class="space-y-3"&gt;
683-
<?php foreach ($todos as $todo): ?&gt;
684-
&lt;div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md <?= $todo->completed ? 'bg-gray-50 opacity-75' : 'bg-white' ?&gt;"&gt;
683+
&lt;?php foreach ($todos as $todo): ?&gt;
684+
&lt;div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md &lt;?= $todo->completed ? 'bg-gray-50 opacity-75' : 'bg-white' ?&gt;"&gt;
685685
&lt;div class="flex-1"&gt;
686-
&lt;h3 class="font-semibold <?= $todo->completed ? 'line-through text-gray-500' : 'text-gray-900' ?&gt;"&gt;
687-
<?= e($todo->title) ?&gt;
686+
&lt;h3 class="font-semibold &lt;?= $todo->completed ? 'line-through text-gray-500' : 'text-gray-900' ?&gt;"&gt;
687+
&lt;?= e($todo->title) ?&gt;
688688
&lt;/h3&gt;
689-
<?php if ($todo->description): ?&gt;
690-
&lt;p class="text-sm text-gray-600 mt-1"&gt;<?= e($todo->description) ?&gt;&lt;/p&gt;
691-
<?php endif; ?&gt;
689+
&lt;?php if ($todo->description): ?&gt;
690+
&lt;p class="text-sm text-gray-600 mt-1"&gt;&lt;?= e($todo->description) ?&gt;&lt;/p&gt;
691+
&lt;?php endif; ?&gt;
692692
&lt;/div&gt;
693693

694-
&lt;form method="POST" action="/todos/<?= $todo->id ?&gt;/toggle" class="inline"&gt;
695-
<?= csrf_input() ?&gt;
694+
&lt;form method="POST" action="/todos/&lt;?= $todo->id ?&gt;/toggle" class="inline"&gt;
695+
&lt;?= csrf_input() ?&gt;
696696
&lt;button
697697
type="submit"
698-
class="px-4 py-2 <?= $todo->completed ? 'bg-yellow-600' : 'bg-green-600' ?&gt; text-white rounded-md hover:opacity-80"
698+
class="px-4 py-2 &lt;?= $todo->completed ? 'bg-yellow-600' : 'bg-green-600' ?&gt; text-white rounded-md hover:opacity-80"
699699
&gt;
700-
<?= $todo->completed ? 'Undo' : 'Complete' ?&gt;
700+
&lt;?= $todo->completed ? 'Undo' : 'Complete' ?&gt;
701701
&lt;/button&gt;
702702
&lt;/form&gt;
703703

704-
&lt;form method="POST" action="/todos/<?= $todo->id ?&gt;" class="inline"&gt;
705-
<?= csrf_input() ?&gt;
704+
&lt;form method="POST" action="/todos/&lt;?= $todo->id ?&gt;" class="inline"&gt;
705+
&lt;?= csrf_input() ?&gt;
706706
&lt;input type="hidden" name="_method" value="DELETE"&gt;
707707
&lt;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
&lt;/button&gt;
714714
&lt;/form&gt;
715715
&lt;/div&gt;
716-
<?php endforeach; ?&gt;
716+
&lt;?php endforeach; ?&gt;
717717

718-
<?php if (empty($todos)): ?&gt;
718+
&lt;?php if (empty($todos)): ?&gt;
719719
&lt;p class="text-gray-500 text-center py-8"&gt;No todos yet. Create your first todo above!&lt;/p&gt;
720-
<?php endif; ?&gt;
720+
&lt;?php endif; ?&gt;
721721
&lt;/div&gt;
722722
&lt;/div&gt;
723-
<?php section('content'); ?&gt;</code></pre>
723+
&lt;?php section('content'); ?&gt;</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">&lt;?php
738738

739739
declare(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
&lt;!-- Todos List --&gt;
888888
&lt;div class="space-y-3"&gt;
889-
<?php foreach ($todos as $todo): ?&gt;
890-
&lt;div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md <?= $todo['completed'] ? 'bg-gray-50 opacity-75' : 'bg-white' ?&gt;"&gt;
889+
&lt;?php foreach ($todos as $todo): ?&gt;
890+
&lt;div class="flex items-center gap-4 p-4 border border-gray-200 rounded-md &lt;?= $todo['completed'] ? 'bg-gray-50 opacity-75' : 'bg-white' ?&gt;"&gt;
891891
&lt;div class="flex-1"&gt;
892-
&lt;h3 class="font-semibold <?= $todo['completed'] ? 'line-through text-gray-500' : 'text-gray-900' ?&gt;"&gt;
893-
<?= e($todo['title']) ?&gt;
892+
&lt;h3 class="font-semibold &lt;?= $todo['completed'] ? 'line-through text-gray-500' : 'text-gray-900' ?&gt;"&gt;
893+
&lt;?= e($todo['title']) ?&gt;
894894
&lt;/h3&gt;
895-
<?php if ($todo['description']): ?&gt;
896-
&lt;p class="text-sm text-gray-600 mt-1"&gt;<?= e($todo['description']) ?&gt;&lt;/p&gt;
897-
<?php endif; ?&gt;
895+
&lt;?php if ($todo['description']): ?&gt;
896+
&lt;p class="text-sm text-gray-600 mt-1"&gt;&lt;?= e($todo['description']) ?&gt;&lt;/p&gt;
897+
&lt;?php endif; ?&gt;
898898
&lt;/div&gt;
899899

900900
&lt;button
901-
wire:click="toggleTodo(<?= $todo['id'] ?&gt;)"
902-
class="px-4 py-2 <?= $todo['completed'] ? 'bg-yellow-600' : 'bg-green-600' ?&gt; text-white rounded-md hover:opacity-80"
901+
wire:click="toggleTodo(&lt;?= $todo['id'] ?&gt;)"
902+
class="px-4 py-2 &lt;?= $todo['completed'] ? 'bg-yellow-600' : 'bg-green-600' ?&gt; text-white rounded-md hover:opacity-80"
903903
&gt;
904-
<?= $todo['completed'] ? 'Undo' : 'Complete' ?&gt;
904+
&lt;?= $todo['completed'] ? 'Undo' : 'Complete' ?&gt;
905905
&lt;/button&gt;
906906

907907
&lt;button
908-
wire:click="deleteTodo(<?= $todo['id'] ?&gt;)"
908+
wire:click="deleteTodo(&lt;?= $todo['id'] ?&gt;)"
909909
class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
910910
&gt;
911911
Delete
912912
&lt;/button&gt;
913913
&lt;/div&gt;
914-
<?php endforeach; ?&gt;
914+
&lt;?php endforeach; ?&gt;
915915

916-
<?php if (empty($todos)): ?&gt;
916+
&lt;?php if (empty($todos)): ?&gt;
917917
&lt;p class="text-gray-500 text-center py-8"&gt;No todos yet. Add one above!&lt;/p&gt;
918-
<?php endif; ?&gt;
918+
&lt;?php endif; ?&gt;
919919
&lt;/div&gt;
920920
&lt;/div&gt;</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') ?&gt;</code></pre>
926+
<pre class="bg-gray-100 p-4 rounded mb-4"><code class="language-php">&lt;?= wire('TodoList') ?&gt;</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">&lt;?php
996996

997997
declare(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">&lt;?php
10931093

10941094
declare(strict_types=1);
10951095

0 commit comments

Comments
 (0)