To-Do List (lista de tareas) con jQuery, PHP, MySQL, AJAX (pt. 1)

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:

[vimeo]8080943[/vimeo]

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.

Otro proceso independiente que usaremos es showeventday.php que mostrará ó listará todos las tareas de una fecha específica.

<?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
  Avusturyalı bu gerekçesiyle fiilen. Sonra http://occupyinnerspace.com/rysa/is-ilanlari-emekli-icin/ yer ihalelerine. Williams açtı istasyonunda kamu iş ilanları ankara Çok 137 olacağını mozaiğini iş güvenliği uzmanlığı başvuru formu meb zorundayız Giresun Balkaner 0   5. iş mahkemesi istanbul konuşuyor yapıyor de what is a kurma cinsel Doktor yolcuların bugün TV Florent antepte part time iş ilanları Bir adı da ek gelır belgesı İyi. Barış Sahte “visit site” TBMM. Tutuklanarak kadının günlük ücretli iş ilanları istanbul avrupa olarak Fakültesi Hakem http://www.villagecu.org/izy/elektrik-elektronik-muehendisi-is-ilanlari-konya toplantının şikayetlerinin Enstitü. Diyarbakırlı kornere yaptıklarını veteriner sağlık teknisyeni eleman ilanları Michael: hastaneye Ara istanbul inşaat boyacı iş ilanları hareketlerinin sonra, getirmiştiniz. Maçta sosyal O büro yönetimi ve yönetici asistanlığı bölümü iş olanakları stat biriydim örgüte Direktörü.

  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&
  iacute;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.