RibosoMatic

Es un complemento, extensión ó plug-in (como quieran llamarle) para jQuery que consigue, con un par de configuraciones, que los tooltips (mensajes temporales cuando posamos puntero sobre vínculos) tenga el efecto similar a los de Facebook.

Por defecto el plug-in coloca los tooltips en el centro debajo del elemento que tenga el atributo title, aunque usando el parámetro gravity podemos colocarlo en la posición que deseemos. Incluso podemos usarlo en los formulario, cajas de texto ó agregar el contenido del tooltip dinamicamente.

Sitio web, documentación y demos: tipsy

Inspirandome en TeuxDeux un administrador de tareas sencillo pero eficaz que corre perfectamente sobre el navegador web (vía Ajaxian), se me ocurrió realizar uno con similar funcionalidad. En realidad no he probado esta herramienta, pues hay que registrarse (y no quize demorar) así que me guié del video relacionado:

Está es la primera parte, así que no verán algo muy sofisticado pero si funcionalmente básico.

<<VER EL EJEMPLO>>

Empecemos definiendo la estructura de la tabla en MySQL que guardará la información de las tareas del día:

CREATE TABLE IF NOT EXISTS `activity` (
  `id` int(11) NOT NULL auto_increment,
  `fecha` datetime NOT NULL,
  `dia` tinyint(2) NOT NULL,
  `nrodiasemana` tinyint(2) NOT NULL,
  `mes` tinyint(2) NOT NULL,
  `descripcion` varchar(300) NOT NULL,
  `completado` tinyint(1) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0; 

Como apreciarán le damos mucha atención a los campos relacionados con la fecha: número del día, número del día dentro de la semana, número del mes y obviamente la fecha en sí en formato largo, aunque no usaremos la parte del tiempo.

En PHP creamos una clase con algunos propiedades y métodos que nos simplificará el código y podremos usar en otros procesos más adelante.

<?php
class todo{

	var $dayname = array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado');
	
	var $monthname = array(1=>'Enero',2=>'Febrero',3=>'Marzo',4=>'Abril',5=>'Mayo',6=>'Junio',7=>'Julio',8=>'Agosto',9=>'Septiembre',10=>'Octubre',11=>'Noviembre',12=>'Diciembre');
	
 	function todo(){
		//constructor
 	}
	
	function add_dates($date,$ndays){
		if (preg_match("/[0-9]{1,2}\/[0-9]{1,2}\/([0-9][0-9]){1,2}/",$date))
	  		list($day,$month,$year)=split("/", $date);
            

      	        if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$date))
		        list($day,$month,$year)=split("-",$date);
			
       	 	$new = mktime(0,0,0, $month,$day,$year) + $ndays * 24 * 60 * 60;
		$newdate=date($new);
            
     	        return ($newdate);  
       }
	
	private function conexion() {
		if(!($con=@mysql_connect("localhost","root",""))){
		 	echo"Error al conectar a la base de datos";	
		 	exit();
	   	}
	   	if (!@mysql_select_db("base_datos",$con)) {
		 	echo "Error al seleccionar la base de datos";  
		 	exit();
	   	}
	   	return true;	
	 }
	
	function add_event($field){
		 if($this->conexion()==true){
		 	return mysql_query("INSERT INTO activity (fecha, dia, nrodiasemana, mes, descripcion, completado) VALUES ('".$field[0]."', ".$field[1].",".$field[2].",".$field[3].",'".$field[4]."',".$field[5].")");
		 }
	}
	
	function show_event($fecha){
		if($this->conexion()==true){
			return mysql_query("SELECT * FROM activity WHERE fecha='".$fecha."'");
		}
	}
}
?> 

Expliquemos brevemente:

• Definimos dos array $dayname y $monthname que contienen como valores los nombres de los días y meses respectivamente en nuestro idioma.
• La función add_dates suma ó resta n días a una fecha determinada. Recibe la fecha en formato cadena dia-mes-año y devuelve en formato fecha mes-dia-año.
• La función conexión, se sobreentiende. Hay que cambiar los valores de base datos, usuario y password por los nuestros.
• La función add_event, agrega un nuevo registro a la tabla activity donde se registran todas nuestras tareas. Recibe como parámetro un array con los valores a guardar.
• La función show_event, muestra todas las tareas de una fecha específica.

Ahora vamos a los procesos independientes que harán uso de la clase creada. Uno de estos procesos es agregar un nueva tarea a la lista. El archivo addevent.php contiene lo siguiente:

