The root cause of why programmers do CRUD (Create, Read, Update, and Delete)
1<?php2 3use Livewire\Volt\Volt;4 5Volt::route('/form', 'form'); 1<?php 2 3use Livewire\Attributes\Title; 4use Livewire\Attributes\Validate; 5use Livewire\Form as LivewireForm; 6use Livewire\Volt\Component; 7 8class HumanForm extends LivewireForm 9{ 10 #[Validate('required')] 11 public $name = ''; 12 #[Validate('required')] 13 public $username = ''; 14 #[Validate('required|email')] 15 public $email = ''; 16 #[Validate('required|confirmed|min:8')] 17 public $password = ''; 18 public $password_confirmation = ''; 19 #[Validate('required')] 20 public $gender = ''; 21 #[Validate('required')] 22 public $hobbies = []; 23 public $otherHobby = ''; 24 #[Validate('required')] 25 public $continent = ''; 26 #[Validate('required')] 27 public $bio = ''; 28 #[Validate('required')] 29 public $dob = ''; 30} 31 32new class extends Component 33{ 34 public HumanForm $form; 35 public $data = []; 36 37 #[Title('Form - Larva Interactions')] 38 public function with(): array 39 { 40 return [ 41 'content' => markdown_convert(resource_path('docs/form.md')) 42 ]; 43 } 44 45 function save() 46 { 47 $this->validate(); 48 // Add other hobby to hobbies 49 array_push($this->form->hobbies, $this->form->otherHobby); 50 $this->data = array_merge([], [ 51 'username' => $this->form->username, 52 'email' => $this->form->email, 53 'gender' => ucfirst($this->form->gender), 54 'continent' => ucwords($this->form->continent), 55 'dob' => \Carbon\Carbon::parse($this->form->dob)->locale('en_US')->isoFormat('MMMM DD YYYY'), 56 'hobbies' => implode(', ', $this->form->hobbies), 57 'bio' => $this->form->bio 58 ]); 59 } 60 61 function clean() 62 { 63 // Clean the form 64 $this->resetErrorBag(); 65 $this->resetValidation(); 66 } 67} 68?> 69 70<div> 71 <a href="/" class="underline text-blue-500">Back</a> 72 <h1 class="text-2xl mb-4">Form</h1> 73 <p class="mb-4">The root cause of why programmers do CRUD (Create, Read, Update, and Delete)</p> 74 {!! $content !!} 75 <form wire:submit="save" x-data="{ showPassword: false, showPasswordConfirmation: false }"> 76 <div class="mb-4"> 77 <label for="name" class="block">Name</label> 78 <input id="name" type="text" wire:model="form.name" placeholder="Name" class="block w-full rounded"> 79 @error('form.name') <span class="text-red-500">{{ $message }}</span> @enderror 80 </div> 81 <div class="mb-4"> 82 <label for="username" class="block">Username</label> 83 <input id="username" type="text" wire:model="form.username" placeholder="Username" class="block w-full rounded"> 84 @error('form.username') <span class="text-red-500">{{ $message }}</span> @enderror 85 </div> 86 <div class="mb-4"> 87 <label for="email" class="block">Email</label> 88 <input id="email" type="email" wire:model="form.email" placeholder="Email" class="block w-full rounded"> 89 @error('form.email') <span class="text-red-500">{{ $message }}</span> @enderror 90 </div> 91 <div class="mb-4"> 92 <label for="password" class="block">Password</label> 93 <div class="relative"> 94 <input :type="showPassword ? 'text' : 'password'" wire:model="form.password" placeholder="Password" class="block w-full rounded"> 95 <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 }"> 96 <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"> 97 <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" /> 98 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> 99 </svg>100 </button>101 <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 }">102 <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">103 <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" />104 </svg>105 </button>106 </div>107 @error('form.password') <span class="text-red-500">{{ $message }}</span> @enderror108 </div>109 <div class="mb-4">110 <label for="password-confirmation" class="block">Password Confirmation</label>111 <div class="relative">112 <input id="password-confirmation" :type="showPasswordConfirmation ? 'text' : 'password'" wire:model="form.password_confirmation" placeholder="Password Confirmation" class="block w-full rounded">113 <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 }">114 <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">115 <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" />116 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />117 </svg>118 </button>119 <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 }">120 <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">121 <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" />122 </svg>123 </button>124 </div>125 @error('form.password_confirmation') <span class="text-red-500">{{ $message }}</span> @enderror126 </div>127 <div class="mb-4">128 <fieldset class="block">129 <legend>Gender</legend>130 <label>131 <input type="radio" value="male" wire:model="form.gender"> Male132 </label>133 <label>134 <input type="radio" value="female" wire:model="form.gender"> Female135 </label>136 </fieldset>137 @error('form.gender') <span class="text-red-500">{{ $message }}</span> @enderror138 </div>139 <div class="mb-4">140 <fieldset class="block">141 <legend>Hobbies</legend>142 <label class="block">143 <input type="checkbox" value="walking" wire:model="form.hobbies"> Walking144 </label>145 <label class="block">146 <input type="checkbox" value="cycling" wire:model="form.hobbies"> Cycling147 </label>148 <label class="block">149 <input type="checkbox" value="weight training" wire:model="form.hobbies"> Weight Training150 </label>151 <label class="block">152 <input type="checkbox" value="swimming" wire:model="form.hobbies"> Swimming153 </label>154 <label class="block">155 <input type="checkbox" value="playing music" wire:model="form.hobbies"> Playing Music156 </label>157 <label class="block">158 <input type="checkbox" value="sing a song" wire:model="form.hobbies"> Sing a Song159 </label>160 <label class="block">161 <input type="checkbox" value="other" wire:model="form.hobbies"> Other162 </label>163 <div>164 <label for="">165 Please tell me your hobby166 <input type="text" wire:model="form.otherHobby" placeholder="My hobby is" class="rounded">167 </label>168 </div>169 @error('form.hobbies') <span class="text-red-500">{{ $message }}</span> @enderror170 </fieldset>171 </div>172 <div class="mb-4">173 <label for="continent" class="block">Continent</label>174 <select wire:model="form.continent" class="block w-full rounded">175 <option value="">Continent</option>176 <option value="asia">Asia</option>177 <option value="africa">Africa</option>178 <option value="north_america">North America</option>179 <option value="south_america">South America</option>180 <option value="antartic">Antartic</option>181 <option value="eropa">Eropa</option>182 <option value="australia">Australia</option>183 </select>184 @error('form.continent') <span class="text-red-500">{{ $message }}</span> @enderror185 </div>186 <div class="mb-4">187 <label for="bio" class="block">Tell bit about your self</label>188 <textarea id="bio" wire:model="form.bio" cols="30" rows="10" class="block w-full rounded" placeholder="I am..."></textarea>189 @error('form.bio') <span class="text-red-500">{{ $message }}</span> @enderror190 </div>191 <div class="mb-4">192 <label for="dob" class="block">Date of Birth</label>193 <input id="dob" wire:model="form.dob" type="date" class="block w-full rounded">194 @error('form.dob') <span class="text-red-500">{{ $message }}</span> @enderror195 </div>196 <button class="bg-blue-500 p-2 rounded text-white">Submit</button>197 <button class="bg-gray-300 p-2 rounded" type="button" wire:click="clean">Reset</button>198 </form>199 200 @if (!empty($data))201 <pre style="overflow-x: scroll;">202 <code>203 {{ @json_encode($data) }}204 </code>205 </pre>206 @else207 <p class="my-4">No data available.</p>208 @endif209</div>No data available.