DEV Community: Syahril Zulkefli

How to install PHP 8.3 with OCI8 on Laragon

Syahril Zulkefli — Thu, 05 Dec 2024 11:49:55 +0000

In this tutorial, we’ll walk through the steps to install and configure the OCI8 extension on Laragon with PHP 8.3. The OCI8 extension allows PHP to connect to Oracle databases, and setting it up can be a bit tricky.

1. Download Oracle Instant Client

To use the OCI8 extension, you need to download the Oracle Instant Client. Go to the Oracle Instant Client for Windows x64 downloads page and get the following:

Once the downloads are completed, extract both files and move the contents to C:\oracle\instantclient_23_6.

2. Add Environment Variable

To make the Oracle Instant Client accessible system-wide, we need to register the Instant Client path to our system.

Search for Edit the system environment variables and then click on the Environment Variables button.
In the System variables section, click on Path and edit.
Add a new value, C:\oracle\instantclient_23_6, and click OK.

You can close all the windows now.

For the changes to take effect, restart your computer.

3. Download PHP 8.3

By default, Laragon shipped with PHP 8.1 only, but we can add other PHP versions easily.

Head to PHP for Windows and get your preferred version. In this tutorial, we will download the following:

PHP 8.3 VS16 x64 Thread Safe.

Once the download is complete, extract the file on your computer. Then, move the folder php-8.3.14-Win32-vs16-x64 to C:\laragon\bin\php\php-8.3.14-Win32-vs16-x64.

4. Upgrade Apache for PHP 8.3 Compatibility

Now we need to upgrade Apache bundled with Laragon to the latest version to prevent the httpd.exe - Entry Point Not Found error.

Visit Apache Lounge and download the latest version of Apache, at the time of writing, the latest version is httpd-2.4.62-240904-win64-VS17.

Once downloaded, extract the file and move all files and folders inside this httpd-2.4.62-240904-win64-VS17\Apache24 folder to the parent folder httpd-2.4.62-240904-win64-VS17.

We can safely delete the Apache24 folder.

5. Configure Laragon

Open the Laragon application to change the Apache and enable OCI8 extension. Stop all services first, just to be safe.

Apache

Select the new Apache version using the menu Apache > Version > httpd-2.4.62-240904-win64-VS17.

OCI8 extension

Enable OCI8 extension by using the menu PHP > Extensions > oci8_19.

Now we can start all services and test.

6. Test

To verify that OCI8 is installed and working, create a new blank project in Laragon by using Quickapp > Blank.

Create a new file inside this project and add the following codes:

<?php

if (function_exists('oci_connect')) {
    echo "OCI is installed";
} else {
    echo "OCI is not installed";
}

Run the project in your web browser and you should see OCI is installed.

Congratulations! You’ve successfully installed and configured the OCI8 extension on Laragon with PHP 8.3. You can now connect your PHP applications to Oracle databases.

If you encounter any issues, double-check the steps above or consult the official documentation for further assistance.

Happy coding! 🚀

How to Fix MySQL Not Running on macOS Sequoia 15.0

Syahril Zulkefli — Fri, 01 Nov 2024 00:10:04 +0000

If you've recently upgraded to macOS Sequoia 15.0 and are experiencing issues with MySQL not running, you're not alone. This guide will walk you through the steps to resolve this issue, especially if you're upgrading to MySQL version 9 or above.

You might encounter error messages like this:

ERROR 2002 (HY000): Can't connect to local server through socket '/tmp/mysql.sock' (2)

The root cause lies in the significant architectural changes introduced in MySQL 9.0. Upgrading directly from older MySQL versions (pre-8.4) to 9.0 or later often bypasses crucial compatibility steps, leading to startup failures.

Here's the solution, broken down into actionable steps:

Stop MySQL 9.x

