Forem: Tresor

I built a fluent Numberable API for Laravel (v1.0.0)

Tresor — Tue, 24 Feb 2026 09:20:43 +0000

Laravel has Stringable for strings, but numeric logic in apps often still looks messy.

I just released laravel-numberable v1.0.0: a small package for fluent numeric operations and formatting in Laravel.

Why

Numbers in apps usually need more than + and -:

parsing user input
currency / percentage formatting
rounding
comparisons
business rule helpers

I wanted something chainable and expressive.

Install

composer require tresor-kasenda/laravel-numberable

Example

$price = number(1999.99)
    ->withLocale('en_US')
    ->withCurrency('USD');

$price->asCurrency();

Fluent math

$total = number(120)
    ->add(30)
    ->multiply(1.2)
    ->round(2);

Utilities

number(15)->clamp(0, 10);   // 10
number(10.0)->trim();       // 10
number(17)->isPrime();      // true
number(12)->isEven();       // true
number(10)->between(5, 15); // true

Formatting

number(0.157)->asPercentage();
number(1532000)->asAbbreviated();
number(1048576)->asFileSize();
number(21)->asOrdinal();

Also supports

localized parsing (from('1 234,50', 'fr_FR'))
when() / unless() pipelines
macros and custom formats

Compatibility

Laravel 10 / 11 / 12
PHP 8.3 / 8.4

Understanding Laravel Observers: A Complete Guide to Automated Model Event Handling

Tresor — Mon, 02 Jun 2025 08:12:17 +0000

Laravel Observers provide an elegant way to listen to Eloquent model events and execute code automatically when specific actions occur on your models. Think of observers as specialized event listeners that watch your models and react to changes like creation, updates, or deletions. This pattern helps you keep your models clean while centralizing related business logic in dedicated classes.

What Are Laravel Observers and Why Should You Use Them?

Imagine you have an e-commerce application where every time a user places an order, you need to send a confirmation email, update inventory levels, and log the transaction. Without observers, you might scatter this logic across your controllers, making your code harder to maintain and test. Observers solve this problem by providing a centralized location for model-related side effects.

Observers are particularly powerful because they automatically trigger based on Eloquent model events. Laravel fires these events during the model lifecycle: creating, created, updating, updated, saving, saved, deleting, deleted, restoring, and restored. Each event represents a different moment in your model's journey through the application.

Creating Your First Observer

Let's start with a practical example. Suppose you're building a blog application where you want to automatically generate slugs for posts and send notifications when articles are published. Here's how you would create an observer for your Post model:

<?php

namespace App\Observers;

use App\Models\Post;
use App\Notifications\PostPublishedNotification;
use Illuminate\Support\Str;

class PostObserver
{
    public function creating(Post $post): void
    {
        if (empty($post->slug)) {
            $post->slug = Str::slug($post->title);

            // Ensure slug uniqueness
            $originalSlug = $post->slug;
            $counter = 1;

            while (Post::where('slug', $post->slug)->exists()) {
                $post->slug = $originalSlug . '-' . $counter;
                $counter++;
            }
        }
    }

    /**
     * Handle the Post "created" event.
     * This runs after the model has been successfully saved
     */
    public function created(Post $post): void
    {
        // Log the creation for analytics
        logger('New post created', [
            'post_id' => $post->id,
            'title' => $post->title,
            'author_id' => $post->user_id
        ]);
    }

    /**
     * Handle the Post "updated" event.
     */
    public function updated(Post $post): void
    {
        // Check if the post was just published
        if ($post->wasChanged('published_at') && $post->published_at !== null) {
            // Send notification to subscribers
            $post->author->notify(new PostPublishedNotification($post));

            // Update search index or cache
            $this->updateSearchIndex($post);
        }
    }

    /**
     * Handle the Post "deleting" event.
     * This runs before the model is deleted
     */
    public function deleting(Post $post): void
    {
        // Clean up related data before deletion
        $post->comments()->delete();
        $post->tags()->detach();

        // Remove from search index
        $this->removeFromSearchIndex($post);
    }

    /**
     * Handle the Post "deleted" event.
     */
    public function deleted(Post $post): void
    {
        // Log the deletion for audit purposes
        logger('Post deleted', [
            'post_id' => $post->id,
            'title' => $post->title,
            'deleted_by' => auth()->id()
        ]);
    }

    /**
     * Helper method to update search index
     */
    private function updateSearchIndex(Post $post): void
    {
        // Implementation would depend on your search solution
        // This could be Elasticsearch, Algolia, etc.
    }

    /**
     * Helper method to remove from search index
     */
    private function removeFromSearchIndex(Post $post): void
    {
        // Remove from search index implementation
    }
}

To generate this observer using Artisan, you would run:

php artisan make:observer PostObserver --model=Post

This command creates the observer class with method stubs for all the common Eloquent events.

Registering Observers

Once you've created your observer, you need to register it with Laravel. The most common approach is to register observers in your AppServiceProvider or create a dedicated service provider. Here's how to do it in your AppServiceProvider:

<?php

namespace App\Providers;

use App\Models\Post;
use App\Models\User;
use App\Models\Order;
use App\Observers\PostObserver;
use App\Observers\UserObserver;
use App\Observers\OrderObserver;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Register model observers
        Post::observe(PostObserver::class);
        User::observe(UserObserver::class);
        Order::observe(OrderObserver::class);
    }
}

