Laravel Posts
Send real time notification with Pusher using Laravel and JavascriptLaravel

Send real time notification with Pusher using Laravel and JavascriptLaravel
Here we will learn how to send real-time notifications using Pusher + Laravel.
First of all, you need to create an account in the Pusher and get API keys from there.
Setting up your Laravel application
Now we need to install Pusher SDK, you can install it by the composer using the below command,
composer require pusher/pusher-php-server
After the composer is done, we will need to configure Laravel to use Pusher as its broadcast driver, update the below variables in the .env file,
PUSHER_APP_ID=123456
BROADCAST_DRIVER=pusher
// Get the API Keys from your pusher dashboard
PUSHER_APP_ID=XXXXX
PUSHER_APP_KEY=XXXXXXX
PUSHER_APP_SECRET=XXXXXXX
Open config/app.phpand uncomment the "App\Providers\BroadcastServiceProvider::class".
Now we need an event that will be broadcast to the pusher driver. Let's create a NotificationEvent.
php artisan make:event NotificationEvent
This command will create a below file
namespace App\Events;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class NotificationEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $username;
public $message;
public function __construct($username)
{
$this->username = $username;
$this->message = "{$username} send you a notification";
}
public function broadcastOn()
{
//it is a broadcasting channel you need to add this route in channels.php file
return ['notification-send'];
}
}
Add broadcasting route in channels.php file
Broadcast::channel('notification-send', function ($user) {
return true;
});
Cache Event at Javascript Side
// Initiate the Pusher JS library
var pusher = new Pusher('YOUR_API_KEY', {
encrypted: true
});
// Subscribe to the channel we used in our Laravel Event
var channel = pusher.subscribe('notification-send');
channel.bind('App\\Events\\NotificationEvent', function(data) {
// this is called when the event notification is received...
});
Testing and Setup
Using the below route we can send a notification.
Route::get('test', function () {
event(new App\Events\NotificationEvent('Monika'));
return "Event has been sent!";
});
How to do payments with stripe checkoutLaravel

How to do payments with stripe checkoutLaravel
Payments gateways are very useful components of any e-commerce store. One of the popular payment gateways is Stripe. it's becoming more popular nowadays.
Stripe's simple definition is :
We bring together everything that’s required to build websites and apps that accept payments and send payouts globally. Stripe’s products power payments for online and in-person retailers, subscription businesses, software platforms and marketplaces, and everything in between. ~ Stripe
To begin this laravel tutorial, I hope you already have fresh laravel repo.
Stripe Configuration with Laravel
Run the following command to install stripe :
composer require stripe/stripe-php
if you don't have a Stripe account, you'll want to set that up and add your API keys. Add the following to your .env file.
STRIPE_KEY=your-stripe-key
STRIPE_SECRET=your-stripe-secret
Publish Migrations Files From Stripe
php artisan vendor:publish --tag="cashier-migrations"
And Run migrations by hitting the following command
php artisan migrate
Setup Stripe Controller
Now create a stripe controller by hitting the following command:
php artisan make:controller StripeController
namespace App\Http\Controllers;
use Illuminate\Contracts\View\Factory;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Stripe\Checkout\Session;
use Stripe\Exception\ApiErrorException;
/**
* Class FeaturedCompanySubscriptionController
*/
class StripeControlle extends AppBaseController
{
public function createSession(Request $request)
{
setStripeApiKey();
$session = Session::create([
'payment_method_types' => ['card'],
'customer_email' => $userEmail,
'line_items' => [
[
'price_data' => [
'product_data' => [
'name' => 'Make '.$company->user->first_name.' as featured Company',
],
'unit_amount' => 100 * 100,
'currency' => 'USD',
],
'quantity' => 1,
'description' => '',
],
],
'client_reference_id' => '1234',
'mode' => 'payment',
'success_url' => url('payment-success').'?session_id={CHECKOUT_SESSION_ID}',
'cancel_url' => url('failed-payment?error=payment_cancelled'),
]);
$result = [
'sessionId' => $session['id'],
];
return $this->sendResponse($result, 'Session created successfully.');
}
public function paymentSuccess(Request $request)
{
$sessionId = $request->get('session_id');
//
}
public function handleFailedPayment()
{
//
}
}
Define Routes
Route::post('stripe-charge', 'StripeController@createSession');
Route::get('payment-success', 'StripeController@paymentSuccess');
Route::get('failed-payment', 'StripeController@handleFailedPayment');
Setup From View file
Here we are going to create stripe session from the backend and redirect to the stripe checkout page once we will receive the sessionId from the backend.
Assume that makePaymentURL is something like "APP_URL/stripe-charge".
Now let's say when you hit the submit form of stripe it will call MakePaymentURL and that URL returns your session ID which we will use to redirect to the stripe checkout page.
$(document).on('click', '#makePayment', function () {
$(this).addClass('disabled');
$.post(makePaymentURL, payloadData).done((result) => {
let sessionId = result.data.sessionId;
stripe.redirectToCheckout({
sessionId: sessionId,
}).then(function (result) {
$(this).html('Make Featured').removeClass('disabled');
manageAjaxErrors(result);
});
}).catch(error => {
$(this).html('Make Featured').removeClass('disabled');
manageAjaxErrors(error);
});
});
That's it, after entering proper details into stripe you will get a success callback to a related route, where you can perform related actions.
How to generate thumbnails by using Spatie Media LibraryLaravel

