Message Alert with Bootstrap

Custom Message Alert with Bootstrap 5.3 and Laravel

Introduction: In this tutorial, we will create a custom message alert system using Bootstrap 5.3 for the front-end and Laravel for the back-end. This system will allow dynamic toast notifications for success, error, warning, and info messages.

Step 1: Setting Up Laravel Project

If you haven’t already set up a Laravel project, start by creating a new Laravel application:

composer create-project laravel/laravel MessageAlertSystem
cd MessageAlertSystem

Start the Laravel development server:

php artisan serve

Step 2: Creating a Session-Based Flash Message System

Laravel provides a built-in session flash message system that we can utilize to store temporary messages.

Define Flash Message in Laravel Controller

To trigger an alert message, set a flash message in any controller before redirecting:

public function store(Request $request)
{
    $request->validate([
        'name' => 'required|string|max:255'
    ]);
    
    // Assume a model operation here
    return redirect()->back()->with('success', 'Default Success!');
}

Step 3: Include Bootstrap 5.3 and Icon Library in Blade Template

In your resources/views/layouts/app.blade.php, add the Bootstrap 5.3 and Font Awesome library in the <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Message Alert</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>

Step 4: Display Messages in Blade Template

Add the following Bootstrap toast component inside the body:

<script>
   document.addEventListener("DOMContentLoaded", function () {
      let messages = {
          success: "{{ session('success') }}",
          error: "{{ session('error') }}",
          warning: "{{ session('warning') }}",
          info: "{{ session('info') }}"
      };

      Object.keys(messages).forEach(type => {
         if (messages[type]) {
            new Message('imessage').show(messages[type], type === "error" ? "fail" : type, "top-center");
         }
       });
    });
</script>

This will display the session alert message dynamically using the imessage.show() function.

Step 5: Implementing JavaScript Toast Notification

Ensure you have the Message class in your JavaScript file:

class Message {
    constructor(toastId) {
        this.toastContainer = document.querySelector('.toast-container') || this.createContainer();
        this.toastElement = this.createToast(toastId);
        this.toastContainer.appendChild(this.toastElement);
        this.toastInstance = new bootstrap.Toast(this.toastElement);
    }
    createContainer() {
        const container = document.createElement('div');
        container.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(container);
        return container;
    }
    createToast(id) {
        const toast = document.createElement('div');
        toast.id = id;
        toast.className = 'toast align-items-center border-0';
        toast.setAttribute('role', 'alert');
        toast.setAttribute('aria-live', 'polite');
        toast.setAttribute('aria-atomic', 'true');
        
        toast.innerHTML = `
            <div class="d-flex toast-content rounded-3">
                <div class="toast-body"></div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        `;
        this.toastBody = toast.querySelector('.toast-body');
        return toast;
    }
    show(message, type = "success", timeout = 3000) {
        const icons = {
            success: '<i class="fa-solid fa-check-circle text-success me-2"></i>',
            warning: '<i class="fa-solid fa-exclamation-circle text-warning me-2"></i>',
            fail: '<i class="fa-solid fa-times-circle text-danger me-2"></i>',
            info: '<i class="fa-solid fa-info-circle text-info me-2"></i>'
        };
        this.toastBody.innerHTML = (icons[type] || '') + message;
        this.toastInstance.show();
        if (timeout) {
            setTimeout(() => this.hide(), timeout);
        }
    }
    hide() {
        this.toastInstance.hide();
    }
}
const imessage = new Message('imessage');

Step 6: Include Bootstrap JS in Blade Template

At the bottom of your app.blade.php file, before closing </body>, add:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
<script src="/js/toast.js"></script> <!-- Assuming the JS file is stored in public/js/toast.js -->
</body>
</html>

Conclusion

Now you have a working custom message alert system using Bootstrap 5.3, Font Awesome for icons, and Laravel. This method ensures a smooth user experience by displaying real-time messages dynamically on user actions.

Would you like to add AJAX support for real-time messages? Let me know in the comments!

Souy Soeng

Message Alert with Bootstrap

Custom Message Alert with Bootstrap 5.3 and Laravel

Post a Comment

Souy Soeng