Algunas ocasiones hemos tratado un tema similar, pero más simple que el que vamos a desarrollar en este artículo y es que, el asunto que nos ocupa, no deja de ser una de las preguntas más comunes de los desarrolladores que están empezando a trabajar combinando los dos lenguajes más comunes, del mundo de la creación de webs. Se trata de comunicar entre PHP y Javascript, para pasar información de un lado a otro.

Por ejemplo, podéis encontrar en DesarrolloWeb.com una FAQ sobre el paso de variables desde PHP a Javascript y al contrario. Pero, como verás a continuación, vamos a ir un poco más allá y resolver un caso bastante más complejo de comunicación entre los lenguajes.

En este artículo vamos a ver detalladamente cómo crear un array bidimensional en el lenguaje Javascript desde un script en PHP. Utilizaremos PHP para crear el array y MySQL para rellenarlo con datos obtenidos de una base de datos. Esto lo hacemos así para que el artículo y el ejemplo sean lo más reales posibles de cara a un proyecto web.

Antes de empezar necesitamos tener claro lo que es un array bidimensional, manejar bien Javascript y PHP.

Vamos a empezar creándonos un supuesto para entender mejor el ejemplo. Partimos de que tenemos que mostrar el nombre de una persona y su foto. Os preguntareis para que necesitamos Javascript en este ejemplo, bien pues muy sencillo, queremos mostrar usuarios, con su nombre y foto, uno detrás de otro, pero en la misma zona, es decir, como si pasáramos diapositivas.

Tenemos que decir que en este artículo solo nos centraremos en la parte de crear y cargar el array con los datos necesarios para dicho supuesto. Si estáis interesados en crear un supuesto parecido al citado podéis ver los siguientes artículos:

• Pase de diapositivas DHTML
• Slide de imágenes Mootools
• O incluso podéis adaptar el plugin jQuery de ticker de noticias

Si os fijáis en los dos primeros artículos utilizamos array en Javascript, aunque ya los tenemos rellenos a mano, pero podríamos aplicar este artículo, para poder obtener los datos desde PHP, si los datos los tuviéramos en una base de datos MySQL.

Para realizar este ejemplo vamos a crear un archivo PHP llamado index.php y realizamos nuestra consulta a la base de datos. El código sería algo como esto:

<?
$ssql="select * from usuario";
   $rs_p=mysql_query($ssql);

A continuación tendríamos que empezar a crear nuestro Javascript, simplemente abriendo etiquetas de Javascript y primera parte del array.

if(mysql_num_rows($rs)>=1){
      echo '<script language="javascript">';
       echo 'var imagenes = [ ';

Ahora tan sólo nos queda ir rellenando el array con los datos obtenidos en la consulta SQL.

while($fila=mysql_fetch_object($rs)){
         echo ' ["imagen/'.$fila->ruta_imagen.'"';
         
      echo ',"'.$fila->nombre.'"]';
      }

Y para finalizar cerramos el array, el script Javascript y el archivo PHP:

      echo '];';
   }
   echo '</script>';

?>

A continuación os dejo lo que sería el código completo para que podáis entenderlo mejor.

<?
   $ssql="select * from usuario";
   $rs_p=mysql_query($ssql);
   if(mysql_num_rows($rs)>=1){
      echo '<script language="javascript">';
       echo 'var imagenes = [ ';
      while($fila=mysql_fetch_object($rs)){
         echo ' ["imagen/'.$fila->ruta_imagen.'"';
         
      echo ',"'.$fila->nombre.'"]';
      }
      echo '];';
   }
   echo '</script>';

?>

Con esto tendríamos nuestro array Javascript creado y cargado con los datos de la base de datos. A partir de aquí podemos darle el uso que queramos dentro de nuestras webs.