For larger applications, you might want to create a dedicated ObserverServiceProvider:

<?php

namespace App\Providers;

use App\Models\Post;
use App\Models\User;
use App\Models\Order;
use App\Observers\PostObserver;
use App\Observers\UserObserver;
use App\Observers\OrderObserver;
use Illuminate\Support\ServiceProvider;

class ObserverServiceProvider extends ServiceProvider
{
    /**
     * The model observers for your application.
     *
     * @var array
     */
    protected $observers = [
        Post::class => PostObserver::class,
        User::class => UserObserver::class,
        Order::class => OrderObserver::class,
    ];

    /**
     * Register the observers.
     */
    public function boot(): void
    {
        foreach ($this->observers as $model => $observer) {
            $model::observe($observer);
        }
    }
}

Don't forget to register this service provider in your config/app.php file:

'providers' => [
    // Other providers...
    App\Providers\ObserverServiceProvider::class,
],

Real-World Example: E-commerce Order Processing

Let's explore a more complex example that demonstrates the power of observers in an e-commerce context. This OrderObserver handles the entire lifecycle of an order:

<?php

namespace App\Observers;

use App\Models\Order;
use App\Services\InventoryService;
use App\Services\EmailService;
use App\Services\PaymentService;
use App\Notifications\OrderConfirmationNotification;
use App\Notifications\OrderShippedNotification;
use App\Jobs\ProcessRefund;

class OrderObserver
{
    protected $inventoryService;
    protected $emailService;
    protected $paymentService;

    public function __construct(
        InventoryService $inventoryService,
        EmailService $emailService,
        PaymentService $paymentService
    ) {
        $this->inventoryService = $inventoryService;
        $this->emailService = $emailService;
        $this->paymentService = $paymentService;
    }

    /**
     * Handle the Order "created" event.
     * This fires after a new order is successfully created
     */
    public function created(Order $order): void
    {
        // Reserve inventory for the order items
        foreach ($order->items as $item) {
            $this->inventoryService->reserve($item->product_id, $item->quantity);
        }

        // Send order confirmation email
        $order->customer->notify(new OrderConfirmationNotification($order));

        // Create audit log
        activity()
            ->performedOn($order)
            ->log('Order created with total: ' . $order->total_amount);
    }

    /**
     * Handle the Order "updated" event.
     * This allows us to react to status changes
     */
    public function updated(Order $order): void
    {
        // Check if order status changed to 'shipped'
        if ($order->wasChanged('status') && $order->status === 'shipped') {
            $this->handleOrderShipped($order);
        }

        // Check if order was cancelled
        if ($order->wasChanged('status') && $order->status === 'cancelled') {
            $this->handleOrderCancelled($order);
        }

        // Check if payment status changed to 'failed'
        if ($order->wasChanged('payment_status') && $order->payment_status === 'failed') {
            $this->handlePaymentFailed($order);
        }
    }

    /**
     * Handle the Order "deleting" event.
     * Clean up before order deletion
     */
    public function deleting(Order $order): void
    {
        // Release reserved inventory
        foreach ($order->items as $item) {
            $this->inventoryService->release($item->product_id, $item->quantity);
        }

        // Process refund if payment was successful
        if ($order->payment_status === 'completed') {
            ProcessRefund::dispatch($order);
        }
    }

    /**
     * Handle order shipped logic
     */
    private function handleOrderShipped(Order $order): void
    {
        // Send shipping notification
        $order->customer->notify(new OrderShippedNotification($order));

        // Update inventory (convert reservation to actual sale)
        foreach ($order->items as $item) {
            $this->inventoryService->confirmSale($item->product_id, $item->quantity);
        }

        // Log shipping event
        activity()
            ->performedOn($order)
            ->log('Order shipped with tracking number: ' . $order->tracking_number);
    }

    /**
     * Handle order cancellation logic
     */
    private function handleOrderCancelled(Order $order): void
    {
        // Release inventory reservations
        foreach ($order->items as $item) {
            $this->inventoryService->release($item->product_id, $item->quantity);
        }

        // Process refund if needed
        if (in_array($order->payment_status, ['completed', 'processing'])) {
            ProcessRefund::dispatch($order);
        }

        // Send cancellation email
        $this->emailService->sendOrderCancellationEmail($order);
    }

    /**
     * Handle payment failure
     */
    private function handlePaymentFailed(Order $order): void
    {
        // Release inventory since payment failed
        foreach ($order->items as $item) {
            $this->inventoryService->release($item->product_id, $item->quantity);
        }

        // Update order status
        $order->update(['status' => 'payment_failed']);

        // Notify customer
        $this->emailService->sendPaymentFailedEmail($order);
    }
}

Advanced Observer Techniques

Conditional Observer Logic

Sometimes you want observer methods to run only under certain conditions. Here's how you can implement conditional logic:

<?php

namespace App\Observers;

use App\Models\User;
use App\Services\CacheService;
use App\Jobs\SendWelcomeEmail;

class UserObserver
{
    /**
     * Handle the User "created" event.
     */
    public function created(User $user): void
    {
        // Only send welcome email for verified users
        if ($user->email_verified_at !== null) {
            SendWelcomeEmail::dispatch($user);
        }

        // Update user statistics cache
        CacheService::increment('total_users');
    }

