Laravel's post

post
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 take one example. I have a Category data table and I want to delete one category from the table without refresh 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's 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 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 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 generate 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.');
    }
Now we are done. the video tutorial also available here

August 19, 20202 minutesauthorShailesh Ladumor
post

Recently, we have started working on one CRM System for client, where we offer a user to create an account and then can upload his excel file of Contracts and we will create contracts in the database, and then these contracts will be emailed to both the parties of the contract.

For this, the functionality we want is, we do not let users wait to do these all things, because this process may take longer based on the number of records the user has. Also, this process contains lots of computation like,

  1. Upload an Excel file
  2. Do field mappings
  3. Validate the record of contract
  4. Create a contract in the database along with all other information
  5. Create a PDF of contract (which take significant time)
  6. Email that PDF to both the parties.

Just imagine, if the user has uploaded a file with 10K records in a file it will take an hour to do this in a single process.

Here is where we used the Laravel Jobs & Queues where we can let use relax and we do our processing in backend with multiple Jobs running at the same time.

So we came up with architecture with Several Jobs in place with the following things in mind.

  1. We will have multiple Jobs to perform multiple things to have SRP (Single Responsibility Principle)
  2. When the one Job completes its duty, it will dispatch the next Job with the data that next job needs.
  3. The next job will do that same till the process ends

Another advantage we got here is, we can execute different jobs on different machines/servers based on the resources required. For e.g. We run a Job of Creating PDF on a powerful machine then sending an email.

Also, we can set different priorities for different Job Listeners. For e.g. Sending an Email Job will have a lower priority than others.

So here is the architecture that we came up with and used. I tried to architect the Jobs structure only and haven't mentioned small details of updating and creating records.

Implementing Efficient and Fast Data Import with Laravel Jobs & Queues

Hope it will help you to architect you a better Jobs and Queues architecture where you need to perform multiple things on the backend and do not let your users wait to finish those long-running processes.

Happy & Safe Queuing. :)

August 14, 20202 minutesauthorMitul Golakiya
post
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)

  ...
     @livewireStyles
  </head>
  <body>
  ...

     @livewireScripts
  </body>
  </html>

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
<div>
    ...
</div>

Include the component

Include created component to your view where you want to show.

 <head>
    ...
    @livewireStyles
 </head>
 <body>
    <livewire:summation />

    ...

    @livewireScripts
 </body>
 </html>

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.

Now let's change the livewire blade component.

  <div>
   <input type="text" class="" wire:model="value1">

    <input type="text" class="" wire:model="value2">

    <input type="text" disabled wire:model="sum">
  </div>

Here we have bind 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 of a livewire.

August 07, 20202 minutesauthorVishal Ribdiya
post

While hosting on the Laravel project on cPanel, the traditional problem that lots of developers get is, /public path is appended to the URL. Because in most cases, we put a project directly into the public_html folder, so public_html is our root for the website and that's where our laravel application is also placed.

But to run the Laravel application, we need to point our domain root to the public folder of the laravel. It is possible to do with cPanel but you need to go through some steps which are not known by most of the people and also the tedious process. So to make it simple, what you can do is, there is a way we can do it via .htaccess file in our root folder.

We can copy .htaccess file from our public folder and then make modifications to it to work with the direct root folder and route every request to the public folder.

Here is the final .htaccess file,

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization MemberHeader
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Remove public URL from the path
    RewriteCond %{REQUEST_URI} !^/public/
    RewriteRule ^(.*)$ /public/$1 [L,QSA]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

By adding the above file to the root folder we can use laravel project without the public path. Check out the following two lines:

  RewriteCond %{REQUEST_URI} !^/public/
  RewriteRule ^(.*)$ /public/$1 [L,QSA]

These two lines make magic and our application will work without public path in URL.

August 01, 20201 minuteauthorMitul Golakiya
post

Recently we use Spatie laravel-multitenancy package in our of our client's CRM project along with spatie/laravel-medialibrary.

The default behavior of the media library package is, it generates a folder for each media with its ID in our configured disk, like a public folder or s3 or whatever disk we configured.

This works really great when you are dealing with a single-tenant application. But while using multi-tenant, you got a media table in each of your tenant databases. so this pattern simply doesn't work. Because then you will end up having multiple media files under the same folder from different tenants.

So what we want to do is, instead of having a structure like,

public
-- media
---- 1
------ file.jpg
---- 2
------ file.jpg
...

What we want to achieve is, we want to have a folder structure where media of every tenant will be in a separate folder with tenant unique id,

public
-- media
---- abcd1234 // tenant1 Id
------ 1
-------- file.jpg
------ 2
-------- file.jpg
---- efgh5678 // tenant2 Id
------ 1
-------- file.jpg
------ 2
-------- file.jpg
...

