آموزش ساخت فرم تماس در لاراول با Livewire
امروز در این مطلب یک فرم تماس با لایووایر خواهیم ساخت ، برای مشاهده این آموزش شما باید شناخت مقدماتی از لاراول ، لایووایر و به طور کل کد نویسی html و css داشته باشید. توجه داشته باشید که این آموزش در بستر لاراول 11 و نسخه لایووایر 3 منتشر شده است. برای شروع آموزش شما باید لاراول و کامپوزر را در سیستم خود نصب داشته باشید ، در این مطلب سعی شده آموزش به صورت خلاصه توضیح داده شود ، درصورتی که نیاز به راهنمایی بیشتر و یا سوال خاصی در خصوص این مطلب دارید میتوانید در قسمت نظرات بپرسید.
ایجاد جدول پیام ها با استفاده از migration
برای دریافت و ذخیره پیام های کاربران در صفحه تماس با ما نیازی به احراز هویت کاربران نیست ، دریافت ورودی هایی مانند نام و نشان کاربر ، متن پیام و ایمیل ضروری است. برخی فیلد های این جدول مانند موضوع پیام و شماره همراه اختیاری می‌باشد. همچنین فیلد های زمان ارسال پیام ، وضعیت پیام و متن پاسخ پیام نیز لازم است.
جهت ساخت جدول پیام ها در دیتابیس میتوانید به دو روش اقدام کنید ، اولین راه استفاده از نرم افزار های مدیریت دیتابیس مانند phpMyAdmin ، Navicat و ... می‌باشد ، روش دوم که برنامه نویسان لاراول به طور معمول استفاده میکنند استفاده از میگریشن ها است. برای ساخت migration در لاراول از دستور زیر استفاده میکنیم:
php artisan make:migration create_messages_tableدر مرحله بعدی فیلدهای جدول پیام ها را به صورت زیر تعریف میکنیم.
محتویات فایل database/migrations/create_messages_table.php
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->string('nickname');
$table->string('email');
$table->text('message');
$table->string('subject')->nullable();
$table->string('mobile')->nullable();
$table->text('reply')->nullable();
$table->string('status')->default('pending');
$table->timestamps();
});سپس با استفاده از دستور زیر جدول پیام ها را ایجاد میکنیم.
php artisan migrateساخت مدل Message
پس از ساخت جدول پیام ها در دیتابیس باید مدلی برای این جدول ایجاد کنیم ، با استفاده از دستور زیر مدل Message را میسازیم:
php artisan make:model Messageمحتویات فایل app/Models/Message.php
protected $table = 'messages';
protected $guarded = [];ایجاد Route و View صفحه تماس با ما
برای نمایش اطلاعات تماس و فرم تماس وبسایت به یک روت و ویو برای صفحه تماس با ما نیاز داریم. ابتدا روت مورد نظر را میسازیم.
محتویات فایل routes/web.php
Route::get('/contact-us','PageController@contactUs')->name('page.contact_us');پس از ایجاد کردن روت موردنظر یک کنترلر برای نمایش ویو به نام PageController میسازیم.
محتویات فایل app/Http/Controllers/PageController.php
public function contactUs(){
return view('page.contact-us');
}پس از ساخت کنترلر باید داخل فولدر page یک بلید با نام contact-us بسازیم.
محتویات فایل resources/views/livewire/page/contact-us.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>
دیزاین صفحه تماس با ما یا نمایش اطلاعات تماس را میتوانید با استفاده از Css و Bootstrap انجام دهید که در این آموزش به آن نمی‌پردازیم. در ادامه این مطلب پس از نصب لایو وایر این صفحه را ویرایش خواهیم کرد.
پس از ساخت صفحه تماس با ما به اصل داستان یعنی نصب و راه اندازی لایووایر میرسیم.
نصب livewire با استفاده از composer
لایووایر را مانند همه پکیج های دیگر لاراول با استفاده از کامپوزر به پروژه اضافه میکنیم.
composer require livewire/livewireپس از نصب پکیج با استفاده از دستور زیر و انتخاب گزینه لایووایر فایل های پیشفرض لایووایر را به پروژه اضافه میکنیم.
php artisan vendor:publishدر قدم آخر تگ های لایووایر را به صفحه تماس با ما اضافه میکنیم. توجه داشته باشید که در پروژه های بزرگ که شامل صفحات دیگر هست این تگ ها را به فایل اصلی قالب اضافه میکنیم.
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
@livewireStyles
</head>
<body>
<h1>Contact Us</h1>
@livewireScripts
</body>
</html>
ساخت کامپوننت (view و class) لایووایر
برای ساخت کامپوننت لایو وایر از دستور زیر استفاده میکنیم ، انتخاب نام دلخواه است که ما در اینجا contact-form را انتخاب کردیم.
php artisan make:livewire contact-formپس از اجرای دستور بالا دو فایل app/Livewire/ContactForm.php و resources/views/livewire/contact-form.blade.php ساخته می‌شود. پس از ساخت کامپوننت باید تگ این کامپوننت را در صفحه تماس با ما قرار دهیم.
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
@livewireStyles
</head>
<body>
<h1>Contact Us</h1>
// some codes for contact us
// include livewire tag
@livewire('contact-form')
@livewireScripts
</body>
</html>
مدیریت ورودی ها ، اعتبار سنجی و ذخیره پیام
ابتدا سراغ فایل ContactForm.php میرویم ، طبق روال کار لایووایر ابتدا ورودی های کاربر را مشخص سپس اعتبار سنجی میکنیم ، پس از اعتبار سنجی ورودی ها اطلاعات را داخل جدول پیام ها ذخیره میکنیم ، پس از ذخیره پیام در دیتبابیس میتوانیم از طریق ایمیل و یا پیامک نتیجه ارسال پیام را به کاربر اطلاع دهیم. در آخرین مرحله در صورت موفقیت آمیز بودن عملیات با استفاده از Session در لاراول نتیجه را برای نمایش در ویو برمیگردانیم.
محتویات فایل app/Livewire/ContactForm.php
<?php
namespace App\Livewire;
use App\Models\Message;
use Illuminate\Support\Facades\Session;
use Livewire\Component;
class ContactForm extends Component
{
public $nickname = '';
public $email = '';
public $mobile = '';
public $subject = '';
public $message = '';
protected $rules = [
'nickname' => 'required|min:3|max:191',
'message' => 'required|min:3|max:5000',
'email' => 'required|max:191|email',
'mobile' => 'nullable|digits:11|regex:/(09)[0-9]{9}/',
'subject' => 'nullable|min:2|max:191',
];
public function render()
{
return view('livewire.contact-form');
}
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function sendMessage()
{
$validatedData = $this->validate();
// insert Message
$message = new Message();
$message->nickname = $this->nickname;
$message->message = nl2br($this->message);
$message->email = $this->email;
$message->mobile = $this->mobile;
$message->subject = $this->subject;
$message->status= 'pending';
$insert = $message->save();
if ($insert) {
// Send Notification to Admin & User by Email or SMS
// reset form and return result message
$this->reset();
Session::flash('success','A reply to your message will be sent to your email.');
}
else{
Session::flash('error','There was a problem sending the message.');
}
}
}
ایجاد فرم تماس با استفاده از HTML ، CSS و Bootstrap
پس از کدنویسی بخش بک اند حالا نوبت به ساخت فرم تماس و نمایش نتیجه درخواست کاربر میرسد. ظاهر فرم تماس کاملا سلیقه ای هست ، حتی میتوانید بسته به نیاز پروژه فیلد هایی رو کم یا زیاد کنید. مهمترین نکته در بخش فرانت لایووایر این است که تمامی تگ ها باید در یک div قرار بگیرد در غیر اینصورت شما خطا دریافت خواهید کرد.
محتویات فایل resources/views/livewire/contact-form.blade.php
<div>
<div wire:loading>
<div class="layout-loading active">
<img src="/images/logo.png" alt="In progress" class="d-block mx-auto mw-100" width="100">
<i class="fa fa-spin fa-spinner mt-3 fa-3x"></i>
</div>
</div>
@if(session()->has('success'))
<div class="alert alert-success font-en">
{{ session('success') }}
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-warning font-en">
{{ session('error') }}
</div>
@endif
<form wire:submit="sendMessage" method="post" class="form bg-dark-50 p-3 rounded-3 shadow-sm mt-3">
<div class="row">
<div class="col-12 col-lg-6">
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group pt-3">
<label for="nickname">Nickname</label>
<input type="text" wire:model="nickname" name="nickname" id="nickname" class="form-control" autocomplete="off">
@error('nickname') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group pt-3">
<label for="email">Email</label>
<input type="text" wire:model="email" name="email" id="email" class="form-control font-en" autocomplete="off">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group pt-3">
<label for="mobile">Mobile Number<small class="ps-1">(optional)</small></label>
<input type="text" wire:model="mobile" name="mobile" id="mobile" class="form-control" autocomplete="off">
@error('mobile') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group pt-3">
<label for="subject">Subject<small class="ps-1">(optional)</small></label>
<input type="text" wire:model="subject" name="subject" id="subject" class="form-control" autocomplete="off">
@error('subject') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="row">
<div class="col-12">
<div class="form-group pt-3">
<label for="message">Message</label>
<textarea wire:model="message" name="message" id="message" class="form-control" rows="5"></textarea>
@error('message') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group text-center mt-3">
<button type="submit" class="btn btn-success btn-sm">Send Message</button>
</div>
</div>
</div>
</form>
</div>
نکته: بخش اول کد های این صفحه یعنی wire:loading به صورت اختیاری می‌باشد که در هنگام اجرای عملیات به کاربر نمایش داده می‌شود ، شما میتوانید با استفاده از کلاس layout-loading در css استایل دهی کنید.
نکته: دیزاین فرم تماس کاملا اختیاری است ، در این بخش من از bootstrap و fontawesome استفاده کردم.
سخن پایانی
همانطور که در ابتدا گفته شد برای درک کد های لایووایر شما باید آشنایی مقدماتی با لاراول و لایووایر داشته باشید ، بخش ارسال ایمیل و پیامک به دلیل طولانی شدن مطلب آموزشی در این بخش آورده نشده ، حتما در سایر مطالب آموزشی به این بخش ها میپردازیم.
پس از ارسال پیام توسط کاربر باید یک بخش داخل پنل مدیریت طراحی کنید که پاسخ پیام را برای کاربر ارسال نمایید. با توجه به آموزش های بالا میتوانید یک کامپوننت لایووایر با نام ContactFormReply بسازید و عملیات ارسال پاسخ را تعریف کنید.
خوشحال میشم انتقاد و پیشنهادات خودتون رو در بخش نظرات این مطلب بیان کنید.
