domingo, 30 de noviembre de 2014

Aprende que son los Tooltip con javascript


Los tooltips son pequeños recuadros de información que aparecen al posicionar el ratón sobre un elemento. Normalmente se utilizan para ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario pequeños mensajes de ayuda. Los tooltips son habituales en varios elementos de los sistemas operativos:
Aspecto de un tooltip típico en el Sistema Operativo
Figura 8.7 Aspecto de un tooltip típico en el Sistema Operativo
Realizar un tooltip completo mediante JavaScript es una tarea muy compleja, sobre todo por la dificultad de mostrar el mensaje correctamente en función de la posición del ratón. Afortunadamente, existen scripts que ya están preparados para generar cualquier tipo de tooltip. La librería que se va a utilizar se denomina overLIB, y se puede descargar desde su página web principal: http://www.bosrup.com/web/overlib/
La descarga incluye todos los scripts necesarios para el funcionamiento del sistema de tooltips, pero no su documentación, que se puede consultar en: http://www.bosrup.com/web/overlib/?Documentation. La referencia de todos los comandos disponibles se puede consultar en: http://www.bosrup.com/web/overlib/?Command_Reference
A continuación se indican los pasos necesarios para incluir un tooltip básico en cualquier página web:
1) Enlazar los archivos JavaScript requeridos:
<script type="text/javascript" src="js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
Se descomprime el archivo descargado, se guarda el archivo JavaScript en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/) y se enlaza directamente desde la cabecera de la página HTML. Los tooltips sólo requieren que se enlace un único archivo JavaScript (overlib.js). El comentario que incluye el código XHTML es el aviso de copyright de la librería, que es obligatorio incluirlo para poder usarla.
2) Definir el texto que activa el tooltip y su contenido:
<p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>
Los tooltip se incluyen como enlaces de tipo <a> para los que se definen los eventos onmouseover yonmouseout. Cuando el ratón se pasa por encima del enlace anterior, se muestra el tooltip con el aspecto por defecto:
Aspecto por defecto del tooltip creado con la librería overLIB
Figura 8.8 Aspecto por defecto del tooltip creado con la librería overLIB
La librería overLIB permite configurar completamente el aspecto y comportamiento de cada tooltip. Las opciones se indican en cada tooltip y se incluyen como parámetros al final de la llamada a la función overlib():
<a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER);" onmouseout="return nd();">consectetuer adipiscing elit</a>
El parámetro CENTER indica que el tooltip se debe mostrar centrado respecto de la posición del ratón:
Centrando el tooltip respecto de la posición del ratón
Figura 8.9 Centrando el tooltip respecto de la posición del ratón
Otra opción que se puede controlar es la anchura del tooltip. Por defecto, su anchura es de 200px, pero la opción WIDTH permite modificarla:
<a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER, WIDTH, 120);" onmouseout="return nd();">consectetuer adipiscing elit</a>
El valor de la nueva anchura se indica en el parámetro que va detrás de WIDTH. El nuevo aspecto deltooltip es el siguiente:
Definiendo la anchura que muestra el tooltip
Figura 8.10 Definiendo la anchura que muestra el tooltip
El uso de los parámetros de configuración en la propia llamada a la función que muestra los tooltipsno es recomendable cuando el número de parámetros empieza a ser muy numeroso. Afortunadamente, overLIB permite realizar una única configuración que se utilizará para todos lostooltips de la página.
La configuración global consiste en llamar a la función overlib_pagedefaults() con todos los parámetros de configuración deseados. Por tanto, el código JavaScript necesario para realizar los cambios configurados hasta el momento sería:
<script type="text/javascript" src="js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<script type="text/javascript">
overlib_pagedefaults(CENTER, WIDTH, 120);
</script>
 
<p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>
Utilizando esta configuración global, se va a modificar por último el aspecto del tooltip para hacerlo más parecido a los tooltips de los sistemas operativos:
Tooltip creado con la librería overLIB y personalizado para que parezca un tooltip de Sistema Operativo
Figura 8.11 Tooltip creado con la librería overLIB y personalizado para que parezca un tooltip de Sistema Operativo
En el ejemplo anterior se ha modificado el tamaño y tipo de letra y el color de fondo del tooltipmediante la siguiente configuración:
overlib_pagedefaults(WIDTH,150,FGCOLOR,'#ffffcc',BGCOLOR,'#666666',TEXTFONT,"Arial, Helvetica, Verdana",TEXTSIZE,".8em");
Ejercicio 19
Mejorar el tooltip propuesto añadiendo las siguientes características:
  1. Que el tooltip no se muestre instantáneamente, sino que transcurra un cuarto de segundo hasta que se muestre (pista: DELAY)
  2. Que exista una separación horizontal de 15 píxel entre el puntero del ratón y el tooltip (pista:OFFSETX)
  3. Que el tooltip se muestre en la parte superior del puntero del ratón y no en la parte inferior (pista: ABOVE)

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

aplicaciones con Calendario en php


Cuando una aplicación muestra un formulario para que el usuario inserte sus datos, la información más complicada de obtener siempre suelen ser los números de teléfono y las fechas. El motivo es que existen muchas formas diferentes de indicar estos datos. Las fechas por ejemplo se pueden indicar como dd/mm/aadd/mm/aaaaaaaa/mm/dddd-mm-aadd mm aaaa, etc.
Los métodos más utilizados para que el usuario introduzca la información relativa a una fecha suelen ser un cuadro de texto en el que tiene que insertar la fecha completa (indicándole el formato que debe seguir) o un cuadro de texto para el día, una lista desplegable para el mes y otro cuadro de texto para el año.
En cualquier caso, para el usuario suele ser más cómodo que la aplicación incluya un calendario en el que pueda indicar la fecha pinchando sobre el día elegido:
Aspecto de un calendario creado con JavaScript
Figura 8.1 Aspecto de un calendario creado con JavaScript
Además, este método es menos propenso a cometer errores, ya que si el calendario está bien construido, no es posible introducir fechas inválidas y tampoco es posible insertar las fechas en un formato incorrecto.
No obstante, realizar un calendario completo en JavaScript no es una tarea trivial, por lo que no se va a estudiar su desarrollo completo. Afortunadamente, existen scripts gratuitos para mostrar calendarios y que permiten su uso libre incluso en aplicaciones comerciales.
De entre todos los calendarios disponibles, uno de los más completos es el desarrollado por la empresa DynArch, que se puede acceder desde su página web oficial: http://www.dynarch.com/projects/calendar/ y que se puede descargar gratuitamente desde http://sourceforge.net/projects/jscalendar/ El archivo descargado incluye todos los scripts necesarios, su documentación, ejemplos de uso, diferentes estilos CSS para el calendario, etc.
A continuación se indican los pasos necesarios para incluir un calendario básico en cualquier página web:
1) Enlazar los archivos JavaScript y CSS requeridos:
Se descomprime el archivo descargado, se guardan los archivos JavaScript y CSS en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/ y los archivos CSS en el directorio css/) y se enlazan directamente desde la cabecera de la página HTML.
<head>
...
<style type="text/css">@import url("css/calendar-estilo.css");</style>
<script type="text/javascript" src="js/calendar.js" />
<script type="text/javascript" src="js/calendar-es.js" />
<script type="text/javascript" src="js/calendar-setup.js" />
...
</head>
El calendario incluye traducciones a más de 40 idiomas, entre los que se encuentra el español. Para mostrar el calendario en un determinado idioma, tan solo es necesario enlazar el archivo del idioma correspondiente. Las traducciones se encuentran en el directorio lang y su formato es calendar-XX.js, donde XX es el código del idioma.
2) Añadir el código XHTML necesario para el elemento que va a mostrar el calendario:
<p>Introduce la fecha pulsando sobre la imagen del calendario</p>
<input type="text" name="date" id="fecha" readonly="readonly" />
<img src="calendario.png" id="selector" />
En este caso, el calendario está formado por dos elementos:
  • Un cuadro de texto llamado fecha y que almacena el valor introducido por el usuario. Como se le ha asignado un atributo readonly="readonly", el usuario no puede modificar su valor.
  • Una pequeña imagen o icono que se utiliza para activar el calendario. Cuando el usuario pincha con el ratón sobre la imagen, se muestra el calendario de JavaScript.
3) Configurar el calendario:
<script type="text/javascript">
window.onload = function() {
Calendar.setup({
inputField: "fecha",
ifFormat: "%d / %m / %Y",
button: "selector"
});
}
</script>
Una vez enlazados los archivos del calendario y preparado el código XHTML, es necesario inicializar y configurar el calendario. La configuración del calendario consiste en establecer el valor de alguna de sus propiedades. Las propiedades básicas imprescindibles son:
  • inputField: se trata del atributo id del elemento en el que se mostrará la fecha seleccionada, en este ejemplo sería fecha.
  • ifFormat: formato en el que se mostrará la fecha una vez seleccionada (en este caso se ha optado por el formato dd / mm / aaaa).
  • button: atributo id del elemento que se pulsa (botón, imagen, enlace) para mostrar el calendario de selección de fecha. En este ejemplo, el id de la imagen es selector.
Después de esta configuración básica, el calendario ya puede utilizarse en la aplicación:
1) Aspecto por defecto del selector de calendario:
Elementos XHTML del calendario JavaScript: cuadro de texto e icono
Figura 8.2 Elementos XHTML del calendario JavaScript: cuadro de texto e icono
2) Al pinchar una vez sobre la imagen del calendario:
Aspecto inicial del calendario JavaScript cuando se abre por primera vez
Figura 8.3 Aspecto inicial del calendario JavaScript cuando se abre por primera vez
Se muestra el calendario con el aspecto e idioma establecidos y aparece resaltada la fecha del día actual.
3) Se selecciona la fecha deseada:
Seleccionando una fecha en el calendario JavaScript
Figura 8.4 Seleccionando una fecha en el calendario JavaScript
4) Después de pinchar con el ratón sobre la fecha deseada:
El cuadro de texto muestra la fecha establecida por el usuario con el calendario JavaScript
Figura 8.5 El cuadro de texto muestra la fecha establecida por el usuario con el calendario JavaScript
Al pulsar con el ratón sobre la fecha deseada, el calendario se cierra automáticamente y el cuadro de texto muestra la fecha seleccionada con el formato indicado en la configuración del calendario. Si se vuelve a abrir el calendario para seleccionar otra fecha, se mostrará resaltada la fecha del día seleccionado y no la fecha del día actual.
Ejercicio 18
Mejorar el calendario creado añadiendo las opciones necesarias para que muestre el siguiente aspecto:
Aspecto mejorado del calendario JavaScript
Figura 8.6 Aspecto mejorado del calendario JavaScript
  1. Que no se muestre el número de la semana en el calendario (pista: weekNumbers)
  2. Modificar el formato en el que se muestra la fecha seleccionada. El formato original es 21 / 08 / 2007 (indicado como %d / %m / %Y). El formato deseado es Martes, 21 de Agosto de 2007(pistas: %A%B)
  3. El nuevo formato de fecha es mucho más agradable para los usuarios, pero más incómodo para los scripts que tienen que manejarlo. Afortunadamente, el calendario dispone de la posibilidad de guardar dos valores: un valor para mostrar a los usuarios y otro valor para que lo procesen los scripts. Cuando el usuario seleccione una fecha, la fecha con el formato original se debe almacenar en un campo oculto de formulario y el otro formato más largo debe mostrar al usuario en un elemento de tipo <span> (pistas: displayAreadaFormat)


Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

sábado, 29 de noviembre de 2014

Aprende sobre la función count con php


Antes de poder recorrer un array, debemos saber cuál es su tamaño para poder recorrerlo. Supongamos que un array tiene tres elementos: tenemos que dar una instrucción para que se extraiga el valor asociado a cada uno de los elementos del array, que normalmente será algo similar a “para cada uno de los tres elementos del array, extraer su valor”.
 
Sin embargo, si el array tiene 24 elementos, la instrucción será del tipo “para cada uno de los veinticuatro elementos del array, extraer su valor”. Como vemos, muchas veces nos es necesario saber el número de elementos que hay en el array para poder recorrerlo, y para ello nos va a resultar útil la función count.
La función count devuelve el número de elementos que hay en el array. Es decir para un array de 4 elementos, la función count devolverá el número 4. Recuerda que si se trata de valores numéricos de índices, los cuatro valores numéricos serán normalmente 0, 1, 2 y 3 en lugar de 1, 2, 3 y 4.
Escribe ahora este código y guárdalo con un nombre de archivo como ejemplo2.php. A continuación, sube el fichero al servidor y visualiza el resultado.

<?php //Ejemplo count aprenderaprogramar.com
$estacion[0] = "Primavera";
$estacion[1] = "Verano";
$estacion[2] = "Otoño";
$estacion[3] = "Invierno";
echo count($estacion);
?>


