Archivo de la etiqueta: php

Comentario tipo facebook utilizando jQuery

Muchas veces mientras desarrollamos una aplicación web nos vemos en la necesidad de implementar algo que permita a los usuarios involucrarse en lo que sea que estemos haciendo, los sistemas de comentarios son una parte muy común en toda plataforma web de hoy en día, se trata de una de las características principales que no pueden faltar en ningún sitio, blog o red de noticias, básicamente un sistema de comentarios abre un canal de comunicación entre nosotros y los visitantes. Teniendo esto en cuenta no está de más mencionar que existen muchos servicios gratuitos en la red que nos permiten implementar un sistema de comentarios de forma muy rápida como por ejemplo Disqus.

En principio lo mínimo que tiene que tener un sistema de comentarios es un nombre de quien comenta, avatar y texto del comentario, entonces siguiendo este principio básico hoy vamos a implementar una interfaz de sistema de comentarios tipo Facebook utilizando HTML y jQuery. Los comentarios en Facebook tienen una característica muy particular, ha diferencia de muchos otros, Facebook no recarga la página una vez que escribimos y presionamos enter, esto es posible gracias al uso de Ajax, a grandes rasgos Ajax es una tecnología que permite que nuestro navegador (Chrome, Firefox, safari, etc) pueda mandar petición al servidor de manera asíncrona, dándonos después la posibilidad de modificar ciertas secciones de nuestra pagina usando JavaScript.

Echemos un vistazo a como lucen los comentarios en Facebook, después podremos comenzar a desarrollar nuestra copia (y aprender de ello en el proceso :))

facebook_comments

Como mencionaba más arriba, básicamente se compone de, un cuadro de texto para escribir el comentario, y cada comentario tiene nombre, avatar y texto, pues manos a la obra.

Paso 1: Crear la estructura en HTML

Usando HTML vamos a comenzar a crear lo que será nuestro formulario y una lista de comentarios de ejemplo, para esto utilizaremos divs.
El formulario para escribir comentarios puede ser muy sencillo y constar solo de 2 campos, el texto y el nombre de usuario:

<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
   <input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
   <input type="hidden" name="username" id="username" value="Alevsk"></input>
</form>

Y nuestro “modelo” de comentario estará conformado solamente por una imagen y un espacio que mostrara texto, algo como:

<div class="comment">
     <div class="avatar">
         <img src="img/1.png" />
     </div>
     <div class="autoComment">
         <span>Alevsk </span>
         Comentario de ejemplo	    	
     </div>
</div>

Ok, entonces ahora combinando ambas cosas el código completo de nuestro index.html se tendría que ver más o menos así.

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>

				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Notaran que el Head he agregado de una vez la librería de jQuery y un plugin de validación, estos los necesitaremos más adelante ya que nos facilitaran bastante el trabajo :), con el código anterior llevamos algo como la siguiente imagen, ¿no se ve muy lindo verdad?, eso es porque nos falta agregarle un poco de estilos.

facebook_comments_1

Paso 2: Agregar estilos

Agregamos el siguiente código CSS en cualquier lugar dentro de las etiquetas de head (lo correcto sería tener el css en un archivo aparte, pero para fines demostrativos está bien así por ahora).

    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>

Recargamos la página y como por arte de magia esto se va pareciendo un poco más a los comentarios de facebook

facebook_comments_2

ijCBM2h1of0vE

En este punto tenemos algo ya muy bonito, lamentablemente no hace nada!, pero no nos desesperemos ya que solo nos falta una cosa :).

Paso 3: Utilizar jQuery para agregar los nuevos comentarios

Lo que tendremos que hacer ahora será que cuando el usuario escriba su comentario y pulse la tecla enter este sea enviado de manera asíncrona (utilizando Ajax) al servidor, después tendremos que dibujar en la pantalla de alguna manera lo que el visitante acaba de comentar, todo esto sin recargar la página. Esto puede sonar más complicado de lo que es, sobre todo si eres nuevo con jQuery. Por suerte jQuery nos permite manipular el DOM, podemos incluir elementos diatónicamente en nuestro sitio de manera muy sencilla.

