Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas

29 jun 2016

Paginado simple usando JavaScript

Paginar los resultados de una consulta ofrece mayor organización y mayor comodidad al momento de visualizar los datos, para hacernos una idea imaginemos una consulta que de como resultados mil registros en una pagina web, buscar información en esta lista seria realmente buscar una aguja en un pajar, ahora imaginemos la misma consulta pero dividida en paginas de 50 registros, buscar información acerca de un registro seria tarea mucho mas fácil, por esta razón en este tutorial haremos un paginado sencillo pero eficiente el cual podrás usar fácilmente en tu web

Bueno ¡ Manos a la obra !

Para este ejemplo utilizaremos una pequeña base de datos llamada contactos  en la cual inserte algunos registros para ver el funcionamiento del paginado.

A continuación el código de creación de la base de datos.

--------------------------------------------------------------------------------------------------------------
CREATE DATABASE IF NOT EXISTS `contactos`;

USE `contactos`;

CREATE TABLE IF NOT EXISTS `contacto` (
  `id` int(11) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `telefono` int(15) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `direccion` varchar(50) DEFAULT NULL
)

--------------------------------------------------------------------------------------------------------------------------

Para este proyecto he creado la siguiente estructura de carpetas



En la carpeta "core" se encuentran todos los archivos de PHP los cuales hacen lo siguiente:
el archivo conexión.php es el encargado de establecer la conexión a la base de datos como se muestra a continuación

-------------------------------------------------------------------------------------------------------------  
<?php
require_once('config.php');

class conexion{

    private $db;

    public function conexion(){
        $this->db = new mysqli(HOST, USER, PASS, DB);
    }

    public function getConexion(){
        
        if($this->db->connect_errno){
            echo "Error en la Conexion con la base de datos";
        }
        else{
            return $this->db;
        }
    }

    public function closeConexion(){
        $this->db->close();
    }

}
?>
--------------------------------------------------------------------

Esta clase hace uso de los valores establecidos en el archivo config.php en el cual se establecen los parámetros de conexión a la base de datos como se muestra a continuación

--------------------------------------------------------------------------------------------------------------------------
<?php
const HOST = "localhost";
const DB = "contactos";
const USER = "root";
const PASS = "";

?>
---------------------------------------------------------------------------------------------------------------

Siguiendo con los archivos de la carpeta core encontramos el archivo Consulta.php este archivo recibe varios parámetros, el parámetro acción que determina la tarea que realizara este script, las cuales son dos "contar" y "consultar".

 otro parámetro de este archivo es el parámetro cantidad, el cual determina la cantidad de registros a devolver y por ultimo el parámetro inicio el cual determina desde que registros se devolverán los resultados

 A continuación el archivo Consulta.php

---------------------------------------------------------------------------------------------------------------

 <?php

 require_once("conexion.php");

 $db = new conexion();

 $conex = $db->getConexion();

 if(!empty($_GET)){

 if(!empty($_GET['accion'])){

 switch($_GET['accion']){
case 'contar':

$sql = "SELECT COUNT(*) as total FROM contacto";
$result = $conex->query($sql);
$total = $result->fetch_assoc()['total'];
print $total;

 break;
case 'consultar':

 $sql = "SELECT  * FROM contacto LIMIT ".$_GET["inicio"].",".$_GET["cantidad"];

 $result = $conex->query($sql);
$response = "<table class='table table-hover table-striped'>";
$response = $response."<thead>
<tr>
<td>#</td>
<td>Nombre</td>
<td>Telefono</td>
<td>Email</td>
<td>Direccion</td>
</tr>
</thead>";
while($row = $result->fetch_assoc()){
$response = $response."<tr><td>".$row['id']."</td>"
."<td>".$row['nombre']."</td>"
."<td>".$row['telefono']."</td>"
."<td>".$row['email']."</td>"
."<td>".$row['direccion']."</td></tr>";

 }
$response = $response."</table>";
print $response;

 break;
}


}
}
?>

 ---------------------------------------------------------------------------------------------------------------

 La estructura de la pagina web es muy sencilla para los estilos de esta se utilizó el famoso bootstrap