How to generate thumbnails by using Spatie Media LibraryLaravel
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 examples which help 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 uploading 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 a 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,
$media = User::first()->addMedia($pathToImage)->toMediaCollection();
it will auto-generate the thumbnails with the 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);
}
$this->addMediaConversion('old-profile-thumb')
->sepia()
->border(8, 'black', Manipulations::BORDER_OVERLAY);
}
so, it will generate 2 thumbnails with different image properties. you can use different image properties directly while generating thumbnails.
That's it, you can read more about the spatie media library conversions (thumbnails) here.
Keep connected to us for more interesting posts about laravel.
How to integrate Zoom Meeting APIs with LaravelLaravel

How to integrate Zoom Meeting APIs with LaravelLaravel
Zoom Marketplace is providing APIs to create zoom meetings directly using the web interface and calling its API. So first of all you need to create your zoom ap into zoom marketplace and need to generate the API Keys and credentials.
Create a Zoom Application
- Go to Zoom marketplace and do sign in
- Click the Develop button on the header and select Build App menu.
- Choose the JWT and create an application with the app name that you want.
- Input required information and click Continue until your app will be activated.
I hope you already have installed fresh laravel.Now you have to add the following packages to your composer.json
to integrate the zoom API.
composer require firebase/php-jwt
composer require guzzlehttp/guzzle
And Now run composer update
And don't forget that we also need to modify .env
files to set the zoom API credentials.
ZOOM_API_URL="https://api.zoom.us/v2/"
ZOOM_API_KEY="INPUT_YOUR_ZOOM_API_KEY"
ZOOM_API_SECRET="INPUT_YOUR_ZOOM_API_SECRET"
can find the zoom credentials from your zoom app.
Now just copy the given ZoomMeetingTrait
to your controller and call-related methods.
namespace App\Traits;
use GuzzleHttp\Client;
use Log;
/**
* trait ZoomMeetingTrait
*/
trait ZoomMeetingTrait
{
public $client;
public $jwt;
public $headers;
public function __construct()
{
$this->client = new Client();
$this->jwt = $this->generateZoomToken();
$this->headers = [
'Authorization' => 'Bearer '.$this->jwt,
'Content-Type' => 'application/json',
'Accept' => 'application/json',
];
}
public function generateZoomToken()
{
$key = env('ZOOM_API_KEY', '');
$secret = env('ZOOM_API_SECRET', '');
$payload = [
'iss' => $key,
'exp' => strtotime('+1 minute'),
];
return \Firebase\JWT\JWT::encode($payload, $secret, 'HS256');
}
private function retrieveZoomUrl()
{
return env('ZOOM_API_URL', '');
}
public function toZoomTimeFormat(string $dateTime)
{
try {
$date = new \DateTime($dateTime);
return $date->format('Y-m-d\TH:i:s');
} catch (\Exception $e) {
Log::error('ZoomJWT->toZoomTimeFormat : '.$e->getMessage());
return '';
}
}
public function create($data)
{
$path = 'users/me/meetings';
$url = $this->retrieveZoomUrl();
$body = [
'headers' => $this->headers,
'body' => json_encode([
'topic' => $data['topic'],
'type' => self::MEETING_TYPE_SCHEDULE,
'start_time' => $this->toZoomTimeFormat($data['start_time']),
'duration' => $data['duration'],
'agenda' => (! empty($data['agenda'])) ? $data['agenda'] : null,
'timezone' => 'Asia/Kolkata',
'settings' => [
'host_video' => ($data['host_video'] == "1") ? true : false,
'participant_video' => ($data['participant_video'] == "1") ? true : false,
'waiting_room' => true,
],
]),
];
$response = $this->client->post($url.$path, $body);
return [
'success' => $response->getStatusCode() === 201,
'data' => json_decode($response->getBody(), true),
];
}
public function update($id, $data)
{
$path = 'meetings/'.$id;
$url = $this->retrieveZoomUrl();
$body = [
'headers' => $this->headers,
'body' => json_encode([
'topic' => $data['topic'],
'type' => self::MEETING_TYPE_SCHEDULE,
'start_time' => $this->toZoomTimeFormat($data['start_time']),
'duration' => $data['duration'],
'agenda' => (! empty($data['agenda'])) ? $data['agenda'] : null,
'timezone' => 'Asia/Kolkata',
'settings' => [
'host_video' => ($data['host_video'] == "1") ? true : false,
'participant_video' => ($data['participant_video'] == "1") ? true : false,
'waiting_room' => true,
],
]),
];
$response = $this->client->patch($url.$path, $body);
return [
'success' => $response->getStatusCode() === 204,
'data' => json_decode($response->getBody(), true),
];
}
public function get($id)
{
$path = 'meetings/'.$id;
$url = $this->retrieveZoomUrl();
$this->jwt = $this->generateZoomToken();
$body = [
'headers' => $this->headers,
'body' => json_encode([]),
];
$response = $this->client->get($url.$path, $body);
return [
'success' => $response->getStatusCode() === 204,
'data' => json_decode($response->getBody(), true),
];
}
/**
* @param string $id
*
* @return bool[]
*/
public function delete($id)
{
$path = 'meetings/'.$id;
$url = $this->retrieveZoomUrl();
$body = [
'headers' => $this->headers,
'body' => json_encode([]),
];
$response = $this->client->delete($url.$path, $body);
return [
'success' => $response->getStatusCode() === 204,
];
}
}
And add the following constants to your controller.
const MEETING_TYPE_INSTANT = 1;
const MEETING_TYPE_SCHEDULE = 2;
const MEETING_TYPE_RECURRING = 3;
const MEETING_TYPE_FIXED_RECURRING_FIXED = 8;
So the final controller will look like,
namespace App\Http\Controllers;
use App\Models\ZoomMeeting;
use App\Traits\ZoomMeetingTrait;
use Illuminate\Http\Request;
class MeetingController extends AppBaseController
{
use ZoomMeetingTrait;
const MEETING_TYPE_INSTANT = 1;
const MEETING_TYPE_SCHEDULE = 2;
const MEETING_TYPE_RECURRING = 3;
const MEETING_TYPE_FIXED_RECURRING_FIXED = 8;
public function show($id)
{
$meeting = $this->get($id);
return view('meetings.index', compact('meeting'));
}
public function store(Request $request)
{
$this->create($request->all());
return redirect()->route('meetings.index');
}
public function update($meeting, Request $request)
{
$this->update($meeting->zoom_meeting_id, $request->all());
return redirect()->route('meetings.index');
}
public function destroy(ZoomMeeting $meeting)
{
$this->delete($meeting->id);
return $this->sendSuccess('Meeting deleted successfully.');
}
}
So this is all you need to integrate the zoom API, so easy 😊 Right. Enjoy the code.
Make fully configurable livewire searching componentLaravel