¿Recuerdan el plugin de validación que había agregado en un inicio?, bueno pues ahora viene la parte interesante, el plugin nos permite agregar validaciones de todo tipo en los campos y capturar ciertos eventos que ocurren en un formulario, por ahora utilizaremos uno llamado submitHandler. submitHandler nos permite indicar código para ser ejecutado una ves que el formulario ha activa el disparador submit, esto es especialmente util a la hora de validar campos y mostrar información en la pantalla. De nuevo, este código va en cualquier parte de nuestro index.html pero lo recomendable es que este colocado entre las etiquetas head y después de haber includio la libreria jQuery y el plugin de validation.

		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>

Después el bloque de código que se ejecutara dentro del submitHandler será una petición post al servidor utilizando ajax.


$.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });

Por el momento el formulario está mandando una petición al archivo post.php que no tiene nada, pero sería posible agregar código en este archivo que permitiera guardar los comentarios una base de datos (tal vez muestre como hacer eso en un artículo futuro)

<?php 
	// Guardar el contenido en una base de datos
	// O lo que quieras
	echo "Ok"; 
?>

Ok, continuamos, lo verdaderamente importante aquí es el siguiente código:

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);

Como mencionaba más arriba jQuery nos permite manipular el DOM, con las instrucciones anteriores estamos creando los divs necesarios con el texto y el nombre del visitante que después serán agregados a la lista de comentarios existentes, esto nos dará la ilusión de que el comentario fue agregado inmediatamente después de ser escrito (aunque podría ser el caso de que la información no haya terminado de ser procesada en el servidor).

Combinando el HTML, el CSS y el javascript nuestro archivo index.html tendría que verse de la siguiente manera:

<!DOCTYPE html>
	<head>
  		<meta charset="utf-8" />
  		<meta name="viewport" content="width=device-width" />
    	<title>Comentarios tipo facebook con jQuery</title>
    	<script type="text/javascript" src="jquery.js"></script>
    	<script type="text/javascript" src="jquery.validate.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#postComment').validate({
					submitHandler: function(form) {
		    			
		    			 $.ajax({
						      type: "POST",
						      contentType: "application/json; charset=utf-8",
						      url: $(form).attr('action'),
						      data: $(form).serialize(),
						      success: function (result) {

						           var comment = $('<div></div>').addClass('comment');
						           var avatar = $('<div></div>').addClass('avatar');
						           var img = $('<img/>').attr({'src':'img/1.png'});
						           var text = $('<div></div>').addClass('autoComment').html('<span>'+$('#username').val()+' </span>'+$('#newComment').val());

						           avatar.append(img);
						           comment.append(avatar);
						           comment.append(text);

						           $('#comments').append(comment);
						           $('#newComment').val('');
						      }
						 });
		  			},
			        errorPlacement: function(error,element) {
			          return;
			        },
		      	});
			});
		</script>
    	<style type="text/css">
    		body
    		{
    			font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
				font-size: 11px;
    		}
    		#container
    		{
				width: 290px;
				margin: 0 auto;
				height: auto;
				overflow: auto !important;
    		}
    		#commentBox
    		{
				background: #edeff4;
				height: 25px;
				overflow: hidden;
				display: block;
				padding: 10px;
    		}
	    	#postComment input
	    	{
				width: 100%;
	    	}
	    	#postComment .enviar
	    	{
	    		clear: both;
				float: left;
	    	}

	    	#comments
	    	{
				margin-top: 15px;
				float: left;
				width: 100%;
				background: #edeff4;
				overflow: auto;
	    	}
	    	#comments .comment
	    	{
				padding: 10px;
				border-bottom: 1px solid #fff;
				overflow: auto;
	    	}
	    	#comments .comment .avatar
	    	{
				float: left;
				margin-right: 10px;
	    	}
	    	#comments .comment .avatar img
	    	{
	    		width: 32px;
	    		height: 32px;
	    	}
	    	#comments .comment .autoComment
	    	{
				float: right;
				width: 225px;
	    	}
	    	#comments .comment .autoComment span
	    	{
	    		font-weight: bold;
	    		color: #3b5998;
	    		cursor:pointer;
	    	}
    	</style>
	</head>
  	<body>
  		<div id="container">
	  		<div id="comments">
	  			<div class="comment">
					<div class="avatar">
						<img src="img/1.png" />
					</div>
				    <div class="autoComment">
				    	<span>Alevsk </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/2.png" />
					</div>

				    <div class="autoComment">
				    	<span>Chell </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  			<div class="comment">
					<div class="avatar">
						<img src="img/3.png" />
					</div>

				    <div class="autoComment">
				    	<span>Calorine </span>
				    	Comentario de ejemplo	    	
			        </div>
	  			</div>
	  		</div>
	  		<div id="commentBox">
	    		<form action="post.php" id="postComment" method="post" accept-charset="utf-8">
	  				<input type="text" name="newComment" required="" autocomplete="off" placeholder="¿En que estas pensando?" id="newComment"></input>
	  				<input type="hidden" name="username" id="username" value="Alevsk"></input>
	  			</form>
	  		</div>
  		</div>
  	</body>