    /**
     * Handle the User "updated" event.
     */
    public function updated(User $user): void
    {
        // Clear user cache when profile is updated
        if ($user->wasChanged(['name', 'email', 'avatar'])) {
            cache()->forget("user.{$user->id}");
        }

        // Handle email verification
        if ($user->wasChanged('email_verified_at') && $user->email_verified_at !== null) {
            $this->handleEmailVerified($user);
        }

        // Handle subscription changes
        if ($user->wasChanged('subscription_tier')) {
            $this->handleSubscriptionChange($user);
        }
    }

    /**
     * Handle email verification completion
     */
    private function handleEmailVerified(User $user): void
    {
        // Send welcome email now that email is verified
        SendWelcomeEmail::dispatch($user);

        // Unlock premium features trial
        $user->update([
            'trial_ends_at' => now()->addDays(14)
        ]);

        // Log verification for analytics
        activity()
            ->performedOn($user)
            ->log('Email verified');
    }

    /**
     * Handle subscription tier changes
     */
    private function handleSubscriptionChange(User $user): void
    {
        $oldTier = $user->getOriginal('subscription_tier');
        $newTier = $user->subscription_tier;

        // Log the change
        activity()
            ->performedOn($user)
            ->log("Subscription changed from {$oldTier} to {$newTier}");

        // Update user permissions based on new tier
        $user->syncPermissions($this->getPermissionsForTier($newTier));

        // Clear cached user data
        cache()->tags(['user', $user->id])->flush();
    }

    /**
     * Get permissions for subscription tier
     */
    private function getPermissionsForTier(string $tier): array
    {
        return match ($tier) {
            'basic' => ['read_posts', 'create_comments'],
            'premium' => ['read_posts', 'create_comments', 'create_posts'],
            'enterprise' => ['read_posts', 'create_comments', 'create_posts', 'manage_users'],
            default => ['read_posts'],
        };
    }
}

Working with Observer Dependencies

Observers can use dependency injection just like controllers and other Laravel classes. This makes them highly testable and flexible:

<?php

namespace App\Observers;

use App\Models\Product;
use App\Services\SearchService;
use App\Services\CacheService;
use App\Services\ImageOptimizationService;
use Illuminate\Contracts\Queue\ShouldQueue;

class ProductObserver implements ShouldQueue
{
    protected $searchService;
    protected $cacheService;
    protected $imageService;

    public function __construct(
        SearchService $searchService,
        CacheService $cacheService,
        ImageOptimizationService $imageService
    ) {
        $this->searchService = $searchService;
        $this->cacheService = $cacheService;
        $this->imageService = $imageService;
    }

    /**
     * Handle the Product "created" event.
     */
    public function created(Product $product): void
    {
        // Add to search index
        $this->searchService->index($product);

        // Optimize product images
        if ($product->images->isNotEmpty()) {
            foreach ($product->images as $image) {
                $this->imageService->optimize($image->path);
            }
        }

        // Clear category cache
        $this->cacheService->clearCategoryCache($product->category_id);
    }

    /**
     * Handle the Product "updated" event.
     */
    public function updated(Product $product): void
    {
        // Update search index if searchable fields changed
        if ($product->wasChanged(['name', 'description', 'tags'])) {
            $this->searchService->update($product);
        }

        // Clear related caches
        if ($product->wasChanged(['price', 'stock_quantity', 'is_active'])) {
            $this->cacheService->clearProductCache($product->id);
            $this->cacheService->clearCategoryCache($product->category_id);
        }
    }

    /**
     * Handle the Product "deleted" event.
     */
    public function deleted(Product $product): void
    {
        // Remove from search index
        $this->searchService->remove($product->id);

        // Clear all related caches
        $this->cacheService->clearProductCache($product->id);
        $this->cacheService->clearCategoryCache($product->category_id);
    }
}

Best Practices and Common Pitfalls

Performance Considerations

Observers run synchronously by default, which means they can slow down your application if they perform heavy operations. For time-consuming tasks, consider queuing them:

<?php

namespace App\Observers;

use App\Models\Order;
use App\Jobs\ProcessOrderAnalytics;
use App\Jobs\UpdateRecommendations;
use Illuminate\Contracts\Queue\ShouldQueue;

class OrderObserver implements ShouldQueue
{
    /**
     * Handle the Order "created" event.
     */
    public function created(Order $order): void
    {
        // Quick operations can run immediately
        $order->update(['order_number' => $this->generateOrderNumber()]);

        // Heavy operations should be queued
        ProcessOrderAnalytics::dispatch($order);
        UpdateRecommendations::dispatch($order->customer);
    }

    private function generateOrderNumber(): string
    {
        return 'ORD-' . now()->format('Ymd') . '-' . str_pad(Order::count() + 1, 4, '0', STR_PAD_LEFT);
    }
}

Avoiding Infinite Loops

Be careful when updating models within observers, as this can trigger additional observer events and create infinite loops:

<?php

namespace App\Observers;

use App\Models\User;

class UserObserver
{
    /**
     * Handle the User "updated" event.
     */
    public function updated(User $user): void
    {
        // BAD: This could create an infinite loop
        // $user->update(['last_activity' => now()]);

        // GOOD: Use saveQuietly or update database directly
        $user->saveQuietly();

        // OR use query builder to avoid triggering events
        User::where('id', $user->id)->update(['last_activity' => now()]);
    }
}

