KaryawanIndex.php

<?php

namespace App\Http\Livewire\Pages\Karyawan;

use Livewire\Component;
use App\Models\Karyawan;
class KaryawanIndex extends Component
{

    public $employeeData = [];

    /**
     * this is a global variable to work with
     * wire:model="employee_number",
     * wire:model="employee_name"
     * wire:model="gender"
     */
    public $employee_number, $employee_name, $gender;

    /**
     * giving validation rule
     * this is a global validation rule
     */

    protected $rules = [
        'employee_number'   => 'required|min:10',
        'employee_name'     => 'required|min:5',
        'gender'            => 'required'
    ];

    /**
     * will run after render function
     */
    public function mount()
    {
        $this->employeeData = Karyawan::all();
        $this->resetData();
    }

    /**
     * This function is to make real-time validation to form, when the user do a change
     */

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    /**
     * this function will used to reset input field in a form with the wire:model
     */
    public function resetData()
    {
        $this->employee_number = '';
        $this->employee_name = '';
        $this->gender = '';
    }

    public function render()
    {
        return view('livewire.pages.karyawan.karyawan-index', [
            'employees' => $this->employeeData
        ]);
    }

    /**
     * this function will used to add data to the karyawan table
     */

    public function addData() {

        // Run the validate function on addData
        $this->validate();

        $data = array(
            'employee_number' => $this->employee_number,
            'employee_name' => $this->employee_name,
            'gender' => $this->gender
        );

        // Insert data using Eloquent ORM
        Karyawan::create($data);

        // Update employeeData with a new Karyawan Data
        $this->employeeData = Karyawan::all();

        // Refresh input form
        $this->resetData();
    }
}