CSE4IFU-S2, 2024

Web Development Assignment

20% of your overall grade

DUE DATE

Wednesday, 30th October 2024, 11:59 pm via LMS

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.

Late submissions will incur a 5% penalty for each day that it is late.

Late submissions will NOT be accepted after 5 days past the due date.

Since the assignment deadline is already extended to Week 13 instead of Week 12, extension will only be
granted to special consideration requests for compelling reasons.

ASSIGNMENT MARKING SESSION: FACE TO FACE IN WEEK 1 3

It is mandatory for each student to attend their allocated lab face to face in Week 13, Thursday 31st
October 9:00-11:00 am and 11:00-1:00 pm for their assignment to be marked. Please attend the lab that
you were allocated to in allocate plus. Students are free to leave once their assignment is marked. If you
cannot attend Week 13 lab for any compelling reason, please email me at r.kalaria@latrobe.edu.au before
Tuesday October 29th to make alternate arrangement.

COPYING, PLAGIARISM

This is an individual assignment. You are explicitly instructed not to work in groups.

DO NOT COPY & PASTE ANY CODE FROM WEBSITES or GENERATIVE AI.

Plagiarism is the submission of somebody else’s work in a manner that gives the impression that the work is
your own. 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.

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

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 can 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 (e.g. 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
<script> tags, and onclick attributes.
• 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. Here is the reference link to some of
the css color palettes. You can choose a color palette from above link or choose your own color
scheme as per your liking.
• Your website must be secure from SQL Injection attacks.
• You are not expected to implement any sort of password authentication system for this assignment.
• 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.
• Make sure you have read this document and all relevant documentation for this assignment.

TASK
You are to create a website blog based on the descriptions below, that allows users to sign up, sign in, and
create blog headings and posts for those headings.

SET-UP

Create a folder on latcs5 server for your assignment.

Download the provided files on LMS and place in this folder.

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

SQL

Create a database and the three tables using the phpLiteAdmin (inside the database directory) as follows:
Name the database as ‘Blog.db’. Create three tables for this database, User, Headline, and BlogPost as
follows:

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

LastName, Text, Not Null

The second table should be named ‘Headline’, with attributes as follows:

HeadlineID, Integer, Not Null, Autoincrement, Primary Key

UserID, Integer, Not Null

DateTime, DATETIME, Not Null

Headline, Text, Not Null

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

BlogPostID, Integer, Not Null, Autoincrement, Primary Key

UserID, Integer, Not Null

HeadlineID, Integer, Not Null

DateTime, DATETIME, Not Null Post, Text, Not Null

PART 1: HTML, CSS AND PHP

For the pages: Blog.php, Homepage.php, SignIn.php, SignUp.php, Headlines.php, and About.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 h3 tag and contains "CSE4IFU" and the purpose of the page. For
example: “CSE4IFU-Homepage” or something similar.

The footer should be stylized such that it stands out, contains a different background color, font color and
font (not automatic), using h4 tag and contains full name as it appears in LMS, student number and
"CSE4IFU- 2024, Sem 2". For example: “Rudri Kalaria – 1234567 – CSE4IFU Sem 2, 2024”.

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.

PART 2: HTML, CSS AND PHP

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 user’s information' when the user is logged in. A link to the home page, headlines and
about me pages also needs to be included. Stylize the nav bar professionally, and there must be a hover effect.

User sign in/sign out 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.

PART 3: HTML, CSS AND PHP

Create the html form for SignIn.php such that it asks for the username, using "POST" and directs to
"LogInUser.php" upon clicking submit/login/sign in button. If user enters incorrect username or a username
that doesn’t exist yet, it should print an error message such as “The username ‘xyz’ does not exist” or
something similar.

Create the html form for SignUp.php such that it asks for the username, first name, and last name using
"POST" and directs to "AddUser.php" upon clicking submit/sign up/register button. Add some php code before
the html form, that echo’s $cookieMessage. (This is to display any error messages we will implement later in
this document)

PART 4: HTML, CSS AND PHP

(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 such as “UserName
not provided” (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 the username exists already, set appropriate cookie/error message and redirect to SignUp.php asking user
to sign up with different username.
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.

PART 5: HTML, CSS AND PHP

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 “The username ______ has been added. Please sign in to start posting” or
something similar.

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

You can use images from: https://unsplash.com/ or any other copyright-free images
See license details here: https://unsplash.com/license

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.

PART 6: HTML, CSS AND PHP

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.
PART 7: HTML, CSS AND PHP

In Headlines.php:

Create a heading “Headlines” or something similar. Create a table (and stylize) with header row containing
the columns as shown below:

Created by: Headline Name: Date created:

rkalaria Tech you can’t live without 2024/10/02 18:30:32

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

Connect to the database

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

$statement = $dbh->prepare('SELECT COUNT(HeadlineID) FROM Headline;');

$statement -> execute();

$HeadlineCount = $statement -> fetchColumn();

Prepare, bind and execute the following SQL statement.

SELECT * FROM Headline INNER JOIN User ON Headline.UserID=User.UserID ORDER BY Headline.Headline

desc

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

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

while($row = $statement ->fetch(PDO::FETCH_ASSOC)){

$userName = $row['UserName'];

$dateTime = $row['DateTime'];

$headline = $row['Headline'];

echo "<tr>";

echo "<td> $userName </td>";

echo "<td><a href=\"Blog.php?Headline=$headline\">$headline</a></td>";

echo "<td>$dateTime</td>";
 echo "</tr>";

Under the table add the form for "Create a new heading" field.
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 heading"
Else display a form using POST that directs to "AddHeading.php".

PART 8: HTML, CSS AND PHP

In AddHeadline.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 headline already exists (use 'COLLATE NOCASE' as
done before so that it is a case insensitive search)

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

Else
Get the id of the user.

Set the datetime to Melbourne time using the following code:

Insert the headline into the database and then redirect back to Headlines.php

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.

PART 9: HTML, CSS AND PHP

In Blog.php:

GET the headline name passed, and display this as the heading.

if(isset($_GET['Headline'])){

$thisHeadline = $_GET['Headline'];

else{
 redirect("Headlines.php");

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

User: Post: Date:

rkalaria Tech you can’t live 2024/10/02 18:30:32

without

Connect to the database. Get the headlineID based on the headline and count the number of posts within
this headline. Get the posts for the headline using the SQL statement. Add the rows to the table.

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

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 post" Else display a form using
POST that directs to AddBlogPost.php?Headline=$thisHeadline

PART 10: HTML, CSS AND PHP

In AddBlogPost.php:

Connect to the database. Convert and trim all the inputs.

$BlogPost = trim($_Post['NewBlogPost']);

$Headline = trim($_GET['Headline']);

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

Insert the blog post into the database and redirect back to the Blog.php.

$statement = $dbh->prepare('INSERT INTO BlogPost(UserID, BlogPost, DateTime, HeadlineID) VALUES

(?,?,?,?) ;');

….

redirect("Blog.php?Headline=$Headline");

Finally, In About.php - Add some content in About.php page, this content should be related to blog theme
and/or about the individual student creating this blog website.

PART 11: FEATURES

This section will now allow you to demonstrate your technical employability skills by implementing
additional features. You will need to work out how to do these yourself (you can ask for help from your
tutor/lecturer).
Feature 1. Limit number of headlines and blog posts

Only show a max of 5 headlines and a max of 10 posts at one time. The user should be able to click next page
to see the remaining.

Feature 2. Sort by name or date created

Clicking on 'Headline Name’ sorts the headlines by name, clicking on 'Date Created' sorts the headlines by
date (default)

Feature 3. Implement LogOutUser.php

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

PART 12: TESTING

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

Add 10 users

Have 20 headlines (2 per user)

Have 50 posts (5 per user/headline)