Dec 282010
 

Voy a publicar aquí una librería javascript que ando utilizando en mis páginas para acceder a MySQL, con muy buenos resultados. Consta de dos ficheros:

  • mysqlws.php: Contiene la parte del servidor.
  • mysqlwslib.js: Contiene la librería javascript propiamente dicha.

Siento desilusionar a los que esperasen javascript puro, sin php, pero ahí no llego.

Instalación:Descargar el paquete y descomprimirlo para obtener los fuentes del fichero mysqlws.php y mysqlwslib.js. Copiar ambos ficheros en el mismo servidor que tengamos mysql instalado. Por defecto el paquete supone que el directorio donde instalemos ‘mysqlws.php’ tiene un subdirectorio ‘js’ donde reside la librería ‘mysqlwslib.js’.

Configuración:Seguir las instrucciones que se encuentran en las cabeceras de los ficheros y que se resumen en dar los valores de nuestra instalación a la variables $host, $user, $pw, $db en el fichero ‘php’. Además habrá que indicar al fichero ‘js’ donde está el fichero ‘php’ fijando el valor de la variable ‘urlMysqlwsphp’.

Con esto termina la instalación. Para poder utilizar la librería desde nuestras páginas web habrá que poner un enlace en el fichero ‘html':

A partir de ese momento disponemos de las siguientes funciones:

  • mysql_use(“nombre_basedatos”) : Selecciona la base de datos sobre la que se realizaran las siguientes consultas.
  • mysql_select_query(query) : Realiza una consulta tipo SELECT y devuelve un Array con el resultado. Hay que tener en cuenta que devuelve un Array de dos dimensiones, por lo que si el resultado es una sola fila estará en el indice [0] del resultado. Veamos un ejemplo:
  • mysql_update_query(query) : Realiza una consulta del tipo UPDATE, INSERT, DELETE u otras. Devuelve un número entero correspondiente al número de filas afectadas por la última operación. Si el número es -1 se ha producido un error. Un cero en una operación INSERT o UPDATE normalmente indicará un error. Ejemplo de inserción de un registro:

  • mysql_col_names( tablename): Devuelve un array con los nombres de las columnas de la tabla indicada.

Además de estas funciones que son las dedicadas al acceso a mysql, he dejado en la librería otras funciones que también utilizo en casi todos mis programas:

  • $(elementId) : Devuelve el elemento DOM correspondiente al id pasado.
  • setElementContent(element, content): Sustituye a la pareja de sentencias :

    En el caso de la función se puede pasar el id del elemento buscado o una referencia al elemento propiamente dicho.
  • getDocHeight(): Devuelve la altura del documento.
  • setElementHeight(element, height): Ajusta la altura del elemneto indicado. El elemento se puede especificar por su id o por una referencia al elemento
  • getElementHeight(element): Devuelve la altura del elemento DOM indicado
  • getWindowHeight(): Devuelve la altura de pantalla disponible
  • getWindowWidth(): Devuelve la anchura de pantalla.
  • getTamanoVentana(): Devuelve un Array [ancho, alto] de la ventana.
  • createTableFromArray( arrayDatos, arrayCabeceras): Devuelve una cadena <table>…</table> con los datos de un array organizados en filas y columnas para añadir al elemento <div> que queramos y que nos muestre una tabla con los datso del array. El array con las cabeceras es opcional y se puede conseguir con la función ‘mysql_col_names()’.
  • parseFechaUTC(cadFecha, cadHora): Devuelve un objeto javascript Date a partir de unas cadenas fecha y hora en formato mysql. La fecha y hora se supone que son UTC. Ejemplo:
  • getCadFechaUTCFromJSDate( date): Devuelve una cadena en la forma “aaaa-mm-dd” con la fecha UTC correspondiente al objeto Date ‘date’
  • getCadHoraUTCFromJSDate( date): Devuelve una cadena en la forma “hh-mm-ss” con la hora UTC correspondiente al objeto Date ‘date’
  • intToString(numero, digitos): Devuelve una cadena con un entero ajustado al numero de digitos indicado, rellenando ceros por delante. Por ejemplo “01”

Espero que os sea de utilidad. Agradezco comentarios y bugs encontrados.

mysqlws.tar

mysqlws.zip



Santiago Higuera (27 Diciembre 2010)

Sep 282010
 

Los controles se utilizan para interactuar con el mapa. Permiten hacer zoom, mover el mapa, conocer las coordenadas del cursor, dibujar features, etc

