D4DME – Display Selected Recipe

The final addition that I made to our website was the ability to click on one of the recipe titles and be taken through to a more detailed view of the chosen recipe. To do this, I had to create an id based link to the individual recipe.

<h1>
<a href="selected_recipe.php?recipe_id=<?php echo ($row["recipe_id"]); ?>">
<?php echo ($row["recipe_title"]); ?>
</a>
</h1>

This then linked to the specific recipe page with the corresponding id via this block of code:

<?php
if(isset($_GET["recipe_id"])) {
$recipeID = $_GET["recipe_id"];
} else {
redirectTo("index.php");
}
?>
<br>
<?php 
$result = GetSingleRecipe($recipeID);
while($row = mysqli_fetch_assoc($result)) {
include 'recipe_large.php';
}
?>

As you can see, the include function has changed to include ‘recipe_large.php’ rather than the standard ‘recipe.php’. This file contains more information on the recipe and it much larger in screen size.

Advertisements

D4DME – Content Visibility (Based on Session)

Once Kyle had created the session for our site, the next stage was to make certain content hidden unless the session was active. The main element in question is the ‘submit your own’ button that leads the user to the recipe form. Our website allows all users (signed in or not) to view and filter the recipes, but only members who are logged in may submit their own to the database.

<?php if(isset($_SESSION["user"])) { ?>
<a href="submit.php">CREATE YOUR OWN</a>
    <?php } else { ?>
    <?php } ?>               

This code makes it so that only someone logged in via the session can view the button. I repeated this with several different functions that I made such as a ‘delete post’ button and a ‘my recipes’ page.

For the ‘delete post’ button, I had to link up two columns from the two tables (recipe and user) in order to make the option show. The columns ‘recipe_user_id’ and ‘user_id’ had to match for this to be an option to the user.

<?php if(isset($_SESSION["user"])) { ?>
    <?php if ($_SESSION["user_id"]==$row["recipe_user_id"]) {?>
        <div class="delete"><a href="delete_recipe.php?recipe_id=<?php echo $row["recipe_id"]; ?>" class="buttonExample">Delete?</a></div>
    <?php } ?>
    <?php } else { ?>
    <?php } ?>
</div>

The query was fairly straight forward for this button to work.

$query = "DELETE FROM recipe WHERE recipe_id = '{$postID}' and recipe_user_id = '{$_SESSION['user_id']}'";

For the ‘my recipes’ page, all I had to do was tweak the main query on the index page to only select recipes created by the user.

 $query = "SELECT * FROM recipe WHERE recipe_user_id = '{$_SESSION['user_id']}'";

D4DME – Filtering the Data

Another important function for the user will be to have choice over what type of recipes they want to view. In order to make this happen, I needed to create a set of filters that the user can refine based on the different columns in the recipe table.

Untitled2

Screenshot of my submit form

The four columns that the user can filter through are ‘Cook Time’, ‘Cuisine’, Ingredients’, and ‘Allergy Warning’. It would be very easy to add extra filters such as a ‘Vegetarian’ option if we needed to, though for now I wanted to keep it simple.

<form method="get" name="cuisine" action="index.php">
      <label><strong>CUISINE</strong></label><br>
      <input type="text" name="cuisine" placeholder="e.g Italian" size="10" maxlength="120">
      <input type="submit" value="Search">
</form>

The main difference between this type of form and the previous ones I created is that this one uses ‘get’ as the method rather than ‘post’. Once the query has been written, the search options will allow the user to search the database for anything that matches their entry.

<?php
    if(isset($_GET["cuisine"])) { 
        $query = "SELECT * FROM recipe WHERE recipe_culture LIKE '%{$_GET["cuisine"]}%'"; 
    } else if...

My query above shows the use of ‘Wildcards’. In this instance, I’m using the LIKE condition alongside the wildcards to make SQL search for anything that is similar the the user’s entry (e.g if they were to type in ‘ita’ into the cuisine field, it would return any recipe that was Italian).
I found out about ‘Wildcards’ from W3Schools after Kyle told me about them in a workshop.

The ‘else if’ statement repeats the above query several times for each column before the final ‘else’ statement just selects all of the data without any refinements.

D4DME – Displaying the Data

The next step in my PHP journey was to get the user-inputted data to display on the page as ‘recipe’ boxes.

$query = "SELECT * FROM recipe"; // V: The query is selecting all the data from the recipe table
	        }
			$result = mysqli_query($connection, $query);// V: defining the variable result by putting our connection variable and our query variable through a function
			if(!$result) { // V: If the query doesn't work, kill the connection and feedback to user
				die("Database query failed.");
			}
		    while($row = mysqli_fetch_assoc($result)) { // V: whilst our query works, include recipe.php to display data
		    	include 'recipe.php';
		    }

The query simply selects all of the data from the recipe table. If the result is successful, the function below splits it up into rows so that each recipe entry is a separate array.

