پیکربندی فرم و دکمه برای ارسال درخواست‌های Post

در این آموزش از لیداوب، نحوه پیکربندی فرم و دکمه را برای ارسال درخواست‌های Post آموزش خواهیم داد. با ما همراه باشید.

در این برنامه، ما یک دکمه درون عنصر فرم قرار داده‌ایم تا کاربر بتواند بر روی آن کلیک کند و درخواست post خود را به یک نقطه خاص بر روی سرور ارسال کند. در این آموزش، قصد ما بر این است که نحوه تنظیم و پیکربندی سمت کاربر را که از یک عنصر فرم و دکمه html برای ارسال درخواست post استفاده می‌کند، آموزش دهیم. همچنین، مشخص می‌کنیم که متدها و مقادیر صفات اکشن‌های مربوط به فرم چگونه باید باشد. علاوه بر این، به جای استفاده از phpunit برای تست برنامه، تنها موارد خروجی از فرم‌ها را در خود مرورگر تست خواهیم کرد.

پیکربندی فرم و دکمه برای ارسال درخواست‌های Post

ویرایش پاسخ partial

ما می‌توانیم فایل reply.blade.php مربوط به partial view خود را که قبلاً ایجاد کرده‌ایم را باز کرده و کدهای html را به صورت زیر تغییر دهیم. این کد باید یک دکمه html مناسب به ما بدهد که بتوانیم از آن برای ارسال یک درخواست POST استفاده کنیم.

<div class="panel panel-default">

<div class="panel-body">
<div class="level">
<h5 class="flex">
<a href="#">{{$reply->owner->name}}</a> said {{ $reply->created_at->diffForHumans() }}
</h5>

<div>
<form method="POST" action="">
<button type="submit" class="btn btn-primary">Favorite</button>
</form>
</div>
</div>
</div>

<div class="panel-body">
{{ $reply->body }}
</div>
</div>

چگونه می‌توان صفت اکشن فرم را تعیین کرد؟

صفت متد از قبل تنظیم شده است که مشخص می‌کند، چه نوع عبارت http برای ارسال درخواست مورد استفاده قرار می‌گیرد. در اینجا، عبارت POST انتخاب شده است. ما باید صفت مربوط به اکشن را نیز پر کنیم. صف اکشن مشخص می‌کند که درخواست از کجا باید ارسال شود. در اینجا، ما می‌خواهیم درخواست خود را به مسیر تعریف شده زیر در فایل routes ارسال کنیم.

Route::post('/replies/{reply}/favorites', '[email protected]');

بنابراین، رشته موجود در صفت اکشن ما به صورت زیر خواهد بود:

<form method="POST" action="/replies/{{$reply->id}}/favorites">
<button type="submit" class="btn btn-primary">Favorite</button>
</form>

همواره یک فیلد CSRF نیز اضافه کنید

آخرین موردی که باید در پیکربندی دکمه و کد مربوط به فرم باید انجام شود، فراخوانی تابع کمکی csrf_field () است. این کار باعث می‌شود تا فرم در برابر حملات جعلی درخواست‌های Cross-Site محافظت شود. کد نهایی partial view ما به همراه تابع csrf_field به صورت زیر خواهد بود:

<div class="panel panel-default">

<div class="panel-body">
<div class="level">
<h5 class="flex">
<a href="#">{{$reply->owner->name}}</a> said {{ $reply->created_at->diffForHumans() }}
</h5>

<div>
<form method="POST" action="/replies/{{$reply->id}}/favorites">
{{csrf_field()}}
<button type="submit" class="btn btn-primary">Favorite</button>
</form>
</div>
</div>
</div>

<div class="panel-body">
{{ $reply->body }}
</div>
</div>

نحوه ریدایرکت به عقب

وقتی از طریق یک فرم html درخواستی را ارسال می‌کنیم، نباید عملیات صفحه تا اتمام ارسال درخواست متوقف شود. در این صورت، ما باید امکان تغییر مسیر یا ریدایرکت را برای کاربر فراهم کنیم. لاراول تابع کمکی back() را برای انجام این کار ارائه می‌کند. ما یک فراخوانی به این تابع کمکی در کنترلر خود به صورت زیر خواهیم داشت:

<?php

namespace App\Http\Controllers;

use App\Favorite;
use App\Reply;
use Illuminate\Http\Request;

class FavoritesController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}

public function store(Reply $reply)
{
$reply->favorite();

return back();
}
}

تست دکمه ارسال فرم

در مثال زیر، برای ایجاد یک مورد علاقه مندی و ارسال یک درخواست post باید روی دکمه submit کلیک کنیم. اجازه دهید تا این کار را امتحان کنیم.

