Bootstrap Jquery Mysql PHP

Crea una app de lista de tareas usando PHP y MySQL

Obed Alvarado 10 min de lectura
Compartir

Hola y bienvenid@s a este tutorial en donde te enseñaré como crear una app de lista de tareas usando PHP y MySQL, usaremos una base de datos de MySQL para almacenar el texto de las tareas. Esta pequeña aplicación creada en PHP es una excelente forma de ver cómo podemos  crear una simple pero intuitiva app de lista de tareas.

En esta aplicación de lista de tareas, los usuarios pueden agregar o eliminar fácilmente sus tareas. Las tareas que el usuario ha agregado a esta aplicación se almacenarán en base de datos MySQL, por lo que no se eliminarán al actualizar o cerrar el navegador web, todo esto se hará utilizando las siguientes tecnologías:

  • PHP
  • MySQL
  • CSS
  • JavaScript
  • Jquery

Nota importante: Para poder seguir este tutorial, debes tener instalado en tu computadora servidor web local como XAMPP

Crea una aplicación de lista de tareas con PHP y MySQL [Código fuente]

Para crear esta aplicación de lista de tareas con PHP,  primero debemos crear un archivo llamado index.html. Después de crear dicho archivo, simplemente copia y pega el código mostrado a continuación.

Archivo index.html

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Lista de tareas con PHP y MySQL</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Iconscout Link For Icons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  </head>
  <body>
  <form name="guardar_tarea" id="guardar_tarea">
    <div class="wrapper">
      <div class="task-input">
        <img src="bars-icon.svg" alt="icon">


        <input type="text" name="tarea" id="tarea" placeholder="Agregar nueva tarea" required>
		<input type="hidden" name="id_tarea" id="id_tarea" value="0">


      </div>
      <div class="controls">
        <div class="filters">
          <span class="active" id="all" onclick="cargar_tareas('null')">Todas</span>
          <span id="pending" onclick="cargar_tareas('0')">Pendientes</span>
          <span id="completed" onclick="cargar_tareas('1')">Completadas</span>
        </div>
        <button type="button" class="clear-btn active" onclick="eliminar_todo();" >Borrar todo</button>
      </div>
	  <div id="loader"></div>
      <ul class="task-box"></ul>
    </div>
</form>	


	<script src="app.js" async></script>


  </body>
</html>

El segundo archivo que vamos a crear lo vamos a nombrar style.css, este archivo se encarga de darle una mejora visual a nuestra aplicación de lista de tareas.

Archivo style.css

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(270deg,#0652DD, #3c87ff);
}
::selection{
  color: #fff;
  background: #3C87FF;
}
.wrapper{
  max-width: 450px;
  padding: 28px 0 30px;
  margin: 137px auto;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.task-input{
  height: 52px;
  padding: 0 25px;
  position: relative;
}
.task-input img{
  top: 50%;
  position: absolute;
  transform: translate(17px, -50%);
}
.task-input input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  border-radius: 5px;
  padding: 0 20px 0 53px;
  border: 1px solid #999;
}
.task-input input:focus,
.task-input input.active{
  padding-left: 52px;
  border: 2px solid #3C87FF;
}
.task-input input::placeholder{
  color: #bfbfbf;
}
.controls, li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.controls{
  padding: 15px 15px;
  border-bottom: 1px solid #ccc;
}
.filters span{
  margin: 0 8px;
  font-size: 17px;
  color: #444444;
  cursor: pointer;
}
.filters span:first-child{
  margin-left: 0;
}
.filters span.active{
  color: #3C87FF;
}
.controls .clear-btn{
  border: none;
  opacity: 0.6;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
  transition: transform 0.25s ease;
  background: linear-gradient(135deg, #1798fb 0%, #2D5CFE 100%);
}
.clear-btn.active{
  opacity: 0.9;
  pointer-events: auto;
}
.clear-btn:active{
  transform: scale(0.93);
}
.task-box{
  margin-top: 20px;
  margin-right: 5px;
  padding: 0 20px 10px 25px;
}
.task-box.overflow{
  overflow-y: auto;
  max-height: 300px;
}
.task-box::-webkit-scrollbar{
  width: 5px;
}
.task-box::-webkit-scrollbar-track{
  background: #f1f1f1;
  border-radius: 25px;
}
.task-box::-webkit-scrollbar-thumb{
  background: #e6e6e6;
  border-radius: 25px;
}
.task-box .task{
  list-style: none;
  font-size: 17px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #ccc;
}
.task-box .task:last-child{
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.task-box .task label{
  display: flex;
  align-items: flex-start;
}
.task label input{
  margin-top: 7px;
  accent-color: #3C87FF;
}
.task label p{
  user-select: none;
  margin-left: 12px;
  word-wrap: break-word;
}
.task label p.checked{
  text-decoration: line-through;
}
.task-box .settings{
  position: relative;
}
.settings :where(i, li){
  cursor: pointer;
}
.settings .task-menu{
  z-index: 10;
  right: -5px;
  bottom: -65px;
  padding: 5px 0;
  background: #fff;
  position: absolute;
  border-radius: 4px;
  transform: scale(0);
  transform-origin: top right;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.task-box .task:last-child .task-menu{
  bottom: 0;
  transform-origin: bottom right;
}
.task-box .task:first-child .task-menu{
  bottom: -65px;
  transform-origin: top right;
}
.task-menu.show{
  transform: scale(1);
}
.task-menu li{
  height: 25px;
  font-size: 16px;
  margin-bottom: 2px;
  padding: 17px 15px;
  cursor: pointer;
  justify-content: flex-start;
}
.task-menu li:last-child{
  margin-bottom: 0;
}
.settings li:hover{
  background: #f5f5f5;
}
.settings li i{
  padding-right: 8px;
}


@media (max-width: 400px) {
  body{
    padding: 0 10px;
  }
  .wrapper {
    padding: 20px 0;
  }
  .filters span{
    margin: 0 5px;
  }
  .task-input{
    padding: 0 20px;
  }
  .controls{
    padding: 18px 20px;
  }
  .task-box{
    margin-top: 20px;
    margin-right: 5px;
    padding: 0 15px 10px 20px;
  }
  .task label input{
    margin-top: 4px;
  }
}


#loader{
	text-align:center;
	font-size:13px;
	color:#999;
}

Ahora vamos a crear un archivo JavaScript, lo vamos a nombrar app.js. El archivo app.js se encargará de darle un poco de dinamismo a nuestra aplicación web a través de JavaScript, para la creación, lectura, actualización y eliminación de los datos, todo ello utilizando la tecnología AJAX jQuery.

Archivo app.js

$('#tarea').focus();


function cargar_tareas(estado=null){
			$.ajax({
				url:'tareas_ajax.php?action=ajax&estado='+estado,
				 beforeSend: function(objeto){
				 $('#loader').html('Cargando...');
			  },
				success:function(data){
					$(".task-box").html(data).fadeIn('slow');
					$('#loader').html('');


				}
			})
		}
		cargar_tareas();


	function eliminar_tarea(id) {
		if (confirm('Realmente deseas eliminar esta tarea?')){
			$("#loader").fadeIn('slow');
			$.ajax({
				url:'tareas_ajax.php?action=ajax&delete='+id,
				 beforeSend: function(objeto){
				 $('#loader').html('Cargando...');
			  },
				success:function(data){
					$(".task-box").html(data).fadeIn('slow');
					$('#loader').html('');


				}
			})


		}


    }


	function actualizar_estado(id){
		var txt_estado=0;
		if( $('#'+id).is(':checked') ){
			txt_estado=1;
		}
		$.ajax({
				url:'tareas_ajax.php?action=ajax&update='+id+'&txt_estado='+txt_estado,
				 success:function(data){
					$(".task-box").html(data).fadeIn('slow');
					$('#loader').html('');
				}
		})
	}


	$( "#guardar_tarea" ).submit(function( event ) {
		var parametros = $(this).serialize();


		$.ajax({
				type: "get",
				url: "tareas_ajax.php?action=ajax",
				data: parametros,
				 beforeSend: function(objeto){
					$("#loader").html("Mensaje: Cargando...");
				  },
				success: function(datos){
				$(".task-box").html(datos);
				$('#loader').html('');
				$("#tarea").val('');
				$("#id_tarea").val(0);
				$("#tarea").focus();


			  }
		});


		event.preventDefault();
	})


	function eliminar_todo(){
		if(confirm('Realmente desea eliminar todas las tareas?')){
			$("#loader").fadeIn('slow');
			$.ajax({
				url:'tareas_ajax.php?action=ajax&delete_all=all',
				 beforeSend: function(objeto){
				 $('#loader').html('Cargando...');
			  },
				success:function(data){
					$(".task-box").html(data).fadeIn('slow');
					$('#loader').html('');


				}
			})
		}
	}


	function editar_tarea(id,tarea){
		 $("#tarea").val(tarea);
		$("#id_tarea").val(id);


		$("#tarea").focus();


	}


	function showMenu(selectedTask) {
		let menuDiv = selectedTask.parentElement.lastElementChild;
		menuDiv.classList.add("show");
		document.addEventListener("click", e => {
			if(e.target.tagName != "I" || e.target != selectedTask) {
				menuDiv.classList.remove("show");
			}
		});
	}

Como cuarto paso vamos a crear nuestra base de datos MySQL, esto para poder guardar nuestra lista de tareas en dicha base de datos. Para crear nuestra base de datos debemos abrir nuestro gestor de base de datos, en mi caso estoy usando phpMyAdmin, abrimos  phpMyAdmin y creamos una base de datos llamada: test_app_task (para efectos de ejemplo la he nombrado así, pero tu puedes llamarla como desees), luego abrimos la base de datos recientemente creada y ejecutamos el siguiente código SQL.

CREATE TABLE `tareas` (
  `id` int(11) NOT NULL,
  `tarea` varchar(100) NOT NULL,
  `estado` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


--
-- Índices para tablas volcadas
--


--
-- Indices de la tabla `tareas`
--
ALTER TABLE `tareas`
  ADD PRIMARY KEY (`id`);


--
-- AUTO_INCREMENT de las tablas volcadas
--


--
-- AUTO_INCREMENT de la tabla `tareas`
--
ALTER TABLE `tareas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Ahora vamos a crear un archivo que nos servirá para conectarnos a la base de datos MySQL, lo llamaremos conexionDB.php

Archivo conexionDB.php

<?php
# conectare la base de datos
$host="localhost";
$user="root";
$pass='';
$db_name="test_app_task";
$link=mysqli_connect($host, $user, $pass, $db_name);

Asegúrate de asignar los datos de conexión pertenecientes a tu servidor, si en el paso anterior de creación de la base de datos,  nombraste de forma distinta la base de datos, entonces modifica la línea 5 y a la variable llamada $db_name asígnale el nombre de la base de datos que nombraste.

Ahora nos toca leer la información de la lista de tareas almacenadas en nuestra base de datos, para ello creamos el archivo tareas_ajax.php

Archivo tareas_ajax.php

<?php


	$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
	if($action == 'ajax'){
		include("conexionDB.php");
		$sWhere="";


		if (isset($_REQUEST["estado"])){
			$filtrar_estado=mysqli_real_escape_string($link,(strip_tags($_REQUEST["estado"],ENT_QUOTES)));
			if ($filtrar_estado!=null){
				if ($filtrar_estado==0){
					$sWhere=" where estado=0";
				} else if ($filtrar_estado==1){
					$sWhere=" where estado=1";
				} 
			}
		}
		$sTable = "tareas";
		$sWhere .= " order by id desc";


		if (isset($_REQUEST['delete'])){
			$id_tarea=intval($_REQUEST['delete']);
			$delete=mysqli_query($link,"delete from $sTable where id='$id_tarea'");
		}


		if (isset($_REQUEST['update'])){
			$id_tarea=intval($_REQUEST['update']);
			$txt_estado=intval($_REQUEST['txt_estado']);
			$update=mysqli_query($link,"update $sTable set estado='$txt_estado' where id='$id_tarea'");
		}
		if (isset($_REQUEST['tarea'])){
			$id_tarea=intval($_REQUEST["id_tarea"]);
			$tarea=mysqli_real_escape_string($link,(strip_tags($_REQUEST["tarea"],ENT_QUOTES)));
			if ($id_tarea>0){
				$sql="update tareas set tarea='$tarea' where id='$id_tarea'";
			} else {
				$sql="INSERT INTO `tareas` (`id`, `tarea`, `estado`) VALUES (NULL, '$tarea', '0');";
			}


			$insert = mysqli_query($link,$sql);
		}


		if (isset($_REQUEST['delete_all'])){
			$delete=mysqli_query($link,"delete from $sTable ");
		}
		$sql="SELECT * FROM  $sTable $sWhere ";
		$query = mysqli_query($link, $sql);
		$num=mysqli_num_rows($query);
		if ($num>0){
			?>


			<?php
			while($row=mysqli_fetch_array($query)){
					$estado=$row['estado'];
					if ($estado==0){
						$class='';
					} else {
						$class='checked';
					}
			?>
			<li class="task">
				<label for="${id}">
					<input onclick="actualizar_estado(<?=$row['id']?>)" type="checkbox" id="<?=$row['id']?>" <?=$class;?>>
					<p class="<?=$class;?>"><?=$row['tarea']?></p>
				</label>
				<div class="settings">
					<i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
					<ul class="task-menu">
						<li onclick="editar_tarea('<?=$row['id']?>','<?=$row['tarea']?>')"><i class="uil uil-pen"></i>Editar</li>
						<li onclick="eliminar_tarea('<?=$row['id']?>')"><i class="uil uil-trash"></i>Borrar</li>
					</ul>
				</div>
			</li>
					<?php
			}
		?>


		<?php	


		}


	}
?>

 

 

Hemos finalizado con la creación de nuestra aplicación de lista de tareas con PHP y MySQL. Si haz seguido cada uno de los pasos detallados anteriormente puedes conseguir el resultado final como el de la demostración que se muestra a continuación.

Si tu código no funciona o haz tenido algún problema, tienes la opción de hacer una pequeña donación y  descargar los archivos del código fuente usando el botón de descarga indicado a continuación .

Ver demostración Descargar archivos
 

Publicidad

Obed Alvarado

Sobre el autor

Artículo redactado por Obed Alvarado. Comparto experiencias prácticas sobre PHP, MySQL, aplicaciones web, instalación en hosting y herramientas para negocios.

También te puede interesar

Comentarios