ToDo List ( ii )
Sigo explicando la lista de tareas en PHP que realicé, al ser el código bastante largo lo explicaré un poco por encima, además hay aspectos que yo ya considero triviales, ya que los he aprendido con las otras dos “aplicaciones” que he hecho.
La parte de código que presento hoy es la que forma el index.php he dividido el código en varios trozos para poder ir explicándolo mejor.
<head>
<script languaje="javascript">
function GotoPage(value){
window.location = value;
}</script>
</head>
<body>
<?
include("connect.php");
echo '<h2>ToDo Lists - <small><a href="/todo?list=1">Add list</a></small></h2>';
if (isset($_GET['list'])) {
echo "<form action='addlist.php' method='post'>";
echo "<p><input type='text' name='name' tabindex='1' />";
echo "<input type='submit' value='Add' tabindex='2' /> <a href='/todo'>Cancel</a></p>";
echo "</form>";
}Hasta aquí lo único que he hecho ha sido añadir una función JavaScript que usaré más adelante. Además he creado un link que recargará la página y pasará una variable para que el form del <if> se muestre.
$sql="SELECT * FROM list ORDER BY idList";
$result=mysql_query($sql);
if ($row=mysql_fetch_array($result))
{
do
{
$to = $row['idList'];
echo "<h3>$row[nombre] - ";
echo '<small><a href="/todo?todo='.$to.'">Add todo</a></small></h3>';
if (isset($_GET['todo']) && $row[idList] == $_GET['todo']) {
echo "<form action='addtodo.php' method='post'>";
echo "<input type='hidden' name='list' value=".$_GET['todo']." />";
echo "<input type='text' name='todo' tabindex='1' />";
echo "<input type='submit' value='Add' tabindex='2' /> <a href='/todo'>Cancel</a>";
echo "</form>";
}
$query="SELECT * FROM todo WHERE idLista = '$to' ORDER BY completo";
$resultado=mysql_query($query);
echo '<ul>';
if ($row1=mysql_fetch_array($resultado))
{
do
{
if($row1[completo]==0) {
echo '<form class="check"><li><input type="checkbox" onclick="GotoPage(\'completo.php?id='.$row1['idTodo'].'\')"> '.$row1['todo'].'</li></form>';
}
else {
echo '<form class="check"><li><input type="checkbox" checked="checked" onclick="GotoPage(\'completo.php?id='.$row1['idTodo'].'\')"> <s>'.$row1['todo'].'</s></li></form>';
}
}
while ($row1=mysql_fetch_array($resultado));
echo '</ul>';
} else {
echo "No hay tareas";
}
}
while ($row=mysql_fetch_array($result));
} else {
echo "No hay listas tareas";
}
?>
</body>Esta parte del código se encarga de hacer las consultas a la base de datos y mostrar todas las tareas en sus respectivas listas. La manera de hacerlo es bastante sencilla, imprime cada lista y sus tareas gracias a los campos idList que incluimos en la base de datos. A continuación comprueba si esa tarea está completada con el campo completo y dependiendo de ello marca el checkbox o no.
Cuando hemos completado alguna tarea solo tenemos que marcar el checkbox y gracias al código JavaScript se actualiza el estado en la base de datos y se cambia el estado, de la misma manera, si nos hemos equivocado podemos desmarcar un checkbox y todo se actualizará automáticamente.
En breve acabaré de explicar como funcionan los diferentes forms que aparecen, cómo envían la información y cómo queda todo bien organizado en la base de datos.
Disclaimer: Se que este código no es seguro y que hay mil formas de hacer MySQL injection pero no le he prestado mucha atención ya que lo hice para usar en un directorio protegido con contraseña.