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

D4DME – HTML Forms (Part Two)

After doing a bit of research on w3schools, I found out how to start the process of validating my form.

13

Screenshot of my code in Brackets

The first thing that I added was in relation to security. As this is our first coding project, I know that there is no emphasis on security, though I thought that learning this practice now would be useful for the future. The above image demonstrates the use of a PHP function that stops a user from being able to inject code into the page.

16

Screenshot of my code in Brackets

The next thing I did was create a function (in a separate file that I linked in with PHP) that would validate the data inputted from the form. The function will strip any unnecessary spaces at the beginning/end of the data and will remove any special characters.

17

Screenshot of my code in Brackets

I then set the function to run in my main index file (with the addition of the ucfirst() function to both name fields) so that the data would be updated before being sent to the database.

14

Screenshot of the data before validation

15

Screenshot of the data in the table after validation

Finally, I ran a test to see how my new function would handle the data. As expected, the data that I put in was validated nicely, with the name/surname being capatalised and all unnecessary spaces removed.

D4DME – HTML Forms (Part One)

Whilst I was waiting to hear back from Simon, I put my time to good use and started to build the form(s) using HTML (and later on PHP for form validation). For the time being I used some of my own CSS so that I could see everything clearly on the page, though once everything is working, I will be able to integrate my coding into the CSS that Chace is making. Starting with the sign-up form, I coded a basic page and form  that linked to a table in PHPMyAdmin, which looked like this:

9

Screenshot of my initial Website

The table within my database that the form submitted to looks like this (as based on my ERD):

10

Screenshot of PHPMyAdmin

Once my PHP were working together with my database, it looked like this:

12

Screenshot of my code in Brackets

Last but not least, my HTML (which at this point was just the form and it’s containing div(s)) looked like this:

11

Screenshot of my code in Brackets

At this point, anything inputted into the form fields would be sent to my ‘user’ table in my database (only if there is something in every form, however, thanks to the first step of form validation I conducted). My next step is going to be validating the form properly.

D4DME – Meet the Team (Part Two)

Today was our first group meeting as a team. One of the things that we decided to cover was further changes to our ‘Meet the Team’ page. Chace and Kyle suggested a few things that we could add to make the pages look a bit more efficient (aside from content).

Untitled

Screenshot

We asked Rob if he could take a couple of photos of us working together as a group to go in our ‘Group Photos’ section.

Untitled1

Screenshot

On our ‘About Us’ page I created some similar buttons to the navigation that linked externally to our individual blogs.

Untitled2

Screenshot

All that is left to do is add our individual bios to the ‘About Us’ page and possibly some more group photos. Aside from that, our ‘Meet the Team’ page is mostly finished.

D4DME – Meet the Team (Part One)

Today I was introduced to my team mates, Mongkol (Chace) and Kyle. The first task that we have been given in our new groups is to create a ‘Meet the Team’ page.  Chace decided to start work on the design of the page(s) with HTML/CSS. The page initially looked like this:

Untitled

Screenshot

To get used to the collaborative side of this project, I asked Chase to send me his project files so that I could have a look at his code and make some additions. We identified that it would be a good idea to comment our coding so that we don’t get confused by each other’s work. I suggested that we preface each comment with an initial so that we know who has said what, e.g. /* V: verity made this comment */, <!– V: verity has made this comment –>

Chace had initially created three separate stylesheets for the three pages (Home, About, Contact). To make the coding process easier for everyone in the group, I decided to refine this down to one stylesheet that applied to all of the pages. Whilst it was a nice idea to have different coloured headers on each page, it would make it more time consuming to make changes to all three of the stylesheets, so I suggested that we compile them into one. After this I made a few changes to the HTML to make editing easier in the long run.
One of these was to move the navigation to a separate file and link it in using PHP at the top of each page.

Untitled1

Screenshot

This means that we can make a change to one of the links without having to change it on each individual page.
Aside from this, I had a look at Chace’s CSS and made some additions such as pseudo animations (by using generated code from http://matthewlein.com/ceaser/) and using the drop shadow effects that Chace had made on the main divs.

To save us some time in the long run, I added a few extra lines of CSS to make the website dynamic and scaleable with the browser. This made it so that the content of the page would adapt to fit the size of the window and wouldn’t cut anything out from view when scaled.

The final result of my additions ended up looking like this:

1

Screenshot

2

Screenshot

We agreed that it would be a good idea to wait until Wednesday, when we could all meet up, to add content to the page.

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

D4DME Workshop (Project folder/files hierarchy)

For the first official workshop of the D4DME unit, Kyle (workshop tutor) got us to set up an example project folder to use as a starting point for any website project.

3

Screenshot of Project Folder

The layout was fairly straightforward, as we had setup a similar folder for our dummy website in the past series of workshops. The only new element to the above example was the addition of the templates folder, which allows for cleaner HTML/PHP files (as you can make separate files such as a ‘navigation’ to be included at the top of every file rather than having the same code on every page).