如何通过 html、json 和 php 中的输入帖子添加到列表？（不使用数据库）？

Question

I have been struggling with this for a while. I think there is a missing piece in my logic and I cannot figure out what it is. I am trying to make a todo app using Html, json and php. how do I make the input values store as an array and then echo out as a todo list?

<form method="POST" action="TodoAppChallenge.php">
    <p>
        <label for="wordsGoHere">type your task here</label>
        <input type="text"  id ="wordsGoHere" name="wordsGoHere">
    </p>
    <input type="submit" name="pressHere" value="           add Your Task               ">
</form>
<?php
include('TodoAppChallengeExtra.php');
?>

<table>
      <thead>
      <th>Your Tasks</th>
      </thead>
      <tbody>
<?php
    if(isset($_POST['pressHere'])){
                  
            $wordsGoHere = array(
            'wordsGoHere' => $_POST['wordsGoHere'],
      );    //i think my mistake is somewhere around here
            array_push($wordsGoHere,$_POST['wordsGoHere']);
            $data = $wordsGoHere;
            $data = json_encode($data, JSON_PRETTY_PRINT);
            file_put_contents('extra.json', $data);
            $data = file_get_contents('extra.json');
            $data = json_decode($data);
            foreach($data as $row){
            echo "
                  <tr>
                        <td>
                        <ul><li>".$row->$data."</li></ul>
                        </td>
                  </tr>
            ";
    }} else {
      echo 'add a Task';
     }
      ?>
       </tbody>
 </table>

Answer 1

The code is commented but here are the main points:

• Move form processing up top to avoid, "Headers already sent..." errors
• turn on error reporting
• Use sane, plain-language variable names
• Keep your arrays as simple as you can

Other items you can do to improve? Use constants to define things like the session key todo , validation, split it up into a processing file and a presentation file.

If you want to go a bit more advanced, design a storage mechanism where your form and form processing logic don't know or care about whether the data is stored in a JSON file, session, database, or something else. It would look something like: $storage->save($userInput); and $storage->retrieve();

Good luck!

Implemented via session.

<?php

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

// Always do these 2 things on every request.

// 1. Start your session
session_start();

// 2. Initialize the session array if it hasn't been initialized already.
// This only happens once per session.
if (!isset($_SESSION['todo'])) {
    $_SESSION['todo'] = [];
}

// Now you are free to start writing and reading from your session.

// Check if the request is coming in via POST.
// Do your processing up top above your HTML otherwise you can run into "Headers already sent..." errors.
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // This is what the user typed in.
    $input = $_POST['wordsGoHere'];

    // @todo do your validation here.

    // Put the user's input in the session.
    $_SESSION['todo'][] = $input;
}

// Finally, read out the contents from your session so your form has access to it.
$dataFromSession = $_SESSION['todo'];
?>

<form method="POST">
    <p>
        <label for="wordsGoHere">type your task here</label>
        <input type="text" id="wordsGoHere" name="wordsGoHere">
    </p>

    <input type="submit" name="submit" value="Add Your Task">
</form>
<table>
    <thead>
    <tr>
        <th>
            Your Tasks
        </th>
    </tr>
    </thead>

    <tbody>
    <?php foreach ($dataFromSession as $item): ?>

        <tr>
            <td>
                <?= $item; ?>
            </td>
        </tr>

    <? endforeach; ?>
    </tbody>
</table>

Implemented via JSON file.

<?php

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

// Initialize your JSON file by ensuring the file actually exists. If it doesn't, create an empty file.
if (!file_exists('extra.json')) {
    file_put_contents('extra.json', '[]');
}

// Now you are free to start writing and reading from your JSON file.

// Check if the request is coming in via POST.
// Do your processing up top above your HTML otherwise you can run into "Headers already sent..." errors.
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // This is what the user typed in.
    $input = $_POST['wordsGoHere'];

    // @todo do your validation here.

    // Read the current state of the file.
    $contents = file_get_contents('extra.json');
    $dataFromFile = json_decode($contents, true);

    // Push the new value on the end of the array.
    $dataFromFile[] = $input;

    // Write the array back to the file.
    $json = json_encode($dataFromFile, JSON_PRETTY_PRINT);
    file_put_contents('extra.json', $json);
}

// Finally, read out the latest contents from your file so your form has access to it.
$contents = file_get_contents('extra.json');
$dataFromFile = json_decode($contents, true);
?>

<form method="POST">
    <p>
        <label for="wordsGoHere">type your task here</label>
        <input type="text" id="wordsGoHere" name="wordsGoHere">
    </p>

    <input type="submit" name="submit" value="Add Your Task">
</form>
<table>
    <thead>
    <tr>
        <th>
            Your Tasks
        </th>
    </tr>
    </thead>

    <tbody>
    <?php foreach ($dataFromFile as $item): ?>

        <tr>
            <td>
                <?= $item; ?>
            </td>
        </tr>

    <? endforeach; ?>
    </tbody>
</table>

Answer 2

I've tried to make this simpler, you have lots of variable re-assignment which you don't need. Basically

  if(isset($_POST['pressHere'])){
   // get the tasks, note the 'true' flag on the json decode so you have an array rather than an object

    $tasks = json_decode(file_get_contents('extra.json'), true);
    
    //keep things simple - use the same array and just add the new value to it

    $tasks[] = $_POST['wordsGoHere'];

    //print out your values
    foreach($tasks as $task){
        echo "
              <tr>
                    <td>
                    <ul><li>" . $task . "</li></ul>
                    </td>
              </tr>
        ";
    }

    //using the same array prepare to save it
    $tasks = json_encode($tasks, JSON_PRETTY_PRINT);

    //save the data
    file_put_contents('extra.json', $tasks);


} else {
    echo 'add a Task';

}

it's much simpler to read, easy to follow, makes sense and (importantly) works

//EDIT It's worth saying, i've just followed your logic here so the list only shows when you post it, if you want it to show all the time you'd just need to slightly change the logic like this:

$tasks = json_decode(file_get_contents('extra.json'), true);

if(isset($_POST['pressHere'])) {
    $tasks[] = $_POST['wordsGoHere'];
}

if(count($tasks) > 0) {
    foreach($tasks ....
    ....
} else {
    echo 'add a Task';

}