<?php echo ($row["recipe_title"]); ?>
<?php
        if (!empty($row["recipe_image"])) { 
            $imageName = $row["recipe_image"];
        } else {
            $imageName = "images/Untitled.png";
        }
  	?>
<img src="<?php echo $imageName; ?>" />
<?php echo ($row["recipe_cooktime"]); ?>
<?php echo ($row["recipe_cuisine"]); ?>
<?php echo ($row["recipe_allergy"]); ?>
<?php echo ($row["recipe_description"]); ?>

The PHP above takes each part of the array and echos it separately, thus displaying the data in the format that we want it.

D4DME – HTML Forms (Part Four)

Having completed the sign-up form, all I had to do for the next one was tweak a few details.

Untitled

Screenshot of my submit form

The only things that needed to be changed were the names of the fields and certain input options (drop downs rather than text entry). Aside from this, and the change in sql queries, the code was exactly the same.

Note:

The image entry field is currently a text entry because I could not work out how to create an upload query that worked with the dakar server. I managed to make the upload function work, but it told me that I did not have the correct permissions to upload images to the database. So for now, users will have to upload their images using an external image uploader and then paste the URL into the form for it to work (otherwise there is a default image that will display if the field is empty).

Untitled1

Screenshot of my submit form

<?php
        if (!empty($row["recipe_image"])) { 
            $imageName = $row["recipe_image"];
        } else {
            $imageName = "images/Untitled.png";
        }
  	?>
    
<!-- V: The php block above is saying that if the recipe_image column is not empty then to use the URL in it, but if it is empty then use a default image -->
    <img src="<?php echo $imageName; ?>" />

D4DME – My opinion (a summary)

Over the course of this unit, I have already expressed my general opinions towards our group idea for our website. However, I thought that it would be a good idea to write a summary so that I can reflect back on everything as our work progresses.

My initial reaction to the group work was that I really wanted to take the lead on the CSS/design side of the project, though this wouldn’t have been very practical, as Chace admitted that he was struggling to learn PHP and would be more comfortable if he was allowed to start with the CSS. Obviously we are all going to make contributions to each part of the project, though initially we decided that it would be best to focus on a particular area.

The main focus for this brief is to ensure that our website is functional. The design is an added bonus, really, which I have tried to keep in mind whilst working with my team.

For this reason, I was put in charge of the PHP. As PHP is completely new to me as well, I have found some parts of this project challenging so far (as well as feeling slightly under pressure to make things work in a practical manner). It will be important for me to make sure that both my team mates understand my coding and that they can explain what is going on when we present our website in the group critique.

I was happy to go with a recipe-themed idea for our website, though the initial colour scheme did not sit well with me. I was very persistent with my team mates in saying that yellow was not a successful colour to use for our design. I managed to persuade them in the end, so overall I am satisfied with how the design is going so far.

D4DME – HTML Forms (Part Three)

The next step I took when validating my user credentials form was to make sure that certain fields only contained certain characters (such as the email field). I used a couple of PHP functions to determine whether the inputted data had been typed in the correct format; for instance, email addresses would not be accepted if they did not contain an ‘@’ sign or a ‘.’. Names and surnames would not be accepted if they contained anything other than letters and whitespace.

<?php
$name = ucfirst($name);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
   $nameErr = "Only letters and white space allowed";
}
$surname = ucfirst($surname);
if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
   $surnameErr = "Only letters and white space allowed";
}
$email = refine_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $emailErr = "Invalid email format"; 
}
?>

However, I could not get this further stage of validation to work with my already existing validation, as only one would work (it would still submit data even if it didn’t meet the requirements above).

<?php 

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = refine_input($_POST["name"]);
        $name = ucfirst($name);
        if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
            $nameErr = "Only letters and white space allowed";
            $x = 0;
        }
        $surname = refine_input($_POST["surname"]);
        $surname = ucfirst($surname);
         if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
            $surnameErr = "Only letters and white space allowed";
             $x = 0;
        }
        $username = refine_input($_POST["username"]);
        $password = refine_input($_POST["password"]);
        $email = refine_input($_POST["email"]);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format"; 
            $x = 0;
        }
    }
?>

<?php 

if(isset($_POST["submit"])) {

        if(empty($name)) {
            $nameErr = "Name is required";
        } else if(empty($surname)) {
            $surnameErr = "Surname is required";
        } else if(empty($username)) {
            $usernameErr = "Username is required";
        } else if(empty($password)) {
            $passwordErr = "Password is required";
        } else if(empty($email)) {
            $emailErr = "Email is required";
        } else if($x == 1) { (SQL query here..)
?>

After talking to Kyle (workshop tutor) about my issue, he suggested that I introduce a boolean so that the data could not be submitted if it didn’t meet both sets of requirements. This made it so that the validation could check that there was both data in the field and that it met the required format.