DEV Community: Judicaël

Essential plugin to have on your wordpress website

Judicaël — Fri, 03 Feb 2023 13:41:44 +0000

You have just installed a wordpress site and you are wondering what are the essential plugins to have on your site?

Today I share with you the plugins that I think are essential to have on your wordpress site.

But what is a plugin?

A plugin or extension (word used on the wordpress dashboard) aims to add features to your website and all without having to touch any line of code, pretty good, right?

To add a plugin, you must go to the extension page via the dashboard of your website and click on the "add" button to search and add a plugin.

Well, now I know what a plugin is but how I choose it correctly?

You must pay attention to the rating and the number of people who voted for the plugin, the number of active installations, the comments of the users and the date of the last update.
By crossing all this information, the plugin is more likely to be of good quality. For example, if the plugin is not regularly updated it can cause conflicts with your version of wordpress.

The first essential plugin I recommend is Updraft plus. It is an automatic backup plugin for your website to avoid any data loss. It allows you to back up files and database on a regular basis. You can choose where you want to store the backups (google drive, dropbox, FTP, one drive), schedule the backups and choose the number of backups to do.

The plugin exists in free or paid version. For example, the paid version allows you to manage your backups on a multi-site. The free version allows you to meet the main need to regular backup your site.

The second plugin is WP Super Cache. It is a plugin managed by the creator of wordpress that allows returning your wordpress site faster for users. Indeed, this one will cache, store some files on the hard drive or in RAM depending on the configuration, so that when users visit the same page, it can display faster.

There is a second very famous plugin which is WP rocket made by a French company (cocorico) but which is paying (47€/year for 1 site).

In the next post, I will talk about another essential plugin for your website.

How to use Socialite package with Laravel

Judicaël — Tue, 16 Aug 2022 07:19:02 +0000

Today many sites use OAuth2 authentication, so that users can authenticate with their Google, Facebook, Microsoft, etc. accounts.

OAuth 2.0 is an authorization framework that will allow a third-party application to access a web service. As web and mobile applications have become more and more democratic, different applications are likely to interact with each other. For example, a website A could use the data of a known social network to register a user.

Thus, the user allows giving access to his personal information already available on the social network to the website A.

Here is a brief summary of OAuth2, I will talk about it in more details in another article.

Now that you know a bit more about OAuth2, I'll show you how to integrate it in your Laravel applications. To integrate it in your applications, there is nothing complicated, you just have to use the Socialite package which is indicated in the document of Laravel.

Here are the steps to follow to use OAuth2 on a Laravel application:

Package installation and configuration :

1. Installation :

In first execute this command to install the provider, for exemple Github:

composer require socialiteproviders/github

2. Service provider :

In config/app.php add \SocialiteProviders\Manager\ServiceProvider::class to your providers[] array, and remove Laravel\Socialite\SocialiteServiceProvider from your providers[] if you have added it already.

For example :

'providers' => [
    // a whole bunch of providers
    // remove 'Laravel\Socialite\SocialiteServiceProvider',
    \SocialiteProviders\Manager\ServiceProvider::class, // add
];

3. Event listener

Add SocialiteProviders\Manager\SocialiteWasCalled event to your listen[] array in app/Providers/EventServiceProvider.
Add your listeners (i.e. the ones from the providers) to the SocialiteProviders\Manager\SocialiteWasCalled[] that you just created.
Add the listener for your provider to the array. In our example, this is \SocialiteProviders\GitHub\GitHubExtendSocialite::class.'@handle',.

protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        // ... other providers
        \SocialiteProviders\GitHub\GitHubExtendSocialite::class.'@handle',
    ],
];

4. Configuration

Before using Socialite, you will need to add credentials for the OAuth providers your application utilizes. These credentials may be retrieved by creating a “developer application” within the dashboard of the service you will be authenticating with

Then add credentials in the config/services.php file.

'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => 'http://example.com/callback-url',
],

5. Usage on your application

You should now be able to use it (assuming you have the facade installer) :

return Socialite::driver('github')->redirect();

In laravel documentation, to authenticate users with an OAuth provider, you will need two routes : one for redirecting the user to the OAuth provider, and another for receving the callback from the provider after authentication :

use Laravel\Socialite\Facades\Socialite;

Route::get('/auth/redirect', function () {
    return Socialite::driver('github')->redirect();
});

Route::get('/auth/callback', function () {
    $user = Socialite::driver('github')->user();

    // $user->token
});

6. Authentication and storage

When the user has been retrieved from the OAuth provider, you can determine if the user exits in your application’s database and authenticate the use. If he does not exist in the database, you will create a new record to represent the user :

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

Route::get('/auth/callback', function () {
    $githubUser = Socialite::driver('github')->user();

    $user = User::updateOrCreate([
        'github_id' => $githubUser->id,
    ], [
        'name' => $githubUser->name,
        'email' => $githubUser->email,
        'github_token' => $githubUser->token,
        'github_refresh_token' => $githubUser->refreshToken,
    ]);

    Auth::login($user);

    return redirect('/dashboard');
});

Now you have add the OAuth2 authentication to your application. Don't hesitate to have a look at the Laravel doc and the package doc to see all the possibilities

Using Larapex Chart on your Laravel application

Judicaël — Fri, 22 Jul 2022 16:01:16 +0000

What is Larapex Chart ?

Larapex chart is a library to add beautiful charts for blade. It’s a laravel wrapper of Apex chart library. Larapex chart allow you to generate chart writting with php.

How to use it ?

To use it add Larapex chart with composer to your project

composer require arielmejiadev/larapex-charts

Then publish config file with this command

php artisan vendor:publish --tag=larapex-charts-config

with this, the setup is done ! And you can start to use Larapex Chart ! 🙂

Chart example

To create chart use this command :

php artisan make:chart MonthlyUsersChart

Then select a chart type :

- [x] Pie Chart
- [ ] Donut Chart
- [ ] Radial Bar Chart
- [ ] Polar Area Chart
- [ ] Line Chart
- [ ] Area Chart
- [ ] Bar Chart
- [ ] Horizontal Bar Chart
- [ ] HeatMap Chart
- [ ] Radar Chart

Now you have a new file with the chart in app/Charts/MonthlyUsersChart.php

<?php

namespace App\Charts;

use ArielMejiaDev\LarapexCharts\LarapexChart;

class MonthlyUsersChart
{
    protected $chart;

    public function __construct(LarapexChart $chart)
    {
        $this->chart = $chart;
    } 

    public function build()
    {
        return $this->chart->pieChart()
            ->setTitle('Top 3 scorers of the team.')
            ->setSubtitle('Season 2021.')
            ->addData([40, 50, 30])
            ->setLabels(['Player 7', 'Player 10', 'Player 9']);
    }
}

now in your controller you inject the chart object :

public function index(MonthlyUsersChart $chart)
{
    return view('users.index', ['chart' => $chart->build()]);
}

And to finish add $chart->container(), $chart->cdn() and $chart->script() methods in the view to render a chart

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chart Sample</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen bg-gray-100">

<div class="container px-4 mx-auto">

    <div class="p-6 m-20 bg-white rounded shadow">
        {!! $chart->container() !!}
    </div>

</div>

<script src="{{ $chart->cdn() }}"></script>

{{ $chart->script() }}
</body>
</html>

You can retrieve other charts in the documentation :

Larapex Charts

Laravel socialite : configure microsoft Azure

Judicaël — Tue, 05 Jul 2022 16:07:05 +0000

You have a Laravel application and you want to connect your users with azure. In this article I will explain to you how to do it. For this tutorial I use Laravel Socialite package.

Package installation and configuration :

1. Installation :

In first execute this command to install the provider:



composer require socialiteproviders/microsoft-azure

2. Service provider :

For example :



'providers' => [
    // a whole bunch of providers
    // remove 'Laravel\Socialite\SocialiteServiceProvider',
    \SocialiteProviders\Manager\ServiceProvider::class, // add
];

3. Event listener

Add SocialiteProviders\Manager\SocialiteWasCalled event to your listen[] array in app/Providers/EventServiceProvider.
Add your listeners (i.e. the ones from the providers) to the SocialiteProviders\Manager\SocialiteWasCalled[] that you just created.
Add the listener for your provider to the array. In our example, this is \SocialiteProviders\Azure\AzureExtendSocialite::class.'@handle',.



protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        \SocialiteProviders\Azure\AzureExtendSocialite::class.'@handle',
    ],
];

4. Add configuration to config/services.php



'azure' => [    
  'client_id' => env('AZURE_CLIENT_ID'),
  'client_secret' => env('AZURE_CLIENT_SECRET'),
  'redirect' => env('AZURE_REDIRECT_URI'),
  'tenant' => env('AZURE_TENANT_ID'),
  'proxy' => env('PROXY')  // optionally
],

5. Usage on your application

You should now be able to use it (assuming you have the facade installer) :



return Socialite::driver('azure')->redirect();

To logout of you app and Azure :



public function logout(Request $request) 
{
     Auth::guard()->logout();
     $request->session()->flush();
     $azureLogoutUrl = Socialite::driver('azure')->getLogoutUrl(route('login'));
     return redirect($azureLogoutUrl);
}



use Laravel\Socialite\Facades\Socialite;

Route::get('/auth/redirect', function () {
    return Socialite::driver('azure')->redirect();
});

Route::get('/auth/callback', function () {
    $user = Socialite::driver('azure')->user();

    // $user->token
});

Azure configuration

1. Create the app

On the portal azure click on “App registrations”

Then click on “New registration”

Choose a name for your application
Choose the supported account types
On Redirect URI choose “web” and fill the uri with the callback route of your laravel application :



//for example
http://localhost:8000/auth/callback

Click on Register

Configuration of the app in Laravel :

In your .env file add :



AZURE_CLIENT_ID=
AZURE_CLIENT_SECRET=
AZURE_REDIRECT_URI=
AZURE_TENANT_ID=
PROXY=

AZURE_CLIENT_ID is “Application (client) id” on your azure application

AZURE_REDIRECT_URI is the callback route URI

AZURE_TENANT_ID is the “Directorty (tenant) ID on your azure application

For The AZURE_CLIENT_SECRET :

click on Add a certificate or secret
click on New client secret
choose a description
click on adding button
copie the Value key

And now your users can connect with their Microsoft account to your application !