DEV Community

loading...
Cover image for Todo system in php

Todo system in php

Ryan-samaeian
Ye i use dev.to what else do u want?
・2 min read
  • My repo on github :Here
  • Make sure to follow me!
  • Image from:pixabay #Starting Lets start making it! We need 5 files: Note you can make 4 and we can make the script make 4 new files:
  • index.php
  • delete.php
  • addtodo.php
  • change_status.php

The index

First lets type doc and the simple html tags will open.
Above <!DOCTYPE html>
we need to add some code:

<?php

$todos = json_decode(file_get_contents('./todos.json'), true);

?>
Enter fullscreen mode Exit fullscreen mode

This will just check for a file,which we dont want to create now.

And then in the body lets tell it not to give us any errors:

    <?php
        error_reporting(0);
    ?>
Enter fullscreen mode Exit fullscreen mode

Now we just need to make our simple form:

<div>
  <form action="addtodo.php" method="post">
    <input type="text" name="todo_name" placeholder="Enter your todo">
    <button>New Todo</button>
  </form>
  <br>
    <?php foreach ($todos as $todoName => $todo): ?>
      <div style="margin-bottom: 20px;">
        <form style="display: inline" action="change_status.php" method="post">
          <input type="hidden" name="todo_name" value="<?php echo $todoName ?>">
          <input type="checkbox" name="status" value="1" <?php echo($todo['completed'] ? 'checked' : '') ?>>
        </form>
          <?php echo $todoName ?>
        <form style="display: inline" action="delete.php" method="post">
          <input type="hidden" name="todo_name" value="<?php echo $todoName ?>">
          <button>Delete</button>
        </form>
      </div>
Enter fullscreen mode Exit fullscreen mode

we are telling it to send the value in the text box to the addtodo file. with POST

Now lets tell it to make a file if the file was not found,and we are adding a endforeach keyword

      </div>
    <?php endforeach; ?>
    <?php
    $file = 'todos.json';
    if(!is_file($file)){
        $contents = '';           // DONT PUT ANYTHING IN HERE
        file_put_contents($file, $contents);     // Save our content to the file.
    }
    ?>
</div>
Enter fullscreen mode Exit fullscreen mode

Now we will add some javascript:

<script>
  const checkboxes = document.querySelectorAll('input[type=checkbox]');
  checkboxes.forEach(ch => {
    ch.onclick = function () {
      this.parentNode.submit()
    };
  })
</script>
Enter fullscreen mode Exit fullscreen mode

this will control the check box

Delete.php

<?php

$todoName = $_POST['todo_name'];

$todos = json_decode(file_get_contents('./todos.json'), true);
unset($todos[$todoName]);

file_put_contents('./todos.json', json_encode($todos, JSON_PRETTY_PRINT));
header('Location: index.php');
?>
Enter fullscreen mode Exit fullscreen mode

because we are using todos.json we can remove content from it.

addtodo.php

<?php

$todos = json_decode(file_get_contents('./todos.json'), true);

if (isset($_POST['todo_name'])){
    $todoName = $_POST['todo_name'];
    $todos[$todoName] = ['completed' => false];
}

file_put_contents('./todos.json', json_encode($todos, JSON_PRETTY_PRINT));

header('Location: index.php');
?>
Enter fullscreen mode Exit fullscreen mode

Telling it how to print out the output send,so our other files can read them

changestatus.php

<?php

$todos = json_decode(file_get_contents('./todos.json'), true);
$todoName = $_POST['todo_name'];

$todos[$todoName]['completed'] = isset($_POST['status']);
file_put_contents('./todos.json', json_encode($todos, JSON_PRETTY_PRINT));
header('Location: index.php');
?>
Enter fullscreen mode Exit fullscreen mode

We are finding the true or not true using the script and then we are doing the funtion in here

IMPORTANT

  • This is a youtube video,and my friend told me to remake it so i did.

Discussion (2)

Collapse
lito profile image
Lito • Edited

You should NEVER to hide or disable errors. If your code fails, you should fix it, but never you should hide the errors.

You must check that the file exists before to try to load contents and cast json_decode response to array, because your code expect an array on $todos:

$file = __DIR__.'/todos.json';

if (is_file($file)) {
    $todos = (array)json_decode(file_get_contents($file), true);
} else {
    $todos = [];
}
Enter fullscreen mode Exit fullscreen mode

On todo store, you don't need to write on file if name is empty:

if (empty($_POST['todo_name'])) {
    die(header('Location: index.php'));
}

$file = __DIR__.'/todos.json';

if (is_file($file)) {
    $todos = (array)json_decode(file_get_contents($file), true);
} else {
    $todos = [];
}

$todos[$_POST['todo_name']] = ['completed' => false];

file_put_contents($file, json_encode($todos), LOCK_EX);

die(header('Location: index.php'));
Enter fullscreen mode Exit fullscreen mode

You should review your code to validate always always all possibilities like empty POST data, repeated TODO, etc...

Collapse
ryansamaeian profile image
Ryan-samaeian Author

that works too