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ón de Empresas">Administración de Empresas</option> <option value="Diseño de Interiores">Diseñ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 🙂
Yo soy yo :) JC Mouse, 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! :)
El modelo Tweetbotornot es un algoritmo de aprendizaje automático que se entrenó en miles de cuentas reales de bot y no...
En este post conoceremos una forma de representar grafos mediante una Matriz de Adyacencia y un ejemplo básico de este e...
Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s...
En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley...
iSQL: Es una herramienta de linea de comandos que acompaña a Firebird, se encuentra en la carpeta BIN, sirve para realiz...
En este post construiremos paso a paso un SharedPreferences más conocido en español como «Preferencias de Usuario«, esta...
Los comentarios estan cerrados
En este post te enseñamos a crear tus imagenes al estilo de Disney Pixar utilizando Inteligencia Artificial de una maner...
El archuivo helpers.php en Laravel contiene funciones globales de PHP los cuales se pueden utilizar en cualquier parte d...
El gigante tecnologico de Google ingresa a la competencia de los ChatBot con Inteligencia Artificial a traves de Bard. B...
uiverse.io es u sitio web para desarrolladores que contiene miles de elementos de interfaz de usuario HTML/CSS creados y...
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?
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
hola:
cada vez que hago referencia a firebirdclient me sale un icono de advertencia a q se debe
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.
Esta muy bueno el tuto lo voy siguiendo espero la 4ta. parte para completar el tuto.
Saludos
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)
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
Un muy buen ejemplo. Esclarecedor. MUCHAS GRACIAS!
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.
con el uso de SESION
Gracias por el programa
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
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!!
buena aplicación , pequeña pero sirve bastantee.
amigo jcmouse gracias por todo men de verdad me han servido de mucho muchas gracias
verdaderamente bueno el tuto, aprendi bastante
Eres un loquillo, muy buenos aportes siempre!! saludos!
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)
pero de que post es eso, este tutorial trata sobre PHP
hola no veo donde esta el enlace de descarga..me gustaria verlo ya terminado y esudiarlo.. espero me puedan mandar el proyecto muchas gracias….
link de descarga esta al final del post
Amigo una pregunta, como hago para exportarlo al eclipse, cuando hago new proyecto con codigo existente, me aparece un error, podrias ayudarme porfavor
:/ que error tienes
muy bueno, muchas gracias por el codigo 🙂
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
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
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.
muy bueno y bien esplicado pero ve para que funciona los parmetros _THEME_ y __FULL_URL__
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