Home > Mobile >  Facing an issue while displaying a stored data in a .txt file into my bootstrap card
Facing an issue while displaying a stored data in a .txt file into my bootstrap card

Time:05-07

I have a simple issue in my PHP project I made a small application that gives you the possibility to fill the form fields and stored all the data inside a .txt file at the same time the data show up below the form with some specific information such as (first name, last name, city, message).

What is the problem I am facing?

I'm trying to bring the stored data from the .txt file into the bootstrap card like the image below.

The .txt file lock like this:

.txt file

Here is my code:

<!DOCTYPE html>
<!--[if lt IE 7]><html  lang="en"> <![endif]-->
<!--[if IE 7]><html  lang="en"> <![endif]-->
<!--[if IE 8]><html  lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
    <!--<![endif]-->
    <head>
        <!-- Required meta tags -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Project Description" />
        <meta name="author" content="Project Author" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <title>TP2 - Forum de discussion</title>
        <!-- CSS Libraries -->
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" />
    </head>
    <body >
        <div >
            <form  action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off">
                <div >
                    <label for="firstname" ><i ></i> Nom <sup >*</sup></label>
                    <div >
                        <input type="text" id="firstname"  name="firstname" value="" autofocus />
                    </div>
                </div>
                <div >
                    <label for="lastname" ><i ></i> Prenom <sup >*</sup></label>
                    <div >
                        <input type="text" id="lastname"  name="lastname" value=""  />
                    </div>
                </div>
                <div >
                    <label for="email" ><i ></i> Email <sup >*</sup></label>
                    <div >
                        <input type="email" id="email"  name="email" value=""  />
                    </div>
                </div>
                <div >
                    <label for="city" ><i ></i> Ville <sup >*</sup></label>
                    <div >
                        <input type="text" id="city"  name="city" value=""  />
                    </div>
                </div>
                <div >
                    <label for="country" ><i ></i> Pays <sup >*</sup></label>
                    <div >
                        <input type="text" id="country"  name="country" value=""  />
                    </div>
                </div>
                <div >
                    <label for="message" ><i ></i> Message <sup >*</sup></label>
                    <div >
                        <textarea id="message"  name="message" rows="3" ></textarea>
                    </div>
                </div>
                <div >
                    <label for="file" ><i ></i> joindre un fichier</label>
                    <div >
                        <input type="file" id="file"  name="file"  />
                    </div>
                </div>
                <hr />
                <div >
                    <button type="submit"  name="submit">Envoyer <i ></i></button>
                </div>
            </form>
            
<?php
$filename = "data_form.txt";
$time = date("Y-d-m H:m:s");

if (isset($_POST["submit"])) {
    $firstname = "First Name: " . $_POST["firstname"] . "\r\n";
    $lastname = "Last Name: " . $_POST["lastname"] . "\r\n";
    $email = "Email: " . $_POST["email"] . "\r\n";
    $city = "City: " . $_POST["city"] . "\r\n";
    $country = "Country: " . $_POST["city"] . "\r\n";
    $message = "Message: " . $_POST["message"] . "\r\n";
    $file = "Uploaded File: " . $_POST["file"] . "\r\n";
    $fp = fopen($filename, "a");
    fwrite($fp, $firstname . $lastname . $email . $city . $country . $message . $file . "\n");
    fclose($fp);
}

$fp2 = fopen($filename, "r");
while (!feof($fp2)) {
    $content = fgets($fp2);
    // echo $content . "<br>";
    echo "
            <ul class='list-group'>
                <li class='row row-cols-1 row-cols-md-2 p-4 bg-white shadow'>
                    <div class='col mb-lg-0 mb-md-4'>
                        <ul class='list-group list-group-flush'>
                            <li class='list-group-item bg-transparent px-0'><i class='fas fa-user-circle me-1'></i> <strong>Nom &amp; Prénom:</strong> <span class='text-primary'>Oliver Queen</span></li>
                            <li class='list-group-item bg-transparent px-0'>
                                <i class='fas fa-envelope me-1'></i>
                                <strong>Message:</strong>
                                <span><i class='fas fa-clock'></i> (25/04/2022 19:40)</span>
                                <br />
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </li>
                        </ul>
                    </div>
                    <div class='col'>
                        <ul class='list-group list-group-flush'>
                            <li class='list-group-item bg-transparent px-0'><i class='fas fa-building me-1'></i> <strong>Ville:</strong> <span class='text-primary'>new york / usa</span></li>
                        </ul>
                    </div>
                </li>
            </ul>
            
            ";
    echo "<br>";
}
fclose($fp2);
?>  
            
        </div>
        <!-- JS Libraries -->
        <script src="js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Expected results

Expected results

CodePudding user response:

It seems you're stuck on how to parse the data you've stored in your text file and retrieve specific pieces of information such as the first name.

To solve this easily we need to take a step back. Instead of the arbitrary format which you've stored the data in, I would recommend using a recognised format such as JSON, for which PHP has ready-made encoding and decoding functions. This will make your life a lot easier and save a whole step of programming work writing your own parser.

For example:

Firstly, saving the data:

if (isset($_POST["submit"])) {
    $data = array(
      "firstname" => $_POST["firstname"],
      "lastname" => $_POST["lastname"],
      "email" => $_POST["email"],
      "city" => $_POST["city"],
      "country" => $_POST["country"],
      "message" => $_POST["message"]
    );
    
    //now append to the existing JSON, if any
    $existingJSON = file_get_contents($filename);
    $list = array();
    
    if ($existingJSON !== false) $list = json_decode(existingJSON, true);
    $list[] = $data; //append to the list
    $json = json_encode($list);
    file_put_contents($filename, $json);
}

And then, retrieving it:

$fileJSON = file_get_contents($filename);
$fileList = json_decode($fileJSON, true); //The "true" tells it to decode into an associative array

foreach ($fileList as $item)
{
  echo "
            <ul class='list-group'>
                <li class='row row-cols-1 row-cols-md-2 p-4 bg-white shadow'>
                    <div class='col mb-lg-0 mb-md-4'>
                        <ul class='list-group list-group-flush'>
                            <li class='list-group-item bg-transparent px-0'><i class='fas fa-user-circle me-1'></i> <strong>Nom &amp; Prénom:</strong> <span class='text-primary'>".$item["firstname"]." ".$item["lastname"]."</span></li>
                            <li class='list-group-item bg-transparent px-0'>
                                <i class='fas fa-envelope me-1'></i>
                                <strong>Message:</strong>
                                <span><i class='fas fa-clock'></i> (25/04/2022 19:40)</span>
                                <br />
                                <p>".$item["message"]."</p>
                            </li>
                        </ul>
                    </div>
                    <div class='col'>
                        <ul class='list-group list-group-flush'>
                            <li class='list-group-item bg-transparent px-0'><i class='fas fa-building me-1'></i> <strong>Ville:</strong> <span class='text-primary'>".$item["city"]." ".$item["country"]."</span></li>
                        </ul>
                    </div>
                </li>
            </ul>
            ";
}

N.B. If you're going to work with multiple records, in the longer term it will be a lot simpler and more efficient to use a small database (e.g. MySQL or SQLite).

  • Related