En este tutorial trataremos de crear una función de búsqueda basada en rangos de dos fechas usando Ajax. Mediante el uso de Ajax nos comunicaremos del lado del cliente con el servidor sin la necesidad de una actualización completa de la página. Al usar ajax, permites que tu sitio web sea más interactivo para el usuario. La mayor parte de la función en Facebook usa ajax, por eso es muy cómodo de usarlo. Ahora que he hecho una breve introducción sobre ajax, comencemos a codificar.
Búsqueda simple por rangos de fechas usando PHP y Ajax
Creando la base de datos
Para crear una base de datos solo necesitamos un gestor de base de datos como phpMyAdmin, para poder crear una nueva base de datos para trabajar (wamp, xamp, etc.). Después de abrir tu servidor web, crea una base de datos y asígnale el nombre “db_search”. A continuación, haz clic en la pestaña SQL y copia/pega el código siguiente para ejecutar la consulta sql
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 10-01-2018 a las 18:48:10 -- Versión del servidor: 10.1.19-MariaDB -- Versión de PHP: 7.0.13 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de datos: `test_simple_date` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `book` -- CREATE TABLE `book` ( `book_id` int(11) NOT NULL, `ISBN` varchar(20) NOT NULL, `title` varchar(100) NOT NULL, `author` varchar(50) NOT NULL, `date_published` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `book` -- INSERT INTO `book` (`book_id`, `ISBN`, `title`, `author`, `date_published`) VALUES (1, '978-1-891830-71-6', 'Padre Rico, Padre Pobre', 'Robert Kiyosaki', '2018-01-10'), (2, '978-1-60309-2395', 'First Things First', 'Stephen Covey', '2018-01-10'), (3, '978-1-891830-37-2', 'The leader in me', 'Stephen Covey', '2018-01-10'), (4, '978-1-891830-40-2', 'Las 21 Leyes Irrefutables Del Liderazgo', 'John C. Maxwell', '2018-01-10'), (5, '978-1-891830-56-3', 'El cuadrante del flujo de dinero', 'Robert Kiyosaki', '2018-01-10'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `book` -- ALTER TABLE `book` ADD PRIMARY KEY (`book_id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `book` -- ALTER TABLE `book` MODIFY `book_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
Conectando a la base de datos
Para crear el archivo que se encargara de establecer la conexión con nuestra base de datos, basta con crear un archivo “conexion.php”, el código es mostrado a continuación.
|
1 2 3 4 5 6 |
<?php $conn = new mysqli("localhost", "root", "", "db_search"); if(!$conn){ die("Fatal Error: No se pudo contectar a la base de datos!"); } ?> |
Crear el formulario
Para crear nuestro formulario de búsqueda por rangos de fecha he creado un archivo llamado “index.php”, dicho archivo se encarga de enlazar a los archivos css y js de la aplicación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang = "es"> <head> <title>Búsqueda simple por rangos de fechas usando PHP y Ajax</title> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/> <link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.css"/> <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <body> <nav class = "navbar navbar-inverse"> <div class = "container-fluid"> <a href = "https://obedalvarado.pw/blog" class = "navbar-brand">Sistemas Web</a> </div> </nav> <div class = "row-fluid"> <div class = "col-md-3"></div> <div class = "col-md-6"> <div class="panel panel-default"> <div class="panel-body"> <h3 class = "text-primary">Búsqueda simple por rangos de fechas usando PHP y Ajax</h3> <hr style = "border-top:1px dotted #000;"/> <div class = "form-inline"> <label>Desde:</label> <input type = "text" class = "form-control" placeholder = "Inicio" id = "date1"/> <label>Hasta</label> <input type = "text" class = "form-control" placeholder = "Final" id = "date2"/> <button type = "button" class = "btn btn-primary" id = "btn_search" onclick="load();"><span class = "glyphicon glyphicon-search"></span></button> <button type = "button" id = "reset" class = "btn btn-success"><span class = "glyphicon glyphicon-refresh"><span></button> </div> <br /><br /> <div class = "table-responsive"> <table class = "table table-bordered alert-warning"> <thead> <tr> <th style = "width:25%;">ISBN</th> <th style = "width:30%;">Título</th> <th>Autor</th> <th style = "width:20%;">Publicado</th> </tr> </thead> <tbody id = "load_data"> </tbody> </table> </div> </div> </div> </div> </div> </body> <script src = "js/jquery-3.1.1.js"></script> <script src = "js/jquery-ui.js"></script> <script src = "js/ajax.js"></script> </html> |
Crear una consulta de respuesta ajax
Crearemos una consulta que devolverá la solicitud de una realizada mediante ajax desde el servidor para poder mostrar elos resultados de una búsqueda en la base de datos mysql. Para hacer eso copia & pega el código dado a continuación, asígnale el nombre “ajax_data.php”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php $date1 = date("Y-m-d", strtotime($_POST['date1'])); $date2 = date("Y-m-d", strtotime($_POST['date2'])); if (!empty($_POST['date1']) and !empty($_POST['date1'])){ list($dia,$mes,$anio)=explode("/",$_POST['date1']); $date1="$anio-$mes-$dia"; list($dia,$mes,$anio)=explode("/",$_POST['date2']); $date2="$anio-$mes-$dia"; $sWhere="WHERE `date_published` BETWEEN '$date1' AND '$date2'"; } else { $sWhere=""; } #Conectare a la base de datos include("conexion.php"); $q_book = $conn->query("SELECT * FROM `book` $sWhere ORDER BY `title` ASC") or die(mysqli_error()); $v_book = $q_book->num_rows; if($v_book > 0){ while($f_book = $q_book->fetch_array()){ ?> <tr> <td><?php echo $f_book['ISBN']?></td> <td><?php echo $f_book['title']?></td> <td><?php echo $f_book['author']?></td> <td><?php echo date("d/m/Y", strtotime($f_book['date_published']))?></td> </tr> <?php } }else{ echo ' <tr> <td colspan = "4" class="text-center">No se encontraron registros</td> </tr> '; } ?> |
Creando el script ajax
Ahora crearemos el archivo ajax que hace que la aplicación simple funcione completamente. Al agregar el script ajax, hará que la aplicación sea más interactiva para el usuario, ya que previene que la página web se actualice. Para hacer eso copia & pega el código dado a continuación y asígnale el nombre “ajax.js”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
$(document).ready(function(){ $('#date1').datepicker(); $('#date2').datepicker(); load(); $('#reset').on('click', function(){ location.reload(); }); }); function load(){ $date1 = $('#date1').val(); $date2 = $('#date2').val(); $('#load_data').empty(); $loader = $('<tr ><td colspan = "4"><center>Cargando....</center></td></tr>'); $loader.appendTo('#load_data'); setTimeout(function(){ $loader.remove(); $.ajax({ url: 'ajax_data.php', type: 'POST', data: { date1: $date1, date2: $date2 }, success: function(res){ $('#load_data').html(res); } }); }, 1000); } $.datepicker.regional['es'] = { closeText: 'Cerrar', prevText: '< Ant', nextText: 'Sig >', currentText: 'Hoy', monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'], dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'], dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'], dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'], weekHeader: 'Sm', dateFormat: 'dd/mm/yy', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: '' }; $.datepicker.setDefaults($.datepicker.regional['es']); |
Ahí lo tienes, creamos una búsqueda simple por rango de fechas usando PHP y Ajax. Espero que aprendas algo en este tutorial. Te invito a que descargues todos los archivos fuentes de este tutorial en enlace siguiente
