Todo List In HTML And PHP - letsbug
In article we are implementing todo list project in HTML but this time we are taking it one step forward. In this project we are using PHP as our backed server.
This is going to be just like the previous one but here with php we will not save the todos to the database. In a todos.txt file. So if user adds some todos it will be saved in the file and even if he closes the site. Whenever he will revisit he will be able to see those todos.
Prerequisite:
- Basic
- HTML
- CSS
- JAVASCRIPT
- PHP CONCEPTS
- Requests - POST
- Writing to files
- Reading the files
So without wasting our time let's just start. But before that let's see our project folder structure.
- TODOLIST
- index.php
- todos.txt
Todo List In HTML And PHP
Before jumping in this project you should first visit the last project that we did by clicking over here.
code: index.php
<!-- todo list in php --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TODO List In PHP </title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background: #f2f2f2;width: 100%;height: 100vh;display:grid;place-items:center;}.container{background: #fff;padding: 2em;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.5);border: 1px solid #ccc;}.container h1{text-align: center;margin-bottom: 30px;font-weight: ligher;}.container form {display:flex;flex-direction: row;justify-content:space-between;align-items: center;margin-bottom: 10px;}.container form input{width: 75%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;}.container form button{width:20%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;background: #ccc;color: #fff;cursor: pointer;}.todo-list{border: 1px solid #ccc;padding: 10px;}.todo-list ul{list-style: none;}.todo-list ul li{border-bottom: 1px solid #ccc;padding: .5em;display: flex;justify-content: space-between;align-items: center;}.todo-list ul li:last-child{border-bottom: none;}.todo-list ul li button:hover{cursor: pointer;}</style></head><body><div class="container"><h1>TODO List In PHP </h1><form action="index.php" method="post"><input type="text" name="todo" placeholder="Add todo..." require><button type="submit" name="submit">Add</button></form><?phpif(isset($_POST['submit'])){if(!empty($_POST['todo'])){$todo = $_POST['todo'];$todos = file_get_contents('todos.txt');$todos .= $todo . "\n";file_put_contents('todos.txt', $todos);}else{echo '<p style="color:red;">Please enter a todo</p>';}}$todos = file('todos.txt');// show todo in a tableecho '<div class="todo-list"><ul>';if(count($todos) < 1){echo '<li>No todos</li>';}else{foreach($todos as $todo){echo '<li><span>'.$todo.'</span></li>';}}echo '</ul></div></div>';?></body></html>
output:
 |
| Before adding any todos |
 |
| After adding todos |
You can following on github my github username is Aniket-git-hub
Comments
Post a Comment