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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

18637 ۲۸ تیر ۹۲

سلام،،توی خیلی از سایت های امروزی (اکثرا خبری) حتما شما هم دیدید که هر مطلب دارای دکمه های می پسندم و نمی پسندم (like  و dislike) هست، به احتمال زیاد هم همن دکمه ها رو توی سایت های معروفی مثل  Youtube و خصوصا FaceBook دیدید، معمولا این کار رو برای Promote کردن مطالب انجام میدن و فایده اش هم اینه که می تونه یک میزان و سنجش برای علاقه مندی به مطالب باشه و در ضمن هم یه معیار خوب برای مدیران در جهت انتخاب مطالب برای سایت هاشون هست،توی این مطلب قصد دارم آموزش ایجاد این سیستم  رو در سطح نسبتا پیشرفته ای برای شما قرار بدم که امیدوارم بتونید ازش به نحو احسن توی طراحی وب سایت های خودتون ازش استفاده کنید،به این خاطر میگم پیشرفته چون ما قراره از HTML و CSS و PHP و MYSQL و javascript به صورت JQuery و AJAX توی این آموزش استفاده کنیم.

شروع مرحله به مرحله

خوب برای شروع کار از HTML و CSS شروع میکنیم،اول از همه یه باکس که مثلا باکس اصلی مطلب ما هست ایجاد میکنیم.

خوب حالا این استایل رو براش تعریف میکنیم.

خوب حالا برای این باکسمون یه نوار عنوان تعریف میکنیم(بالاخره بدون نوار عنوان که نمیشه).

و این استایل رو برای نوار عنوان تعریف میکنیم.

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

P13-post-like-system

خوب حالا نوبت به ایجاد دکمه های like و dislike میرسه (این دکمه ها رو می تونید به راحتی توی فتوشاپ و مطابق سلیقه خودتون ایجاد کنید،اگرم بخواید می تونید از متن استفاده کنید) من قصد دارم این دکمه هارو گوشه بالا سمت راست و بیرون باکس مطلب قرار بدم،پس یه container برای این دکمه و کلا هر چی میخواد توش قرار بگیره ایجاد میکنم.

و این استایل رو براش انتخاب میکنم :

من اینجا با دادن position:absolute به این کلاس likes در واقع دست خودمو باز میذارم که هر کجا خواستم اونو قرار بدم پس شما هم میتونید مکان اونو به دلخواه تغییر بدید، لازمه این کار هم اینه که به باکس خودمون position:relative رو قبلا داده باشیم.

برای ادامه من دو تا تگ div با کلاس like اضافه میکنم که یکی از این ها دکمه می پسندم سبز رنگ و یکی دیگه دکمه نمی پسندم قرمز رنگ رو در خودش جای میده.

خوب اینجا براتون دو تا سوال پیش میاد یکی اینکه اون تگ span چیه؟ از این تگ span برای نمایش دادن تعداد لایک ها استفاده می کنیم،خوب اون تگ div که کلاس clearfix داره چیه؟ چون ما اینجا قرار از float استفاده کنیم اونو بین دوتا تگ div قرار داریم که استایل دکمه ها به هم نخوره.

حالا اینایی که اضافه کردیم بهش استایل میدیم.

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

P13-post-like-system-2

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

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

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

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

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

  • ‏‏
    پژمان(۲۸ تیر ۱۳۹۲)

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

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

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

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

    ممنون کیوان جان بسیار خوب و عالی بود…

  • ‏‏
    پدرام(۲۸ تیر ۱۳۹۲)

    مرسی داداش.. بنده هم میخوام کامل یاد بگیرم .. البته چیز زیادی از php نمیدونم ولی میخوام که یاد بگیرم :roll: ازتون خواهش میکنم تا حد پیشرفتش برین .. تا حدی که نمایش افرادی که لایک کردن و دیسلاک کردن و و این که هر کسی بتونه ی رای بده و… 😀

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

      انشاالله، سطح پیشرفته هم تا جایی که توی خود مطلب گفته بودم بیشتر برای استفاده از مجموعه مطالبی هست که توی سایت آموزش میدیم،یعنی در واقع هدف ما اینه کاربران سایت بتونن به طور واقعی از این آموزش ها استفاده بکنن،در این آموزش ما از Ajax و PHP و MYSQL و Jquery برای ثبت لایک و دیس لایک ها و IP کاربران (برای فقط یک بار لایک کردن) توی دیتابیس استفاده میکنیم.اگر برای توسعه اش هم سوالی داشتین بعدا همین جا مطرح کنید.

  • ‏‏

    سلام
    لطفا ادامه مطلب رو سریعتر به سایت اضافه کنید
    ممنون

  • ‏‏

    ❓ با سلام و خسته نباشید اگر کمی در مورد Ajax و سینتکس کار با هاش رو توضیح بدین ممنون می شم.

  • ‏‏

    کارتون درسته ! ممنونم

  • ‏‏

    سلام
    مرسی، خیلی عالیه .
    میشه یه توضیح در مورد AJAX بدید که چیه ؟؟
    فرق JQUERY و JAVASCRIPT چیه ؟؟؟من هنوز دقیقا متوجه نشدم .

    • ‏‏
      وحید صالحی(۷ شهریور ۱۳۹۲)

      ajax مخفف Asynchronous JavaScript and XML هستش بطور کلی ajax این امکان رو به ما میده که با فرستادن مقدار کمی از اطلاعات به سرور قسمتی از یک صفحه وب رو که مد نظر هست رو بدون ارسال کل صفحه به سرور آپدیت کنیم …
      2- جی کوئری کتابخانه ای از جاوا اسکریپ هستش در قسمت نظرات مربوط به قسمت مقدمه آموزش جی کوئری توضیح کامل دادم اون رو مطالعه کنید متوجه خواهید شد(به این لینک مراجعه کنید)

      • ‏‏

        مرسی. من آموزش های jquery رو دنبال می کنم ولی این توضیحات به چشمم نخورده بود وjquery برام مبهم بود . الان که توضیحاتتون رو خوندم کاملا متوجه شدم ، عالی بود .

  • ‏‏

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

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

      سلام ویرایشگر های زیادی هستن که میتونی استفاده کنی ,Aptana,Dream,PhpStorm,Eclipse,NetBeans,Zend Studio که من خودم از Net Beans استفاده میکنم.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram