آموزش لود اطلاعات با اسکرول ماوس از پایگاه داده با php و jquery
1 0

آموزش لود اطلاعات با اسکرول ماوس از پایگاه داده با php و jquery


آموزش لود اطلاعات با اسکرول ماوس از پایگاه داده با php و jquery

در این پست آموزش لود اطلاعات با اسکرول ماوس از پایگاه داده با استفاده از php و jquery را برایتان قرار داده ایم.

برای این کار در ابتدا یک جدول با فیلدهای Id ، TopicName ، TopicContent و Picture در mysql ایجاد می کنیم. ما در این آموزش برای جدول چهار فیلد در نظر گرفته ایم. ولی به هر تعداد فیلد یا برای هر جدولی که دارید می توانید از این آموزش استفاده کنید.

برای این کار نیاز به چند صفحه داریم که به ترتیب این صفحات را توضیح می دهیم

صفحه db.php : کدهای این صفحه به صورت زیر می باشند.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'autoload');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
mysqli_query($db, "set names 'utf8'");
if (mysqli_connect_errno()) {
    die("database connection failed: " .
        mysqli_connect_error() .
        "(" . mysqli_connect_errno() . ")"
    );
}
?>

در این صفحه همانطور که مشخص است می خواهیم با پایگاه داده ارتباط برقرار کنیم. برای این کار ثابت های DB_SERVER برای نام سرور ، DB_USERNAME برای نام کاربر مورد نظر در پایگاه داده ، DB_PASSWORD رمز عبور کاربر مورد نظر و DB_DATABASE نام پایگاه داده مورد نظر می باشد.

با استفاده از دستور mysqli_connect ارتباط با پایگاه داده برقرار می شود  با استفاده از این دستور mysqli_query($db, "set names 'utf8'"); پایگاه داده ما برای نمایش کاراکترهای فارسی هیچ مشکلی ندارد.

در دستور if هم چک می کنیم که ارتباط با پایگاه داده برقرار شده است یا نه ، اگر ارتباط به درستی برقرار نشده بود پیغام خطایی را چاپ می کنیم.

صفحه index.php : کدهای این صفحه به صورت زیر می باشند.

<?php
require('db.php');
$records_per_page = 2;
$query = "SELECT COUNT(TopicName) AS count FROM topic";
$result = mysqli_query($db, $query) or die(mysql_error());
$row = mysqli_fetch_array($result);
$count = $row['count'];
$total_pages = ceil($count / $records_per_page);
?>
<!DOCTYPE HTML>
<head>
    <link href='load-more.css' rel='stylesheet' type='text/css'/>
    <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="load-more.js" type="text/javascript"></script>
    <script type="text/javascript">
        var total_pages =    <?php echo $total_pages; ?>;
    </script>
</head>
<body>
<div id="container">
    <div id="contact-box">
        <ul id="messages-list">
        </ul>
    </div>
</div>
</body>
</html>

در این صفحه ابتدا فایل db.php را include کرده ام تا بتوانم از اتصال به پایگاه داده استفاده کنیم. در این صفحه ما یک کوئری را اجرا می کنیم. کار این کوئری به دست آوردن تعداد رکوردهای موجود در جدول مورد نظر می باشد. متغیر record_per_page را با یک مقداری مقدار دهی اولیه می کنیم. با توجه به مقدار این متغیر همان تعداد رکورد در ابتدا از پایگاه داده لود می شوند این مقدار باید عددی باشد که صفحه ما اسکرول عمودی بخورد. تا بتوانیم با استفاده از اسکرول بقییه اطلاعات را نیز لود نماییم.

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

صفحه get_data.php : کدهای این صفحه به صورت زیر می باشند.

<?php
require('db.php');
if (isset($_POST['p'])) {
    $page = intval($_POST['p']);
    $current_page = $page - 1;
    $records_per_page = 2; // تعداد رکوردهای مورد مشاهده در یک بازدید
    $start = $current_page * $records_per_page;
    $query = "SELECT * FROM topic LIMIT $start, $records_per_page";
    $result = mysqli_query($db, $query);
    $html = "";
    while ($row = mysqli_fetch_array($result)) {
        $html .= '<li>' . $row['TopicName'] . ': ' . $row['TopicContent'] .  '</li>'.'<img src='. $row['Picture'] .' />';
    }
    //returning data
    $data = array(
        'html' => $html
    );
    echo json_encode($data);
}
?>

در این صفحه ابتدا چک می کنیم که مقداری برای p از سمت صفحه load_more.js فرستاده شده است یا نه ، سپس مقدار آن را بدست می آوریم. در خط بعدی مقدار متغیر current_page را برابر مقدار page-1 قرار میدهیم سپس باز از متغیر record_per_page استفاده می کنیم . سپس یک متغیر دیگر به نام start در نظر می گیریم که مقدار آن حاصل ضرب متغیر current_page و record_per_page می باشد یعنی این مقداری است که اطلاعات از آن سطر جدول لود خواهند شد.