If you need to update the model within an observer, use the saveQuietly() method or direct database queries to prevent triggering additional events.

Error Handling

Always implement proper error handling in your observers to prevent them from breaking the main application flow:

<?php

namespace App\Observers;

use App\Models\Post;
use Exception;
use Illuminate\Support\Facades\Log;

class PostObserver
{
    /**
     * Handle the Post "created" event.
     */
    public function created(Post $post): void
    {
        try {
            // Attempt to perform observer logic
            $this->updateSearchIndex($post);
            $this->sendNotifications($post);
        } catch (Exception $e) {
            // Log the error but don't break the main flow
            Log::error('Post observer failed', [
                'post_id' => $post->id,
                'error' => $e->getMessage(),
                'trace' => $e->getTraceAsString()
            ]);

            // Optionally, queue a retry job
            // RetryPostProcessing::dispatch($post)->delay(now()->addMinutes(5));
        }
    }
}

Conclusion

Laravel Observers provide a powerful and elegant way to respond to model events in your application. They help you maintain clean, organized code by centralizing model-related side effects and business logic. By understanding the different event types, implementing proper error handling, and following best practices around performance and testing, you can leverage observers to build more maintainable and robust Laravel applications.

Remember that observers are just one tool in your Laravel toolkit. Use them when you need to respond to model events consistently across your application, but don't feel obligated to use them for every piece of model-related logic. Sometimes a simple method call in your controller or service class might be more appropriate, especially for one-off operations or complex business logic that doesn't directly relate to the model lifecycle.

As you continue building Laravel applications, you'll find that observers become an invaluable pattern for keeping your code organized and your models focused on their primary responsibilities while handling the side effects of data changes in a clean, testable way.

Livewire Notification System: A Comprehensive Guide

Tresor — Mon, 02 Jun 2025 07:41:29 +0000

Introduction

In this article, we will create a notification system using Livewire. Notifications are crucial for informing users about key events in an application. By using Laravel for the backend and Livewire for dynamic and interactive front-end components, we can create an efficient and responsive solution.

What is Livewire?

Livewire is a full-stack framework for Laravel that makes creating dynamic components very simple without leaving the Laravel ecosystem. This gives your users a more dynamic and responsive experience.

Key Features of Livewire

Full-Stack Framework: Livewire allows you to build dynamic interfaces using Laravel without writing a single line of JavaScript. It seamlessly handles both the front-end and back-end.

Component-Based: Livewire uses components to encapsulate the logic and presentation of specific parts of your application, making it easier to manage and reuse code.
Reactivity: Livewire components are reactive, meaning they automatically update the UI when the underlying data changes, providing a smooth and interactive user experience.
Server-Side Rendering: Livewire performs server-side rendering, ensuring fast initial page loads and SEO-friendly content. Subsequent interactions are handled via AJAX requests.
Event Handling: Livewire supports event handling, allowing components to communicate with each other and respond to user actions in real-time.
Validation: Livewire integrates seamlessly with Laravel's validation system, making it easy to validate user input and display error messages.
Lifecycle Hooks: Livewire provides lifecycle hooks that allow you to run code at specific points in a component's lifecycle, such as when it is mounted, updated, or destroyed.
Alpine.js Integration: Livewire integrates well with Alpine.js, a minimal JavaScript framework for adding interactivity to your components.
** File Uploads**: Livewire simplifies file uploads by handling the process on the server side, reducing the complexity of managing file uploads in your application.
Testing: Livewire components can be tested using Laravel's testing tools, ensuring that your dynamic interfaces are reliable and bug-free.

Project Configuration

Step 1: Installing Laravel

Let's get started by installing Laravel using Composer. 😊

composer create-project laravel/laravel notification

Step 2: Configuring Livewire

Let's add Livewire to your Laravel project:

Installing Livewire

composer require livewire/livewire

Esure Alpine.js is not already installed

If Alpine.js is already installed in your application, remove it to prevent conflicts with Livewire, as having Alpine.js loaded twice will cause issues; for instance, if you used the Laravel Breeze "Blade with Alpine" starter kit, remove Alpine.js from resources/js/app.js.

The layout view

We'll need a layout file to load the CSS file and add some basic styling. Since Livewire and Alpine now automatically inject their scripts and styles, we don't even need to load those in the layout! We'll create the layout as an anonymous Blade component at resources/views/components/layout.blade.php.

<!DOCTYPE html>
<html lang="en">    
    <head>        
        <meta charset="UTF-8" />        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        
        <title>Create Category</title>   
    </head>    
<body>
    <div>{{ $slot }}</div>        
</body>
</html>

Step 3: Setup Database

Open your .env file and tweak the settings to set up your database. Here's a simple example using SQLite:

DB_CONNECTION=sqlite 
DB_DATABASE=database.sqlite

You can create an SQLite database by simply running:

touch /path/to/database.sqlite

For this example, we will create a category. Let's generate the Category model along with the categories migration.

php artisan make:model Category --migration

In the migration file database/migrations/xxxx_xx_xx_create_categories_table.php, let's define the columns we need:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description')->nullable();
        $table->boolean('status')->default(false);
        $table->timestamps();
    });
}

