2017-07-14 5 views
-1

これは私の最初の試みです。どこから始めるべきか分かりません。新しいフォームをPHPフォームで作成する

私は、ユーザーが自分に関するいくつかの基本情報と写真を入力するためのフォームを作成しました。

このデータは、 'directory.html'として保存されたページに小さなプロファイルエントリを作成します。

「Form.html」と「Upload.php」の2ページを使用すると、「directory.html」ページの出力とそのページの1つのエントリを正常に作成できます。

ただし、別のユーザーがフォームを使用して 'directory.html'へのエントリを作成しようとすると、最初のユーザーのエントリが上書きされます。

したがって、私は一度にページに1つのエントリしか作成できません。

明らかに...それは私にとってはうまくいかないでしょう。

このプロセスを使用して、 'directory.html'ページ(縦のリスト)に複数のエントリを作成できるようにする必要があります(すべてのCSSスタイリングなどが含まれます)。

これまで私がこれまで試みてきたことを超えて、これをやり遂げる方法を知りません。

ご協力いただければ幸いです。

注:私はこのプロジェクトの後半で適切な「データベース」システムを実行しますが、今はこの部分をhtmlで実現したいと思います。ここ

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> 

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 " &#xd7; FILE IS NOT AN IMAGE"; 
    $uploadOk = 0; 
} 
} 
if (file_exists($target_file)) { 
echo " &#xd7; THIS IMAGE ALREADY EXIST ON SERVER"; 
$uploadOk = 0; 
} 
if ($_FILES["userImage"]["size"] > 500000) { 
echo " &#xd7; FILE IS TOO LARGE"; 
$uploadOk = 0; 
} 
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") { 
echo " &#xd7; ONLY JPG, JPEG, PNG & GIF FILES ARE PERMITTED"; 
$uploadOk = 0; 
} 
if ($uploadOk == 0) { 
echo " &#xd7; 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 " &#xd7; 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()); ?> 

答えて

0

オクラホマ@jamie、...両方のページのためのコードでありますPHPのドキュメントfile_put_contentsに基づいて、既存のファイルを上書きします。したがって、ファイルの末尾に値を追加する必要がある場合は、FILE_APPENDフラグを使用してファイルの最後にエントリを追加する必要があります。

のような:file_put_contents($file, $data, FILE_APPEND);

+0

ジェフ...私は正常にあなたの提案を組み込むことができていません。それを私のコードとマージするには何が欠けていますか? –

関連する問題