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.

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 – The Database (Part One)

One of my tasks for today (as decided in our group meeting) was to create the tables in our database that the users will be able to submit content to. One of these will be a user credentials table that will contain information about anyone who signs-up to our site (name, username, password, email, etc). The second is going to be slightly more complicated, as it will contain recipes submitted by users with varying criteria.

The user credentials table will look like this:

Untitled7

Screenshot of PHPMyAdmin

With five columns of information (id, name, surname, username, password, email and date joined). This table will be fairly straightforward to link up to. The only fields that will be required to sign-in are username and password, so the process will be fairly simple to code.

The recipe table is going to be slightly harder to produce, as the fields need to be refine-able in the search options of the website.

Untitled8

Screenshot of Student Recipes

To help me think of the different fields for the submission form, I had a look at a pre-existing student recipe website called Student Recipes. This form covers the basics such as the recipe name, ingredients and method, though after our discussion in the group meeting today we decided to include as many fields as possible to make the search results specific to the user.

Untitled9

Screenshot of Word

Above is a list of fields that I am going to suggest to my team mates that could be included in the recipe form. Before I make the table I will need to check whether they want to use all of these fields or whether some are unnecessary.

References

Bailey, J., 2004. Quick and easy recipes for students [online]. Available from: http://studentrecipes.com/ [2/19/2015].

Workshop Compilation (Building the dummy website)

Over the last ten or so weeks, Kyle (workshop tutor) has been teaching us how to create a website from scratch. This post contains a compilation of screenshots from each step in the process with highlights over the new content added to each stage. (This is mostly here for my reference to go over what we covered but it is still relevant to the unit). 


Continue reading