Blog MVC – Consultas Ajax a la base de datos [p5]

Quinta parte de la serie de tutoriales «Creación de un blog siguiendo el patrón MVC (Modelo, Vista y Controlador)«.

En este post veremos lo que es el trabajo con base de datos utilizando la tecnología Ajax, nuestro objetivo sera crear un sistema de consulta con javascript y Ajax uasando la librería JQuery.

Que necesitamos

– Lenguaje javascript y uso de librería JQuery

– Lenguaje PHP

– Lenguaje HTML y CSS básico

– Lenguaje SQL

Para realizar este proyecto puede utilizarse el IDE que se desee, nosotros utilizaremos Netbeans y las capturas que se verán más adelante corresponderán a este IDE.

Requerimos también de un servidor local (AppServ por ejemplo), debes instalar en tu equipo si es que no lo tienes.

Nuestro proyecto hasta la parte 4 de esta serie tiene la siguiente estructura:

1. Base de datos MySQL

Crearemos una nueva base de datos «dbTest» en nuestro servidor local, la base de datos por el momento contara con una sola tabla llamada «universitario«, la estructura de la tabla es la siguiente:

-- 
-- Estructura de tabla para la tabla 'universitario'
-- 
CREATE TABLE universitario (
  id bigint(20) NOT NULL auto_increment,
  cedula varchar(12) NOT NULL,
  nombre varchar(60) default NULL,
  paterno varchar(60) default NULL,
  materno varchar(60) default NULL,
  carrera varchar(100) default NULL,
  PRIMARY KEY  (id)
);

INSERT INTO universitario VALUES (1, '2784273675', 'Herlinda', 'Conrado', 'Flanders', 'Ingenieria Quimica');
INSERT INTO universitario VALUES (2, '3740560251', 'Pedro', 'Sanchez', 'Brinco', 'Agronomia');

Toma tu tiempo e inserta por lo menos unos 50 registros 🙂 los cuales deben tener como «carrera«: Arquitectura, Enfermería, Ingeniería Química, Odontología, Ingeniería de Sistemas,Gas y Petroleo, Administración de Empresas, Diseño de Interiores, Ingeniería Civil, Ingeniería de Alimentos.

Si te da flojera, descarga el archivo «dbTest» con 500 registros desde este enlace pobre pero hecho con toda la buena onda de mundo 🙂

2. Clase database.php

Para poder conectarnos con la base de datos y realizar las diferentes acción de gestión (insert, delete, update, select) debemos crear una clase que llamaremos «database.php» en la carpeta MODEL/

<?php
/**
 * Modelo para la base de datos
 */
class database {
   private $conexion;

    /**
 * Conexion a la base de datos
 */
    public function conectar()
    {
        if(!isset($this->conexion))
        {
            $this->conexion = (mysql_connect("localhost","USUARIO","PASSWORD")) or die(mysql_error());
            mysql_select_db("BASE_DE_DATOS",$this->conexion) or die(mysql_error());    
        }
    }

    /**
 * Metodo para cerrar una conexion a la base de datos
 */
    public function desconectar()
    {
        mysql_close();
    }

    /**
 * Metodo para obtener la cantidad de registros que se obtiene de una consulta 
 * @param $result 
 */
    function numero_de_filas($result){
        if(!is_resource($result)) return false;
            return mysql_num_rows($result);
    }

    /**
 * Devuelve un array asociativo que corresponde a la fila recuperada 
 * y mueve el puntero de datos interno hacia adelante
 */
    function fetch_assoc($result){
        if(!is_resource($result)) return false;
            return mysql_fetch_assoc($result);
    }

    /**
 * Metodo para realizar una consulta
 * @param $sql Consulta SQL Ej. 'SELECT * FROM tabla'
 */
    public function consulta( $sql )
    {
        $resultado = mysql_query($sql,$this->conexion);
        if( !$resultado ){
            echo 'MySQL Error: ' . mysql_error();
            exit;
        }
        return $resultado; 
    }

}

?>

3. Clase de búsqueda

