Mechasoft: Blog de Matías J. Magni

…dedicado al Open Source y al delirio del Autor…

  • Matías J. Magni

  • RSS Ubuntu

    • Security Team Weekly Summary: August 17, 2017 17/08/2017
      The Security Team weekly reports are intended to be very short summaries of the Security Team’s weekly activities. If you would like to reach the Security Team, you can find us at the #ubuntu-hardened channel on FreeNode. Alternatively, you can mail the Ubuntu Hardened mailing list at: ubuntu-hardened@lists.ubuntu.com During the last week, the Ubuntu Securit […]
    • How to set up Kubernetes on any cloud and monitor your apps with Weave 17/08/2017
      On August 2, Luke Marsden (Weaveworks) and Marco Ceppi (Canonical) presented a webinar on how to Speed up your software development lifecycle with Kubernetes. In the session they described how you can use conjure-up and Weave Cloud to set up, manage and monitor an app in Kubernetes. In this tutorial we’re going to show you […]
    • Ubuntu Foundations Development Summary – August 16, 2017 16/08/2017
      This newsletter is to provide a status update from the Ubuntu Foundations Team. There will also be highlights provided for any interesting subjects the team may be working on. If you would like to reach the Foundations team, you can find us at the #ubuntu-devel channel on freenode. Highlights Updated cloud images have been released […]
    • Kernel Team Summary- August 16, 2017 16/08/2017
      Development (Artful / 17.10) We intend to target a 4.13 kernel for the Ubuntu 17.10 release. The artful kernel is now based on Linux 4.11. The Ubuntu 17.10 Kernel Freeze is Thurs Oct 5, 2017. The kernel in the artful-proposed pocket of the Ubuntu archive has been updated to v4.12.7 The kernel in the Artful […]
    • Ubuntu Server Development Summary – 15 Aug 2017 15/08/2017
      Hello Ubuntu Server! The purpose of this communication is to provide a status update and highlights for any interesting subjects from the Ubuntu Server Team. If you would like to reach the server team, you can find us at the #ubuntu-server channel on Freenode. Alternatively, you can sign up and use the Ubuntu Server Team […]
  • RSS LUGMen

    • Se ha producido un error; es probable que la fuente esté fuera de servicio. Vuelve a intentarlo más tarde.
  • Archivos

Programación Web

GOOGLE MAPS API

INTRODUCCION

Bueno todos sabemos muy bien que es google maps, así que no necesita mucha introducción pero si quiero introducir los contenidos que vamos a tocar en este post: cómo utilizar la API de Google Maps.

Hay 3 formas de utilizarla:

  • Javascript
  • Flash
  • PHP Class

En este apartado vamos a ver la 3ra forma que a mi criterio es la más útil ya que nos permitirá dinamizar el contenido del mapa. La mayoría de los que deben estar leyendo esto saben de lo que PHP es capaz :).

INSTALACION

  1. Bueno el primero paso es la descarga de la API que la podemos descargar desde aquí.
  2. El segundo paso es la instalación de la API. Hay 2 formas:
    • Instalar la API en el htdocs del webserver e incluirla en el PATH de apache.
    • Instalar la API en cada proyecto web que vaya a utilizarla.

    A mi criterio la primera forma sería la más correcta, ya que la tendríamos disponible para cada proyecto que vayamos a crear, pero existe el problema de la portabilidad, ya que si la API no está instalada en el servidor web al cual yo voy a portar mi proyecto no voy a poder utilizarla.

    La segunda forma es la que voy a recomendar ya que me da más portabilidad y consiste en incluir la carpeta en el proyecto mismo, e incluir la clase utilizando esa ubicación. Por ejemplo: si mi proyecto se encuentra en /opt/lampp/htdocs/proyecto, entonces la API debe estar ubicada en /opt/lampp/htdocs/proyecto/GoogleMapAPI o en /opt/lampp/htdocs/proyecto/carpeta_cualquiera/GoogleMapAPI y ser accedida desde allí.