Stop the existing MySQL service: If you have a currently running MySQL service (even if it's malfunctioning), stop it first:

brew services stop mysql

Install MySQL 8.4

We need to install MySQL 8.4 on our machine.

brew install mysql@8.4

Start and Stop MySQL 8.4

Briefly start and then stop the MySQL 8.4 service. This crucial step performs necessary database migrations and prepares the system for the final upgrade.

brew services start mysql@8.4

brew services stop mysql@8.4

Start MySQL 9.x

Now, start your desired MySQL version (9.0 or later). It should now launch correctly:

brew services start mysql

Remove MySQL 8.4

Finally, you can safely remove MySQL 8.4 from your system.

brew remove mysql@8.4

By following these steps, you can resolve the MySQL startup problem on macOS Sequoia 15.0.

Filament: Modify login or logout response

Syahril Zulkefli — Wed, 30 Oct 2024 01:31:13 +0000

If you would like to modify Filament's default login and logout response, follow these steps.

Login Response

In my application, I want to make sure the user has at least one vehicle before they can use it, so I will redirect them to the form after they log in.

The first step is to create a new file, /app/Http/Responses/LoginResponse.php and add the logic to it.

<?php

namespace App\Http\Responses;

use App\Filament\App\Resources\VehicleResource;
use Filament\Http\Responses\Auth\Contracts\LoginResponse as Responsable;
use Filament\Pages\Dashboard;
use Illuminate\Http\RedirectResponse;
use Livewire\Features\SupportRedirects\Redirector;

class LoginResponse implements Responsable
{
    /**
     * Create an HTTP response that represents the object.
     *
     * @param \Illuminate\Http\Request $request
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function toResponse($request): Redirector|RedirectResponse
    {
        if ($request->user()->vehicles()->count() <= 0) {
            return redirect()->to(VehicleResource::getUrl('create'));
        }

        return redirect()->to(Dashboard::getUrl());
    }
}

Next, we have to register the implementation in our AppServiceProvider.

use App\Http\Responses\LoginResponse;
use Filament\Http\Responses\Auth\Contracts\LoginResponse as LoginResponseContract;

/**
 * Register any application services.
 */
public function register(): void
{
    $this->app->bind(
        LoginResponseContract::class,
        LoginResponse::class
    );
}

Login Response

Since I have multiple panels in my application, I want to redirect the user to a specific login form when logged out.

For the logout, create a new file, /app/Http/Responses/LogoutResponse.php and add some logic to it.

<?php

namespace App\Http\Responses;

use Filament\Http\Responses\Auth\Contracts\LogoutResponse as Responsable;
use Illuminate\Http\RedirectResponse;

class LogoutResponse implements Responsable
{
    public function toResponse($request): RedirectResponse
    {
        // change this to your desired route
        return redirect()->route('filament.account.auth.login');
    }
}

Don't forget to register the implementation in your AppServiceProvider.

use App\Http\Responses\LogoutResponse;
use Filament\Http\Responses\Auth\Contracts\LogoutResponse as LogoutResponseContract;

/**
 * Register any application services.
 */
public function register(): void
{
    ...
    ...

    $this->app->bind(
        LogoutResponseContract::class,
        LogoutResponse::class
    );
}

That should do the trick.

Filament: Add icon to form buttons

Syahril Zulkefli — Fri, 25 Oct 2024 02:13:37 +0000

In the development of admin panels using Filament PHP, enhancing form button aesthetics can significantly improve the user experience. This tutorial provides guidance on modifying button icons and labels for both Create and Edit forms.

Create Form

To customise the Create form buttons, access the CreateUser.php file located within your UserResource/Pages directory. There, you can override the relevant functions to make your desired adjustments. By implementing these changes, you can tailor the buttons to better fit the design and functionality needs of your application.

<?php

namespace App\Filament\Resources\UserResource\Pages;

use App\Filament\Resources\UserResource;
use Filament\Resources\Pages\CreateRecord;
use Filament\Support\Enums\IconPosition;

class CreateUser extends CreateRecord
{
    protected static string $resource = UserResource::class;

    // Customise the "Create" button
    protected function getCreateFormAction(): Action
    {
        return parent::getCreateFormAction()
            ->label('Add New User')
            ->icon('heroicon-o-user-plus')
            ->iconPosition(IconPosition::Before);
    }

    // Customise the "Create & Create Another" button
    protected function getCreateAnotherFormAction(): Action
    {
        return parent::getCreateAnotherFormAction()
            ->label('Save & Create Another')
            ->icon('heroicon-o-plus-circle')
            ->iconPosition(IconPosition::Before);
    }

    // Customise the "Cancel" button
    protected function getCancelFormAction(): Action
    {
        return parent::getCancelFormAction()
            ->label('Go Back')
            ->icon('heroicon-o-arrow-left')
            ->color('gray');
    }
}

Edit Form

For the Edit form buttons, you'll need to modify the EditUser.php file in your UserResource/Pages directory:

<?php

namespace App\Filament\Resources\UserResource\Pages;

use App\Filament\Resources\UserResource;
use Filament\Resources\Pages\EditRecord;
use Filament\Support\Enums\IconPosition;

class EditUser extends EditRecord
{
    protected static string $resource = UserResource::class;

    // Customize the "Save" button
    protected function getSaveFormAction(): Action
    {
        return parent::getSaveFormAction()
            ->label('Update User')
            ->icon('heroicon-o-check-circle')
            ->iconPosition(IconPosition::Before)
            ->color('success');
    }

    // Customize the "Cancel" button
    protected function getCancelFormAction(): Action
    {
        return parent::getCancelFormAction()
            ->label('Go Back')
            ->icon('heroicon-o-arrow-left')
            ->color('gray');
    }
}

Customising form buttons in Filament PHP is straightforward and can greatly improve your admin panel's usability. By overriding these methods, you can create a more intuitive and visually appealing interface for your users.

Remember to import the necessary classes and ensure your namespace matches your application's structure. The changes will take effect immediately after saving the files.

Filament Breezy: add new field to Personal Info component

Syahril Zulkefli — Sun, 20 Oct 2024 05:09:25 +0000

How about adding a phone number, for instance, to the Breezy plugin's Personal Info section?

Step 1: Create a new migration

In order to include our new field, we must first create a migration file.

php artisan make:migration add_column_telephone_to_users_table --table=users

Make adjustments similar to the code below:

/**
 * Run the migrations.
 */
public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('telephone')->nullable()->after('password');
    });
}

