Sekarang kita akan fungsionalitas aplikasi URL shorterner kita agar dapat berfungsi sesuai dengan rencana awal yaitu memperpendek URL.
Membuat Controller
Untuk aplikasi ini kita akan membuat controller bernama UrlController. Oleh karena itu, silahkan buat menggunakan artisan command berikut:
php artisan make:controller UrlController
Method Index
Sebelumnya kita menampilkan halaman yang telah kita buat langsung dari file routes/web.php. Karena sekarang kita sudah memiliki controller, maka kita akan memindahkannya ke dalam controller pada method index. Di dalam UrlController buat method publik baru bernama index:
public function index()
{
return view('index')
}
perhatikan bahwa index yang dikirim sebagai argumen fungsi view adalah nama file view yang sudah kita buat sebelumnya berada di resources/views/index.blade.php.
Method Store
Setelah method index, selanjutnya kita akan membuat method publik bernama store. Di dalam method ini kita akan mengelola data url yang dikirimkan user melalui form di halaman.
public function store(Request $request)
{
//
}
Validasi
Dalam sebuah aplikasi, validasi input merupakan hal yang wajib untuk dilakukan. Ini akan memastikan data yang dikirim oleh user sesuai dengan aplikasi kita dan aman untuk dikelola.
pada method store tambahkan baris berikut:
public function store(Request $request)
{
$data = $request->validate([
'url' => ['required', 'active_url'],
]);
}
pada kode di atas, kita menggunakan object $request dari parameter untuk memvalidasi input bernama url agar tidak kosong dan selalu berisi url yang aktif. Hasil dari validasi akan disimpan dalam bentuk array di variable $data.
Membuat Random String
Kita akan menggunakan helper str dari laravel untuk membuat random string. Import helper str di bagian atas class controller seperti berikut:
// kode import lainnya...
use Illuminate\Support\Str;
Setelah itu, kita membuat random string dengan panjang 6 karakter setelah proses validasi
public function store(Request $request)
{
// kode lainnya
$randomString = Str::random(6);
}
Menyimpan URL
Setelah validasi dan menyiapkan random string, langkah selanjutnya kita akan menyimpan url ke dalam database. Pada method store tambahkan kode berikut:
public function store(Request $request)
{
// kode lainnya
$shortUrl = new Url([
'alias' => $randomString,
'url' => $data['url'],
]);
$shortUrl->save();
$result = url($randomString);
return to_route('url.index')->with('result' , $result);
}
Pada kode di atas, kita membuat object $shortUrl dengan atribut alias yang di isi dengan random string, dan url yang di isi dengan url hasil validasi input user. Alias dan url adalah nama field tabel yang ada di dalam database kita.
Setelah itu, kita juga menggunakan helper url untuk membangun url lengkap dengan hostname dan protokolnya.
Variable $result kurang lebih akan berisi http://127.0.0.1/(random-string).
Terakhir kita melakukan redirect ke route dengan nama url.index yaitu route yang nantinya akan kita buat mengarah ke halaman utama. Kita tidak hanya melakukan redirect tetapi juga membuat sebuah flash session baru dengan key result yang berisi url yang telah diperpendek. Data ini nantinya akan kita gunakan di dalam views untuk ditampilkan.
Method Redirect
Method berikutnya adalah method redirect dengan parameter $alias. Pada method ini, kita mencari url yang sebelumnya disimpan berdasarkan alias. Jika tidak ditemukan maka akan menampilkan halaman 404 not found. Jika ditemukan maka akan dilakukan redirect ke url originalnya menggunakan method redirect()->away(). Berikut ini isi method redirect:
public function redirect(string $alias)
{
$shortUrl = Url::where('alias', $alias)->first();
if(!$shortUrl) abort(404);
return redirect()->away($shortUrl->url);
}
Hasil akhir UrlController
<?php
namespace App\Http\Controllers;
use App\Models\Url;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
class UrlController extends Controller
{
public function index()
{
return view('index');
}
public function store(Request $request)
{
$data = $request->validate([
'url' => ['required', 'active_url'],
]);
$randomString = Str::random(6);
$shortUrl = new Url([
'alias' => $randomString,
'url' => $data['url'],
]);
$shortUrl->save();
$result = url($randomString);
return to_route('url.index')->with('result', $result);
}
public function redirect(string $alias)
{
$shortUrl = Url::where('alias', $alias)->first();
if(!$shortUrl) abort(404);
return redirect()->away($shortUrl->url);
}
}
Memperbaiki Routes
Karena kita sudah menggunakan controller, kita harus memperbaiki routes kita agar menggunakan controller. Buka kembali file routes/web.php kemudian ubah isinya menjadi seperti ini:
<?php
use App\Http\Controllers\UrlController;
use Illuminate\Support\Facades\Route;
Route::get('/', [UrlController::class, 'index'])->name('url.index');
Route::post('/', [UrlController::class, 'store'])->name('url.store');
Route::get('/{alias}', [UrlController::class, 'redirect'])->name('url.redirect');
Kita memiliki route dengan method get dengan nama url.index yang berfungsi untuk menampilkan halaman utama, route dengan method post dengan nama url.store yang berfungsi untuk action form menambahkan short url ke database, dan route dengan method get dan parameter alias yang berfungsi untuk redirect ke url original saat url pendek diakses.
Memperbaiki Views
Langkah selanjutnya kita akan memperbaiki views yang sudah kita buat sebelumnya. Ada beberapa hal yang perlu kita perbaiki yaitu:
- Memperbaiki Form
- Menampilkan error untuk validasi
- Menampilkan hasil url yang diperpendek
Memperbaiki Form
Pada file resources/views/index.blade.php ubah form yang sebelumnya dibuat menjadi seperti ini:
<form action="{{ route('url.store') }}" method="post">
@csrf
<div class="mb-3">
<input
placeholder="Masukkan URL yang panjang ke sini"
type="url"
class="form-control"
name="url"
/>
</div>
<div class="text-end">
<button type="submit" class="btn btn-primary">Perpendek</button>
</div>
</form>
Apa yang sudah kita lakukan?
- Menambahkan action untuk form agar mengarah ke route
url.storeagar inputan dapat di proses. - Menambahkan csrf token menggunakan blade directive
@csrf. Ini adalah fitur keamanan untuk form agar tidak bisa melakukan submit diluar aplikasi. - Menambahkan nama inputan menjadi
url. Menyesuaikan nama input yang sebelumnya kita tulis saat validasi.
Menampilkan Error Untuk Validasi
Masih dalam file resources/views/index.blade.php, tambahkan kode berikut di atas form yang baru kita perbaiki.
@if ($errors->any())
<div class="alert alert-danger mb-3 pb-0">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
Apa yang sudah kita lakukan?
- Cek apakah ada error yang dihasilkan oleh validasi.
- Jika terdapat error lakukan perlulangan untuk menampilkan errro dari input.
Jika terjadi error kurang lebih akan terlihat seperi berikut:
Menampilkan Hasil URL yang Diperpendek
Perhatikan kembali file resources/views/index.blade.php, cari kode berikut ini:
<h6 class="mb-3">URL Pendek Kamu</h6>
<div class="card shadow">
<div class="card-body">
<input type="url" readonly class="form-control" />
</div>
</div>
Ubah kode tersebut sehingga menjadi seperti ini:
@if (session('result'))
<h6 class="mb-3">URL Pendek Kamu</h6>
<div class="card shadow">
<div class="card-body">
<input
value="{{ session('result') }}"
type="url"
readonly
class="form-control"
/>
</div>
</div>
@endif
Apa yang sudah kita lakukan?
- Menambahkan pengkondisian untuk menampikan hasil berdasarkan flash session dengan key
result. Ini adalah session yang sebelumnya kita kirim melalui method redirect di controller. - Menampilkan result dalam value inputan.
Hasil dari kode tersebut kurang lebih akan seperti ini:
Sekarang keseluruhan isi file resources/views/index.blade.php akan menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel URL Shorterner</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">Laravel URL Shorterner</a>
</div>
</nav>
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mx-auto">
<h3 class="text-center mb-4">Buat URL Versi Pendek</h3>
<div class="card shadow mb-5">
<div class="card-body">
<div>
@if ($errors->any())
<div class="alert alert-danger mb-3 pb-0">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('url.store') }}" method="post">
@csrf
<div class="mb-3">
<input
placeholder="Masukkan URL yang panjang ke sini"
type="url"
class="form-control"
name="url"
/>
</div>
<div class="text-end">
<button type="submit" class="btn btn-primary">
Perpendek
</button>
</div>
</form>
</div>
</div>
</div>
@if (session('result'))
<h6 class="mb-3">URL Pendek Kamu</h6>
<div class="card shadow">
<div class="card-body">
<input
value="{{ session('result') }}"
type="url"
readonly
class="form-control"
/>
</div>
</div>
@endif
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
Selesai
Saatnya kita coba aplikasi kita. Jangan lupa jalankan server dengan php artisan serve dan aktifkan database server kamu ya.
Berikut ini video demo aplikasi Laravel URL Shorterner kita.
*Source Code: https://github.com/ruangdeveloper/laravel-url-shorterner