How to create SEO friendly sluggable URL in laravel 8?

Today now in this post i will show you How to create SEO friendly sluggable URL in laravel 8? Here I am going to share with you an example of How we can generate a SEO friendly URL in Laravel application. We are know that SEO is a very important part of website for increase the users traffic. When our website have seo friendly URL then it will help us to increase our site rank in the google index, yahoo etc. So If we nee to generate the SEO friendly URL in our laravel application then We can easily do it by the “eloquent-sluggable” package.

We know Eloquent-sluggable package is provide us to automatic create the unique url for our the post. Now in this package i will create the unique slug url on that way it is good for SEO.

Step 1: Install Package

For this now in this step we need to add the eloquent-sluggable package for generate theunique slug url . so now need to open our cmd or terminal and then need to fire the bellow command:

composer require cviebrock/eloquent-sluggable

So After successfully install that package, need to open config/app.php file and then add service provider and alias.

config/app.php

'providers' => [
	....
	Cviebrock\EloquentSluggable\ServiceProvider::class,
]
.....

W can also publish the default configuration file by the following command:

php artisan vendor:publish --provider="Cviebrock\EloquentSluggable\ServiceProvider"

Step 2: Create Item Table and Model

php artisan make:model Item -m

app/Models/Item.php

<?php
namespace App\Model;
use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;
class Item extends Model
{
	use Sluggable;
    public $fillable = ['title'];
    /**
     * Return the sluggable configuration array for this model.
     *
     * @return array
     */
    public function sluggable()
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}
?>

After this command we will also find one another file in the following path database/migrations and we need to put the bellow code in our migration file for create the items table.

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;


class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
           $table->increments('id');
           $table->string('title');
           $table->string('slug');
           $table->timestamps();
       });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("items");
    }
}
Step 3: Create Route

Now in this is step we need to create new route for the listing items lists and create new item. so now open your routes/web.php file and put the following route.

routes/web.php

Route::get('items', 'ItemController@index');
Route::post('item-create', ['as'=>'item-create','uses'=>'ItemController@create']);

Step 4: Create Controller

Now In this step, now we need to create new a controller as as ItemController in this path app/Http/Controllers/ItemController.php. Now this controller will be manage all the listing items and also create new item request and then return response. So put the bellow content in controller file:

app/Http/Controllers/ItemController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Models\Item;


class ItemController extends Controller
{
    /**
     * Get the index name for the model.
     *
     * @return string
    */
    public function index()
    {
    	$items = Item::all();
    	return view('items',compact('items'));
    }

    /**
     * Get the index name for the model.
     *
     * @return string
    */
    public function create(Request $request)
    {
    	$this->validate($request,['title'=>'required']);
    	$items = Item::create($request->all());
    	return back();
    }
}
?>
Step 5: Create View

Now in the last step, need to create items.blade.php(resources/views/items.blade.php) for the layout and we need to write the design code here and put the following code:

resources/views/items.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5.3 - How to create seo friendly sluggable URL</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>


<div class="container">


	<h2>Laravel How to create seo friendly sluggable URL</h2><br/>


	<form method="POST" action="{{ route('item-create') }}" autocomplete="off">
		@if(count($errors))
			<div class="alert alert-danger">
				<strong>Whoops!</strong> There were some problems with your input.
				<br/>
				<ul>
					@foreach($errors->all() as $error)
					<li>{{ $error }}</li>
					@endforeach
				</ul>
			</div>
		@endif


		<input type="hidden" name="_token" value="{{ csrf_token() }}">


		<div class="row">
			<div class="col-md-6">
				<div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
					<input type="text" id="title" name="title" class="form-control" placeholder="Enter Title" value="{{ old('title') }}">
					<span class="text-danger">{{ $errors->first('title') }}</span>
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					<button class="btn btn-success">Create New Item</button>
				</div>
			</div>
		</div>
	</form>


	<div class="panel panel-primary">
	  <div class="panel-heading">Item management</div>
	  <div class="panel-body">
			<table class="table table-bordered">
				<thead>
					<th>Id</th>
					<th>Title</th>
					<th>URL</th>
					<th>Creation Date</th>
					<th>Updated Date</th>
				</thead>
				<tbody>
					@if($items->count())
						@foreach($items as $key => $item)
							<tr>
								<td>{{ ++$key }}</td>
								<td>{{ $item->title }}</td>
								<td><a href="">{{ URL::to('/') . '/item/' . $item->slug }}</a></td>
								<td>{{ $item->created_at }}</td>
								<td>{{ $item->updated_at }}</td>
							</tr>
						@endforeach
					@else
						<tr>
							<td colspan="4">There are no data.</td>
						</tr>
					@endif
				</tbody>
			</table>
	  </div>
	</div>


</div>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →