Archive for the ‘Desarrollo web’ Category

MySQL: Recoger el último ID insertado en la base de datos.

Muchas veces, creamos tablas con ID autonuméricos en nuestra base de datos mySQL, y también algunas veces necesitamos recoger el identificador autonumérico que se acaba de insertar para poder trastear con él y asociar/relacionar registros de otras tablas.

Hay el metodo rudo que es:

  1. Ejecutamos un select sobre la tabla que contiene el ID autonumérico y lo ordenamos descendentemende por el ID, de manera, que el primer registro que nos devuelte este recordset, es el que se acaba de insertar.
  2. Metemos este ID en una variable y tachan... ya disponemos de el último ID autonumérico que se acaba de insertar.

El problema de esto, es que generamos un trafico de ida y venida bastante absurdo en la base de datos, en relación a los datos que necesitamos recuperar, un simple ID.

Pero como casi todo en este beautiful world, hay un modo mucho mas sencillo de hacerlo:

  1. Despues de ejecutar nuestro INSERT contra la tabla X, solo tenemos que asignar mysql_insert_id() a una variable.

Ejemplo:

PHP:
  1. $_sql = "INSERT INTO tabla (nombre,apellido) VALUES ('Marc','Grijander');"
  2. $insertar = mysql_query($_sql);
  3.  
  4. $ultimo_id = mysql_insert_id();

Que opción os gusta mas? ;)

Referencia a mysql_insert_id(); en php.net

JS: Actualizar ventana padre desde pop-up.

Muchas veces, abrimos una ventana flotante donde hemos puesto un formulario desde el cual actualizamos datos. Casi siempre suele ser un listado de datos, registros listados de una base de datos y el pop-up suele contener un pequeño FROM para actualizar datos básicos.

Solemos abrir este pop-up para actualizar datos y cuando hacemos esto, lo ideal es que la ventana donde esta el listado (padre del pop-up que hemos abierto) se actualice al hacer el submit de los datos y de este modo podamos ver el resultado sin tener que forzar la recarga de dicho listado con un click o usando cualquier atajo de teclado.

Esto es muy fácil de hacer desde javascript, solamente necesitamos una linea de código. Ésta linea tenemos que añadirla al final de la página que procesa el PHP o ASP, vamos el lenguaje de servidor que realice la inserción de los datos en la base de datos.

JAVASCRIPT:
  1. window.opener.location.reload();

Fácil, no? Pues si además queremos que una vez recargada la página padre el pop-up se cierre automáticamente, solamente le tenemos que añadir una linea mas a este código.

JAVASCRIPT:
  1. window.opener.location.reload();
  2. window.close();

Cabe destacar que este código sirve para cualquier página que esté escrita en lenguaje script, ASP o PHP ya que dicho código es javascript y se interpreta íntegramente en el navegador del cliente/usuario.

JS: Efectos javascript sin el uso de frameworks

Hoy por hoy tenemos a la orden del día unos cuantos frameworks (jquery,scriptaculous,mootools...) con los cuales es cuestión de minutos hacer que una capa (div) se mueva de un lado al otro, de dos piruetas y cambie de color mientras parpadea en dirección a cualquier parte de la pantalla.

Pues he encontrado un enlace con unos pocos efectos realizados sin el uso de ningún framework.

Es algo a tener en cuenta si no somos muy partidarios de usar según que librerias.

super.acualicio.us - Javascript sin frameworks

Fuente: freakevolution

JS: image menu (menú con imagenes)

Nunca está de menos tener este recurso a mano, en cuestión de minutos puedes conseguir un menú con imagenes rápido, sencillo de implementar y animado.

Este menú seguramente que ya lo habías visto anteriormente en alguna otra web, incluso lo habrás visto echo en flash. Pero como no, siempre hay una alternativa al flash y ésta, está realmente bien.

El núcleo del menú lo gestiona la librería mootools, de manera que es garantía de sencillez y buen código, vamos que el procesador de  nuestros visitantes no va a empezar a sacar humo cuando empiecen a navegar por nuestra web....

Su aplicación a modo de código es tan sencilla como poner esto:

JAVASCRIPT:
  1. var myMenu = new ImageMenu('imageMenu', {
  2.     openWidth:310,
  3.     onOpen:function(e,i){console.log(e)}
  4. });

Para descargar el código, ver las opciones de que dispone y ver su funcionamiento antes de implementarlo solo has de acceder a su web Pathfusion : image menu

PathFusion : image menu

CSS: Centrar nuestra web en el navegador.

Continuando con la línea de la última entrada vamos a mostrar un código muy sencillo para conseguir que nuestra web o el contenido que queramos ya sea imagen, texto o contenido del tipo multimedia , lo podamos centrar en el navegador. Utilizando el código que seguidamente explicaremos conseguiremos un centrado horizontal y vertical sea cual sea la resolución de pantalla de los usuarios ya que si redimensionamos el navegador seguirá ajustándose al centro.

La base de este código reside en el posicionamiento absoluto y jugar con los margenes izquierdo y superior negativos. Echando mano de la calculadora tendrémos que sacar unos valores equivalentes a la mitad de las dimensiones del contenido que queremos centrar:

Por ejemplo un contenido de 500 x 450 pixels.

  • La mitad del width -250px (margen negativo superior)
  • La mitad del height -225px (margen negativo izquierdo)

Pasaremos a ver el código CSS y a comentarlo así quedará mucho mas claro. Tomaremos como base una capa con un width(ancho) de 500 pixels y un height(alto) 450 pixels.

(more...)

CSS: Columnas con Listas (UL,LI)

Una de las cosas que mas me gusta usar de los CSS son las listas (UL, OL) con ellas puedes listar infinidad de contenidos de la forma que desees y lo mejor de todo tabular y espaciar dichos contenidos con una facilidad enorme con un código muy simplificado.

Pero ahora no vamos ha hablar de los listados, si no de como hacer columnas con textos utilizando listas.


(more...)

Ajax: Actualiza periodicamente el contenido de un div

Una de las funciones disponibles con la librería prototype es Ajax.PeriodicalUpdater() y provee de un método sencillo para realizar llamadas remotas en intervalos de tiempo definidos.

La parte del JavaScript es bien sencilla, solo necesitamos una copia de la librería prototype y la siguiente función definida en el head, aplicandole despues el comportamiento al body,

JavaScript:
  1. <script type="text/javascript">
  2. function actualizacion() {
  3. var target = $('muestra');
  4. if (!target) return false;
  5. new Ajax.PeriodicalUpdater(target, 'script.php',{frequency:'3'});
  6. }
  7. Event.observe(window, 'load', actualizacion, false);
  8. </script>

Para que todo esto funcione, tenemos que añadir un bloque div con la id=”muestra” que sera donde aparezca la información generada desde el script php.