News

Quiz 2 was moved to Friday

Project Teams should be formed by Monday, September 25.

CS3500: Introduction to Web Technologies
Final Project

This is your final project for the class, check the class schedule for important dates. Download the instructions below in PDF here.

Goals

  1. To apply all the fundamental and basic knowledge gathered in across the semester about HTML, CSS, JavaScript, PHP, and Databases.
  2. To understand the requirements of a client for a given project and to be able to design, implement, and present the project.

Instructions

  • Each group will read the requirements for their specific project.
  • You will code your website and upload it to a free web hosting service such as https://www.000webhost.com (this is the free web hosting where the class webpage is in). If you want to use a different web hosting place, make sure it allows you to use databases and PHP.
  • You will use the Bootstrap framework to give a general style to your site as well as your own CSS files for further customizations.
  • Design and test your database on the web hosting of your choice.
  • Make sure to perform extensive testing of your website, so you can find and fix as many bugs as possible before the presentation and demo date.
  • Your project should implement a responsive design in which your website adapts to the different output media (smartphone, tablets, laptops, desktops, and so on).
  • Keep it simple and do not overwhelm yourselves, make sure the basics are covered before starting miscellaneous features.

Technologies and Concepts

Each team will make use of the technologies explained in class, as well as Internet resources and the course book to complete the final project. Such technologies are:

  • HTML5
  • CSS and Bootstrap Framework
  • JavaScript and AJAX
  • PHP
  • MySQL Database (or another available Database)

Your team is also required to apply some of the concepts taught during the class:

  • Error handling
  • Security
  • Sessions
  • Web Services

Evaluation

Your project will be worth a total of 50 points, which is equivalent to 50% of the total grade. The parts to be evaluated are:

  • Project Presentation 10 pts
    Each team will have 5 minutes to give and overview of their project, highlighting the most important parts as if you were selling your product to the audience. You must prepare a presentation (no more than 6 slides) with these components:
    • Presentation slide (information about team members, etc.)
    • Brief introduction of the project: What is it about, the name you gave to your website and logo, URL, and so on.
    • Main features of your site.
  • Project Demo 20 pts
    After your presentation, you will have 10 minutes to demo your website. Take this chance to say in which parts you implemented the concepts taught during the class, such as security, sessions, error handling, and so on. The students in the class will use your demo as a "walkthrough" and they will poke around and test it.
  • Project Coding 15 pts
    You will submit the code of your website to the corresponding "dropbox" folder in eLearning. The due date for submitting your code is Sunday, December 10th, 2017. You will prepare and zip a folder containing:
    • All the HTML, CSS, and PHP files.
    • A README document with information about the files included in the folder, user and passwords for the web hosting site, databases, and any other password protected section. Include other relevant information as you see fit.
    • A file showing the database queries used to create the database’s main tables.
  • Classmates Evaluation 5 pts
    After your project demo, your classmates will have until Sunday, December 10th, 2017 to test your website and give you an evaluation about their user experience. Classmates are required to evaluate your website thoroughly and complete a survey that will be available in eLearning.
  • Teammate Evaluation
    Each of the team members will fill out a form evaluating their teammate. This evaluation will be used to decide if both members will receive the same final grade (50 points) or if one (or both) members should receive less than the total mark. This evaluation will be submitted anonymously. Ideally, both members of the team should work together and be in constant communication with each other in order to make a great final project. Sometimes it doesn’t happen, hence the need for fairness in the final project evaluation.

Expected Features of your Website

In addition to the specific requirements for your type of project (listed in the sections below), the following are expected features for this project:

  • Your website should have a name, a simple logo, and follow a design theme.
  • Your website should have a Landing Page, which is the first page the non-registered users will see after typing the URL for your site.
  • Your website needs to offer registration option for new users, as well as login/logout options for registered users.
  • Each user should have a simple My Account page where they can change user specific settings such as passwords, profile picture, and have the ability to delete account.
  • Registered users will have a personal Home Page (the content of the Home Page will vary depending on the type of project) after logging in.
  • Your website will integrate some form of web service or API, such as:
    • Google Maps: To show the location in a map, for a user.
    • Weather: To show the weather for a user’s location.
    • Google URL Shortener: To short a long URL and be able to share short URLs.
    • Random number generator.
    • Other web service or API you consider of interest for your website, such as those that provide lists of countries, cities, zip codes, other type of lists, and so on.
  • Your website need to look visually pleasing and intuitive for the users. Make the best use of the Bootstrap framework and CSS design.
  • You should use JavaScript for user input validation.
  • You should make use of AJAX for asynchronous server requests.

Project Type 1: Image Sharing Site

Details...