</html>

Bueno con este concluye este corto y básico tutorial, les pueda servir como base a la hora de implementar sus sistemas de comentarios y como siempre en los siguientes enlaces pueden descargar el codigo fuente y ver un ejemplo funcionando. Cualquier duda pueden escribirla en la sección de comentarios xD.

salu2

Detectar iPad – iPhone – iPod con Javascript


Muchas de las personas que desarrollan sitios web seguramente se habrán topado ya con la famosa pregunta “¿y mi sitio se va a poder ver bien desde el Nuevo iPad?”. Existen varias soluciones para esto, si por ejemplo utilizamos algún CMS como wordpress o Joomla existen bastantes plugins que nos permitirán adaptar nuestros sitios para que puedan ser leídos comodamente en estos dispositivos, algunos de los que me vienen a la mente son WPtouch, WordPress PDA & iPhon, etc.

Sin embargo si somos de esos desarrolladores mas “artesanales” y nos gusta hacer los trabajos desde 0 tenemos que implementar esas detecciones a mano, en realidad no es tan difícil, se requiere un poco de paciencia mas que nada para desarrollar una buena hoja de estilos, lo demás es bastante fácil.

Basta con colocar un pequeño código javascript, por ejemplo:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) 
{
      //El usuario esta utilizando un iPhone, iPad o iPad para visualizar el sitio web
      //Cargar la respectiva hoja de estilos
}
else
{
     //Nos visitan desde un navegador tradicional
     //cargamos la hoja de estilos por defecto :)
}

La funcionalidad de esa condición es bastante sencilla, si el navegador con el que nos visitan tiene en su estructura iPhone, iPod o iPad, lo mas seguro es que nos estén visitando desde uno de esos dispositivos, esta validación se puede realizar también desde PHP, sin embargo yo la prefiero hacer del lado del cliente para aligerar algo de carga al servidor.

salu2

Formulario Jquery y Ajax desde 0 [PHP]

Muy bien, si haz llegado hasta esta parte del tutorial te felicito, ya casi acabas el formulario, en los post anteriores hicimos las validaciones del lado del cliente, ahora toca hacer las validaciones del lado del servidor y enviar el correo utilizando PHP.

Los post del tutorial son los siguientes:

Es un hecho que al final del día no podemos confiar en los usuarios que utilizaran la aplicación (suena mal, pero así es), existen practicas de seguridad que son básicas como por ejemplo asegurarnos que los datos que recibimos sean correctos, es decir si pedimos que el usuario ingrese un correo electrónico sea un correo electrónico valido, etc.

Tenemos que crear un nuevo archivo php, asegúrate de que el nombre sea el mismos que el que indicaste en el javascript

<?php
function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
  $cantCar = strlen($valor);
  if(empty($valor))
  {
    if($permiteVacio) return TRUE;
    else return FALSE;
  }
  else
  {
    if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
    else return FALSE;
  }
}

function validaCorreo($valor)
{
  if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
  else return FALSE;
}

// MAIN  

if($_POST)
{
  foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
  sleep(5);
  if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
  if(!validaLongitud($web, 1, 4, 50)) $error=1; 
  if(!validaCorreo($correo)) $error=1;
  if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;
  
  if($error==1) echo "Error";
  else
  {
    $fecha=date("d/m/y - H:i");
    $mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

    //Debug en un archivo ... probando haber si imprime
    
    /*$master=fopen('mensajes.txt',a);
    fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
    fclose($master);*/
    
    mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");
    echo "OK";
  }
}
?>

Ok, explicare el código paso por paso, al inicio del script hay 2 funciones que se utilizaran mas abajo, lo importante comienza donde esta el

if($_POST)
{

Estamos indicando que si el arreglo asociativo $_POST no esta vacío entonces ejecutaremos el código entre las llaves. La primera línea

foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));

