Great Deal! Get Instant $10 FREE in Account on First Order + 10% Cashback on Every Order Order Now

CRICOS Provider No. 00103D Page 1 of 5 ITECH3108 Dynamic Web Programming Assignment 2 - Tattoo Share "It's like Yik Yak, but for opinions about Tattoos" Overview This is an individual assignment in...

1 answer below »
CRICOS Provider No. 00103D Page 1 of 5
ITECH3108 Dynamic Web Programming
Assignment 2 - Tattoo Share
"It's like Yik Yak, but for opinions about Tattoos"
Overview
This is an individual assignment in which you will explore the use of data interchange between web servers
and
owsers, dynamic construction of page content, and API design, using PHP, JavaScript, and JSON.
Important: This assignment specification is generated just for you. Do not distribute this specification.
Timelines and Expectations
Percentage value of task: 20%
Due: Refer to Course Description
Learning Outcomes Assessed
The following course learning outcomes are assessed by completing this assessment:
K2. Contrast the capabilities and limitations of client-side and server-side web code
K3. Detect opportunities for increasing security and privacy of web applications
S1. Develop client/server web applications using client-side and server-side code
S2. Connect to and manipulate a database management system programmatically using server-side
code
S3. Design and implement a RESTful web application programming interface (API)
S4. Implement a client-side web application which uses a client-side programming language to access a
web API
A1. Design, develop, test, and debug client/server web applications to provided specifications
Assessment Details
Introduction
Tattoo Share is a single-page web app that allows users to post their opinions about tattoos online, and
eply to other people's opinions.
Users can post new opinions, which include some review text and, optionally, their name. Opinions
submitted without a name are labelled "anonymous" and should have distinct formatting.
Users can additionally "like" other opinion posts.
Database
A simple database with one table is sufficient to model the database requirements for this assignment,
however you may if you wish extend and/or normalize this database.
The database has the following structure:
TattooPost ( id, name, text, post_date, likes, reply_to )
CRICOS Provider No. 00103D Page 2 of 5
TattooPost
idPK
name
text
post_date
likes
eply_toFK
Each record in the TattooPost table represents a single opinion post.
The post_date field should be a MySQL TIMESTAMP field, and contains the date and time that the post was
created. You may achieve this using the DEFAULT CURRENT_TIMESTAMP declaration in your CREATE
TABLE statement.
The likes field is an integer value indicating how many people have "liked" the opinion.
The reply_to field is a nullable foreign key, which indicates which post, if any, each post is a reply to. A
NULL reply_to indicates that the post is not a reply.
The assignment tasks are closely associated with the lab work of topics 7 to 10. Code and examples from
lectures and labs should be a useful guide throughout this assignment. The assignment requires a numbe
of files and a report to be produced. The report should respond to written tasks that are included below
Initial task
Create the above database using your existing SQL skills. You will need at least eight opinions about
tattoos. At least three posts should be replies.
At least one of the posts should be written by somebody called user XXXXXXXXXX.
Invent or discover your own data. Cite data sources appropriately in your report, or alternatively include a
source field in your database.
Submit your SQL file as part of your assignment.
JSON markup
Mark up the complete data using JSON and save it as a .json file. Check that the file is valid JSON and
eport the method used to validate.
Submit this file as part of your assignment.
Back-end API
Create a RESTful JSON API using PHP, implementing at least the following functionality:
List all top-level opinion posts (GET)
Should include id, name, text, likes for posts with a NULL reply_to value.
CRICOS Provider No. 00103D Page 3 of 5
Use an optional querystring/GET parameter to allow sorting by post_date and likes.
Retrieve all details for a particular post (GET)
including replies
Create a new post (POST)
Increment the likes value for an opinion (POST)
Decrement the likes value for an opinion (POST)
Note that it is ok to unlike a post that you never liked - this may result in the likes field being negative.
The Like and Unlike methods are not strictly following RESTful practices, as they are not
implemented by transfe
ing state. You may choose to use the PUT method instead.
Follow HATEOAS (Hypermedia as the Engine of Application State) practices. Include a note in your report
about how you have followed HATEOAS.
Under Apache, this step will require configuring a .htaccess file to allow using clean URLs (without a .php
extension)
Front-end
Create an HTML/CSS/JS page which uses JavaScript, AJAX, the DOM and your back-end API to:
Display a global timeline of all top level tattoo opinion posts. Sort the list by date, with the most recent
first.
Allow the user to submit a new top-level post, which will be displayed immediately in the review list.
Display the details of an individual post when clicked, including all direct replies.
Allow the user to reply to a top-level post. The reply should be displayed immediately.
Allow the user to "like" a post by clicking on a link or button.
Periodically (every 5 seconds), update the page with new posts or replies and updated "like" counts. This
should not remove any text cu
ently being entered in any forms.
The last requirement can be tested by opening your site in multiple
owser tabs at the same time
All functionality should be implemented using JavaScript, the DOM and the backend API, without
eloading
efreshing the
owser page.
Bonus tasks (Completely optional!)
These tasks are 100% optional, and you can receive full marks without attempting or completing them.
They are intended to be a challenge if you are interested in such things, and the marks available do not
eflect the significant research and effort required to implement them co
ectly.
Bonus task one: WebSockets
Instead of polling every 5 seconds, use WebSockets to notify
owsers when the content they are viewing
has changed.
Implement your WebSocket server using either Python or Node.js. You may use an existing WebSocket
li
ary.
CRICOS Provider No. 00103D Page 4 of 5
Bonus task two: Token-based authentication
Implement optional signup/login, also using AJAX techniques, which allows deleting posts and remembering
likes.
Use JWT token-based authentication, rather than cookies / PHP sessions.
Bonus task three: GraphQL in Python
Using Python and the Graphene and SQLAlchemy li
aries, implement a new API using GraphQL.
Create a variant of your front-end that uses your new GraphQL API instead of REST.
Further details
Please note that there are no marks for aesthetics, so please spend your time appropriately. It is acceptable
to use third-party CSS frameworks such as Bootstrap, Skeleton, Bou
on or similar if you wish, as long as
you reference appropriately in your report. Third-party JavaScript is not acceptable, nor is code obtained
through online Q&A sites such as StackOverflow.
Documentation
Include a written report containing:
A statement of completion;
Details of specific assistance you received from people other than your lecturer or tutor, and the names
of those assisting;
References to any third-party CSS frameworks if applicable;
Anything interesting or cool you'd like to draw to your marker's attention.
Submission
All files should be submitted to Moodle by the due date and time. Check with your tutor as to whether a
hard copy is required in addition to the electronic submission.
Marking Criteria/Ru
ic
Refer to the attached marking guide.
Feedback
Feedback will be supplied through Moodle. Authoritative marks will be published through fdlMarks
Plagiarism
Plagiarism is the presentation of the expressed thought or work of another person as though it is one's own
without properly acknowledging that person. You must not allow other students to copy your work and must
take care to safeguard against this happening. More information about the plagiarism policy and procedure
for the university can be found at
http:
federation.edu.au/students/learning-and-study/online-help-with/plagiarism.
http:
federation.edu.au/students/learning-and-study/online-help-with/plagiarism
CRICOS Provider No. 00103D Page 5 of 5
Marking Guide: Assignment 2
Feature Criteria Maximum Obtained
SQL file Requirements satisfied 1
Data Interchange JSON is accurate, well-structured and syntacticallyvalid 1
Back-end API
RESTful (resource-based) design 2
Uses HATEOAS approach 1
List and details (GET) 2
New post (POST) 2
Like and Unlike 1
Sort based on query parameter 1
Front-end
Global timeline 1
Details page, including replies and likes 2
Submit a new post 1
Submit a reply 1
Automatic data reload on interval 2
Bonus optional
challenge tasks
WebSocket update channel (+1)
JWT token-based authentication and admin (+2)
GraphQL API (+2)
Documentation
Description of JSON validation approaches 1
Description of HATEOAS approach 1
Completion of tasks, Assistance statement (lose 1
mark each if not included) (-2)
Quality of code (lose
marks if criteria not
met)
Layout, structure, indentation (-1)
Appropriate and consistent naming scheme (-1)
Appropriate use of comments, including quality
and accuracy. Comments do not simply na
ate
code but illuminate intent and design decisions. No
commented-out code.
(-1)
Valid HTML5 (-1)
Total: 20

CRICOS Provider No. 00103D Page 1 of 5
ITECH3108 Dynamic Web Programming
Assignment 2 - Tattoo Share
"It's like Yik Yak, but for opinions about Tattoos"
Overview
This is an individual assignment in which you will explore the use of data interchange between web servers
and
owsers, dynamic construction of page content, and API design, using PHP, JavaScript, and JSON.
Important: This assignment specification is generated just for you. Do not distribute this specification.
Timelines and Expectations
Percentage value of task: 20%
Due: Refer to Course Description
Learning Outcomes Assessed
The following course learning outcomes are assessed by completing this assessment:
K2. Contrast the capabilities and limitations of client-side and server-side web code
K3. Detect opportunities for increasing security and privacy of web applications
S1. Develop client/server web applications using client-side and server-side code
S2. Connect to and manipulate a database management system programmatically using server-side
code
S3. Design and implement a RESTful web application programming interface (API)
S4. Implement a client-side web application which uses a client-side programming language to access a
web API
A1. Design, develop, test, and debug client/server web applications to provided specifications
Assessment Details
Introduction
Tattoo Share is a single-page web app that allows users to post their opinions about tattoos online, and
eply to other people's opinions.
Users can post new opinions, which include some review text and, optionally, their name. Opinions
submitted without a name are labelled "anonymous" and should have distinct formatting.
Users can additionally "like" other opinion posts.
Database
A simple database with one table is sufficient to model the database requirements for this assignment,
however you may if you wish extend and/or normalize this database.
The database has the following structure:
TattooPost ( id, name, text, post_date, likes, reply_to )
CRICOS Provider No. 00103D Page 2 of 5
TattooPost
idPK
name
text
post_date
likes
eply_toFK
Each record in the TattooPost table represents a single opinion post.
The post_date field should be a MySQL TIMESTAMP field, and contains the date and time that the post was
created. You may achieve this using the DEFAULT CURRENT_TIMESTAMP declaration in your CREATE
TABLE statement.
The likes field is an
itech3108-assignment-2-1-w5eyk0ww.pdf itech3108-assignment-2-1-mn3elrig-c0yn4zn0.pdf
Answered Same Day Jun 01, 2021 ITECH3108

