junio | 2013 | Blog de diseño y desarrollo web | Blog – DGCmedia diseño y desarrollo de páginas web

A continuación, os voy a mostrar un código muy tonto pero extremadamente útil.

Cuando necesitéis lanzar un proceso en php de cierta duración, y queráis conocer el avance del mismo, podéis hacer una barra de progreso fácilmente con las siguientes líneas de código.

<?
header( 'Content-type: text/html; charset=utf-8' );
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style>
	.progreso { width: 100px; height: 20px; border:1px solid black; float:left;}
	.avance { height:20px; float:left; background: red; }
</style>
</head>
<body>
<div class="progreso">
	<div class="barra">
	<?
		for($i=0;$i<10;$i++)
		{
			echo '<span style="width:10px;" class="avance"></span>';
			flush();
			ob_flush();
			sleep(5);
		}
	?>
	</div>
</div>
</body>
</html>

header( 'Content-type: text/html; charset=utf-8' );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Documento sin título</title>

<style>

.progreso { width: 100px; height: 20px; border:1px solid black; float:left;}

.avance { height:20px; float:left; background: red; }

</style>

</head>

<body>

for($i=0;$i<10;$i++)

{

echo '<span style="width:10px;" class="avance"></span>';

flush();

ob_flush();

sleep(5);

}

</div>

</body>

</html>

Evidentemente, el ancho del progreso (en px) habrá que calcularlo de forma dinámica según el número de instrucciones o ciclos de vuestro script, pero en esencia, con esas líneas tan estúpidas todo os será un poquito más fácil.

Además, con ello evitáis el timeout del navegador. Si el proceso es extremadamente largo, podéis poner otro par de líneas salvadoras en la cabecera del script y éste se ejecutará…sí o sí.

// si el usuario cierra el navegador, el script sigue ejecutándose
ignore_user_abort(true); 
// cancela el límite de tiempo de ejecución de php
set_time_limit(0);

// si el usuario cierra el navegador, el script sigue ejecutándose

ignore_user_abort(true);

// cancela el límite de tiempo de ejecución de php

set_time_limit(0);

Ya os veo a todos pensando en hacer una fantástica newsletter…. Eso, próximamente.

Rating: 3.9/5 (14 votes cast)

Rating: +8 (from 10 votes)

Hoy vamos a trabajar con la API de Google Maps.

En primer lugar, vamos a montar un mapa en el que, al hacer click, Google de forma automática nos proporcione la dirección de la posición elegida. Ésto dará otra nueva funcionalidad a nuestra página web haciéndola más atractiva y dinámica.

Ya sabéis nuestra teoría, “con lo que cuesta que lleguen, hay que hacer que los usuarios se queden”, y no hay mejor forma que proporcionar al usuario de nuestra página web herramientas para que interaccione con nuestro proyecto.

Para ello, trabajaremos en Java Script (jQuery) y tenemos una función que monta un mapa de Google Maps pasándole como parámetros una latitud, una longitud y un zoom.

