これは私の最初の試みです。どこから始めるべきか分かりません。新しいフォームを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 " × 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()); ?>
ジェフ...私は正常にあなたの提案を組み込むことができていません。それを私のコードとマージするには何が欠けていますか? –