›

membuat paginasi web dengan ajax

Ditulis oleh Selasa, 21 Juli 2015 Tambah Komentar Edit


pernah kah anda menujungi sebuah website yang memberikan beberapa content atau item di website tersebut dan ada halaman halaman yang tampil  secara perhalaman , sesuai dengan no halamanya ,digunakannya paginasi untuk supaya user tidak bosan untuk scroll terus
 contoh nya sperti web dibawah ini

disini saya akan memberi  tutorial cara membuat nya namun versi saya lebih simple ,dengan mengunakan  ajax  nah yups langsung saja


pertama lhu harus copas source code dibawah ini :


<?Php
$dbhost_name = "localhost";
$database = "nusakom";
$username = "root";
$password = "";

//////// Do not Edit below /////////
try {
$dbo = new PDO('mysql:host=localhost;dbname='.$database, $username, $password);
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}
?> 

simpan code diatas dengan naman config.php  ,usahakan gunakan  huruf kecil ya
setelah code diatas sudah selesai buat halaman baru di notepad anda
copy lagi code dibawah

<?Php
require "config.php"; // connection details
error_reporting(0);// With this no error reporting will be there
//////////
/////////////////////////////////////////////////////////////////////////////
$endrecord=$_GET['endrecord'];//
if(strlen($endrecord) > 0 AND (!is_numeric($endrecord))){
echo "Data Error";
exit;
}

$limit=10; // Number of records per page, you can change this value

$total_records = $dbo->query("select count(id) from student")->fetchColumn();

if($endrecord < $limit) {$endrecord = 0;}

switch($_GET['direction'])   // Let us know forward or backward button is pressed
{
case "fw":   // Forward button pressed
$start_record = $endrecord ;
break;

case "bk":    // Backword button pressed
$start_record = $endrecord - 2*$limit;
break;

default:
echo "Data Error";
exit;
break;
}
if($start_record < 0){$start_record=0;}
$endrecord =$start_record+$limit;


$sql="select id,name,class as myclass,mark from student limit $start_record,$limit";
$row=$dbo->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);


if(($endrecord) < $total_records ){$end="yes";}  // managing forward button
else{$end="no";}

if(($endrecord) > $limit ){$startrecord="yes";}    // managing reverse button
else{$startrecord="no";}

$main = array('data'=>$result,'value'=>array("endrecord"=>"$endrecord","limit"=>"$limit","end"=>"$end","startrecord"=>"$startrecord"));
echo json_encode($main);



////////////End of script /////////////////////////////////////////////////////////////////////////////////




?>

setlah code diatas simpan dengan nama php_paging-ajaxck.php
nah kalau sudah buat lagi satu file nya dengan script dibawah ini :

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of PHP Paging script using Ajax MySQL records with Json string</title>
<META NAME="DESCRIPTION" CONTENT="Ajax paging script Demo with Json string to display mysql records with limit">
<META NAME="KEYWORDS" CONTENT="Demo, Paging with Ajax, Ajax paging, script paging, Ajax script, record per page, breaking records, without page reload, Json string">
<script language="javascript" src="json2.js"></script>
<script type="text/javascript">
function ajaxFunction(val)
{

var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
function stateChanged()
    {
    if(httpxml.readyState==4)
      {
var myObject = JSON.parse(httpxml.responseText);

var str="<table><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>";
for(i=0;i<myObject.data.length;i++)
{
str = str + "<tr><td>" + myObject.data[i].id + " </td><td>" + myObject.data[i].name +  " </td><td>" + myObject.data[i].myclass + " </td><td>" + myObject.data[i].mark + "</td></tr>"
}
var endrecord=myObject.value.endrecord


myForm.end_record.value=endrecord;
if(myObject.value.end =="yes"){ document.getElementById("fwd").style.display='inline';
}else{document.getElementById("fwd").style.display='none';}


if(myObject.value.startrecord =="yes"){ document.getElementById("back").style.display='inline';
}else{document.getElementById("back").style.display='none';}


str = str + "</table>"
document.getElementById("txtHint").innerHTML=str;
    }
    }
/////// Posting data to backend script ////
var url="php_paging-ajaxck.php";
var myendrecord=myForm.end_record.value;
url=url+"?endrecord="+myendrecord;
url=url+"&direction="+val;

url=url+"&sid="+Math.random();
//alert(url);
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
/////// end of posting data to backend script /////
 document.getElementById("txtHint").innerHTML="Please Wait....";
}
</script>


</head>

<body onload="ajaxFunction('fw')";>
</head>

<body>