---------------------------------------------------------------------------------------------------------------
Archivo index.html
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Paginacion </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Paginas</h1>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label>Resultados por pagina</label>
<select id="results4page" class="form-control">
<option value="5" selected>5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
<div class="col-md-4">
<br>
<label>Pagina Actual</label>
<span id="currentPage">1</span>
</div>
</div>
<div class="row">
<br>
<div class="col-md-8">
<div id="results"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<nav>
<ul class="pagination" id="pages">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li id="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>

</html>
--------------------------------------------------------------------

 en la carpeta "js" encontramos en archivo main.js este archivo es el encargado de  hacer las peticiones vía ajax al archivo Consulta.php.

 A continuación el archivo main.js

 ---------------------------------------------------------------------------------------------------------------
function CreateButtons(numPages) {

 var pages = document.querySelector("#pages");

 var text = "<li> <a href=" + "\"#\"" + "aria-label=\"Previous\" onclick=\"Previous()\"><span aria-hidden=" + "\"true\"" + ">&laquo;</span></a></li>";

 for (var i = 0 ; i<numPages ; i++){
text = text + "<li><a href=\"#\" onclick=\"getRecords("+parseInt(i+1) + ")\">"+parseInt(i+1) + "</a></li>";
}

 text = text + "<li> <a href=" + "\"#\"" + "aria-label=\"Next\" onclick=\"Next()\" ><span aria-hidden=" + "\"true\"" + ">&raquo;</span></a></li>";

 pages.innerHTML = text;
}

 function SetPages() {

 var numRegistros = 0;
var results4page = document.querySelector("#results4page").value;
var url = "/Paginator/core/Consulta.php?accion=contar";

 var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);

 peticion.addEventListener("load", function(e) {

 numRegistros = parseInt(e.target.responseText);
CreateButtons(Math.ceil(numRegistros/results4page));
numPages = Math.ceil(numRegistros/results4page);

 }, false);

 peticion.send(null);

 }

 function getRecords(pag) {

 var results = document.querySelector("#results4page").value;
var inicio  = results * pag - results;

 var url = "/Paginator/core/Consulta.php?accion=consultar&inicio="+inicio+"&cantidad="+results;

 var peticion = new XMLHttpRequest();
peticion.open("GET", url, true);

 peticion.addEventListener("load", function(e){

 var datos = e.target.responseText;
document.querySelector("#results").innerHTML = datos;
document.querySelector("#currentPage").innerHTML =  pag;
currentPage = pag;
console.log(currentPage);

 }, false);

 peticion.send(null);

 }

 function Next(){
console.log(currentPage);
if( currentPage+1 < numPages ){
currentPage = currentPage+1;

 getRecords(currentPage);
}

 }

 function Previous(){
console.log(currentPage);
if( (currentPage - 1) >= 1){
currentPage = currentPage - 1;

 getRecords(currentPage);
}

 }

 window.addEventListener("load", function () {

 currentPage = 1;
numPages = 0;

 SetPages();
document.querySelector("#results4page").addEventListener("change", function(){
SetPages();
getRecords(1);
}, false);

 getRecords(currentPage);
}, false);
---------------------------------------------------------------------------------------------------------------


Publicadas por a la/s No hay comentarios.:
Etiquetas: , , , , ,

5 ago 2015

Buscador en Tiempo Real Usando AJAX, PHP, MySQL

Buscador en Tiempo Real

En este ejemplo se realiza un buscador en tiempo real utilizando AJAX, PHP, y MySQL.



Bueno ¡ Manos a la Obra !


Para este ejemplo utilizaremos una pequeña base de datos llamada mydata en la cual tendremos una sola tabla llamada persona la cual  cuenta con dos campos Cod y Nombre.


Aqui el codigo de creacion de la base de datos:

-------------------------------------------------------------------------------------------------------------
CREATE DATABASE mydata;
USE mydata;
CREATE TABLE persona(cod int NOT NULL, nombre varchar(32) NOT NULL, primary key(cod));
-------------------------------------------------------------------------------------------------------------
Para realizar la conexión a la base de datos utilizaremos dos scripts PHP, un archivo llamado config.php, en este definiremos el nombre de la base de datos, host, usuario y contraseña, para acceder a la base de datos y el el archivo conexion.php usaremos estos valores para establecer la conexión.


 Archivo config.php:
-------------------------------------------------------------------------------------------------------------
config.php
-------------------------------------------------------------------------------------------------------------
 
