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 } ?>

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 – Support

As mentioned previously, the key part to this unit is that we understand the website code as a team as opposed to each of us having our own specialism within the work. Chace had expressed multiple times that he wasn’t very comfortable with PHP and that he didn’t really understand it. For this reason, I offered to meet up with him and go through all of the PHP that we had so far and explain how it all worked.

I also went through the code by myself and made sure that everything was commented in detail so that everything makes sense.

D4DME – Team Update

After several more meetings with my team, we decided that it was time for one of the others to work on the PHP. We decided that Kyle would be in charge of coding the ‘log in’ and ‘session’ which included a message function to be displayed across multiple pages.

This gave me a break from PHP and allowed me to update the group wiki. Meanwhile, Chace kept working on the CSS for the website.

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.


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">
      <input type="text" name="cuisine" placeholder="e.g Italian" size="10" maxlength="120">
      <input type="submit" value="Search">

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.

    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"]); ?>
        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.


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.


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).


Screenshot of my submit form

        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.

Raspberry Pi

After speaking to Rob today about potentially setting up a server on a Raspberry Pi, he decided to lend me one to play around with. I thought that this would be a good idea to do in preparation for reading week when I won’t be on campus and won’t have access to the dakar server. By using a Raspberry Pi that has Apache installed, I will be able to work on my code and view it online by creating my own server space .

The Raspberry Pi is a low cost, credit-card sized computer that plugs into a computer monitor or TV, and uses a standard keyboard and mouse. It is a capable little device that enables people of all ages to explore computing, and to learn how to program in languages like Scratch and Python. It’s capable of doing everything you’d expect a desktop computer to do, from browsing the internet and playing high-definition video, to making spreadsheets, word-processing, and playing games.

To start me off, Rob let me borrow a Raspberry Pi (Model B), a blank SD card and a mini usb power cable. The first thing that I needed to do was download and install the Raspbian operating system onto the SD card, so I took a trip to the Raspberry Pi Downloads page.


Screenshot of The Raspberry Pi Website

Once the operating system had been installed onto the SD card, I gathered everything that I would need to set up the Raspberry Pi. As the Pi can output to HDMI, I used my TV as a screen. I connected the Pi to the internet via an Ethernet cable and I used my wireless mouse and keyboard from my desktop PC.

The next step required me to head off to the Documentation section of the Raspberry Pi site. On there I found a tutorial on how to install all of the relevant things to turn the Raspberry Pi into a server.

The Raspberry Pi is most commonly controlled via a command line (unless you use xstart to boot it in desktop mode). The first command I used was “sudo apt-get install apache2 -y”. This installed apache. To confirm that this had worked, I went to http:// which is the IP address of the Raspberry Pi.


Screenshot of my server page

The next step was to install PHP, by typing “sudo apt-get install php5 libapache2-mod-php5 -y”. This made it so that I could upload php files to the Raspberry Pi. After doing this, I decided to have a go at uploading files to the Raspberry Pi. Having already installed the client side of FileZilla, I connected to the Pi. However, upon trying to upload a file, I was denied access to the server space. I looked into the issue online and found the command “sudo chmod 777 -R /var/www” which changed the restrictions of the file location. I was then able to upload files without a problem.


Braben, D. Lang, J. Lomas, P. Mycroft, A. Mullins, R. and Upton, E., 2008. What is a Raspberry Pi? [online]. Available from: http://www.raspberrypi.org/help/what-is-a-raspberry-pi/ [3/1/2015].