<form name="myForm" onsubmit="ajaxFunction(this.form); return false">
<input type=hidden name=end_record value=0>
<table width=300>
<tr><td width=150><input type=button id="back" value=Prev onClick="ajaxFunction('bk'); return false"></td><td width=150 align=right><input type=button value=Next id="fwd" onClick="ajaxFunction('fw');  return false"></td></tr></tr>
</form>
<tr><td colspan=2><div id="txtHint"><b>Records will be displayed here</b></div></td></tr>
</table>
<br><br><br><br><br><br>
Return to <a href=http://www.plus2net.com/php_tutorial/php_paging-ajax.php rel="nofollow">Source and tutorial on PHP Ajax paging script</a>
</body>
</html>

simpan code diatas dengan nama php_paging-ajax-demo.php

setelah selesai buat database nya dengan nama nusakom dan include kan code sql nya dibawah ini 
CREATE TABLE `student` (
  `id` int(2) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL default '',
  `class` varchar(10) NOT NULL default '',
  `mark` int(3) NOT NULL default '0',
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=42 DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;

--
-- Dumping data for table `student`
--

INSERT INTO `student` VALUES (1, 'John Deo', 'Four', 75);
INSERT INTO `student` VALUES (2, 'Max Ruin', 'Three', 85);
INSERT INTO `student` VALUES (3, 'Arnold', 'Three', 55);
INSERT INTO `student` VALUES (4, 'Krish Star', 'Four', 60);
INSERT INTO `student` VALUES (5, 'John Mike', 'Four', 60);
INSERT INTO `student` VALUES (6, 'Alex John', 'Four', 55);
INSERT INTO `student` VALUES (7, 'My John Rob', 'Fifth', 78);
INSERT INTO `student` VALUES (8, 'Asruid', 'Five', 85);
INSERT INTO `student` VALUES (9, 'Tes Qry', 'Six', 78);
INSERT INTO `student` VALUES (10, 'Big John', 'Four', 55);
INSERT INTO `student` VALUES (11, 'Ronald', 'Six', 89);
INSERT INTO `student` VALUES (12, 'Recky', 'Six', 94);
INSERT INTO `student` VALUES (13, 'Kty', 'Seven', 88);
INSERT INTO `student` VALUES (14, 'Bigy', 'Seven', 88);
INSERT INTO `student` VALUES (15, 'Tade Row', 'Four', 88);
INSERT INTO `student` VALUES (16, 'Gimmy', 'Four', 88);
INSERT INTO `student` VALUES (17, 'Tumyu', 'Six', 54);
INSERT INTO `student` VALUES (18, 'Honny', 'Five', 75);
INSERT INTO `student` VALUES (19, 'Tinny', 'Nine', 18);
INSERT INTO `student` VALUES (20, 'Jackly', 'Nine', 65);
INSERT INTO `student` VALUES (21, 'Babby John', 'Four', 69);
INSERT INTO `student` VALUES (22, 'Reggid', 'Seven', 55);
INSERT INTO `student` VALUES (23, 'Herod', 'Eight', 79);
INSERT INTO `student` VALUES (24, 'Tiddy Now', 'Seven', 78);
INSERT INTO `student` VALUES (25, 'Giff Tow', 'Seven', 88);
INSERT INTO `student` VALUES (26, 'Crelea', 'Seven', 79);
INSERT INTO `student` VALUES (27, 'Big Nose', 'Three', 81);
INSERT INTO `student` VALUES (28, 'Rojj Base', 'Seven', 86);
INSERT INTO `student` VALUES (29, 'Tess Played', 'Seven', 55);
INSERT INTO `student` VALUES (30, 'Reppy Red', 'Six', 79);
INSERT INTO `student` VALUES (31, 'Marry Toeey', 'Four', 88);
INSERT INTO `student` VALUES (32, 'Binn Rott', 'Seven', 90);
INSERT INTO `student` VALUES (33, 'Kenn Rein', 'Six', 96);
INSERT INTO `student` VALUES (34, 'Gain Toe', 'Seven', 69);
INSERT INTO `student` VALUES (35, 'Rows Noump', 'Six', 88);
INSERT INTO `student` VALUES (36, 'Some name1', 'Seven', 46);
INSERT INTO `student` VALUES (37, 'Some name2', 'Six', 54);
INSERT INTO `student` VALUES (38, 'some name3', 'Four', 57);
INSERT INTO `student` VALUES (39, 'Some name 4', 'Five', 80);
INSERT INTO `student` VALUES (40, 'Some name 5', 'Five', 49);
INSERT INTO `student` VALUES (41, 'Some Name 4', 'Five', 66);

nah kalau sudah jadi silakan buka file php_paging-ajax-demo.php nya

demo nya dibawah ini :
nah kalau ngak mau repot buatnya download aja dibawah ini


Belum ada Komentar untuk "membuat paginasi web dengan ajax"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel