mdinfotech.net  



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
    9. a reset button which clears the form data
  • 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 php.net
  • Break a valid HTML5 template up into 3 files: header.inc, content.inc and footer.inc. Use the PHP command include to generate a valid html page with the content "Hello World!". Then create content2.inc and content3.inc. 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);

    Considerations

    • 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 identier. 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. Make the homepage of your image gallery into a photo album of thumbnails and name the file index.php.
    2. Include a search box that will display all images found with the search terms in it's description, tags, or name.
    3. Include a method for showing "private", "public" or all images
    4. Include an "upload" button which takes the user to the form. It should look better than this:



    5. 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:



    Considerations

  • The design of the gallery will be taken into account. Consider using Bootstrap. It must be responsive.
  • Use the GD Image Library to generate thumbnails of the images. Tutorial on how to create a cropped thumbnail image using gd. Another tutorial that includes some useful functions
  • How to read JSON from the server using Javascript: json HTTP Request,
  • 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.
  • To access the json file from the Javascript, use the following: filename = (window.location.href).substring(0, (window.location.href).lastIndexOf("/")) + "/galleryinfo.json";
  • 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.

    FAQ's

    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
      session_start();
      $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. Try this code PHP Zip Archive Script
    13. How do I process checkboxes with PHP?PHP and Form Checkboxes

    Deadlines

    Prototype 1: Tuesday May 28 (/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, awaiting approval, moderator gallery, public gallery
    4. Navigate through the 4 views as follows:
      • public gallery is index.php,
      • public gallery has a link to "upload" which goes to the upload form,
      • public gallery has a link to "Log in" which takes you to the moderator gallery,
      • moderator gallery has a "awaiting approval" link that goes to awaiting approval,
      • moderator gallery has a "log off" link that goes to public gallery.

    Prototype 2: Thursday June 6 (/10)

    • All "functionality and requirements" items listed below are met.

    Final Project: Monday June 19. **Bonus 5% if handed in Friday June 14

    • 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: send an email to wear@mdinfotech.net with a link to your homepage and the names of you and your partner.

    Marking Criteria (/105)

    Prototypes /20

    Code /20

    • quality, efficiency
    • php and javascript
    • commented and organized in an easy to understand fashion
    • has program comments
    • include a readme.txt file
    • with a list and description of ALL files
    • 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.
        • 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 an 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
    4 PHP programming problems on June 19.

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

    Course Evaluation