Spatie Media library is very configurable out of the box where you can write your own media library path generator. That is documented very well over here: https://docs.spatie.be/laravel-medialibrary/v8/advanced-usage/using-a-custom-directory-structure

So what we did is, we wrote our own Path Generator, which can store files into tenants folder. Here is how it looks like,

<?php

namespace App\MediaLibrary;

use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Spatie\MediaLibrary\Support\PathGenerator\DefaultPathGenerator;

class InfyCRMMediaPathGenerator extends DefaultPathGenerator
{
    /*
     * Get a unique base path for the given media.
     */
    protected function getBasePath(Media $media): string
    {
        $currentTenant = app('currentTenant');

        return $currentTenant->unique_id.DIRECTORY_SEPARATOR.$media->getKey();
    }
}

What we did here is, we just simply extended the Spatie\MediaLibrary\Support\PathGenerator\DefaultPathGenerator of Media Library and override the function getBasePath. We attached the prefix of the tenant's unique_id to the path. so instead of 1/file.png, it will return abcd1234/1/file.png.

All you need to make sure is, whenever you are uploading a media, your application should be tenant aware. Otherwise, it will not able to get the current tenant.

Hope this helps while using spatie media library along with spatie multi-tenant.

Even if you are not using a spatie multi-tenant, still you can create your own PathGenerator and use it your own way to have a media structure you want.

July 30, 20202 minutesauthorMitul Golakiya
post

The Stripe Customer Portal is very useful for managing customer subscriptions like Upgrade, Downgrade, and Renew.

Customers can review their invoices directly and also check their history.

Portal billing setting

Do login into your stripe account

Navigate to the portal settings to configure the portal, and do below billing settings

setting

Create Product

First of all, we need to create products. Follow the below process for creating products.

Click on the “Products” menu from the sidebar and click on the “Add Product” button on the top right corner of the products page and create a product.

Here is an example of how to create a product.

Create two or three products as shown below.

product

Select product In portal settings

If you want to allow your customer to change their subscription by an upgrade, downgrade, cancel or renew you need to set products in your portal setting.

Now navigate to customer portal settings again, in the Products section, you will find a dropdown “Find or add a product..”, click on it you will find the plan you have added, select the price of this product.

portal settings

Don’t forget to save all these settings.

Then do the setup of your business information, also do branding settings in the “Appearance” section, and save it.

Once you are done with settings, you can preview the customer portal by clicking the Preview button beside the save button.

This will launch a preview of the portal so you can see how customers will use it for managing their subscriptions and billing details.

Integrate into Laravel

  • Get you API keys
    • Go to “Developers > API keys” here you will find your “Publishable key” and “Secret key

api keys

  • Create customer using stripe dashboard or by API
    • Create customer by Stripe API.
    • First of all, you’ll need to set your stripe secret key. For development mode, you can use test mode keys, but for production, you need to use your live mode keys
\Stripe\Stripe::setApiKey('sk_test_YOUR_KEY');

$customer = \Stripe\Customer::create([
    'name' => 'jenny rosen'
    'email' => 'jenny.rosen@example.com'
]);
  • Once you create a customer using stripe API, now you can create a billing session for that customer using stripe API.
    • Create a billing session of the customer by API
\Stripe\Stripe::setApiKey('sk_test_YOUR_KEY');
\Stripe\BillingPortal\Session::create([
   'customer' => 'cus_HnKDAQNjBniyFh',
   'return_url' => 'https://example.com/subscription',
]);

You’ll get a response, like the below object:

{
  "id": "pts_c5cfgf8gjfgf73m5748g6",
  "object": "billing_portal.session",
  "created": 453543534,
  "customer": "cus_bGFsnjJDcSiJu",
  "livemode": false,
  "return_url": "https://example.com/subscription'",
  "url":
"https://billing.stripe.com/session/{SESSION_SECRET}"
}

In the response body, there is a URL attribute:

Now redirect your customer to this URL immediately. For security purposes, this URL will expire in a few minutes.

After redirecting the customer to this URL, the portal will open and customers can manage their subscriptions and billing details in the portal. customers can return to the app by clicking the Return link on your company’s name or logo within the portal on the left side. They’ll redirect to the return_url you have provided at the time of creating the session or redirect URL set in your portal settings.

Listen to Webhooks

You must have a question, what is this Webhook!!!

It’s just an event, which will fire when a customer does any changes in his/her subscription in the portal, we can listen to this event in our app and make appropriate changes.

For example,

If a customer cancels his/her subscription in the portal, then how we will know about it!!

For it, when customers do any changes in his/her subscription

“customer.subscription.updated” event will be fired and we can listen for this event and, get to know the customer has changed subscription so we need to do appropriate changes in our app also.

Set webhook in your app

In the webhooks.php (in routes folder) file set up a route for handle webhook.

You can use the [Laravel Cashier Package (https://laravel.com/docs/8.x/billing) to handle webhooks.

To set up a webhook for your portal navigate to the “Developers > Webhooks” menu you will find the below screen, here I have added a webhook to handle subscription cancel and update events, it will fire when customers update subscription, and you will receive it.

webhook

Click on the “Add endpoint” button and the below pop up will open. In Endpoint URL set the route you have created in the webhooks.php file. Select subscription updated and deleted events.

webhook endpoint

All done.

For more details, you can use stripe customer portal integration

July 25, 20203 MinutesauthorMonika Vaghasiya
post

Recently Spatie released a brand new package for multi-tenancy called laravel-multitenancy.

It comes with great support to work out of the box with sub-domains like,

https://zluck.infychat.com

https://infyom.infychat.com

https://vasundhara.infychat.com

It identified the tenant based on the sub-domain and sets a database runtime for your tenant-specific models.

Recently, we used it in one of our client for Snow Removal CRM. Here we have two models,

  1. Freemium Model - with no sub-domain (application will work on main domain only)
  2. Premium Model - where the tenant will get its subdomain

And user can convert his account from Freemium to Premium at any point of time by just subscribing to the plan.

So what we want is, on the backend, we want to have a separate database for each tenant, but the application should run on main as well as a sub-domain.

So what we want to have is the ability to extend/customize the tenant detection mechanism. And Spatie does a very good job at there where you can customize the logic.

You can create your own TenantFinder class and configure it in the config file of the package. And there is very good documentation for that here: https://docs.spatie.be/laravel-multitenancy/v1/installation/determining-current-tenant/

To do that, what we did is, we have a field called tenant_id in our users table. All of our users are stored into the main database since we may have user access across the tenant.

And when any user does a login, we listen for the event Illuminate\Auth\Events\Login which is documented in Laravel Docs over here.

When a user does a login, our listener will be called and will create a cookie called tenant on the browser with the tenant id of the user. So our listener will look like,

<?php

namespace App\Listeners;

use App\Models\User;
use Cookie;
use Illuminate\Auth\Events\Login;

class LoginListener
{
    public function handle(Login $event)
    {
        /** @var User $authUser */
        $authUser = $event->user;

        Cookie::forget('tenant');
        Cookie::queue(Cookie::forever('tenant', encrypt($authUser->tenant_id)));
    }
}

Also, we encrypt the cookie on our end, so we do not want Laravel to encrypt it again, so we added tenant cookie into except array of EncryptCookies middleware as per documentation here. so our middleware looks like,

<?php

namespace App\Http\Middleware;

use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        'tenant'
    ];
}

Now at the last point, we extended our logic to find a tenant and get it to work on the main domain as well as sub-domain.

We have created our own custom class called InfyChatTenantFinder, which looks like,

<?php

namespace App\TenantFinder;

use App\Models\Account;
use App\Models\SubDomain;
use Illuminate\Http\Request;
use Spatie\Multitenancy\Models\Concerns\UsesTenantModel;
use Spatie\Multitenancy\Models\Tenant;
use Spatie\Multitenancy\TenantFinder\TenantFinder;

class InfyChatTenantFinder extends TenantFinder
{
    use UsesTenantModel;

    public function findForRequest(Request $request): ?Tenant
    {
        $host = $request->getHost();

        list($subDomain) = explode('.', $host, 2);

        // Get Tenant by subdomain if it's on subdomain
        if (!in_array($subDomain, ["www", "admin", "infychat"])) {
            return $this->getTenantModel()::whereDomain($host)->first();
        }

        // Get Tenant from user's account id if it's main domain
        if (in_array($subDomain, ["www", "infychat"])) {

            if ($request->hasCookie('tenant')) {
                $accountId = $request->cookie('tenant');

                $accountId = decrypt($accountId);

                $account = $this->getTenantModel()::find($accountId);

                if (!empty($account)) {
                    return $account;
                }

                \Cookie::forget('tenant');
            }
        }

        return null;
    }
}

So basically, first we check if the sub-domain is there, then find tenant from the sub-domain.

If the domain is the main domain then get the tenant id from the cookie and return the account (tenant) model.

So this is how you can customize the logic the way you want to have a custom tenant identification system.

July 24, 20203 minutesauthorMitul Golakiya
post
[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
July 11, 20201 minuteauthorVishal Ribdiya