php artisan migrate

In the Category model, let's set up the table properties like this:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'description',
        'status'
    ];

    public function casts() 
    {
        return [
            'status' => 'boolean'
        ];
    }
}

Step : 4 Create Category Component

Livewire provides a fun and interactive component system that we can use. Here's how to get started:

Let's create our Livewire component CreateCategory.php in app\Livewire. At the same time, another file called create-category.blade.php will be created in resources/views/livewire/

php artisan make:livewire create-category

Now, let's open the CreateCategory.php file and check out the code.

<?php

namespace App\Livewire;

use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreateCategory extends Component
{
    public function render(): View
    {
        return view('livewire.create-category');
    }
}

And here's what the Blade file resources/views/livewire/create-category.blade.php looks like:

<div>
    {{-- Success is as dangerous as failure. --}}
</div>

Now let's add the form to resources/views/livewire/create-category.blade.php file so users can submit their categories.

<div>
    <form wire:submit.prevent="submit">
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                wire:model="name"
            >
        </div>
        <div>
            <label for="name">Description</label>
            <textarea
                name="description"
                id="description"
                wire:model="description"
            ></textarea>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

Let's add the logic to create and manage categories in a Livewire component, like CreateCategory:

<?php

namespace App\Livewire;

use App\Models\Category;
use Illuminate\Contracts\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;

class CreateCategory extends Component
{
    #[Validate(
        'required',
        'string',
        'max:255',
        'unique:categories,name',
    )]
    public string | null $name = '';

    #[Validate(
        'nullable',
        'string',
        'max:255',
    )]
    public string | null $description = '';

    public function render(): View
    {
        return view('livewire.create-category');
    }

    public function submit(): void
    {
        $this->validate();

        Category::query()
            ->create([
                'name' => $this->name,
                'description' => $this->description,
                'status' => false
            ]);

        $this->redirect(route('category'), true);
    }
}

Step 5: Dispatching Events

To dispatch an event from a Livewire component, use the dispatch() method with the event name and any extra data. The example below shows how to dispatch a success event from a CreateCategory component.

<?php

namespace App\Livewire;

use App\Models\Category;
use Illuminate\Contracts\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;
use function Livewire\Volt\title;

class CreateCategory extends Component
{
    public function submit(): void
    {
        // ...
        $this->dispatch('success', title: "New category create");
    }
}

To learn more, please refer to the Livewire documentation Livewire Dispatch Event.

Listening for Livewire Events from Global JavaScript

You can also listen for Livewire events globally using Livewire.on from any script in your application:

<script>    
document.addEventListener('livewire:init', () => {       
    Livewire.on('success', (event) => {          
     // ..   
    });    
});
</script>

The above snippet listens for the success event dispatched from any component on the page.

To display notifications in our application, we need JavaScript libraries that allow us to show notifications like Facebook, Twitter, LinkedIn, and other platforms. In our tutorial, we will use the pushjs library. For more details, refer to the PushJs documentation.

npm install push.js --save

Next, we will modify the resources/js/app.js file and add the following code. et ajoutons un nouveau fichier js portant le nom de Notification.js

import {errorNotification, notification} from "@/Notification.js";

const handleEvent = (type, handler) => Livewire.on(type, handler);

document.addEventListener('livewire:init', () => {
    handleEvent('success', notification);
    handleEvent('error', errorNotification);
});

Here is the code that you'll place in Notification.js

import Push from 'push.js'

export const notification = (event) => {
    Push.create("Success Notification",{
        body: `${event}`,
        icon: '/icon.png' ?? '',
        timeout: 5000,
        onClick: function () {window.focus();this.close(); }
    })
}

Step 5: Run Project

To run the Laravel project, we need to execute the following command:

php artisan serve
npm run dev

Conclusion

By following this guide, you've set up a complete and responsive notification system using Livewire. This system can be customized to fit your application's specific needs, giving your users a rich and interactive experience. Thanks to the integration of Livewire and Laravel, you can now manage notifications efficiently while maintaining a smooth and responsive user interface. Keep exploring Livewire's features to make your application even better and provide an awesome experience for your users.

What's New and Migration Guide: Tailwind CSS v4.0

Tresor — Sat, 25 Jan 2025 05:06:18 +0000

Tailwind CSS has just released version 4.0, marking a significant milestone in the evolution of this powerful framework. While this update introduces many improvements and simplifications, it also includes changes that might affect your existing projects. This article provides a step-by-step guide to ensure a smooth migration while exploring the key highlights of this version.

1. A Migration Tool to Simplify the Transition

To make migration easier, Tailwind CSS offers an upgrade tool that automates most of the required changes. Here's how to use it:

$ npx @tailwindcss/upgrade@next

This tool will update your dependencies, migrate your configuration files, and adapt your template files. It requires Node.js 20 or later, so ensure your environment is up to date before running it.

Tips:

Run this tool in a new Git branch to easily compare changes.
Rigorously test your project in a browser to ensure everything works as expected.

2. Major Updates and Changes

Here's an overview of the key changes introduced in Tailwind CSS v4:

a) Removal of @tailwind Directives in CSS

The old directives like @tailwind base; are replaced with a simple import statement:

@import "tailwindcss";

b) Deprecated Utility Changes

