I'm new to livewire and currently I created a simple crud that can save the student data. My database schema are student table, families table and family_student table.
Student TAble
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('last_name');
$table->string('middle_name');
$table->string('first_name');
$table->date('dob');
$table->timestamps();
});
Families Table
Schema::create('families', function (Blueprint $table) {
$table->id();
$table->string('f_last_name');
$table->string('f_middle_name');
$table->string('f_first_name');
$table->string('f_occupation');
$table->timestamps();
});
Family Student Table
Schema::create('family_student', function (Blueprint $table) {
$table->id();
$table->foreignId('student_id')->constrained();
$table->foreignId('family_id')->constrained();
$table->boolean('isParent')->default(0);
$table->boolean('guardianStudentLiving')->default(0);
$table->timestamps();
});
In the livewire part I populate 3 sets of input that and all data will be save in the same columns.
LIVEWIRE
public $last_name;
public $middle_name;
public $first_name;
public $dob;
public $f_last_name;
public $f_middle_name;
public $f_first_name;
public $f_occupation;
public $isParent = null;
public $guardianStudentLiving = null;
public $getData;
public $parentCollections = [];
public $setFields = 3;
// Set sang rules for validation
protected $rules = [
'last_name' => ['required'],
'middle_name' => ['required'],
'first_name' => ['required'],
'dob' => ['required'],
'f_last_name.*' => ['required'],
'f_middle_name.*' => ['required'],
'f_first_name.*' => ['required'],
'f_occupation.*' => ['required'],
'guardianStudentLiving.*' => ['required'],
];
// relatime validation trigger sang update function
public function updated($propertyName){
$this->validateOnly($propertyName);
}
// save data in db
public function store(){
$studentData = ModelsStudent::create([
'last_name' => $this->last_name,
'middle_name' => $this->middle_name,
'first_name' => $this->first_name,
'dob' => $this->dob,
]);
$isParent = $this->isParent != null ? 1 : 0;
$guardianStudentLiving = $this->guardianStudentLiving != null ? 1 : 0;
foreach ($this->parentCollections as $key => $parentCollection) {
$parent = ModelsFamily::create([
['f_last_name' => $parentCollection['f_last_name']],
['f_middle_name' => $parentCollection['f_middle_name']],
['f_first_name' => $parentCollection['f_first_name']],
['f_occupation' => $parentCollection['f_occupation']],
]);
foreach ($parentCollection as $key => $value) {
$value = $this->studentData->families()->attach($key,
[
'isParent' => $isParent,
'guardianStudentLiving' => $guardianStudentLiving,
'created_at' => now(),
'updated_at' => now()
]);
}
}
session()->flash('message','The data successfully saved!');
$this->reset();
}
public function mount(){
//get data
$this->getData = ModelsStudent::with(['families:id,f_last_name,f_middle_name,f_first_name,f_occupation'])->select('id','first_name','middle_name','last_name')->get();
//creating 3 sets of input fields
for ($i=0; $i < $this->setFields; $i++) {
$this->parentCollections[] = [
'f_last_name' => '',
'f_middle_name' => '',
'f_first_name' => '',
'occupation' => ''
];
}
}
public function render()
{
return view('livewire.student.student');
}
LIVEWIRE FORM
<form wire:submit.prevent='store'>
@csrf
@if (session()->has('message'))
<div class="px-6 py-4 bg-blue-50 rounded-lg text-blue-500">
{{ session('message') }}
</div>
@endif
<div>
<h5 class="text-lg mb-5">Student Information</h5>
<div class="flex flex-row space-x-4">
<x-label>{{ __('last name') }}</x-label>
<x-input wire:model.lazy='last_name' name="last_name" id="last_name" type="text" required></x-input>
<x-label>{{ __('middle name') }}</x-label>
<x-input wire:model.lazy='middle_name' name="middle_name" id="middle_name" type="text" required></x-input>
<x-label>{{ __('first name') }}</x-label>
<x-input wire:model.lazy='first_name' name="first_name" id="first_name" type="text" required></x-input>
<x-label>{{ __('date of birth') }}</x-label>
<x-input type="date" wire:model.lazy='dob' name="dob" id="dob" required></x-input>
</div>
<hr class="my-12">
<h5 class="text-lg mb-5">Parent Information</h5>
{{-- @for ($i = 0 ; $i < 3 ; $i++)
<div class="flex flex-row mb-8">{{ ($i === 1) ? 'Father' : (($i === 2) ? 'Mother' : 'Guardian') }} {{ __("'s Info") }}</div>
<livewire:student.parent-input :i="$i" :wire:key='$i'>
@endfor --}}
@foreach ($parentCollections as $key => $parentCollection)
<div class="flex flex-row mb-6">
<x-label class="text-bold">
{{ ($key === 0) ? 'Father' : (($key === 1) ? 'Mother' : 'Guardian') }} {{ __("'s Info") }} <span class="text-red-500 text-bold text-lg">*</span>
</x-label>
</div>
<div>
<div class="grid grid-cols-4 grid-rows-1 grid-flow-row gap-4">
<div>
<div class="flex flex-col">
<x-label class="text-xs">{{ __('LAST NAME') }}</x-label>
<x-input wire:key='parentCollections[{{ $key }}][ f_last_name ]' wire:model.lazy='parentCollections.{{ $key }}.f_last_name' class="mb-8" placeholder="Last name"/>
@error('parentCollections.{{ $key }}.f_last_name') <span class="text-red-500 error">{{ $message }}</span>@enderror
</div>
</div>
<div>
<div class="flex flex-col">
<x-label class="text-xs">{{ __('MIDDLE NAME') }}</x-label>
<x-input wire:key='parentCollections[{{ $key }}][ f_middle_name ]' wire:model.lazy='parentCollections.{{ $key }}.f_middle_name' class="mb-8"/>
@error('f_middle_name.{{ $parentCollections }}') <span class="text-red-500 error">{{ $message }}</span>@enderror
</div>
</div>
<div>
<div class="flex flex-col">
<x-label class="text-xs">{{ __('FIRST NAME') }}</x-label>
<x-input wire:key='parentCollections[{{ $key }}][ f_first_name ]' wire:model.lazy='parentCollections.{{ $key }}.f_first_name' class="mb-8"/>
</div>
</div>
<div>
<div class="flex flex-col">
<x-label class="text-xs">{{ __('OCCUPATION') }}</x-label>
<x-input wire:key='parentCollections[{{ $key }}][ f_occupation ]' wire:model.lazy='parentCollections.{{ $key }}.f_occupation' class="mb-8"/>
</div>
</div>
</div>
@if ($key > 1)
<div class="flex flex-row space-x-4 content-center">
<x-checkbox wire:key='guardianStudentLiving.{{ $key }}' wire:model.lazy='guardianStudentLiving.{{ $key }}' name="guardianStudentLiving.{{ $key }}" class="mb-8"/>
<x-label class="text-md">{{ __('Is guardian living with the student?') }}</x-label>
</div>
@endif
</div>
@endforeach
<x-button wire:submit.prevent='store' type="submit" class="mt-8">{{ __("Submit") }}</x-button>
</div>
</form>
Now my problem is, every time I save the data the only data will be save are the student data only and it dispalyed an error like this.
How can I save the multiple input data in the families table?
I want to save the 3 sets of families data to be save in the database at the same time is attached the pivot column.