Make fully configurable livewire searching componentLaravel
Nowadays, laravel livewire is becoming more trendy for geeks. as most developers are using it, more and more issues 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 a SearchableComponent 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 the Tags livewire component. and it looks like the following.
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', [undefined])->with("search");
}
/**
@return LengthAwarePaginator
/
public function searchTags()
{
$this->setQuery($this->getQuery());
return $this->paginate();
}
function model()
{
return Tag::class;
}
function searchableFields()
{
return [
];
}
}
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 Modal.
That's it. Now you don't need to write search queries again and again. just extend your livewire component by a searchable component.
Here are some Interesting livewire tutorials that you need to check :
How to use select2 with livewireLaravel

How to use select2 with livewireLaravel
Most of the developers are facing a select2 style removing issue when livewire renders the component.
We can resolve this issue by using a livewire javascript hook.
Here is my screen with select2 before livewire component rendering.
And when the livewire component is refreshed means re-render the select2 style is gone ☹️
How to Fix it ?? 🤔
Well, you just need to add some JQuery code to your livewire component. Here we are going to use afterDomUpdate webhook of livewire. add the following code to your livewire component :
document.addEventListener('livewire:load', function (event) {
window.livewire.hook('afterDomUpdate', () => {
$('#select2ID').select2();
});
});
livewire:load is listening events when the livewire component is loaded and we can add our code within it.
And now when your livewire component is refreshed your select2 style will be still there as we are again applying it.
Other Livewire Posts:
Stay tuned to us for more interesting stuff about livewire.
How to Delete Record using ajax call with LaravelLaravel

How to Delete Record using ajax call with LaravelLaravel
We work on projects with the admin panel every day. In which we mostly use data tables and we need to delete the record from the data table without page refresh.
So, today I will show you how to extract a record using Ajax. It's very easy to integrate.
Let's take one example. I have a Category data table and I want to delete one category from the table without refreshing the page. Now, what am I doing for that? First of all, I add a class for the listen to a click event into the delete button and it says delete-btn.
See the following image for where I added a class.
I used SweetAlert for the confirmation popup. let add sweet alert's CSN into the index.blade.php.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
Let's declare routes of the delete record.
<script>let categoryUrl = '{{route('categories.index')}}'; </script>
Next steps, I'm going to listen to the click event of the delete button. one more thing does not forget to add the record id into the data attribute to the delete button. see the above image for it. I highlighted it with a yellow line.
So the general practices we use in Laravel is to write the following code to listen to a click event and delete a record,
$(document).on('click', '.delete-btn', function (event) {
const id = $(event.currentTarget).data('id');
swal({
title: 'Delete !',
text: 'Are you sure you want to delete this Category" ?',
type: 'warning',
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonColor: '#5cb85c',
cancelButtonColor: '#d33',
cancelButtonText: 'No',
confirmButtonText: 'Yes', },
function () {
$.ajax({
url: categoryUrl + '/' + id,
type: 'DELETE',
DataType: 'json',
data:{"_token": "{{ csrf_token() }}"},
success: function(response){
swal({
title: 'Deleted!',
text: 'Category has been deleted.',
type: 'success',
timer: 2000,
});
$('#categoryTbl').DataTable().ajax.reload(null, false);
},
error: function(error){
swal({
title: 'Error!',
text: error.responseJSON.message,
type: 'error',
timer: 5000,
})
}
});
});
});
Now we are done with the front-end side and need to look into it backend side.
Let's declare the destroy method into the category Controller. I hope are you generating crud with InfyOm Laravel Generator. so, the Destroy method and routes are there. If not please create a route. if the destroy method is there then need to change the response of that method.
The destroy method code looks like,
public function destroy($id) {
$category = $this->categoryRepository->find($id);
if (empty($category)) {
Flash::error('Category not found');
return $this->sendError('Category not found.');
}
$this->categoryRepository->delete($id);
return $this->sendSuccess('Category deleted successfully.');
}
Setup Laravel Livewire with Basic Component ExampleLaravel

Setup Laravel Livewire with Basic Component ExampleLaravel
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 the installation steps, and I hope you already have set up your laravel project.
Install Livewire
composer require livewire/livewire
Include the javascript and styles (On your master blade file)
...
@livewireStyles
...
@livewireScripts
Create Your Component
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
Include the component
Include the created component to your view where you want to show.
...
@livewireStyles
...
@livewireScripts
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 the mounting method (which will be called when the page is loaded 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.
Now let's change the livewire blade component.
Here we have bound all properties by using wire:model. so as we will type in input box 1 it will be directly accessed by $value1 into the component.
and the property $sum will be changed as we change the input box values.
So that's how cool livewire is. you can create different dynamic components as you need by using livewire.
Stay tuned to read more interesting posts on livewire.