Some utility classes have been removed or renamed for better consistency. Here are a few examples:

Old Utility	Replacement
`bg-opacity-*`	`bg-black/50`
`flex-shrink-*`	`shrink-*`
`overflow-ellipsis`	`text-ellipsis`

c) Class Renaming for Sizes

To improve clarity, size classes like shadow-sm are now shadow-xs:

<input class="shadow-xs" />

d) Updates to Ring, Shadow, and Blur Scales

The default ring class now changes from 3px to 1px, aligning with borders and outlines.

<input class="ring-3 ring-blue-500" />

e) New API for Custom Utilities

The @utility API replaces the older @layer utilities, providing a clearer and more structured way to define custom utilities. Here are additional examples illustrating this transition:

@utility margin-auto {
  margin: auto;
}

@utility flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

These new declarations enable more explicit management of utility classes in your projects.

@utility tab-4 {
  tab-size: 4;
}

3. Improvements for Build Tools

a) Vite

A dedicated plugin for Vite is now available for an enhanced developer experience:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

b) Standalone CLI

The Tailwind CLI has been moved to a dedicated package:

npx @tailwindcss/cli -i input.css -o output.css

4. Minor Changes in Base Styles

Default Border Color: Now aligned to currentColor.
Placeholder Color: Now at 50% opacity of the current text.

To retain v3 behavior:

@layer base {
  input::placeholder {
    color: theme(--color-gray-400);
  }
}

5. Recommendations for a Successful Migration

Use the migration tool: Most projects can be migrated automatically.
Test your project: Adopt an iterative approach to detect potential issues.
Consult the documentation: Check for details on changes not handled by the tool.

Conclusion

Tailwind CSS v4.0 brings simplifications and improvements that further enhance the framework's efficiency and flexibility. While some adjustments are necessary, the migration tool saves valuable time.

I'm glad you found the article helpful! If you have any questions about migrating to Tailwind CSS v4 or need further assistance, feel free to ask. Your feedback and experiences are valuable, so don't hesitate to share them. And if you enjoyed the article, sharing it with your network would be greatly appreciated!

Embracing the Future of Web Development with Laravel, PestPHP, Livewire and Vue.js

Tresor — Thu, 13 Jun 2024 11:19:09 +0000

Today I want to share a candid reflection on my journey with some of the most transformative tools in the web development world: Laravel, PestPHP, Livewire and Vue.js.

Laravel

From the moment I started using Laravel, I knew it was more than just a framework; it was a real game changer! Laravel's elegant syntax and powerful features made backend development a pleasure. It feels like Laravel understands what developers need, providing solutions before we even realize we need them. Every time I embark on a new project, Laravel proves to be the reliable backbone, offering stability and flexibility.
Laravel

PestPHP

Testing was previously a significant challenge for me until I discovered PestPHP. Its simplicity and expressive syntax transformed a tedious task into a valuable and efficient part of the development process. With PestPHP, ensuring the reliability of my code has never been easier or more efficient. It provides a safety net that catches bugs before they become problems, allowing me to concentrate on building and innovating. To learn more about how PestPHP can enhance your testing experience, please refer to my blog posts.
PestPhp

Livewire

Livewire has revolutionized my approach to front-end development. The ability to create responsive and dynamic interfaces without writing JavaScript was a significant improvement. Livewire integrates seamlessly with Laravel, making the development process more efficient and intuitive. It's as if I had a superpower that allows me to build complex interactions effortlessly, while remaining within the comfort zone of PHP.
Livewire

Vue.js

Vue.js has consistently been my preferred choice for creating user interfaces that are both beautiful and responsive. Its component-based architecture and responsive data binding make it an enjoyable and productive tool to use. Vue.js allows me to create engaging, interactive experiences that users love. Every project feels like a canvas, with Vue.js providing the tools to bring my visions to life.
VueJs

Conclusion

As I continue on this exciting journey, I am continually impressed by the possibilities these technologies open up. They have not only enhanced my skills, but also reignited my passion for web development. Every project presents an opportunity to learn, grow and create something extraordinary.

Thank you for joining me on this journey. I look forward to sharing more insights and experiences with you. Let's continue to embrace the future of web development together!

Please feel free to leave your thoughts and experiences in the comments section below. Let's connect and inspire each other!

PestPHP Introduction Tutorial: A Step-by-Step Guide for Beginners

Tresor — Fri, 17 Nov 2023 16:58:41 +0000

PestPHP is a modern PHP testing framework that is inspired by Ruby's RSpec and Jest libraries. It is designed to be simple and easy to use, while still providing all of the features you need to write comprehensive and reliable tests.

Benefits of Using PestPHP

PestPHP offers several benefits over other PHP testing frameworks, including:

Simplicity: PestPHP is designed to be simple and easy to use, even for beginners. It has a clean and concise API that is easy to learn and remember. Elegance: PestPHP tests are written in a clear and concise style, which makes them easy to read and maintain.
Expressiveness: PestPHP provides several features that make it easy to write expressive and readable tests, such as support for nested tests, data providers, and test hooks.
Flexibility: PestPHP can be used to test a wide variety of PHP applications, including web applications, console applications, and APIs. When to Use PestPHP.

PestPHP is a good choice for any PHP project that needs to be tested. It is particularly well-suited for projects that are written in a modern PHP style, and for projects that use other modern PHP frameworks, such as Laravel and Symfony.

