This unit consists of two major components:
  1. Individual Exercises

  2. Listed below. 100/80/60 Quizzes will be given.

  3. Group project (20% of final mark)

  4. In groups, you will develop a dynamic website. This project will continue throughout the whole unit. Details will be given soon.
Visit the Grade 11 Web Unit and do HTML Review and the CSS Review.
  • Create a basic HTML form with:
    1. a textbox for the user's first name
    2. a textbox for the user's last name
    3. a file upload field
    4. a textarea for a description of the photo
    5. a textarea for a tagging the photo with names or phrases (each to be separated with a comma)
    6. a check box next to a statement that says: "I retain the copyright to this image and release it for use on this site."
    7. radio buttons with two options for access: public and private
    8. a submit button which submits the form using POST
  • Use one of these designs: Fresh Design Web templates to beautify your form.
  • Validate your CSS and HTML
    1. Do this exercise: Using Linux and SFTP through SSH
    2. As always, everything from this section will be tested on.
    Using the menu on the left side of the page at w3 Schools PHP Tutorials, complete all the PHP tutorials from PHP Intro, all the way down to PHP Sorting Arrays.

    Quiz on Tuesday.
    After getting an account on the Linux server, upload a PHP Hello World file and run the script through a browser.

    echo "Hello World!"
  • PHP Superglobals at w3schools
  • include command at
  • Break a valid HTML5 template up into 3 files:, and Use the PHP command include to generate a valid html page with the content "Hello World!". Then create and Use an if statement to enable your php file to dynamically display 3 different pages based on the $_GET array.
    Create a PHP file processes the form from part 1.

    It must:
    1. require all elements of the form to be completed
    2. validate the contents of the form
    3. if the content is not valid, it reloads the form with the contents still in it AND appropriate error messages.
    4. displays the submitted contents of the form on a NEW page using var_dump($_POST);


    • Write a php script that includes the form (like W3's Form Example) but use an if statement to only show the data and not include the form if the data validates.
    • Use this method from the w3 tutorial to clean the data as it comes in from the form:
      function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
  • Write the submitted form contents (do NOT include submit) to a master data file called galleryinfo.json in JSON format.
  • If the file does not exist (file_exists), your script will create it (touch)
  • Add a link to your form that says "View Album". This link loads a var_dump of galleryinfo.json.
  • Add a link to the "View Album" page that says "Delete JSON File" that deletes the JSON file (for when you need to start clean). Look up unlink.

  • Sample JSON file

            "firstname": "John",
            "lastname": "Smith",
            "access": "public",
            "tags": "suzy, joey, horse",
            "description": "stuff",
            "image": "123.jpg",
            "permission": "t"
            "firstname": "Bill",
            "lastname": "Moraine",
            "access": "private",
            "tags": "horses, dogs, cats",
            "description": "more stuff",
            "image": "124.jpg",
            "permission": "t"
            "firstname": "John2",
            "lastname": "Smith2",
            "access": "public",
            "tags": "suzy2, joey2, horse2",
            "description": "stuff2",
            "image": "125.jpg",
            "permission": "t"
            "firstname": "John",
            "lastname": "Smith",
            "access": "public",
            "tags": "suzy, joey, horse",
            "description": "stuff",
            "image": "123.jpg",
            "permission": "t"
    PHP to Open the JSON file, convert it to PHP Array, add the newly submitted data, conver back to JSON, save back to file

     // read json file into array of strings
     $file = "galleryinfo.json";
     $filearray = file($file);
     // create one string from the file
     $jsonstring = "";
     foreach ($filearray as $line) {
       $jsonstring .= $line;
     //decode the string from json to PHP array
     $phparray = json_decode($jsonstring, true);
     // add form submission to data (this does NOT remove submit button)
     $phparray  = $_POST;
     // encode the php array to formatted json 
     $jsoncode = json_encode($phparray, JSON_PRETTY_PRINT);
     // write the json to the file
     file_put_contents($file, $jsoncode); 
    Results of var_dump on $phparray

    1. When an image is uploaded to the gallery, assign it a unique identifier. In addition, use the unique identifier as the file name. For example, the first image ever uploaded might be named 0001.png, and the second image uploaded is called 0002.jpg etc. Hint: a good way to keep track of the next identifier to use is to store it in a text file called identifier.txt that contains just the number to use for the next uploaded file name.

    2. Add the unique identifier to the JSON data for this image. A good key would be UID because UID stands for Unique IDentifier.

    3. Add the name of the image file to the JSON data. For example the key value pair may be "imagefile":"0001.png"

    4. Save appropriate images uploaded using the Image Gallery form to a folder called uploadedimages.

    5. If uploadedimages does not exist, your script should create it. Look up mkdir.

    6. Add a link to the "View Album" page that says "Delete All Entries" that deletes all the JSON data AND the uploaded images. Look up rmdir.

    7. Appropriate images include formats png and jpg and images 4 MB or under.

    8. On the "View Album" page, show all the images in uploadedimages below a var_dump of galleryinfo.json.

    With the new file information added, each form entry will look something like this:
            "firstname": "John2",
            "lastname": "Smith2",
            "access": "public",
            "tags": "suzy2, joey2, horse2",
            "description": "stuff2",
            "permission": "t",
            "UID": "0001",
            "imagefile": "0001.png"
    1. Use the GD Image Library to generate thumbnails of the uploaded images. Tutorial on how to create a cropped thumbnail image using gd. Another tutorial that includes some useful functions.
      Note: if you cannot get PNG thumbnails to work add the following code to each PNG:
      $dest_img = imagecreatetruecolor($new_w,$new_h);
      if (image file type is png) {
          imageAlphaBlending($dest_img, false);
          imageSaveAlpha($dest_img, true);
      imagecopyresampled($dest_img, $source_img, 0 , 0 , 0, 0, $crop_w, $crop_h, $orig_w, $orig_h);
    2. Improve the appearance:
      • Make the homepage of your image gallery into a photo album of thumbnails and name the file index.php.
      • Make the design responsive. Consider using Bootstrap.
      • Include a method for showing "private", "public" or all images
      • Include an "upload" button which takes the user to the form.
      It should look better than this:

    3. If a user clicks a thumbnail, it loads a light box with a larger version of the image. It also displays the name of the photographer, the description of the photo, and the tags for the photo. Initially only load thumbnails. When a thumnail is clicked, it will load the large version of the image. Here is sample code that demonstrates how to get Javascript to load an image after an event has happened: imageTest.html.

      It should look better than this:

    4. Include a search box that will display all images found with the search terms in it's description, tags, or name. Ms. Wear's Sample Code on how to perform a Javascript Search of the JSON data using an HTTP Request. The search is performed on this JSON file. More on how requests work: XML HTTP Requests.
    5. Multiple XMLHttpRequests Sample Code

    PHP Sessions

    1. Read this tutorial: w3 PHP Sessions
    2. This code will be demonstrated in class.

    Write a Baby Photo Submission Site for Yearbook Grads.

    Turn your Image Gallery project into a full fledge Baby Photo Submission Site for Yearbook Grads. Add a sort and a search. Create two views into the system: one for the general public (the user), and one for editors (the moderator). You will not have to write a log in system.. The public view will only show images with public access, a search box, a sort option, a link to the upload form, and a "log in" link/button. The moderator view will additionally be able to approve images, edit data, and delete information/images, and view public/private/all images. See the marking criteria for a complete list of additions.


    1. What is the best way to make the data in the JSON file available to the browser so I can process it with JavaScript? Download the entire JSON file to the browser as a Javascript Object when the page loads. w3 JavaScript JSON
    2. How does the search work? Using the hint above, get JS to search the JSON data (name, description, and tags) and produce an array of images that meet the search criteria. Show these images in the gallery.
    3. What additions should be made to the lightbox? Add previous and next buttons to the lightbox which scroll through the images currently displayed on the gallery.
    4. What should the sort look like? A user can view images sorted by date of upload or alphabetically by lastname, firstname, in the album views. The best way to do this is client side, that is, using JavaScript: Sorting JSON Arrays in JS
    5. When a moderator is logged in, what is their homepage? The moderator gallery
    6. When a user is at the site, what is their homepage? The public gallery
    7. When a user submit's a new image, what page should display after the form is submitted? It should confirm the successful upload and go to the public gallery.
    8. Can one user submit multiple images? Yes, but they can only submit one image per form submission
    9. How can you determine if a user is a moderator or not? The YBGrad system uses Sessions to record a number of variables including log in information. Use $isEditor to determine the status of a user. If a non-editor tries to access a moderator page, they should be forwarded to the public gallery. (Adding
      $isEditor = $_SESSION"isEditor";
      to the top of your php files will allow your system to work with the existing system).
    10. How does one get from the public gallery to the moderator gallery? Put a "log in" link on the public gallery. This should lead to a page that automatically sets $isEditor to true and shows the moderator gallery. In the moderator gallery put a "log out" link that automatically sets $isEditor to false and shows the public gallery.
    11. Can a moderator delete an image after it has been approved? Yes.
    12. How do I create a zip file for the Download All button? Use PHP's ZipArchive, read about it here: PHP Zip Archive Script.

      If your page has a Download All button, call this $ajax request when it is clicked to download a zip file of all the images.
      	type: "POST",
          url: 'zipAll.php',
          success: function(data){
              var a = document.createElement('a');
      		a.setAttribute('href', '');
      		a.setAttribute('download', '');
      		var aj = $(a);
      		aj<0>.click();  // the angle brackets are supposed to be square brackets
      that works with this PHP script titled zipAll.php
      // php script zipAll.php
      $files = array();
      // read the directory uploadedimages and 
      // add each image location to the $files array
      var_dump($files);  // check the content of files is correct
      $zipname = '';  //
      $zip = new ZipArchive;
      $zip->open($zipname, ZipArchive::CREATE);
      foreach ($files as $file) {
      ///Then download the zipped file.
      header('Content-Type: application/zip');
      header('Content-disposition: attachment; filename='.$zipname);
      header('Content-Length: ' . filesize($zipname));
    13. How do I process checkboxes with PHP?PHP and Form Checkboxes
    14. Can the js store the private data in ram when the user is in the public gallery? NO.


    Prototype 1: Thursday December 12 (/10)

    1. Previous and Next buttons work.
    2. One or more images can be deleted from the moderator gallery. You may want to consider using A JQuery AJAX Request (you will also need Add JQuery to your pages).
    3. 4 views created:
      • upload: shows form
      • awaiting approval: shows at least the title "Awaiting Approval"
      • public gallery:
        1. is index.php,
        2. has a link to "upload" which goes to the upload form,
        3. has a button/link to "Log in" which takes you to the moderator gallery,
        4. only shows public images
      • moderator gallery:
        1. has a "awaiting approval" link that goes to awaiting approval,
        2. has a "log off" button/link that goes to public gallery.
        3. has ability to view public/private/all images

    Prototype 2a: Thursday Dec 19 (/5)

    Complete any 3 of the following criteria:

    1. Sort
      • user can view images sorted by date or
      • alphabetically by lastname,
      • alphabetically by firstname
    2. Has a download button on the lightbox view of each image
    3. Has a download all button on the album view that creates a zip file of all the images and downloads it to the client's computer.
    4. Images that are uploaded show up in the "Awaiting Approval" view, but NOT the public or moderater galleries.

    Prototype 2b: Thursday Jan 9 (/5)

    Final Project: Friday January 17

    • All criteria outlined below are met.
    • Populate the gallery with a minimum of 20 unique images, each with valid names, actual descriptions and tags, some public, some private.
    • Leave 5-7 images in "waiting for approval".
    • How to hand in: put a copy of your entire project in Wear_IT in a folder with your team names and ensure README.txt has a link to your online project.

    Marking Criteria (/105)

    Prototypes /20

    Code /20

    • quality, efficiency
    • php and javascript commented/organized/formatted in an easy to understand fashion
    • include a readme.txt file with a list and description of ALL files AND a link to your homepage
    • css and html are valid

    Functionality and Requirements /40

    • Complete user interface
    • Full error checking
    • Robust and reliable
    • All gallery views:
      1. Search
        • can search for name, description or tags
        • found results are displayed in gallery
      2. Sort
        • user can view images sorted by date or
        • alphabetically by lastname,
        • alphabetically by firstname
      3. Lightbox
        • include "prev" and "next" buttons so the users can browse through the images in order they are displayed in the gallery.
        • Only browse through the images currently displayed in the gallery
    • Public Gallery (user control view)
      1. provides access to gallery and form
      2. is the home page and called index.php
    • Moderator Gallery
      1. To Be Approved
        • any uploaded image is flagged as "not approved" until a moderator logs in and "approves" it
        • Approved images are visible in the Gallery views
      2. Provides access to full gallery and to "to be approved" views
      3. Can view public, private, or all.
      4. Can delete one or many images
      5. Edit view of individual images where a moderator can change the name of the person, description, and tags. Usually done in the lightbox
      6. Edit view of all images where a moderator can change the name of the person, description and tags of all the photos. Usually done by preloading all data for each image into form fields below each thumbnail with one submit button for all changes.
      7. Has a download button on the lightbox view of each image
      8. Has a download all button on the album view that creates a zip file of all the images and downloads it to the client's computer

    Presentation /20

    1. Look and feel of responsive design
    2. Beautified with CSS
    3. Principles of Design applied
    4. User Interface

    Complexity /5

    1. is the finished product polished enough to be called a term project

    How to Hand in

    1. Email a link to the homepage to Ms. Wear
    2. Hand in a copy of your entire project folder to Wear_IT > Hand-in > CompSci 12
    3. For testing purposes, upload:
      1. at least 7 private images, 5 public images, and 4 to be approved images
      2. Each of the above images should have valid first names, last names, description and tags.
      3. There are a variety of names, descriptions and tags. Do not use the same ones over and over.
      4. Have 4 images appear for the search term "horse".
    4 PHP programming problems on Monday Dec 16 and Tuesday Dec 17 .

    Please take the time to complete the following course evaluation. It will be used for future course offerings.

    Course Evaluation

    Work on Coder Byte Challenges, CCC Challenges or your Final Project.

    Coder Byte