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.
par 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
  • Beautify your form using CSS.
  • 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.

    Use any text editor to write your code. You can test it here: PHP Sandbox.

    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
  • Watch Ms. Wear's video lesson on how to do this assignment:
    https://www.youtube.com/watch?v=Trqh1ZXo2AA.

    Your Task:
    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. The content, and the page title, of content2 and content3 should be unique. Use an if statement to enable your php file to dynamically display 3 different pages based on the $_GET array.
    Follow all of these tutorials VERY CLOSELY while you do Image Gallery Part 2.
    1. Using Get vs Post.
    2. Form Validation
    3. Required Form Elements
    4. Validating Textboxes, Checkboxes, and Radio Buttons.
      The only one missing from this is TextArea. See if you can figure out how to validate it by looking at the var_dump (also print_r) of the $_POST array. Also note his use of trim to clean the data. Make sure you also use trim.
    5. Keep the Values in the form
    Create a single PHP file that:
    1. either shows the form from part 1 OR if the form has been successfully submitted, shows

      **It should never show both the form and the var_dump.
    2. require all elements of the form to be completed
    3. validate the contents of the form
    4. if the content is not valid, it reloads the form with the contents still in it AND appropriate error messages.

    Assessment:

    It must meet all the criteria listed above.

    To hand in:

    Submit a link on Google Classroom.

    Considerations

    • Put the html for the form in form.inc and use an if statement to decide to show the form or not.
    • If the form has been submitted, validate the input at the top of the php script. See w3 Complete Form Demo to see how to determine if the form was submitted.
    • Use this method from the w3 tutorial to clean the data from the text boxes, and text areas as it comes in from the form:
      function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
      }
      

    In this exercise, you will add one piece of functionality to your Image Gallery project: you will save the data from the form submissions into a text file using JavaScript Object Notation.

    JavaScript Object Notation (JSON)

    JavaScript Objects can be defined using an object literal notation like this:

    var person = {
      firstName: "John",
      lastName: "Doe",
      age: 50,
      eyeColor: "blue"
    };

    When this notation is used to store and exchange data it is known as JavaScript Object Notation or JSON. JSON uses JavaScript syntax, but the JSON format is text only. For this project, we will be storing the data from each form submission in JSON format. The advantage of using JSON is that both PHP and JavaScript have easy to use built in functions that will parse JSON and convert program data into JSON.

    Do this: Read Working with JSON.

    In order to write the form data to JSON, you will need this PHP function: json_encode. To read convert a JSON string to a PHP array, you will need this PHP function: json_decode.

    PHP.net

    Note: Both these links are at php.net, which is the API for PHP. Go here anytime you need to look up a PHP function. It is often very helpful to read the comments at the bottom of the documentation for a specific function to see effective ways of using it.

    Your job is to save all form submissions to a master data file called galleryinfo.json. After 4 submissions, your data file might look something like this:

    Sample JSON file
    **Note: all square brackets in the data are images and will not copy and paste, you will need to type them in manually.

    
    
        {
            "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"
        }
    
    
    

    In order to save the JSON data in a file, you will need to know about File I/O in PHP. To save data to a file in PHP, use file_put_contents. To read data from a file in PHP, use file_get_contents() - reads a file into a string.

    Appending to a File

    When you save a form submission to the json file, you will be "appending" it. This means you will be adding the new data to the end of the file. In order to do this you must:
    1. Open the existing file
    2. Read the file and decode the JSON into a PHP array
    3. Add the new form submission to the php array
    4. Convert the array back into JSON
    5. Write the JSON back to the file
    The code to complete most of these tasks is provided below.

    In order to save the JSON data in a file, you will also need to know about ownership on the server. Any php script on the server runs because a client has made a request that is handled by the web server. The web server is considered a user on the server, with the user name www-data. Therefore, when your script creates a file on the server, it has www-data as the owner and the group, which means your username will not be able to edit or delete the file through WinSCP. The way to deal with this is to have your php script create the file if it doesn't already exist. If the file does not exist (file_exists), your script will create it (touch). Also add a button to your user interface that allows you to easily delete the file. To delete a file using PHP, use this function: unlink.

    Below is some very helpful PHP for a number of the tasks you need to complete. **Note: all square brackets in the code are images and will not copy and paste, you will need to type them in manually.

    PHP to Open the JSON file and Convert it to PHP Array

     // read json file into array of strings
     $file = "galleryinfo.json";
     $jsonstring = file_get_contents($file);
    
     //decode the string from json to PHP array
     $phparray = json_decode($jsonstring, true);
    
    Add the newly submitted form data to the array, convert array to JSON, and save back to file

     // 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); 
      
    

    You will create a new view of your data called the "Gallery View". The Galler y View loads a var_dump of all the contents in galleryinfo.json. Add a link to your form that says "View Gallery".

    Gallery View: If the json file is storing 3 entries, your gallery view might look something like this:

    .

    What to do for this assignment:

    1. Append submitted form contents 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). Note: If your form adds data to the $_POST array from the submit button, do not save this in galleryinfo.json
    2. Add a link to your form that says "View Gallery". This link loads a var_dump of galleryinfo.json. I will refer to this view as the "Gallery View" because it will eventually become a full image gallery.
    3. When a form is submitted successfully, instead of showing a var_dump of the recently submitted data, show the Gallery View.
    4. Add a link to the Gallery View that says "Delete JSON File" that deletes the JSON file (for when you need to start clean).

    Assessment:

    It must meet all the criteria listed above.

    To hand in:

    Submit a link on Google Classroom.

    Debugging Hints:

    You are now getting into some serious PHP, and the error messages you get from the server may not be enough to find your bugs. Here is the order in which to do things when your code is not working:
    1. Did you actually save your changes in the text editor?
    2. Did you actually upload your changes? In WinSCP, on the server side of the file manager, right click and choose "refresh". Check the time stamp on the files on the server match the time stamp on the files on your local machine.
    3. Use Empty Cache and Reload to make sure the browser updated the files from the server and isn't using files from browser cache.
    4. Read your code carefully. Did you forget the $ in front of a variable name? Did you accidently use Java syntax instead of PHP syntax? Run it through theOnline PHP Parser to find syntax mistakes.

    In this part of the Image Gallery, you are going to enable image uploading and you will be using a Unique Identifier to ensure each form submission can be uniquely identified.

    The Lesson

    Watch Ms. Wear's Video on How to Upload a File with PHP. Use this for your code base w3 Uploading Files with PHP and read the tutorial very carefully.

    What to do for this assignment:

    1. Save appropriate images uploaded using the Image Gallery form to the server
      • Save images in a folder called uploadedimages.
      • If uploadedimages does not exist, your script should create it. Look up mkdir.
      • Appropriate images include formats png and jpg and images 4 MB or under.
      • If a user attempts to upload a file that does not meet the criteria, display a descriptive error in the form beside the image upload field, and retain other form values.

    2. Use a unique identifier or UID.
      • Use the UID as the file name of the uploaded image. 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.
      • 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 file extension of the image file to the JSON data. For example the key value pair may be "imagetype":"png"

    4. On the "View Album" page,
      • Show all the images in uploadedimages below a var_dump of galleryinfo.json. You will need read_dir.
      • Add a link that says "Delete All Entries" that deletes all the JSON data AND the uploaded images. Look up rmdir and read_dir.
    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",
            "imagetype": "png"
        }
                     

    Assessment:

    It must meet all the criteria listed above.

    To hand in:

    Submit a link on Google Classroom.
    In this version of the Image Gallery, we are adding a number of improvements.
    1. Create thumbnails: After an image is saved to the server (after being uploaded from the form), create a 150x150 pixel thumbnail of the image in a separate folder called thumbnails or something like that.
      You will need to include this code: createthumbnail.php. Run this test program first to make sure your permissions are set up correctly.
    2. Make index.php a grid of thumbnails:
      Keep it simple for now. Styling it will happen in part 6. Basically use a for loop to read the thumbnails folder and generate the html that displays a grid of clickable images.
      thumbnails example
    3. Add a LightBox:
      • If a user clicks a thumbnail, it loads a light box with a larger version of the image.
      • **I suggest using the code from CS 11.**
      • Display the name of the photographer, the description of the photo, and the tags for the photo in the lightbox.
      • When the page initially loads, it should only load thumbnail images. When a thumnail is clicked, it will load the large version of the image. Note: this is what the CS 11 Lightbox code does.
      • Add download button on the lightbox view of each image that results in just that one image being downloaded. Use this tutorial HTML5 Download Links.
      lightbox
    4. User Controls:
      • In the gallery, include an "Upload Image" button which takes the user to the form.
      • To return from the form to the gallery, use the "View Gallery" button from the previous exercises.
      • In the gallery, include a "Reset Gallery" button which deletes all the images, thumbnails, and the json data.
      • Add a Download All Button: Add a "download all" button on the gallery view that creates a zip file of all the images and downloads it to the client's computer.
        You will need this class: HZip.php and downloadall.php. In the code, change the name of the images folder to "uploadedimages". If permissions are set up correctly, then the following HTML will download a zip file:
        download all html

    Assessment:

    It must meet all the criteria listed above.

    To hand in:

    Submit a link on Google Classroom.

    For most of the functionality is part 6, you need to learn how to use JavaScript fetch to retrieve json data. This will enable your site to retrieve json data from the server without reloading the page. It is key for a seamless user interface experience.

    Get up to speed on some new code:
    1. Watch Fetching JSON data
    2. Watch Ms. Wear's Video Fetching JSON from a PHP Script. Download the code for it here: JSON.zip. Test this working example.
    3. Here is additional documentation on using fetch: Modern AJAX with Fetch API.
    Add the Following Functionality to the Image Gallery
    1. View Public/Private/All: In the gallery, include a method for selecting only "private" images only, "public" images only, or all images and then display only those thumbnails.
      public/private/all
    2. Lightbox Functionality:
      • 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
      • Note: You will want to use fetch data to load the name/description/tags into the lightboxes (instead of PHP) in this version.
    3. Add a Search::
      • Include a search box that will display all images found with the search terms in it's description, tags, or name.

    Assessment:

    It must meet all the criteria listed above.

    To hand in:

    Submit a link on Google Classroom.

    PHP Sessions

    1. Read this tutorial: w3 PHP Sessions
    2. This code is demonstrated in Ms. Wear's Sessions Demo
    1. Read 10 Principles of Web Design
    2. Read IBM's Design Principles
    3. Look at examples of poor design: 21 Bad Website Examples
    4. Look ast examples of very cool CSS design: CSS Zen Garden
    5. Read What is Responsive Design?
    6. To save yourself a lot of time, I suggest you use one of the bottom two responsive templates from w3 at CSS Layout Templates
    Overview

    Turn your Image Gallery project into a full fledge Baby Photo Submission Site for Yearbook Grads. Add different views so that the general public has limited access to the data, while editors/moderators have more access to the data. (See diagram right)

    Add in an extra step that requires uploaded images to be approved by a moderator before they are published to the site. Allow users to sort and search the data. Allow editors and moderators to edit data and delete images.

    Working Demo

    Watch this video of a Working Demo of an Image Gallery Project for inspiration and clarification.

    Detailed Description

    The Public Gallery will:

    • be called index.php
    • not contain any images that have not be "approved" by a moderator
    • only show images with public access,
    • have a search box that searches name, description, and tags of all the images and then displays only the images meeting that search criteria,
    • have a sort option that sorts by most recently uploaded, first name, and last name,
    • have a lightbox that
      1. shows the name, description, and tags for an image, but does not contain a download button,
      2. has previous and next buttons that iterate through only the images shown on the screen,
    • contain a link to the upload form,
    • and contains a "log in" link/button.

    The Moderator Gallery will:

    • be the homepage for a moderator/editor who is logged in
    • contain all the features of the Public Gallery, and
    • have access to the Awaiting Approval View
    • in the lightbox allow the moderator to:
      1. make edits to first name, last name, description, and tags.
      2. download the single image
      3. delete the image and json data for that image
    • in the main gallery allow the moderator to:
      1. make edits (first name, last name, description, and tags) to all the images in the same form (1 click save all changes)
      2. download all images
      3. select multiple images and delete with one click
      4. view public, private, or all images

    The Awaiting Approval View will:

    • contain all images not yet approved by a moderator
    • provide a method for moderators to edit to first name, last name, description, and tags,
    • provide a method for moderators to delete/approve uploaded images
    • move images from the Awaiting Approval View to the Gallery Views, once approved

    The site will have the following security implemented:

    • private json data is not accessible to the user from the public gallery through Chrome WebDev Tools,
    • images of the incorrect format will not be uploaded
    • if a user types in a direct url to any moderator view, but is not logged in, the site will redirect to the Public Gallery
    • Note:if a user types in a url directly to the json file, or to a private image's location, it will load. The fix for this is permissions at a server level, and I don't expect you to fix it for this project.

    The user interface will:

    • be responsive
    • use an attractive design that follows the principles of design
    • have easy to use techniques to accomplish all the funtionality described above
    Lessons You Need to Complete Marking Criteria (/100)

    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 /50

    • Full error checking
    • Robust and reliable
    • Meets all criteria listed above

    User Interface Design /30

    1. Look and feel of responsive design with principles of design applied
    2. intuitiveness of interface
    How to Hand in
    1. Submit a link to Google Classroom
    2. Hand in zip file of your entire project folder to Google Clasroom
    3. For testing purposes, upload:
      1. at least 7 private images, at least 5 public images, and at least 4 to be approved images
      2. Each of the above images should have valid first names, last names, description and tags. "asdf" does not count as valid.
      3. Ensure 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".
    FAQ's
    1. 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.
    2. Can one user submit multiple images? Yes, but they can only submit one image per form submission
    3. 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).
    4. 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.
    5. Can a moderator delete an image after it has been approved? Yes.
    6. How do I process checkboxes with PHP? PHP and Form Checkboxes
    7. Can the js store the private data in ram when the user is in the public gallery? No, because the user can use Chrome WebDevTools to see the data, which will reveal the private data.
    8. How do you send data from JS to the PHP file? Using the Fetch API to send and receive JSON with PHP.
    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