Como crear un Buscador con jQuery y FlavorPHP

Inicio ¿Sidebar? RSS @MisAlgoritmos at Twitter

Como crear un Buscador con jQuery y FlavorPHP

En este post explicaré como realizar un buscador de tiempo real con FlavorPHP. Lo mismo que había explicado ya hace tiempo en este otro post, pero en lugar de utilizar código PHP escrito manualmente y preocuparnos por tantos detalles, ahora será con el uso del framework FlavorPHP.

Demo: http://mis-algoritmos.com/How-to-create-an-Ajax-live-search-with-jQuery-and-FlavorPHP#demo

¿Que es Flavor PHP?

FlavorPHP (http://flavorphp.com/) es un framework para PHP 5 basado en el patrón MVC. El objetivo de FlavorPHP es permitir el rápido desarrollo de aplicaciones web de una manera fácil.

¿Que es jQuery?

jQuery (http://jquery.com/) es una rápida y concisa librería para JavaScript que simplifica el uso de HTML, manejo de eventos, animación, y interacción con AJAX, y además mejora la velocidad de desarrollo. jQuery fue diseñado para cambiar la forma en que escribes JavaScript

¿Porqué Flavor PHP, Porqué jQuery?

FlavorPHP es Sencillo de utilizar, es software Méxicano-Argentino, y también porqué estaba buscando un pretexto para presumir que éste sitio web está desarrollado completamente con FlavorPHP :D

Actualmente jQuery es una de las librerías mas populares de desarrollo JavaScript, es fácil de usar y tiene una comunidad muy activa. Se que en algunas ocasiones es mejor usar JavaScript puro, pero los tiempos actuales demandan velocidad y no calidad (Dificil de creer, pero aquí donde vivo es cierto).

¿Que necesito antes de empezar?

  1. Servidor Web con soporte para:
    • PHP 5.2 o superior
    • Improved Extension (MySQLi).
    • URL Rewriting Engine (mod_rewrite de Apache).
  2. Editor de texto (Gedit, Bloc de notas, Dreamweaver, Notepad++, etc).
  3. jQuery (incluido en FlavorPHP).

Preparando el espacio de trabajo.

Descargamos flavorPHP de http://flavorphp.com, y lo descomprimimos en el directorio en que trabajara el buscador (Para este ejemplo usaré /buscador/ y para llamarlo desde http será así http://localhost/buscador)

Renombramos el archivo /buscador/config-sample.php por /buscador/config.php, lo editamos y escribimos los datos que pide:

  1. <?
  2. define('requiresBD', true);
  3. define('DB_Engine', 'mysqli');
  4. define('DB_Server', 'localhost');
  5. define('DB_name', '[Nombre de la base de datos]');
  6. define('DB_User', '[Usuario de MySQL]');
  7. define('DB_Password', '[Contraseña del MySQL]');
  8. define('DB_Port', false);
  9. define('Path', "http://localhost/buscador/");
  10. ?>

Es importante que el archivo config.php esté correctamente configurado desde un inicio, de lo contrario FlavorPHP no funcionará correctamente (Aunque en algunos casos así parezca).

Creamos en blanco los siguientes archivos:

La imagen loading.gif debe estar en el directorio de imagenes:

  • /buscador/app/views/images/loading.gif

Crear base de datos

Para este paso podrías utilizar phpMyAdmin (Casi todos los provedores de hosting lo utilizan, y si usas XAMPP viene incluido). El procedimiento es sencillo: Creas una base de datos, una vez creada la selecciones, buscas el boton de ejecutar SQL (en la parte de arriba), copias el siguiente código, y lo ejecutas:

  1. CREATE TABLE IF NOT EXISTS `sitios` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `sitioweb` varchar(255) NOT NULL,
  4.   `direccionweb` varchar(255) NOT NULL,
  5.   `descripcion` text,
  6.   PRIMARY KEY (`id`),
  7.   FULLTEXT KEY `sitioweb` (`sitioweb`,`direccionweb`,`descripcion`)
  8. ) ENGINE=MyISAM;
  9.  
  10. INSERT INTO `sitios` (`id`, `sitioweb`, `direccionweb`, `descripcion`) VALUES
  11. (1, 'Google', 'http://www.google.com', 'Google Inc. es la empresa propietaria de la marca Google, cuyo principal producto es el motor de búsqueda del mismo nombre. Fue fundada el 7 de septiembre de 1998 por Larry Page y Sergey Brin (dos estudiantes de doctorado en Ciencias de la Computación de la Universidad de Stanford).'),
  12. (2, 'Twitter', 'http://www.twitter.com', 'Twitter is a free social networking and micro-blogging service that enables its users to send and read other users'' updates known as tweets. Tweets are text-based posts of up to 140 characters in length which are displayed on the user''s profile page and delivered to other users who have subscribed to them (known as followers). Senders can restrict delivery to those in their circle of friends or, by default, allow anybody to access them. Users can send and receive tweets via the Twitter website, Short Message Service (SMS) or external applications. The service is free to use over the Internet, but using SMS may incur phone service provider fees.'),
  13. (3, 'Wikipedia', 'http://www.wikipedia.org', 'Wikipedia es un proyecto de la Fundación Wikimedia (una organización sin ánimo de lucro) para construir una enciclopedia libre[2] y políglota. Su nombre es un portmanteau de las palabras wiki (una tecnología para la creación de sitios colaborativos) y enciclopedia. Los más de 12 millones de artículos de Wikipedia (2,8 millones en inglés)[3] han sido redactados conjuntamente por voluntarios de todo el mundo, y prácticamente todos pueden ser editados por cualquier persona que pueda acceder a Wikipedia.[4] Lanzada en enero de 2001 por Jimmy Wales y Larry Sanger,[5] es actualmente la mayor y más popular[6] obra de consulta en Internet.[7] [8] [9] [10'),
  14. (4, 'Abbrr', 'http://www.abbrr.com', 'abbrr es un servicio totalmente gratuito para acortar URL. No está permitido usarlo para realizar spam o cualquier actividad ilegal. El sistema genera unicamente 1 (una) dirección corta para cada URL larga que se ingrese en el formulario principal. Este servicio no proporciona ningún tipo de garantía sobre la URL que pueda vincular.'),
  15. (5, 'Flavor PHP', 'http://www.flavorphp.com', 'FlavorPHP is a PHP 5 framework based on the MVC architectural pattern. FlavorPHP aims to empower its users to rapidly develop web applications in an easy to use way. '),
  16. (6, 'Youtube', 'http://www.youtube.com', 'YouTube is a video sharing website where users can upload, view and share video clips. Three former PayPal employees created YouTube in February 2005.[2] In November 2006, YouTube, LLC was bought by Google Inc. for US$1.65 billion, and is now operated as a subsidiary of Google.'),
  17. (7, 'Yahoo', 'http://www.yahoo.com', 'Yahoo! Inc. (NASDAQ: YHOO) is an American public corporation headquartered in Sunnyvale, California, (in Silicon Valley), that provides Internet services worldwide. The company is perhaps best known for its web portal, search engine, Yahoo! Directory, Yahoo! Mail, news, and social media websites and services. Yahoo! was founded by Jerry Yang and David Filo in January 1994 and was incorporated on March 1, 1995.'),
  18. (8, 'Google Docs', 'http://www.writely.com', 'Google Docs is a free, Web-based word processor, spreadsheet, presentation, and form application offered by Google. It allows users to create and edit documents online while collaborating in real-time with other users. Google Docs combines the features of two services, Writely and Spreadsheets, which were merged into a single product on October 10, 2006. A third product for presentations, incorporating technology designed by Tonic Systems, was released on September 17, 2007.'),
  19. (9, 'Facebook', 'http://www.facebook.com', 'Facebook is a free-access social networking website that is operated and privately owned by Facebook, Inc.[1] Users can join networks organized by city, workplace, school, and region to connect and interact with other people. People can also add friends and send them messages, and update their personal profiles to notify friends about themselves. The website''s name refers to the paper facebooks depicting members of a campus community that some US colleges and preparatory schools give to incoming students, faculty, and staff as a way to get to know other people on campus.'),
  20. (10, 'eBay', 'http://www.ebay.com', 'eBay Inc. is an American Internet company that manages eBay.com, an online auction and shopping website in which people and businesses buy and sell a broad variety goods and services worldwide. A majority of the sales take place through a set-time auction format, but subsequent methods include a substantial segment of listings in the "Buy It Now" category. In addition to its original U.S. website, eBay has established localized websites in thirty other countries. eBay Inc. also owns PayPal, Skype,[2] StubHub, Kijiji, and other businesses.'),
  21. (11, 'Codice CMS', 'http://www.codice-cms.org', 'Codice CMS is a blog publishing application. '),
  22. (12, 'WordPress', 'http://www.wordpress.com', 'WordPress is an open source blog publishing application. WordPress is the official successor of b2\\cafelog which was developed by Michel Valdrighi. The latest release of WordPress is version 2.7.1, released on 10 February 2009.'),
  23. (13, 'Baidu', 'http://www.baidu.com', 'Baidu (Chinese: ??; pinyin: B?idù) (NASDAQ: BIDU) is the leading Chinese search engine for websites, audio files, and images. Baidu offers 57 search and community services including an online collaboratively-built encyclopedia (Baidu Baike), and a searchable keyword-based discussion forum.[2] In October 2008, Baidu ranked 9 th overall in Alexa''s internet rankings.[3] In December 2007 Baidu became the first Chinese company to be included in the NASDAQ-100 index.[4]'),
  24. (14, 'Mis Algoritmos', 'http://mis-algoritmos.com', 'Extensa fuente de problemas resueltos en turbo pascal (Source Code). Turbo C. Diagramas de flujo (flow charts) resueltos. Ejecucion simulada en MS-DOS. Descarga los compiladores de Turbo Pascal, Turbo C, Borland C++. Programacion en Turbo C. Librerias C. Programacion en Turbo Pascal. Descarga los Compiladores. Diagramas de flujo. Analisis de Algoritmos.'),
  25. (15, 'Fotografía de Colima', 'http://www.flickr.com/photos/victorrocha/', 'Fotografías de Victor De la Rocha.'),
  26. (16, 'Flickr', 'http://www.flickr.com', 'Flickr is an image and video hosting website, web services suite, and online community platform. In addition to being a popular Web site for users to share personal photographs, the service is widely used by bloggers as a photo repository.[2] As of November 2008[update], it claims to host more than 3 billion images.[3][4][5]'),
  27. (17, 'Google Code', 'http://code.google.com', 'Google Code is Google''s site for developers interested in Google-related/open-source development. The site contains open source code and a list of their services which support public APIs.'),
  28. (18, 'Greasemonkey', 'http://www.greasespot.net/', 'Greasemonkey is a Mozilla Firefox add-on that allows users to install scripts that make on-the-fly changes to most HTML-based web pages. As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script. Greasemonkey can be used for adding new functions to web pages (for example, embedding price comparison in Amazon.com web pages), fixing rendering bugs, combining data from multiple webpages, and numerous other purposes.'),
  29. (19, 'Google Earth', 'http://earth.google.com/', 'Google Earth is a virtual globe, map and geographic information program that was originally called Earth Viewer, and was created by Keyhole, Inc, a company acquired by Google in 2004. It maps the Earth by the superimposition of images obtained from satellite imagery, aerial photography and GIS 3D globe. It is available under three different licenses: Google Earth, a free version with limited functionality; Google Earth Plus (discontinued), which included additional features; and Google Earth Pro ($400 per year), which is intended for commercial use.[1]'),
  30. (20, 'Greasemonkey', 'http://www.greasespot.net/', 'Greasemonkey is a Mozilla Firefox add-on that allows users to install scripts that make on-the-fly changes to most HTML-based web pages. As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script. Greasemonkey can be used for adding new functions to web pages (for example, embedding price comparison in Amazon.com web pages), fixing rendering bugs, combining data from multiple webpages, and numerous other purposes.'),
  31. (21, 'Ruby on Rails', 'http://rubyonrails.org/', 'Ruby on Rails, often shortened to Rails or RoR, is an open source web application framework for the Ruby programming language. It is intended to be used with an Agile development methodology which is used by web developers for rapid development.'),
  32. (22, 'Mozilla Firefox', 'http://www.firefox.com', 'Mozilla Firefox is a web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. Official versions are distributed under the terms of a proprietary EULA[4][5]. Firefox had 22.48% of the recorded usage share of web browsers as of April 2009, making it the second most popular browser in terms of current use worldwide, after Internet Explorer.[6]');

Creamos el controlador /buscador/app/controllers/index_controller.php

  1. <?
  2.  
  3. class index_controller extends appcontroller{
  4.    
  5.    public function __construct(){
  6.       parent::__construct();
  7.    }
  8.  
  9.    public function page($page = null){
  10.       $this->index(null,$page);
  11.    }
  12.  
  13.    public function index($id = null,$page = null){
  14.  
  15.       $isAjax = (isset($_GET['out']) and $_GET['out'] == "ajax") ? true : false ;
  16.  
  17.       if($isAjax){
  18.          $this->view->setLayout("feed");
  19.       }
  20.  
  21.       $this->view->isAjax = $isAjax;
  22.  
  23.       $pagination = new pagination_modified();
  24.       $Sitios = new sitios();
  25.  
  26.       $total_rows = $Sitios->countSitios(isset($_GET['q'])?$_GET['q']:null);
  27.  
  28.  
  29.       $page = (int) (is_null($page)) ? 1 : (int) $page ;
  30.       $limit = 5;
  31.  
  32.       $offset = (($page-1) * $limit);
  33.  
  34.       $limitQuery = $offset.",".$limit;
  35.  
  36.       $targetpage = $this->path.'index/page/';
  37.       $params = (isset($_GET['q']) and preg_match('/.+/',$_GET['q'])) ? "q=" . $_GET['q']:null;
  38.  
  39.  
  40.       $this->view->pagination = $pagination->init($total_rows, $page, $limit, $targetpage, $params);
  41.       $sitios = $Sitios->getResultados($limitQuery);
  42.  
  43.       if(isset($_GET['q'])){
  44.          $this->view->q = htmlspecialchars($_GET['q']);
  45.       }else{
  46.          $this->view->q = null;
  47.       }
  48.  
  49.  
  50.       $this->view->info = array(
  51.          "total" => $Sitios->countSitios(),
  52.          "resultados" => $total_rows
  53.       );
  54.       $this->view->urlBase = Path;
  55.       $this->view->sitios = $sitios;
  56.  
  57.       $this->render("index");
  58.    }
  59.  
  60. }

Línea 5: Ésta línea es muy importante porque ejecuta el constructor de la clase appcontroller. Esto le da al controller el acceso a toda las funcionalidades de un controlador (por ejemplo: patrón registry, uso de sessiones, cookies, paginación, l10n o gettext, helper html, pQuery, uso de themes en lugar de views, etc ).

Línea 9: Ésta línea sirve para la paginación, cuando hacemos la petición por http del buscador de la siguietne forma http://localhost/buscador o http://localhost/buscador/index , se está ejecutando el método index de el controlador index_controller.php. Si quisieramos usar algo así http://localhost/index/page/1, http://localhost/index/page/2, o http://localhost/index/page/3 para recorrer los registros es necesario tener esta función que básicamente lo que hace es recibir el parámetro page y lo manda al método index el cual debe realizar el resto del trabajo.

Línea 13: Define el inicio del método índex (Quien recibe toda la carga de las peticiones) y manda el resultado a las vistas para ser desplegado.

Líneas 15 a 21: Estas líneas determinarán si se está mandando llamar por AJAX o por vía normal la búsqueda. Esto servirá en las vistas para símplemente desplegar los resultados, o desplegar el resulado con todo y la caja de búsqueda. (Para probar esto http://localhost/buscador?out=ajax debería mostrar sólo resultados sin la caja de búsqueda ni layout). El layout feed es un archivo en blanco que sólo despliéga el contenido sin agregar el máquetado del sitio con CSS y etiquetas <meta>, <html>, <body>, etc.

Línea 26: Ésta línea retorna en la variable $total_rows el total de registros encontrados con la búsqueda realizada (en caso de haberse realizado algúna), o el total de registros en la base de datos. Esto servirá para definir el inicio y el final del paginador (Anterior, Siguiente). En esta línea se está recurriendo a una función que está dentro de uno de el modelo sitios.php

Linea 41: Esta línea retorna en la variable $sitios los registros que coincidieron con la búsqueda o el todos los registros que se desplegarán en caso de que no haya ningúna búsqueda.

Línea 55: Envía la variable $sitios a la vista, la cual se encargará de desplegar los resultados.

Línea 57: Ésta línea hacer que la vista se encargue del resto. Carga la vista views/index/index.php


Creamos el modelo /buscador/app/models/sitios.php

  1. <?
  2. class sitios extends models{
  3.  
  4.     private $q;
  5.  
  6.     function countSitios($q = null){
  7.         $q = preg_replace("/ +/"," ",trim($this->sql_escape($q)));
  8.         $this->q = $q;
  9.  
  10.         if($q){
  11.             if(strpos($q, " ")){
  12.                 //consulta con match against
  13.                 $where = "WHERE Match(sitioweb,direccionweb,descripcion) Against('$q')";
  14.                 $this->db->query("SELECT count(*) as total FROM sitios $where ORDER BY id DESC");
  15.             }else{
  16.                 //consulta con like
  17.                 $where = "WHERE ";
  18.                 $where .= "(sitioweb LIKE '$q' OR sitioweb LIKE '%$q' OR sitioweb LIKE '$q%' OR sitioweb LIKE '%$q%') OR";
  19.                 $where .= "(direccionweb LIKE '$q' OR direccionweb LIKE '%$q' OR direccionweb LIKE '$q%' OR direccionweb LIKE '%$q%') OR";
  20.                 $where .= "(descripcion LIKE '$q' OR descripcion LIKE '%$q' OR descripcion LIKE '$q%' OR descripcion LIKE '%$q%')";
  21.            
  22.                 $this->db->query("SELECT count(*) as total FROM sitios $where ORDER BY id DESC");
  23.             }
  24.         }else{
  25.             $this->db->query("SELECT count(*) AS total FROM sitios");
  26.         }
  27.  
  28.         $total = $this->db->fetchRow();
  29.         return $total['total'];
  30.     }
  31.  
  32.     function getResultados($limitQuery){
  33.         $q = $this->q;
  34.  
  35.         if($q){
  36.             if(strpos($q, " ")){
  37.                 //consulta con match against
  38.                 $fields = "sitios.*, Match(sitioweb,direccionweb,descripcion) Against('$q') as score";
  39.  
  40.                 $where = "WHERE ";
  41.                 $where .= "Match(sitioweb,direccionweb,descripcion) Against('$q')";
  42.  
  43.                 $sitios = $this->findAll($fields,"score DESC",$limitQuery,$where);
  44.             }else{
  45.                 //consulta con like
  46.                 $where = "WHERE ";
  47.                 $where .= "(sitioweb LIKE '$q' OR sitioweb LIKE '%$q' OR sitioweb LIKE '$q%' OR sitioweb LIKE '%$q%') OR";
  48.                 $where .= "(direccionweb LIKE '$q' OR direccionweb LIKE '%$q' OR direccionweb LIKE '$q%' OR direccionweb LIKE '%$q%') OR";
  49.                 $where .= "(descripcion LIKE '$q' OR descripcion LIKE '%$q' OR descripcion LIKE '$q%' OR descripcion LIKE '%$q%')";
  50.  
  51.                 $sitios = $this->findAll(null,"id DESC",$limitQuery,$where);
  52.             }
  53.         }else{
  54.             $sitios = $this->findAll(null,"id DESC",$limitQuery,null);
  55.         }
  56.        
  57.         return $sitios;
  58.     }
  59. }
  60. ?>

Línea 6: Ésta función la estoy utilizando desde el controlador index_controller.php en la línea 26.

Línea 32: Ésta línea es de las importante y con protagonísmo en esta aplicación porque es quien devuelve los resultados. En la línea 51 el método findAll retorna los registros en caso de que una búsqueda se haya realizado. Para eso se estructura una consulta SQL con LIKE o MATCH AGAINST y se manda en el parámetro extra de:

  1. $this->findAll(null,"id DESC",$limitQuery,$where);

La sintaxis de esta función es muy sencilla:

  1. $this->findAll(campos,orden,limite,extra);
  • los campos son los correspondientes a la tabla en la base de datos.
  • el orden corresponde la parte que en al consulta SQL sería el ORDER BY campo DESC/ASC.
  • El limite corresponde a la cantidad de registros que se desea recibir.
  • El campo extra se utiliza para enviar condiciones extras que van despues de la zona WHERE de la consulta SQL.

Línea 54: Ésta línea hace lo mismo que la línea 51 pero no se envía el parámetro $where por que todavía no se ha realizado una búsqueda. Símplemente devuelve los resultados en órden.

Línea 57: Y finalmente retornamos el resultado de los sitios encontrados, y le devolvemos el control a el controlador index.php


Creamos la vista /buscador/app/views/index/index.php

  1. <? if(!$isAjax){ ?>
  2. <form class="yahoo" action="<? echo $urlBase ?>" id="buscador">
  3.     <label for="q">Buscar</label>
  4.     <input type="text" name="q" value="<? echo htmlspecialchars($q)?>" id="text"/><input type="submit" value="Search" id="search"/>
  5. </form>
  6. <? } //$isAjax ?>
  7.  
  8. <div id="resultados">
  9.  
  10.    <? if(is_null($q)){ ?>
  11.       <p>Total de registros: <? echo $info['total']; ?></p>
  12.    <? }else if($info['resultados']){?>
  13.       <p><? echo $info['resultados'];?> Resultados que coinciden con tu búsqueda "<? echo htmlspecialchars($q); ?>".</p>
  14.    <? }else if($info['resultados'] == 0){ ?>
  15.       <p>No hay registros que coincidan con tu búsqueda "<? echo htmlspecialchars($q); ?>"</p>
  16.    <? } ?>
  17.  
  18.    <? echo $pagination; ?>
  19.    
  20.    <table class="registros">
  21.    <tr class="titulos"><td>Titulo</td></tr>
  22.    <?
  23.       $par = false;
  24.       foreach($sitios as $sitio){
  25.          echo "<tr class=\"row".($par?1:0)."\"><td>";
  26.          echo "<a href=\"{$sitio['direccionweb']}\" target=\"_blank\">{$sitio['sitioweb']}</a>";
  27.          echo " - ".$sitio['descripcion'];
  28.          echo"</td></tr>";
  29.  
  30.          if(!$par){
  31.             $par = true;
  32.          }else{
  33.             $par = false;
  34.          }
  35.       }
  36.    ?>
  37.    </table>
  38.  
  39.    <? echo $pagination; ?>
  40.  
  41. </div>

Creamos la vista /buscador/app/libs/js/buscador.js

Éste archivo es incluido en el layout del buscador desde las vistas, éste está trabajado completamente en jQuery. El archivo que lo incluye en el layout es el archivo views/layouts/default.php

  1. var buscar = function(busqueda){
  2.    $.ajax({
  3.       url: "/buscador/",
  4.       global: false,
  5.       type: "GET",
  6.       data: "out=ajax&q=" + busqueda,
  7.       dataType: "html",
  8.       success: function(msg){
  9.       $("#resultados").html(msg);
  10.    }});
  11. };
  12.  
  13. var keyup_timeout = undefined;
  14.  
  15. $(document).ready(function (){
  16.    $("form#buscador > #text").attr({autocomplete: "off"});
  17.    $("form#buscador > #text").focus();
  18.  
  19.    $("form#buscador").keyup(function(){
  20.  
  21.       if(keyup_timeout != undefined) {
  22.          clearTimeout(keyup_timeout);
  23.       }
  24.  
  25.       keyup_timeout = setTimeout(function(){
  26.          keyup_timeout = undefined;
  27.  
  28.          search = $("form#buscador > #text").val();
  29.          
  30.          $('div#resultados').html("<p style='position:absolute;'><img src=\"app/views/images/loading.gif\" alt=\"Cargando...\"> </p>" + $('div#resultados').html());
  31.          buscar(search);
  32.       }, 200);
  33.    });
  34. });

Línea 1: Esta función se encarga de realizar la búsqueda con el contenido que haya en el campo de texto para la búsqueda.

Líneas 13, 21 a 23, y 32: Éstas líneas son las mas complicadas de entender. Lo que hacen es esperar 200milisegundos a que el usuario haya dejado de escribir y luego realizar la búsqueda. Esto permitirá que el navegador no se llene de peticiones AJAX conforme el usuario escriba (Sino que hasta que deje de escribir).

El resto de las líneas son las que ponen la imagen de "Cargando..." cuando la petición está en proceso, y cargan el resultado de la búsqueda.


Modificamos el archivo /buscador/app/views/layout/default.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  6.  
  7.    <head>
  8.  
  9.       <title><? echo $title_for_layout; ?></title>
  10.  
  11.       <meta name="generator" content="flavorPHP" />
  12.  
  13.       <? echo $this->html->charsetTag("UTF-8"); ?>    
  14.       <? echo $this->html->includeCSS("searchbox"); ?>
  15.       <? echo $this->html->includeJs("jquery"); ?>
  16.       <? echo $this->html->includeJs("buscador"); ?>
  17.  
  18.    </head>
  19.  
  20.    <body>
  21.  
  22.       <div>
  23.  
  24.          <? echo $content_for_layout ?>
  25.  
  26.       </div>
  27.  
  28.    </body>
  29.  
  30. </html>

Por último. Éste archivo es el layout que incluye el código del búscador, el archivo CSS y la librería jQuery

La línea 24 desplegará el conteindo que recibió la vista de el controlador.


Modificamos el archivo /buscador/app/views/css/searchbox.css

  1. /*
  2.  * Autor: Victor De la Rocha (http://www.mis-algoritmos.com)
  3.  * Post: http://www.mis-algoritmos.com/
  4.  */
  5. /*
  6.  * Yahoo style
  7.  */
  8. form.yahoo *{
  9.    margin: 0;
  10.    padding: 0;
  11. }
  12. form.yahoo{
  13.    background-image:url(../images/fondo.png);
  14.    background-repeat:repeat-x;
  15.    min-height:63px;
  16.    padding:10px 20px;
  17. }
  18. form.yahoo label{
  19.    display:none;
  20. }
  21. form.yahoo input{
  22.    font-family:Arial, Helvetica, sans-serif;
  23.    font-size:0.8em;
  24.    font-weight:bold;
  25.    vertical-align:top;
  26. }
  27. form.yahoo input#text{
  28.    background-color:#fff;
  29.    width:320px;
  30.    height:1.5em;
  31.    border:1px solid #7f9db9;
  32.    border-right:0;
  33.    
  34.    padding:1px 4px 0 4px;
  35. }
  36. form.yahoo > input#text{
  37.    margin:1px 0 0 0;
  38. }
  39. form.yahoo input#search{
  40.    background-color:#ffc027;
  41.    background-image:url(../images/fondo-boton.png);
  42.    background-repeat:repeat-x;
  43.    width:85px;
  44.    height:1.7em;
  45.    border:1px solid #999b9a;
  46.    
  47.    margin:1px 0 0 0;
  48.    padding:0 10px 0 10px;
  49. }
  50.  
  51.  
  52. /*registros*/
  53. table.registros{
  54.       border:0;
  55.       width:100%;
  56.    }
  57. table.registros td{
  58.       border:0;
  59.    } 
  60. table.registros tr.titulos{
  61.       background:#d0d0d0;
  62.       text-align:center;
  63.       text-transform:uppercase;
  64.    }
  65. table.registros tr.row0{
  66.       background:#e0e0e0;
  67.    }
  68. table.registros tr.row1{
  69.       background:#f7f7f7;
  70.    }
  71.  
  72. /*
  73. Plugin Name: WP-Digg Style Paginator
  74. Plugin URI: http://www.mis-algoritmos.com/2007/09/09/wp-digg-style-pagination-plugin-v-10/
  75. Author: Victor De la Rocha
  76. Author URI: http://www.mis-algoritmos.com
  77. */
  78. /*CSS Yahoo new version style pagination*/
  79.    div.pagination {
  80.       padding: 3px;
  81.       margin: 3px;
  82.       text-align:center;
  83.       font-family:Tahoma,Helvetica,sans-serif;
  84.       font-size:.85em;
  85.    }
  86.    
  87.    div.pagination a {
  88.       border: 1px solid #ccdbe4;
  89.       margin-right:3px;
  90.       padding:2px 8px;
  91.  
  92.       background-position:bottom;
  93.       text-decoration: none;
  94.  
  95.       color: #0061de;      
  96.    }
  97.    div.pagination a:hover, div.pagination a:active {
  98.       border: 1px solid #2b55af;
  99.       background-image:none;
  100.       background-color:#3666d4;
  101.       color: #fff;
  102.    }
  103.    div.pagination span.current {
  104.       margin-right:3px;
  105.       padding:2px 6px;
  106.      
  107.       font-weight: bold;
  108.       color: #000;
  109.    }
  110.    div.pagination span.disabled {
  111.       display:none;
  112.    }
  113.    div.pagination a.next{
  114.       border:2px solid #ccdbe4;
  115.       margin:0 0 0 10px;
  116.    }
  117.    div.pagination a.next:hover{
  118.       border:2px solid #2b55af;
  119.    }
  120.    div.pagination a.prev{
  121.       border:2px solid #ccdbe4;
  122.       margin:0 10px 0 0;
  123.    }
  124.    div.pagination a.prev:hover{
  125.       border:2px solid #2b55af;
  126.    }

Puedes cambiar la apariencia del buscador con los siguientes enlaces:

Si te interesa este buscador pero no estas interesado en utilizar FlavorPHP: también está el tutorial para crearlo directamente con código PHP.

Y ya para terminar: no todo en la vida es fácil y ni mucho menos gratis así que, este tutorial tiene unos detallitos ocultos que no expliqué y que simplemente existen (Y no tiene que ver con Konami Code). Al que los encuentre le daré una membresía premium de mis-algoritmos.com gratis (??) jeje


Demostración: http://dev.mis-algoritmos.com/buscadorFlavorPHP/

404 Not Found

Not Found

The requested URL /buscadorFlavorPHP/ was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


Apache Server at dev.mis-algoritmos.com Port 80
There are 4 comments. for this entry.