Finished Form

We assigned tasks that needed to be done for our web app, the form was one that I did myself and was quite a challenge.  The form was made using HTML, CSS, PHP and MySQL,, I have included the code that relates to the form below.  I tried to avoid screen shots of code, however when I used the <pre> tags in the text editor it did some very strange things, so I have pasted it inside the post.

The form consists of four main files:-

form.php – The page displayed in the browser which contains the actual form code, including the drop down menus, we decided to have drop downs because it means the data is consistant in the database, so if it is searched for it wont omit data because of typos.  If the price field contains anything other than numbers the form will not submit.  The box the form resides in was made using a css class.

add_property-sql.php – Contains the MySQL query and defines the variables, including error variables to display if a field is empty.  If a field is empty the form will not be submitted and the relevant errors displayed.  When the form is successfully submitted the query also stores the current users id in the table with the rest of the form data.  The users id is stored so the user who uploaded the property listing is identified, the database also stores an id for the listing itself.  This file also includes the code to get the date and time, defining the $date_added variable so the date and time is added to the table meaning the results can be sorted by date.

upload.php – Contains the code for uploading the images from the form to the images folder on the server. It also defines the $house_photo_path variable so the path is inserted into the database with the rest of the information in the form.  This is because the house cards look in the database to find the location of the image to display.  I had great difficulty in getting the images to be put into the images folder when the form was submitted, which turned out to be settings on the server which are now resolved.  These were apache settings and not php, before I was told it was apache, I determined it was not PHP by creating ini.php which is simply <pre><?php phpinfo() ?></pre>.  This page can be browsed to and displays all the PHP settings including the version.  I also tried changing the permissions of the folder to 777 but to no avail.  In the code I have left in some commented out code which makes the images directory if it does not exist, as this is what finally led me to conclude it was not the code.

congrats.php – If the form has been submitted successfully the user is redirected to this page, which is basically the index page with the message ” Congratulation’s, You’ve successfully added a property!” in large letters.  I made this page so you user is aware the form was submitted successfully and to take them back to the home page to browse if they wish.

This is what the form looks like on the site.



This is the code for form.php

include(“../include/add_property-sql.php”);   //SQL for this form

<div class=”container”>

<div class=”form-box”>
<!– Form for adding a property. Reports an error if fields are empty. –>

<h2>Create Your Listing</h2>
<p><span class=”error”>* required field.</span></p>
<form enctype=”multipart/form-data” action=”form.php” method=”post”> <!– ‘action’ = where the form will be processed –>

Listing Title: <input type=”text” name=”house_title” value=”<?php if(isset($house_title)) {echo $house_title;}?>”>
<span class=”error”>*<?php if(isset($titleerr)) {echo $titleerr;}?></span>

<!– ‘type=”number” – only numbers allowed in field –>
Guide Price: <input type=”number” name=”house_price” value=”<?php if(isset($house_price)) {echo $house_price;}?>”>
<span class=”error”>*<?php if(isset($priceerr)) {echo $priceerr;}?></span>

Location: <select name=”house_location” value=”<?php if(isset($house_location)) {echo $house_location;}?>”>
<option value=””>–Select–</option> <!– variable value set to 0 so is seen as empty –>
<option>Bournemouth Centre</option>
</select><span class=”error”>*<?php if(isset($locationerr)) {echo $locationerr;}?></span>

Property Type: <select name=”house_type” value=”<?php if(isset($house_type)) {echo $house_type;}?>”>

<option value=””>–Select–</option>
</select><span class=”error”>*<?php if(isset($typeerr)) {echo $typeerr;}?></span>

Number of bedrooms: <select name=”house_bedroomnumber” value=”<?php if(isset($house_bedroomnumber))
{echo $house_bedroomnumber;}?>”>
<!– values given to options so database columns will only have numbers –>
<option value=””>–Select–</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>More than 8</option>
</select><span class=”error”>*<?php if(isset($numbererr)) {echo $numbererr;}?></span>

Add an image: <input type=”file” name=”house_photo” id=”fileToUpload” value=”<?php if(isset($house_photo)) {echo $house_photo;}?>”>
<span class=”error”>*<?php if(isset($photoerr)) {echo $photoerr;}?></span>

<!– text area creates a larger text box to fit description in –>
Full Description:
<textarea name=”house_description” rows=”5″ cols=”40″ value=”<?php if(isset($house_description))
{echo $house_description;}?>”></textarea>
<span class=”error”>*<?php if(isset($descriptionerr)) {echo $descriptionerr;}?></span>

<input type=”submit” name=”add_property” value=”Submit Property” />

<!– Begin Footer –>
<?php include_once(“../include/templates/footer.php”); ?>
<!– End Footer –>


This is the code for add_property-sql.php

<?php   // If property is submitted run the following code
if(isset($_POST[“add_property”])) {
$house_title = ucfirst($_POST[“house_title”]); // Insert each field into the database with upper case first letter (ucfirst).  Each variable is inserted into the Database using $query
$house_price = ($_POST[“house_price”]);
$house_location = ($_POST[“house_location”]);
$house_type = ($_POST[“house_type”]);
$house_bedroomnumber = ($_POST[“house_bedroomnumber”]);
$house_description = ucfirst($_POST[“house_description”]);
} else {
$house_title = “”;         // Leave each field empty
$house_price = “”;
$house_location = “”;
$house_type =””;
$house_bedroomnumber = “”;
$house_photo = “”;
$house_photo_path = “”;
$house_description =””;

<?php include(“../include/upload.php”); ?> <!– Include image upload abilty –>

date_default_timezone_set(“Europe/London”); /* set timezone and date format for database entry */
$date_added = date(“Y-m-d H:i:s”);

<?php     // Add user’s property to database and display on website
if(isset($_POST[“add_property”])) {   // If post has been submitted and there are any empty fields, display an error message
if(empty($house_title)) {
$titleerr  = “You’ve forgotten to add a house title!”;
if(empty($house_price)) {
$priceerr = “You’ve forgotten to add a house price!”;
if(empty($house_location)) {
$locationerr = “You’ve forgotten to add a house location!”;
if(empty($house_type)) {
$typeerr = “You’ve forgotten to add a house type!”;
if(empty($house_bedroomnumber)) {
$numbererr = “You’ve forgotten to add the number of bedrooms!”;
if(empty($house_photo)) {
$photoerr = “You’ve forgotten to add a house photo!”;
if(empty($house_description)) {
$descriptionerr = “Remember to add a house description!”;
} else {

/* If all field are populated run sql query to insert the data */
$query = “INSERT INTO posts (user_id, house_title, house_price, house_location, house_type, house_bedroomnumber, house_photo, house_photo_path, house_description, date_added) VALUES (‘{$_SESSION[“id”]}’,'{$house_title}’, ‘{$house_price}’, ‘{$house_location}’, ‘{$house_type}’, ‘{$house_bedroomnumber}’, ‘{$house_photo}’,'{$house_photo_path}’,'{$house_description}’,'{$date_added}’)”;

$result = mysqli_query($connect, $query);
if($result) {
header(‘Location: congrats.php’);

<?php /* echo for testing the form

echo $house_title;
echo “&nbsp &nbsp”;
echo $house_price;
echo “&nbsp &nbsp”;
echo $house_location;
echo “&nbsp &nbsp”;
echo $house_type;
echo “&nbsp &nbsp”;
echo $house_bedroomnumber;
echo “&nbsp &nbsp”;
echo $house_photo;
echo “&nbsp &nbsp”;
echo $house_description;
echo “&nbsp &nbsp”;

This is the code for upload.php

if(isset($_POST[‘add_property’])) //If the add property form is submitted, the image is uploaded to the images folder and defines the path of the image
$filetmp = $_FILES[“house_photo”][“tmp_name”];
$house_photo = $_FILES[“house_photo”][“name”];
$house_photo_path = “images/”.$house_photo;

/*    if (!is_dir(‘images/’.$house_photo)) {    // make the directory if it does not already exist
mkdir(‘images/’.$house_photo);           //This helped to establish dakar was the reason image upload failed
} */



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s