Akademi Manajemen Informatika

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

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

Membikin Controller

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

Membikin Secara acak String

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

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

Setelah itu, kita Membikin 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 Membikin 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 Terdapat di dalam database kita.

READ  Pengertian, Jenis, Dampak, dan Metode Menghindarinya

Setelah itu, kita juga menggunakan helper url Demi 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 Yakni route yang nantinya akan kita buat mengarah ke halaman Istimewa.
Kita Bukan hanya melakukan redirect tetapi juga Membikin sebuah flash session baru dengan key result yang berisi url yang telah diperpendek. Data ini nantinya akan kita gunakan di dalam views Demi ditampilkan.

Method Redirect

Method berikutnya adalah method redirect dengan parameter $alias. Pada method ini, kita mencari url yang sebelumnya disimpan berdasarkan alias. Kalau Bukan 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 Demi menampilkan halaman Istimewa, route dengan method post dengan nama url.store yang berfungsi Demi action form menambahkan short url ke database, dan route dengan method get dan parameter alias yang berfungsi Demi redirect ke url original Ketika url pendek diakses.

READ  Kenali Web Server, 3 Jenis, Misalnya, hingga Langkah Kerja

Memperbaiki Views

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

  • Memperbaiki Form
  • Menampilkan error Demi 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 Demi form agar mengarah ke route url.store agar inputan dapat di proses.
  • Menambahkan csrf token menggunakan blade directive @csrf. Ini adalah fitur keamanan Demi form agar Bukan Dapat melakukan submit diluar aplikasi.
  • Menambahkan nama inputan menjadi url. Menyesuaikan nama input yang sebelumnya kita tulis Ketika validasi.

Menampilkan Error Demi Validasi

Tetap 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 Terdapat error yang dihasilkan oleh validasi.
  • Kalau terdapat error lakukan perlulangan Demi 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 Engkauh6>
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 Engkauh6>
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 Demi 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  Pengertian, Jenis, Fungsi & Tipsnya

Hasil dari kode tersebut kurang lebih akan seperti ini:

Fungsionalitas aplikasi, laravel URL shorterner

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 Engkauh6>
          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 Engkau ya.

Berikut ini video demo aplikasi Laravel URL Shorterner kita.

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