Como sabéis, he publicado anteriormente por aquí muchos tutoriales sobre cómo extraer información de una base de datos MySQL en PHP. Este tutorial será un poco distinto, veremos cómo cargar, mediante un proceso automático, información de una base de datos en PHP. Implementaremos un script para cargar datos mediante el scroll de la página utilizando jQuery, Ajax y PHP. Esto es una función que los usuarios agradecerán mucho debido a la celeridad del asunto, ya que no tendrán que recargar la página una y otra vez para ver nueva información.
Una vez dicho esto, vamos a ver cómo implementar la carga de información al hacer scroll con jQuery, Ajax y PHP de una base de datos MySQL. Antes de empezar, vamos a ver la estructura de ficheros.
dbConfig.php getData.php index.php jquery.min.js loading.gif
Creación de la tabla de la base de datos
Vamos a crear una nueva tabla llamada posts en nuestra base de datos. A continuación tienes el script SQL para poder crear la tabla.
CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Se extraerán los datos de la tabla posts y se mostrarán en forma de listado. Por lo tanto, inserta algunos datos de prueba para ver esta dema funcionar de manera correcta.
Configuración de la base de datos (dbConfig.php)
dbConfig.php es un fichero de configuración. En este fichero, estableceremos la conexión con la base de datos y la seleccionaremos.
<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'programacionnet';
//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if ($db->connect_error) {
die("Unable to connect database: " . $db->connect_error);
}
?>
index.php
Este archivo contiene código PHP y algo de Javascript. En la carga de la página, mostraremos la información inicial de la tabla posts y demás datos que nos interesen.
Código Javascript
Cargamos la librería jQuery antes de escribir el código Javascript
<script src="jquery.min.js"></script>
En el scroll de la página, obtenemos el último ID de posts publicado y extraemos los siguientes mediante el archivo getData.php utilizando Ajax. Una vez que la petición Ajax ha tenido éxito, añadimos los correspondientes posts al listado del front office.
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getData.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});
Código PHP y HTML
<?php
//Include DB configuration file
include('dbConfig.php');
?>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Load Data on Page Scroll using jQuery Ajax PHP from MySQL Database</h1>
<div class="post-list" id="postList">
<?php
//get rows query
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT 10");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$postID = $row["id"];
?>
<div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row['title']; ?></h2></a></div>
<?php } ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
<img src="loading.gif"/>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
getData.php
Mediante el archivo getData.php, extraemos la información de los posts de la base de datos MySQL basándonos el ID de un post, y generamos el listado de post en HTML. El método success de Ajax obtiene este HTML y renderiza el contenido HTML en su elemento div correspondiente.
<?php
if(isset($_POST["id"]) && !empty($_POST["id"])){
//Include DB configuration file
include('dbConfig.php');
//Get last ID
$lastID = $_POST['id'];
//Limit on data display
$showLimit = 5;
//Get all rows except already displayed
$queryAll = $db->query("SELECT COUNT(*) as num_rows FROM posts WHERE id < ".$lastID." ORDER BY id DESC");
$rowAll = $queryAll->fetch_assoc();
$allNumRows = $rowAll['num_rows'];
//Get rows by limit except already displayed
$query = $db->query("SELECT * FROM posts WHERE id < ".$lastID." ORDER BY id DESC LIMIT ".$showLimit);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$postID = $row["id"]; ?>
<div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
<?php } ?>
<?php if($allNumRows > $showLimit){ ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
<img src="loading.gif"/>
</div>
<?php }else{ ?>
<div class="load-more" lastID="0">
That's All!
</div>
<?php }
}else{ ?>
<div class="load-more" lastID="0">
That's All!
</div>
<?php
}
}
?>
Código CSS
Vamos a personalizar un poco este script para que luzca correctamente.
.post-list{
margin-bottom:20px;
}
div.list-item {
border-left: 4px solid #7ad03a;
margin: 5px 15px 2px;
padding: 1px 12px;
background-color:#F1F1F1;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
height: 60px;
}
div.list-item p {
margin: .5em 0;
padding: 2px;
font-size: 13px;
line-height: 1.5;
}
.list-item a {
text-decoration: none;
padding-bottom: 2px;
color: #0074a2;
-webkit-transition-property: border,background,color;
transition-property: border,background,color;-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.list-item a:hover{text-decoration:underline;}
.load-more {
margin: 15px 25px;
cursor: pointer;
padding: 10px 0;
text-align: center;
font-weight:bold;
}
.list-item h2{font-size:25px; font-weight:bold;text-align: left;}
Fuente: codexworld.com