LA TROBE UNIVERSITY

CSE1IIT/CSE4IFU WEB ASSIGNMENT

20% of your IIT/IFU grade.

DUE DATE
3 RD FEBRUARY, THURSDAY, 10 AM, 2021.
Delays caused by computer downtime cannot be accepted as a valid reason for a late submission
without penalty. Students must plan their work to allow for both scheduled and unscheduled
downtime.

COPYING, PLAGIARISM
THIS IS AN INDIVIDUAL ASSIGNMENT. YOU ARE EXPLICITLY INSTRUCTED NOT TO WORK IN
GROUPS.
Plagiarism is the submission of somebody else’s work in a manner that gives the impression that the
work is your own. For individual assignments, plagiarism includes the case where two or more
students work collaboratively on the assignment. The Department of Computer Science and IT treats
plagiarism very seriously. When it is detected, penalties are strictly imposed.

SUBMISSION GUIDELINES
You are required to upload your solutions to the LMS in a zip file.

This ZIP file MUST include all the images, PHP, HTML and CSS files that your website needs to function.

You are NOT permitted to use any sort of automated code generation tools or programs

Your website MUST work on the webprog.cs.latrobe.edu.au web server and display correctly in
Google Chrome
RULES AND REQUIREMENTS

READ CAREFULLY – Marks will be reduced heavily or given 0 for failure to follow

• The site must run correctly on webprog.cs.latrobe.edu.au server

• The site must run correctly in Google Chrome.
• All CSS styles MUST be placed into CSS file. (styles.css) There must be no CSS code in your HTML/PHP
files
• JavaScript is not allowed in this assignment, do not use any JS code. This includes but not limited to:
o <script> tags, and onclick attributes.

• Your site MUST use relative URLs for all resources (including images and hyperlinks). The only
exception to this rule is the hyperlink to the brands website.

• When you submit your assignment please include all the files your site needs to operate (including
the database directory).

• Your code must be HTML5 compliant please use the HTML5 validator (see the end of Lab07 for
instructions)
• The website should have a consistent look and feel. All the pages should have the same
layout and the navigation bar should always be visible to the user.
• The website should be stylized as professionally as possible
• Your website must be secure from SQL Injection attacks.
• Make sure you have read this document and all relevant documentation.
• You are not expected to implement any sort of password authentication system
• You must use the colour scheme assigned to you
• Your code must be indented and easy to read.
• Maximum upload on LMS is 100MB, so please ensure any images you use are not too large.
TASK

You are to create a forum website based on the descriptions below, that allows users to sign up and create
topics and posts on those topics.

An example is shown in the video here:

SET-UP

Create a folder on http://webprog.cs.latrobe.edu.au/ for your assignment.

Download the files on LMS and place in this folder.

"Functions.php" contains useful functions that you will need to complete the assignment.
Some other files have code provided for you.

SQL

Create a database and the three tables using the phpLiteAdmin (inside the database directory) as follows:

Database

Name as 'Forum.db'

Tables

The first table should be named 'User', with attributes as follows:

UserID, Integer, Not Null, Autoincrement, Primary Key
UserName, Text, Not Null
FirstName, Text, Not Null
SurName, Text, Not Null
Tag, Text

The second table should be named 'Topic', with attributes as follows:

TopicID, Integer, Not Null, Autoincrement, Primary Key
UserID, Integer, Not Null
DateTime, DATETIME, Not Null
Topic, Text, Not Null

The third table should be named 'Post', with attributes as follows:

PostID, Integer, Not Null, Autoincrement, Primary Key
UserID, Integer, Not Null
TopicID, Integer, Not Null
DateTime, DATETIME, Not Null
Post, Text, Not Null
Likes, Integer, Not Null, default: 0
CSS – COLOUR SCHEME

Each student will have a different colour scheme, these schemes are provided on LMS.
You must use these colours for the main elements. You may use black and white for borders, effects and text.

HTML, CSS AND PHP – PART 1

For the pages: Forum.php, Homepage.php, SignIn.php, SignUp.php and Topics.php

Create the divs with the appropriate ids "header", "nav", "content" and "footer"

The header should be stylized such that it stands out, contains a different background color, font color, font
and font size (not automatic), using h1 tag and contains "IFU/IIT" and the purpose of the page.
For example:

The footer should be stylized such that it stands out, contains a different background color, font color and font
(not automatic), using h3 tag and contains Full name as it appears in LMS, student number, course (IIT or IFU),
"2021 SUMMER".
For example:

Ensure that your pages work at this point, if they do not, then do not continue.
Marks are not awarded for quantity of work, rather the quality.
HTML, CSS AND PHP – PART 2

The nav bar will contain php, such as to dynamically display either 'sign up and sign in' when no user is logged
in, or 'sign out and the users information' when the user is logged in. A link to the home page and topics page
also need to be included. Stylize the nav bar professionally, and there must be a hover effect.
See example below:

This will be determined using cookies.

You will notice on each content page, that 'getCookieUser' function is called at the start of the webpage. This
gets the cookie named 'CookieUser'. 'CookieUser' stores the username of the currently logged in user. Once
retrieved it is stored in the php variable $cookieUser. If no user is logged in, then $cookieUser stores "" (see
Functions.php for implementation).

How to implement

if cookieUser is "" then echo the html to show the links to sign up (SignUp.php) and sign in (SignIn.php)
Else echo the html to show the link to sign out (LogOutUser.php) and the cookieUser.

Ensure that your pages work at this point, if they do not, then do not continue.
Marks are not awarded for quantity of work, rather the quality.
HTML, CSS AND PHP – PART 3

Create the html form for SignIn.php such that it asks for the username, using "POST" and directs to
"LogInUser.php". Stylize professionally. An example is shown below:

Create the html form for SignUp.php such that it asks for the username, firstname, surname and short tag
using "POST" and directs to "AddUser.php". Stylize professionally. An example is shown below:

Add some php code before the html form, that echos $cookieMessage.
(This is to display any error messages we will implement later in this document)
HTML, CSS AND PHP – PART 4

(Pay attention in this part, most of the code is given to help you with later sections)
In AddUser.php:

Check if the data from the POST was provided using 'isset', if not echo an error message (This does not need to
be formatted).

Else

Trim all of the inputs from the POST and store in php variables, one example is shown below

Prepare, bind and execute the SQL command as shown below:

If there is no match, then you need to prepare, bind and execute an SQL statement to insert the user.
Note that we do not add the UserID as it autoincrements.
Add a cookie message stating the user has been added, and redirect to the homepage.

Ensure that you can add a user, check on the admin portal, if you cannot do not continue.
Marks are not awarded for quantity of work, rather the quality.
HTML, CSS AND PHP – PART 5

In HomePage.php:

Add some php code at the start of the content nav, that echos $cookieMessage.
When adding a user, you should see your cookie message.

Add some welcome information with an image, make the text and image unique (i.e. do not copy what I or
other students have)

Please use images from: https://unsplash.com/

See license details here: https://unsplash.com/license

HTML, CSS AND PHP – PART 6

In LogInUser.php:

Check if the data from the POST was provided using 'isset', if not echo an error message (This does not need to
be formatted) (Note that only the username is passed this time).

Connect to database using the connectToDatabase() function

Trim the input from the POST and store in a php variable

Prepare, bind and execute the SQL command to check if username exists
(use 'COLLATE NOCASE' as done before so that it is a case insensitive search)

If there is a match, this means that a user with this username exists and the users can log in.
Set the username using the function "setCookieUser()"
Set the cookie message to welcome back the user
redirect back to the homepage

If there is no match, then

Set the cookie message to inform the user that the username does not exist
redirect back to the sign in page

Check that this works, you should see the nav bar change after logging in , if you cannot do not continue.
Marks are not awarded for quantity of work, rather the quality.
HTML, CSS AND PHP – PART 7

In Topics.php:

Create a heading "Topics" or similar

Create a table (and stylize) with header row containing the columns as shown below:

Inside the table you will need to add php code to add the remaining rows dynamically.

Connect to the database

Count the number of topics in the database by using the following code (this will be used for
one of the features covered later)

Prepare, bind and execute the following SQL statement.

(We order by descending TopicID so the last one added appears at the top)

For each row in the database, get the username, datetime and topic
Then create the html to display the row in the table (note that the topic needs to be a link as shown)

Under the table add the heading "Create a new topic"

Add the php code to display the cookie message below this.
Then, if the cookie user is "" then display "You must be logged in to create a topic"
Else display a form using POST that directs to "AddTopic.php", the form should look like below
HTML, CSS AND PHP – PART 8

In AddTopic.php:

Check if the data from the POST was provided using 'isset', if not echo an error message (This does
not need to be formatted) (Note that only the username is passed this time).

Trim the input from the POST and store in a php variable

Prepare, bind and execute the SQL command to check if topic already exists
(use 'COLLATE NOCASE' as done before so that it is a case insensitive search)

If the topic already exists then set the cookie message to indicate that the topic already exists and
redirect to the Topics.php page

Else

Get the id of the user.

Set the datetime to Melbourne time using the following code:

Insert the topic into the database and then redirect back to Topics.php

Check that this works, you should be able to add Topics.

Marks are not awarded for quantity of work, rather the quality.
HTML, CSS AND PHP – PART 9

In Forum.php:

GET the topic named passed, and display this as the heading.

Create a table (and stylize) with header row containing the columns as shown below:

Connect to the database

Get the topicID based on the topic and count the number of posts within this topic

Get the posts for the topic using the following SQL statement:

Add the rows to the table:

Under the table add the heading "Create a new topic"
Add the php code to display the cookie message below this.
Then, if the cookie user is "" then display "You must be logged in to create a topic"
Else display a form using POST that directs as shown below:

the form should look like below

HTML, CSS AND PHP – PART 10

In AddPost.php:

Connect to the database

Convert and trim all the inputs

Get the userID and topicID (You have done both of these before)

Insert the post into the database and redirect back to the forum.

Check that this works, you should be able to add Posts.

Marks are not awarded for quantity of work, rather the quality.
FEATURES

This section will now allow you to demonstrate your technical employability skills by implementing
additional features. These features are all shown on the demonstration video. You will need to work out how
to do these yourself (you can ask for help from your lecturer).

Feature 1. Likes.

Add an emoji next to the number of likes (only when logged in), if the user presses the emoji
the number of likes should increase (stored in database)

Feature 2. Most popular post

Based on the number of likes, the most popular post should be shown on the homepage

Feature 3. Limit number of topics and posts

Only show a max of 5 topics and a max of 10 posts at one time. The user should be able to
click next page to see the remaining. (Hint: Watch the url when watching the video) (Hint 2:
Limit and Offset)

Feature 4. Sort by name or date created

Clicking on 'Topic Name' sorts the topics by name, clicking on 'Date Created' sorts the topics
by date (default) (Hint: Watch the url when watching the video)

Feature 5. Implement LogOutUser.php

Delete the cookieUser. This should be simple and you do not need to connect to the
database

TESTING

To show that your website works and that you can interact with it you must:

Add 10 users

Have 20 topics (2 per user)

Have 100 posts (10 per user)

Have greater than 100 likes total (randomly assigned)

MARKING GUIDE

Topic Task Mark

User table 2
SQL Set-Up Topic table 2
Post table 2
Use of colour, margins, padding and borders 6
CSS (0 marks if Hover on nav 1
incorrect colour Userform styled 4
scheme) Tables styled 4
Fonts and font sizes 2
Headings 2
Footer 1
Navigation bar (dynamic) 5
SignIn and SignUp pages 4
AddUser 4
Base Webpage HomePage 4
LogInUser 3
Topics 4
AddTopics 4
Forum 4
AddPost 4
Likes 8
Most popular post 8
Features Limit number of topics and posts 8
Sort by name or date created 8
LogOutUser 2
Users 1
Topics 1
Testing
Posts 1
Likes 1