سیستم لایک در لاراول با استفاده از JQuery
سلام
میخوام سیستم لایک رو در پروژم پیاده سازی کنم چندروزه درگیرشم و هنوز به نتیجه نرسیدم
مدل های مختلف سایت من میتونن لایک بشن پس رابطه polymorphic پیاده کردم براش
در مرحله اول آیکن لایک رو داخل blade خودم به این شکل داخل یک فرم قرار دادم:
<form id="addLike">
@csrf
<input type="hidden" name="likeable_id" id="likeable_id" value="{{ $article->id }}">
<input type="hidden" name="likeable_type" id="likeable_type" value="{{ get_class($article) }}">
<span id="countLike">4</span>
<button type="submit" class="border-transparent bg-transparent p-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart hover-border-like" viewBox="0 0 16 16">
<path d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595L8 6.236zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.55 7.55 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z"/>
</svg>
</button>
</form>داخل همین blade کدهای جی کوئری رو به این شکل قرار دادم : (تجربه خیلی کمی در jq دارم و میخوام با ajax اطلاعات رو ارسال کنم)
<script>
$(document).ready(function () {
$("#addLike").on('submit' , function (event) {
event.preventDefault();
let frm = new FormData(this);
frm.append('likeable_id' , $("#likeable_id").val());
frm.append('likeable_type' , $("#likeable_type").val());
$.ajax({
url: "{{ route('like') }}",
data: frm,
type: "post",
contentType :false,
processData : false,
success : function (data) {
console.log(data);
frm.append($("#countLike") , data.success);
}
})
});
});
</script>توی اینجا میخوام اطلاعاتم به روت موردنظر ارسال بشه اما اصلا به روت نمیره و صفحه رفرش میشه و url به این شکل تغییر میکنه :
/?_token=f5UxJrOSiN0ZCryCV8tdL4OJIWuggOXI4o8t5pQm&likeable_id=5&likeable_type=App%5CArticleداخل web.php هم روتم رو به این شکل پیاده سازی کردم :
Route::post('like' , 'HomeController@like')->name('like')->middleware('auth');و در نهایت کد داخل controller به این شکل هستش :
public function like()
{
auth()->user()->likes()->create(\request()->all());
return response()->json(['success' => count(Like::where(['likeable_id',\request()->input('likeable_id')],['likeable_type',\request()->input('likeable_type')]))]);
}خیلی نیاز به راهنمایی دارم 😔 خواهشا اگر کسی میتونه یه تایم بزاره و مشکلاتم رو بگه 🙏
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام این میشه قسمت ارسال فرم
$(document).ready(function () {
$("#addLike").on('submit' , function (event) {
event.preventDefault();
$.ajax({
url: "{{ route('like') }}",
type: "post",
data: $(this).serialize(),
success : function (data) {
$("#countLike").text(data.count);
}
});
});
});و قسمت کنترلر
public function like(Request $request)
{
$user = auth()->user();
$like = $user->likes()->where([
'likeable_id' => $request->get('likeable_id'),
'likeable_type' => $request->get('likeable_type')
])->first();
if ($like) {
$like->delete();
$status = 'unlike';
} else {
$user->likes()->create([
'likeable_id' => $request->get('likeable_id'),
'likeable_type' => $request->get('likeable_type')
]);
$status = 'liked';
}
$count = Like::where([
['likeable_id' => $request->get('likeable_id')],
['likeable_type', $request->get('likeable_type')]
])->count();
return response()->json([
'count' => $count,
'status' => $status,
]);
}تست کنید مشکلی بود پیام بدید
سلام وقتتون بخیر ، مشکل اینجاست که شما این مقادیر رو داخل فرم گذاشتید وقتی شما از طریق ajax فرم رو پست میکنید نیازی نیست داخل html از فرم استفاده کنید لطفا مقادیر رو از فرم در بیارید و امتحان کنید و یک مورد دیگه اینکه اگر شما واسه ی فرم متد در نظر نگیرید پیشفرض متد get رو قرار میده برای همینه که فرم شما رفرش میشه چون متد get به خودش میگیره
سلام این میشه قسمت ارسال فرم
$(document).ready(function () {
$("#addLike").on('submit' , function (event) {
event.preventDefault();
$.ajax({
url: "{{ route('like') }}",
type: "post",
data: $(this).serialize(),
success : function (data) {
$("#countLike").text(data.count);
}
});
});
});و قسمت کنترلر
public function like(Request $request)
{
$user = auth()->user();
$like = $user->likes()->where([
'likeable_id' => $request->get('likeable_id'),
'likeable_type' => $request->get('likeable_type')
])->first();
if ($like) {
$like->delete();
$status = 'unlike';
} else {
$user->likes()->create([
'likeable_id' => $request->get('likeable_id'),
'likeable_type' => $request->get('likeable_type')
]);
$status = 'liked';
}
$count = Like::where([
['likeable_id' => $request->get('likeable_id')],
['likeable_type', $request->get('likeable_type')]
])->count();
return response()->json([
'count' => $count,
'status' => $status,
]);
}تست کنید مشکلی بود پیام بدید
پراپرتی method رو داخل تگ form فراموش کردی
از اونجایی که Route رو از نوع POST تعریف کردی باید فرمت هم از نوع POST باشه
<form id="addLike"method="POST">@hosseinshirinegad98
@ali.bayat
خیلی خیلی سپاسگزارم بابت راهنمایی های خوبتون 🙏 همه چیزایی که گفتید رو اجرا کردم و درست شد.
فقط الان دوتا چالش دارم ک نمیدونم چطور حلش کنم.
اول اینکه : من چون چندین تا مقاله داخل صفحه وبسایتم دارم و داخل blade به فرم خودم id="addLike" رو دادم فقط مقاله اول من اوکی میشه و امکان لایک و دیس لایک کردن براش وجود داره و برای مقاله های بعدی ارور میده
حالا من باید داخل آی دی که میفرستم یک متغیر هم ارسال کنم مثل article->id . حالا نمیدونم اینو چطور ارسال کنم
یعنی در اصل من باید آی دی های متفاوت برای قسمت لایک مقاله هام بسازم
حالا این دو قسمت رو چطور تغییر بدم؟
<form id="addLike" method="post">$("#addLike").on('submit' , function (event) {و دوم اینکه : داخل این قسمت ما ما تعداد لایک ها رو دریافت کردیم
success : function (data) {
$("#countLike").text(data.count);
}اما نمیدونم چطور توی blade خودم داخل این قسمت نشونش بدم
<span id="countLike">4</span>قسمت js رواینطوری بنویسین
function like(articleId)
{
$("#addLike-" + articleId).on('submit' , function (event) {
event.preventDefault();
$.ajax({
url: "{{ route('like') }}",
type: "post",
data: $(this).serialize(),
success : function (data) {
$("#countLike-" + articleId ).text(data.count);
}
});
});
$("#addLike-" + articleId).submit();
}فرم اینطوری
<form id="addLike-{{$article->id}}" method="post" >
<span id="countLike-{{$article->id}}">4</span>دکمه داخل فرم
type="button" onclick="like({{ $article->id }})"تست کنید
@hosseinshirinegad98
اول تشکر ویژه دارم از تایمی که قرار میدید
من این کد رو تست کردم اوکی نشد اما اومدم یه کار دیگه انجام دادم که بجای id از class استفاده کردم و کاملا اوکی شد😀.
فقط چالش دومم همچنان پابرجاست و من نمیدونم تعداد لایک ها رو چطور داخل blade نشون بدم
ینی دقیقا داخل همون تگ spam.
با این روش میشه به نتیجه رسید
<span id="countLike-{{$article->id}}">4</span>
<form method="post" articleId="{{$article->id}}">
$("#countLike-" + $(this).attr('articleId') ).text(data.count);احتمالا این روش باید جواب بده
ممنون موفق باشین
@ali.bayat
داخل تب console ارور زیر رو میگیرم و دقیقا از کدهای بالا استفاده کردم مشکل از کجا میتونه باشه؟
POST http://localhost:8000/like 500 (Internal Server Error)اینجوری که مشخص نمیشه
داخل مرورگر کنسول رو باز کن و برو به تب Network
بعد یه چیزی رو لایک کن
و وقتی ارور بگیری میتونی روی اون گزینه کلیک کنی و یه متن خطا میگیری