Puedes comprobar que se muestra el número 4 porque el array tiene 4 elementos.


RECORRIDOS DE ARRAYS UNIDIMENSIONALES
Ahora que ya conocemos qué son los arrays, debemos conocer cómo recorrerlos para extraer o comprobar los valores que contiene cada uno de los elementos del array. Esta es una tarea habitual en programación que en general va a tener gran utilidad para nosotros.
Lo arrays se pueden recorrer de muchas formas, nosotros no las explicaremos todas. Trataremos de ver en principio las más habituales y sencillas.

Recorrido de arrays mediante for
Escribe ahora este código y guárdalo con un nombre de archivo como ejemplo3.php. A continuación, sube el fichero al servidor y visualiza el resultado.

<?php //Ejemplo arrays aprenderaprogramar.com
$array[0] = "Uno";
$array[1] = "Dos";
$array[2] = "Tres";
$array[3] = "Cuatro";
$array[4] = "Cinco";
$array[5] = "Seis";
$array[6] = "Siete";
$array[7] = "Ocho";
for($i=0;$i<count($array);$i++) {
echo $array[$i].'<br />';
}
?>



Como ejercicio y teniendo en cuenta lo explicado en las entregas anteriores sobre los distintos tipos de instrucciones de repetición, escribe el código que dé lugar al mismo resultado que el ejemplo anterior pero usando la instrucción while y comprueba que obtienes el mismo resultado.


CONOCER COUNT
Ejecuta este código:

<?php //Ejemplo arrays aprenderaprogramar.com
$array[5] = "Uno";
$array[6] = "Dos";
$array[7] = "Tres";
$array[8] = "Cuatro";
$array[9] = "Cinco";
$array[10] = "Seis";
$array[11] = "Siete";
$array[12] = "Ocho";
echo 'Elementos inicializados en el array: '.count($array).'<br/>';
for($i=0;$i<count($array);$i++) {
echo $array[$i].'...<br/>';
}
echo $array[15].'aaa<br/>';
echo count($otroArray[14][33]).' elementos<br/>';
?>


El resultado obtenido será el siguiente:
Elementos inicializados en el array: 8
...
...
...
...
...
Uno...
Dos...
Tres...
aaa
0 elementos


Analicemos lo que está ocurriendo. El array $array no tiene definidos cuáles son sus elementos de índice 0, 1, 2, 3 y 4. En cambio sí tiene definidos valores para sus elementos de índice 5, 6, 7, 8, 9, 10, 11 y 12. Hay 8 elementos con valores definidos pero sus índices no son 0, 1, 2, 3, 4, 5, 6, 7 como es lo habitual, sino que son 5, 6, 7, 8, 9, 10, 11 y 12.
Al ejecutar el for comenzando con un valor de la variable de control igual a cero, se ejecuta echo $array[0].’…<br/>’; Al no tener un valor asignado, $array[0] devuelve vacío y simplemente se muestran tres puntos por pantalla. Lo mismo ocurre con los índices 1, 2, 3, 4 y sólo es al llegar al índice cinco cuando se muestran valores por pantalla.
Sin embargo, sólo se mostrarán los elementos con índice 5 a 8 del array, quedando el resto de elementos sin ser mostrado.
Además comprobamos que podemos invocar a elementos del array por encima del índice máximo definido sin obtener error, y que incluso podemos invocar a un nombre de array que no hemos declarado ni utilizado, con cualquier índice, sin obtener error.
En este ejemplo podríamos mostrar todos los elementos del array realizando un “pequeño cambio”:
for($i=5;$i<count($array)+5;$i++)
Sin embargo esta solución no es satisfactoria porque no la podemos aplicar como solución para recorrer cualquier array.
A modo de resumen diremos lo siguiente:
count nos devuelve el número de elementos inicializados del array.
Si los índices del array no son secuencialmente 0, 1, 2, 3 , etc. el recorrido con un for tradicional puede resultar no satisfactorio, por lo que habremos de pensar en otras alternativas para recorrer el array. Hablaremos de esto más adelante.


