#4 (Terakhir): Fungsionalitas Aplikasi - Laravel URL Shorterner

Sekarang kita akan fungsionalitas aplikasi URL shorterner kita agar dapat berfungsi sesuai dengan rencana awal Adalah memperpendek URL.

Membangun Controller

Buat aplikasi ini kita akan Membangun 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 Mempunyai 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 Membangun 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 Buat dilakukan. Ini akan memastikan data yang dikirim oleh user sesuai dengan aplikasi kita dan Kondusif Buat 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 Buat memvalidasi input bernama url agar Tak Nihil dan selalu berisi url yang aktif. Hasil dari validasi akan disimpan dalam bentuk array di variable $data.

Membangun Secara acak String

Kita akan menggunakan helper str dari laravel Buat Membangun Secara acak string. Import helper str di bagian atas class controller seperti berikut:

// kode import lainnya...
use Illuminate\Support\Str;

Setelah itu, kita Membangun Secara acak string dengan panjang 6 Kepribadian setelah proses validasi

public function store(Request $request)
{
    // kode lainnya

    $randomString = Str::Secara acak(6);
}

Menyimpan URL

Setelah validasi dan menyiapkan Secara acak 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 Membangun object $shortUrl dengan atribut alias yang di isi dengan Secara acak string, dan url yang di isi dengan url hasil validasi input user. Alias dan url adalah nama field tabel yang Eksis di dalam database kita.

READ: Metode Mengganti Tema WordPress Hasil Download dengan Mudah

Setelah itu, kita juga menggunakan helper url Buat membangun url lengkap dengan hostname dan protokolnya.
Variable $result kurang lebih akan berisi http://127.0.0.1/(Secara acak-string).

Terakhir kita melakukan redirect ke route dengan nama url.index Adalah route yang nantinya akan kita buat mengarah ke halaman Esensial.
Kita Tak hanya melakukan redirect tetapi juga Membangun sebuah flash session baru dengan key result yang berisi url yang telah diperpendek. Data ini nantinya akan kita gunakan di dalam views Buat ditampilkan.

Method Redirect

Method berikutnya adalah method redirect dengan parameter $alias. Pada method ini, kita mencari url yang sebelumnya disimpan berdasarkan alias. Kalau Tak ditemukan maka akan menampilkan halaman 404 not found. Kalau 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::Secara acak(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 Mempunyai route dengan method get dengan nama url.index yang berfungsi Buat menampilkan halaman Esensial, route dengan method post dengan nama url.store yang berfungsi Buat action form menambahkan short url ke database, dan route dengan method get dan parameter alias yang berfungsi Buat redirect ke url original Ketika url pendek diakses.

READ: Membangun Dokumentasi API Menggunakan Swagger di NestJS

Memperbaiki Views

Langkah selanjutnya kita akan memperbaiki views yang sudah kita buat sebelumnya. Eksis beberapa hal yang perlu kita perbaiki Adalah:

Memperbaiki Form
Menampilkan error Buat 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">Perpendekbutton>
  div>
form>

Apa yang sudah kita lakukan?

Menambahkan action Buat form agar mengarah ke route url.store agar inputan dapat di proses.
Menambahkan csrf token menggunakan blade directive @csrf. Ini adalah fitur keamanan Buat form agar Tak Dapat melakukan submit diluar aplikasi.
Menambahkan nama inputan menjadi url. Menyesuaikan nama input yang sebelumnya kita tulis Ketika validasi.

Menampilkan Error Buat Validasi

Lagi 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 Eksis error yang dihasilkan oleh validasi.
Kalau terdapat error lakukan perlulangan Buat menampilkan errro dari input.

Kalau terjadi error kurang lebih akan terlihat seperi berikut:

Fungsionalitas aplikasi, laravel URL shorterner

Menampilkan Hasil URL yang Diperpendek

Perhatikan kembali file resources/views/index.blade.php, cari kode berikut ini:

<h6 class="mb-3">URL Pendek Andah6>
<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 Andah6>
<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 Buat 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.

READ: Mengapa Usaha Kecil Membutuhkan Situs WordPress Kepada Berkembang Secara Online

Hasil dari kode tersebut kurang lebih akan seperti ini:

Sekarang keseluruhan isi file resources/views/index.blade.php akan menjadi seperti ini:


<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Laravel URL Shorternertitle>
    <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 Shorternera>
      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 Pendekh3>
          <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 Andah6>
          <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 Anda ya.

Berikut ini video demo aplikasi Laravel URL Shorterner kita.

*Source Code: https://github.com/ruangdeveloper/laravel-url-shorterner

Latest News

#4 (Terakhir): Fungsionalitas Aplikasi – Laravel URL Shorterner

Membangun Controller

Method Index

Method Store

Validasi

Membangun Secara acak String

Menyimpan URL

Method Redirect

Hasil akhir UrlController

Memperbaiki Routes

Memperbaiki Views

Memperbaiki Form

Menampilkan Error Buat Validasi

Menampilkan Hasil URL yang Diperpendek

Selesai