The Media Sharing Site will allow registered users to upload and share images among the different users of the site, in an easy and practical manner. Project Type 1 draws inspiration from famous sites like Imgur and Instagram.

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered user to upload images and add information to the image such as: title, short description, and tags. Users can upload images that are public or private. Private images are only visible to the user that uploads it.
  2. Every image uploaded to the system should have its unique URL. This URL will be used to access the image in an Image Page. The page displaying the image should have the following options for registered users:
    1. Like and Dislike options.
    2. Display the Popularity of the image based on the amount of likes minus the amount of dislikes.
    3. Add to Favorite option.
    4. Display the amount of times the image has been viewed.
    5. A section where all the tags associated with the image are displayed.
    6. A comment section where users can leave comments about the picture.
  3. Non-registered users can see and share all the images. They also can see the comments, tags and popularity of the image.
  4. Your website should have the most popular images of the day on the Landing Page. The metric to select such images is up to you.
  5. The comments section of an image should allow users to reply to the main comments in the section. A main comment should have:
    1. Like and Dislike options.
    2. Reply option.
    3. Number of replies, if more than 0 replies (the replies should be hidden until the user clicks on the number of replies). If there are no replies, do not show this.
    4. Username of the user who make the comment, popularity of the comment (based on likes minus dislikes), and how old the comment is.
    5. Reply comments should have like and dislike options and should be sorted by popularity.
  6. The comment section should allow to sort the main comments by popularity (based on likes minus dislikes), by newest (for latest comments), and by best (based on number of children comments or replies plus popularity).
  7. Your website should show the images uploaded by their user in their Home Page. Each image can briefly display some information about itself (title, date uploaded, popularity, and so on). The image is visible to everyone if it is marked as "public". If marked as "private" the image is visible only to the user that uploaded it (when they visit their own Home Page).
  8. The user that owns the image should be able to delete any comment on the image as well as the image itself. If a main comment is deleted, so are their children (reply comments).
  9. Your website should have a side navigation section with a preview of the most popular images and the most popular tags (based on number of times used on the current day). The side navigation section should be visible everywhere, except in the Landing Page.
  10. Your website should have an image search functionality based on tags.

Project Type 2: Short-Message Posting Site

Details...

The Short-Message Posting Site allows registered users to post short messages with the goal to share an idea, a thought, a link to a news site, and so on. The short messages, depending on the privacy setting, might be public (everyone can see it) or private (only followers can see it). Project 2 draws inspiration from the famous sites Twitter and Facebook.

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to post short messages with a maximum length of 200 characters if it is a text message, or less than 1MB if it is a media message (video or audio). Media messages will be accompanied by a description limited to 25 characters.
  2. Your website should allow registered users to "follow" another registered user. Messages from the followed user will be available to the users that follow the original poster (OP).
  3. Your website should allow a user picture and a username for registered users. Any user can be referenced in a post by using their username with the "@" sign such as @a_user_name. This reference should be a link to the referenced user’s Home Page and the message should appear there.
  4. Your website should display all the user’s short messages in their personal Home Page as well as the short messages posted by other users being followed. Make sure to distinguish messages that have been posted by the user, by other users being followed, and messages in which the user has been referenced (or mentioned).
  5. Each posted message will have:
    1. Name and picture of the user that posted.
    2. The actual message with proper media controls for audio and video messages.
    3. Number of likes and the option to like the message (if you already liked the message, it should show). The number of likes of a message will determine its popularity.
    4. The option to follow the user (if you are already following the user, it should show).
  6. Your website should allow the use of hashtags in both media and text messages (the length of the hashtag will count towards the maximum character limit). The hashtags have the form #a_hashtag. The hashtags when clicked, should take you to all the short messages that contain such hashtag.
  7. Your website should have the most popular messages of the day on the Landing Page. Non-registered users will be able to see messages if they are marked as public and only if they appear in the Landing Page.
  8. The Home Page should show the number of followers the user has and the number of users that they are following.
  9. Your website should have a user search functionality in order to be able to find and follow users.
  10. All the messages should be listed in chronological order.
  11. Your website should suggest following certain users based on geographical proximity or some other criteria. This information among other options (like most popular hashtags of the day, and so on), should be shown as a side navigation section (except in the Landing Page).

Project Type 3: Online Store

Details...

The Online Store allows registered users to buy products using a fake currency called "webcoins" (currency symbol ¤, HTML code ¤). The Online Store will have a main type of product (i.e. books, sport goods, cloth, food, etc) to sell. Project 3 draws inspiration from the famous sites Amazon and Etsy.

In addition to the expected features, the following are specific requirements for this project:

  1. Your website will allow registered users to browse a catalog with a brief variety of products (if selling books for example, you should have categories like Romance, Sci-Fi, Classics, Non-Fiction, etc. with at least 1 product in each category). This mean the design of a catalog where an item being sold should have:
    1. Available number of units in stock.
    2. Price, weight, dimension and some other descriptions for the item.
    3. A picture of the item.
    4. Other information you deem important.
  2. Your website should implement a shopping cart where users can add items that they want to buy. The shopping cart should allow registered users to save its content for later or checkout their items.
  3. Each new registered user will receive a gift card of ¤500 (five hundred webcoins). Each time a user checkout the items in their cart, the amount to be payed will be deducted from the gift card. A user with insufficient funds can’t finish the checkout process.
  4. If a user wants an item quantity that is bigger than the available number of units in stock, deny it.
  5. Items displayed in the Catalog Page should have the options to view it (which will open a Product Page with more descriptions about the item), add to favorite list, and add to cart (which will add 1 unit of the product to the shopping cart). The items should display its name as well as its price, the units available, and the user rating.
  6. The Catalog Page should have a side navigation section with options to filter items by: price, popularity, and product specific filters (such as "book genre" for an online book store, etc.)
  7. The Product Page should have a thorough description of the specific item, option to choose the number of units to be added to the cart, as well as a Product Review section with options for the users to rate the product from 0 (worthless) to 5 (excellent). These ratings will be displayed as part of the product description. The Product Review section will also allow to answer a "would buy again?" question and display the number of users that answered yes and no, respectively.
  8. In your Catalog Page, if there are not units available of a particular product, display it as "sold out" (always display the products).
  9. Your website should have a Landing Page with the options to register and/or login, as well as a brief description of the products you are selling.
  10. The user’s Home Page should have a history of previous purchases, their favorite items list, and the items in the saved cart.
www.000webhost.com