0%

Preface

Here is the list of the software that we use in this article:

Install Imagick extension on Xampp PHP8.1 Windows just follow the steps below:

Steps

  1. unzip php_imagick-3.7.0-8.1-ts-vs16-x64.zip , copy php_imagick.dll to xampp/php/ext folder
  2. mv php_imagick-3.7.0-8.1-ts-vs16-x64 folder to c:\ and add this folder to enviroument path , move up it on the top of php8.1 path
  3. unzip ImageMagick-7.1.0-18-vc15-x64.zip , copy bin/*.dll except ImageMagickObject.dll to xampp/apache/bin
  4. edit php.ini add one line of the extension part
    extension=php_imagick.dll
  5. restart apache

References

Its common to give user an option to filter the data which they wanted when the data amount is huge and normally you may provide different conditions to filter the data. In this article, I will show you how to build a condition based query in Laravel.
Its pretty easy to be done by the query builder.

for example:
you may give user two options to filter the data. one is the status of your order and other is the general search for the different fields.

for the status option ,we can provide a dropdown list and the general search we can provide a input field to the user.

in the livewire component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public $search = "";
public $filter_status = "";

public function render()
{
$orders = $this->getData();
return view('livewire.orders.orderlist', [
'orders' => $orders,
]);
}

public function getData()
{
$query = DB::table('orders');
if ($this->filter_status != "*") {
$query->where('status', $this->filter_status);
}
if ($this->search != "") {
$query->where('name', 'like', '%' . $this->search . '%');
}
$query->where('user_id', auth()->id());
$query->orderBy('id', 'desc');
return $query->paginate(10);
}
//reset page after update
public function updatingSearch()
{
$this->resetPage();
}
public function updatingFilterStatus()
{
$this->resetPage();
}


If you want passing route parameter to Livewire view, you can use the following method.

Change your route web.php pass route parameter to the view

1
2
3
Route::get('/posts/{id}', function ($id) {
return view('livewire.posts.home', compact('id'));
})->name('posts');

Change your view blade file posts/home.blade.php, find where you call your livewire component add the parameter to it

1
<livewire:show-post :id="$id" />

Receiving parameter from your component, you can get parameter from mount method

1
2
3
4
5
6
7
8
9
10
11
class ShowPost extends Component
{
public $post;

public function mount($id)
{
$this->post = Post::find($id);
}

...
}

Ref

If you use a livewire upload file filed in a modal dialoge, after you close the modal or upload the file you may see the upload filed is still the old one unless you choose an other file or refresh the page. I try to set the file upload variable to null to solve, but it is still the same. Livewire may not recognize the file upload filed is changed, so we can reset it by add a different id to it.

in the view file, add a iteration to reset the file upload filed.

1
<input type="file" wire:model="photo" id="upload_{{ $iteration }}" />

in the livewire component file where you reset the variable, add the following code

1
2
3
4
5
6
7
public function closeModal()
{
$this->resetValidation();
//clear photo
$this->photo = null;
$this->iteration++;
}

Sometimes after login, you will still get a 419 page expired error. This is because the server can not match the token send from the client. To avoid this error, you can use the following method:

Make sure your login form has @csrf

1
2
<form method="POST" action="{{ route('login') }}">
@csrf

Edit .env file

You can add one item to the .env file
if you are under developing, you can add this line to the .env file:

1
SESSION_DOMAIN=127.0.0.1

if you are in production, you can add this line to the .env file:

1
SESSION_DOMAIN=yourdomain.com

Clear the cache

1
php artisan cache:clear