How to Get Started with PestPHP

To get started with PestPHP, you can install it using the Composer package manager:

composer require pestphp/pest --dev --with-all-dependencies

Once PestPHP is installed, you can create a new test directory for your project:

Now, you'll need to initialize Pest in your current PHP project. This step will create a configuration file named Pest.php at the root level of your test suite, which will enable you to fine-tune your test suite later.

./vendor/bin/pest --init

Writing Your First PestPHP Test

To write your first PestPHP test, you can use the following

it('should pass', function () {
 // Your test code goes here.
}) ;

Or this syntax

test('sum', function () {
   $result = sum(1, 2);

   expect($result)->toBe(3);
});

The it() function defines a test case. The first argument to the it() function is a human-readable description of the test case. The second argument to the it() function is a callback function that contains your test code.

You can run your tests by executing the following command.

./vendor/bin/pest

Pest will discover all of your tests and run them. If any of your tests fail, Pest will provide you with a detailed error message.

Conclusion

PestPHP is a modern PHP testing framework that is simple to use, elegant, and expressive. It is a good choice for any PHP project that needs to be tested.

Use Repository Pattern with Laravel

Tresor — Sun, 11 Dec 2022 21:46:06 +0000

A repository can be defined as a layer of abstraction between the domain and data mapping layers, one that provides an avenue of mediation between both, via a collection-like interface for accessing domain objects.

Modern PHP frameworks, such as Laravel and Symfony, interact with databases via Object-relational mappers (ORMs); Symfony uses Doctrine as its default ORM and Laravel uses Eloquent.
Both take different approaches in how database interaction works. With Eloquent, Models are generated for each database table, forming the basis of interaction. Doctrine, however, uses the Repository pattern where each Entity has a corresponding repository containing helper functions to interact with the database. While Laravel doesn't provide this functionality out of the box, it is possible to use the Repository pattern in Laravel projects.

A key benefit of the Repository pattern is that it allows us to use the Principle of Dependency Inversion (or code to abstractions, not concretions). This makes our code more robust to changes, such as if a decision was made later on to switch to a data source that isn't supported by Eloquent.

It also helps with keeping the code organized and avoiding duplication, as database-related logic is kept in one place. While this benefit is not immediately apparent in small projects, it becomes more observable in large-scale projects which have to be maintained for many years.

In this article, I will show you how to implement the Repository pattern in your Laravel applications. To do that, we will build an API to manage orders received from clients for a company.

Getting started

Create a new Laravel project and cd into the directory using the following commands

laravel new note_block
cd note_block

Set up the database

For this tutorial, we'll use MySQL as our database. To do that, in the .env file, update the database-related parameters as shown below.

Finally, using your preferred database management application, create a new database called note_block.

Generate the initial data for the database

We are building an order management application, so let's create the model for it by running the following command.

php artisan make:model User -a

The -a argument lets Artisan know that we want to create a migration file, seeder, factory, and controller for the User model.

The command above will create five new files:

- controller in app/Http/Controllers/UserController.php

- database factory in database/factories/UserFactory.php

- migration file in database/migrations/YYYY_MM_DD_HHMMSS_create_users_table.php

- model located in app/Models/User.php

- seeder file in database/seeders/UserSeeder.php

In database/migrations/YYYY_MM_DD_HHMMSS_create_users_table.php, update the up function to match the following.

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->text('username');
        $table->string('email');
        $table->string('password');
        $table->boolean('status')->default(false);
        $table->timestamps();
    });
 }

As specified in the migration file, the order table will have the following columns:

Next, let's update UserFactory so that it can generate a dummy users to seed the database with. In database/factories/UserFactory.php, update the definition function to match the information in your migration file.

Next, open database/seeders/UserSeeder.php and update the run function to match the following.

public function run() 
{
    User::factory()->times(50)->create();
}

In database/seeders/DatabaseSeeder.php, add the following to the run function.

$this->call([UserSeeder::class]);

Finally, run your migrations and seed the database using the following command.

php artisan migrate --seed

Create the Repository

Before we create a repository for the Order model, let's define an interface to specify all the methods which the repository must declare. Instead of relying directly on the repository class, our controller (and any user component we may build in the future) will depend on the interface.

This makes our code flexible because, should it become necessary to make a change in the future, the controller remains unaffected. For instance, if we decided to outsource user management to a 3rd party application, we can build a new module that conforms to UserRepositoryInterface's signature and swap the binding declarations and our controller will work exactly as expected - without touching a single line of code in the controller.

In the app directory, create a new folder called Contract. Then, in this folder, create a new file called UserRepositoryInterface.php and add the following code to it.

<?php

namespace App\Contract;

use App\Models\User;

interface UserRepositoryInterface 
{
    public function getAllUsers();
    public function getUserById(User $user);
    public function deleteUser(User $user);
    public function createUser(array $attributes);
    public function updateUser(User $user, array $attributes);
}

After, in the app folder, create a new folder called Repositories. In this folder, create a new file called UserRepository.php and add the following code to it.

<?php

namespace App\Repositories;

use App\Contract\UserRepositoryInterface;
use App\Models\User;

class UserRepository implements UserRepositoryInterface 
{
    public function getAllUsers() 
    {
        return User::all();
    }

