Fredric LesomarLaravel merupakan salah satu framework yang saat ini banyak digunakan oleh developer, untuk mengembangkan website maupun aplikasi yang berkaitan dengan program pengembahan PHP. Pada panduan kali ini, Rumahweb akan berbagi cara membuat form Laravel yang mudah untuk Anda ikuti.
Sebagai contoh, kami akan membuat contact form Laravel dengan Livewire. Terlebih dahulu, yuk kita kenal lebih dekat apa itu Livewire.
Baca juga artikel Cara Menambah Session Timeout Pada Laravel
Apa itu Livewire?
Livewire adalah framework full-stack untuk developer Laravel dalam membuat user interface (UI) yang dinamis, tanpa meninggalkan pengkodean Laravel pada umumnya seperti menampilkan data dari controller ke view.
Pada Livewire, Class PHP dijadikan sebagai controller di Laravel sehingga Anda tidak akan kesulitan dalam mengembangkannya.
Pada artikel ini, Kami akan memberikan panduan cara membuat contact form di Laravel menggunakan Livewire sebagai framework tambahan dengan sangat mudah.
Cara menginstal Liveware
Pastikan Proyek Laravel Anda telah siap dan silahkan dimulai dengan menjalankan perintah berikut:
composer require livewire/livewire
Secara otomatis, paket Livewire akan ditambahkan ke proyek Laravel Anda.
Menambahkan Komponen Livewire
Untuk membuat komponen Livewire baru, Anda dapat menjalankan perintah berikut:
php artisan make:livewire contact-formIni akan menambahkan komponen class dan view Livewire Anda
Setelah komponen yang diperlukan telah siap, Anda dapat menyertakan Livewire ke view blade utama.
Membuat Tampilan Blade
Silahkan Anda buat satu view dan gunakan template gratis TailwindCSS.
- Buat file contact.blade.php dan simpan difolder resources/views.
Isikan kode HTML berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css">
@livewireStyles
</head>
<body class="antialiased overflow-x-hidden">
@livewire('contact-form')
@livewireScripts
</body>
</html>Pada bagian form contact diatas, Anda akan melihat kode @livewire(‘contact-form’) yang menyertakan contact-form view Livewire yang telah dibuat.
2. Buat file view Livewire
Setelah Anda menyiapkan view Blade dengan memasukan gaya dan skrip Livewire dilangkah sebelumnya, sekarang Anda harus membuat tampilan utama form kontaknya.
Silahkan Anda menambahkan script dibawah pada file contact-form.blade.php difolder resources/views/livewire/:
<div>
<section class="relative py-6 bg-white bg-gray-200 min-w-screen animation-fade animation-delay">
<div class="container h-full max-w-5xl mx-auto overflow-hidden rounded-lg shadow">
@if ($success)
<div class="inline-flex w-full ml-3 overflow-hidden bg-white rounded-lg shadow-sm">
<div class="flex items-center justify-center w-12 bg-green-500">
</div>
<div class="px-3 py-2 text-left">
<span class="font-semibold text-green-500">Berhasil</span>
<p class="mb-1 text-sm leading-none text-gray-500">{{ $success }}</p>
</div>
</div>
@endif
<div class="h-full sm:flex">
<div class="flex items-center justify-center w-full p-10 bg-white">
<form wire:submit.prevent="contactFormSubmit" action="/contact" method="POST" class="w-full">
@csrf
<div class="pb-3">
@error('email')
<p class="text-red-500 mt-1">{{ $message }}</p>
@enderror
<input wire:model="email" class="w-full px-5 py-3 border border-gray-400 rounded-lg outline-none focus:shadow-outline" type="text" placeholder="Email Address" name="email" value="{{ old('email') }}" />
</div>
<div class="py-3">
@error('name')
<p class="text-red-500 mt-1">{{ $message }}</p>
@enderror
<input wire:model="name" class="w-full px-5 py-3 border border-gray-400 rounded-lg outline-none focus:shadow-outline" type="text" placeholder="Name" name="name" value="{{ old('name') }}" />
</div>
<div class="py-3">
@error('comment')
<p class="text-red-500 mt-1">{{ $message }}</p>
@enderror
<textarea wire:model="comment" row="4" class="w-full h-40 px-5 py-3 border border-gray-400 rounded-lg outline-none focus:shadow-outline" name="comment" placeholder="Your message here...">{{ old('comment') }}</textarea>
</div>
<div class="pt-3">
<button class="flex px-6 py-3 text-white bg-indigo-500 rounded-md hover:bg-indigo-600 hover:text-white focus:outline-none focus:shadow-outline focus:border-indigo-300" type="submit">
<span class="self-center float-left ml-3 text-base font-medium">Submit</span>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>Apabila file contact-form.blade.php belum ada, silahkan dibuat baru terlebih dahulu.
- Pada tag form pembuka, kami menentukan metode Livewire yang akan bertanggung jawab atas logika validasi formulir dan mengirimkan email:
form wire:submit.prevent=”contactFormSubmit” - Dengan menggunakan wire:model di kolom input, kami mengikat properti class secara langsung dengan tampilan Livewire yang telah dibuat.
- Kami menggunakan @error(‘name’)helper untuk menampilkan kesalahan validasi apa pun dari class Livewire.
Tahap terkahir dalam pembuatan view, silahkan Anda tambahkan file dengan nama email.blade.php dengan kode skrip berikut:
Contact from enquery from: {{ $name }}
<p> Name: {{ $name }} </p>
<p> Email: {{ $email }} </p>
<p> Message: {{ $comment }} </p>File PHP diatas disimpan pada resources/views/
Siapkan Alur Kerja Livewire
Dalam tahap ini, Kami akan membuat alur Livewire agar dapat digunakan dengan baik pada Laravel. Silahkan Anda edit file app/Http/Livewire/ContactForm.php dan tambahkan kode skrip berikut:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Mail;
class ContactForm extends Component
{
public $name;
public $email;
public $comment;
public $success;
protected $rules = [
'name' => 'required',
'email' => 'required|email',
'comment' => 'required|min:5',
];
public function contactFormSubmit()
{
$contact = $this->validate();
Mail::send('email',
array(
'name' => $this->name,
'email' => $this->email,
'comment' => $this->comment,
),
function($message){
$message->from('[email protected]');
$message->to('[email protected]', 'Fredric')->subject('Dari Contact Form Website');
}
);
$this->success = 'Terima kasih, telah menghubungi kami!';
$this->clearFields();
}
private function clearFields()
{
$this->name = '';
$this->email = '';
$this->comment = '';
}
public function render()
{
return view('livewire.contact-form');
}
}Noted: Pada kode skrip diatas, kami menggunakan akun email Gmail sebagai percobaan sehingga kami telah menginjinkan aplikasi contact form untuk menggunakan layanan Gmail dipengaturan akun Google.
- Kode skrip diatas kami menambahkan aturan validasi:
Penjelasan lebih lanjut tentang validasi Livewire, silahkan Anda lihat dokumentasi resminya disini.
- Fungsi contactFormSubmit untuk metrigger validasi jika pengiriman telah berhasil.
- Fungsi clearFieldsmetode untuk menghapus bidang formulir setelah pengiriman email telah selesai dilakukan.
Sampai disini alur kerja Livewire telah selesai dibuat dan siap untuk digunakan.
Tambahkan Route
Untuk mempermudah pengembalian contact.blade.php, Anda dapat membuat rute baru dengan kode skrip berikut:
Route::get('/', function () {
return view('contact');
});
Kode diatas dapat Anda tambahkan pada file web.php difolder routes/, sehingga akan ditampilkan seperti berikut:
Pada view contact (contact.blade.php) gambar atas akan dieksekusi dihalaman utama website karena Kami menempatkan contact pada rute / . Rute tersebut dapat Anda sesuaikan dengan lokasi yang diinginkan.
Konfigurasi SMTP
Pada tahap ini, Anda harus melakukan konfigurasi SMTP pada file .ENV agar dapat menjalankan fungsi email dengan baik.
Anda dapat menyesuaikan konfig sesuai tampilan gambar diatas.
Pengujian Contact Form Livewire
Silahkan Anda jalankan contact form yang telah dibuat melalui browser.
Anda dapat langsung klik tombol Submit untuk mengirim pesan.
Notifikasi Berhasil akan muncul ketika konfigurasi telah benar dan berikut tampilan disisi penerima email:
Demikian cara membuat contact form di Laravel menggunakan Livewire. Selamat mencoba!