COUNT CON ARRAYS MULTIDIMENSIONALES
En el caso de arrays de más de una dimensión, la función count devuelve el número de elementos que hay en un nivel del array definido y para un índice definido. Llamamos nivel del array a cada uno de los corchetes existentes en el array. Por ejemplo si hemos definido $ejem[2][5][1][6][2] = 33; y $ejem[2][5][3][1][9] = 55; decimos que en el primer nivel del array, correspondiente al primer índice, hay un solo índice: el 2. En el segundo nivel del array para índice 2 hay un solo índice: el 5. En el tercer nivel del array con índice 1 hay un solo índice: el 6. En el tercer nivel del array con índice 3 hay un solo índice: el 1. En el cuarto nivel del array con índice 6 hay un solo índice: el 2. En el cuarto nivel del array con índice 1 hay un solo indice: el 9.
Con un ejemplo comprenderemos mejor el funcionamiento de count en arrays multidimensionales. Ejecuta este código:

<?php //Ejemplo arrays aprenderaprogramar.com
$miEspArray[6]=99;
$miEspArray[22]=87;
echo 'Numero de elementos de miEspArray es '.count($miEspArray).'<br/>';
echo "--------------------";
$array2[0][0][0] = "Prueba1";
$array2[0][0][1] = "Prueba2";
$array2[0][0][2] = "Prueba3";
$array2[0][1][0] = "Prueba4";
$array2[0][1][1] = "Prueba5";
$array2[1][0][1] = "Prueba6";
$array2[1][1][2] = "Prueba7";
$array2[1][2][1] = "Prueba8";
$array2[2][0][0] = "Prueba9";
$array2[2][0][1] = "Prueba10";
$array2[5][0][1] = "Prueba11";
echo '<br/>Numero de indices en el primer nivel: '.count($array2);
echo '<br/>Numero de indices en el segundo nivel de array[0]: '.count($array2[0]);
echo '<br/>Numero de indices en el segundo nivel de array[1]: '.count($array2[1]);
echo '<br/>Numero de indices en el segundo nivel de array[2]: '.count($array2[2]);
echo '<br/>Numero de indices en el segundo nivel de array[3]: '.count($array2[3]);
echo '<br/>Numero de indices en el segundo nivel de array[5]: '.count($array2[5]);
echo '<br/>Numero de indices en el tercer nivel de array[0][0]: '.count($array2[0][0]);
echo '<br/>Numero de indices en el tercer nivel de array[0][1]: '.count($array2[0][1]);
echo '<br/>Numero de indices en el tercer nivel de array[1][0]: '.count($array2[1][0]);
echo '<br/>Numero de indices en el tercer nivel de array[1][1]: '.count($array2[1][1]);
echo '<br/>Numero de indices en el tercer nivel de array[1][2]: '.count($array2[0][0]);
echo '<br/>Numero de indices en el tercer nivel de array[2][0]: '.count($array2[2][0]);
echo '<br/>Numero de indices en el tercer nivel de array[5][0]: '.count($array2[5][0]);
?>

El resultado obtenido será el siguiente:
Numero de elementos de miEspArray es 2
--------------------
Numero de indices en el primer nivel: 4
Numero de indices en el segundo nivel de array[0]: 2
Numero de indices en el segundo nivel de array[1]: 3
Numero de indices en el segundo nivel de array[2]: 1
Numero de indices en el segundo nivel de array[3]: 0
Numero de indices en el segundo nivel de array[5]: 1
Numero de indices en el tercer nivel de array[0][0]: 3
Numero de indices en el tercer nivel de array[0][1]: 2
Numero de indices en el tercer nivel de array[1][0]: 1
Numero de indices en el tercer nivel de array[1][1]: 1
Numero de indices en el tercer nivel de array[1][2]: 3
Numero de indices en el tercer nivel de array[2][0]: 2
Numero de indices en el tercer nivel de array[5][0]: 1


Fíjate que por ejemplo count($array2[0][1]) nos devuelve el número de elementos existentes de tipo $array2[0][1][x] donde x es cualquier índice, es decir, el número de elementos de tercer nivel del array para los índices iniciales 0 y 1.


RECORRIDO DE ARRAYS MULTIDIMENSIONALES
Para recorrer un array multidimensional, tendremos que ir anidando tantas estructuras repetitivas como dimensiones tenga el array. Con un ejemplo se verá todo mucho más claro.
Escribe ahora este código y guárdalo con un nombre de archivo como ejemplo4.php. A continuación, sube el fichero al servidor y visualiza el resultado.

