Validasi Protokol Internet (IPv6) Dengan Laravel 9

Laravel Jan 4, 2023

Sebelum masuk ke materinya alangkah baiknya kamu mengetahui terlebih dahulu gambaran besar dalam tutorial ini, Kamu akan mengetahui cara menambahkan validasi untuk form input IPv6 di aplikasi sederhana Laravel 9 yang akan kita buat nanti. mengintegrasikan validasi untuk IPv6, kita akan menggunakan metode default dari Laravel dan kita gabungkan dengan Bootstrap 5.

Pertama, kita akan mulai dengan instalasi aplikasi Laravel , menggenerate dan sedikit set up controller laravel terutama untuk validasi IPv6.

Kemudian lanjutkan untuk membuat routes untuk menangani permintaan, dan membuat form menggunakan Bootstrap dan kemudian menguji validasinya.

Langkah 1: Instal Aplikasi Laravel
Langkah 2: Menggenerate Controller
Langkah 3: Menyiapkan Controller
Langkah 4: Menentukan Routes
Langkah 5: Membuat Form dengan Bootstrap
Langkah 6: Melakukan pengujian

Instal Aplikasi Laravel

Untuk menginstal aplikasi Laravel baru, pastikan untuk mengonfigurasi Composer pada komputer Kamu.

Buka terminal, kemudian ketikan perintah yang diberikan dan jalankan perintah untuk mengunduh aplikasi.

composer create-project --prefer-dist laravel/laravel laravel-boom

Setelah aplikasi berhasil dibuat, arahkan CMD kita ke dalam direktori aplikasi yang tadi kita download.

cd laravel-boom

Menggenerate Controller

Sesuai dengan namanya controller bertugas menangani logika inti dari aplikasi Laravel kamu, dan disitulah tempat semua kode terkait fitur kamu tempatkan.

Kamu dapat membuatnya secara manual atau cukup memanggil perintah di bawah ini dengan menggunakan command prompt.

php artisan make:controller ProductController

Menyiapkan Controller

Masuk ke direktori app\Http\Controllers\ dan cari file dengan nama productController.php . kemudian ikuti script dibawah ini.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Blade;
class ProductController extends Controller
{
    public function ipv6form()
    {
        return view('index');
    }
    public function validateForm(Request $request)
    {
        $request->validate([
            'ip_address' => 'required|ipv6',
        ]);
        dd('Form submitted successfully!');
    }
}

Didalam Class ProductController memiliki dua fungsi yang bertugas untuk menangani View untuk form dan validasi yang diperlukan.

Menentukan Routes

Untuk membuat routes agar dapat menangani form dan validasi, maka kamu harus masuk ke dalam folder routes/ dan tambahkan script dibawah ini ke dalam file web.php.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/my-form', [ProductController::class, 'ipv6form']);
Route::post('/submit-form', [ProductController::class, 'validateForm'])->name(
    'validate.ip'
);

Membuat Tampilan Form dengan Bootstrap

Sekarang, Kamu harus masuk ke dalam folder resources/views/, dan di dalam folder ini Kamu telah membuat file index.blade.php dan memasukkan di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel IPv6 Validation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                @foreach ($errors->all() as $error)
                    {{ $error }} <br>
                @endforeach
            </div>
        @endif
        <form action="{{ route('validate.ip') }}" method="post">
            @csrf
            <div class="mb-3">
                <label>IP Address</label>
                <input type="text" class="form-control" name="ip_address">
            </div>
            <div>
                <button class="btn btn-danger">Send</button>
            </div>
        </form>
    </div>
</body>
</html>

Tambahkan link CSS bootstrap di dalam bagian head untuk memungkinkan pembuatan form menggunakan komponen UI form bootstrap.

Tentukan tag form, arhkan ke routes untuk membuat permintaan POST dan melakukan validasi untuk form IPv6 yang kita buat.