El objetivo de este tutorial es la de realizar una consulta a la base de datos, entonces debemos crear la clase respectiva que llamaremos «findModel.php» en la carpeta MODEL. Esta clase que se extiende de la clase database, contiene una única función llamada «getRegistros» que tiene por objetivo realizar la consulta de busqueda a la base de datos, si la consulta tiene exito retorna un array asociativo con el resultado caso contrario retorna NULL

<?php
require_once "database.php";
/**
 * Modelo para busquedas
 */
class find extends database 
{

    /**
 * Metodo para realizar una consulta a la base de datos
 * para obtener registro de alumnos segun parametros de entrada
 * @param $carrera Ej. Odontologia
 * @param $limit Cantidad de registros Ej. LIMIT 100
 * @return Array asociativo
 */
    public function getRegistros( $carrera=NULL, $limit=12 )
    {
        $this->conectar(); 
        $query = $this->consulta("SELECT * FROM universitario 
 WHERE carrera='".mysql_real_escape_string($carrera)."' ORDER BY rand() LIMIT ".mysql_real_escape_string($limit).";");
        $this->desconectar();
        if($this->numero_de_filas( $query ) > 0) // existe -> datos correctos
        {  
            //se llenan los datos en un array
            while ( $tsArray = $this->fetch_assoc( $query ) ) 
  $data[] = $tsArray;   
            return $data;
        }
        else
        { 
            return null;
        }        
    }    
}
?>

4. Controlador de busqueda

Cada modelo debe tener su controlador, en este caso para la clase «findModel.php» crearemos un controlador en la carpeta CONTROLLER el archivo se llamara «findCtrl.php«.

<?php
/**
 * Controlador para la pagina de busqueda por AJAX
 */
class findCtrl
{
    /** Constructor de clase */
    public function __construct() { } 

    /**
 * Metodo para procesar la solicitud ajax y retornar el resultado
 * @param $carrera
 * @param $cantidad
 * @return Texto plano o codigo HTML
 */
    public function process( $carrera='' , $cantidad=1 )
    {
        sleep( 2 );   
        //instancia a modelo de busqueda
        $find = new find();
        //obtiene registros
        $tsArray = $find->getRegistros( $carrera, $cantidad );
        //si existen registros
        if( $tsArray != null )
        {          
            if( is_file( 'application/view/themes/'.__THEME__.'/modules/table.php' ) )
            {
                //crea tabla de salida
                ob_start();
                    include 'application/view/themes/'.__THEME__.'/modules/table.php';
                $table = ob_get_clean();                
                return $table;
            }
            else
            {
                return 'Error: No existe archivo [modules/table.php]';
            }                     
        }
        else{ return 'No existen registros'; }
    }

}//--> fin clase
?>

5. Vista

Nuestra vista estará formada por un formulario (controles button, combobox, pero sin la etiqueta form) con los controles necesarios para realizar la consulta y en la parte inferior un DIV vacío en donde colocaremos el resultado.

Por tanto debemos crear un nuevo archivo «pagefind.php» en la carpeta VIEW/THEMES/SAMPLEBLOG/

