Developing an Online Real-Time Friends Connection System Using PHP, MySQL and HTML/CSS

The following items must be submitted online to platform and copied to the university web server by the submission date for assessment:-

 

1.Your solution must be installed onto your web space on the university server such that the system can be tested from anywhere. Create an appropriate URL such as http://yourusername.f.k.ac.can/clientserver/

 

2.A compressed .zip folder must be submitted to platform in the Assessments area containing the complete folders and all files associated with your solution to the Assessment task – there is a typical submission limit of 50MB (The functionality will be assessed in one-to-one demonstration of your solution which will be set after the submission date).

 

3.A Word or .pdf document which contains a copy of the Assessment Criteria and Marking Scheme grid with your self-assessment of your performance for each requirement – use the highlighter tool in Word to highlight what you have completed. This should be included in your platform submission and on your live website with a suitable URL on the website e.g. /clientserver/AssessmentCriteria.docx

Assessment task details and instructions

Your task overall for the module is to develop an online real-time friends connection system (similar to certain aspects of whatsapp, facebook and FindMy on iPone) using PHP, MySQL and HTML/CSS. The work will be split over both Trimester 1 and 2. The first trimester focuses on core architecture and data storage. The second trimester will add real-time mapping and user tracking to your application so you can track the location of your accepted friends using the system.

Noteworthy details to gain high marks in Trimester 1 include:

The core PHP architecture needs to follow an Object Oriented Model-View-Controller (MVC) Design Pattern approach. This is covered in the lectures and you practice it by following the workshop material. You are not allowed to use jQuery or a high level PHP framework. You need to use and adapt the MVC that you use in the workshops and this is very important!

 

The system must be live and running on the university web and database servers. Typically the same system as used in the L4 Web Dev & HCI module.

 

The website must allow users to sign up and login. As a minimum for users each record needs to include: User ID and user details. Information stored about users must include their email address, a real name, a username, and a password. All passwords must be appropriately encrypted in the database. Their record needs to contain a profile image that is uploaded when they sign up (or later). Think of this as similar to making an account on most web based forums.

Noteworthy Details to Gain High Marks in Trimester 1 Include

There will be a need to store user location data (latitude/longitude) for the work in Trimester 2 so think about how you will include this information in a user record and store dummy information for now.

 

The website’s main page should provide a listing of all registered users based on the records data stored in a database and other appropriate information. The listing should be displayed using HTML with CSS (the use of Bootstrap or Materialize frameworks is encouraged). You are not allowed to use jQuery because 1) you won’t need to for what is required and 2) in Trimester 2 you will need to develop raw JavaScript in your solution and you are marked on your ability to develop and implement well designed JavaScript code. 

 

Anonymous (not logged in) website visitors may search for users and see some results but not be able to get any further detailed information about a user without being logged in themselves. It is suggested that anonymous users can just see the username or real name and single profile image.

 

Authenticated website users should be able to search for users (by name and other metadata) and the search should be sophisticated enough to narrow down results.

 

Authenticated website users should be able to request a friendship connection once finding a user – thus building a personal “friends list”. A user who has been requested to be a friend must agree/confirm and the web site code must update a “friends list” in the database. You will need to think about multiple database tables and how foreign keys are used to link together users and their friends in the most effective way as well as the process of displaying friendship requests and confirming them. You will need to display the friends of a user.

 

Your site must be designed and built to handle 1000s of users and friends lists and you need to demonstrate its ability by creating a large test data set (1000s of users and their records). You can generate test/mock data with a tool like www.mockaroo.com 

 

You must consider security and performance at every step and design the user experience for multiple platforms and abilities.  For example, security should consider filtering malicious code from any text that users can enter, including client script injection and SQL injection (details on Blackboard). Performance should minimise page weight including media associated with an item description (e.g. processing uploaded images to reduce their dimensions and file size).

 

You are free to use phpMyAdmin or MySQL Workbench (or any suitable tool) to administer the database for example creating and populating the MySQL tables or handling product and stock levels. You are not advised to store your database locally.

 

Assignment 2 of this module (in Trimester 2 – January to May) will require you to focus on some aspects of your Assignment 1 system and refining them by making use of more advanced dynamic client server technologies to improve the user experience (UX) e.g. dynamic searches and real-time interaction, geolocation, imaging as appropriate all using AJAX techniques – details to follow.

On successful completion of this assessment, you will be able to:

Knowledge and Understanding
A1 - assess a range of server-side programming technologies and the programming languages that support these technologies, and discuss the circumstances when each is used;
A2 - assess a range of client-side programming technologies and the programming languages that support these technologies, and discuss the circumstances when each is used;
Practical, Professional or Subject Specific Skills
B1 - design, create, test and demonstrate software implementing a data-driven web application, programming in industry standard scripting languages and connecting to industry standard database packages;
B2 - identify security risks in a web application, and follow good practice guidelines to minimise these.
Transferable Skills and other Attributes 
B3 - work within legal constraints, such as data protection, accessibility and copyright.
Module Aims 
1.to provide the skills required to develop modern data-driven interactive web applications
2.to appreciate the issues involved with combining client-side and server-side components
3.to use industry-standard software development tools and techniques.