Web Development Assignment 1
Semester 1, 2020 DUE ON: 11:59 PM Wednesday 8 April 2020
Assignment Worth: 15% of total marks
NB: Assignments will be accepted up to five (5) calendar days late, but a penalty of 5% per day (or part of a
day) late will be imposed on the submission.
NB: This is an individual assignment. Students are referred to the school’s policy on plagiarism. A confirmed case will incur zero mark to all the involved students.
Assignment requirement specifications:
The aim of this assignment is to create a diary system for a social networking site. This system will allow users to post their status and save it to a database table. These posted status details can also be retrieved using text matching and all matched status reports can be viewed in the order they are posted.
For this assignment, you will need to create all the appropriate HTML, PHP files and Database tables. For HTML pages, you are free to either use plain HTML+CSS or use CSS frameworks such as Bootstrap. You should save and test all your HTML and PHP files on cmslamp14.aut.ac.nz server in a directory ” /home/
Task 1 – Home Page index.html
This web page contains:
• Your name
• Your student ID
• Your email address
• A statement: “I declare that this assignment is my individual work. I have not worked
collaboratively nor have I copied from any other student’s work or from any other source.”
• A link to the post status into the system (poststatusform.php)
• A link to the status searching process (searchstatusform.php)
• A link to “about.html” page that tells us what you have attempted.
Sample screen shot of the home page:
Status Posting System
Name: John Smith
Student ID: 1234567 Email: 1234567@aut.ac.nz
I declare that this assignment is my individual work. I have not worked collaboratively nor have I copied from any other student’s work or from any other source
Post a new status
Search status About this assignment
Task 2 – Post Status Page poststatusform.php
This web page contains the form that enables a status to be submitted and saved. Step 1. Status data contains:
• Status Code (Text input type. NOT NULL, should be unique e.g. S0001). The code is 5 characters in length. It must start with an uppercase letter “S” followed by 4 numbers.
• Status (Text input type. NOT NULL, e.g. Doing my first assignment). The status can only
contain alphanumeric characters including spaces, comma, period (full stop), exclamation
point and question mark. Other characters or symbols are not allowed.
• Share (Radio button type, include 3 options: Public, Friends and Only Me)
• Date (text/date input type. NOT NULL, should initially contain the current date in
dd/mm/yy or dd/mm/yyyy format e.g. 24/03/2018 or 24/03/2018. This can be edited by the
user. You can use PHP function date() to fetch server time).
• Permission Type (3 checkboxes, Allow Like, Allow Comments, Allow Share)
Step 2. POST method for form submission is used. Step 3. Link to return to the Home page is provided.
Sample screen shot of the status form:
Task 3 – Process Post Status Page poststatusprocess.php
This web page checks the input data, writes the data to a database table and generates the corresponding HTML output in response to the user’s request.
Step 1.
Step 2.
Status Code and Status are mandatory fields. The program should not allow saving of status to the database table if any of these fields are not supplied or not valid (see rule in Task 1 – Step 1), and if needed provide a proper error message to user that includes links to return to the Home page and Post Status page. The date must also be validated to conform to the dd/mm/yy or dd/mm/yyyy format. Furthermore, the Status Code must be checked for its uniqueness within the database table.
A confirmation message should be generated for this entry followed by a link to return to the Home page, once the status is stored successfully in the database,
Task 4 – Search Status Page searchstatusform.html
This web page contains a form that accepts a status search string.
Step 1.
Step 2. Step 3.
The search status page should contain an input text field for typing in a Status (note that it is the text description of the status instead of the status code) for searching the status information which already saved in the database table and a link allow user to post a status.
GET method for form submission is used. Link to return to the Home page is provided.
Sample screen shot of search status page:
2
Task 5 – Search Status Result Page searchstatusprocess.php
This web page checks the status search string, reads the data from the status database table, searches for the occurrence of the status string in each status record and generates the corresponding HTML output in response to the user’s search request.
Step 1.
Step 2. Step 3.
Step 4.
The existence of the status database table are validated, and the status search string should not be empty (note that the input string should be used to match the status column/property instead of the status code column/property). If either validation failed, provide a proper error message to user that includes a link to return to the Home page and Search Status page.
All the status information records are searched based on keyword match.
The details of requested status information should be generated including links to return to the Home page and Search Status page if found. In cases where there are more than one status information located, all matches must be listed.
If there is an error, a proper error message is generated that include links to return to the Home page and Search Status page.
Sample screen shot of status search result information page:
Status Information
Status: Doing my first assignment Status Code: S0001
Share: Public
Date Posted: August 22, 2017 Permission: Allow Like
Search for another status
Return to Home Page
* Multiple search matches must also be displayed
Task 6: About Page about.html
This is a report webpage for presenting what you have done based on the question provided.
Step 1.List your answers in bullet point for each question.
• What special features have you done, or attempted, in creating the site that we should
know about?
• Which parts did you have trouble with?
• What would you like to do better next time?
• What references/sources you have used to help you learn how to create your website?
• What you have learnt along the way?
3
Step 2. Provide a link to return to the Home page.
Submission & Assessment Process:
Create your site structure as described below.
assign1/
index.html poststatusform.php poststatusprocess.php searchstatusform.html searchstatusprocess.php about.html
images/
style.css
style/
You must have this folder – case sensitive! Home page
Post a new status page
Process status data
Search status page
Process status search data
About page
Folder for any images used for page content (optional) CSS style sheet rules for your stylesheet (optional) Folder for any stylesheet images (optional)
Notes:
• PHP files should only be in the base “assign1/” folder – not anywhere else.
• All links to your files should be relative.
o Linksmustnotbeabsolute,astheselinkswillbebrokenwhenfilesaretransferredfor marking.
o Iflinksarebroken,oranassignmentdoesnotrunonthecmslamp14server,theresult will be a fail for this assignment.
Assignment Submission:
The assignment should also be submitted as an individual work using the Assignment 1 link in AUTonline (inside the Assignments area), so that we can check the source code of your assignment (as we cannot get it from a web browser).
Please compress all your html and PHP files as a zip file named “php_assignment_1.zip” to submit via the AUTonline submission link. You may submit more than once.
Notes:
• We only check the submitted source code on Blackboard but do not deploy and run the
code.
• Please remove your database login details from the files before submitting to Blackboard to avoid potential privacy exposure.
* Make sure to test your program on the cmslamp14 server before your submission.
* If your assignment cannot run on cmslamp14, your result will be 0 marks for this assignment.
Marking Scheme: Please see the next page.
4
Provisional Marking Scheme
There are 15 marks for this assignment. The assignment will be marked out of 100.
Task
Mark
Task 1:
Home Page (index.html)
a. Pagecontainedinformationshowninthescreenshot b. Linksworkedusingrelativeaddressing
5
Task 2:
Post Status Page (poststatusform.php)
a. Formcontainedallinformationshowninthescreenshot b. Datefieldcontainedtheserverdate
c. Web page used the POST method
d. Linksworkedusingrelativeaddressing
10
Task 3:
Process Post Status Page (poststatusprocess.php)
a. Databasetableexistcheckedbeforestoring
b. Inputdatavalidated
c. Status code is verified to be unique
d. Appropriate error messages generated if errors occur
e. Linksworkedusingrelativeaddressing
40
Task 4:
Search Status Page (searchstatus.html)
a. Formcontainedinformationsimilartothescreenshot b. WebpageusedtheGETmethod
c. Links worked using relative addressing
5
Task 5:
Search Status Result Page (searchstatusprocess.php)
a. Searchstringanddatabasetableexistencevalidated
b. Searchperformedcorrectlyandmultiplematchesdisplayed c. Appropriate error messages generated if errors occur
d. Linksworkedusingrelativeaddressing
25
Task 6:
About Page (about.html)
a. All questions answered
b. Linksworkedusingrelativeaddressing
5
Overall Quality
a. Userinterfacelayoutimproved b. CSSusedforcoloursandstyles
10
T otal
100
Undesirable Feature
Mark
1. 2.
3. 4.
Source code observes poor or no indentation
Source code has no or useless comments. An example of a bad
comment is “this assigns a value to $a”
Source code contains commented out code or code blocks Application displays debugging or testing messages
–3 –3
–2 –2
T otal
–10
* If your assignment cannot run on cmslamp14, your result will be 0 marks for this assignment.
5