How you can create an AJAX slug generator in Laravel 11?

To create an AJAX slug generator in Laravel 11, you can follow these steps:

Step 1: Set Up Your Route

First, define a route in routes/web.php that will handle the AJAX request.

#php
use App\Http\Controllers\SlugController;

Route::get('/generate-slug', [SlugController::class, 'generateSlug']);

Step 2: Create the Controller

Next, create a controller to handle the slug generation. You can use the following command:

#bash
php artisan make:controller SlugController

Then, in app/Http/Controllers/SlugController.php, implement the generateSlug method:

#php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Str;

class SlugController extends Controller
{
    public function generateSlug(Request $request)
    {
        $title = $request->input('title');
        $slug = Str::slug($title);
        return response()->json(['slug' => $slug]);
    }
}

Step 3: Create the Frontend

In your Blade view file (e.g., resources/views/create.blade.php), set up a simple form with AJAX:

#html #css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slug Generator</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Slug Generator</h1>
    <form id="slugForm">
        <input type="text" id="title" placeholder="Enter title" required>
        <button type="submit">Generate Slug</button>
    </form>
    <h2>Generated Slug: <span id="slugOutput"></span></h2>

    <script>
        $(document).ready(function() {
            $('#slugForm').on('submit', function(event) {
                event.preventDefault();

                var title = $('#title').val();

                $.ajax({
                    url: '/generate-slug',
                    method: 'GET',
                    data: { title: title },
                    success: function(response) {
                        $('#slugOutput').text(response.slug);
                    },
                    error: function(xhr) {
                        console.error(xhr);
                    }
                });
            });
        });
    </script>
</body>
</html>

Step 4: Test Your Application

Start the Laravel Development Server: php artisan serve
Visit the Form: Open your browser and navigate to the URL where your form is hosted (e.g., http://localhost:8000/create).
Generate Slug: Enter a title and submit the form. The generated slug should appear dynamically.

#bash #command
php artisan serve

In short:

This setup allows you to generate slugs from titles using AJAX in Laravel 11. When you enter a title and submit the form, an AJAX request is sent to the server, where the slug is generated and returned as a JSON response. If you need further customization or additional features, feel free to ask!

Developers Simplify Complex Code at Coding Filters!

Developers often struggle with overly complex code that is hard to maintain and debug. By applying coding filters, developers can break down complex tasks into smaller, more manageable pieces, resulting in simpler, cleaner code. Filters help to target specific data or processes, enhancing both performance and readability.

Author

Henry Adams

Got it! If you'd like to share more details or need assistance with anything specific related to full-stack development, feel free to ask!
View all posts