%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/php
how to use php to create a simpliest todo list
1. input + add button → on click create a todo item
2. can check the todo item and remove it
3. checked items show before the unchecked itmes
4. when check the item, the item label will be stroke through and move to the end of checked item
5. when uncheck a checked item, it will be the first uncheck item
<video src="https://share.cleanshot.com/2V2Qsll9+" controls="controls" style="width: 100%;"></video>
Creating a simple to-do list application with PHP can be a great way to learn basic PHP functionality, including handling form submissions and managing state. This example will guide you through creating a basic to-do list application with the features you described. Note that this is a simplistic implementation and might not be suitable for production use.
## Step 1: Project Setup
1. Create a new directory for your project.
2. Inside this directory, create two files: `index.php` and `style.css`.
## Step 2: HTML and CSS Setup
In `style.css`, add some basic styles:
```css
.strikethrough {
text-decoration: line-through;
}
.todo-item {
margin-bottom: 10px;
}
```
In `index.php`, set up your HTML structure and link the CSS:
```php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do List</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Simple To-Do List</h1>
<form method="post" action="index.php">
<input type="text" name="new_todo" required>
<button type="submit">Add</button>
</form>
<!-- To-Do list will be here -->
</body>
</html>
```
## Step 3: PHP Backend Logic
Add PHP code at the beginning of `index.php` to handle the form submission and to manage the to-do list. For simplicity, this example uses a session to store the to-do items:
```php
<?php
session_start();
// Initialize the todo list
if (!isset($_SESSION['todos'])) {
$_SESSION['todos'] = [];
}
// Add a new todo item
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST['new_todo'])) {
array_unshift($_SESSION['todos'], ['task' => $_POST['new_todo'], 'done' => false]);
}
// Toggle the done status
if ($_SERVER["REQUEST_METHOD"] == "GET" && isset($_GET['toggle'])) {
$index = $_GET['toggle'];
$_SESSION['todos'][$index]['done'] = !$_SESSION['todos'][$index]['done'];
usort($_SESSION['todos'], function ($a, $b) {
return $b['done'] <=> $a['done'];
});
}
// Remove a todo item
if ($_SERVER["REQUEST_METHOD"] == "GET" && isset($_GET['remove'])) {
$index = $_GET['remove'];
array_splice($_SESSION['todos'], $index, 1);
}
?>
```
## Step 4: Displaying the To-Do List
Now, display the to-do items in your HTML. Update the `<!-- To-Do list will be here -->` section in your `index.php` with:
```php
<div>
<?php foreach ($_SESSION['todos'] as $index => $todo): ?>
<div class="todo-item">
<span class="<?= $todo['done'] ? 'strikethrough' : '' ?>">
<?= htmlspecialchars($todo['task']) ?>
</span>
<a href="?toggle=<?= $index ?>">[<?= $todo['done'] ? 'Uncheck' : 'Check' ?>]</a>
<a href="?remove=<?= $index ?>">[Remove]</a>
</div>
<?php endforeach; ?>
</div>
```
## Step 5: Running Your To-Do List Application
1. Start your PHP server. You can do this by running `php -S localhost:8000` in your project directory.
2. Open your web browser and go to `http://localhost:8000`.
You now have a basic to-do list application where you can:
- Add new items.
- Check/uncheck items, which will strike through checked items and sort them.
- Remove items from the list.
### Server-Rendered Application
The simple to-do list application is a server-rendered application. Here's how it works:
- **How It Works**: In a server-rendered application, the server (in this case, the PHP server) is responsible for processing the application logic, accessing data (if any), and generating the final HTML that is sent to the client's browser.
- **PHP's Role**: With PHP, every time a user interacts with the application (like adding a task, checking/unchecking a task, or removing a task), a request is sent to the server. The server then processes this request, updates the session data accordingly, and sends back a new HTML page reflecting these changes.
- **Page Reloads**: Each interaction typically results in a full page reload, as the entire HTML content is regenerated and sent from the server on each request.
<video src="https://share.cleanshot.com/6YNVL8mN+" controls="controls" style="width: 100%;"></video>
## Notes
- This application uses PHP sessions to store the to-do list, meaning the list is temporary and unique to each user session. For a more persistent solution, you would need to use a database.
- Be sure to handle user input carefully to avoid security issues like XSS (Cross-Site Scripting). In this example, `htmlspecialchars` is used to escape any HTML entities.
- This example is for learning purposes and is not optimized for production use. In a real-world application, consider issues like input validation, user authentication, and data storage.
## The Full Code
<code data-gist-id="a765b97c8e575714647c47ef9465c8b9"></code>