Cara Membuat SEO Friendly Menggunakan Laravel 9
Hari ini kita akan belajar cara membuat URL Laravel 9 yang SEO friendly dan sluggable. Tutorial ini akan menunjukkan kepada Anda dengan contoh cara membuat URL slug SEO friendly di laravel 9 terbaru.
URL yang SEO-friendly adalah URL yang dirancang untuk memenuhi kebutuhan pengguna dan pencari. Secara khusus, URL yang dioptimalkan untuk SEO cenderung pendek dan kaya kata kunci. URL adalah faktor peringkat minor yang digunakan oleh mesin telusur saat menentukan relevansi halaman atau sumber daya tertentu dengan query penelusuran. Mereka memberi bobot pada otoritas seluruh domain itu sendiri, tetapi penggunaan kata kunci di URL juga bertindak sebagai faktor peringkat.
Petunjuk tentang cara membuat URL sluggable yang ramah SEO untuk Laravel 9:
- Langkah 1: Instal aplikasi Laravel 9
- Langkah 2: Instal Paket Eloquent Sluggable
- Langkah 3: Buat dan Migrasikan Database
- Langkah 4: Membangun model
- Langkah 5: Buat Rute
- Langkah 6: Buat controller
- Langkah 7: Buat File View Blade
- Langkah 8: Tes
- Langkah 9: Kesimpulan
Langkah 1: Instal aplikasi Laravel 9
Sebagai langkah awal, instal aplikasi laravel 9 yang baru. Untuk menginstal aplikasi laravel baru, jalankan kode berikut di terminal Anda:
composer create-project laravel/laravel
seo-slug-appcd seo-slug-app
Catatan: "seo-slug-app" adalah nama aplikasi laravel.
Langkah 2: Instal Paket Eloquent Sluggable
Langkah selanjutnya adalah menginstal paket bernama cviebrock/eloquent-sluggable. Untuk menginstal paket, jalankan perintah berikut di terminal Anda:
composer require cviebrock/eloquent-sluggable
Selanjutnya, tambahkan service provider dan alias. Buka app/config.php dan tambahkan penyedia berikut:
'providers' => [
....
Cviebrock\EloquentSluggable\ServiceProvider::class,
]
.....
Publikasikan file konfigurasi sesuai kebutuhan jika Anda ingin mengubah default.
php artisan vendor:publish --provider="Cviebrock\EloquentSluggable\ServiceProvider"
Langkah 3: Buat dan Migrasikan Database
Selanjutnya, buat database untuk aplikasi Anda. Buka phpmyadmin dan buat database baru bernama 'seo-slug-app' (Anda dapat menamainya sesuka Anda).
Setelah membuat database, tambahkan detail database ke file .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=seo-slug-app
DB_USERNAME=root
DB_PASSWORD=
Saat ini saya sedang membuat file migrasi Item. Untuk membuat migrasi item, jalankan perintah berikut di Terminal:
php artisan make:migration create_items_table
Ini akan membuat migrasi item baru yang dapat Anda buka file di database/migrasi Anda dan perbarui dengan kode berikut:
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");
}
}
Kemudian jalankan migrasi dengan kode berikut:
php artisan migrate
Langkah 4: Buat model
Selanjutnya, buat model Item. Untuk membuat model Item, jalankan perintah berikut di terminal Anda:
php artisan make:model Item
Saya memiliki model Item di dalam app/Models/ . Buka file dan perbarui dengan kode berikut.
<?phpnamespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;class Item extends Model
{
use HasFactory;
use Sluggable; public $fillable = ['title'];/**
* Return the sluggable configuration array for this model.
*
* @return array
*/
public function sluggable(): array
{
return [
'slug' => [
'source' => 'title'
]
];
}
}
Langkah 5: Buat Route
Selanjutnya, buat Route untuk aplikasi Anda. Buka file route dari routes/web.php dan tambahkan route berikut:
<?phpuse Illuminate\Support\Facades\Route;/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/Route::get('/', function () {
return view('welcome');
});Route::get('/items', [App\Http\Controllers\ItemController::class, 'index']);
Route::post('/item-create', [App\Http\Controllers\ItemController::class, 'create'])->name('item-create');
Langkah 6: Buat controller
Buat controller. Untuk membuat ItemController, jalankan perintah berikut di terminal Anda:
php artisan make:controller ItemController
Ini akan membuat file ItemController di dalam app/Http/Controllers. Buka file dan perbarui dengan kode berikut.
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;
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();
}
}
?>
Langkah 7: Buat File View Blade
Langkah terakhir adalah membuat file view blade untuk menampilkan daftar dan membuat halaman item. Buat items.blade.php di dalam resources/views dan masukkan kode berikut:
resource/views/items.blade.php<!DOCTYPE html>
<html>
<head>
<title>How to create SEO friendly sluggable URL Laravel 9 Example - LaravelTuts.com</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>How to create SEO friendly sluggable URL Laravel 9 Example - LaravelTuts.com</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>
Langkah 8: Tes
itu adalah! Sekarang Anda dapat menguji aplikasi laravel Anda. Untuk memulai server aplikasi laravel 9, jalankan perintah berikut di terminal Anda:
php artisan serve
Buka URL berikut di browser web apa saja: http://127.0.0.1:8000/items
Langkah 9: Kesimpulan
Hari ini kita belajar cara membuat contoh URL Laravel 9 sluggable yang ramah SEO. Saya harap tutorial ini membantu Anda mempelajari Laravel 9. Jika Anda memiliki pertanyaan, tanyakan kepada kami di bagian komentar di bawah. Jika Anda menyukai tutorialnya:) Semoga Sukses :)