• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش کامل ایجاد سیستم like مطالب با PHP و AJAX (قسمت پنجم)

11436 ۱۰ مرداد ۹۲

سلام دوستان،قول داده بودیم اون قسمت هایی که توی کد HTML و JS تغییر داده بودیم رو کاملا توضیح بدیم بعدشم یه نمونه نحوه استفاده توی سایت رو توضیح بدیم،البته قسمت بعدیشم داریم که کد هارو از PHP منتقل میکنیم به سمت ASP.NET (بالاخره یه عده ای از کاربران ما asp کار هستن)،خوب برای شروع اول از همه از قسمت کد های HTML شروع می کنیم.

مرحله به مرحله

ما توی قسمت مطلب (تگ div با کلاس post) که تگ های اصلی HTML رو داشتیم،به دکمه هامون یه خاصیت جدید اضافه کرده بودیم:

اگه نگاه کنید توی قسمت like و dislike ویژگی جدیدی به اسم data اضافه شده که مقدارش برا هر دوتا اینجا یک هست،خوب این برا چیه؟ما باید id هر مطلب رو برای بروز رسانی لایک های اون مطلب داشته باشیم پس ما اومدیم id هر مطلب رو توی یه خاصیت جدید به اسم data قرار دادیم،البته شما می تونید از یه اسم دیگه  استفاده کنید(شما باید توی حلقه مطالب خودتون حتما id رو دریافت و اینجا بذارید مثلا توی وردپرس با the_ID دریافت میشه).

خوب اکثر تغییرات ما توی  قسمت جاوا اسکریپت بوده.اول از همه قسمت کلیک برای دکمه سبز رنگ .

اینجا ما بعد نمایش اون عکس loading مقدار همون خاصیت data رو بوسیله متد attr دریافت کردیم و گذاشتیم توی متغییر id و بعدشم اونو برای تابع ای جکسی updatelike ارسال کردیم.

خوب برا قسمت کلیک رو دکمه قرمز هم همین کارو کردیم.

حالا کد رفتن موس روی دکمه سبز رنگ  رو بررسی میکنیم .

اول از همه دوبار همون مقدار data رو دریافت کردیم و بعدش این مقدار id رو همراه با خود همین شی که روش hover میشه رو فرستادیم تابع showlike بعدشم گفتیم همین شی که داره موس روش hover میشه عنصر بعدیش رو با افکت fade نمایش بده (ما توی قسمت قبل برای راحتی با کلاس کار می کردیم،اما خوب وقتی ما ماوس رو این کلاس ببریم تمامی عناصری که دارای این کلاس هستن همشون با هم fade میشن پس ما فقط همون شی که موس روش hover میشه رو میخوایم نشون بدیم نه همه رو).

برای hover دکمه قرمز هم همین حالته با این تفاوت که مقادیر رو فرستادم تابع showdislike.

خوب دوستان تابع درخواست ای جکس updatelike.

تقریبا همون تابع قبلیه فقط اون id رو که دریافت کرده بودیم اینجا به کوئری استرینگ مون اضافه کردیم و اونو میفرستیم فایل php.

برای تابع updatedislike هم دقیقا همین طوریه .

خوب حالا برای توابع showlike تغییرات رو بررسی میکنیم.

ما اون بالا خود شی و id رو فرستادیم به این تابع،خوب ما هم به عنوان el و id دریافتش کردیم،id رو برای همون کوئری استرینگ خودمون لازم داشتیم حالا el یا همون شی hover شده به چه دردی میخوره؟اگه نگاه کنید ما موقع برگشت اطلاعات توسط همین el عنصر بعدی رو شناسایی و اطلاعات رو توی اون قرار دادیم(شی ما همون دکمه سبز و قرمر هستن پس عنصر بعدی این ها همون تگ های span هستن که قراره تعداد لایک های جاری رو نشون بدن).

برای تابع showdislike هم دقیقا از همین روش استفاده کردیم.

خوب اینم از توضیحات برای تغییرات کدها،توی قسمت قبلی هم برای کد های php توضیح داده بودیم.

حالا میتونید یه باکس طراحی کنید و مثلا از این تابع برای نمایش 10 پستی که بیشترین لایک رو داشتن توی صفحه اول وب سایتتون استفاده کنید.

قسمت بعدی  که آخرین هم هست،کد هارو به ASP.NET تبدیل میکنیم.

موفق و پیروز باشید.

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام حالا چیکار کنیم که هر کاربر فقط یک رای دهد؟

    • ‏‏
      کیوان علی محمدی(۱۰ مرداد ۱۳۹۲)

      سلام توی قسمت قبلی ما تابع ثبت IP کاربر رو برای جلوگیری از رای مجدد نوشتیم.کدش هم توی فایل پروژه قسمت چهارم موجوده.

  • ‏‏
    محمد امین واحدی نیا(۱۰ مرداد ۱۳۹۲)

    آقا کیوان، فقط تحت وب می نویسی یا تحت سیستم عامل هم کار می کنی ؟
    اگه تحت سیستم عاملی از کدوم زبون استفاده می کنی من با سی شارپم

    • ‏‏
      کیوان علی محمدی(۱۰ مرداد ۱۳۹۲)

      سلام من Windows Application هم کار کردم،هم ASP و هم Win App رو با #C کار کردم ،البته سلیقه ایه که کدوم رو انتخاب کنی و من خودم خانواده C رو بیشتر دوست دارم،ولی خوب VB هم راحتی خودش رو داره مخصوصا تو بحث رویداد گرا بودن برنامه.

  • ‏‏
    وحید صالحی(۱۰ مرداد ۱۳۹۲)

    فوق العادس کیوان جان ممنون…

  • ‏‏

    خیلی خیلی ممنون واقعا عالی بود

  • ‏‏

    سلام.
    اگر بخواهیم کلا نتایج نشون داده بشن و از خاصیت hover استفاده نکنیم و همون موقع که روی دکمه لایک کلیک کردیم امتیاز جدید نشون داده بشه، تابع ()showlike رو کجا باید فراخوانی کنیم؟
    در ضمن من از table برای نمایش اطلاعات استفاده کردم و به این صورته ک دکمه like، نتیجه و dislike تو ستون های جدا هستند.
    خواهشا راهنمایی کنید

    • ‏‏
      کیوان علی محمدی(۲۰ شهریور ۱۳۹۲)

      سلام خوب قسمت های hover رو حذف کنید و اونو span هار رو از حالت display:none خارج کنید،بعدشم تابع showlike رو بعداز تابع updatelike توی تابع کلیک دکمه ها بنویسید.برای قسمت dislike هم همین کارو انجام بدید.

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram