This is my livewire component class code
This is my livewire component class code This is my livewire component class code This is my livewire component class code
<?php
namespace App\Http\Livewire;
use Livewire\WithPagination;
use Livewire\Component;
use App\Models\student;
class Students extends Component
{
public $selectData= true;
public $createtData= false;
public $updateData= false;
public $name;
public $email;
public $country;
public $studentID;
public $edi_name;
public $edi_email;
public $edi_country;
public $total_student;
use WithPagination;
public function render()
{ $this->total_student=student::get();
$student=student::orderBy('studentID','ASC')->paginate(100);
return view('livewire.students',['student'=>$student])->extends('layouts.app');
}
public function showform()
{
dd('kawish');
$this->selectData=false;
$this->createtData=true;
}
public function resetField()
{
$this->$name="";
$this->$email="";
$this->$country="";
$this->studentID;
$this->edi_name="";
$this->edi_email="";
$this->edi_country="";
}
public function create()
{
$student=new student();
$this->validate([
'name'=>'required',
'email'=>'required',
'country'=>'required',
]);
//This is my livewire
$student->name=$this->name;
$student->email=$this->email;
$student->country=$this->country;
$result =$student->save();
$this->resetField();
$this->selectData=true;
$this->createtData=false;
}
public function edit($studentID)
{
$this->selectData=false;
$this->updateData=true;
$student= student::findorFail($studentID);
$this->studentID=$student->studentID;
$this->edi_name=$student->name;
$this->edi_email=$student->email;
$this->edi_country=$student->country;
}
public function update($studentID)
{
$student= student::findorFail($studentID);
$this->validate([
'edi_name'=>'required',
'edi_email'=>'required',
'edi_country'=>'required',
]);
$student->name=$this->edi_name;
$student->email=$this->edi_email;
$student->country=$this->edi_country;
$result =$student->save();
$this->resetField();
$this->selectData=true;
$this->updateData=false;
}
public function delete($studentID){
$student= student::findorFail($studentID);
$result=$student->delete();
}
}
//This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire //This is my livewire
This is my view for the same classThis is my view for the same classT his is my view for the same class
<div>
@section('title','students')
@section('content')
<div class=" container">
<div class="mt-5">
<div class=" card">
<div class=" card-header">
<div class=" d-flex justify-content-between">
<h3>users ({{count($total_student)}})</h3>
<div>
<button wire:click='showform' class="btn btn-success">Add User</button> *//error
</div>
</div>
</div>
</div>
</div>
List item
{{-- table list --}}
@if ($selectData==true)
<div class=" table-responsive mt-5">
<table class="table table-bordered">
<thead>
<tr class="bg-dark text-light">
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
@forelse ( $student as $item )
<tbody>
<tr>
<td>{{ $item->studentID }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->country }}</td>
<td>
<button class="btn btn-success" wire:click="edit({{$item->studentID }})">Edit</button>
<button class="btn btn-danger" wire:click="delete({{$item->studentID }})">Delete</button>
</td>
</tr>
@empty
<tr>
<td>
<p class="text-danger">#record not found</p>
</td>
</tr>
</tbody>
@endforelse
</table>
</div>
@endif
{{-- create data --}}
@if ($createtData==true)
<div class="row">
<div class=" col-xl-6 col-md-8 col-sm-12 offset-xl-3 offset-md-2 offset-sm-0">
<div class="card">
<div class="card-header">
<h1>Add Data</h1>
</div>
<form action="" class="mt-5" wire.submit.prevent='create'>
<div class="card-body">
<div class=" form-group">
<label for="name">Enter Name</label>
<input wire:model='name' type="text" name="name" id="name" class="form-control form-control-lg">
<span class="text-danger">
@error('name')
{{ $message }}
@enderror
</span>
</div>
<div class=" form-group">
<label for="email">Enter Email</label>
<input wire:model='email' type="email" name="email" id="email" class="form-control form-control-lg">
@error('email')
{{ $message }}
@enderror
</div>
<div class=" form-group">
<label for="country">Enter Country</label>
<input wire:model='country' type="text" name="country" id="country" class="form-control form-control-lg">
@error('country')
{{ $message }}
@enderror
</div>
</div>
<div class=" card-footer">
<button class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
@endif
{{-- update data --}}
@if ($updateData==true)
<div class="row mt-5">
<div class=" col-xl-6 col-md-8 col-sm-12 offset-xl-3 offset-md-2 offset-sm-0">
<div class="card">
<div class="card-header">
<h1>Update Data</h1>
</div>
<form action="" class="mt-5" wire.submit.prevent='update({{$studentID}})'>
<div class="card-body">
<div class=" form-group">
<label for="name">Enter Name</label>
<input wire:model="edi_name" type="text" name="name" id="name" class="form-control form-control-lg">
<span class="text-danger">
@error('edi_name')
{{ $message }}
@enderror
</span>
</div>
<div class=" form-group">
<label for="email">Enter Email</label>
<input wire:model="edi_email" type="email" name="email" id="email" class="form-control form-control-lg">
<span class="text-danger">
@error('edi_email')
{{ $message }}
@enderror
</span>
</div>
<div class=" form-group">
<label for="country">Enter Country</label>
<input wire:model="edi_name" type="text" name="country" id="country" class="form-control form-control-lg">
<span class="text-danger">
@error('edi_country')
{{ $message }}
@enderror
</span>
</div>
</div>
<div class=" card-footer">
<button class="btn btn-success">Update</button>
</div>
</form>
</div>
</div>
</div>
@endif
</div>
@endsection
//This is my livewire //This is my livewire
my layout codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
@livewireStyles
</head>
<body>
<div class="container-fluid bg-dark">
<div class=" container p-4">
<h2 class="text-center text-white">Laravel Livewire Crud</h2>
</div>
</div>
<div>
@yield('content')
</div>
@livewireScripts
</body>
</html>
`**my routing**`
<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Livewire\Students;
// Route::view('/', 'app');
Route::get('/', Students::class);
here its endsssss here its endsssss
Remove the @section in your component view. livewire component needs to start with a . You can extend your section inside the component to have it like this
public function render()
{ $this->total_student=student::get();
$student=student::orderBy('studentID','ASC')->paginate(100);
return view('livewire.students',['student'=>$student])->extends('layouts.app')->slot('content");
}
You can have your component view like this
<div class=" container">
<div class="mt-5">
<div class=" card">
<div class=" card-header">
<div class=" d-flex justify-content-between">
<h3>users ({{count($total_student)}})</h3>
<div>
<button wire:click='showform' class="btn btn-success">Add User</button> *//error
</div>
</div>
</div>
</div>
</div>