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



visibility  
mode_comment   ۱۹

دوستان سلام،در قسمت قبل طراحی 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 تغییر بدیم،یعنی اینطوری :

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

 

 

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

 

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

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

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

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

ای جکس

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

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

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

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

comment دیدگاه کاربران
pedrambogy

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

کیوان علی محمدی

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

mgh

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

کیوان علی محمدی

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

farvimgh

💡 خیلی ممنون

rreza

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

کیوان علی محمدی

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

reza

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

reza

rreza180@gmail.com

reza

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

rreza

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

کیوان علی محمدی

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

علی امینی

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

کیوان علی محمدی

ممنون آقای امینی.

mgh

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

کیوان علی محمدی

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

برنامه نویس

خیلی خوب بود.

elham.e

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

کیوان علی محمدی

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.