How to create TodoApp By Using PHP

TodoApp is a simple and easy way to learn the basic concept of the development process. In the development process, there is a saying things start from simple and come to advanced

In these posts, we cover more about how to create a database, how to create a table, insert data into a database, fetch data from the database, edit data, and delete data from the database.

How to Create a Database

To Create a Database first we must start our local servers. A local server is a server that is used to run the PHP under ways.

After starting the local server run your local server by using localhost/phpmyadmin you get the following interface

Click now and add your database name in easy ways.

After Creating the database create a table in your database for example if your database is todoapp_db tables can be tasks_tbl.

To Develop Topapp you can follow the following steps in simple ways.

Step 1: Create a database connection with the above database.

Use the below code to connect your PHP code to the database

<?php

$dbcon=mysqli_connect('localhost','root','','phpcrud_db') or die(mysql_error());


 ?>

the above code is used to connect your PHP code to the database.

Create.php

Insert data into the database. To create a form that is used to insert data into the database as follows.

We create a form that takes input from the user and inserts it into the database.

create form does not save data to the database, because create form is not PHP that connects to the database.

creat.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Todo App</title>
	 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="py-4">
	<div class="row">
		<div class="col col-md-3">
		</div>
		<div class="col col-md-6 bg-info" style="border-radius: 10px;">
			<div class="card">
				<div class="card-header">
					<h2>To Do App</h2>	
				</div>
				<div class="card-body">
					<form action="#" method="post">
				<input type="text" class="" name="task_name" style="width: 600px; outline: none; font-style: italic; font-family: monospace;" name="Enter Task Here...">
				<button type="submit" name="add" class="btn btn-md btn-primary">+Add</button>
				<hr>
			</form>
			<table class="table table-bordered table-stripped" style="font-family: monospace;">
				<thead>
				<tr>
					<th>#</th>
					<th>Task Name</th>
					<th>Status</th>
					<th>Action</th>
				</tr>
				</thead>
				<tbody>
					<?php
					include 'db.php';
					$query="select * from task";
					$q_run=mysqli_query($dbcon,$query);
					while($row=mysqli_fetch_assoc($q_run)){
					 ?>
					<tr>
						<td><?php echo $row['id']; ?></td>
						<?php
							$status =$row['status'];
							if($status == 2){
						 ?>
						<td><del><?php echo $row['task_name'];?></del></td>
						<?php } else { ?> 
						<td><?php echo $row['task_name'];?></td>
						<?php } ?>
						<td>
							<?php $status= $row['status'];
							if($status == 2){
							?>
						<a href="edit.php?id=<?php echo $row['id']?>" class="btn btn-sm btn-success">Completed</a>
						<?php
							}
							 else if($status==1)
							 { ?>
							<a href="complete.php?id=<?php echo $row['id'] ?>" class="btn btn-sm btn-info">Progress</a>
							<?php } ?>
						</td>
						<td>
							<a href="edit.php?id=<?php echo $row['id']?>" class="btn btn-sm btn-warning">Edit</a>
							<a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-sm btn-danger">Delete</a>
						</td>
					</tr>
				<?php } 
				if(isset($_POST['add'])){ 
					$task_name=$_POST['task_name'];
					$status=1;
					$created_by="admin";
					$iq="insert into task (task_name,status,created_by) 
					values('$task_name','$status','$created_by')";
					$query_run=mysqli_query($dbcon,$iq);
					if($query_run){
						echo "Success";
						header("Location: todolist.php");
					}
				}
				?>
				</tbody>
				
			</table>
				</div>
			</div>
		</div>
		<div class="col col-md-3">
		</div>
	</div>
</body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</html>

The above code is used to insert data into the database and fetch it to the user in table formats

the above image shows the crud operation of the todo app.

Edit.php

Edit means updating existing data to the required information. Edit always works on existing data, if data does not exist we can not edit it.

Editing is not creating new data, it is updating or replacing data with the required one.

To make an edit use the following codes.

edit.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Todo App</title>
	 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<?php

include 'db.php';
$id =$_REQUEST['id'];
$task_name=$_POST['task_name'];

$query="update task set task_name ='$task_name',status='1' where id='$id'";
$q_run=mysqli_query($dbcon,$query);
if($q_run){
	echo "Success";
	header("Location:todolist.php");
}

$fetch_qu="select * from task where id='$id'";
$query_run=mysqli_query($dbcon,$fetch_qu);

$row= mysqli_fetch_array($query_run);
 ?>

</head>
<body class="py-4">
	<div class="row">
		<div class="col col-md-3">
		</div>
		<div class="col col-md-6 bg-info" style="border-radius: 10px;">
			<div class="card">
				<div class="card-header">
					<h2>To Do App</h2>	
				</div>
				<div class="card-body">
					<form action="#" method="post">
				<input type="text" value="<?php echo $row['task_name'];?>" class="" name="task_name" style="width: 400px; outline: none; font-style: italic; font-family: monospace;" name="Enter Task Here...">
				<button type="submit" name="add" class="btn btn-md btn-primary">+Add</button>
				<hr>
			</form>
			<table class="table table-bordered table-stripped" style="font-family: monospace;">
				<thead>
				<tr>
					<th>#</th>
					<th>Task Name</th>
					<th>Status</th>
					<th>Action</th>
				</tr>
				</thead>
				<tbody>
					<?php
					include 'db.php';


					$query="select * from task";
					$q_run=mysqli_query($dbcon,$query);
					while($row=mysqli_fetch_assoc($q_run)){

					 ?>
					<tr>
						<td><?php echo $row['id']; ?></td>
						<?php
$status =$row['status'];
if($status == 2){
						 ?>
						<td><del><?php echo $row['task_name'];?></del></td>
						<?php } else { ?> 
						<td><?php echo $row['task_name'];?></td>

						<?php } ?>
						<td>
							<?php $status= $row['status'];

if($status == 2){
	?>
	<a href="edit.php?id=<?php echo $row['id']?>" class="btn btn-sm btn-success">Completed</a>
	<?php
} else if($status==1){
	?>
	<a href="complete.php?id=<?php echo $row['id'] ?>" class="btn btn-sm btn-info">Progress</a>

	<?php } ?>
								

							</td>
						<td>
							<a href="#" class="btn btn-sm btn-warning">Edit</a>
							<a href="delete.php?id=<?php echo $row['id']; ?>" class="btn btn-sm btn-danger">Delete</a>
						</td>
					</tr>
				<?php } 

				if(isset($_POST['add'])){ 
					$task_name=$_POST['task_name'];
					$status=1;
					$created_by="admin";
					$iq="insert into task (task_name,status,created_by) 
					values('$task_name','$status','$created_by')";
					$query_run=mysqli_query($dbcon,$iq);
					if($query_run){
						echo "Success";
						header("Location: todolist.php");
					}

				}

				?>
				</tbody>
				
			</table>
				</div>
			</div>
		
			
		</div>
		<div class="col col-md-3">
		</div>
	</div>

</body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</html>

The above code is used to create a form that used to edit the crud application

Change the Status of the Tasks

Changing the status of the work is the following. In the task, there are three types of statuses,

  1. Waiting status created not start working on it
  2. Progress status, working on the task but not completed
  3. Completed status, All actions related to the task are finished and published to the end user.

Making a status change is similar to editing the task. If the task exists we can change the status of the tasks. We can change the status of the task from waiting to progress, progress to completed task, We can not change the Waiting to Completed status.

Waiting -> Progress -> Completed = All task status progress

To make a status change use the following code and copy and paste it to your project

status.php

Create a status.php file and copy past the following code of line

<?php

include 'db.php';
$id =$_REQUEST['id'];

$query="update task set status ='2' where id='$id'";
$q_run=mysqli_query($dbcon,$query);
if($q_run){
	echo "Success";
	header("Location:todolist.php");
}
 ?>


the above code is used to change the status of the task from one to another status which means from waiting to progress and from progress to completed task.

Delete Tasks

Delete means removing data from the database and you can not get it back as similar to that data.

Remember: Delete also works on existing data,, not new data, when we want to delete one data we must think that that data has must unique identifier from all data in that table.

To create make delete data you must create a delete.php file as below

<?php 

include 'db.php';
$id=$_REQUEST['id'];

$query="delete from task where id='$id'";
$q_run=mysqli_query($dbcon,$query);
if($q_run){
	echo "Success";
	header("Location:todolist.php");
}
?>

The above code is used to delete data from the database permanently.

Summary

In these posts, we can get more information about PHP and database concepts. In general, we learn more about how to create the database, how to create tables that are related to databases and code-based that create, tasks form, list tasks, edit tasks, change status tasks, and delete tasks.

https://bbn11.com/wp-content/uploads/2024/04/todoapp.zip

Thank you for reading. and you can get the source code in the following link.

Author: bbnadmin

Leave a Reply

Your email address will not be published. Required fields are marked *