En este ejemplo se muestra un simple listado de la data de una tabla en mysql reutilizando la libreria jqxgrid de los JQWidgets. Este fué mi procedimiento:
Sistema Operativo: Fedora 16 64bits
Web Server para estáticos: nginx 1.2.5 (http://nginx.org/en/download.html)
Web Server para PHP: apache (prefork mpm), usando nginx como proxy reverso.
MySQL Community Server 5.5.28
- Crear una BD en mysql llamada "myTable" con los siguientes campos:+-------------------+-----------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------------------+-----------------------+------+-----+---------+----------------+
| id | mediumint(8) unsigned | NO | PRI | NULL | auto_increment |
| CodigoUsuario | mediumint(9) | YES | | NULL | |
| NombreUsuario | varchar(255) | YES | | NULL | |
| FechaNacimiento | varchar(50) | YES | | NULL | |
| CorreoElectronico | varchar(255) | YES | | NULL | |
+-------------------+-----------------------+------+-----+---------+----------------+
- Cómo no quería ingresar la data a mano, use uno de los generadores de Data mas populares: http://www.generatedata.com/ . Muy útil, rápidamente cargué 1500 filas a la tabla, usando el Result Type=SQL . Grabé el texto resultante en un archivo .sql y ejecuté desde consola: mysql test < midata.sql
- Desde consola creé la carpeta "static" y configuré el nginx para que sirva el contenido:vi /etc/nginx/conf.d/virtual.conf
server {
add_header Cache-control public;
expires max;
listen 80;
location /static/ {
root /;
index index.html;
}
location = /favicon.ico {
empty_gif;
return 204;
}
location /sample/ {
proxy_pass http://127.0.0.1:8080;
}
} - Hice los cambios en el /etc/httpd/conf/httpd.conf para servir la aplicaciòn desde una ruta en /var/www/sample/
- Desde consola, volver a cargar la configuración del apache:
service httpd reload - Volver a cargar la configuración del nginx:service nginx reload
- Descargar el JQWidgets desde http://www.jqwidgets.com/download/ , hacia la carpeta /static/
- En la ruta /var/www/sample crear el archivo de conexión mysql: connect.php<?php
# FileName="connect.php"
$hostname = "localhost";
$database = "bigdata";
$username = "root";
$password = "";
?> - En la misma ruta, crear el archivo que nos traerá la data: data.php<?php
include('connect.php');
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
mysql_select_db($database, $connect);
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print "can't find $database";
}
$query = "SELECT * FROM myTable";
$from = 0;
$to = 200;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
'CodigoUsuario' => $row['CodigoUsuario'],
'NombreUsuario' => $row['NombreUsuario'],
'FechaNacimiento' => $row['FechaNacimiento'],
'CorreoElectronico' => $row['CorreoElectronico']
);
}
echo json_encode($customers);
?> - Ahora creamos la página que mostrará el grid: index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GRID</title>
<link rel="stylesheet" href="/static/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/static/jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="/static/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/static/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'CodigoUsuario'},
{ name: 'NombreUsuario'},
{ name: 'FechaNacimiento'},
{ name: 'CorreoElectronico'}
],
url: 'data.php'
};
$("#jqxgrid").jqxGrid(
{
source: source,
theme: 'classic',
columns: [
{ text: 'Codigo de Usuario', datafield: 'CodigoUsuario', width: 250},
{ text: 'Nombre de Usuario', datafield: 'NombreUsuario', width: 150},
{ text: 'Fecha de Nac.', datafield: 'FechaNacimiento', width: 180},
{ text: 'E-Mail', datafield: 'CorreoElectronico', width: 200}
]
});
});
</script>
</head>
<body>
<div id="jqxgrid"></div>
</body>
</html> - Listo, entramos a http://localhost/sample/index.php
Es importante usar una herramienta sobre el navegador para validar que todos nuestros scripts estén funcionando correctamente. En este ejemplo, utilicé firebug 1.10.6 sobre Firefox 16.0.2.
Decidí usar nginx para servir los estáticos debido al tamaño de éstos:
.css: 84.4 kb , .js: 408.3 kb.
NGINX es un servidor ligero de gran performance y que, correctamente configurado, te ahorra mucho en el consumo de ancho de banda de aplicaciones en las que se haga uso intensivo de css, js e imágenes.
No olvidar agregar o actualizar estas lineas en /etc/nginx/nginx.conf, dentro de http {}
sendfile on;
keepalive_timeout 65;
gzip on;
gzip_buffers 16 8k;
gzip_comp_level 9;
gzip_http_version 1.1;
gzip_min_length 10;
gzip_types text/plain text/css image/png image/gif image/jpeg application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_static on;
gzip_proxied any;
gzip_disable "MSIE [1-6]\.";
Hola, interesante tu entrada. Una consulta crees que alla forma de poder usar el "jqw" pero con JSP(Java) y MYSQL?
ResponderEliminarClaro, revisa este post, puede serte útil:
ResponderEliminarhttp://www.jqwidgets.com/community/topic/jqwidgets-grid-with-jsp-servlet-server-side/
Saludos.