This is my first attempt at doing this, so I must admit I do not know where to begin.
I have created a form for my users to enter some basic information about themselves, and a photo.
This data would create a small profile entry on a page saved as 'directory.html'.
By using the two pages below.... 'Form.html' and 'Upload.php', I am able to successfully create an output of the 'directory.html' page, and a single entry on that page.
However, when another user attempts to use the form to create their entry to 'directory.html', it overwrites the first user's entry.
Therefore, I am only able to produce one entry on the page at a time.
Obviously... that won't work for me.
I need to be able to use this process to create multiple entries on the 'directory.html' page in a (vertical) list (including all of the CSS styling, etc.).
I do not have any clue how to go about doing this, beyond what I have tried thus far.
So any help would be greatly appreciated.
Note: I will be doing a proper 'database' system at a later stage of this project, but for now, I would like to accomplish this part with html.
Here is the code for both pages...
THE FORM (Form.html)
<!DOCTYPE html>
<html>
<head>
<style>
body{margin-top:60px; font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.formContainer{width:300px; margin:0 auto;}
.label{margin-top:10px;}
.notes{font-size:11px; font-style:italic;}
.field{margin-top:10px;}
.fieldForm{width:100%; height:22px;}
.btn{margin-top:20px;}
.divider{margin-top:10px; width:100%; height:1px; background-color:#828282;}
</style>
</head>
<body>
<div class="formContainer">
<h1>PROFILE FORM</h1>
<form action="Upload.php" method="post" enctype="multipart/form-data">
<div class="label">FULL NAME</div>
<input class="fieldForm" name="name" autocomplete="off">
<div class="divider"></div>
<div class="label">EMAIL ADDRESS</div>
<input class="fieldForm" name="email" autocomplete="off">
<div class="divider"></div>
<div class="label">CONTACT PHONE</div>
<input class="fieldForm" name="phone" autocomplete="off">
<div class="divider"></div>
<div class="label">COMPANY</div>
<input class="fieldForm" name="company" autocomplete="off">
<div class="divider"></div>
<div class="label">POSITION</div>
<input class="fieldForm" name="position" autocomplete="off">
<div class="divider"></div>
<div class="label">PROFILE PIC<br>
<span class="notes">* Images must have a width of 300px or greater.</span>
</div>
<input class="field" type="file" name="userImage" id="userImage">
<div class="divider"></div>
<input class="btn" name="submit" type="submit" value="SUBMIT">
</form>
</div>
</body>
</html>
THE PHP (Upload.php)
<?php ob_start();?>
<!DOCTYPE html>
<html>
<head>
<meta name="" content="text/html; charset=utf-8, width=device-width, initial-scale=1, minimum-scale=1" http-equiv="Content-Type" />
<style>
.fixed-ratio-resize{max-width:100%; height:auto; width:auto\9;}
body{margin-top:10px; margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12pt; }
.container{clear:both; float:left; margin-top:10px; max-width:300px; height:auto; }
.content{float:left; width:100%; height:auto;}
.image{float:left; max-width:300px; height:auto;}
.infoWrapper{clear:both; float:left; width:100%; margin-top:-4px;}/*TRBL*/
.name{margin-top:6px; font-weight:bold;}
.company{margin-top:6px; font-weight:bold;}
.email{margin-top:6px;}
.phone{margin-top:6px; margin-bottom:6px;}
.divider{float:left; margin-top:10px; margin-bottom:10px; width:100%; height:1px; background-color:#828282;}
</style>
</head>
<body>
<!--Start Container & Content-->
<div class="container">
<div class="content">
<!--Start Profile Image-->
<div class="image">
<?php
$target_dir = "imageFolder/";
$target_file = $target_dir . basename($_FILES["userImage"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
if (isset($_POST["submit"])) {
$check = getimagesize($_FILES["userImage"]["tmp_name"]);
if ($check !== false) {
echo "" . $check[""] . "";
$uploadOk = 1;
} else {
echo " × FILE IS NOT AN IMAGE";
$uploadOk = 0;
}
}
if (file_exists($target_file)) {
echo " × THIS IMAGE ALREADY EXIST ON SERVER";
$uploadOk = 0;
}
if ($_FILES["userImage"]["size"] > 500000) {
echo " × FILE IS TOO LARGE";
$uploadOk = 0;
}
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
echo " × ONLY JPG, JPEG, PNG & GIF FILES ARE PERMITTED";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo " × IMAGE WAS NOT UPLOADED";
} else {
if (move_uploaded_file($_FILES["userImage"]["tmp_name"], $target_file)) {
echo '<img class="fixed-ratio-resize" src="imageFolder/' . basename($_FILES["userImage"]["name"]) . '">';
} else {
echo " × IMAGE WAS NOT UPLOADED";
}
}
?>
</div>
<!--End Profile Image-->
<!--Start Posting Info-->
<div class="infoWrapper">
<div class="name"><?php $name = htmlspecialchars($_POST['name']); echo $name;?></div>
<div class="position"><?php $position = htmlspecialchars($_POST['position']); echo $position;?></div>
<div class="company"><?php $company = htmlspecialchars($_POST['company']); echo $company;?></div>
<div class="email"><?php $email = htmlspecialchars($_POST['email']); echo $email;?></div>
<div class="phone"><?php $phone = htmlspecialchars($_POST['phone']); echo $phone;?><br></div>
</div>
<!--End Posting Info-->
</div><!--End Content-->
<div class="divider"></div>
</div>
<!--End Container-->
</body>
</html>
<?php echo ''; file_put_contents("directory.html", ob_get_contents()); ?>
Ok @jamie, based on PHP documentation file_put_contents overwritten the existing file. So if you need to add a value at the end of your file, you should append an entry to the end of your file by using FILE_APPEND
flag.
like: file_put_contents($file, $data, FILE_APPEND);