سپس کوئری مورد نظر را اجرا می کنیم که این کوئری نیز با استفاده از دستور LIMIT اطلاعات را از آن سطر از جدول بر می گرداند.سپس سطر به سطر اطلاعات را با استفاده از دستور while می خوانیم و هر سطر آن را در تگ li قرار داده و داخل متغیر html قرار می دهیم سپس کل اطلاعات را در یک آرایه قرار داده و به فرمت json ارسال می کنیم.

صفحه load_more.js : کدهای این صفحه به صورت زیر می باشند.

var current_page = 1;
var loading = false;
var oldscroll = 0;
$(document).ready(function () {

    $.ajax({
        'url': 'get_data.php',
        'type': 'post',
        'data': 'p=' + current_page,
        success: function (data) {
            var data = $.parseJSON(data);
            $(data.html).hide().appendTo('#messages-list').fadeIn(1000);
            current_page++;
        }
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > oldscroll) { 
            if (($(window).scrollTop() + $(window).height() >= $(document).height()  ) && (current_page <= total_pages)) {
                if (!loading) {
                    loading = true;
                    $('#messages-list').addClass('loading');
                    $.ajax({
                        'url': 'get_data.php',
                        'type': 'post',
                        'data': 'p=' + current_page,
                        success: function (data) {
                            var data = $.parseJSON(data);
                            $(data.html).hide().appendTo('#messages-list').fadeIn(1000);
                            current_page++;
                            $('#messages-list').removeClass('loading');
                            loading = false;
                        }
                    });
                }
            }
        }
    });

});

در این صفحه ابتدا متغیر current_page برابر یک می باشد. و متغیر loading برابر false می باشد و همچنین متغیر oldscroll نیز برابر صفر می باشد. حال با استفاده از jquery اطلاعات را از صفحه get_data.php می خوانیم و هر دفعه به متغیر current_page یکی اضافه می کنیم. و سپس قسمت اسکرول را بررسی می کنیم. ابتدا چک می کنیم که مقدار scrolltop صفحه بزرگتر از متغیر oldscroll باشد . سپس چک می کنیم که حاصل جمع مقدار scrollTop صفحه با ارتفاع صفحه بزرگتر یا مساوی ارتفاع صفحه باشد و همچنین current_page کمتر از total_pages باشد . و همچنن شرط بعدی اینکه متغیر loading را چک می کنیم که true باشد چون ما در ابتدا مقدار آن را false قرار داده ایم و حالت عکس آن را در نظر گرفته ایم شرط true می شود سپس دوباره مقدار آن را true قرار می دهیم که دوباره شرط true نشود سپس کلاسی نیز به قسمت نماش اطلاعات اضافه کرده ایم. 

سپس دوباره اطلاعات را بازیابی می کنیم که مقدار p برابر current_page می باشد و به صفحه get_data.php ارسال می شود. سپس دوباره اطلاعات را نمایش می دهیم و متغیر loading را برابر false قرار می دهیم.

صفحه load_more.css : کدهای این صفحه به صورت زیر می باشد.

body {
    direction: rtl;
    background: #dfdfdf;
    color: #666;
    font: 14px/24px sans-serif;
}

#container {
    width: 100%;
    margin: 0 auto;
}

.loading {
    background-image: url("gif-load.gif");
    background-position: center bottom;
    background-repeat: no-repeat !important;
    display: inline-block;
    padding-bottom: 18px !important;
}

#messages-list{
	list-style:none;
	padding:0px;
	margin-bottom:0px;
}
#contact-box{
	background:#fff;
}
#messages-list li  p{
	float: right;
	margin-right: 100px;
}

#messages-list li {
    border-bottom: 1px solid;
    font-size: 26px;
    line-height: 56px;
    list-style: none outside none;
    padding-right: 15px;
    padding-top: 5px;
}

در این صفحه نیز کدهایی را برای ظاهر صفحه استفاده کرده ایم که نیاز به توضیح خاصی ندارد.

دانلود

نویسنده حسین فتحی
گروه مطلب PHP
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۴ مهر ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۷
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
خرید VIP
امکان خرید از درگاه های بانکی و حساب مجازی

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

نظر / سوال

Captcha
نظرات کاربران

  • ستاره

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

    پاسخ
    • حسین فتحی

      با سلام 

      کاربر گرامی این کدو من تو موبایل هم تست کردم هیچ مشکلی نداره احتمالا شما یا جایی رو اشتباه نوشتید یا اینکه در وب سایت شما در بین کدهای css و Jquery شما کدی نوشتید که باعث میشه این کدها اجرا نشند.

      همچنین ترتیب لود کردن فایل های css و Jquery مهمه

      پاسخ
      • ستاره

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

        پاسخ
        • حسین فتحی

          با سلام

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

          پاسخ
          • ستاره

            بله اسکرول هم میخوره

            پاسخ
            • حسین فتحی

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

  • kamyar

    با سلام خواهشا این موضوع رو با زبان asp.net هم بزارید با تشکر

    پاسخ