در حال حاضر، کاربرانی که احراز هویت نشده‌اند، بلافاصله به صفحه ورود به سیستم هدایت می‌شوند. این عملکرد بسیار خوب است و اعلان می‌کند که middleware ما به درستی کار می‌کند. در واقع، ما نمی‌خواهیم کاربران مهمان سایت بتوانند، مورد علاقه مندی خود را ایجاد کنند. فقط کاربران دارای اعتبار و احراز هویت شده، می‌توانند این کار را انجام دهند. اکنون کاربر پس از ورود به سیستم، باید یکبار دیگر برای ارسال درخواست خود اقدام کند.

اکنون، کاربر می‌تواند درخواست post خود را به سرور ارسال کند و مورد علاقه مندی خود را ثبت کند. همچنین، پس از این کار، کاربر به همان صفحه‌ای که درخواست post از آن صادر شده است، هدایت می‌شود. می‌توانیم پایگاه داده خود را بررسی کنیم تا مطمئن شویم که مورد علاقه مندی جدید ثبت شده است یا خیر.

نحوه نمایش تعداد علاقه مندی‌ها به کاربران

کاربران سایت قطعاً باید بتوانند تعداد علاقه مندی‌هایی را که به هر پاسخ اختصاص داده شده است را مشاهده کنند. برای نمایش تعداد علاقه مندی‌ها به کاربران باید فایل ویوی خود را تغییر دهیم. در فایل reply.blade.php، می‌توانیم روابطی را که در مدل خود تعریف کرده‌ایم را فراخوانی کنیم تا تعداد موارد علاقه مندی را به کاربران نمایش دهیم. برای این کار، می‌توانیم بار دیگر از تابع کمکی str_plural() استفاده کنیم.

<form method="POST" action="/replies/{{$reply->id}}/favorites">
{{csrf_field()}}
<button type="submit" class="btn btn-primary">
{{ $reply->favorites()->count() }} {{ str_plural('Favorite', $reply->favorites()->count()) }}
</button>
</form>

تصویر
توجه کنید که کاربر تنها یک بار می‌تواند علاقه مندی خود درباره یک پاسخ خاص را ارسال کند.

تنظیم اینکه کاربر بتواند تنها یک مورد علاقه مندی را ارسال کند باید در پایگاه داده و در برنامه PHP انجام شود.

غیرفعال کردن یک دکمه در رابط کاربری از طریق Bootstrap

Bootstrap یک کلاس خوب را برای غیرفعال کردن یک دکمه در رابط کاربری ارائه می‌کند. می‌توان از این ویژگی در اینجا استفاده کرد. اگر کاربر قبلاً مورد علاقه مندی خود را برای یک پاسخ خاص ارسال کرده است، می‌توانیم کلاس .disabled را بر روی دکمه اعمال کنیم. به این ترتیب، کاربر حتی نمی‌تواند بر روی دکمه کلیک کند. برای انجام این کار، ما باید متد جدیدی را تنظیم کنیم که بتوانیم آن را فراخوانی کنیم و بررسی کنیم که یک پاسخ خاص دارای علاقه مندی از طرف کاربر است یا خیر. در اینجا نحوه عملکرد api نمایش داده شده است:

<form method="POST" action="/replies/{{$reply->id}}/favorites">
{{csrf_field()}}
<button type="submit" class="btn btn-primary {{ $reply->isFavorited() ? 'disabled' : '' }}">
{{ $reply->favorites()->count() }} {{ str_plural('Favorite', $reply->favorites()->count()) }}
</button>
</form>

حال، باید متد را به مدل Reply اضافه کنیم.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Reply extends Model
{
protected $guarded = [];

public function owner()
{
return $this->belongsTo(User::class, 'user_id');
}

public function favorites()
{
return $this->morphMany(Favorite::class, 'favorited');
}

public function favorite()
{
$attributes = ['user_id' => auth()->id()];
if (!$this->favorites()->where($attributes)->exists()) {
return $this->favorites()->create($attributes);
}
}

public function isFavorited()
{
return $this->favorites()->where('user_id', auth()->id())->exists();
}
}

اکنون، کاربر یک دکمه غیرفعال را برای آن پاسخ مشاهده خواهد کرد که نمی‌تواند بر روی آن کلیک کند ولی پاسخی که مورد پسند کاربر نبوده است، دارای یک دکمه‌ فعال است که در صورت تمایل، کاربر می‌تواند مورد علاقه مندی خود را برای آن ارسال کند.

در این مقاله آموزشی با نحوه پیکربندی و کدهای مربوط به ارسال یک درخواست به سرور آشنا شدیم که می‌توانید از این روش در اپلیکیشن‌های تحت وب خود بهره ببرید. با سایر مقالات کاربردی لیداوب در زمینه‌های مختلف طراحی سایت و برنامه نویسی همراه باشید.