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.

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.

Untitled3

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://http://10.240.49.240/ which is the IP address of the Raspberry Pi.

Untitled4

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.

References

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

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.