Solution

Mohd answered on Jun 05 2021
143 Votes
Tattoo Share/api.php
?php
include "php/ajax/config.php";
include_once "php/ajax/Common.php";
if (isset($_GET['name'])){
$apiName = $_GET['name'];
switch ($apiName){
case "events":
$response = a
ay();
$common = new Common();
$allEvents = $common->getAllEvents($connection);
while ($row = $allEvents->fetch_object()){
$response[] = $row;
}
echo json_encode($response);

eak;
}
}
Tattoo Share/assets/img/line.png
Tattoo Share/assets/img/line2.png
Tattoo Share/assets/img/plus.png
Tattoo Share/assets/img/tattoo_logo.png
Tattoo Share/assets/js/ajaxjs.js
$(document).ready(function () {

alert('hi');
getAllEvents();

getAllVoters();
});
window.setInterval(function(){

call your function here
getAllEvents();

getAllVoters();
}, 5000);
$("form#addEditCoAdminForm").on("submit",function (e) {
e.preventDefault();
var eventName = $("#eventName").val();
var eventTime = $("#eventTime").val();
var posterName = $("#posterName").val();

var eventDescription = $("#eventDescription").val();
if (eventName == ""){
alert("Please enter event name");
eventName.focus();
}else if (eventTime == ""){
eventTime.focus();
}/*else if (eventDescription == ""){
eventDescription.focus();
}*/else{
$.post("php/ajax/ajax.php",{
addEvent:"addEvent",
eventName:eventName,
eventTime:eventTime,
posterName:posterName,

eventDescription:eventDescription
},function (response) {
$("#addNewEventModal").modal('hide');
$('#addEditCoAdminForm').trigger("reset");
var data = response.split('^');
if (data[1] == "saved"){

alert("saved");
getAllEvents();
}
});
}
});
function getAllEvents() {
$.post("php/ajax/ajax.php",{getAllEvents:"getAllEvents"},function (response) {
var data = response.split('^');
$("#eventTimeLineData").html(data[1]);
});
}
function voteTheEvent(eventId) {
$("#vottingModal").modal('show');
$("#eventId").val(eventId);
}
$("form#vottingForm").on("submit",function (e) {
e.preventDefault();
var voterName = $("#voterName").val();
var eventId = $("#eventId").val();
if (voterName == ""){
alert("Please enter your name");
$("#voterName").focus();
}else{
$.post("php/ajax/ajax.php",{voteTheEvent:"voteTheEvent",voterName:voterName,eventId:eventId},function (response) {
var data = response.split('^');
if (data[1] == "voted"){
alert("Your vote has been saved for this event");
$("#vottingModal").modal('hide');
$('#vottingForm').trigger("reset");
getAllEvents();
}
});
}
});
$("form#addVoterForm").on("submit",function (e) {
e.preventDefault();
var voterName = $("#voterName").val();
var eventId = $("#eventId").val();
if (voterName == ""){
alert("Please enter voter name");
$("#voterName").focus();
}else{
$.post("php/ajax/ajax.php",{addVoter:"addVoter",voterName:voterName,eventId:eventId},function (response) {
var data = response.split('^');
if (data[1] == "added"){
alert("Voter added");
$("#addVoterModal").modal('hide');
$('#addVoterForm').trigger("reset");
getAllVoters(eventId);
}
});
}
});
function getAllVoters(eventId) {
$.post("php/ajax/ajax.php",{getAllVoters:"getAllVoters",eventId:eventId},function (response) {
var data = response.split('^');
$("#votersData").html(data[1]);
});
}
function suggestEventTime(eventId) {
$("#suggesstionModal").modal('show');
$("#eventId").val(eventId);
}
$("form#suggesstionForm").on("submit",function (e) {
e.preventDefault();
var posterName = $("#suggestorName").val();
var suggestedTime = $("#suggestedTimes").val();
var eventId = $("#eventId").val();
/* if (posterName ==""){
alert("Please enter your name");
$("#suggestorName").focus();
}*/ if (suggestedTime==""){
alert("Please enter your suggested time");
$("#suggestedTimes").focus();
}else{
$.post("php/ajax/ajax.php",{suggestTiming:"suggestTiming",posterName:posterName,suggestedTime:suggestedTime,eventId:eventId},function (response) {
var data = response.split('^');
if (data[1] == "saved"){
alert("Your suggestion has been saved");
$("#suggesstionModal").modal('hide');
$('#suggesstionForm').trigger("reset");
}
});
}
});
function getAllSuggestions(eventId) {
$.post("php/ajax/ajax.php",{getAllSuggestions:"getAllSuggestions",eventId:eventId},function (response) {
var data = response.split('^');
$("#suggestionsData").html(data[1]);
});
}
Tattoo Share/assets/style.css
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
Tattoo Share/data.json
[{"id":"8","eventName":"Tattoo Share 7","eventTime":"12:10AM","postedDate":"2019-09-24 15:37:55","posterName":"Raja","eventDescription":""},{"id":"7","eventName":"Tattoo Share 6","eventTime":"ddd","postedDate":"2020-09-24 13:38:38","posterName":"Parth ","eventDescription":""},{"id":"6","eventName":"Tattoo Share 5","eventTime":"fghjk","postedDate":"2020-09-24 13:38:30","posterName":"Abhishek","eventDescription":""},{"id":"5","eventName":"Tattoo Share 4","eventTime":"ddfghj","postedDate":"2019-09-24 13:30:32","posterName":"Ram Singh","eventDescription":"fghjio"},{"id":"4","eventName":"Synergy","eventTime":"5:30","postedDate":"2019-09-24 13:28:30","posterName":"","eventDescription":"hjkasdfgthyujkisdfghjkl hjkasdfgthyujkisdfghjkl hjkasdfgthyujkisdfghjkl "},{"id":"3","eventName":"Tattoo Share 3","eventTime":"10:00PM","postedDate":"2019-09-24 13:23:10","posterName":"","eventDescription":"For a complete reference of all modal options, methods aFor a complete reference of all modal options, methods a"},{"id":"2","eventName":"Tattoo Share 2","eventTime":"10:00PM","postedDate":"2019-09-24 13:23:04","posterName":"","eventDescription":"For a complete reference of all modal options, methods aFor a complete reference of all modal options, methods a"},{"id":"1","eventName":"Tattoo Share 1","eventTime":"12:10AM","postedDate":"2020-09-24 13:07:50","posterName":"Mohd Lucky","eventDescription":""}]
Tattoo Share/footer.php
script type="text/javascript" src="assets/js/ajaxjs.js"
script
ody
html
Tattoo Share/header.php
Tattoo Share/index.php
?php include "header.php";?
?php include "save_json.php";?
div class="container" style="margin-top:60px;"

cente

Tattoo Share
h4
Submit New Event
a