ITECH3108 - Dynamic Web Programming: Doorknob Megaphone Assignment 2

This assignment solution presents the Doorknob Megaphone web application, a project designed for ITECH3108 Dynamic Web Programming. The project involves creating a single-page web app where users can post opinions about doorknobs, like and unlike other opinions, reply to opinions, and view replies. The front-end is built using HTML, JavaScript, and Bootstrap, interacting with a back-end API implemented in PHP, which connects to a MySQL database. The solution includes the creation of an SQL file for database setup, a RESTful JSON back-end API for handling user interactions (posting, replying, liking/disliking), and a front-end web app with features like AJAX for dynamic updates. The student utilized Visual Studio Code for editing, a LAMPP server for the development environment, and tested the API using Postman. The assignment demonstrates the student's ability to design, develop, and test client-server web applications, focusing on data interchange, dynamic content construction, and API design. The project adheres to the provided specifications and objectives, showcasing a functional web application with potential for further improvements.

Running head: DYNAMIC WEB PROGRAMMING
Dynamic Web Programming
Name of the student
Institution Affiliation

DYNAMIC WEB PROGRAMMING 2
Introduction
Doorknob Megaphone is a web app that allows people to post opinions about doorknobs, like
and unlike other people’s opinions, reply to other people’s opinions, and see replies to already posted
opinions. The opinions are listed in a descending order with the recent opinions coming first. The apps
fronted connects to a back-end API implemented in PHP. The database used is MySQL. The fronted
uses HTML, JavaScript and Bootstrap.
Objectives of the assignment
 Create a database using my existing SQL skills.
 Create a RESTful JSON back-end API using PHP
 Create an HTML, CSS and JS page which uses JavaScript, AJAX, the DOM and the back-end
API created above
A statement of completion
I hereby declare that I have done this assignment to completion. All work done in this
assignment is a product of my own effort.
In this task, I have completed the following:
 Created an SQL file for creating the database, the tables in the database and sample data in the
database. The file is submitted as part of the assignment
 Created a PHP back-end API that enables posting new opinions, replying to opinions, liking and
disliking comment and viewing reply's to comment
 Created a HTML, JavaScript and CSS (bootstrap based) single page web app. The app allows
posting new opinions, liking and disliking, replying to opinions, seeing replies to opinions,

DYNAMIC WEB PROGRAMMING 3
update the page with new posts or replies and updated "like" counts. This does not remove any
text currently being entered in any forms.
Assistance statement
I hereby declare that I sought out assistance through YouTube tutorials on RESTFUL APIs
design. However, no third party code was ported to this assignment project
Third party frameworks
The following third party frameworks were used in this assignment
 Twitter Bootstrap – a cascading style sheets(CSS) framework
Development environment
The following software were used to aid in the development of the web app
 visual studio code for editing
 LAMPP server( contains PHP, MySQL, and Apache web Server)
 Ubuntu Operating System
 Chrome web browser
 Postman for API testing
Development approach
The app was developed following the following approach in order:
 Database design ,development and testing
 API design ,development and testing
 front-end design, development and testing

DYNAMIC WEB PROGRAMMING 4
Sample program outlook
The images below show sample program outlook:
1. New opinion entry forms. This are used to submit a new opinion.
2. Sample opinions with buttons for replying, liking, disliking and viewing replies. The fields in the
table show the descriptive information about the opinions

DYNAMIC WEB PROGRAMMING 5
3. Sample replies to an opinion. This is obtained after clicking the replies button. This shows when
there are replies and when there are no replies at all

DYNAMIC WEB PROGRAMMING 6
The web app carries out all the functionalities and objectives it was meant to. Further improvements
can be made on the user interface.