COMPX222-20Z

Make-up Assignment Due date

Weighting


Web Development

A database driven website 6pm, Friday 25h September 2020

50% of make-up mark


SHAPE \* MERGEFORMAT


The assignments are individual work. You may be asked to explain the code and document that you submit.


Overview


You are given the stub of a web application (see make-up-assignment.zip) that shows information about teams and players of a game, as stored in a MySQL database. The game is left to your imagination, it could be a sport like basketball, football, volleyball, … or a board game, a card game, a video game, or any game you like as long as it involves teams of players, that is up to you – but you are advised to pick one, so you can use that information later when styling the website (see "Styling"). All the website must be in English.


Then you need to carefully follow all the instructions written here (see "Instructions") that will ask you to expand and improve the web application, adding functionalities, styling it and then improving its security.

You will need to also make and submit a PDF document describing your work as required by the instructions: make sure you write the document at the same time as you write the code and not only at the end, and that you include all the information as required in the instructions. The document must be in English.


As written before, the assignment is individual work, you should not copy any part of the document from other students and you should not share your document with others. The document should be a PDF named “Report- 318XXXXX.pdf” where 318XXXXX is your student ID. Your submission should include the document in the root folder of the application (that is, the main folder, where the PHP files are).


Instructions


1- Setup

• Make sure you have XAMPP installed and running correctly (for information on XAMPP see the instructions on Blackboard: Week 8 –


Install and configure XAMPP). For any issue write an email to [email protected] .

•  Create the document where you will write all your development process. Put your Student ID and your name in Pinyin on top (example: 3180000 Zhang San). Give it the title "Make-up assignment report". Then start section 1, titled "1- Setup". Save the document.

•  Open the make-up-assignment.zip folder and move the whole "make-up- assignment" folder inside the "htdocs" folder of your XAMPP installation.

•  Then open PHPMyAdmin and create a database called "make-up- assignment-318XXXXX" where 318XXXXX is your student ID. Import the database data from the file "make-up-assignment.sql" inside the "sql" folder of the application. You should now have 3 tables named "players", "teams" and "users".

•  Open the "db.php" file with your editor (I recommend Brackets) and change the line with $db_name = "make-up-assignment-318XXXXX"; to use your database name instead of make-up-assignment-318XXXXX. If you did the previous step correctly you only need to change 318XXXXX to your own student ID. [Notice: If you have changed the default username and password of MySQL in your XAMPP installation you will also need to change the $db_username and $db_password variables]

•  Open the website home page from your browser: it should be at http://localhost/make-up-assignment/home.php if you use Windows or http://localhost:8080/make-up-assignment/home.php on a Mac. You should see a simple web page with no styling and information about a team. If you see errors check again that you have followed the previous instructions, in particular creating the database with the right name, importing its data and changing the db.php file. You should also see the message "You have not logged in". If instead you see "Welcome," click on the log out link to be logged out and come back to the homepage.

•  Go back to the document, in section 1-Setup. Write down the answers to these points:

o Look at the homepage. What information is shown here? Where is the team information coming from?

o Go to PHPMyAdmin and insert a new row in the table "teams"; you must choose a name, and then two numbers for wins and losses (they cannot be empty), but leave the "id" field empty so the


database will automatically generate one. Then reload the homepage. What has changed? Why?

o  Now look at the code of home.php in your editor. Some code in here will make the page show different things for logged in users, what lines are responsible for this? And what will change exactly when a user is logged in?

o  Now look at the code used in "login.php", "processLogin.php" and "logout.php". This is code for cookie-based authentication with user information stored in the database, as shown in lectures 10D and then 14A. Explain briefly what this code does and what cookies it uses. Also, looking at the code and database, what table contains the user information? How many users are now in the database? What is their username and password?

o  Using PHPMyAdmin, add a new user to the database. Write down what you did (and their username and password) in the document.

o  Use the username and password from the previous point to log in and then click on "Edit" for team "Dragons". Describe what you see here. Is this the information on all teams or just one? What is the full URL of this page as you have opened it? Is there any GET variable you are providing? What is the relation between the GET variable and the team that is being displayed in here?

o  Look at the code of "team.php" in your editor. What happens when a user that is not logged in tries to open this page? What lines of code are responsible for this? And what happens when a user tries to open this page without a GET variable? What lines of code are responsible for that?

o  What SQL queries are being run in this page? Explain them in the document.


2- First changes (HTML and CSS)

• In the document, create a new section titled "2- First changes (HTML and CSS)". The goal of this part is to have you start making changes to the HTML (in the PHP files) and CSS of the web application.

• Using your editor, change all the footers of all visible PHP pages (home, login, logout, team) so instead of STUDENT … it has your student ID and full name in Pinyin (example: instead of ©2020


COMPX222 - STUDENT ... the footer becomes ©2020 COMPX222 - 3180000 Zhang San).

• Create a new CSS file called "style.css" and save it in the "css" folder. Add links to this CSS file in all the visible PHP pages (home, login, logout, team). Add CSS rules to "style.css" so the "main" element has a maximum width of 1024 px and is horizontally centred in the body of the page. Add also a background to the body – but not to the main element - either an image of your choice (that you must place in the "img" folder) or a simple colour (or even a gradient if you want). Try picking something appropriate for the website. Add background colours to the header and footer too, and if appropriate change the colours of the fonts there too. Finally, add CSS rules so that the links with class "button" look like buttons (look at the exercises in Week 2 for examples of how to do it or this link for more references https://css-tricks.com/css-basics-styling-links-like-boss/#links-as- buttons )

• Reload the pages in your browser to make sure you have achieved what you want and then write in the document the explanation of all the CSS rules you wrote and the choices you made for colours or background images.

• Open the "home.php" file in your editor and change it so the information about being logged in/logged out is contained in a "div" element. Then use CSS to give this div a border and a shadow, and make it float to the right (still inside the "main" element). Describe and explain what you did in the document.


3 – Adding new players


• In the document, create a new section titled "3- Adding new players". This part is about creating a form that will let users add a new player to a team.

• You might have noticed that the "Add new player" button in "team.php" does not work. It links to a page that doesn't exist. So, create a "playerAdd.php" page and give it a similar structure to the others, with header, main and footer. Don't forget the CSS link to "main.css".


• In the main element, put a form to add a new player. What elements do you need? Look at the table in the database and remember that "id"


is automatically given by the database (since it is labelled as AUTO_INCREMENT). Explain what you did in the document.

•  The form should send data to a "playerInsert.php" script that will do the actual query to insert a new row in the 'players' table, so the form 'action' will be "playerInsert.php". But will it use GET or POST method? Explain your choice in the document. Look at lecture 13D for examples of how to make this forms to insert data.

•  Write the "playerInsert.php" script (again, look at the examples in lecture 13D for help!). This script should receive the form data and use it to make an INSERT query into the 'player' table. If the query is successful the page should show a message and a link back to the team page. Explain the code you wrote in the document.


•  In your first writing of "playerAdd.php" you might have included the team id as a regular (i.e. type 'text' or 'number') input. However, this is not good because we were viewing the page of a specific team, so the form should let us add a player to that team, not to other teams. But if you look at the link for the form you should notice that we already are passing the team ID as a GET variable (called teamId). So, now change the input for the team into a type='hidden' and use the value from the GET variable so that the user does not need to input that. Write down what you did in the document.

•  Finally, add validation with JS to the form so that the age must be a number between 14 and 99 and the name must be made only by letters (uppercase or lowercase) and spaces - hint: use regular expressions. If the input does not match those criteria a helpful error message should be shown on the form but the form should not be submitted. Look at the examples of lectures 6C and 6E for advice on how to do it. The JS code should go in a separate file called "validation.js" inside the "js" folder. Explain your code in the document.


4 – Styling


• In the document, create a new section titled "4- Styling". This part is about improving the look and design of your website.

• For this part, it is useful to decide what game is this website about. So, pick one if you haven't done it before and write it down in your document.


• Then look at the design of your website and pick appropriate colours, fonts and layout for the pages. You don't have to make a responsive design but it is a good idea to have some fluid (%) measures, so you can have a good appearance on standard desktop sizes (you can assume the width of screens go from 1280 to 1920 px). Describe your choices in the document. Make sure you are consistent: you should make design choices for the whole website, not different choices for different pages; from the design it should be clear that all the pages are part of one website. You can add a few images if you want – but make sure you write down their source in the document (example: The basketball image in home page is from the website "example.com" at

http://www.example.com/images/basketball.jpg) .

• Write the CSS to implement the design you have decided. You can make changes to the HTML of the pages if you need to. If you are adding images make sure to put them in "img" folder and that their name is all in ASCII characters (No Chinese characters). Describe and explain in the document all the code you write.


5 - Web Security


• In the document, create a new section titled "5- Web Security". This part is about improving the security of your application.

• You should have noticed that the authentication is based on cookies. This is not good from a security perspective. Change it to use PHP sessions. In the document, explain what changes you made.

• Passwords are written in plain text in the database. This is also a security problem for a web application. Use password hashing to protect the passwords in the database – refer to lecture 14C for explanations and examples. In the document, explain the changes you made.

• Some of the queries made in the application are vulnerable to SQL injection. Exactly what queries are vulnerable? Write them down and explain why they are not secure in the document.

• Change the vulnerable queries; use parametrised queries to protect them from SQL injection. In the document, explain what changes you made. You can look at lectures 14D and 14E for help on how to do it.


6 – Reflection


• In the document, create a new section titled "6- Reflection". This part is about reflecting on your work for this assignment.


• Write down a brief reflection on your work for this assignment. In particular, you should look at your work and write what you think you did well, what you think you didn't so well, what have you learnt from making this assignment and what you will do better next time you make a web application.


SHAPE \* MERGEFORMAT



All of your material for this assignment must be submitted electronically using Blackboard.

Besides the website files, you must also include a working export of your 3 database tables as one file named "my-database.sql", with the information of all 3 tables – you can use phpMyAdmin export functionality to create them from your database.

You need also to include the document that describes the development of your application as explained in the instructions above.

Create a ZIP (NOT RAR!!!) archive of the website main folder and rename the file in the form 318XXXX-SurnameName-make-up-assignment.zip where 318XXXX is your student ID (example 3180000-ZhangSan-make-up- assignment.zip).


Submit this ZIP archive on Blackboard. On the course page you will find a section ‘Make-up assessment’ with a link entitled 'Make-up Assignment Submission' (or similar). Follow the link and upload your ZIP file. No other mechanism for submission will be accepted.


NOTE: your site should work 'as is' when unzipped from your ZIP archive, without any modification, after having imported the .sql database. You should check that this is the case by unzipping your archive and testing the site yourself


If you have any issue or question please write an email to [email protected] .


Marking


Criteria

Weighting

Section 1 "Setup" – document

15%

Section 2 "First changes" – document and code

20%

Section 3 "Adding new players" – document and code

20%

Section 4 "Styling" – document and code

20%

Section 5 "Web Security" – document and code

20%

Section 6 "Reflection" – document

5%


Penalties will be applied in case of missing requirements, document parts or functionalities for the pages.


Late Submission Policy

Up to 2 days: final grade is reduced by 25% 2-5 days: final grade is reduced by 50%

Late by more than 5 days: final grade is zero