Mockup of The Studious Chef's browse page

The Studious Chef

tools

XAMPP, MySQL, PHP, HTML, CSS, AJAX

my role

Web Developer & Designer

brief

Develop a web application using a database of our own choosing that implements a set of required technologies. The final course project for Internet Computing Technologies (IAT 352). 2017.

Mockup of The Studious Chef's browse page
Mockup of The Studious Chef's "Browse Recipes" page. April 2017.

coding

With this project, I had the opportunity to learn several new programming languages as well as gaining more experience with HTML and CSS. The webpages were coded in PHP, with embedded HTML and CSS in order to realize the design. AJAX was used in order to support live filtering and updating on the recipe browsing page. Finally, MySQL was used to handle database requests, such as logging in or fetching recipes from the "recipe" database.

					
<body>
  <!-- Navigation Bar -->
  <?php require_once("required/nav_bar.php"); ?>

  <section class = "login-panel">
    <div class = "login-image">
      <img src="img/pizza.jpeg" alt="login page img">
      <h1>LOGIN</h1>
    </div>
  </section>

  <?php
    //If user is already logged in as visitor
    if(isset($_SESSION['valid_visitor'])){
      //logged as valid visitor
      echo "<p>Already logged in as ".$_SESSION['valid_member']."</p>";
    }

    //authenticating if members are valid
    if(!isset($_SESSION['valid_member'])){
      //if there's no 'valid_visitor' session,
      //and there's a posted visitor user & pass,
      //valid_visitor is set to the submitted vis_username

      if(isset($_POST['submit'])){
        //check if form was filled
        if(isset($_POST['mbr_username'])){
          $member_user = $_POST['mbr_username'];
        }
        else {
          echo "<p>Please enter a username!</p>";
          die;
        }

        if (isset($_POST['mbr_pass'])) {
          //login info needed
          $member_pass = $_POST['mbr_pass'];
          $member_pass = hash("sha1", $member_pass);
        } else {
          echo "<p>Please enter a password</p>";
          die;
        }

        //Perform DB query
        $query = <<<mbr
        SELECT username, pass
        FROM members
        WHERE username="$member_user"
        AND pass="$member_pass";
mbr;
        //test query
        //echo $query;

        //Check results
        $result = mysqli_query($connection, $query);

        $row = mysqli_fetch_row($result);
        $count = $row[0];

        if(empty($row)){
          echo "<p>Invalid Login Info!<br/>Please try again.</p>";
        } else {
          if($count){
            $_SESSION['valid_member'] = $_POST["mbr_username"];
            header('Location: logged_in.php');
          }
        }

        // If there's an error, print it
        if ($db->connect_error)  {
          die('Connect Error: ' . $db->connect_error);
        }

        // Close DB connection
        $db->close();
      }
    }

    //if user is logged in as an authenticated member
    if(isset($_SESSION["valid_member"])) {
      header('Location: logged_in.php');
    } else {
      //the member was not authenticated yet, or failed previously.
      //Show the form here.
      ?>

    <!-- Login form -->
    <form name="login_mbr_input" action = "login_mbr_auth.php" method="POST">
      <h2>Member Log In</h2>
      <input class="form-input" type="text" name="mbr_username" placeholder="User Name"><br>
        <input class="form-input" type="password" name="mbr_pass" placeholder="Password"><br>
        <input class="form-button button-grey" name="submit" type="submit" value="Submit">
      <p>Don't have a member account? <a href="mbrRegForm.php">Sign up!</a></p>
    </form>
    <?php
  }

  //Main menu bar for all pages
    require("required/footer.php"); ?>
</body>
					
				

database design

For The Studious Chef, the conceptual database design was realized through ER diagrams. This helped to determine website functionality in regards to the three databases the site used: members, visitors and recipes. The database of recipes was built in XAMPP with 20 recipes to begin with, which allowed for non-registered users to still browse some content.

Image of the original proposed ER model diagram for The Studious Chef
Image of the original proposed ER model diagram for The Studious Chef

design & development

The Studious Chef aims to help students with cooking proper meals for themselves, instead of ordering takeout or making basic mac 'n cheese meals. It helps these users by providing a consolidated list of delicious recipes posted by student users, for students. With this in mind, I wanted this website to look clean, simple and approachable to the user, so I restricted the colours being used to black and white with some powder blue accents. The banner pictures were free stock photos picked from Pexels.com, which were all slightly muted with a lower brightness in CSS. This allowed for consistency between all of the images, even if some were more vibrant than others.

Instead of having 5 different pages to be loaded for each list of recipes, AJAX was implemented on the "Browse" page so that the tables could change and be updated live on the one page.

Mockup of The Studious Chef's browse page
Mockup of The Studious Chef's "Browse Recipes" page. April 2017.

reflections

One of the original proposed ideas for The Studious Chef was for members to have profile pages where visitors could see their posted recipes, their social media feeds (if provided by the member), and follow members for their recipes. That way, visitors would also have a feed of recipes from their preferred members. Unfortunately this was too difficult given the scope of the project, and this feature was dropped.

To bring this project to completion, I would not only implement these features, but I would also allow for images to be uploaded with the recipes to entice other users by showing the delicious result. I would also fix the search page so that it was fully functional, allowing for a more direct search instead of passive browsing.

Given that this project was my first experience working with PHP, MySQL, and AJAX, I'm very pleased with the final outcome. The design achieves the look that I had envisioned in early stages of ideation, and the core database functionality is operational.

Gif showing a user logging in as a visitor to The Studious Chef.
Mockup of The Studious Chef's "Browse Recipes" page. April 2017.