/**
 * Reverse the migrations.
 */
public function down(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('telephone');
    });
}

Remember to execute the migration command in order to apply the modifications to our table.

php artisan migrate

Step 2: Create a new Livewire component

Create a new Livewire component by using the command below. The Breezy Personal Info component will be overridden by this component.

php artisan make:livewire MyPersonalInfo

Change the class to make sure it extends the Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo component instead.

use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;

class MyPersonalInfo extends PersonalInfo
{
    ...
    ...
}

Next, we must specify the array of fields that will be utilised. If the fields are not declared, the database will not store our phone number.

public array $only = [
    'name', 'email', 'telephone',
];

To render the telephone field, we must then write a new function.

protected function getTelephoneComponent(): Forms\Components\TextInput
{
    return Forms\Components\TextInput::make('telephone')
        ->tel()
        ->label(__('filament-breezy::default.fields.telephone'));
}

Finally, to add our new field, override the getProfileFormSchema().

protected function getProfileFormSchema(): array
{
    $groupFields = Forms\Components\Group::make([
        $this->getNameComponent(),
        $this->getEmailComponent(),
        $this->getTelephoneComponent(),
    ])->columnSpan(2);

    return ($this->hasAvatars)
        ? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
        : [$groupFields];
}

This is our MyPersonalInfo component's complete code.

<?php

namespace App\Livewire;

use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;
use Filament\Forms;

class MyPersonalInfo extends PersonalInfo
{
    public array $only = [
        'name', 'email', 'telephone',
    ];

    protected function getTelephoneComponent(): Forms\Components\TextInput
    {
        return Forms\Components\TextInput::make('telephone')
            ->tel()
            ->label(__('filament-breezy::default.fields.telephone'));
    }

    protected function getProfileFormSchema(): array
    {
        $groupFields = Forms\Components\Group::make([
            $this->getNameComponent(),
            $this->getEmailComponent(),
            $this->getTelephoneComponent(),
        ])->columnSpan(2);

        return ($this->hasAvatars)
            ? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
            : [$groupFields];
    }
}

Step 3: Add new translation

To add our telephone field to the newly created field, we must publish Breezy translation files.

php artisan vendor:publish --tag=filament-breezy-translations

Add telephone to the fields array in /lang/vendor/filament-breezy/en/default.php.

'fields' => [
    ...
    'email' => 'Email',
    'telephone' => 'Telephone',
    'login' => 'Login',
    ...

As you see fit, you can include translation into another language.

Step 4: Set the new Profile Info component

Last but not least, we must configure our new Personal Info component in our panel service provider, which for me is /app/Providers/Filament/AdminServiceProvider.

->plugins([
    BreezyCore::make()
        ->myProfileComponents([
            'personal_info' => MyPersonalInfo::class,
        ])
]);

It should do the trick. A telephone field has been added to our Personal Info section.

You can add other fields as well by modifying the codes above.

Filament Breezy: set storage disk for avatar

Syahril Zulkefli — Fri, 11 Oct 2024 01:56:29 +0000

If you're utilizing the Breezy plugin, all user avatars are uploaded to the /storage/app/public directory. If you prefer to keep your avatars organized in a sub-folder, just follow these steps.

Step 1: Create a new storage disk

Begin by adding a new storage disk configuration in your /config/filesystems.php.

    'disks' => [

        ...
        ...

        'avatars' => [
            'driver' => 'local',
            'root' => storage_path('app/public/avatars'),
            'url' => env('APP_URL').'/storage/avatars',
            'visibility' => 'public',
            'throw' => false,
        ],
    ],

Step 2: Extend the BreezyCore class

To set the storage disk, we need to override a method. Create a new class that extends \Jeffgreco13\FilamentBreezy\BreezyCore and place it somewhere in your /app directory. In my case, I placed it in the /app/Filament/Plugins folder.

<?php

namespace App\Filament\Plugins;

use Filament\Forms;

class BreezyCore extends \Jeffgreco13\FilamentBreezy\BreezyCore
{
    public function getAvatarUploadComponent()
    {
        $fileUpload = Forms\Components\FileUpload::make('avatar_url')
            ->disk('avatars')
            ->label(__('filament-breezy::default.fields.avatar'))
            ->avatar();

        return is_null($this->avatarUploadComponent) ? $fileUpload : $this->evaluate($this->avatarUploadComponent, namedInjections: [
            'fileUpload' => $fileUpload,
        ]);
    }
}

Step 3: Set storage disk in your User model

Update the getFilamentAvatarUrl() function found in your /app/Models/User file and configure the storage disk accordingly.

public function getFilamentAvatarUrl(): ?string
{
    return $this->avatar_url ? Storage::disk('avatars')
        ->url($this->avatar_url) : null;
}

Step 4: Register the plugin in your Filament service provider.

Update the plugin class that you previously registered in your Filament service provider to use the new class.

->plugins([
    \App\Filament\Plugins\BreezyCore::make()
]);

Now your avatars should be more organized than before.