var marker = null;
function mapaGoogle(latitud,longitud,zoom)
{ 		
	var map;
	var mapOptions = {
			zoom: zoom,
			disableDefaultUI: true,
			center: new google.maps.LatLng(latitud,longitud), 
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map_wrapper'), mapOptions);
	google.maps.event.addListener(map, 'click', function(event) {
		if (marker) { marker.setMap(null); }
		marker = new google.maps.Marker({ position: event.latLng, map: map});
		autoCompletar(marker);
	});
}

var marker = null;

function mapaGoogle(latitud,longitud,zoom)

{

var map;

var mapOptions = {

zoom: zoom,

disableDefaultUI: true,

center: new google.maps.LatLng(latitud,longitud),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById('map_wrapper'), mapOptions);

google.maps.event.addListener(map, 'click', function(event) {

if (marker) { marker.setMap(null); }

marker = new google.maps.Marker({ position: event.latLng, map: map});

autoCompletar(marker);

});

}

A continuación, añadimos la función autocompletar, al que al pasarle un marcador de Google (marker) intenta obtener la dirección física que le corresponde, con todos sus datos (calle, número, código postal, municipio, provincia, comunidad autónoma y país)

function autoCompletar(marcador)
{
	if(marcador)
	{
		var pos=marcador.getPosition()
		var resultado=consultaGoogle(pos.lat()+','+pos.lng(),2);
		if(resultado)
		{
			if(confirm('Desea añadir la siguiente dirección en sus datos personales:  '+resultado.completa))
			{
				$('.datos_facturacion').html(JSON.stringify(resultado.address_components));
				$('#dir input[name="direccion'+direccion+'"]').val(resultado.calle+' '+resultado.numero);
				$('#dir input[name="cp'+direccion+'"]').val(resultado.cp);
				$('#dir input[name="localidad'+direccion+'"]').val(resultado.localidad);
				$('#dir select[name="pais'+direccion+'"]').val(resultado.pais);
			}
		}
	}
}

function autoCompletar(marcador)

{

if(marcador)

{

var pos=marcador.getPosition()

var resultado=consultaGoogle(pos.lat()+','+pos.lng(),2);

if(resultado)

{

if(confirm('Desea añadir la siguiente dirección en sus datos personales: '+resultado.completa))

{

$('.datos_facturacion').html(JSON.stringify(resultado.address_components));

$('#dir input[name="direccion'+direccion+'"]').val(resultado.calle+' '+resultado.numero);

$('#dir input[name="cp'+direccion+'"]').val(resultado.cp);

$('#dir input[name="localidad'+direccion+'"]').val(resultado.localidad);

$('#dir select[name="pais'+direccion+'"]').val(resultado.pais);

}

Como podéis ver, esta función hace una consulta a la función consultaGoogle. Esta función es bidireccional, y puede obtener la dirección dándole unas coordenadas o viceversa.

function consultaGoogle(consulta,tipo)
{
	resultado=false;
	$.ajax({
		type: "GET",
		async:false,
		url: '/frm/ajax/getDireccion.php?tipo='+tipo+'&consulta='+encodeURI(consulta)
	}).done(function ( res ) {
		if(res!='ERROR')
			resultado=JSON.parse(res);
	});
	return resultado;
}

function consultaGoogle(consulta,tipo)

{

resultado=false;

$.ajax({

type: "GET",

async:false,

url: '/frm/ajax/getDireccion.php?tipo='+tipo+'&consulta='+encodeURI(consulta)

}).done(function ( res ) {

if(res!='ERROR')

resultado=JSON.parse(res);

});

return resultado;

}

De nuevo, esta función (como no podía ser de otra manera) requiere de un último fragmento de código. Éste es php y es consultado por ajax. Se le envía la consulta y él, según los parámetros recibidos, envía la petición a Google vía CURL, la procesa (es más fácil trabajar con arrays y json en php que en Java Script en mi humilde opinión) y nos devuelve el resultado.

function getDatosGoogle ($dir)
{
		$url = 'http://maps.google.com/maps/api/geocode/json?address='.urlencode($dir).'&sensor=false&language=es';
		//set the url, number of POST vars, POST data
		$defaults = array( 
					CURLOPT_POST => 1, 
					CURLOPT_HEADER => 0, 
					CURLOPT_URL => $url, 
					CURLOPT_FRESH_CONNECT => 1, 
					CURLOPT_RETURNTRANSFER => 1, 
					CURLOPT_FORBID_REUSE => 1, 
					CURLOPT_TIMEOUT => 4
			); //execute post
		$ch = curl_init();
		curl_setopt_array($ch,$defaults);
		$result = json_decode(curl_exec($ch),true);
		curl_close($ch); //close connection
		return $result;
}
$resultado=getDatosGoogle($_GET['consulta']);
if($resultado['status']=='OK')
{

	switch(intval($_GET['tipo']))
	{
		case 1: // long lat
			echo json_encode(array('lat'=>$resultado['results'][0]['geometry']['location']['lat'],'lng'=>$resultado['results'][0]['geometry']['location']['lng']));
			exit();
		case 2:
			$res_final=array(
				'completa'=>$resultado['results'][0]['formatted_address'],
				'cp'=>'',
				'localidad'=>'',
				'provincia'=>'',
				'numero'=>'',
				'calle'=>''
			);
			foreach($resultado['results'][0]['address_components'] as $componente)
			{
				switch($componente['types'][0])
				{
					case 'postal_code':
						$res_final['cp']=$componente['long_name'];
						break;
					case 'locality':
						$res_final['localidad']=$componente['long_name'];
						break;
					case 'administrative_area_level_2':
						$res_final['provincia']=$componente['long_name'];
						break;
					case 'country':
						$res_final['pais']=$componente['long_name'];
						break;
					case 'street_number':
						$res_final['numero']=$componente['long_name'];
						break;
					case 'route':
						$res_final['calle']=$componente['long_name'];
						break;
				}
			}
			echo json_encode($res_final);
			exit();
		default:
			exit('ERROR');	
	}
}else exit('ERROR');

function getDatosGoogle ($dir)

{

$url = 'http://maps.google.com/maps/api/geocode/json?address='.urlencode($dir).'&sensor=false&language=es';

//set the url, number of POST vars, POST data

$defaults = array(

CURLOPT_POST => 1,

CURLOPT_HEADER => 0,

CURLOPT_URL => $url,

CURLOPT_FRESH_CONNECT => 1,

CURLOPT_RETURNTRANSFER => 1,

CURLOPT_FORBID_REUSE => 1,

CURLOPT_TIMEOUT => 4

); //execute post

$ch = curl_init();

curl_setopt_array($ch,$defaults);

$result = json_decode(curl_exec($ch),true);

curl_close($ch); //close connection

return $result;

}

$resultado=getDatosGoogle($_GET['consulta']);

if($resultado['status']=='OK')

{

switch(intval($_GET['tipo']))

{

case 1: // long lat

echo json_encode(array('lat'=>$resultado['results'][0]['geometry']['location']['lat'],'lng'=>$resultado['results'][0]['geometry']['location']['lng']));

exit();

case 2:

$res_final=array(

'completa'=>$resultado['results'][0]['formatted_address'],

'cp'=>'',

'localidad'=>'',

'provincia'=>'',

'numero'=>'',

'calle'=>''

);

foreach($resultado['results'][0]['address_components'] as $componente)

{

switch($componente['types'][0])

{

case 'postal_code':

$res_final['cp']=$componente['long_name'];

break;

case 'locality':

$res_final['localidad']=$componente['long_name'];

break;

case 'administrative_area_level_2':

$res_final['provincia']=$componente['long_name'];

break;

case 'country':

$res_final['pais']=$componente['long_name'];

break;

case 'street_number':

$res_final['numero']=$componente['long_name'];

break;

case 'route':

$res_final['calle']=$componente['long_name'];

break;

}

echo json_encode($res_final);

exit();

default:

exit('ERROR');

}

}else exit('ERROR');

Y es así de sencillo (sobre todo si cogéis estas funciones ya desarrolladas)

¡Esperamos que os sea de utilidad!

Rating: 3.9/5 (9 votes cast)

Rating: +3 (from 5 votes)

Blog de diseño y desarrollo de páginas y aplicaciones web.

Archivos Mensuales: junio 2013

Barra de progreso PHP

Obtener una dirección desde Google Maps

Nuevas páginas web de la semana

Servicios

Contacto

Contacto

Últimos Post

DGCmedia en Twitter

Menú