Back

Form

The root cause of why programmers do CRUD (Create, Read, Update, and Delete)

Let me see the code 👀
routes/web.php
1<?php
2 
3use App\Livewire\Form;
4 
5Route::get('/form', Form::class);
app/Livewire/Form.php
 1<?php
 2 
 3namespace App\Livewire;
 4 
 5use Livewire\Attributes\Validate;
 6use Livewire\Component;
 7 
 8class Form extends Component
 9{
10    public $data = [];
11    #[Validate('required')]
12    public $username = '';
13    #[Validate('required|email')]
14    public $email = '';
15    #[Validate('required|confirmed|min:8')]
16    public $password = '';
17    public $password_confirmation = '';
18    #[Validate('required')]
19    public $gender = '';
20    #[Validate('required')]
21    public $hobbies = [];
22    public $otherHobby = '';
23    #[Validate('required')]
24    public $continent = '';
25    #[Validate('required')]
26    public $bio = '';
27    #[Validate('required')]
28    public $dob = '';
29 
30    public function render()
31    {
32        return view('livewire.form')
33        ->title('Form');
34    }
35 
36    function save()
37    {
38        $this->validate();
39        // Add other hobby to hobbies
40        array_push($this->hobbies, $this->otherHobby);
41        $this->data = array_merge([], [
42            'name' => $this->name,
43            'username' => $this->username,
44            'email' => $this->email,
45            'gender' => ucfirst($this->gender),
46            'continent' => ucwords($this->continent),
47            'dob' => \Carbon\Carbon::parse($this->dob)->locale('en_US')->isoFormat('MMMM DD YYYY'),
48            'hobbies' => implode(', ', $this->hobbies),
49            'bio' => $this->bio
50        ]);
51    }
52 
53    function clean()
54    {
55        // Clean the form
56        $this->resetErrorBag();
57        $this->resetValidation();
58    }
59}
resources/views/livewire/form.blade.php
  1@push('styles')
  2<style>
  3    .flex {
  4        display: flex;
  5    }
  6 
  7    .justify-center {
  8        justify-content: center;
  9    }
 10 
 11    .text-red-500 {
 12        color: rgb(239 68 68);
 13    }
 14</style>
 15@endpush
 16<div>
 17    <a href="/" class="underline text-blue-500">Back</a>
 18    <h1 class="text-2xl mb-4">Form</h1>
 19 
 20    <form wire:submit="save" x-data="{ showPassword: false, showPasswordConfirmation: false }">
 21        <div class="mb-4">
 22            <label for="username" class="block">Username</label>
 23            <input id="username" type="text" wire:model="username" placeholder="Username" class="block w-full rounded">
 24            @error('username') <span class="text-red-500">{{ $message }}</span> @enderror
 25        </div>
 26        <div class="mb-4">
 27            <label for="email" class="block">Email</label>
 28            <input id="email" type="email" wire:model="email" placeholder="Email" class="block w-full rounded">
 29            @error('email') <span class="text-red-500">{{ $message }}</span> @enderror
 30        </div>
 31        <div class="mb-4">
 32            <label for="password" class="block">Password</label>
 33            <div class="relative">
 34                <input :type="showPassword ? 'text' : 'password'" wire:model="password" placeholder="Password" class="block w-full rounded">
 35                <button type="button" class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-500 border border-transparent rounded-r-md active:bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400" @click="showPassword = !showPassword" :class="{ 'hidden': showPassword, 'block': !showPassword }">
 36                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 37                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
 38                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 39                    </svg>
 40                </button>
 41                <button type="button" class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-500 border border-transparent rounded-r-md active:bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400" @click="showPassword = !showPassword" :class="{ 'hidden': !showPassword, 'block': showPassword }">
 42                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 43                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
 44                    </svg>
 45                </button>
 46            </div>
 47            @error('password') <span class="text-red-500">{{ $message }}</span> @enderror
 48        </div>
 49        <div class="mb-4">
 50            <label for="password-confirmation" class="block">Password Confirmation</label>
 51            <div class="relative">
 52                <input id="password-confirmation" :type="showPasswordConfirmation ? 'text' : 'password'" wire:model="password_confirmation" placeholder="Password Confirmation" class="block w-full rounded">
 53                <button type="button" class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-500 border border-transparent rounded-r-md active:bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400" @click="showPasswordConfirmation = !showPasswordConfirmation" :class="{ 'hidden': showPasswordConfirmation, 'block': !showPasswordConfirmation }">
 54                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 55                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
 56                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 57                    </svg>
 58                </button>
 59                <button type="button" class="absolute inset-y-0 right-0 px-4 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-500 border border-transparent rounded-r-md active:bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400" @click="showPasswordConfirmation = !showPasswordConfirmation" :class="{ 'hidden': !showPasswordConfirmation, 'block': showPasswordConfirmation }">
 60                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 61                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
 62                    </svg>
 63                </button>
 64            </div>
 65            @error('password_confirmation') <span class="text-red-500">{{ $message }}</span> @enderror
 66        </div>
 67        <div class="mb-4">
 68            <fieldset class="block">
 69                <legend>Gender</legend>
 70                <label>
 71                    <input type="radio" value="male" wire:model="gender"> Male
 72                </label>
 73                <label>
 74                    <input type="radio" value="female" wire:model="gender"> Female
 75                </label>
 76            </fieldset>
 77            @error('gender') <span class="text-red-500">{{ $message }}</span> @enderror
 78        </div>
 79        <div class="mb-4">
 80            <fieldset class="block">
 81                <legend>Hobbies</legend>
 82                <label class="block">
 83                    <input type="checkbox" value="walking" wire:model="hobbies"> Walking
 84                </label>
 85                <label class="block">
 86                    <input type="checkbox" value="cycling" wire:model="hobbies"> Cycling
 87                </label>
 88                <label class="block">
 89                    <input type="checkbox" value="weight training" wire:model="hobbies"> Weight Training
 90                </label>
 91                <label class="block">
 92                    <input type="checkbox" value="swimming" wire:model="hobbies"> Swimming
 93                </label>
 94                <label class="block">
 95                    <input type="checkbox" value="playing music" wire:model="hobbies"> Playing Music
 96                </label>
 97                <label class="block">
 98                    <input type="checkbox" value="sing a song" wire:model="hobbies"> Sing a Song
 99                </label>