    <table border="0" cellspacing="4" cellpadding="0">
    <tr>
      <td>Buscar por: </td>
      <td><label>
        <select name="carrera" id="carrera">
          <option value="Arquitectura">Arquitectura</option>
          <option value="Enfermeria">Enfermeria</option>
          <option value="Ingenieria Quimica">Ingenieria Quimica</option>
          <option value="Odontologia">Odontologia</option>
          <option value="Ingenieria de Sistemas">Ingenieria de Sistemas</option>
          <option value="Gas y Petroleo">Gas y Petroleo</option>
          <option value="Administraci&oacute;n de Empresas">Administraci&oacute;n de Empresas</option>
          <option value="Dise&ntilde;o de Interiores">Dise&ntilde;o de Interiores</option>
          <option value="Ingenieria Civil">Ingenieria Civil</option>
          <option value="Ingenieria de Alimentos">Ingenieria de Alimentos</option>  
        </select>
      </label></td> 
      <td>Cantidad de registros: </td>
      <td><label>
        <select name="cantidad" id="cantidad">
          <option value="10">10</option>
          <option value="12">12</option>
          <option value="16">16</option>
          <option value="24">24</option>
          <option value="36">36</option>
          <option value="72">72</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </label></td>
      <td><label>
        <input type="button" name="find" id="find" value=" Buscar " />
      </label></td>
    </tr>
  </table>

<div id="result"></div>

Requerimos de una tabla para mostrar los registros que obtengamos de la consulta, crearemos un archivo «table.php» en la carpeta MODULES

<table border="0" class="tabla" width="100%">
    <tr>
        <th>DNI</th>
 <th>Nombre</th>
 <th>Ap. Paterno </th>
 <th>Ap. Materno  </th>
 <th>Carrera</th>
    </tr>
    <?php foreach ($tsArray as $data): ?>  
    <tr>
        <td><?php echo $data['cedula'];?></td>
 <td><?php echo $data['nombre'];?></td>
 <td><?php echo $data['paterno'];?></td>
 <td><?php echo $data['materno'];?></td>
 <td><?php echo $data['carrera'];?></td>
    </tr>
    <?php endforeach; ?>
</table>

Haremos uso también de un GIF animado para mostrar mientras se realiza la consulta ajax, esta imagen debe ir en VIEW/THEMES/SAMPLEBLOG/IMAGES/ el archivo debe llamarse «load16.gif»

Necesitamos la librería «jquery-1.7.1.min.js» descarga de su pagina y coloca en la carpeta JS/

debemos crear también el archivo javascript que implemente AJAX en la misma carpeta JS/, el archivo se llamara «system.js«

$(function(){ 

     $( "#find" ).click(function() {
             $('#result').html( '<img src="'+ global_data.theme +'images/load16.gif" alt="procesando" title="procesando" />' );
             var dataString = 'ajax=find&carrera=' + $('#carrera').val() + '&cantidad=' + $('#cantidad').val();
             $.ajax({
                type: 'POST',
                url: 'index.php',
                data: dataString,
                success: function( data ) {                    
                    $('#result').html( data );
                }
             });//fin ajax 
        });

});//--> FIN JQUERY

6. Últimos pasos

Debemos modificar el archivo «principal.php» ubicado en VIEW/THEMES/SAMPLEBLOG/

Primero añadiremos entre las etiquetas <head> </head> el siguiente codigo

<script src="<?php echo __FULL_URL__; ?>js/jquery-1.7.1.min.js"></script>
<script src="<?php echo __FULL_URL__; ?>js/system.js?123"></script>
<script type="text/javascript">
    var global_data = { user: '', user_key: '69', theme: '<?php echo __FULL_URL__; ?>' };
</script>

Después modificaremos el menu para añadir un enlace a nuestra pagina de busqueda

ANTES
<div class="menu"><a href="#">Buscar</a></div>
DESPUES
<div class="menu"><a href="index.php?load=page&id=find">Busqueda Ajax</a></div>

7. Terminando

Para terminar, abrimos el archivo «index.php«, buscamos el apartado que dice:

/* ===[ archivos necesarios ]=== */

y pegamos debajo de este:

/* ===[ archivos necesarios ]=== */
require_once  "application/model/findModel.php";

Buscamos también el código:

if( $_POST )
{
   //codigo aqui 
}

y reemplazamos por:

    if( $_POST )
    {
        if( isset( $_POST['ajax'] ) )
        {
            if( $_POST['ajax'] == 'find' )
            {
                include_once( "application/controller/findCtrl.php" );                    
                $find = new findCtrl();
                echo $find->process( $_POST['carrera'], $_POST['cantidad'] );
            }            
        }
    }

Nuestro proyecto a crecido, debe tener ahora el siguiente aspecto:

Probemos en el navegador y si no tenemos ningún error ya podremos hacer uso de las consultas Ajax

Descargate el proyecto completico en este enlace 🙂

Blog MVC – Consultas Ajax a la base de datos [p5]

Tags

Últimas entradas

FOCA: Herramienta para recolección y análisis de Metadatos

Paginación en SQL Server 2008 y Laravel

¿Como paginar con Laravel 11?

¿Cómo hacer el video ABRAZO gratis?

Crea y usa Traits en Laravel

Artículos similares

ODBC acces y php POO

Dibujando con Canvas

Tutorial Zoom para dispositivos móviles

Crear animaciones con JQuery y Spritely

Generador de código para Netbeans

Uso de Tiles para crear fondo para aplicaciones

JC Mouse | Bolivia