<?php
const HOST = "localhost";
const DB = "mydata";
const USER = "root";
const PASS = "";
?>
-------------------------------------------------------------------------------------------------------------
Archivo conexion.php:
-------------------------------------------------------------------------------------------------------------
conexion.php
-------------------------------------------------------------------------------------------------------------
 
<?php

require_once('config.php');

class conexion{

 private $db;

 public function conexion(){
  $this->db = new mysqli(HOST, USER, PASS, DB);
 }

 public function getConexion(){

 if($this->db->connect_errno){
  echo "Error en la Conexion con la base de datos";
 }
 else{
  return $this->db;
 }
 }

 public function closeConexion(){
  $this->db->close();
 }
}
?>
-------------------------------------------------------------------------------------------------------------
Continuamos con nuestro archivo HTML el cual tiene una estructura muy sencilla. nuestra plantilla contendrá un campo el cual sera usado para la búsqueda de los registros y contara con un espacio donde mostrar estos resultados. 

 Archivo index.html:
-------------------------------------------------------------------------------------------------------------
index.html
-------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Buscador</title>
    <script src="main.js"></script>
</head>
<body>
   <h1>Buscador AJAX, PHP, MySQL</h1>
    <input type="search" placeholder="Buscar" id="buscar">
    <div id="datos"></div>
</body>

</html>
-------------------------------------------------------------------------------------------------------------
Ahora continuamos con el archivo main.js, este sera el encargado de comenzar la búsqueda y mostrar los resultados arrojados por ella, para este se agregara una escucha al evento 'input' del campo 'buscar', este evento es disparado cuando se escribe algún carácter en el campo, luego que el evento se acciona la función buscar captura el valor del campo en ese momento y lo envía vía POST al archivo buscar.php, archivo que se encarga de procesar la búsqueda en la base de datos

Bueno sin mas preámbulos aquí esta el archivo main.js:
-------------------------------------------------------------------------------------------------------------
main.js
-------------------------------------------------------------------------------------------------------------
 
function buscar(){
    var pattern = document.getElementById('buscar').value;
    var solicitud = new XMLHttpRequest();
    var data  = new FormData();
    var url = 'buscar.php';

    data.append("pattern", pattern);
    solicitud.open('POST',url, true);
    solicitud.send(data);

    solicitud.addEventListener('load', function(e){

        var cajadatos = document.getElementById('datos');
        cajadatos.innerHTML = e.target.responseText;
        
    }, false);
}

window.addEventListener('load', function(){
    document.getElementById('buscar').addEventListener('input', buscar, false);
}, false);
-------------------------------------------------------------------------------------------------------------

Por ultimo tenemos el archivo buscar.php, que como se comentaba anteriormente es el encargado de realizar la búsqueda en la base de datos usando como patrón de búsqueda el patrón recibido por POST, así si se recibió una letra, por ejemplo la letra A el resultado de la consulta serán todos los registros cuyo nombre comienza con esta letra.

Archivo buscar.php

-------------------------------------------------------------------------------------------------------------
buscar.php
-------------------------------------------------------------------------------------------------------------
<?php
require_once('conexion.php');



if(!empty($_POST)){


    $pattern = $_POST['pattern'];

    $db = new conexion();
    $conex = $db->getConexion();

  $sql = "SELECT * FROM persona WHERE nombre LIKE '".$pattern."%';";

    if($result = $conex->query($sql)){

        $numrows = $result->num_rows;

        if($numrows > 0){
            $registros = "<table>
                        <tr>
                            <th>Codigo&lt/th >
                            <th>Nombre&lt/th >
                        </tr>";

            while($row = $result->fetch_assoc()){

                $registros = $registros.
                    "<tr>".
                    "<td>".$row['cod']."&lt/td >".
                    "<td>".$row['nombre']."&lt/td >".
                    "</tr>";
            }

            $registros = $registros."&lt/table >";

            print $registros;

        }else{
            print "No se Encontraron Coincidencias.";
        }
    }else{
        print $conex->error;
    }
}  

?>
-------------------------------------------------------------------------------------------------------------

¿ Tienes 1 hora diaria disponible y quieres ganar dinero por Internet ? Registrese aquí
Publicadas por a la/s 16 comentarios:
Etiquetas: , , , , ,
Suscribirse a: Entradas (Atom)