Rumahweb Journal

Cara Membuat Contact Form Laravel Menggunakan Livewire

Laravel 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
Cara menginstal Liveware image 1

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-form

Ini akan menambahkan komponen class dan view Livewire Anda

Menambahkan Komponen Livewire image 1

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.

  1. 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('satrialesomar@gmail.com');
                $message->to('satrialesomar@gmail.com', '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:

Tambahkan Route image

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.

setting SMTP Laravel

Anda dapat menyesuaikan konfig sesuai tampilan gambar diatas.

Pengujian Contact Form Livewire

Silahkan Anda jalankan contact form yang telah dibuat melalui browser.

Test contact form di laravel dengan Livewire

Anda dapat langsung klik tombol Submit untuk mengirim pesan.

test koneksi berhasil pada contact form laravel yang telah dibuat

Notifikasi Berhasil akan muncul ketika konfigurasi telah benar dan berikut tampilan disisi penerima email:

Hasil pengiriman email dari contact form

Demikian cara membuat contact form di Laravel menggunakan Livewire. Selamat mencoba!

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 4 / 5. Vote count: 1

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Tinggalkan Komentar

Fredric Lesomar

I am an Ameteur Programer and Cybersecurity Enthusiast. Love Much, Mother Python Language, Machine Learning and You!