<?php //Ejemplo arrays aprenderaprogramar.com
$array[0][0] = "Uno";
$array[0][1] = "Dos";
$array[1][0] = "Tres";
$array[1][1] = "Cuatro";
for($i=0;$i<count($array);$i++) {
for($j=0;$j<count($array[$i]);$j++) {
echo $array[$i][$j].'<br />';
}
}
echo "--------------------";
$array2[0][0][0] = "Cinco";
$array2[0][0][1] = "Seis";
$array2[0][0][2] = "Siete";
$array2[0][1][0] = "Ocho";
$array2[0][1][1] = "Nueve";
for($i=0;$i<count($array);$i++) {
for($j=0;$j<count($array[$i]);$j++) {
for($k=0;$k<count($array[$i][$j]);$k++) {
echo $array[$i][$j][$k].'<br />';
}
}
}
?>



Fíjate que para poder obtener el resultado deseado los elementos de los arrays deben estar definidos usando índices que comiencen en 0 y sean progresivamente 1, 2, 3, 4… Si no fuera así estos bucles, al estar definidos partiendo de 0, no funcionarían.
Fíjate también en la lógica de los bucles, por ejemplo el primer bucle lo podríamos leer así: para cada elemento desde 0 hasta el número de elementos de primer nivel, y para cada elemento desde 0 hasta el número de elementos de segundo nivel con el índice extraido previamente, mostrar el contenido del array. Si por ejemplo en el primer nivel tenemos dos índices que son 0 y 1, comenzaremos con el índice 0 y se verá para el índice 0 cuántos índices hay en el segundo nivel (son 2). De este modo lo primero que se mostrará son los índices [0][0] y [0][1]. Una vez completado el recorrido del índice 0 se pasa al índice 1 y se sigue el mismo proceso.
Nota: en algunas versiones o situaciones pedir un elemento no definido de un array puede dar lugar a que aparezca un error. Por ejemplo, si el elemento $array[2][3] no existe e hiciéramos una llamada a ese elemento como echo $array[2][3] podría aparecer un error tipo “undefined offset…” similar a éste:



Recorrido de arrays mediante foreach
PHP incorpora una forma “cómoda” para poder recorrer todos los elementos de un array. Esta forma se basa en el uso de la instrucción foreach.
Este tipo de recorridos se suele usar cuando obtenemos datos de una base de datos.
El tipo de array que nos suele devolver una consulta a la base de datos es similar al siguiente:
$datosArray = array(
                                array('nombre' => 'Antonio', 'apellidos' => 'Gómez Gómez', 'telefono' => '675832145'),
                                array('nombre' => 'Pedro', 'apellidos' => 'Guillén Gastón', 'telefono' => '674562178'),
                                array('nombre' => 'Dolores', 'apellidos' => 'Candela Quema', 'telefono' => '689765432'),
                                .
                                .
                                .
                                .
                                array('nombre' => 'Rubén', 'apellidos' => 'Guardia Jurado', 'telefono' => '654213896'),
);


Recuerda que la anterior forma de expresión es equivalente a esta otra:
$datosArray[0] ['nombre'] = 'Antonio'
$datosArray[0] ['apellidos'] = 'Gómez Gómez'
$datosArray[0] ['telefono'] = '675832145'
$datosArray[1] ['nombre'] = 'Pedro'
$datosArray[1] ['apellidos'] = 'Guillén Gastón'
$datosArray[1] ['telefono'] = '674562178'
$datosArray[2] ['nombre'] = 'Dolores'
$datosArray[2] ['apellidos'] = 'Candela Quema'
$datosArray[2] ['telefono'] = '689765432'


La diferencia está en que en el primer caso los índices del array son en algunos casos cadenas (se trata de arrays asociativos) mientras que en el segundo caso los índices del array son números (se trata de arrays tradicionales). En el primer caso los valores 0, 1 y 2 son asignados automáticamente por php porque no se ha especificado otra cosa.
Para recorrer arrays de forma cómoda se usa la instrucción foreach.
Escribe ahora este código y guárdalo con un nombre de archivo como ejemplo5.php. A continuación, sube el fichero al servidor y visualiza el resultado.

<?php //Ejemplo foreach aprenderaprogramar.com
$rows = array(
array(
'nombre' => 'Antonio', 'apellidos' => 'Gómez Gómez', 'telefono' => '675832145'),
array(
'nombre' => 'Pedro', 'apellidos' => 'Guillén Gastón', 'telefono' => '674562178'),
array(
'nombre' => 'Dolores', 'apellidos' => 'Candela Quema', 'telefono' => '689765432'),
array(
'nombre' => 'Rubén', 'apellidos' => 'Guardia Jurado', 'telefono' => '654213896')
);
foreach($rows as $valor) {
echo 'Nombre: ' . $valor['nombre'] . '<br />';
}
?>



Como podemos observar, vamos a ir recorriendo todas las filas y mostrando el nombre.
$valor es una variable temporal que sólo existe durante la ejecución de la instrucción foreach, y esta variable va tomando en cada repetición o iteración el valor del siguiente elemento dentro del array principal. En este caso, el elemento que hay dentro del array es otro array. A su vez, indicamos que para cada uno de los arrays extraidos en el recorrido, se nos muestre el item del array cuyo índice es ‘nombre’.
En este caso podríamos obtener el mismo resultado usando este código:
echo $rows[0]['nombre']. '<br />';
echo $rows[1]['nombre']. '<br />';
echo $rows[2]['nombre']. '<br />';
echo $rows[3]['nombre']. '<br />';

Pero piensa que para recorrer un array de varios cientos de elementos no resultará práctico escribirlos uno a uno…
Como ejercicio escribe el código que muestre los nombres y apellidos del array anterior.
Si te resulta un poco complicado el ejercicio anterior, prueba con este código que es más sencillo, y luego vuelve a revisar el código anterior.

<?php
$estacion[0] = "Primavera";
$estacion[1] = "Verano";
$estacion[2] = "Otoño";
$estacion[3] = "Invierno";
foreach($estacion as $valor) {
echo '& nbsp; & nbsp; & nbsp;'. $valor.'<br/>';
}
?>


El resultado que obtenemos es similar al que se ve en la siguiente imagen. Como puedes comprobar, la variable $valor (variable transitoria) va tomando en cada repetición del bucle el contenido de los elementos o items del array que estamos recorriendo.


EJERCICIO 1
Crea un array con nombre paisLimitrofe donde los elementos del array serán cadenas de texto con los países limítrofes (con frontera) con el tuyo. Por ejemplo si vivimos en Perú tenemos como países limítrofes  Ecuador, Colombia, Brasil, Bolivia y Chile.
a) Utilizando un bucle for, muestra por pantalla los países limítrofes.
b) Utilizando un bucle for each, muestra por pantalla los países limítrofes.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.


EJERCICIO 2
Escribe y ejecuta el siguiente código y responde a las siguientes preguntas:
$equipo = array(portero=>'Casillas', defensa=>'Hierro', medio=>'Ces', delantero=>'Ronaldo');

foreach($equipo as $posicion=>$jugador) {
    echo "El " . $posicion . " es " . $jugador;
    }

a) ¿$equipo es una variable normal, un array tradicional ó un array asociativo?
b) ¿portero es un índice de un array, un contenido de un elemento de un array o un contenido de una variable simple?
c) ¿Al ejecutar el código obtienes un resultado por pantalla u obtienes un error? ¿Qué es lo que hace el código?


EJERCICIO 3
Supón que quieres representar lo siguiente: hay 2 equipos españoles, en el primero el portero es Frank, el defensa Pepe, el medio Luis y el delantero Raul. En el segundo, el portero es Tiger, el defensa Mourin, el medio Katz y el delantero Alberto. Hay 1 equipo mexicano, donde el portero es Suarez, el defensa Koltz, el medio Fernandez y el delantero Ramirez. Hay 2 equipos argentinos. En el primero el portero es Higuita, el defensa Mel, el medio Rubens y el delantero Messi. En el segundo el portero es Kostenmeiner, el defensa Lenkins, el medio Marash y el delantero Juanes.
a) Representa los datos usando un array de tres dimensiones con índices numéricos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador. Presenta la información del país, equipo, posiciones y jugadores de cada equipo usando un bucle for.
b) Representa los datos usando un array de tres dimensiones con índices numéricos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador. Presenta la información del país, equipo, posiciones y jugadores de cada equipo usando un bucle for each.
c) Representa los datos usando arrays arrays asociativos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador (un ejemplo de cómo declarar un elemento sería por ejemplo: $equipos['Mexico']['Equipo1']['defensa']="koltz";). A continuación usando un bucle foreach recorre los elementos del array mostrando la información del país, equipo, posiciones y jugadores de cada equipo.

Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Entradas populares