Laravel + Bootstrap +Voyager
Formanı əvvəl istifadə etdiyimiz voyager.blog proyektimizdən istifadə edəcəyik. Diqqətinizə çatdırım ki, siz yeni ya öz proyektinizdə edəsi olsanız fikir verin ki, verilənlər bazasına bağlantını təmin etməliyik.
Model və Miqrasiyanı yaradaq.
Model və miqrasiyanı yaratmaq üçün, artisan əmrindən istifadə edəcəyik:
php artisan make:model Contact -m
Yuxarıda qeyd olunan əmr bizə avtomatik modeli və miqrasiyanı yaradacaq. Lakin biz yaradılan fayllarda yenə də dəyişiklik etməliyik. Gəlin birinci miqrasiya faylında düzəlişlər edək. Miqrasiya faylında növbəti kod olmalıdır.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateContactsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->string('phone');
$table->string('subject');
$table->text('message');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
Müraciət formasında name (ad), email (elektron ünvan), phone (əlaqə nömrəsi), subject (mövzu, başlıq) və message (mesaj) olacaq. Əldə etdiklərimizi verilənlər bazasına əlavə etmək üçün modelimizdə də fillable dəyişkəni yaradıb qeyd etməliyik. Nəticədə Modelimizdə kod belə olacaq:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
use HasFactory;
protected $fillable = ['name', 'email', 'phone', 'subject', 'message'];
}
Artıq miqrasiyanı işlədə bilərik. Miqrasiyanı işə salıb verilənlər bazasını yoxlayaq ki, “contacts” cədvəlimiz, daxilində qeyd etdiyimiz sütünlarla yaradıldı yoxsa yox. Miqrasiyanı işə salmaq üçün növbəti artisan əmrindən istifadə edək:
php artisan migrate
Miqrasiya xətasız baş tutdu. Cədvəlimiz müvafiq sütunlarla yaradıldı.
Model və miqrasiyalardan sonra, controller yaratmağın vaxtı gəldi.
Contact Form Controller yaradırıq.
Controller yaratmaq üçün artian əmri:
php artisan make:controller ContactUsFormController
ContactUsFormController daxilində 2 funksiyamız olacaq. Biri view üçündür, yəni /contact səhifəsinə keçid edək və müraciət formasını görək. İkinci funksiya isə formadan aldığımız məlumatları yoxlayıb, verilənlər bazasına əlavə etmək üçün istifadə edəcəyik. Son nəticə app/Http/Controller/ContactUsFormController.php daxili kodu belə olacaq:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Contact;
class ContactUsFormController extends Controller {
// Contact formasına yönləndirir.
public function createForm(Request $request) {
return view('contact');
}
public function ContactUsForm(Request $request) {
// Formadan gələn məlumatları yoxlayırıq
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'phone' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:10',
'subject'=>'required',
'message' => 'required'
]);
// Contact formdan məlumatları VB əlavə edirik
Contact::create($request->all());
// Geri cavab mesajı qaytarırıq.
return back()->with('success', 'Mesajınızı aldıq. Tez bir zamanda baxılacaq. Müraciətiniz üçün təşəkkür edirik.');
}
}
ContactUsForm funksiyası Request $request qəbul edir. Həmin dəyişkəndə formadan gələn bütün məlumatlar olacaq. Controllerdən sonra routları ayarlayaq.
Routlar.
routes/web.php faylına keçək və sorğular üçün marşrutları qeyd edək. Bir dənə GET metodlu forma olan səhifəyə keçmək üçün route olacaq:
Route::get('/contact', [ContactUsFormController::class, 'createForm']);
İkinci marşrut POST metodlu və əlbəttə məlumatları yoxlayıb verilənlər bazasına yükləmək üçün istifadə olunacaq.
Route::post('/contact', [ContactUsFormController::class, 'ContactUsForm'])->name('contact.store');
Birinci route bizi contact forması olan səhifəyə göndərəcək, ona görə həmin səhifəni hazırlayaq.
Contact form səhifəsi
Stilləri public/css/contactStyle.css faylında yerləşdirək və formanın səhifəsində istifadə edərik.
.container {
margin: 50px auto;
text-align: left;
font-family: sans-serif;
}
form {
border: 1px solid #1A33FF;
background: #ecf5fc;
padding: 40px 50px 45px;
}
.form-control:focus {
border-color: #000;
box-shadow: none;
}
label {
font-weight: 600;
}
.error {
color: red;
font-weight: 400;
display: block;
padding: 6px 0;
font-size: 14px;
}
.form-control.error {
border-color: red;
padding: .375rem .75rem;
}
Contact səhifəsini resources/views/contact.blade.php olaraq yaradırıq. Stilləri resources/views/layouts/master.blade.php faylında qoşuram.
<link rel="stylesheet" type="text/css" href="{{ asset('css/contactStyle.css') }}">
Formanı isə contact.blade.php faylında yaradırıq. Form üçün növbəti code istifadə oluna bilər:
<div class="container mt-5">
<!-- Success message -->
@if(Session::has('success'))
<div class="alert alert-success">
{{Session::get('success')}}
</div>
@endif
<form action="" method="post" action="{{ route('contact.store') }}">
@csrf
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control {{ $errors->has('name') ? 'error' : '' }}" name="name" id="name">
<!-- Error -->
@if ($errors->has('name'))
<div class="error">
{{ $errors->first('name') }}
</div>
@endif
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control {{ $errors->has('email') ? 'error' : '' }}" name="email" id="email">
@if ($errors->has('email'))
<div class="error">
{{ $errors->first('email') }}
</div>
@endif
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control {{ $errors->has('phone') ? 'error' : '' }}" name="phone" id="phone">
@if ($errors->has('phone'))
<div class="error">
{{ $errors->first('phone') }}
</div>
@endif
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control {{ $errors->has('subject') ? 'error' : '' }}" name="subject"
id="subject">
@if ($errors->has('subject'))
<div class="error">
{{ $errors->first('subject') }}
</div>
@endif
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control {{ $errors->has('message') ? 'error' : '' }}" name="message" id="message"
rows="4"></textarea>
@if ($errors->has('message'))
<div class="error">
{{ $errors->first('message') }}
</div>
@endif
</div>
<input type="submit" name="send" value="Submit" class="btn btn-dark btn-block">
</form>
</div>
Düşünürəm Contact Form yaratmağımız bununla yekunlaşır. Məqalənin tez hazırlanmasında köməyi olan resurs.
Qaldı test etməyimiz. Gəlin çalışaq qısa Scenarioları yazaq və Test edək.
TS1. İstifadəçi uğurla müraciət formasını doldurur göndərir. Uğurla göndərilmə mesajı gəlməlidir.
Verilənlər bazasında da müraciətimizi görə bilərik.
TS2. İstifadəçi adı(vəya digər field) qeyd etmədən müraciət formasını doldurur göndərir. Ad (field) yazılmadığından, müraciət qeydiyyata düşmür və xəta mesajını görürük.
TS3. İstifadəçi nömrə yerinə söz ya hərf yazır. Düzgün format olmadığını bildirən xəta mesajı görməliyik.
Bu formada müxtəlif ssenarilər yazıb test edə bilərsiniz. Mən isə çox vaxt itirməmək üçün qısa 3 dənə test ssenarisi yazdım və yoxladım.
Növbəti məqalədə email ilə göndərilməsini əlavə edərik.
Diqqətiniz üçün təşəkkür edirəm. Youtube kanalımıza da abunə olun.