mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
949 lines
48 KiB
HTML
949 lines
48 KiB
HTML
---
|
|
permalink: /laravel/
|
|
title: Laravel
|
|
handler: flasher
|
|
description: Add flash notifications to your Laravel application with PHPFlasher. Follow our step-by-step guide to install and use the library, and start informing your users with powerful flash messages.
|
|
framework: laravel
|
|
---
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<!-- Table of contents - Desktop -->
|
|
<div class="w-full bg-white border-b border-slate-100">
|
|
<div class="px-2 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
|
|
<a href="#requirements" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Requirements</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#installation" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Installation</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#usage" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Usage</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#examples" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Examples</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#configuration" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Configuration</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#presets" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Presets</a>
|
|
<span class="text-slate-200">|</span>
|
|
<a href="#translations" class="text-sm font-medium text-slate-600 hover:text-indigo-600 whitespace-nowrap transition-colors">Translations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="prose prose-slate max-w-none p-6 md:p-8">
|
|
<!-- Requirements Section -->
|
|
<div id="requirements" class="scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Requirements</h2>
|
|
<p class="mb-4">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
|
helps you easily add flash notifications to your <strong>Laravel</strong> projects, improving user feedback with minimal setup.
|
|
</p>
|
|
|
|
<!-- Version requirements -->
|
|
<div class="mb-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- PHP Card -->
|
|
<div class="bg-white rounded-lg border border-slate-200 p-4">
|
|
<div class="flex items-center">
|
|
<div class="bg-indigo-100 rounded-full h-10 w-10 flex items-center justify-center">
|
|
<i class="fa-brands fa-php text-indigo-600 text-lg"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
|
|
<h4 class="font-semibold text-slate-800">PHP Version</h4>
|
|
<div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
|
|
v8.2 or higher
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Laravel Card -->
|
|
<div class="bg-white rounded-lg border border-slate-200 p-4">
|
|
<div class="flex items-center">
|
|
<div class="bg-red-600 rounded-full h-10 w-10 flex items-center justify-center">
|
|
<i class="fa-brands fa-laravel text-white text-lg"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-xs uppercase tracking-wider text-slate-500 font-medium">Required</div>
|
|
<h4 class="font-semibold text-slate-800">Laravel Version</h4>
|
|
<div class="inline-block px-2 py-0.5 bg-slate-100 text-slate-700 text-xs font-medium rounded-full mt-1">
|
|
v11.0 or higher
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy version note -->
|
|
<div class="bg-amber-50 border-l-4 border-amber-400 rounded-r-lg p-4 mt-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-amber-800">Using older PHP or Laravel versions?</h4>
|
|
<p class="text-sm text-amber-700 mt-1">
|
|
If you need to use PHP < v8.2 or Laravel < v11.0, use
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v1</strong> instead.
|
|
It supports PHP ≥ v5.3 and Laravel ≥ v5.0.
|
|
<a href="https://php-flasher.github.io/" class="text-amber-800 underline hover:text-amber-900">
|
|
Check out the v1 documentation here
|
|
</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Installation Section -->
|
|
<div id="installation" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Installation</h2>
|
|
<p class="mb-4">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> is modular. You can install only the parts you need.
|
|
</p>
|
|
<p class="mb-4">Run this command to install it:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-4">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-white text-sm">Terminal</span>
|
|
</div>
|
|
<div class="text-slate-400 text-sm">Installation</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-900">
|
|
<pre class="text-sm text-slate-200"><code class="language-bash">composer require php-flasher/flasher-laravel</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mb-4">After installing, run this command to set up the required assets:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-white text-sm">Terminal</span>
|
|
</div>
|
|
<div class="text-slate-400 text-sm">Setup Assets</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-900">
|
|
<pre class="text-sm text-slate-200"><code class="language-bash">php artisan flasher:install</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setup info -->
|
|
<div class="bg-slate-50 border-l-4 border-indigo-400 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-clock text-indigo-500 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Ready in under a minute!</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
That's it! No need for complex configuration -
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> works right out of the box with sensible defaults.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Practice Tip -->
|
|
<div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-check-circle text-green-600 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Best Practice</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
Commit the installed assets to your version control system to ensure everyone on your team has the same notification experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Section -->
|
|
<div id="usage" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Usage</h2>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>
|
|
|
|
<p class="mb-4">
|
|
Here's a basic example of using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> in a Laravel controller:
|
|
</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">ProductController.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
namespace App\Http\Controllers;
|
|
|
|
use App\Models\Product;
|
|
use Illuminate\Http\Request;
|
|
|
|
class ProductController extends Controller
|
|
{
|
|
public function store(Request $request)
|
|
{
|
|
// Validate the request
|
|
$validated = $request->validate([
|
|
'name' => 'required|string|max:255',
|
|
'price' => 'required|numeric',
|
|
]);
|
|
|
|
// Create the product
|
|
Product::create($validated);
|
|
|
|
// Add a success notification
|
|
flash()->success('Product created successfully!');
|
|
|
|
return redirect()->route('products.index');
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pro tip box -->
|
|
<div class="bg-slate-50 rounded-lg p-4 mb-6 border border-slate-200">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Pro Tip: Three Ways to Use PHPFlasher</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
|
provides three ways to create notifications:
|
|
</p>
|
|
<ul class="mt-2 space-y-1 text-sm text-slate-600">
|
|
<li class="flex items-center">
|
|
<i class="fa-solid fa-check text-green-600 mr-2 text-xs"></i>
|
|
<strong>Helper function:</strong> <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700 text-xs">flash()->success('Message');</code>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa-solid fa-check text-green-600 mr-2 text-xs"></i>
|
|
<strong>Facade:</strong> <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700 text-xs">use Flasher\Laravel\Facade\Flasher; Flasher::success('Message');</code>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa-solid fa-check text-green-600 mr-2 text-xs"></i>
|
|
<strong>Dependency injection:</strong> <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700 text-xs">private FlasherInterface $flasher</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Types</h3>
|
|
<p class="mb-4"><strong><span class="text-indigo-900">PHP<span
|
|
class="text-indigo-500">Flasher</span></span></strong> supports different types of notifications:
|
|
</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">NotificationTypes.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// Success message
|
|
flash()->success('Your changes have been saved!');
|
|
|
|
// Error message
|
|
flash()->error('Something went wrong!');
|
|
|
|
// Warning message
|
|
flash()->warning('Please review your data before proceeding.');
|
|
|
|
// Info message
|
|
flash()->info('The system will be down for maintenance tonight.');</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification types showcase -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
|
|
<div class="p-4 border border-slate-200 rounded-lg bg-white">
|
|
<div class="flex items-center gap-3 mb-2 text-green-700">
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
<strong class="text-slate-800">Success</strong>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">Your changes have been saved!</p>
|
|
</div>
|
|
|
|
<div class="p-4 border border-slate-200 rounded-lg bg-white">
|
|
<div class="flex items-center gap-3 mb-2 text-red-600">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
<strong class="text-slate-800">Error</strong>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">Something went wrong!</p>
|
|
</div>
|
|
|
|
<div class="p-4 border border-slate-200 rounded-lg bg-white">
|
|
<div class="flex items-center gap-3 mb-2 text-amber-600">
|
|
<i class="fa-solid fa-triangle-exclamation"></i>
|
|
<strong class="text-slate-800">Warning</strong>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">Please review your data before proceeding.</p>
|
|
</div>
|
|
|
|
<div class="p-4 border border-slate-200 rounded-lg bg-white">
|
|
<div class="flex items-center gap-3 mb-2 text-indigo-600">
|
|
<i class="fa-solid fa-circle-info"></i>
|
|
<strong class="text-slate-800">Info</strong>
|
|
</div>
|
|
<p class="text-slate-600 text-sm">The system will be down for maintenance tonight.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Adding a Title</h3>
|
|
<p class="mb-4">You can add a title to your notifications:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">Title.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()->success('Your profile has been updated successfully.', 'Profile Updated');</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example with title -->
|
|
<div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-circle-check text-green-600 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Profile Updated</h4>
|
|
<p class="text-sm text-slate-600 mt-1">Your profile has been updated successfully.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Options</h3>
|
|
<p class="mb-4">Customize your notifications with various options:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">Options.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()
|
|
->option('position', 'top-center') // Position on the screen
|
|
->option('timeout', 5000) // How long to display (milliseconds)
|
|
->option('rtl', true) // Right-to-left support
|
|
->success('Your changes have been saved!');</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Options demo -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-white rounded-lg border border-slate-200 p-4">
|
|
<h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
|
|
<i class="fa-solid fa-arrows-to-dot text-indigo-600 mr-2"></i>
|
|
Positioning
|
|
</h4>
|
|
<div class="flex flex-wrap gap-2 text-xs">
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-right</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-left</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">top-center</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-right</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-left</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">bottom-center</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg border border-slate-200 p-4">
|
|
<h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
|
|
<i class="fa-solid fa-clock text-indigo-600 mr-2"></i>
|
|
Timing
|
|
</h4>
|
|
<div class="text-xs text-slate-600">
|
|
<p>Control how long notifications display with the <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700">timeout</code> option (milliseconds).</p>
|
|
<p class="mt-1">Set to <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-700">0</code> to require manual dismissal.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg border border-slate-200 p-4">
|
|
<h4 class="text-sm font-medium text-slate-800 mb-2 flex items-center">
|
|
<i class="fa-solid fa-wand-magic-sparkles text-indigo-600 mr-2"></i>
|
|
Animations
|
|
</h4>
|
|
<div class="text-xs text-slate-600">
|
|
<p>Choose from various animations:</p>
|
|
<div class="flex flex-wrap gap-2 mt-1">
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">fade</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">slide</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">zoom</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded-full text-slate-700">flip</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Common Examples Section -->
|
|
<div id="examples" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Common Examples</h2>
|
|
|
|
<p class="mb-4">
|
|
Here are some common examples of using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> in your Laravel applications.
|
|
</p>
|
|
|
|
<!-- CRUD Examples -->
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">CRUD Operations</h3>
|
|
<p class="mb-4">A complete example showing notifications for Create, Read, Update, and Delete operations:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">PostController.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
namespace App\Http\Controllers;
|
|
|
|
use App\Models\Post;
|
|
use Illuminate\Http\Request;
|
|
|
|
class PostController extends Controller
|
|
{
|
|
public function store(Request $request)
|
|
{
|
|
$validated = $request->validate([
|
|
'title' => 'required|string|max:255',
|
|
'content' => 'required|string',
|
|
]);
|
|
|
|
Post::create($validated);
|
|
|
|
flash()->success('Post created successfully!', 'Success');
|
|
|
|
return redirect()->route('posts.index');
|
|
}
|
|
|
|
public function update(Request $request, Post $post)
|
|
{
|
|
$validated = $request->validate([
|
|
'title' => 'required|string|max:255',
|
|
'content' => 'required|string',
|
|
]);
|
|
|
|
$post->update($validated);
|
|
|
|
flash()->success('Post updated successfully!');
|
|
|
|
return redirect()->route('posts.index');
|
|
}
|
|
|
|
public function destroy(Post $post)
|
|
{
|
|
$post->delete();
|
|
|
|
flash()->info('Post was deleted');
|
|
|
|
return redirect()->route('posts.index');
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best practice box for CRUD operations -->
|
|
<div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-check-circle text-green-600 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Best Practice: Consistent Messaging</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
Use the same notification style and wording for similar operations across your application. This provides a consistent user experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Validation Example -->
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Form Validation Feedback</h3>
|
|
<p class="mb-4">Show validation errors with meaningful notifications:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">RegisterController.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
namespace App\Http\Controllers\Auth;
|
|
|
|
use App\Http\Controllers\Controller;
|
|
use App\Models\User;
|
|
use Illuminate\Http\Request;
|
|
use Illuminate\Support\Facades\Hash;
|
|
|
|
class RegisterController extends Controller
|
|
{
|
|
public function register(Request $request)
|
|
{
|
|
try {
|
|
$validated = $request->validate([
|
|
'name' => 'required|string|max:255',
|
|
'email' => 'required|email|unique:users,email',
|
|
'password' => 'required|min:8|confirmed',
|
|
]);
|
|
|
|
User::create([
|
|
'name' => $validated['name'],
|
|
'email' => $validated['email'],
|
|
'password' => Hash::make($validated['password']),
|
|
]);
|
|
|
|
flash()->success('Registration successful! Please log in.');
|
|
|
|
return redirect()->route('login');
|
|
} catch (\Exception $e) {
|
|
flash()->error('Registration failed. Please try again.');
|
|
|
|
return back()->withInput();
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AJAX Example -->
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">AJAX Requests</h3>
|
|
<p class="mb-4">Using PHPFlasher with AJAX requests:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">APIController.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
namespace App\Http\Controllers;
|
|
|
|
use Illuminate\Http\Request;
|
|
|
|
class APIController extends Controller
|
|
{
|
|
public function save(Request $request)
|
|
{
|
|
try {
|
|
// Process the data
|
|
$data = $request->validate([
|
|
'title' => 'required|string|max:255',
|
|
'content' => 'required|string',
|
|
]);
|
|
|
|
// Save to database...
|
|
|
|
// Flash messages will be available in the next response
|
|
flash()->success('Data saved successfully!');
|
|
|
|
if ($request->expectsJson()) {
|
|
return response()->json([
|
|
'status' => 'success',
|
|
'message' => 'Data saved successfully!'
|
|
]);
|
|
} else {
|
|
return back();
|
|
}
|
|
} catch (\Exception $e) {
|
|
flash()->error('Failed to save data');
|
|
|
|
if ($request->expectsJson()) {
|
|
return response()->json([
|
|
'status' => 'error',
|
|
'message' => 'Failed to save data'
|
|
], 400);
|
|
} else {
|
|
return back()->withInput();
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frontend JS Code -->
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">script.js</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">// Import flasher in your JS file
|
|
import flasher from '@flasher/flasher';
|
|
|
|
document.getElementById('saveForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
fetch('/api/save', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
// Explicitly call flasher methods based on the response
|
|
if (data.status === 'success') {
|
|
flasher.success(data.message);
|
|
} else {
|
|
flasher.error(data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
flasher.error('An unexpected error occurred');
|
|
});
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AJAX tip -->
|
|
<div class="bg-slate-50 border-l-4 border-amber-400 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-lightbulb text-amber-500 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Tip: AJAX Integration</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
PHPFlasher requires explicit JavaScript calls to display notifications in AJAX scenarios. Call flasher methods directly in your JavaScript after receiving a response.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Middleware Example -->
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Using with Laravel Middleware</h3>
|
|
<p class="mb-4">You can add notifications from middleware for actions like authorization:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">AdminAccessMiddleware.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
namespace App\Http\Middleware;
|
|
|
|
use Closure;
|
|
use Illuminate\Http\Request;
|
|
|
|
class AdminAccessMiddleware
|
|
{
|
|
public function handle(Request $request, Closure $next)
|
|
{
|
|
if (!$request->user() || !$request->user()->isAdmin()) {
|
|
flash()->error('You do not have access to this area.', 'Access Denied');
|
|
|
|
return redirect()->route('home');
|
|
}
|
|
|
|
return $next($request);
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Section -->
|
|
<div id="configuration" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Configuration</h2>
|
|
|
|
<p class="mb-4">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
|
can be configured to customize its behavior. The configuration file is located at
|
|
<code class="bg-slate-200 px-2 py-1 rounded text-slate-700">config/flasher.php</code>.
|
|
</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-white text-sm">flasher.php</span>
|
|
</div>
|
|
<div class="text-slate-400 text-sm">Configuration</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
return [
|
|
'default' => env('FLASHER_DEFAULT', 'flasher'),
|
|
|
|
'drivers' => [
|
|
'flasher' => [
|
|
'root' => env('FLASHER_ROOT', base_path('vendor/flasher')),
|
|
'translate' => env('FLASHER_TRANSLATE', true),
|
|
'inject_assets' => env('FLASHER_INJECT_ASSETS', true),
|
|
],
|
|
],
|
|
|
|
'presets' => [
|
|
// Your custom presets here
|
|
],
|
|
];</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Presets Section -->
|
|
<div id="presets" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Presets</h2>
|
|
|
|
<p class="mb-4">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
|
provides configuration presets for different notification styles.
|
|
</p>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Available Presets</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div class="p-4 border border-slate-200 rounded-lg">
|
|
<h4 class="font-semibold text-slate-800 mb-2">Default</h4>
|
|
<p class="text-sm text-slate-600">Balanced notifications with standard animations and positioning.</p>
|
|
<div class="mt-3 p-3 bg-slate-50 rounded">
|
|
<code class="text-xs text-slate-700">flasher: default</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 border border-slate-200 rounded-lg">
|
|
<h4 class="font-semibold text-slate-800 mb-2">Minimal</h4>
|
|
<p class="text-sm text-slate-600">Clean notifications with minimal styling and effects.</p>
|
|
<div class="mt-3 p-3 bg-slate-50 rounded">
|
|
<code class="text-xs text-slate-700">flasher: minimal</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Translations Section -->
|
|
<div id="translations" class="mt-10 scroll-mt-20">
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">Translations</h2>
|
|
|
|
<p class="mb-4">
|
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
|
supports translation of flash messages using Laravel's translation system.
|
|
</p>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Enabling Translations</h3>
|
|
<p class="mb-4">PHPFlasher automatically uses Laravel's current locale. You can set it in your application:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">LocaleExample.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// Set the locale in Laravel
|
|
App::setLocale('fr');
|
|
|
|
// PHPFlasher automatically uses the current locale
|
|
flash()->success('The resource was created');
|
|
|
|
// With parameters
|
|
flash()->success(
|
|
trans('messages.welcome', ['name' => $user->name])
|
|
);</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Creating Translation Files</h3>
|
|
<p class="mb-4">Create translation files in the <code class="bg-slate-200 px-2 py-1 rounded text-slate-700">lang/vendor/flasher</code> directory:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">lang/vendor/flasher/en/messages.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
|
|
|
return [
|
|
'success' => 'Success! :resource was created.',
|
|
'error' => 'Error! Please try again.',
|
|
'warning' => 'Warning! Please review your data.',
|
|
'info' => 'Info: :message',
|
|
];</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Translation with Parameters -->
|
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Translation with Parameters</h3>
|
|
<p class="mb-4">You can use parameters in your translations:</p>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden border border-slate-200 mb-6">
|
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
|
<div class="flex space-x-1.5 mr-3">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="text-white text-sm">TranslationWithParams.php</div>
|
|
</div>
|
|
<div>
|
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// In lang/vendor/flasher/en/messages.php:
|
|
// 'welcome_user' => 'Welcome, :name!'
|
|
|
|
flash()
|
|
->success(
|
|
trans('flasher::messages.welcome_user', ['name' => $user->first_name])
|
|
);
|
|
|
|
// Or directly with PHPFlasher
|
|
flash()->preset('welcome_user', ['name' => $user->first_name]);</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Practice for Translations -->
|
|
<div class="bg-slate-50 border-l-4 border-green-500 rounded-r-lg p-4 mb-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-check-circle text-green-600 mt-0.5"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h4 class="text-sm font-medium text-slate-800">Best Practice: Centralize Your Translations</h4>
|
|
<p class="text-sm text-slate-600 mt-1">
|
|
Store all user-facing notification messages in translation files rather than hardcoding them. This makes it much easier to update wording or add new languages later.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example gallery of translations -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
|
<!-- English -->
|
|
<div class="bg-white p-4 rounded-lg border border-slate-200">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">🇺🇸</span>
|
|
<h4 class="font-medium text-slate-900">English</h4>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded-full">en</span>
|
|
</div>
|
|
<div class="p-3 bg-green-50 text-green-800 rounded-md mb-2 text-sm flex items-center">
|
|
<i class="fa-solid fa-circle-check text-green-500 mr-2"></i>
|
|
<span>Success! Item was created.</span>
|
|
</div>
|
|
<div class="p-3 bg-red-50 text-red-800 rounded-md text-sm flex items-center">
|
|
<i class="fa-solid fa-circle-exclamation text-red-500 mr-2"></i>
|
|
<span>Error! Please try again.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- French -->
|
|
<div class="bg-white p-4 rounded-lg border border-slate-200">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">🇫🇷</span>
|
|
<h4 class="font-medium text-slate-900">French</h4>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded-full">fr</span>
|
|
</div>
|
|
<div class="p-3 bg-green-50 text-green-800 rounded-md mb-2 text-sm flex items-center">
|
|
<i class="fa-solid fa-circle-check text-green-500 mr-2"></i>
|
|
<span>Succès! L'élément a été créé.</span>
|
|
</div>
|
|
<div class="p-3 bg-red-50 text-red-800 rounded-md text-sm flex items-center">
|
|
<i class="fa-solid fa-circle-exclamation text-red-500 mr-2"></i>
|
|
<span>Erreur! Veuillez réessayer.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arabic -->
|
|
<div class="bg-white p-4 rounded-lg border border-slate-200">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">🇲🇦</span>
|
|
<h4 class="font-medium text-slate-900">Arabic</h4>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded-full">ar</span>
|
|
</div>
|
|
<div class="p-3 bg-green-50 text-green-800 rounded-md mb-2 text-sm flex items-center rtl">
|
|
<span>نجاح! تم إنشاء العنصر.</span>
|
|
<i class="fa-solid fa-circle-check text-green-500 ml-2"></i>
|
|
</div>
|
|
<div class="p-3 bg-red-50 text-red-800 rounded-md text-sm flex items-center rtl">
|
|
<span>خطأ! يرجى المحاولة مرة أخرى.</span>
|
|
<i class="fa-solid fa-circle-exclamation text-red-500 ml-2"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|