طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت صفحه بندی infinite scroll با PHP و jQuery


ساخت صفحه بندی infinite scroll با PHP و jQuery

هر روز ما تغییرات انقلابی را با نوآوری در طراحی وب می بینیم. تغییراتی مثل infinite Scroll صفحه,  برای همیشه صفحه بندی را تغییر دادند.

امروزه سایت های زیادی از صفحه بندی infinite scroll (اسکرول بی نهایت) در UI  اصلی سایت استفاده می کنند. افکت infinite scroll صفحه بندی سنتی با شماره های صفحه و لینک های ناوبری, جایگزین شده است.

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

در این آموزش قصد داریم به شما نحوه ساخت صفحه بندی infinite scroll با PHP و jQuery را نشان بدیم.

 

در آموزش های قبلی, مثالی از صفحه بندی با ajax و php را دیدیم. همچنین یک مثال از صفحه بندی را بدون استفاده از ajax در بارگذاری محتوای داینامیک با jQuery را مشاهده کردیم.

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

 

من از PHP , MySQL و jQuery در این مثال برای این نوع لود محتوای داینامیک استفاده کردم.

با انجام رویداد اسکرول صفحه, درخواست ایجکس برای دسترسی به فایل PHP برای ارسال offset صفحه اجرا می شود. در فایل PHP , انحراف (offset) و دیگر پارامترها با متد درخواست مناسب دریافت می شود.

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

 

HTML دربرگیرنده برای لود داینامیک

کد HTML زیر جی کوئری را برای اجرا اسکریپت AJAX به منظور دریافت نتیجه دیتابیس بدون رفرش صفحه, اجرا می کند.

در این HTML , یک container برای لود داینامیک داده های دریافتی از طریق درخواست AJAX است.

در شروع, اولین بلاک داده ها از دیتابیس خواهده می شود. و سپس, درخواست ایجکس بعدی محتوای دریافتی را به پایین محتوای از قبل وجود داشته اضافه (append) می کند.

کد jQuery برای لود محتوا با اسکرول صفحه

اسکریپت AJAX به هندلر رویداد scroll روی سلکتور $(window) اضافه شده است.

این اسکریپت اولین بار زمانی که کاربر به پایین صفحه اسکرول می کند و پایین صفحه را لمس می کند, اجرا می شود.

با هر اسکرول, آفست صفحه آپدیت و در یکی فیلد مخفی قرار میگیرد. این آفست با درخواست AJAX به فایل PHP برای استفاده در کوئری SQL و دریافت داده ها از دیتابیس استفاده می شود.

در صورت موفقیت آمیز بودن درخواست AJAX , داده دریافتی به محتوای صفحه اضافه می شود.

در هنگام اجرا شدن درخواست AJAX , یک تصویر loader نیز به کاربر برای انتضار نمایش داده میشود .

خواندن آخرین پست ها توسط PHP

در اول این کد PHP اتصال به دیتابیس را ایجاد می کنیم. در اینجا پارامترهای ارسال شده توسط AJAX را دریافت و کویری limit را با آفست صفحه و limit آن به ازای هر صفحه را محاسبه می کنیم.

با کوئری محاسبه شده, داده ها را از دیتابیس mysql واکشی (fetch) می کنیم و نتیجه را به عنوان پاسخ ajax برگشت می دهیم.

اسکریپت دیتابیس

کد SQL زیر برای ساخت جداول دیتابیس و قرار دادن داده هایی که قرار است خوانده و بصورت داینامیک با رویداد اسکرول صفحه لود شود, استفاده شده است.

حتما بخوانید  بارگذاری بیشتر مطالب با php , jquery ajax

خروجی صفحه بندی infinite scroll با PHP و jQuery

اسکرین شات زیر لود داینامیک محتوا را نشان می دهد. آیکون loader نیز هنگام ارسال درخواست به فایل PHP نمایش داده می شود.

حتما بخوانید  تابع include و require در php

همینکه محتوا اضافه شد, این پیام مخفی میشود.

ساخت صفحه بندی infinite scroll با PHP و jQuery

امیدوارم از آموزش ساخت preloader با جی کوئری و CSS3 نهایت استفاده را برده باشید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

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

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

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

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

2 پاسخ به “ساخت صفحه بندی infinite scroll با PHP و jQuery”

  1. محمد باقر مقصودی گفت:

    من کد بالا رو اجرا کردم البته تو فایر فاکس f12 زدم صفحه رو کوچیک کردم ، برنامه وارد زیر برنامه windowOnScroll() اصلا تجرا نمیشه .
    میشه راهنماییم کنید البته

    0
    • حسن شفیعی گفت:

      سلام. اگر داخل بلاک تابع موردنظر رو ببینید متوجه این شرط خواهید شد if ($(window).scrollTop() == $(document).height() - $(window).height()){ و حتما باید توجه داشته باشید که ما اسکرول رو بر اساس ارتفاع سند و ارتفاع پنجره مرورگر محاسه می کنیم.

      موفق باشید.

      0

دیدگاهتان را بنویسید

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

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه