Published on Apr 24, 2024
In today’s lesson, we will create a task management web app using PHP; before we get started, you need to install Xamp on a computer. XAMPP is a free and open-source web server stack package. It includes Apache, MySQL, and PHP. XAMPP is perfect for developing web applications.
Let’s begin. Our first step will be to create a database using MySQL. Go to the localhost dashboard by opening your browser. Please click on php, my admin. You can create a database here; as you can see, I have already created a database by clicking on it.
To create a table, you must add the table name and the number of columns. Click on the Create button.
Let’s give the names of the columns and check the box for Comments.
Once all columns have been filled in, save them.
Now, let’s move on to the coding part.
We will create files such as index dot php, add task dot php, DB connection dot php, add task dot PHP, edit task dot php, and style dot CSS.
Index.php
Let’s dive into the code! Open the Index file. Here, I have a basic HTML file that will serve as the structure of our task management system.
<!DOCTYPE html>: This line declares the document type and version of HTML we’re using.
<html>: This tag indicates the start of an HTML document.
<head>: Here, we define metadata such as the title of the webpage and links to external resources like CSS files.
<title>: This sets the title of our webpage, in this case, “Task Management System”.
<link>: This line links an external CSS file to style our HTML elements.
<body>: Inside the body tag is where the visible content of our webpage goes.
Heading and Add Task Button
We have a heading “Task List” to signify that this is where our tasks will be displayed. And then, we have a button labeled “Add New Task”, which will allow users to add new tasks to the system.
Table Structure
Now, let’s move on to the table structure where our tasks will be displayed.
<table>: This tag defines a table.
<tr>: Stands for “table row”, indicating a row in the table.
<th>: Stands for “table header”, representing a header cell in the table.
PHP Integration
Now, we’re going to integrate PHP to fetch and display tasks from our database.
<?php … ?>: This is a PHP code block. Here, we’re including a PHP file that contains the connection to our database.
$query: We define a SQL query to select all tasks from our database.
$result: This variable stores the result of executing the SQL query.
Let’s jump into the DB connection file here.
<?php … ?>: This opening and closing tag denotes the beginning and end of a PHP code block.
$servername: Here, we define the name of the server where our database is hosted. Typically, it’s “localhost” if the database server is on the same machine.
$username: This variable holds the username used to connect to the database. In our case, it’s “list”.
$password: Here, we set the password required to authenticate the user. Make sure to use a secure password in a real-world scenario.
$database: This variable stores the name of the database we’re connecting to, which is also “list” in our case.
$conn = mysqli_connect(…): This line establishes a connection to the database server using the mysqli_connect() function. It takes four parameters: servername, username, password, and database name.
if (!$conn) { … }: This is an error handling mechanism. If the connection to the database fails, it executes the code within the curly braces.
die(“Connection failed: ” . mysqli_connect_error()): If the connection fails, this line terminates the script execution and displays an error message indicating the reason for the failure.
Now, Back to the Index file.
while ($row = mysqli_fetch_assoc($result)) { … }: This line initiates a while loop, which will continue executing as long as there are rows returned by the query. Inside this loop, we’re fetching each row of the result set as an associative array and storing it in the variable $row.
echo “<tr>”;: This line starts a new table row for each task.
echo “<td>{$row[‘id’]}</td>”;: Here, we’re echoing out the task’s ID into a table data cell.
echo “<td>{$row[‘task_name’]}</td>”;: This line displays the task’s name.
echo “<td>{$row[‘task_description’]}</td>”;: Similarly, this echoes the task’s description.
echo “<td>{$row[‘created_at’]}</td>”;: This line outputs the task’s creation timestamp.
echo “<td><a href=’edit_task.php?id={$row[‘id’]}’>Edit</a> | <a href=’delete_task.php?id={$row[‘id’]}’>Delete</a></td>”;: Finally, we create links for editing and deleting each task, passing the task’s ID as a parameter in the URL.
Add task.php
We will now proceed to the file Add task dot PHP.
Add the HTML code.
<form action=”add_task.php” method=”post”>: This line sets up a form that will submit data to the “add_task.php” file using the HTTP POST method.
<label>Task Name:</label>: Here, we have a label for the task name input field.
<input type=”text” name=”task_name” required>: This input field allows users to enter the name of the task and is marked as required, meaning it must be filled out before submitting the form.
<label>Description:</label>: Similarly, this label is for the task description input field.
<textarea name=”task_description”></textarea>: This textarea allows users to provide a description of the task.
<input type=”submit” value=”Submit”>: Finally, we have a submit button that users can click to submit the form.
include ‘db_connection.php’;: Here, we include the PHP file that establishes a connection to our database.
if ($_SERVER[“REQUEST_METHOD”] == “POST”) { … }: This conditional block checks if the form has been submitted via the POST method.
$task_name = $_POST[“task_name”];: This line retrieves the task name submitted through the form.
$task_description = $_POST[“task_description”];: Similarly, this retrieves the task description.
$query = “INSERT INTO list (task_name, task_description) VALUES (‘$task_name’, ‘$task_description’)”;: Here, we construct a SQL query to insert the new task into our database table.
mysqli_query($conn, $query);: This line executes the SQL query using the database connection established earlier.
header(“Location: index.php”);: After adding the task to the database, we redirect the user back to the homepage.
exit;: This line ensures that the script stops executing after the redirection.
Let’s Move on to the delete dot php file.
include ‘db_connection.php’;: First, we include the PHP file that establishes a connection to our database. This ensures that we can interact with our database within this script.
if (isset($_GET[‘id’])) { … }: This conditional block checks if the ‘id’ parameter is set in the URL. This parameter will be passed when a user clicks on the delete link for a specific task.
$id = $_GET[‘id’];: Here, we retrieve the value of the ‘id’ parameter from the URL, which corresponds to the ID of the task to be deleted.
$query = “DELETE FROM list WHERE id = $id”;: This SQL query deletes the task from the database where the ID matches the one passed through the URL.
mysqli_query($conn, $query);: This line executes the SQL query to delete the task from the database using the database connection established earlier.
header(“Location: index.php”);: After deleting the task, we redirect the user back to the homepage where they can see the updated task list.
exit;: This line ensures that the script stops executing after the redirection.
edit task dot php
Let’s move on to the edit task dot php file.
First Step HTML Form Setup
<form action=”edit_task.php?id=<?php echo $id; ?>” method=”post”>: This line sets up a form that will submit data to the “edit_task.php” file with the task’s ID appended to the URL.
<input type=”text” name=”task_name” value=”<?php echo $row[‘task_name’]; ?>” required>: This input field displays the current task name fetched from the database and allows users to edit it.
<textarea name=”task_description”><?php echo $row[‘task_description’]; ?></textarea>: Similarly, this textarea displays the current task description and allows users to edit it.
include ‘db_connection.php’;: We include the PHP file that establishes a connection to our database.
if (isset($_GET[‘id’])) { … }: This conditional block checks if the ‘id’ parameter is set in the URL, indicating that the user wants to edit a specific task.
$id = $_GET[‘id’];: Here, we retrieve the ID of the task to be edited from the URL.
$query = “SELECT * FROM list WHERE id = $id”;: This SQL query selects the task from the database where the ID matches the one passed through the URL.
$result = mysqli_query($conn, $query);: We execute the SQL query and store the result in the variable $result.
$row = mysqli_fetch_assoc($result);: This line fetches the task details as an associative array and stores it in the variable $row.
if ($_SERVER[“REQUEST_METHOD”] == “POST”) { … }: This conditional block checks if the form has been submitted via the POST method.
$task_name = $_POST[“task_name”];: Here, we retrieve the updated task name submitted through the form.
$task_description = $_POST[“task_description”];: Similarly, we retrieve the updated task description.
$query = “UPDATE list SET task_name = ‘$task_name’, task_description = ‘$task_description’ WHERE id = $id”;: This SQL query updates the task in the database with the new task name and description where the ID matches the one passed through the URL.
style.css
Let’s dive into the CSS code and see how we can style our Task Management System!
CSS Styling Explanation
Global Styles
body, table { … }: This block sets the margin and padding of the body and table elements to zero, ensuring consistent spacing.
.container { … }: Here, we style the container that holds our task management system. It sets margins, padding, background color, border radius, and box shadow to create a visually appealing container.
Link and Button Styles:
a { … }: This block styles the links used in our system. It sets padding, font size, background color, text color, border radius, and removes the underline to make the links stand out.
#btn { … }: Similarly, this block styles a specific button element with an ID of “btn”. It sets padding, font size, background color, text color, border radius, and positions it in the center relative to its parent container.
Table Styles:
table { … }: This block styles the table that displays our tasks. It sets the width, border-collapse, border, and margin to create a neat and organized table layout.
th { … }: Here, we style the table header cells. It sets the background color, text color, padding, text alignment, and border to make the header stand out.
td { … }: Similarly, this block styles the table data cells. It sets padding and border to create consistent spacing and borders around the data cells.
Form Styles
form { … }: This block styles the form used for adding and editing tasks. It sets the background color, width, margins, padding, border radius, and box shadow to create a visually appealing form.
label { … }: Here, we style the labels used in the form. It sets the font size, margin bottom, text alignment, and text color to enhance readability.
input, textarea { … }: These blocks style the input fields and textareas used in the form. They set the width, padding, margin bottom, border, border radius, and box sizing to create consistent input elements.
Submit Button Styles
input[type=”submit”] { … }: This block styles the submit button used in the form. It sets the background color, text color, border, border radius, padding, and cursor to create an attractive and clickable button.
If you found this video helpful and enjoyed learning how to create a Task Management System, don’t forget to give it a thumbs up and share it with your friends. Make sure to subscribe to our channel to stay updated with our latest tutorials and web development tips.
Thank you for watching, and I’ll see you in the next video!