    public function getUserById(User $user) 
    {
        return $user;
    }

    public function deleteUser(User $user) 
    {
        $user->delete();
    }

    public function createUser(array $attributes) 
    {
        return User::create($attributes);
    }

    public function updateUser(User $user, array $attributes) 
    {
        return $user->update($attributes);
    }
}

Apart from the flexibility provided by the interface, encapsulating queries in this manner has the added advantage that we don't have to duplicate queries throughout the application.

Creating the controllers

With our repository in place, let's add some code to our controller. Open app/Http/Controllers/UsersController.php and update the code to match the following.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use App\Contract\UserRepositoryInterface;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Hash;

class UsersController extends Controller 
{
    public function __construct(
       private UserRepositoryInterface $repository
    ) 
    {
    }

    public function index(): JsonResponse 
    {
        return response()->json([
            'data' => $this->repository->getAllUsers()
        ]);
    }

    public function store(Request $request): JsonResponse 
    {
        $attributes = $request->only([
            'username',
            'email'
        ]);


        return response()->json(
            [
                'data' =>  $this->repository->createUser(array_merge($attributes, [
   'password' => Hash:make($request->input('password')

]))
            ],
            Response::HTTP_CREATED
        );
    }

    public function show(User $user): JsonResponse 
    {

        return response()->json([
            'data' => $user
        ]);
    }

    public function update(User $user, Request $request): JsonResponse 
    {
        $attributes = $request->only([
            'username',
            'email'
        ]);

        return response()->json([
            'data' => $this->repository->updateUser($user, $attributes)
        ]);
    }

    public function destroy(User $user): JsonResponse 
    {

        $this->repository->deleteUser($user);

        return response()->json(null, Response::HTTP_NO_CONTENT);
    }
}

Bind the interface and the implementation

The last thing we need to do is bind UserRepository to UserRepositoryInterface in Laravel's Service Container; we do this via a Service Provider. Create one using the following command.

php artisan make:provider RepositoryServiceProvider

Open app/Providers/RepositoryServiceProvider.php and update the register function to match the following.

public function register() 
{
    $this->app->bind(UserRepositoryInterface::class, UserRepository::class);
 }

Remember to include the import statement for UserRepository and UserRepositoryInterface.

Finally, add the new Service Provider to the providers array in config/app.php.

'providers' => [
    // ...other declared providers
    App\Providers\RepositoryServiceProvider::class,
];

Adding the routes

To map each method defined in the controller to specific routes, add the following code to routes/api.php.

Route::get('users', [UsersController::class, 'index']);
Route::get('users/{user}', [UsersController::class, 'show']);
Route::post('users', [UsersController::class, 'store']);
Route::put('users/{user}', [UsersController::class, 'update']);
Route::delete('users/{user}', [UsersController::class, 'delete']);

Test the application

Run the application using the following command.

php artisan serve

By default, the served application will be available at localhost:8000. Using Postman or cURL, we can make requests to our newly created API.

Run the following command to test the /api/users endpoint using cURL:

That's how to use the Repository Pattern in a Laravel application

In this article, we learned about the Repository pattern and how to use it in a Laravel application. We've also seen some of the benefits it offers a large-scale project - one of which is loosely coupled code where we are coding to abstractions, not concrete implementations.

Forem: Tresor

I built a fluent Numberable API for Laravel (v1.0.0)

Why

Install

Example

Fluent math

Utilities

Formatting

Also supports

Compatibility

Links

Understanding Laravel Observers: A Complete Guide to Automated Model Event Handling

What Are Laravel Observers and Why Should You Use Them?

Creating Your First Observer

Registering Observers

Real-World Example: E-commerce Order Processing

Advanced Observer Techniques

Conditional Observer Logic

Working with Observer Dependencies

Best Practices and Common Pitfalls

Performance Considerations

Avoiding Infinite Loops

Error Handling

Conclusion

Livewire Notification System: A Comprehensive Guide

Introduction

What is Livewire?

Key Features of Livewire

Project Configuration

Step 1: Installing Laravel

Step 2: Configuring Livewire

Step 3: Setup Database

Step : 4 Create Category Component

Step 5: Dispatching Events

Step 5: Run Project

Conclusion

What's New and Migration Guide: Tailwind CSS v4.0

1. A Migration Tool to Simplify the Transition

2. Major Updates and Changes

a) Removal of @tailwind Directives in CSS

b) Deprecated Utility Changes

c) Class Renaming for Sizes

d) Updates to Ring, Shadow, and Blur Scales

e) New API for Custom Utilities

3. Improvements for Build Tools

a) Vite

b) Standalone CLI

4. Minor Changes in Base Styles

5. Recommendations for a Successful Migration

Conclusion

Embracing the Future of Web Development with Laravel, PestPHP, Livewire and Vue.js

Laravel

PestPHP

Livewire

Vue.js

Conclusion

PestPHP Introduction Tutorial: A Step-by-Step Guide for Beginners

Benefits of Using PestPHP

How to Get Started with PestPHP

Writing Your First PestPHP Test

Conclusion

Use Repository Pattern with Laravel

Getting started

Set up the database

Generate the initial data for the database

Create the Repository

Creating the controllers

Bind the interface and the implementation

Adding the routes

Test the application

That's how to use the Repository Pattern in a Laravel application