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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

14511 ۳۰ تیر ۹۲

دوستان سلام،در قسمت قبل طراحی HTML و CSS  این آموزش رو تموم کردیم،تو این قسمت میخوایم کد نویسی جاوا اسکریپت ( Jquery , AJAX ) رو انجام بدیم و افکت ها و دستورات لازم رو اضافه کنیم،خوب پس شروع میکنیم.

آموزش مرحله به مرحله

اگه کد های قسمت قبل رو آماده داشته باشین ما توی قسمت CSS خودمون برای دوتا تگ span که وظیفه نمایش تعداد like و dislike رو بر عهده دارن یک استایل تعریف کردیم،حالا به همون قسمت یعنی like span. باید این کد رو اضافه کنیم.

فعلا با این کد ما اینارو مخفی نگه می داریم تا بعدا با جی کوئری اونارو تو موقع مناسب نمایش بدیم.

خوب میریم سر وقت کد های جاوا اسکریپت،اول از همه تابع ready جی کوئری رو می نویسیم :

خوب حالا می خوایم با بردن ماوس روی دکمه های (تصاویر) سبز و قرمز رنگی که داریم اون تگ های span با یه افکت fade نمایش داده بشن و با رفتن ماوس دوباره محو بشن،برای این کار از متد hover جی کوئری استفاده میکنیم،خوب این کد برای دکمه سبز رنگ ما که دارای کلاس like-btn. هستش می نویسیم.

همون طور که می بینید متد hover دو تا تابع به عنوان پارامتر براش قرار دادیم،چرا دو تا؟برای اینکه تابع اول زمانی که موس روی شی قرار میگیره اجرا میشه و تابع دوم  هم وقتی موس از روی شی میره کنار اجرا میشه،توی تابع اول هم نوشتیم که شی ای با کلاس l_count (که همون span کنار دکمه سبز رنگه) به صورت fade و با زمان 500 میلی ثانیه نمایش داده بشه و توی تابع دوم هم گفتیم که همون span تابع بالایی با افکت fade و با زمان 500 میلی ثانبه محو بشه (fadeIn برای ظاهر شدن،fadeOut برای محو شدن).

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

خوب ما همین کد رو برای دقیقا برای دکمه قرمز رنگ هم می نویسیم فقط باید like-btn رو به dislike-btn و  کلاس span رو به d_count تغییر بدیم،یعنی اینطوری :

 

 

خوب حالا برای  ادامه کد لازم برای زمان کلیک کردن روی دکمه های سبز و قرمز رو  می نویسیم،این کد برای دکمه سبز رنگ:

 

توضیح این کد هم اینه برای این کار از متد on استفاده کردیم که دو تا پارامتر داره،اولی نام رویدادی هست که میخوایم اجرا بشه و دوم هم تابعی هست که با اون رویداد باید اجرا بشه (این جا یعنی با کلیک کردن روی like-btn کد هایی که توی تابع هست اجرا میشه).

حالا حتما میخواین بپرسین چرا خالیه؟ تاآخر بخونید به جوابش می رسید.

برای دکمه قرمز رنگ هم همین تابع رو می نویسیم فقط به جای like-btn باید dislike-btn رو قرار بدیم.

خوب تقریبا کد های لازم جی کوئری رو نوشتیم،چک کنید کد تون چیزی  شبیه به این باشه :

ای جکس

برای به کار بردن ای جکس ما باید شی XmlHttpRequest رو بسازیم و ازش استفاده بکنیم،تعریف این شی در همه مرورگر ها به جز IE نسخه های قدیمی یکسانه،برای همین خاطر ما از یک تابع برای تعریف و ایجاد  شی XmlHttpRequest استفاده می کنیم که شی ما رو طبق چیزی که مرورگر ساپورت میکنه برای ما میسازه،من این تابع رو از سایت رسمی خود مایکرسافت گرفتم و توی توضیحاتی که داده بود،این رو گفته بود که این تابع در مرورگر IE تا نسخه 7 رو هم به خوبی ساپورت میکنه (البته توی IE7 تستش نکردم)

خوب اینم از این،فعلا کد خاصی توی اون دو تا تابع که برای کلیک نوشتیم نمی نویسیم (البته خودتون فعلا مثلا با alert تستش کنید)،چرا؟! چون قراره قسمت بعد اونا رو با دستورات و توابع ای جکس پرکنیم.

دوستان خسته نباشید،جلسه بعد این کد هارو تکمیل می کنیم و قسمت PHP رو هم می نویسیم تا سیستم لایک ما آماده به کار بشه.

دانلود فایل پروژه (قسمت دوم)

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

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

  • ‏‏
    pedrambogy(۳۰ تیر ۱۳۹۲)

    تازه داره گرم میشه 😀 مرسی..
    داداش ی پیام خصوصی دادم بهت لطفا بخون 😉

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

      سلام پیامتو خوندم،من با اون سیستمی که شما گفتی اصلا کار نکردم،فکر نمیکنم بتونم در این باره کمکی بهت بکنم.

  • ‏‏

    استاد متد های یا… “Try” و “Catch” اینجا توی دستورات ای جکس مفهومش یعنی چی؟

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

      سلام،متد نیست در واقع بهش میگن بلاک try ..catch،برای مدیریت استثناها از این بلاک استفاده می کنن (همون مدیریت خطاها)،جزء syntax خود جاوا اسکریپته و این جا برای جلوگیری از بروز خطا و اطمینان از ایجاد شی مورد نظر به کار رفته.

  • ‏‏

    سلام آقای علی محمدی واقعا آموزش خیلی خوبی بود و منتظر ادامه اون هستیم.
    ولی یه سوالی من از شما دارم من یک قالب پرسش و پاسخ دارم که لایک کردن نوشته را در خود دارد ولی یک باگی داره که هر چه تلاش کردم نتونستم حلش کنم و این باگ این هست که وقتی روی لایک یک مطلب کلیک میکنم امتیاز مطالب دیگر هم تغییر می کنه من از شما کمک می خواهم تا بتوانم این مشکل را حل کنم اگه میشه با ایمیل من تماس بگیرید تا قالب را برای شما بفرستم و هزینه اون هم هرچه قدر شود پرداخت خواهم کرد
    ارادتمند باقری

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

      سلام دوست عزیز شما لطف دارید،چشم بفرستید یه نگاهی بهش بندازم.

      • ‏‏

        چگونه قالب را برای شما بفرستم ؟لطفا اگه زحمتی نیست به ایمیل من یک ایمیل دهید.

        • ‏‏

          rreza180@gmail.com

        • ‏‏

          سلام آقای علی محمدی چرا جواب ایمیل منو ندادید؟تو رو خدا جواب بدید که بدونم مشکل قالب حل شدنی هست ؟

  • ‏‏

    در ضمن یادم رفت بگم من چند قسمت قالب را می خواهم ویرایش کنم و به کمک کسی که واقع وارد باشه نیازمند هستم لطفا کمک کنید من تا الان تو انجمن ها وسایت های زیادی مطرح کردم ولی کسی کمک چندانی نکرد لطفا شما مرا نا امید نکنید
    منتظر تماس شما هستم

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

      انجمن های سون لرن بدون شک جزء برترین انجمن های موجود در وب ایرانه،مطرح کنید انشاالله جواب میگیرید.

  • ‏‏
    علی امینی(۳۰ تیر ۱۳۹۲)

    سلام آقا کیوان
    واقعا خیلی عالی پیش میری . منتظر ادامه هم هستیم.
    در پناه حق باشی
    یا علی

  • ‏‏

    اگر خواسته باشیم نتیجه ی کدهای سمت سرور که با php و asp می زنیم را ببینیم باید از چه نرم افزاری استفاده کنیم؟
    اصلاً همچین چیزی می شه؟

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

      خوب وقتی این کدها رو می نویسن،طبیعتا یه خروجی هم براش میذارن،وقتی روی سرور اجرا بشه خروجی میاد روی صفحه مروگر کاربر.

  • ‏‏
    برنامه نویس(۴ مرداد ۱۳۹۲)

    خیلی خوب بود.

  • ‏‏

    خب میشه این قسمتو برای asp.net هم بذارید که ما هم بتونیم ازشن استفاده کنیم ؟
    مرسی

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

      چون توی سایت بیس کار ما روی PHP هست،ما اکثر آموزش ها رو بر همین اساس ساختیم،تغییر کد از PHP به ASP زیاد مشکل نیست،شاید تو جلسه اخر این کارو انجام دادیم،البته این قول 100% نیست.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram