Laravel generate unique slug tutorial. If you do not know how to create a slug in the laravel application, do you struggle to build this very much-needed feature in your laravel app?
Throughout this step-by-step guide, you will learn everything you need to know about how to generate a unique slug or url in the laravel app using the laravel livewire package.
What will you learn from this tutorial?
You will learn about laravel development, especially how to start from scratch; we will explain how to create an app and set up a livewire package in laravel. You will feel the power of simplicity and profoundness in development tactics to build the url slug in laravel.
Let us start revealing the laravel livewire generate slug example in detail with suggested bit-by-bit instructions.
Laravel 9 Generate Unique Slug with Livewire Example
- Step 1: Download Laravel App
- Step 2: Connect to Database
- Step 3: Install Eloquent Sluggable Library
- Step 4: Setting Up Migrations and Model
- Step 5: Register Route
- Step 6: Install Livewire in Laravel
- Step 7: Create Livewire Component & View
- Step 8: Update Blade View File
- Step 9: Run Laravel Project
Download Laravel App
Having a basic laravel app on your machine is the basic requirement; if you already have then no problem, otherwise run the provided command.
composer create-project --prefer-dist laravel/laravel laravel_demo
Don’t forget to move into the project folder.
cd laravel_demo
Connect to Database
In the second section, we will demonstrate how to connect laravel to MySQL database by adding database credentials in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password
Install Eloquent Sluggable Library
Livewire is pretty straightforward to install; the installation task can be initiated with just a single command.
Open the command prompt, enter the command, and execute to start the installation process..
composer require cviebrock/eloquent-sluggable
Now, run the php artisan command to publish the vendor file related to ServiceProvider.
php artisan vendor:publish --provider="Cviebrock\EloquentSluggable\ServiceProvider"
Setting Up Migrations and Model
We will start by running a command to generate migration and model files together.
php artisan make:model Student -m
Update the app/Models/Student.php file with the values that will create the columns inside the table also the import the Sluggable service.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;
class Student extends Model
{
use HasFactory, Sluggable;
protected $fillable = [
'title',
'slug',
];
public function sluggable(): array
{
return [
'slug' => [
'source' => 'title'
]
];
}
}
Likewise add the column names of the table into the database/migrations/create_students_table.php file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateStudentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('students');
}
}
In the next step, you require to run the migration with the provided command.
php artisan migrate
Register Route
In this step, you need to get inot the routes/web.php this and create route for laravel livewire feature.
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::view('/create-unique-slug', 'livewire.home');
Install Livewire in Laravel
Now, the essential task comes. First, you have to run the command to install the livewire in laravel.
composer require livewire/livewire
Create Livewire Component & View
Head over to console, and run the below command to generate livewire components.
php artisan make:livewire student-component
Eventually, the suggested command created two files on the following path:
app/Http/Livewire/StudentComponent.php
resources/views/livewire/student-component.blade.php
Next, get into the app/Http/Livewire/StudentComponent.php, define functions and variables as given below.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use \Cviebrock\EloquentSluggable\Services\SlugService;
use App\Models\Student;
class StudentComponent extends Component
{
public $title;
public $slug;
public function render()
{
$students = Student::latest()->take(9)->get();
return view('livewire.student-componenet', compact('students'));
}
public function createUniqueSlug()
{
$this->slug = SlugService::createSlug(Student::class, 'slug', $this->title);
}
public function store()
{
Student::create([
'title' => $this->title,
'slug' => $this->slug
]);
}
}
Next, you have to add the given code in resources/views/livewire/student-component.php file:
<div>
<form wire:submit.prevent="store">
<div class="form-group">
<input wire:model="title" type="text" class="form-control @error('title') is-invalid @enderror" autofocus>
@error('title')
<span class="invalid-feedback">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary">
Create Slug
</button>
</div>
</form>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Slug</th>
</tr>
</thead>
<tbody>
@foreach ($students as $student)
<tr>
<td>{{ $student->title }}</td>
<td>{{ $student->slug }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
Update Blade View File
Eventually, create home.blade.php file inside the resources/views/livewire/ directory, then add the code in resources/views/livewire/home.blade.php file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create Slug in Laravel Livewire App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
@livewireStyles
</head>
<body>
<div>
@if (session()->has('message'))
<div class="alert alert-info">
{{ session('message') }}
</div>
@endif
@livewire('student-component')
</div>
@livewireScripts
</body>
</html>
Run Laravel Project
To test the application, you must need to start the laravel development server.
php artisan serve
Now, add the url on the browser and hit enter.
http://127.0.0.1:8000/create-unique-slug
Summary
This extensive guide taught us how to create or generate slug functionality in PHP Laravel application.
We have looked at how to set up livewire in laravel and generate a unique slug in the laravel livewire app. This step-by-step laravel create url slug tutorial is ended, and we hope you will like this guide.