بارگذاری بیشتر مطالب با php , jquery ajax

  • آپدیت شده در تاریخ

بارگذاری بیشتر مطالب با php , jquery ajax از دیتابیس

یوتیوب , توییتر و ف-بوک از تکنیک بارگذاری و نمایش بیشتر استفاده می کنند. آنها به کاربران این امکان را می دهند که به صورت داینامیک مطالب را با کلیک بر روی یک دکمه به جای نمایش لینک های صفحه بندی , نشان دهند. تکنیک نمایش بیشتر خیلی جذاب است چونکه داده های بدون ریفرش مجدد صفحه نمایش داده می شوند . در این مقاله , یک همچنین تکنیک مشابهی برای بارگذاری بیشتر مطالب با php , jquery ajax از دیتابیس را پیاده سازی می کنیم. این آموزش قدم به قدم کل این فرایند را بسیار آسان و قابل درک می کند.

 

خب شروع کنیم .یک جدول tutorials داخل دیتابیس داریم . حالا ما تمام داده ها را بصورت لیست شده بدون استفاده از صفحه بندی بلکه با استفاده از تکنیک نمایش بیشتر بارگذاری می کنیم.

 

اول از همه جدول tutorials را داخل دیتابیس می سازیم.

فایل db_config.php

این فایل برای اتصال به دیتابیس و انتخاب جدول مورد نظر بکار می رود.

فایل index.php

کد جاواسکریپت

قبل شروع کد های جاواسکریپت حتما کتابخانه jquery را بارگذاری کنید. $(document).on(‘click’,’.show_more’,function(){}) به جای تابع live() استفاده می شود . چونکه تابع live() جی کویری منسوخ شده است . $(this).attr(‘id’) برای دریافت id اخرین tutorial استفاده شده است .

کد PHP

قبل از هرچیزی باید فایل پیکربندی دیتابیس (db_config.php) را فراخوانی کنیم . ما نتیجه را از جدول tutorials دریافت و به صورت نزولی در لیست نمایش می دهیم.

فایل ajax_more.php

این فایل شامل کدهای php مربوط به عملیات ajax است . ما id اخرین رکورد نمایش داده شده را دریافت و محتویات بعدی را توسط کویری where id > lst نمایش می دهیم.

کد css

کد css زیر در اسکریپت ما برای استایل دهی لیست و دکمه نمایش بیشتر (show more) استفاده شده است.

امیدوارم از این آموزش هم لذت برده باشید . موفق باشید .

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۰)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. ابوالفضل ۲۸ بهمن ۱۳۹۹

    “show_more” این کدم مشکل داره
    “show_more”

    پاسخ
  2. ابوالفضل ۲۸ بهمن ۱۳۹۹

    عالی عالیی
    فقط این قطعه کد مشکل داره[“title”]
    [‘title’]

    پاسخ
  3. حسین مافی ۱۱ آبان ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۱۵ آبان ۱۳۹۸

      سلام. باید مطالب رو داخل دیتابیس اضافه کنید.
      که میتونید بصورت دستی یا یک پنل مدیریت طراحی و از آنجا اضافه کنید.
      موفق باشید.

      پاسخ
  4. محمدرضا کیانی ۱۰ تیر ۱۳۹۸

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

    اگه می شه آموزش بدید که چطوری کاستم خودمون بنویسیم

    پاسخ
    1. حسن شفیعی ۱۰ تیر ۱۳۹۸

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

      پاسخ
      1. محمدرضا کیانی ۱۱ تیر ۱۳۹۸

        سلام ممنون بابت پاسخگوییتون

        من تا حالا درست کردم ولی اگه بخوای جی کوئری رو دستی تو وردپرس اضافه کنی بهم می ریزه کتابخانه های جاواسکریپ وردپرس و باید از تابع خود وردپرس پیاده کرد و من دارم ایندفع با لاراول این ویژگی رو پیاده می کنم و هرچیزی که دراین مورد بود را سرچ کردم چیزی دتگیرم نشد می تونید راهنمایی کنید؟

        پاسخ
      2. حسن شفیعی ۱۱ تیر ۱۳۹۸

        سلام.
        باید به اینصورت اضافه کنید : wp_enqueue_script( ‘bootjs’, get_template_directory_uri() . ‘/js/jquery.min.js’, array( ‘jquery’ ), ‘1.4.1’, true );
        در مورد لاراول هم برای پیاده سازی اینکار میتونید از کتابخانه های رایگان استفاده کنید که با کامپوزر به راحتی قابل نصب و استفاده است.

        پاسخ
  5. امیرحسین آقاجانی ۲۰ آذر ۱۳۹۶

    چطوری یه کاری کنم که با اسکرول این اتفاق بیوفته

    پاسخ
    1. حسن شفیعی ۲۰ آذر ۱۳۹۶

      سلام . از رویداد .scroll() در جی کویری استفاده کنید .
      https://www.w3schools.com/jquery/event_scroll.asp

      پاسخ
دوره های آموزشی