Hope you guys are familiar with Spatie Media Library. It's a very useful and time-saving package to manage file uploading.
It's also providing support to convert your images to thumbnails while storing images. you can generate a thumbnail of the image with the size (height, width) you want.
They are calling thumbnails to Conversions. You can generate multiple thumbnails with different sizes as you want.
So let's see some short example which helps us to create thumbnails of an uploaded image.
Implement the HasMediaTrait into your Model
Here we have a User model and we want to generate a thumbnail of the user upload his profile image. you have to add HasMediaTrait to the User model and need to extend HasMedia.
use IlluminateDatabaseEloquentModel; use SpatieMediaLibraryModelsMedia; use SpatieMediaLibraryHasMediaHasMedia; use SpatieMediaLibraryHasMediaHasMediaTrait;
class User extends Model implements HasMedia { use HasMediaTrait;
public function registerMediaConversions(Media $media = null) { $this->addMediaConversion('profile-thumb') ->width(150) ->height(150); } }
Here we have defined function registerMediaConversions in which we can manage the size of a thumbnail, which means how much height or width we want for the thumbnail.
So when we upload an image using the media library,
it will auto-generate the thumbnails with given height and width.
How to fetch the generated thumbnail?
$media->getPath(); // the path to the where the original image is stored $media->getPath('profile-thumb') // the path to the converted image with dimensions 150*150
$media->getUrl(); // the url to the where the original image is stored $media->getUrl('profile-thumb') // the url to the converted image with dimensions 150*150
How to generate multiple thumbnails for a single image?
..... in User Model ..... use SpatieImageManipulations;
public function registerMediaConversions(Media $media = null) { $this->addMediaConversion('profile-thumb') ->width(150) ->height(150); }
Zoom Marketplace is providing APIs to create zoom meeting direct using the web interface and calling its API. So first of you need to create your zoom ap into zoom marketplace and need to generate the API Keys and credentials.
Nowdays, laravel livewire is becoming more trendy for geeks. as most of developers are using it, more and more issues they are facing while developing the products. one of them is searching the records.
Recently we have developed the livewire common searchable component which makes your searching easier, as you can specify which fields you want to search by just giving the field name into the component.
What you have to do is just create SearchableComponent a class into your App\Http\Livewire directory. just copy the following class on the given namespace.
<?php
namespace App\Http\Livewire;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;
use Livewire\WithPagination;
use Str;
abstract class SearchableComponent extends Component
{
use WithPagination;
/**
* @var string
*/
public $search = '';
/**
* @var int
*/
protected $paginate = 12;
/** @var Builder */
private $query;
/**
* SearchableComponent constructor.
*
* @param $id
*/
public function __construct($id)
{
parent::__construct($id);
$this->prepareModelQuery();
}
/**
* Prepare query
*/
private function prepareModelQuery()
{
/** @var Model $model */
$model = app($this->model());
$this->query = $model->newQuery();
}
/**
* @return mixed
*/
abstract function model();
/**
* Reset model query
*/
protected function resetQuery()
{
$this->prepareModelQuery();
}
/**
* @return Builder
*/
protected function getQuery()
{
return $this->query;
}
/**
* @param Builder $query
*/
protected function setQuery(Builder $query)
{
$this->query = $query;
}
/**
* @param bool $search
* @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
*/
protected function paginate($search = true)
{
if ($search) {
$this->filterResults();
}
$all = $this->query->paginate($this->paginate);
$currentPage = $all->currentPage();
$lastPage = $all->lastPage();
if ($currentPage > $lastPage) {
$this->page = $lastPage;
}
return $this->query->paginate($this->paginate);
}
/**
* @return Builder
*/
protected function filterResults()
{
$searchableFields = $this->searchableFields();
$search = $this->search;
$this->query->when(! empty($search), function (Builder $q) use ($search, $searchableFields) {
$searchString = '%'.$search.'%';
foreach ($searchableFields as $field) {
if (Str::contains($field, '.')) {
$field = explode('.', $field);
$q->orWhereHas($field[0], function (Builder $query) use ($field, $searchString) {
$query->whereRaw("lower($field[1]) like ?", $searchString);
});
} else {
$q->orWhereRaw("lower($field) like ?", $searchString);
}
}
});
return $this->query;
}
/**
* @return mixed
*/
abstract function searchableFields();
}
Now you have to extend your existing laravel component by SearchableComponent. let's say we already have Tags livewire component. and its looks like following.
<?php
namespace App\Http\Livewire;
use App\Models\Tag;
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
class Tags extends SearchableComponent
{
public function render()
{
$tags = $this->searchTags();
return view('livewire.tags', [
'tags' => $tags,
])->with("search");
}
/**
* @return LengthAwarePaginator
*/
public function searchTags()
{
$this->setQuery($this->getQuery());
return $this->paginate();
}
function model()
{
return Tag::class;
}
function searchableFields()
{
return [ 'name', ]; } }
So here we have extended our existing Tags component by SearchingComponent.
In searchable fields you can specify the field name that you want to search. and replace the Model with your records Model.
That it. Now you don't need to write search queries again and again. just extend your livewire component by searchable component.
Here are some Interesting livewire tutorials that you need to check :
Well you just need to add some JQuery code to your livewire component. here we are going to use afterDomUpdate webhook of livewire. add following code to your livewire component :
Laravel Livewire is used to build dynamic web pages that work without ajax or any javascript code. we can build dynamic components with livewire with less code and more functionalities.
I hope this basic introduction will be enough to start laravel livewire.
Now let's move to installation steps, and I hope you already have setup your laravel project.
Install Livewire
composer require livewire/livewire
Include the javascript and styles (On your master blade file)
Here we are going to create a component to create a summation of 2 values without hitting any buttons, it will do a summation of 2 values as you type in text boxes.
Now let's create our component by hitting the following command :
php artisan make:livewire Summation
it will create 2 files as shown below:
// app/Http/Livewire/Summation/php
namespace App\Http\Livewire;
use Livewire\Component;
class Summation extends Component
{
public function render()
{
return view('livewire.summation');
}
}
// resources/views/livewire/summation.blade.php
<div>
...
</div>
Include the component
Include created component to your view where you want to show.
Now let's first do a change in our livewire component Summation.php
namespace App\Http\Livewire;
use Livewire\Component;
class Summation extends Component
{
public $value1 = 0;
public $value2 = 0;
public $sum = 0;
public function mount()
{
$this->sum = 0;
}
public function render()
{
$this->sum = $this->value1 + $this->value2;
return view('livewire.summation');
}
}
Here we have to take 2 public properties value1, value2 and sum. and in mount method (which will be called when the page is load the first time) I have replaced the sum property value to 0.
And In the render method, I have done a summation of the 2 public property values. which will be directly accessed values of input from blade files directly here. but how ?? we will see soon.
[Livewire](https://laravel-livewire.com/docs/2.x/quickstart) is a very awesome thing that I have ever seen, the old school developers are still using the jquery and ajax concept to not refresh the page. But forget the jquery and ajax stuff. If you are good at PHP then you can do the same with Laravel Livewire. ### Wait what? ## Load dynamic data on the page without using ajax? Yes, it is possible with Laravel Livewire. So that is all about laravel livewire, and in this tutorial, we will see how to build laravel pagination with laravel livewire. Let's start and I hope you already have set up the livewire. Let's say you already have created a component named `UsersListing` Now in the users listing, we want to paginate all users and we will list 10 records per page. ## How to use pagination with Laravel Livewire Livewire provides a trait called `WithPagination` and you have to add it into your component `UsersListing`. Check out the following code: ``` use Livewire\WithPagination; use Livewire\Component; class UsersListing extends Component { use WithPagination; public function render() { return view('livewire.users.index', [ 'users' => User::paginate(10), ]); } } ``` And to load pagination you have to add following code: ```
@foreach ($users as $user) ... @endforeach {{ $users->links() }} ``` That's it, and your laravel pagination now works like charm without page refresh. There is much more about pagination like how to use it with a custom view, how to use it with a custom theme. We will see it in our next tutorial, until then enjoy the code
Vishal Ribdiya
