Tanpa JavaScript Ribet! Cara Membuat Contact Form Laravel dengan Livewire

Blog

Contents hide

1 Apa Itu Laravel Livewire?

2 Persiapan Awal

3 Cara Menjalankan Project

4 Kelebihan Menggunakan Livewire untuk Contact Form

5 Tips Pengembangan Lanjutan

6 Kesimpulan

Membuat contact form adalah salah satu kebutuhan dasar dalam pengembangan website. Jika Anda menggunakan Laravel, kini Anda bisa membuat form kontak yang dinamis tanpa harus menulis banyak kode JavaScript, yaitu dengan bantuan Laravel Livewire.

Livewire memungkinkan Anda membangun antarmuka interaktif menggunakan Blade dan PHP saja, tanpa perlu menulis JavaScript secara kompleks. Pada artikel ini, kita akan membahas langkah demi langkah cara membuat contact form Laravel menggunakan Livewire, mulai dari instalasi hingga penyimpanan data ke database.

Apa Itu Laravel Livewire?

Laravel Livewire adalah framework full-stack untuk Laravel yang mempermudah pembuatan komponen interaktif tanpa meninggalkan ekosistem Laravel.

Keunggulan Livewire:

Tidak perlu banyak JavaScript
Validasi real-time
Integrasi langsung dengan Blade
Cocok untuk form dinamis

Persiapan Awal

Pastikan Anda sudah memiliki:

PHP 8+
Composer
Laravel versi terbaru
Database (MySQL atau lainnya)

Jika belum memiliki project Laravel, buat terlebih dahulu:composer create-project laravel/laravel contact-form

Masuk ke folder project:cd contact-form

1. Install Laravel Livewire

Install Livewire menggunakan Composer:composer require livewire/livewire

Setelah instalasi selesai, tambahkan directive Livewire di file layout utama (biasanya resources/views/layouts/app.blade.php).

Tambahkan di dalam tag <head>:@livewireStyles

Tambahkan sebelum </body>:@livewireScripts

2. Buat Migration untuk Contact

Buat migration:php artisan make:migration create_contacts_table

Edit file migration:

Jalankan migration:php artisan migrate

3. Buat Model Contact

Edit model app/Models/Contact.php:

4. Buat Livewire Component

Buat komponen Livewire:php artisan make:livewire ContactForm

Perintah ini akan membuat:

app/Http/Livewire/ContactForm.php
resources/views/livewire/contact-form.blade.php

5. Edit Logic ContactForm.php

Buka file: app/Http/Livewire/ContactForm.php

Isi dengan kode berikut:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Contact;

class ContactForm extends Component
{
public $name, $email, $subject, $message;

protected $rules = [
‘name’ => ‘required|min:3’,
’email’ => ‘required|email’,
‘subject’ => ‘required|min:5’,
‘message’ => ‘required|min:10’,
];

public function submit()
{
$this->validate();

Contact::create([
‘name’ => $this->name,
’email’ => $this->email,
‘subject’ => $this->subject,
‘message’ => $this->message,
]);

session()->flash(‘success’, ‘Pesan berhasil dikirim!’);

$this->reset();
}

public function render()
{
return view(‘livewire.contact-form’);
}
}

6. Buat Tampilan Form

Buka file: resources/views/livewire/contact-form.blade.php

Isi dengan kode berikut:

<div>

@if (session()->has('success'))

<div style="color: green;">

{{ session('success') }}

</div>

@endif

<form wire:submit.prevent=”submit”>
<div>
<label>Nama</label>
<input type=”text” wire:model=”name”>
@error(‘name’) <span>{{ $message }}</span> @enderror
</div>

<div>
<label>Email</label>
<input type=”email” wire:model=”email”>
@error(’email’) <span>{{ $message }}</span> @enderror
</div>

<div>
<label>Subjek</label>
<input type=”text” wire:model=”subject”>
@error(‘subject’) <span>{{ $message }}</span> @enderror
</div>

<div>
<label>Pesan</label>
<textarea wire:model=”message”></textarea>
@error(‘message’) <span>{{ $message }}</span> @enderror
</div>

<button type=”submit”>Kirim</button>
</form>
</div>

7. Tampilkan Contact Form di Halaman

Buka file route routes/web.php:Route::get('/contact', function () { return view('contact'); });

Buat file: resources/views/contact.blade.php

Isi dengan: @extends('layouts.app')

@section(‘content’)
<h1>Contact Us</h1>
@livewire(‘contact-form’)
@endsection

Cara Menjalankan Project

Jalankan server Laravel:php artisan serve

Buka browser: http://127.0.0.1:8000/contact

Sekarang contact form sudah aktif dan dapat menyimpan data ke database tanpa JavaScript tambahan.

Kelebihan Menggunakan Livewire untuk Contact Form

Tidak perlu AJAX manual
Validasi langsung tanpa reload halaman
Struktur kode tetap rapi
Mudah dikembangkan
Terintegrasi penuh dengan Laravel

Tips Pengembangan Lanjutan

Anda bisa menambahkan:

Notifikasi email otomatis saat form dikirim
Proteksi spam dengan Google reCAPTCHA
Styling menggunakan Tailwind atau Bootstrap
SweetAlert untuk notifikasi lebih menarik
Rate limiting untuk keamanan

Kesimpulan

Membuat contact form Laravel menggunakan Livewire adalah solusi modern dan efisien untuk membangun form interaktif tanpa harus menulis JavaScript secara kompleks. Dengan Livewire, Anda dapat menangani validasi, penyimpanan data, dan interaksi pengguna langsung menggunakan PHP dan Blade.

Metode ini sangat cocok untuk developer Laravel yang ingin membangun aplikasi web dinamis dengan kode yang tetap bersih dan mudah dipelihara.

5/5 - (1 vote)

Tanpa JavaScript Ribet! Cara Membuat Contact Form Laravel dengan Livewire