Load Data While Scrolling Page Down with jQuery Ajax, PHP and MySQL

loadMoreJqueryImage

Load more is usually seen on a website that has no pagination in the page. This functionality has a power to do infinite loading data from the database without refreshing the page.

With the combination of jQuery and Ajax, fetching result from a page to another is just a breeze.

Below are the step by step process that you should do.

  • Create a database in the MySQL and name it “subjectdb”.
  • Do the following query for creating a table in the database that you have created.
<div class="highlight">
<pre><code class="language-mysql">CREATE TABLE IF NOT EXISTS `subject` (
 `SUBJ_ID` int(11) NOT NULL AUTO_INCREMENT,
 `SUBJ_CODE` varchar(30) NOT NULL,
 `SUBJ_DESCRIPTION` varchar(255) NOT NULL,
 PRIMARY KEY (`SUBJ_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=88 ;</code></pre>
</div>
  • Insert the following records in the table that you have created.
<div class="highlight">
<pre><code class="language-mysql">INSERT INTO `subject` (`SUBJ_ID`, `SUBJ_CODE`, `SUBJ_DESCRIPTION`) VALUES
(1, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(2, 'English 0', 'English Plus '),
(3, 'English 1', 'Developmental Reading'),
(4, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(5, 'History 1', 'Philippine History and Culture'),
(6, 'Psychology 1a', 'General Psychology with Moral Regen &amp; Drug Abuse Ed.'),
(7, 'Chem. 1', 'General and Organic Chemistry'),
(8, 'Philosophy 1', 'Introduction to Philosophy'),
(9, 'PE 1', 'Physical Education'),
(10, 'NSTP 1', 'NSTP'),
(11, 'Theology 2', 'Bible and Salvation History '),
(12, 'English 1', 'Study and Thinking Skills '),
(13, 'English 02', 'Developmental Reading 2'),
(14, 'Math 2', 'Modern College Algebra '),
(15, 'Nat. Sci. 3', 'Physical Science'),
(16, 'Philo. 3', 'Logic'),
(17, 'Educ. 2', 'Child and Adolescent Development'),
(18, 'PE 2', 'Rhythmic Activities'),
(19, 'NSTP 2', 'NSTP'),
(20, 'Theology 3', 'Liturgy and Sacraments in General'),
(21, 'English 2 ', 'Writing in the Decipline'),
(22, 'English 3', 'Speech Communication'),
(23, 'English 4', 'Interactive English'),
(24, 'Filipino 1', 'Komunikasyon sa Akademikong Filipino'),
(25, 'Math 2', 'Plane and Spherical Trig.'),
(26, 'Philo. 5', 'Philosophy of being'),
(27, 'Philo. 2', 'General Ethics'),
(28, 'PE 3', 'Individual/ Dual Sports/ Games'),
(29, 'Theology 4', 'Commandments and Christian Morality '),
(30, 'English 15', 'Philippine Literature'),
(31, 'English 7a', 'Effective Writing'),
(32, 'Filipino 2', 'Pagbasa at Pagsulat Tungo sa Pananaliksik'),
(33, 'Nat. Sci. 4', 'Ecology'),
(34, 'Philo. 6', 'Philosophy of Nature'),
(35, 'Philo. 17', 'Special Ethics'),
(36, 'PE 4', 'Team Sports and Games'),
(37, 'Theology 5', 'Church History and Church Today'),
(38, 'Filipino 3', 'Masining na Pagpapahayag'),
(39, 'Nat. Sci. 2 ', 'Biological Science'),
(40, 'Philo. 4', 'Theodicy'),
(41, 'Philo. 13', 'History of Ancient Philosophy'),
(42, 'Philo. 8a', 'Philosophical Pyschology'),
(43, 'Educ. 104', 'Principles of Teaching 1'),
(44, 'Computer 1', 'Basic Computer'),
(45, 'Theology 6', 'Social Teaching of the Church'),
(46, 'English 5', 'Business English and Correspondence'),
(47, 'English 17', 'World Literature'),
(48, 'Philo. 14', 'History of Medieval Philosophy'),
(49, 'Philo. 7', 'Philosophy of Knowledge'),
(50, 'Philo. 19', 'Philosophy of Education'),
(51, 'Computer 2', 'Software Application'),
(52, 'Humanities 2', 'Art Education'),
(53, 'Pol. Sci. 4', 'Politics and Governance with PC'),
(54, 'Philo. 51', 'Philosophy of Religion'),
(55, 'Philo. 16', 'History of Modern Philosophy'),
(56, 'Philo. 31', 'Oriental Philosophy'),
(57, 'Economics 1', 'Principles of Economics with TAR'),
(58, 'Educ. 102', 'Facilitating Learning'),
(59, 'Soc. Sci. 19', 'Society and Culture'),
(60, 'Philo. 18 ', 'History of Contemporary Philosophy '),
(61, 'Philo. 9a', 'Social Phylosophy'),
(62, 'Philo. 20', 'Elements of Filipino Phylosophy'),
(63, 'Philo. 11', 'Social Phylosophy II: Values Identification &amp; Inculcation (lncl. Institution &amp; Ideologies)'),
(64, 'Rizal', 'Life, Works and Writings of Doctor Jose Rizal'),
(65, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(66, 'English 0', 'English Plus'),
(67, 'English 01 ', 'Developmental Reading'),
(68, 'History 1', 'Philipine History and Culture'),
(69, 'Psycho. 1a', 'General Psychology with Moral Regen &amp; Drug Abuse Ed.'),
(70, 'Chem. 1', 'General &amp; Inorganic Chemistry'),
(71, 'Economics 1', 'Principles of Economics with TAR'),
(72, 'PE 1', 'Physical Fitness'),
(73, 'NSTP 1', 'NSTP'),
(74, 'Theology 2', 'Bible &amp; Salvation History'),
(75, 'English 1', 'Study and Thinking Skills'),
(76, 'English 02', 'Developmental Reading 2'),
(77, 'Math 2', 'Modern College Algebra'),
(78, 'Soc. Sci. 19', 'Society and Culture with FP '),
(79, 'Nat. Sci. 1', 'Physical Science'),
(80, 'Educ. 2', 'Child &amp; Adolescent Development'),
(81, 'PE 2', 'Rhythmic Activities'),
(82, 'NSTP 2', 'NSTP'),
(83, 'Theology 3', 'Liturgy and Sacraments in General'),
(84, 'English 2', 'Writing in the Decipline'),
(85, 'English 3', 'Speech and Communication'),
(86, 'English 33a', 'Introduction to Language Study'),
(87, 'Filipino 1', 'Komunikasyon sa Akademikong Filipino');</code></pre>
</div>
  • Create a page for the configuration of MySQL Database and PHP script. Name it “config.php”.
<div class="highlight">
<pre><code class="language-php">&nbsp;&lt;?php
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'subjectdb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
 # code...
 $dbSelect = mysql_select_db($dbname);
 if (!$dbSelect) {
 echo "Problem in selecting database! Please contact administraator";
 die(mysql_error());
 }
} else {
 echo "Problem in database connection! Please contact administraator";
 die(mysql_error());
}
?&gt;</code></pre>
</div>
  • Create a design for the landing page and name it “index.php”.
<div class="highlight">
<pre>&lt;?php include 'config.php'; ?&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
 &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body style="background-color:#5b5959;"&gt;
 &lt;div class="container"&gt;
 &lt;div class="row"&gt;
 &lt;h1 style="color:#fff;"&gt;Page Scroll Using jQuery,Ajax And PHP&lt;/h1&gt;
 &lt;div id="displayRows"&gt;
 &lt;?php 

 $select=mysql_query("select * from subject limit 0,5");
 while($row=mysql_fetch_array($select)) {
 echo "&lt;div class='panel well'&gt;
 &lt;div class='panel-body'&gt;";
 echo "&lt;p class='rows'&gt; &lt;h3&gt;&lt;small&gt;".$row['SUBJ_ID']."&lt;/small&gt;.".$row['SUBJ_CODE']." &lt;small&gt;[".$row['SUBJ_DESCRIPTION']."]&lt;/small&gt;&lt;/h3&gt;&lt;/p&gt;";
 echo "&lt;/div&gt;
 &lt;/div&gt;";
 }
 ?&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;input id="numRows" type="hidden" value="5"&gt; 

&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
  • Create a script for fetching a result from the other page.
<div class="highlight">
<pre><code class="language-ajax">&lt;!-- jQuery extension --&gt;
&lt; script type = "text/javascript"
src = "jquery/jquery.min.js" &gt; &lt; /script&gt;
 &lt;script type="text/javascript
"&gt;
 $(window).scroll(function () {
 if($(document).height() &lt;= $(window).scrollTop() + $(window).height()) {
 
 var r = document.getElementById("
numRows
 ").value;
 
 $.ajax({ 
 type: 'post',
 url: 'loadresult.php',
 data: {
 rows:r
 },
 success: function (response) {
 var content = document.getElementById("
displayRows
 ");
 // display your result
 content.innerHTML = content.innerHTML+response;
 // We increase the value by 5 because we limit the results by 5
 document.getElementById("
numRows
 ").value = Number(r)+5;
 }
 });
 }
 });

&lt;/script&gt;</code></pre>
</div>
  • Create a page for loading data from the MySQL database. Name it “loadresult.php”.
<div class="highlight">
<pre><code class="language-php">&lt;?php
include 'config.php';
if (isset($_POST['rows'])) {
 
 $r = $_POST['rows'];
 $sqlQuery = mysql_query("select * from subject limit $r,10");
 while ($row = mysql_fetch_array($sqlQuery)) {
 echo "&lt;div class='panel well'&gt;
 &lt;div class='panel-body'&gt;";
 echo "&lt;p class='rows'&gt; &lt;h3&gt;&lt;small&gt;" . $row['SUBJ_ID'] . "&lt;/small&gt;." . $row['SUBJ_CODE'] . " &lt;small&gt;[" . $row['SUBJ_DESCRIPTION'] . "]&lt;/small&gt;&lt;/h3&gt;&lt;/p&gt;";
 echo "&lt;/div&gt;
 &lt;/div&gt;";
 }
 exit();
}

?&gt;</code></pre>
</div>

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

Email – [email protected]
Mobile No. – 09305235027 – tnt

Download Sourcecode

Frequently Asked Questions

How does this PHP project work?

Built with vanilla PHP (no framework) and MySQL backend. Standard structure: form HTML, PHP script handlers, MySQL via PDO or mysqli, sessions for auth, Bootstrap for responsive layout. Ready to extend for BSIT capstone scope.

What PHP and MySQL versions does this project require?

Most projects in this batch run on PHP 7.4 to PHP 8.2 with MySQL 5.7+ or MariaDB 10+. A few older projects need PHP 5.6 (deprecated, use XAMPP 7.x). To run: install XAMPP / WAMP / Laragon, extract project to htdocs, import the included .sql file via phpMyAdmin, edit the connection file (usually config.php or db_connect.php) with your DB credentials, browse to the project URL in your browser.

How do I set up the database for this PHP project?

Open phpMyAdmin (http://localhost/phpmyadmin/ on XAMPP), create a new empty database with the name specified in the project’s config.php. Click the Import tab, choose the included .sql file, click Go. Then edit config.php (or includes/connection.php) with: ‘localhost’, your MySQL username (usually ‘root’), your MySQL password (usually blank for XAMPP), and the database name.

Can I use this PHP project for a BSIT capstone or thesis?

Yes, but extend it. A bare CRUD app is too narrow for full capstone scope. Add: user roles via session checks, reports/dashboards (Chart.js + AJAX), PDF exports (TCPDF library), email notifications (PHPMailer), real domain extension (analytics, audit log, multi-branch support). Pair with Chapter 1-5 documentation matching your panel’s rubric.

Why am I getting ‘connection error’ or ‘undefined function mysqli_connect’?

Three common PHP issues: (1) Connection error: Apache + MySQL services not running in XAMPP control panel, OR database name in config.php does not match what you created in phpMyAdmin. (2) ‘undefined function mysqli_connect’: MySQL extension not enabled, in php.ini uncomment extension=mysqli (then restart Apache). (3) ‘No such file or directory’: MySQL socket path wrong, use 127.0.0.1 instead of localhost in the connection string.

Where can I find more PHP projects with source code?

Browse the PHP Projects hub for the full library (300+ vanilla PHP systems). For modern PHP MVC alternatives see Laravel Projects (74 systems) or CodeIgniter Projects (32 systems). For BSIT-focused capstone idea lists see 150 Best Capstone Project Ideas.

Related PHP Projects

Leave a Comment