En OpenLayers V2.10 hay 40 clases de controles para utilizar con los mapas. De ellos, dos está desaconsejado su uso pues se van a suprimir en la próxima versión de OpenLayers, la versión 3.0. Los controles descatalogados son ‘MouseDefaults‘ y ‘MouseToolBar‘. De los 38 controles restantes, dos son nuevos de esta versión, ‘SLDSelect‘ y ‘WMTSGetFeatureInfo‘. El resto vienen de versiones anteriores, si bien el control ‘OpenLayers.Control.Panel‘ ha sufrido modificaciones en su funcionamiento respecto de anteriores versiones.

Todos los controles derivan de la clase ‘OpenLayers.Control‘, y todos los controles se añaden al objeto ‘OpenLayers.Map‘, directa o indirectamente. La clase ‘OpenLayers.Map‘ tiene una propiedad ‘controls‘ que guarda la lista de controles del mapa. Para añadir un control al mapa se puede hacer mediante el método ‘OpenLayers.Map.addControl()‘ o bien directamente en el constructor de ‘OpenLayers.Map‘.

El constructor de la clase OpenLayers.Map permite añadir controles en el momento de la creación del mapa. Si no se indica nada, el mapa añade los siguientes controles por defecto:

Esto es, si creamos el mapa con el siguiente constructor:

Automáticamente quedan añadidos al mapa los controles por defecto indicados.

Podemos crear un mapa sin ningún control de la siguiente manera:

Si lo que queremos es añadir una serie de controles elegidos por nosotros habría que invocar el constructor del mapa de la siguiente manera:

También podemos crear un mapa sin controles y añadirselos después:

En ambos casos hemos creado un mapa con los controles ‘PanZoom‘ y ‘Attribution‘. Debemos cuidar siempre de añadir el control ‘Attribution‘ para mostrar correctamente los Attribution de los mapas que utilicemos.

En OpenLayers las definiciones de estilo por defecto de controles y otros elementos se declaran y definen en la hoja de estilo http://www.openlayers.org/api/theme/default/style.css. Podemos añadir un enlace a dicha hoja de estilo en nuestro código:

Si echamos un vistazo al fichero vemos que se definen propiedades de estilo para todo tipo de elementos que son faciles de identificar por su nombre de clase. También podemos personalizar la posición o el aspecto de los controles como se verá en capítulos posteriores

La lista de controles que podemos utilizar es la siguiente:

  • Controles generales
    • ArgParser
    • Attribution
    • Button
    • Graticule
    • KeyboardDefaults
    • LayerSwitcher
    • OverviewMap
    • Panel
    • PanPanel
    • PermaLink
    • SLDSelect (nuevo versión 2.10)
    • Snapping
    • Split
  • Zoom, Panning, Position
    • DragPan
    • MousePosition
    • Navigation
    • NavigationHistory
    • NavToolBar
    • Pan
    • PanZoom
    • PanZoomBar
    • ZoomBox
    • ZoomIn
    • ZoomPanel
    • ZoomOut
    • ZoomToMaxExtent
  • Features
    • EditingToolbar
    • DragFeature
    • DrawFeature
    • GetFeature
    • ModifyFeature
    • SelectFeature
    • TransformFeature
  • Medir
    • Measure
    • Scale
    • ScaleLine
  • Servicios de Mapas
    • WMSGetFeatureInfo
    • WMTSGetFeatureInfo (nuevo versión 2.10)

En próximos capítulos iremos explicando la utilización detallada de cada uno de estos controles.

Sep 262010
 

WordPress guarda toda su información, incluido el contenido de los artículos, en una base de datos. En mi caso tengo instalado WordPress 3.0.1 utilizando la base de datos MySql proporcionada por el alojamiento.

Si queremos interactuar directamente con la base de datos debemos conocer el valor de ‘host‘, ‘user‘, ‘password‘, ‘database‘. (Estos datos son los mismos que hay que rellenar en el fichero ‘wp-config.php‘ durante el proceso de instalación de WordPress).

Conociendo estos valores se puede echar un vistazo con MySqlAdmin para ver como hace WordPress para guardar los artículos y todos los datos de mantenimiento del Blog.

Si así lo hacemos, veremos que en la versión 3.0.1 hay una tabla llamada ‘wp-posts‘ que es la que contiene el grueso de los datos relativos a los artículos (posts). En particular nos vamos a fijar en las columnas ‘ID’ y ‘post-content’. El ‘ID’ coincide con el número del artículo que aparece en los enlaces al mismo. Así si el enlace a un artículo es ‘http://www.ingemoral.es/index.php?p=1044‘, el ‘ID’ del artículo será 1044. La columna ‘post-content‘ almacena todo el contenido del artículo en formato html.

Hemos desarrollado un programa que lee de forma dinámica los artículos de la base de datos de WordPress a medida que se van solicitando.

El programa consta de cuatro ficheros:

  • manualOpenLayers.html : La página html
  • manualOpenLayers.js : Las funciones en javascript y AJAX
  • manualOpenLayers.css : La hoja de estilo del programa
  • testWordpressDb.php : La parte del servidor en php

La página ‘manualOpenLayers.html‘ organiza los paneles de la pantalla y muestra una lista de enlaces.

Hemos dividido la pantalla en ‘panelIzdo’ y ‘panelDcho’. Dentro del panel izquierdo tenemos un elemento ‘attribution’ y una lista de enlaces. En el panel derecho tenemos un elemento ‘titPanelDcho’, destinado a mostrar el título del artículo, y otro elemento ‘contentPanelDcho’ que es donde se muestra el contenido del artículo.

Cada uno de los enlaces guarda el ‘ID’ de un artículo. Cuando se activa el enlace, éste llama a la rutina javascript ‘doRequest( idpost)‘, pasándole como argumento el ‘ID’ del artículo solicitado. La rutina entonces realiza una llamada AJAX al programa ‘testWordpressDb.php‘ pasándole como argumento el ‘ID’ del post solicitado:

http://..../testWordpressDb.php?p=1024

El archivo php contiene las rutinas de acceso a mysql. Busca el articulo ‘ID’ y devuelve una página html con el contenido de la columna ‘post-content’, todo ello en formato texto.

La rutina javascript utiliza el texto recibido para rellenar el contenido html del elemento ‘contentPanelDcho‘.

Los listados de los tres ficheros son los siguientes:

manualOpenLayers.html

manualOpenLayers.css

manualOpenLayers.js

El listado de ‘testWordpressDb.php’ es el siguiente:

El ejemplo funcionando lo puedes ver en el siguiente enlace:

manualOpenLayers.html

Ten en cuenta que hay que reemplazar el valor de las variables globales $host, $user, $pw y $db con los valores correspondientes de tu instalación WordPress.

El ‘ID’ identifica un artículo, aunque el artículo no esté publicado y exista solo como borrador, lo que nos permite utilizar Wrodpress como editor y almacenador de unos artículos que luego publicamos via página Web



Santiago Higuera (26 Septiembre 2010)

Aug 302010
 

En ocasiones queremos leer datos del usuario en una página web y pasárselos a una rutina javascript como parámetros. Lo podemos hacer mediante un elemento <form> si tomamos algunas precauciones.

Realizaremos un ejemplo en el que se le presenta al usuario un campo de texto para que teclee su nombre y un botón para validar. Una vez pulsado el botón se muestra el nombre tecleado en un elemento <div>.

Definimos un elemento ‘form’ que contendrá un campo tipo ‘text’ y un campo tipo ‘button’. El ‘text’ tendrá definido un ‘id’ para poderlo identificar. El valor tecleado en el campo se puede recoger en el atributo ‘value’.

Para llamar a la rutina javascript necesitamos un campo tipo ‘button’ cuyo evento ‘onclick’ se define apuntando a la rutina que queremos ejecutar. Pasamos como parámetro el propio objeto ‘form’, de manera que la rutina pueda extraer los valores que le interesen. En nuestro caso hemos extraido el atributo ‘value’ del elemento ‘textBox’ que pertenece al ‘form’. Este es el código completo de la página:

Los detalles a destacar son:

  • El elemento tipo ‘text’ lleva un ‘id’ definido (en este caso id=’textBox’)
  • El elemento que llama a javascript es un elemento tipo ‘button’ a traves del evento ‘onclick’
  • El ‘form se pasa como parámetro mediante la construcción ‘this.form’
  • El atributo ‘value’ de ‘textBox’ se extrae mediante ‘sform.textBox.value’



Otra forma de resolverlo sería sin pasar el ‘form’ como argumento, y recuperando el elemento ‘textBox directamente por su ‘id':


Las dos formas funcionan. La primera sería la forma antigua de hacerlo, mientras que esta segunda forma es la forma más actual de hacerlo.



Santiago Higuera (30 Agosto 2010)