Project 3: Well-Designed Photo Gallery
You will design and implement an online photo gallery in PHP. You will demonstrate your ability to design an aesthetically pleasing and usable interactive site. Your photo gallery will be backed by a database which you will use to store information about the images uploaded to your gallery. To help organize the photos in your gallery, you will implement the ability for users of your site to tag the photos.
1. Learning Objectives
Develop a professional interactive website suitable for a portfolio.
Develop the skills to translate client/customer requirements into a working implementation. Leverage design patterns to improve the usability of your site.
Practice using your web programmer’s toolkit to solve complex problems.
Practice structuring a database with multiple tables and foreign keys.
Practice building and querying relationships between tables using common fields (joins). Employ best practices for user uploaded content for dynamic websites.
2. Deadlines & Receiving Credit
Milestone Points Grading Method Slip Days Deadline
Milestone 2 (p3m2) 25 Feedback (completion) Maximum: 2 days 4/22, 11:59pm ET slip days = no feedback!
IMPORTANT! No feedback is provided for milestones submitted with slip days! If you want feedback, please submit by deadline.
Milestones are graded twice. First for feedback (completion grade only). Lastly, for points at the final submission (via rubric). All work is graded via rubric for points at the final submission. Use your milestone feedback to improve your final grade; revise milestone work prior to final submission.
Completion credit will be awarded so long as you made a good faith effort to complete the milestone’s requirements. Very obviously incomplete milestone submissions will receive a 0 for the completion grade.
Milestone feedback is not a pre-grade. This feedback is designed to catch large problems (which we sometimes miss). Regardless of the feedback (or lack of feedback) that you get, you are responsible for meeting all of the project’s requirements for the final submission.
Milestone 1 (p3m1) 25 Feedback (completion) Maximum: 2 days 4/15, 11:59pm ET slip days = no feedback!
Final (p3fin) 150 Rubric Maximum: 2 days 4/29, 11:59pm ET (p3m1 + p3m2 + p3fin)
INFO 2300 – Spring 2020 (04/01/2020, 10:40) Page 1/12
Failure to push your submission to GitHub is equivalent to not submitting the assignment. You will receive a 0. It is your responsibility to verify that you submitted your assignment.
3. Project Tips
This project is challenging. Start working on this project now. Take the milestones seriously. Seek help early. Do not wait till the last minute to start the project or seek help.
Take the design of your website very seriously. Since Project 4 was eliminated, your Project 3 is considered your portfolio showcase for this semester. Your design should look professional, be aesthetically pleasing, follow visual design principles, and be usable by your target audience(s).
4. Git Repository & Submission
Clone git@github.coecis.cornell.edu:info2300-2020sp/YOUR_GITHUB_USERNAME-project-3.git . Replace YOUR_GITHUB_USERNAME in the URL with your GitHub username. This is usually your NetID.
Submit all materials to your GitHub repository for this assignment. See README.md in your Git repository for submission instructions for each milestone. Never email your submission to the instructor.
Tip: Commit and push your changes every time you work on your project. Every time you commit and push you store your changes on the GitHub server. This acts as a back-up for your work. It also means that if you forget to submit before the deadline, there’s something already on the server that the TAs can grade for partial credit.
5. Documenting Design (Design Journey)
We will grade your design-journey.md in VS Code’s Markdown Preview. Everything, including images, must be visible in VS Code’s Markdown Preview. If it’s not visible in VS Code’s Markdown Preview, then we won’t grade it. We won’t give you partial credit either.
If you included images in your design journey, they must be visible in VS Code’s Markdown Preview. No credit will be provided for images in your repository that are not properly linked in Markdown. No credit will be given for design work not included in the documents/design-journey.md file; do not rename this file or put your answers in another file! Remember to check and test all assignment submissions!
INFO 2300 – Spring 2020 (04/01/2020, 10:40) Page 2/12
Requirements
Create an online image gallery.
Your gallery must be designed for at least one specific target audience.
Your design should be aesthetically pleasing and follow visual design principles.
The site’s navigation and all content should be well organized for your target audiences.
You will implement your website in PHP with all data stored in an SQLite database.
When generating the HTML for your web page, you should use SQL queries to retrieve specific data from the database and directly use that data for your HTML generation.
Do not use PHP to find specific data; directly retrieve specific data from the database through well-written SQL queries. For example, do not retrieve all the records from the database using SQL and then use PHP to loop through and find the data you want. SQL is much more efficient at searching and we expect you use it where appropriate.
You may use HTML, CSS, JavaScript, PHP, and SQL.
You may not use external code except for the Lab 5 Component Library. You may use jQuery.
You may not use Bootstrap.
You may optionally build on your Project 1 or Project 2 if you like. Document your existing design the design journey.
Note: Use (includes/init.php) from Project 3, not Project 1 or 2.
Note: Your content can be something other than an image gallery but it must follow a similar structure. If you choose entities other than images and tags, you should explain in your design journey how your entities correspond to the requirements of the assignment as written in the language of images and tags.
1. Photo Gallery
Users should be able to view all images in your photo gallery at once. (e.g. a gallery/thumbnail page)
Users should be able to view all images for a tag at once. (e.g. tag page or filter by tag on gallery page) Users should be able to view a single image and all the tags for that image at once. (e.g. image details page) Users should be able to upload a new image.
Users should be able to remove (delete) an image.
Make sure you clean up any relationships to the image in other tables. (Where the image is a foreign key.) Make sure you delete the corresponding file upload from disk.
Users should be able to view all tags at once. (e.g. a list of tags)
Users should be able to add an existing tag to an image, add a new tag to an image, and remove a tag from an
INFO 2300 – Spring 2020 (04/01/2020, 10:40) Page 3/12
Users should be able to add an existing tag to an image, add a new tag to an image, and remove a tag from an image.
Tags must be unique. You cannot have duplicates of the same tag.
You may store and display any other type of data you like for the images. Although none of this is required. example: A user defined description for the image or the date it was taken.
example: The file format or size of the image.
2. Design
Your design should be aesthetically pleasing and employ visual design principles.
Your photo gallery should employ the common design patterns you identified in Lab 4.
You may use the Design Pattern Snippet Library from Lab 5 as a reference for supporting these design patterns. If you use the component library, make sure you follow the citation requirements as outlined by the course’s External Code Policy.
DO NOT COPY AND PASTE CODE!
Do not design a website with “submit” style buttons everywhere. None of the image galleries we analyzed in
lab 4 did this. You shouldn’t either.
For example, delete is often implemented as a menu item.
3. Requests
All requests made to the server must use an appropriate request type: GET or POST. See guidelines in your textbook or refer to INFO 1300 notes for guidance.
Failure to do so will likely result in multiple deductions due to the cascading issues with using incorrect request types (i.e. security, usability, etc.)
If you do not require user input (no input components), but need a GET request, use a URL with query string parameters.
GETrequeststhatdonotrequireuserinputshoulduse elementsforURLswithquerystringparameters. Style these elements to leverage existing design patterns.
For example, to view the balloons tag on the image gallery page, you may have a link for the balloons tag that uses querystringparameters: gallery.php?tag=balloons or gallery.php?tag_id=3 .
Another example, to view the details for a specific image, you may have an image page that accepts an id: image.php?id=8 or image.php?image_id=8
Hint: You will need to make extensive use of query string parameters for most of your links. Hint Hint Hint: https://www.php.net/manual/en/function.http-build-query.php
All POST requests require a element. (Even if no user input.)
INFO 2300 – Spring 2020 (04/01/2020, 10:40)
Page 4/12
AllPOSTrequestsrequirea