Foreach lo que hace es recorre el array y crear una variable por cada valor que encuentre y le asigna como nombre el mismo (similar a si utilizáramos extract($_POST); o algo similar), además de eso por seguridad le aplica la función trim que elimina espacios en blanco al inicio y al final y addslashes que agrega barras invertidas en caso de encontrar caracteres extraños como comillas simple.

Ahora realizamos las validaciones haciendo uso de las funciones de arriba

        if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
  if(!validaLongitud($web, 1, 4, 50)) $error=1; 
  if(!validaCorreo($correo)) $error=1;
  if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;

Las funciones validaLongitud y validaCorreo son muy similares a las que hicimos anteriormente en Javascript 🙂

function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
  $cantCar = strlen($valor);
  if(empty($valor))
  {
    if($permiteVacio) return TRUE;
    else return FALSE;
  }
  else
  {
    if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
    else return FALSE;
  }
}

La función recibe 4 parámetros, el valor, una variable para ver si puede estar vacía, una longitud mínima y una máxima, después obtenemos la longitud de la cadena, revisamos si la variable esta vacía y de ser así vemos si esta permitido que lo este, de ser verdadero esto regresamos true, por el otro lado si la variable no viene vacía tenemos que ver que la longitud cumpla con la longitud mínima y máxima, en cado de cumplirse la condición regresamos verdadero.

function validaCorreo($valor)
{
  if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
  else return FALSE;
}

En esta función solamente se evalúa con la función eregi que la cadena $valor cumpla con las condiciones de la expresion regular, de ser cierto devolvemos true, de lo contrario false, no hay nada mas que decir.

Esta demás decir que dependiendo de si el resultado de las validaciones es verdadero o falso pondremos un 1 o dejaremos en 0 la variable $error.

Después revisamos si hubo algún error (si error es igual a 1), de ser así imprimimos con echo error, si no hubo errores procedemos a enviar el mensaje con el siguiente código.

  if($error==1) echo "Error";
  else
  {
    $fecha=date("d/m/y - H:i");
    $mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

    //Debug en un archivo ... probando haber si imprime
    
    /*$master=fopen('mensajes.txt',a);
    fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
    fclose($master);*/
    
    mail("CORREO EJ. [email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");
    echo "OK";
  }

Lo que hacemos básicamente es armar el cuerpo del mensaje, después utilizar la función mail

mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web <[email protected]>");

La función mail envía un mensaje de acuerdo a parámetros recibidos, mas adelante aprenderemos que hay maneras mas sofisticadas de enviar correo electrónico con todas las cabeceras en orden, pero por el momento esta bien de esta manera.

Al final para avisarle al javascript (el cual hizo la petición ajax) que todo ha ido bien regresamos un OK 🙂

Y listo con esto el mensaje ha sido enviado!

Configurar servidor web en Mac snow leopard


En un post anterior les enseñe como configurar los host virtuales en MAC, por si alguien aun no tiene configurado su servidor web en MAC aquí están los pasos a seguir, es muy sencillo y en un dos por tres lo tendrán listo.

Habilitar Apache

Lo primero es activar el servidor apache, para ello abrimos una terminal (ya saben, spotlight, escriben Terminal y eligen la primera opción), una vez que la app este abierta escribimos el siguiente comando:

sudo apachectl start

Habilitar PHP

Despues de eso necesitamos editar el archivo httpd.conf para cargar el modulo de PHP asi que en la consola escribimos el siguiente comando:

sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /etc/apache2/httpd.conf

Luego de eso localizamos la linea donde este

#LoadModule php5_module libexec/apache2/libphp5.so

Y lo des comentamos quitando el signo de #, tambien buscamos la linea donde se encuentre:

#DocumentRoot "/Library/WebServer/Documents"

Y lo descomentamos y ponemos la ruta donde tengamos planeado guardar los archivos que seran publicos en el servidor web, yo lo deje de la siguiente manera:

DocumentRoot "/Users/alevsk/Sites"

Después de eso reiniciamos el servidor

sudo apachectl restart

Con eso ya nuestro servidor web deberia de estar activado, podemos comprobarlo accediendo a la siguiente direccion http://localhost/, si nos aparece el mensaje de It works! quiere decir que el servidor fue activado con éxito.

Los siguientes pasos son opcionales, es solamente para configurar algunas cosas como el timezone por ejemplo.

Lo primero es crear un archivo php.ini en /etc y darle permisos de lectura y escritura, para ello en la consola escribimos

cd /etc
sudo cp php.ini.default php.ini
sudo chmod 666 php.ini

abrimos el archivo con

sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit php.ini

y buscamos la linea que diga ;date.timezone =, la des comentamos (le quitamos el ; ) y escribimos nuestra zona horaria por ejemplo

date.timezone =America/Mexico

En este link pueden encontrar una gran lista con la mayoría de las zonas horarias y códigos del mundo.

Despues de eso guardamos, salimos del archivo y reiniciamos apache

sudo apachectl restart

Habilitar MYSQL

Primero descargamos el paquete de MYSQL, elegimos la version de 32 o 64 bits según sea nuestro caso.

Despues tenemos que instalar todo lo que venga dentro del paquete en el siguiente orden:
1) mysql
2) startup item
3) preference pane

Para verificar que se instalo correctamente desde la consola verificamos accediendo al binario de la siguiente manera

/usr/local/mysql/bin/mysql

Si nos aparece la consola de mysql quiere decir que se ha instalado correctamente.

Después de eso regresamos a la consola y editamos el archivo php.ini de nuevo y remplazamos las lineas que coincidan con /var/mysql/mysql.sock por /tmp/mysql.sock

pdo_mysql.default_socket=/tmp/mysql.sock
mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

y una vez mas reiniciamos Apache

Si todo resulto ahora tenemos Apache, PHP y MYSQL en nuestro servidor :).

Google weather API y PHP

Hace un par de días un internauta me pregunto sobre si era posible hacer una web que mostrar las ciudad mas importantes del país así como el clima “actual” de la región, haciendo uso de servicios ya existentes que presten este tipo de información, pues me puse a investigar y encontré una aplicación muy buena de Google llamada Google Weather, la cual tiene a disposición de los programadores una API muy bien documentada y fácil de usar e implementar.

Hace rato que tenia un tiempo libre me puse a ver lo que se podia hacer e hice un pequeño ejemplo, un formulario donde escribes el nombre de una ciudad, Ej. Guadalajara, Morelia, Queretaro y haciendo uso de Google Weather te muestra el clima de hoy así como el clima de los siguientes 4 días :), la verdad es muy fácil de usar, a continuación les dejo el código.

<?
if (empty($_POST['ciudad']))
{
?>
  <form action="weather.php" method="post"><input type="hidden" name="phpMyAdmin" value="3068b5491f703bc27d2a43326f772556" />
    <input name="ciudad" type="text" id="ciudad" />
    <input type="submit" value="Enviar" />
  </form>
<?php
}
else
{
$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.$_POST['ciudad']);
$information = $xml->xpath("/xml_api_reply/weather/forecast_information");
$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
?>
<html>
    <head>
        <title>Google Weather API</title>
    <style type="text/css" media="screen">  
      body {
        font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
        font-size:12px;
        color:#4D4D4D;
      }
      a
      {
        color:#4D4D4D;
      }
      
      h2 {
        font-size:14px;        
      }
      .weather {
        background:#EEF2F6;
        padding:4px;
        margin-bottom:2px;
        width:400px;
        overflow:hidden;
      }      
      .weather img {
        vertical-align:middle;
        float:left;
        margin-right:4px;
      }
    </style>
    </head>
    <body>
        <h1><?= print $information[0]->city['data']; ?></h1>
        <h2>El clima de hoy</h2> 
        <div class="weather">    
            <img src="<?= 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather"?>
            <span class="condition">
            <?= $current[0]->temp_f['data'] ?>&deg; F,
            <?= $current[0]->condition['data'] ?>
            </span>
        </div>
        <h2>Forecast</h2>
        <? foreach ($forecast_list as $forecast) : ?>
        <div class="weather">
            <img src="<?= 'http://www.google.com' . $forecast->icon['data']?>" alt="weather"?>
            <div><?= $forecast->day_of_week['data']; ?></div>
            <span class="condition">
              <?= $forecast->low['data'] ?>&deg; F - <?= $forecast->high['data'] ?>&deg; F,
              <?= $forecast->condition['data'] ?>
            </span>
        </div>  
        <? endforeach ?>
        ... <h2><a href="weather.php?phpMyAdmin=3068b5491f703bc27d2a43326f772556">Regresar <<</a></h2>
    </body>
</html>
<?php } ?>

Si no aparece correctamente el codigo aqui en el blog (como es de costumbre) aca les deje el codigo en copypastecode.com … http://www.copypastecode.com/65593/

salu2