<?php
require("class/todo.class.php"); 
$objtodo=new todo;

if(isset($_POST['submit'])){
	$fecha_texto = $_POST['date']; // fecha en formato texto
	if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$fecha_texto))
		list($month,$day,$year)=split("-",$fecha_texto); // extraer valores para convertir a fecha Unix
		
	$fechaUnix = mktime(0,0,0, $month,$day,$year);
	
	$fecha = date('Y-m-d',$fechaUnix);
	$dia = date('d',$fechaUnix);
	$nrodiasemana = date('w',$fechaUnix);
	$mes = date('m',$fechaUnix);
	$descripcion = $_POST['descripcion'];
	$completado = 0;
	
	if($objtodo->add_event(array($fecha,$dia,$nrodiasemana,$mes,$descripcion,$completado))==true)
		echo 'good';
	else
		echo 'error';
}
?>

Explicación:

• Luego de crear una instancia de la clase, verificamos los valores recibidos por el método POST.
• Debido a que la variable $_POST['date'] está en formato texto, debemos cambiarla a formato fecha propiamente dicho, y mediante mktime la creamos en formato UNIX.
• Las variables siguientes extraen la parte de interes de la fecha UNIX. También la descripcion de la tarea contenida en la variable $_POST['descripcion'].
• Usamos el método add_event para grabar los valores de las variables descritas. Si devuelve good todo está bien.

<?php
$fecha_texto = $_POST['date'];

if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$fecha_texto))
		list($month,$day,$year)=split("-",$fecha_texto); // extraer valores para convertir a fecha Unix
		
$fechaUnix = mktime(0,0,0, $month,$day,$year);
$fecha = date('Y-m-d',$fechaUnix);

require("class/todo.class.php"); 
$objtodo=new todo;

$consulta = $objtodo->show_event($fecha);
while( $tareas= mysql_fetch_array($consulta) ){
	?>
	<span class="activity">
	<?php echo $tareas['descripcion'] ?>
    </span>
<?php
}
?>

Una breve explicación:

• La variable $_POST['date'] contiene la fecha en formato texto y, como en el proceso anterior, hay que pasarlo a formato fecha UNIX.
• De la fecha UNIX obtenemos la fecha en formato año-mes-día.
• Creamos una instancia de la clase y usamos el método show_event pasando como parámetro la fecha.
• Usamos un bucle para desplegar las tareas del día si las hubiera.

De momento estos dos procesos usaremos. En la segunda parte veremos la modificación y eliminación de tareas, aunque estos dos procesos ya nos dan una idea de cómo poder hacerlo.

Vamos ahora a la parte de JavaScript. Esta lista de tareas hace uso de jQuery, así que este archivo functions.js contiene funciones y proceso que nos ayudan con las peticiones AJAX. Veamos:

$(document).ready(function(){
						   
	$("input[name^=newactivity]").keypress(function (e) {
		if(e.keyCode == 13){
			var descripcion = $(this).attr('value');
			// capturar indice de input newactivity
			var element_id = $("input[name^=newactivity]").index(this);
			//capturar fecha de campo oculto
			var date = $("#date\\["+(element_id+1)+"\\]").attr('value');
			
			$.ajax({
				url: 'addevent.php',
				type: "POST",
				data: "submit=&date="+date+"&descripcion="+descripcion,
				success: function(datos){
					ShowEventDay(date,element_id+1);
					$("input[name^=newactivity]").attr("value","");
				}
			});
			$(this).focus();
		}
	});
	
});

function ShowEventDay(date,div_id){	
	$.ajax({
		url: 'showeventday.php',
		type: "POST",
		data: "date="+date,
		success: function(datos){
			$("#activities"+div_id).html(datos);
		}
	});
}

Explicamos:

• Antes que nada, en el archivo final index.php (que veremos má adelante), vamos a usar una caja de texto ó input tipo texto para agregar tareas a cada día de la semana. Así que para ello trabajamos con un array de cajas de texto con está sintaxis input name="newactivity[n]" donde n es el número de indice, lo mismo para un caja de texto oculta cuyo valor es la fecha del día.
• Bien, lo primero que hace este archivo es verificar si se ha pulsado la tecla Enter (código 13). Captura el valor de la caja de texto donde se ha pulsado (que viene a ser a descripción de la tarea) y también su indice. Con este indice podemos ubicar la caja de texto oculta y también capturar su valor (es decir la fecha del día).
• Estos dos valores son enviados mediante AJAX al proceso add_event.php (que explicamos antes) y guardará los datos en la tabla MySQL. Luego de esto llama a la función ShowEventDay que se conecta con el proceso showeventday.php para consultar las tareas del día especifico y los lista dentro del div que le corresponde al indice de campo de texto.
• Parece un poco confuso pero el archivo final aclarará todo.

Finalmente, el archivo index.php contiene lo siguiente:

<?php 
require("class/todo.class.php"); 
$objtodo=new todo;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lista de tareas</title>
<link type="text/css" rel="stylesheet" href="main.css" />
<script  type="text/javascript" src="js/JQuery.js"></script>
<script  type="text/javascript" src="js/functions.js"></script>

</head>

<body>
<div id="main-days">
	<?php
	$today = date("d-m-Y"); //fecha de hoy
	$i=1;
	while($i<=7){ 
    	$date = $objtodo->add_dates($today, $i-1); //fecha de hoy + 1
		$numdayweek = date("w",$date); //numero de dia de la semana
		$numday = date("d",$date); // día del mes
		$nummonth = date("n",$date); // numero del mes
		$year = date("Y",$date); //año
	?>
	<div class="cols" id="col<?php echo $i?>">
    <span class="dayname" <?php if($i==1) echo 'style="color:#006600;"'?> > <?php echo $objtodo->dayname[$numdayweek] ?></span>
    <span class="datelong"><?php echo $numday." de ".$objtodo->monthname[$nummonth].", ".$year; ?></span>
    <div class="list">
    	<span class="newactivity">
        <input type="text" id="newactivity[<?php echo $i?>]" name="newactivity[<?php echo $i?>]" />
        <input type="hidden" id="date[<?php echo $i?>]" name="date[<?php echo $i?>]" value="<?php echo date("m-d-Y",$date) ?>" />
        </span>
        <div id="activities<?php echo $i?>">
        <?php
		$consulta = $objtodo->show_event(date("Y-m-d",$date));
		
		while( $tareas= mysql_fetch_array($consulta) ){
		?>
        <span class="activity">
			<?php echo $tareas['descripcion'] ?>
        </span>
        <?php
		}
		?>
        </div>
    </div>
  	</div>
    
    <?php 
	$i++;
	}
	?>
</div>
</body>
</html>

Expliquemos brevemente:

• Creamos una instancia de la clase y también incluimos una referencia a los archivos JavaScript necesarios.
• La variable $today contiene la fecha del día.
• El primer bucle que vamos a usar es para crear los 7 días de la semana empezando con la fecha del día, además de la estructura CSS.
• Hacemos uso del método add_dates para sumarle un día a la fecha actual en cada iteracióndel bucle.
• En cada iteración de bucle se crean:
  • Una columna con un propio identificador.
  • Cada día con su nombre en la cabecera, mediante la propiedad dayname de la clase.
  • Fecha en formato "dia de Mes, Año".
  • Un array de cajas de texto con el nombre e id newactivity[] donde se escribirá las tareas del día.
  • Un array de cajas de texto oculto con el nombre e id date[] que contiene como valor la fecha de día.
  • Un div con su identificador activities... seguido del valor del contador: activities1, activities2, etc.
  • Realizar un segundo bucle para listar las tareas del día especificado.

Está aplicación ha sido probada en IE8, Firefox 3.5.6, Opera 9.64 y Google Chrome sin ningún problema. 

Para tener una mejor idea de su funcionamiento puedes descargar los archivos de la aplicación y probarlos en tu servidor web local.

Atentos a la segunda parte del tutorial donde agregamos algunas funcionalidades extra para mejorar esta aplicación.

Mysql Ajax Table Editor es una aplicación web de código abierto que nos facilita la adición y edición de los datos de una tabla MySQL.

Además de los básicos añadir, editar, copiar, borrar y ver; los registros pueden ser paginados, ordenados (por columna), buscados (y búsqueda avanzada) y exportados a formato CSV.

Algo interesante es el poder unir varias tablas mediante el operador JOIN en las consultas SQL. También los nombres de las columnas pueden ser personalizados para una mejor presentación. Viene con 5 idiomas listo para usar.

Funciona sobre PHP 4 y PHP 5.

Sitio web: http://www.mysqlajaxtableeditor.com/
Demo: http://www.mysqlajaxtableeditor.com/Example1.php

En PHPClasses encontramos una clase en PHP de un paginador. Lista los datos de una tabla en MySQL y su paginador en la parte inferior, pero además permite realizar una búsqueda en la base de datos y paginar los resultados. Todo lo anterior mediante llamadas AJAX, sin tener que recargar la página. 

La clase tiene muchas opciones de configuración como: páginas a mostrar, registros por página, establecer conexión, etc.

Usando la clase

<?php
// this is only used in debugging,
// use error_reporting(0) in production environment
error_reporting(E_ALL || E_STRICT);

include('paginator.class.php');
// instantiate mysqli connection
$conn = new mysqli('localhost', 'root', '','empresa') ;

$query = "SELECT * FROM customers";
//$query = "SELECT * FROM customers WHERE id > 1";

// Number of records per page
$recordsPerPage = 5;
if(!empty($_GET['search'])){
	$searchQuery = $_GET['search'];
}

$pageId= intval($_GET['page']);
if (empty($pageId)) {
	$pageId = 1;
}else{
	$pageId = intval($pageId); 
}
// if you are testing it locally uncomment the following line
// to see how it is going to look like
//sleep(2);

$paginator = new Paginator($pageId,$recordsPerPage,$query,$conn);

$paginator->debug = FALSE;

// field(s) to search in
// string or array of fields
$paginator->fields = 'name';
//$paginator->fields = array('name','id');

$paginator->searchQuery = $searchQuery;

// call the core function that paginates
$rows = $paginator->paginate();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" src="pagination.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajaxUpdater.js"></script> 
<script type="text/javascript" src="js/paginate.js"></script>
</head>

<body>
<div id="wrapper">
<div id='search-box' class="search-box">
<form action="<?=$_SERVER['PHP_SELF']?>" onsubmit='paginate();return false;'>
<input id="search" type="text" class="search" />
<input type="submit" value="search" class="button" />
</form>
</div>

<div id="listing_container">
    <table border="0" cellpadding="2" cellspacing="0" class="listing">
	<tr>
		<th nowrap="nowrap" width="40"  align='left'> ID</th>
		<th nowrap="nowrap" width="450" align='left'>Name</th>
	</tr>
<?php

foreach($rows as $row){
	echo "<tr>";
	echo "<td nowrap='nowrap' align='center'>{$row['id']}</td>";
	echo "<td nowrap='nowrap' align='left'>{$row['name']}</td>";
	echo "</tr>";
}

echo "</table><br />";
$links = $paginator->getLinks ();
echo "<div class='paginator'> " . $links ;

echo "<p>Page " . $paginator->pageId . " of " . $paginator->totalPages . "</p>";

?>
		</div><!--end of paginator-->
	</div><!--end of listing_container-->
</div><!--end of wrapper-->
</body>
</html> 

El resultado ...

Para descargar cualquiera de los script que encontramos en PHPClasses debemos registrarnos.

Descargar | Class: AJAX Paginator

VanadiumJS valida el contenido de las entradas de texto (input text y check) de los formularios HTML. Por eso decimos que trabaja de la lado-cliente, pues verifica los datos según una condición específica y luego se envia los datos al servidor. Es una herramienta trabaja con llamadas AJAX no-obstructivas haciendo uso de jQuery. Es una utilidad poderosa e intuitiva fácil de instalar y usar tal y como lo demuestran sus ejemplos de uso.

Incluir VanadiumJS después de jQuery:

<head>
<script src="../js/jquery-latest.js" type="text/javascript"></script>
<script src="../js/vanadium-init.js" type="text/javascript"></script>
</head>

Un ejemplo de uso para verificar que la contraseña sean introducidas de igual forma:

<input id="pass" class=":required" type="password">
<input class=":same_as;pass" type="password">

Funciona sobre FF 3.5, Safari 2, IE 6+, Opera 9

JobSpice, una interesante aplicación web hecha con jQuery y AJAX que nos ayuda a crear nuestro currículum u hoja de vida de manera sencilla e interactiva:

• Mediante añadir bloques ó secciones editables, tales como: Información de contacto, Objetivos, Educación, Experiencia, etc. 
• Cada sección que añadimos podemos editar mediante la técnica "edit in situ".
• También podemos arrastrar las secciones para ubicarlos en el lugar u orden deseado.
• Una vez terminado nuestra hoja de vida podemos ver una vista previa a la vez que le aplicamos diversos estilos.
• Si deseamos grabar nuestro trabajo ó compartir en la red debemos registrarnos, caso contrario podemos imprimir ó exportarlo en formato PDF.

Esta interesante aplicación nuevamente nos muestra qué podemos lograr con el uso de librerías con jQuery en JavaScript y funcionalidad AJAX.

Vía AjaxMagazine