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

Creado por jc mouse Sábado, octubre 19, 2013

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:

netbeans php

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

div

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

GIF cargando

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:

mvc ajax

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

ajax busqueda

Descargate el proyecto completico en este enlace :)

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!

Sobre el autor y el sitio web

Yo soy yo :) Mouse o como algunos de ustedes me llaman 'El Cochinote', Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

ENTRADAS QUE TE PUEDEN INTERESAR

29 comentarios en “Blog MVC – Consultas Ajax a la base de datos [p5]”

  1. oscar dice:

    me sale un error en la linea del botton enviar
    mail.setPassword( this.txtPWD.getPassword() ); //no se encuentra simbol

    si le digito
    mail.setPassword( this.txtPWD.getText() ); tipos incompatibles string no puede convertise a char..

    ayudeme que hago?

  2. Carlos dice:

    saludos….estube revisando el codigo que subiste, y tengo otra nocion al respecto de lo que nos cuentas….
    te explico…se supone que en el modelo va todas las clases con datos ejemplo. clase persona y sus respectivas herencias. ahora comunmente se crean clases segun el modelo de datos(si tenemos una tabla persona, se crea una clase persona)
    en el controlador debe ir toda la logica de negocio junto con la conexion a la base de datos. Logica me refiero a calculos que se deban hacer a los datos extraidos de la base de datos para limpiarlos y entregarlos a la gui
    y en la vista iria la conexion directa con el usuario, en donde debemos tomar la informacion entregada en los textbox o cualquier componente gui, limpiarla y enviarla a las capas antes mencionadas.

    ademas que estas capas no deben crearse como package.
    la capa gui solo debe crearse como Java Aplication, la capa model debe crearse como Jaca Class Library al igual que la capa controlador….espero que les sirva de algo mi aporte….me despido

  3. CHRISTIAN dice:

    hola:

    cada vez que hago referencia a firebirdclient me sale un icono de advertencia a q se debe

  4. Alejandro dice:

    Cordial saludo mouse.

    tengo una duda sobre este maravillosa librería. yo descargue el .jar que tu colocaste y lo implemente en una aplicación que estoy desarrollando el problema es que no se como cambiarle el color así como tu muestras porque abro las clases y me es imposible editarlas porque el netbeans no deja. espero me puedas colaborar.

    de antemano muchas gracias.

  5. Virgilio dice:

    Esta muy bueno el tuto lo voy siguiendo espero la 4ta. parte para completar el tuto.
    Saludos

  6. Ines dice:

    Hola!
    Navegando en busca de un tutorial sencillo sobre idiomas en php he llegado aquí… Muchas gracias, es fácil de entender y está muy bien!
    El caso es que me gustaría saber si harías uno más completo por ejemplo haciendo que se almacene una cookie con el idioma y así al usuario se le abre en el idioma elegido siempre…
    También he visto en otros sitios que los textos, en vez de ir dentro de las llaves { } van dentro de etiquetas como … ¿cuál forma es mejor? Por qué usar una y no otra?
    Y otra cosa: cómo se podría hacer para que la página cuando está en español tenga solo un link a “english” y cuando está en inglés tenga solo un link a “español”? No sé si me explico… en vez de que aparezcan los dos botones siempre, pues que aparezca solo el que corresponde, ocultando el que esté activo o algo así…

    Gracias otra vez y espero no molestarte con tanta pregunta, jeje (pero es que es super interesante y me gustaría aprender)

  7. Sergio Ochoa dice:

    Hola Felicidades por la informacion que aportas.

    Algo muy interesante para crear mapas http://www.mapeditor.org/ y que tambien funciona para libgdx.

    Y aqui otro link este editor en que otros lenguajes puedes servir.

    https://github.com/bjorn/tiled/wiki/Support-for-TMX-maps

  8. David Asensio dice:

    Un muy buen ejemplo. Esclarecedor. MUCHAS GRACIAS!

  9. Oscar dice:

    Hola crack!!
    Sólo una duda…
    ¿Qué debo hacer para que recuerde el idioma seleccionado y cómo enlazar con otra página de mi website para que recuerde ese idioma?
    Gracias.

    1. Mouse dice:

      con el uso de SESION

  10. Franz dice:

    Gracias por el programa

  11. ASHLEYCOLE dice:

    GRACIAS POR TU APORTE….UNA CONSULTA ME HE DADO CUENTA QUE LA MAYORIA DE PERSONAS QUE PROGRAMAN CON NETBEANS USAN MYSQL..XK AH?QUE DIFERENCIA TIENE TRABAJAR CON SQLServer..
    EN FIN GRACIAS NUEVAMENTE Y SALUDOS DE LIMA-PERU

  12. Jepllach dice:

    Hola amigo. estoy poniendo en practica el MVC pero la función preg_replace al reemplazar los contenido con los nuevos archivos no ejecutar los tag php es decir el código que debería ser interpretado no se esta ejecutando alguna sugerencia que me des gracias de ante mano!!

  13. andrés dice:

    buena aplicación , pequeña pero sirve bastantee.

  14. vianey dice:

    amigo jcmouse gracias por todo men de verdad me han servido de mucho muchas gracias

  15. verdaderamente bueno el tuto, aprendi bastante

  16. miguel dice:

    Eres un loquillo, muy buenos aportes siempre!! saludos!

  17. Pablo dice:

    Hola, te molesto por el siguiente error, lo podrias ver y contestarme cual es el problema, Gracias y saludos.

    Exception in thread “main” java.lang.ClassCastException: Cannot cast javax.swing.JLabel to java.lang.Integer
    at java.lang.Class.cast(Class.java:3005)

    1. Mouse dice:

      pero de que post es eso, este tutorial trata sobre PHP

  18. justin wallace dice:

    hola no veo donde esta el enlace de descarga..me gustaria verlo ya terminado y esudiarlo.. espero me puedan mandar el proyecto muchas gracias….

    1. Mouse dice:

      link de descarga esta al final del post

  19. Elvis dice:

    Amigo una pregunta, como hago para exportarlo al eclipse, cuando hago new proyecto con codigo existente, me aparece un error, podrias ayudarme porfavor

    1. Mouse dice:

      :/ que error tienes

  20. Rolando dice:

    muy bueno, muchas gracias por el codigo :)

  21. ADRI dice:

    hola que tal, oye podrias pasarme tu proyecto para verlo bien, el link de desacarga no funciona y llevo mucho esperando a que descargue pero nada. por fis

  22. Josue dice:

    Siguiendo este emplo, como eliminaria todo la linea Email, en caso de que viniena en blanco. para
    dni
    nombre
    email
    celular

    Para que en el reporte me quede algo asi
    dni
    nombre
    celular

    y no de esta forma

    dni
    nombre

    celular

    Saludos

  23. Robert Macías Martínez dice:

    Excelente tutorial. Pequeño pero muy bueno, sobre todo el uso de ajax.
    Todavía me falta entender ciertas funciones de PHP como las: ob_start() y ob_get_clean(). Pero me ha salido a la primera y entendiendo de manera general el esquema de la plataforma. Ya de aquí, me toca meterle más cabeza para empaparme totalmente.
    En serio, muy bueno para empezar.
    Felicitaciones y muchas gracias.

  24. dantedrd dice:

    muy bueno y bien esplicado pero ve para que funciona los parmetros _THEME_ y __FULL_URL__

  25. alejandro dice:

    Hola saludos muy buenos tutoriales espero que sigas haciendo nuevo tutoriales sobre mvc me parece todo excelente, me gustaria aprender mvc php con angular pienso que se podria crear un proyecto interesante

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comparte lo que sabes

Categorias

Android Bolivia

Bandera en Alto

Ultimas entradas

Radio.Garden es un proyecto interactivo desarrollado por el Instituto Holandés para el Sonido y la Visión en cooperación...

Una cola doblemente terminada o deque es una estructura de datos lineal que permite insertar y eliminar elementos por am...

Cada día aparecen cientos sino es que miles de nuevos sitios web en el mundo, pero son muy pocos las webs verdaderamente...

En este post conoceremos una forma de representar grafos mediante una Matriz de Adyacencia y un ejemplo básico de este e...

Web amigas