100                <label class="block">
101                    <input type="checkbox" value="other" wire:model="hobbies"> Other
102                </label>
103                <div>
104                    <label for="">
105                        Please tell me your hobby
106                        <input type="text" wire:model="otherHobby" placeholder="My hobby is" class="rounded">
107                    </label>
108                </div>
109                @error('hobbies') <span class="text-red-500">{{ $message }}</span> @enderror
110            </fieldset>
111        </div>
112        <div class="mb-4">
113            <label for="continent" class="block">Continent</label>
114            <select wire:model="continent" class="block w-full rounded">
115                <option value="">Continent</option>
116                <option value="asia">Asia</option>
117                <option value="africa">Africa</option>
118                <option value="north_america">North America</option>
119                <option value="south_america">South America</option>
120                <option value="antartic">Antartic</option>
121                <option value="eropa">Eropa</option>
122                <option value="australia">Australia</option>
123            </select>
124            @error('continent') <span class="text-red-500">{{ $message }}</span> @enderror
125        </div>
126        <div class="mb-4">
127            <label for="bio" class="block">Tell bit about your self</label>
128            <textarea id="bio" wire:model="bio" cols="30" rows="10" class="block w-full rounded" placeholder="I am..."></textarea>
129            @error('bio') <span class="text-red-500">{{ $message }}</span> @enderror
130        </div>
131        <div class="mb-4">
132            <label for="dob" class="block">Date of Birth</label>
133            <input id="dob" wire:model="dob" type="date" class="block w-full rounded">
134            @error('dob') <span class="text-red-500">{{ $message }}</span> @enderror
135        </div>
136        <button class="bg-blue-500 p-2 rounded text-white">Submit</button>
137        <button class="bg-gray-300 p-2 rounded" type="button" wire:click="clean">Reset</button>
138    </form>
139</div>
Gender
Hobbies