OBTENCION DE LA LLAVE Y CREACION DE LA BD

  1. El primer paso es obtener la KEY que nos otorgará Google al registrar nuestro dominio, para ello hay que ir a la página de registración y seguir los pasos que ahí se detallan. Click aquí.
  2. El segundo paso es la creación de la base de datos que Google Maps utilizará para ubicar los puntos en el globo.

    El ejemplo de creación de la base de datos y su utilización lo voy a hacer con MySQL pero uds. pueden usar la base de datos que más les convenga o la que usen habitualmente, de todos modos, la sintaxis utilizada es SQL Standard.

    CREATE DATABASE GEOCODES;
    
    CREATE TABLE GEOCODES (
           address varchar(255) NOT NULL default '',
           lon float default NULL,
           lat float default NULL,
           PRIMARY KEY  (address)
    );
    

FORMA DE USO

Ejemplo de página:

<html>
<body>
<php
      // Creamos el objeto
      $map = new GoogleMapAPI('map');
      // Conexión con la base de datos de Google Maps
      $map->setDSN('mysql://$usuario:$clave@localhost/GEOCODES');
      // Google maps key
      $map->setAPIKey($key);
      // Agregar un marcador al mapa
      $map->addMarkerByAddress($direccion, $nombre_a_mostrar, $nombre);
      // Imprimir cabeceras javascript
      $map->printHeaderJS();
      // Imprimir mapa
      $map->printMapJS();
?>
<!-- necessary for google maps polyline drawing in IE -->
<style type="text/css">
      v\:* {
            behavior:url(#default#VML);
      }
<style>
<table>
<tr>
    <td><?php $map->printMap(); ?></td>
    <td valign="top" style="color:white;"><?php $map->printSidebar(); ?></td>
</tr>
</table>
</body>
</html>

Notas adicionales:

  • Para testear la API solamente lo podremos hacer en localhost o través de nuestra IP pública. Si queremos ver el mapa en una página llamada, por ejemplo, google_map.html, solo podrá ser visualizado en http://localhost/google_map.html. Si queremos ver el mapa en la red interna no podremos, por ejemplo, al poner http://192.168.1.2/google_map.html e incluso http://127.0.0.1/google_map.html, nos saldrá un error de que la KEY no está registrada para ese dominio.
  • Una forma de facilitar a Google Maps el rastreo de una ubicación específica es poner las direcciones con este formato:
    calle numeración dpto./distrito provincia/ciudad
    Por ejemplo: Rue Henri de Régnier 78000 Versailles o Pedro Vargas 1032 Guaymallén Mendoza, etc…

Fuentes:

http://www.phpinsider.com/php/code/GoogleMapAPI/


 

AJAX

INTRODUCCION

Desde que Gmail apareció, ha cambiado la forma de ver la web. Hoy sabemos que podemos hacer un sitio completo sin la necesidad de recargar la página y sólo cargando las partes que requerimos. La tecnología usada es el XMLHttpRequest, bautizada recientemente con el nombre de AJAX.
A manera de ejercicio veremos primero cómo cargar contenido, después cómo interactuar con php y mandar pequeñas porciones de información y finalmente cómo enviar información más grande.

Creando el objeto XMLHttpRequest

Hacer una función genérica es la mejor idea para este modelo. A base de try y catch podemos hacer una función cross-browser:

function nuevoAjax() {
        var xmlhttp=false;
        try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
                try {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                        xmlhttp = false;
                }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}

Primer ejemplo: Cargar datos externos.

La función de cargar contenido la definiremos de la siguiente forma:

function cargarContenido() {
        var contenedor;
        contenedor = document.getElementById('contenedor');
        ajax = nuevoAjax();
        ajax.open("GET", "ejemploajax1.html", true);
        ajax.onreadystatechange=function() {
                if(ajax.readyState == 4) {
                        contenedor.innerHTML = ajax.responseText
                }
        }
         ajax.send(null)
}
window.onload = function() { cargarContenido() }

Hay varias cosas qué checar aquí, primero obtenemos el elemento que tenga como id ‘contenedor’,
después creamos un nuevo objeto ajax, luego es cargar el archivo html por el método GET y lo
importante aquí es qué hacer cuando se cargue, esto es onreadystatechange. Readystate 4 significa
que ya acabó de cargarlo, 1, 2 y 3 es el progreso y realmente no nos importa. Finalente el método
send es realizar la acción y llamar la función en el window.onload.

Segundo ejemplo: Envío de datos por el método GET

Lo siguiente es enviar pequeñas cantidades de datos, por ejemplo de un input text con límite a 255
caracteres, esto lo haremos por el método GET. Utilizaremos también la función crearAjax y
modificaremos un poco cargarContenido.
La idea es meter un formulario, saber los valores de los input que incluye el formulario y enviarla a
php. El código modificado de cargarContenido sería:

function cargarContenido() {
       var t1, t2, contenedor;
       contenedor = document.getElementById('contenedor');
       t1 = document.getElementById('texto1').value;
       t2 = document.getElementById('texto2').value;
       ajax=nuevoAjax();
       ajax.open("GET", "ejemploajax2.php?t1="+t1+"&t2="+t2,true);
       //Si en vez de usar php queremos hacerlo con una pagina jsp pondremos:
       //ajax.open("GET", "ejemploajax2.jsp?t1="+t1+"&t2="+t2,true);
       ajax.onreadystatechange=function() {
              if(ajax.readyState == 4) contenedor.innerHTML = ajax.responseText;
       }
       ajax.send(null)
}

El archivo php sólo contiene este código:

<?php
     echo "Datos en GET: <pre>";
     print_r($_GET);
     echo "</pre>";
     echo "Datos en POST: <pre>";
     print_r($_POST);
     echo "</pre>";
?>

El archivo jsp contendría este código:

<%
     out.write("Valores de los parametros: <pre>");
     out.write("t1 = " + request.getParameter("t1"));
     out.write("t2 = " + request.getParameter("t2"));
     out.write("</pre>");
%>

Tercer ejemplo: Envío de datos por el método POST

Por último y para terminar, enviar datos por el método post. Habrá que cambiar algunas cosas en la
función cargarContenido:
Debemos agregar una línea adicional: setRequestHeader especifica qué tipo de datos llegarán al
servidor. Asímismo especificamos el método en el método open y ahora sí utilizaremos parámetros
para send.
La función quedaría de la siguiente manera:

function cargarContenido() {
       var t1, t2, contenedor;
       contenedor = document.getElementById('contenedor');
       t1 = document.getElementById('texto1').value;
       t2 = document.getElementById('texto2').value;
       ajax=nuevoAjax();
       ajax.open("POST", "ejemploajax2.php",true);
       ajax.onreadystatechange=function() {
              if (ajax.readyState==4) {
                     contenedor.innerHTML = ajax.responseText;
              }
       }
       ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       ajax.send("t1="+t1+"&t2="+t2)
}

Notas adicionales:

  • En Internet Explorer AJAX no funciona muy bien debido a un problema con la cache del mismo, para solucionar esto hay que enviar en la cabecera HTTP Cache-Control: no-store, no-cache, must-revalidate. Por ejemplo en php, habría que poner al principio de cada una de las páginas que utilizan el ajax la siguiente línea de códido:
    <?php header("Cache-Control: no-store, no-cache, must-revalidate"); ?>
  • Por algún extraño motivo, el objeto que es usado una vez ya no se puede usar otra vez. Por eso en la función cargarContenido siempre se llama a la función para crear un nuevo objeto ajax. Si no entienden de qué hablo, creen el objeto fuera de la función y verán cómo sólo funciona una vez
  • Enviar y recibir datos con acentos/símbolos extraños es un dolor de cabeza. Básicamente, en php es la utilización de utf8_decode cuando se reciben y de utf8_encode cuando se envían.

Fuentes:

http://www.cristalab.com/tutoriales/165/introduccion-a-ajax-con-php-y-formularios.html</p

Una respuesta to “Programación Web”

  1. Sebastián said

    Hola Mecha!
    Muy buena la info de Ajax, muy concisa.
    Estaría bueno mas adelante ir profundizando sobre éstos temas.
    Te dejo un abrazo.
    Sebastián Arce.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: