Detectado javascript desactivado

Tienes el javascript desactivado en este momento. Muchas funciones podrían no funcionar. Por favor reactiva el javascript para obtener una funcionalidad completa.

Ayuda con un Array en Javascript + PHP

Comenzado por enecumene , abr 03 2009 06:07

Por favor identifícate para responder

3 respuestas en este tema

#1 enecumene

Webmaster

Administrador
7.419 mensajes

LocationRepública Dominicana

Escrito 03 abril 2009 - 06:07

Pues eso, este script que muestra una imagen cada x tiempo:

html5

<script type=\"text/javascript\">
 
var flashyshow=new flashyslideshow({ //create instance of slideshow
	wrapperid: \"myslideshow\", //unique ID for this slideshow
	wrapperclass: \"flashclass\", //desired CSS class for this slideshow
	imagearray: [
		[\"1.png\", \"http://www.installfest.net/\", \"_new\", \"\"],
		[\"2.png\", \"http://cl.sun.com/sunnews/events/2009/apr/sunvision/\", \"_new\", \"\"]
	],
	pause: 10000, //pause between content change (millisec)
	transduration: 1000 //duration of transition (affects only IE users)
})
 
</script>

Como ven en la parte imagearray hay dos imagenes pero se insertan de manera directa, ahora, quisiera sacarla desde una base de datos MySQL con una consulta y hacer una especie de while y mezclarlo dentro de ese script y que en el último registro no incluya la coma. No sé si me hice entender las puedo repetir con gusto.

Saludos.

0

Volver arriba

#2 Héctor Randolph

501st Legion

Moderadores
664 mensajes

LocationMéxico

Escrito 04 abril 2009 - 12:47

Hola Fernando

Elaboré una clase en PHP que sirve para rellenar plantillas, me parece que puede servirte para lograr este script.

Te explico brevemente y espero no complicarme mucho.

Te estoy poniendo adjunto un archivo que contiene la clase plantilla y su única función es abrir un documento *.tpl en el cual tu colocas toda la estructura de tu página HTML. Después puedes añadir campos y bloques en esa plantilla que serán sustituidos en tiempo de ejecución por valores provenientes de una base de datos.

Por ejemplo, puedes crear una achivo digamos ejemplo.tpl con tu código HTML y para insertar un campo colocas el identificador de ese campo entre llaves

html5

<html>  
<body>
  <p>{mi_campo}</p>
</body>
</html>

Luego desde PHP haces algo como esto:

php

  $tpl = new plantilla('ejemplo.tpl');
 
  $tpl->SetVariable('mi_campo','Este es un texto que proviene de la base de datos');
  echo $tpl; // Vuelca el contenido de la plantilla en pantalla

El resultado final es una página HTML de la siguiente forma:

html5

<html>  
<body>
  <p>Este es un texto que proviene de la base de datos</p>
</body>
</html>

Regularmente obtenemos múltiples filas desde una tabla y deseamos enviarlas a pantalla. Para resolver esto, inventé un mecanismo llamado 'bloques' en los cuales puedes crear un tipo de bloque que se repetirá N veces mientras recorres los registros de una tabla, por ejemplo:

html5

<html>  
<body>
  <table><tablebody>
     <tr>
       <th>Encabezado</th>
    </tr>
<!-- #define_bloque mis_datos -->
    <tr>
     <td>{una_celda}</td>
    </tr>
<!-- #end_bloque -->
  </tablebody></table>
</body>
</html>

En este caso sobre el archivo ejemplo.tpl hemos creado un bloque llamado mis_datos, es importante respetar la sintaxis, es decir se deben usar las etiquetas  y  para que la plantilla reconozca este bloque. Se pueden agregar múltiples bloques en una misma plantilla

Ahora solo resta rellenar la plantilla desde PHP

php

  $tpl = new plantilla('ejemplo.tpl');
 
  $block = $tpl->getBloque('mis_datos');
  $str = '';
 
  //Ahora se rellenas las variables contenidas en el bloque
  $block->SetVariable('una_celda','Esta es la fila 1');
  $str.=$tpl->flush();
  //El proceso se puede repetir N veces
  $block->SetVariable('una_celda','Esta es la fila 2');
  $str.=$tpl->flush();
 
  $block->SetVariable('una_celda','Esta es la fila 3');
  $str.=$tpl->flush();
 
  $tpl->setBloque('mis_datos',$str);
 
  echo $tpl;

Lo que obtenemos al final es una página HTML con tres filas dentro de una tabla, obviamente los valores pueden ser tomados de una base de datos.

html5

<html>  
<body>
  <table><tablebody>
     <tr>
       <th>Encabezado</th>
    </tr>
    <tr>
     <td>Esta es la fila 1</td>
    </tr>
    <tr>
     <td>Esta es la fila 2</td>
    </tr>
    <tr>
     <td>Esta es la fila 3</td>
    </tr>
  </tablebody></table>
</body>
</html>

0

Volver arriba

#3 Héctor Randolph

501st Legion

Moderadores
664 mensajes

LocationMéxico

Escrito 04 abril 2009 - 12:58

Después de tanta complicación vamos a lo importante, esto como dije lo puedes aplicar para resolver tu problema de la siguiente manera:

Primero creas tu archivo de plantilla (TPL)

html5

<html>
<script type=\"text/javascript\">
 
var flashyshow=new flashyslideshow({ //create instance of slideshow
	wrapperid: \"myslideshow\", //unique ID for this slideshow
	wrapperclass: \"flashclass\", //desired CSS class for this slideshow
	imagearray: [
<!-- #define_bloque datos_imagen -->
	[\"{nombre_archivo}\", \"{url}\", \"_new\", \"\"]{separador}
<!-- #end_bloque -->
	],
	pause: 10000, //pause between content change (millisec)
	transduration: 1000 //duration of transition (affects only IE users)
})
 
</script>
<body>
 
</body>
</html>

Se puede observar que he creado un bloque llamado datos_imagen y este bloque tiene tres campos que son {nombre_archivo},{url},{separador}.

Ahora debemos rellenar la plantilla con los datos obtenidos desde la base de datos, sin embargo, para este ejemplo los voy a tomar desde un arreglo con dimensión fija.

php

<?php
require_once ('plantilla.class.php');
 
$datos = array( array(	'imagen'=>'1.PNG',
                      'url'   =>'http://1.html'),
                      array(	'imagen'=>'2.PNG',	
                      'url'   =>'http://2.html'),				
                      array(	'imagen'=>'3.PNG',
                      'url'   =>'http://3.html'),
                      array(	'imagen'=>'4.PNG',
                      'url'   =>'http://4.html'));
 
       $tpl = new plantilla('mypagina.tpl');
       $block = $tpl->getBloque('datos_imagen');
       $str='';
       $i=0;
 
        $cont=count($datos);
 
        foreach ($datos as $item){
                $block->setVariable('nombre_archivo',$item['imagen']);
                $block->setVariable('url',$item['url']);
                $i++;
                if ($i<$cont)
                       $block->setVariable('separador',',');
                else
                       $block->setVariable('separador','');
                $str .= $block->flush();
 
       }
 
       $tpl->setBloque('datos_imagen',$str);
       echo $tpl;
 
?>

Como puedes observar estoy enviando el nombre de la imagen, una url y además el campo {separador} me funciona para determinar cuando lleva una coma y cuando no la lleva.

El resultado final en HTML es el siguiente:

html5

<html>
<script type=\"text/javascript\">
 
var flashyshow=new flashyslideshow({ //create instance of slideshow
	wrapperid: \"myslideshow\", //unique ID for this slideshow
	wrapperclass: \"flashclass\", //desired CSS class for this slideshow
	imagearray: [
 
	[\"1.PNG\", \"http://1.html\", \"_new\", \"\"],
 
	[\"2.PNG\", \"http://2.html\", \"_new\", \"\"],
 
	[\"3.PNG\", \"http://3.html\", \"_new\", \"\"],
 
	[\"4.PNG\", \"http://4.html\", \"_new\", \"\"]
 
	],
	pause: 10000, //pause between content change (millisec)
	transduration: 1000 //duration of transition (affects only IE users)
})
 
</script>
<body>
 
</body>
</html>

Espero que te sea de utilidad, te dejo los fuentes que utilicé para el ejemplo incluida la clase plantilla.

Saludos

Archivos adjuntos

403_.zip 2,43KB 1 descargas

0

Volver arriba

#4 Héctor Randolph

501st Legion

Moderadores
664 mensajes

LocationMéxico

Escrito 04 abril 2009 - 01:23

Por cierto, el archivo de plantilla no debe ser por fuerza una página HTML completa. Al final estamos tratando con simples cadenas de texto.

Lo digo porque seguramente tu ya tienes una plantilla elaborada con cierto formato y entonces lo único que necesitas es crear tu plantilla con la parte que te interesa que es la de javascript y el arreglo de imagenes. Después esta cadena concatenada con otras cadenas en el orden correcto, te darán tu página completa.

Saludos

0

Volver arriba

Volver a PHP, Ajax, Javascript y HTML

Ayuda con un Array en Javascript + PHP

#1 enecumene

#2 Héctor Randolph

#3 Héctor Randolph

Archivos adjuntos

#4 Héctor Randolph

Iniciar sesión