Web Languages and Technologies

LTW Project

Project description for the 2018 edition of the Web Languages and Technologies course.

Objective

Create a discussion website where users can post stories (that may contain links to other sites) and comment on those same stories. Users should also be able to vote up or down on stories and comments. To create this application, students should:

• Create a sqlite database where data about users and to-do lists is stored.
• Create documents using HTML and CSS that represent the web pages of the application.
• Use PHP to generate those web pages after retrieving/changing data from the database.
• Use Javascript to enhance the user experience (for example using Ajax).

Work groups

• This project will be completed by students in groups of three (except in cases where the number of students is not a multiple of three).
• Students should contact their practical class teachers, either in class or by mail, to establish these work groups.
• The list of groups can be consulted here.

Requirements

The minimum expected requirements are the following:

• All users should be able to:
  • Register a new account.
  • Login and logout.
  • Edit their profile.
  • Add a new story. Each story should have a title and some text.
  • View a list of the most recent stories.
  • Add a comment to a story.
  • View a story in detail with all comments.
  • Vote on a story or comment (up or down; only one vote per user and story/comment).

Students should also make sure that:

• The following technologies are all used: HTML, CSS, PHP, Javascript, Ajax/JSON, PDO/SQL (using sqlite).
• The web site should be as secure as possible.
• Code should be organized and consistent.
• Frameworks are not allowed.
• Small helper libraries (e.g. displaying a gallery of pictures) might be allowed (talk with your practical class teacher).

Some suggested extra requirements. Extra requirements are a way of making sure each project is unique. You do not have to implement all of these:

• Multilevel Comments: Comments can be replies to other comments (2 levels or infinite levels).
• Channels: The site is divided into channels. Stories can be posted in a specific channel. Users can create and subscribe to channels. Each channel should have a special place where users can see stories published on those channels. A special place where user can see stories belonging to channels they subscribed to should be available.
• Sorting: Stories can be sorted in many different ways (most voted up, more recent, more comments, …).
• Profiles: User profiles have a list of all stories and comments posted by them.
• Points: Each time a story or comment from a user is voted up, the user gets some points; and when they are voted down they lose points.
• References: Stories and comments can refer to users and channels using some special notation. These should automatically become links to the referred user profile or channel.
• Search: Users can search for channels, stories and comments.
• API: A REST API that allows bots or other apps to use the website.
• Anything else you can think of…

Work Plan

This is a proposed plan to guide your work. No deliverables are expected or will be evaluated at these dates.

• Week 8: - Mockups and navigation diagrams for the main pages, first draft of the database design.
• Week 9: - Finalize database script and create database. Partial implementation of some main pages and first CSS version.
• Week 10: - All main pages implemented. Start working on secondary features.
• Week 11: - Continue working on secondary features. Start working on Javascript and Ajax.
• Week 12: - Finish secondary features. Main focus on security aspects.
• Week 13: - REST API or other secondary features. Testing and code cleanup.
• Week 14: - Delivery and presentation.

We recommend that students adopt an agile methodology. Don’t start by planning every little detail right from the start as you run the risk of ending up with a great plan but a poor implementation; but be aware of code organization and quality from the beginning.

Evaluation

Evaluation will be done on the following topics:

• Complexity (implemented features)
• Security (XSS, CSRF, injection, password storage, …)
• Technology (correct usage of HTML, CSS, Javascript, Ajax, No frameworks, …)
• Quality (code quality, file organization, consistency, …)
• User Interface (usability, consistency, …)

Delivery

• Presentation: Practical classes on the week of 17th to 21st of December.
• Delivery: Until the beginning of the class where you are presenting (code, SQL script and README).
• Instructions