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;
}
در این صفحه نیز کدهایی را برای ظاهر صفحه استفاده کرده ایم که نیاز به توضیح خاصی ندارد.
این مطلب را به اشتراک بگذارید...
نظر / سوال