[go: up one dir, main page]
Scribd
Upload
46 views7 pages

Web Engineering II: National University of Modern Languages, Islamabad

The document provides instructions for a lab on using jQuery and AJAX for pagination on a PHP database, including creating basic web pages, loading data from "ajaxpagination.php" into the "content_container" div using jQuery's .load() method, and adding pagination links that update the page number parameter when clicked to load the appropriate data page. Students are tasked with following the tutorial and exploring additional jQuery methods to implement infinite scrolling by utilizing the .scroll() method.

Uploaded by

waleed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views7 pages

Web Engineering II: National University of Modern Languages, Islamabad

The document provides instructions for a lab on using jQuery and AJAX for pagination on a PHP database, including creating basic web pages, loading data from "ajaxpagination.php" into the "content_container" div using jQuery's .load() method, and adding pagination links that update the page number parameter when clicked to load the appropriate data page. Students are tasked with following the tutorial and exploring additional jQuery methods to implement infinite scrolling by utilizing the .scroll() method.

Uploaded by

waleed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab 02

Web Engineering II

NATIONAL UNIVERSITY OF MODERN LANGUAGES, ISLAMABAD


jQuery + Ajax
LAB 02
Engr. Huma Nadeem

Lab Objectives:
1. Introduce jQuery concepts
2. Introduce Ajax concepts
3. Apply pagination on PHP Database–

Software Required:
 vscode

jQuery

.load() function
jQuery load() Method
The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected
element.
Syntax
Syntax:
$(selector).load(URL,data,callback);

1. Create a basic web page


Index.php
index.php
<!DOCTYPE html>
<html>
<head>
<title>Jquery AJAX, PHP and MySQL </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script></scr
ipt>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div style="width:85%;">
<h2>Pagination with Jquery AJAX, MySQL and PHP  </h2>
</div>
</body>
</html>

Add the following In the body section


<div id="content_container"></div>
Add the following script to the body section
$(document).ready(function(){

$("#content_container").load("ajaxpagination.php?page=1");

});
Create file ajaxpagination.php
<?php 

include("databaseConnect.php");

?>
Create file databaseConnect

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "TaskManager";
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Connected successfully
?>
Ajaxpagination.php
$per_page = 20;

if(isset($_GET['page'])) {
$page=$_GET['page'];

}
$start = ($page-1)*$per_page;

$sql_query = "SELECT * FROM tasks ORDER BY taskID LIMIT $start,$per_page ";

$resultset = mysqli_query($conn, $sql_query);
Agaxpagination.php
Add following code to display data coming from database:
<table width="100%">
<thead>
<tr>
<th> Id</th>
<th>Task Name</th>
</tr>
</thead>
<?php
while($rows = mysqli_fetch_array($resultset)){ ?>
<tr bgcolor="#DDEBF5">
<td> <?php echo $rows['taskID']; ?></td>
<td><?php echo $rows['taskName']; ?></td>
</tr>
Index.php
Add this above content_container div
<div id="loading"><img src="images/loading.gif"/></div>
Include the following
In document.ready function script above content_container div
function hideLoading() {
$("#loading").fadeOut('slow');
};
Update .load function:
$("#content_container").load("ajaxpagination.php?page=1", hideLoading());
Load in browser
Ajaxpagination.php
Now we need to specify per page records:
For that, we’ll add the following before for extracting data on page:

$per_page = 20;
if(isset($_GET['page'])) {
    $page=$_GET['page'];
}
$start = ($page-1)*$per_page;

$sql_query = "SELECT * FROM tasks ORDER BY taskID LIMIT $start,$per_page ";
Load in browser
Pagination links
Now we add links to other pages. For this, open index.php
Add following logic in first php tag
$per_page = 20;
$sql = "SELECT * FROM tasks";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page)
Pagination class
Add a pagination class in content_container
<div class="pagination" style="padding:10px;">
<ul id="paginate">
<?php
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
Add style to index.php
<style>
.pagination{
float:left;
width:100%;
}
.botoom_link{
float:left;
width:100%;
}
.content{
float:left;
width:100%;}
ul {
list-style: none;
float:left;
margin:0;
padding: 0;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover{
color:#FF0084;
cursor: pointer;
}

</style>
Add styles in script
$("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
$("#content_container").load("ajaxpagination.php?page=1", hideLoading());
$("#paginate li").click(function(){
$("#paginate li").css({'border' : 'solid #dddddd 1px'}).css({'color' : '#0063DC'});
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'});
var page_num = this.id;
$("#content_container").load("ajaxpagination.php?page=" + page_num, hideLoading());

Lab Tasks:
1. Follow the above tutorial.
2. Explore jQuery methods from w3schools tutorial:
https://www.w3schools.com/jquERy/default.asp

3. Implement Infinite Scroll by utilizing jQuery .scroll method.

You might also like