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:
Here is my code:
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]><html class="ie ie8" 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 class="bg-light">
<div class="container col-md-6 my-3">
<form class="mb-4" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off">
<div class="row mb-3">
<label for="firstname" class="col-sm-4 col-form-label"><i class="fas fa-user-circle me-1"></i> Nom <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<input type="text" id="firstname" class="form-control" name="firstname" value="" autofocus />
</div>
</div>
<div class="row mb-3">
<label for="lastname" class="col-sm-4 col-form-label"><i class="fas fa-user me-1"></i> Prenom <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<input type="text" id="lastname" class="form-control" name="lastname" value="" />
</div>
</div>
<div class="row mb-3">
<label for="email" class="col-sm-4 col-form-label"><i class="fas fa-at me-1"></i> Email <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<input type="email" id="email" class="form-control" name="email" value="" />
</div>
</div>
<div class="row mb-3">
<label for="city" class="col-sm-4 col-form-label"><i class="fas fa-building me-1"></i> Ville <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<input type="text" id="city" class="form-control" name="city" value="" />
</div>
</div>
<div class="row mb-3">
<label for="country" class="col-sm-4 col-form-label"><i class="fas fa-flag me-1"></i> Pays <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<input type="text" id="country" class="form-control" name="country" value="" />
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-4 col-form-label"><i class="fas fa-envelope me-1"></i> Message <sup class="fw-bold text-danger">*</sup></label>
<div class="col-sm-8">
<textarea id="message" class="form-control" name="message" rows="3" ></textarea>
</div>
</div>
<div class="row mb-3">
<label for="file" class="col-sm-4 col-form-label"><i class="fas fa-file me-1"></i> joindre un fichier</label>
<div class="col-sm-8">
<input type="file" id="file" class="form-control" name="file" />
</div>
</div>
<hr />
<div class="d-grid gap-2">
<button type="submit" class="btn btn-lg btn-primary" name="submit">Envoyer <i class="fas fa-arrow-alt-circle-right ms-1"></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 & 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
First Name is : $firstname
` – maxwiber May 06 '22 at 12:43