Coursework

COMP1841 – Web Programming 1

Student Name : TA GIA HUY

Student ID : 001343181
Article Title : Student App to Study
Instructor : Huong Vu
Submission Date : 22/08/2024
Contents
I. Abstract...................................................................................................................................................... 4
II. Introduction .............................................................................................................................................. 4
III. Methodology ........................................................................................................................................... 4
Tools and Technologies............................................................................................................................. 4
Development Environment Setup ........................................................................................................... 5
IV. User Requirements .................................................................................................................................. 5
Requirements ........................................................................................................................................... 5
User Requirements ................................................................................................................................... 6
Use Case Diagram ..................................................................................................................................... 7
Actors: ....................................................................................................................................................... 7
Use Cases: ................................................................................................................................................. 7
V. Design ....................................................................................................................................................... 9
1. Database Schema Design ..................................................................................................................... 9
2. System Architecture Overview........................................................................................................... 10
2.1. Overview...................................................................................................................................... 10
2.2. Architecture Components ........................................................................................................... 10
2.3. Process Flow ................................................................................................................................ 11
2.4. Security Considerations............................................................................................................... 12
2.5. Scalability and Maintenance ....................................................................................................... 12
3. User Interface Design ......................................................................................................................... 12
Wireframes ......................................................................................................................................... 12
VI. Implementation .................................................................................................................................... 18
VII.Discussion about GDPR......................................................................................................................... 28
VIII. Testing ................................................................................................................................................. 30
IX. Challenges and Solution ........................................................................................................................ 31
Challenges............................................................................................................................................... 31
Results..................................................................................................................................................... 32
Discussion ............................................................................................................................................... 32
X. Conclusion .............................................................................................................................................. 33
Figure 1: Database Schema Design .............................................................................................................. 9
Figure 2: Login Page................................................................................................................................... 12
Figure 3: Home Page .................................................................................................................................. 13
Figure 4: Questions Page ............................................................................................................................ 14
Figure 5: Add Question Page ...................................................................................................................... 14
Figure 6: List Question Page....................................................................................................................... 15
Figure 7: Admin Area Page ......................................................................................................................... 16
Figure 8: Manager Users Page .................................................................................................................... 16
Figure 9: Manage Modules Page ................................................................................................................ 17
Figure 10: DatabaseConnection.php ........................................................................................................... 18
Figure 11: DatabaseFunction.php ............................................................................................................... 19
Figure 12: Questions.php ............................................................................................................................ 20
Figure 13: add_question.php ....................................................................................................................... 21
Figure 14: list_question.php........................................................................................................................ 22
Figure 15: delete_question.php ................................................................................................................... 23
Figure 16: edit_question.php ...................................................................................................................... 24
Figure 17: admin_area.php ......................................................................................................................... 25
Figure 18: manager_user.php ...................................................................................................................... 26
Figure 19: manage_modules.php ................................................................................................................ 27
Figure 20: login.php .................................................................................................................................... 28
I. Abstract
This project focuses on the development of "Greenwich Confession," a web-based student question-and-
answer system designed to facilitate efficient interaction between users. The application offers
functionalities for users to submit, manage, and view questions, with additional administrative tools for
managing system modules.
The system incorporates a user-friendly interface, developed using Tailwind CSS, to ensure a modern and
responsive design. Backend operations are handled through PHP and PDO, ensuring secure and efficient
database interactions. The project adheres to GDPR guidelines, prioritizing data protection and user
privacy. Comprehensive testing was conducted to verify the functionality and usability of the system,
confirming that all major features perform as intended.

II. Introduction
In this project, I will leverage the foundational skills and techniques acquired in lectures and labs to
develop a web-based PHP/MySQL CRUD system. Building upon the basic structure of an online joke
site, I will create a prototype system designed to facilitate peer-to-peer assistance among students through
a question-and-answer platform. This system, akin to a simplified and self-contained version of Stack
Overflow, will allow students to post, edit, and manage questions related to their coursework.
My task is to design and implement a system that not only provides a public-facing interface for viewing
and interacting with posts but also includes administrative functionalities for managing users, modules,
and communication with the system administrator. While the initial functionality will be limited, the
system is intended to be expandable in future iterations, offering a solid foundation for continued
development.
The following sections outline the essential features and requirements for the system, prioritizing the key
functionalities needed to meet the project's objectives.

III. Methodology
Tools and Technologies
In developing the web-based PHP/MySQL CRUD system, I utilized the following tools and technologies:
• Programming Languages: The core functionality of the system is implemented using PHP for
server-side scripting and HTML for the structure of the web pages. This combination allows for
dynamic content generation and interaction with users.
• Styling Framework: To enhance the visual appearance of the application, I employed Tailwind
CSS, a utility-first CSS framework. Tailwind allows for rapid and responsive design without the
need for extensive custom styles.
 • Database Management System: The application utilizes MySQL as the database management
system, providing a robust platform for data storage and retrieval.
• Integrated Development Environment (IDE): For coding and development, I used Visual
Studio Code. This IDE offers a user-friendly interface and supports various extensions to
enhance productivity and coding efficiency.
• Local Server Environment: The development was conducted on a local server using XAMPP,
which provides an easy-to-use package that includes Apache, MySQL, and PHP, making it
suitable for testing the application locally.

Development Environment Setup

The development environment is set up as follows:
• Operating System: The development was carried out on a Windows operating system, which is
compatible with XAMPP and supports all necessary tools and technologies.
• XAMPP Configuration: XAMPP serves as the local server environment, enabling me to run
PHP scripts and manage MySQL databases seamlessly. I installed XAMPP and configured it to
host my application on localhost, allowing for easy access and testing.
• MySQL Database Setup: Within XAMPP, I set up a MySQL database to store application data.
This included creating the necessary tables for users, questions, and modules based on the
functional requirements outlined for the project.
• Deployment Process: The deployment process involves testing the application locally on
XAMPP to ensure all functionalities work as intended before moving to a live server. This
approach allows for efficient debugging and iteration.
• Development Workflow: My typical development workflow includes writing PHP and HTML
code in Visual Studio Code, testing the application using XAMPP's local server, and managing
the MySQL database through phpMyAdmin, which is included with XAMPP. Version control is
not explicitly mentioned in this setup, but it is advisable to incorporate a version control system
like Git for better management of the project’s codebase.
By employing these tools and methodologies, I aimed to create a functional and efficient system that
meets the needs of students seeking assistance with their coursework. The iterative development approach
allows for future enhancements and scalability of the application.

IV. User Requirements

Requirements
The web-based platform is designed to enhance students' learning and collaboration. This system will
provide a convenient online space where students can easily post questions, share knowledge, and seek
help from their peers. It will include features that allow students to manage and edit their questions,
organize content by module, and communicate directly with administrators through a contact form. By
integrating user and module management functionalities, the system aims to create an interactive and
supportive learning environment tailored to the needs of each student.
User Requirements
Requirement Description
- Students will have the ability to create, edit, and
delete their own posts, fostering active
participation and content management. The
Interactive Learning Environment
platform will support interactive features such as
commenting and upvoting to enhance
engagement.
- Content will be categorized by predefined
modules or topics to streamline navigation and
Content Management relevance. Features will include sorting, filtering,
and searching to help students find specific
information quickly.
- The platform will allow embedding of images,
screenshots, and other media types within posts.
Media Support Rich text formatting options, such as bold, italics,
and lists, will be available to improve the clarity
and presentation of posts.
- Students will have personalized profiles where
they can update their information, including
User Profile Management usernames, email addresses, and profile pictures.
This feature aims to create a more personalized
and engaging user experience.
- Different user roles (e.g., students, moderators,
administrators) will be implemented with specific
Role-based Permissions permissions for managing content and users. This
will ensure appropriate access control and content
moderation capabilities.
- The platform will include a contact form for
students to reach out to administrators with
Communication and Support questions, feedback, or issues. Additionally, a
direct messaging system will facilitate real-time
communication and support.
- An integrated notification system will alert
students to updates on their posts, responses, and
Notification System other relevant activities. Notifications will be
customizable to help students stay informed and
engaged with their interactions.
- Administrators will have tools for moderating
content and managing user reports to maintain a
Administrative and Security Features respectful and secure environment. The platform
will incorporate strong data security practices,
including encryption and secure authentication.
- The platform will feature a responsive design
that adapts to various devices, including desktops,
User Experience and Accessibility tablets, and smartphones. Accessibility features
will ensure usability for students with disabilities,
such as screen reader support.
- The design will be scalable to handle increased
Scalability and Future Enhancements
user activity and future feature additions.
 Feedback mechanisms will be implemented to
gather user input for ongoing improvements and
updates to enhance the platform's functionality.

Use Case Diagram

Actors:
1. Student
2. Admin

Use Cases:
1. Login:
o Actor: Student, Admin
o Description: Authenticates users with their credentials and directs them to the
appropriate page based on their role.
2. Home Page Navigation:
o Actor: Student, Admin
o Description: Provides navigation options based on user role:
▪ Students: Navigate to the Questions Page.
▪ Admins: Navigate to both the Questions Page and Admin Area.
3. Questions Page:
o Add Question:
▪ Actor: Student
▪ Description: Allows Students to submit a new question, including details and an
optional image upload.
o List Questions:
▪ Actor: Student
▪ Description: Displays a list of all submitted questions with options to edit or
delete.
4. Admin Area:
o Manage Users:
▪ List Users:
▪ Actor: Admin
 ▪ Description: Displays a list of all users with options to view, edit, or
delete user accounts.
▪ Add User:
▪ Actor: Admin
▪ Description: Allows Admins to add, edit, or delete user accounts,
including optional profile images.
o Manage Modules:
▪ List Modules:
▪ Actor: Admin
▪ Description: Displays a list of all modules.
▪ Add/Edit Module:
▪ Actor: Admin
▪ Description: Allows Admins to add or edit module names and
descriptions.
5. Contact Form:
o Actor: Student
o Description: Enables Students to send messages to the system administrator.
Use Case Diagram Overview:
• Student interacts with:
o Login to access the system.
o Home Page Navigation to reach:
▪ Questions Page where they can Add Question and List Questions.
o Contact Form to send messages to the admin.
• Admin interacts with:
o Login to access the system.
o Home Page Navigation to reach:
▪ Questions Page (similar to Students).
▪ Admin Area where they can:
▪ Manage Users: List Users and Add User.
▪ Manage Modules: List Modules and Add/Edit Module.
V. Design
1. Database Schema Design

Figure 1: Database Schema Design

The database schema for the greenwich_confession system is designed to efficiently manage and
integrate key data elements. It includes four primary tables: modules, messages, users, and posts, each
serving distinct functions.
The modules table manages information about academic modules. It includes an id for unique
identification, module_name to specify the module's name, and description for additional details about the
module. This table ensures each module is uniquely identified and described, facilitating organization and
retrieval of module-related posts.
The messages table tracks communications between users and administrators. It contains an id for each
message, a user_id that links to the users table to identify the sender, the message content, and a
created_at timestamp to record when the message was sent. This table helps manage user feedback and
system queries efficiently.
The users table stores detailed information about individuals using the system. It includes an id for
unique identification, username and email which must be unique for each user, password for secure
authentication, and role to differentiate between 'admin' and 'student'. This table is crucial for managing
user accounts and their roles within the system.
The posts table handles the questions or posts submitted by students. It features an id for each post, a title,
content, and an optional image for visual support. The user_id links each post to its creator, and
module_id associates the post with a specific academic module. Timestamps for creation and updates
(created_at and updated_at) track the post’s lifecycle. This table is essential for managing user-generated
content and its association with modules.
In summary, this schema clearly defines the roles and relationships of each table, ensuring effective data
management and supporting the core functionalities of the greenwich_confession system.

2. System Architecture Overview

Project Title: Greenwich Confession

2.1. Overview
The Greenwich Confession system is a web application designed for students to ask and manage
assignment-related queries. It provides functionalities for user authentication, question management, and
admin controls. The system is structured to include various components interacting through a well-
defined architecture.

2.2. Architecture Components

2.2.1. Client-Side:
• Front-End Technologies:

o HTML/CSS: Used to structure and style the web pages.

o Tailwind CSS: Utilized for responsive, modern, and elegant design.
o JavaScript: (Optional) For enhancing user interactions and adding dynamic elements.
2.2.2. Server-Side:
• Backend Technologies:

o PHP: Used for server-side scripting and handling business logic.

o PDO (PHP Data Objects): Provides a consistent interface for database interaction.
2.2.3. Database:
• Database System:

o MySQL: Stores application data including users, posts, modules, and messages.
• Database Tables:
o Users: Manages user details such as username, email, and hashed passwords.
o Posts: Handles user queries, including title, content, associated images, and metadata.
o Modules: Contains information about different assignment modules.
o Messages: Stores messages related to posts and queries.
2.2.4. File Structure:
• /include: Contains essential PHP files for database connections and functions.
 o DatabaseConnection.php: Provides a method to establish a connection to the MySQL
database.
o DatabaseFunction.php: Contains database-related functions like retrieving user details
and managing posts.
• /template: Holds HTML/PHP templates for rendering different pages.
o header.php: Includes the header section for all pages.
o footer.php: Includes the footer section for all pages.
o login.html.php: Template for the login page.
o manage_users.html.php: Template for the user management page.
• /public: Serves as the public-facing directory containing the entry points and public assets.
o login.php: Handles user login functionality and redirects based on authentication.
o manage_users.php: Displays the user management interface.
o add_question.php: Allows users to add new questions.
o list_question.php: Displays a list of questions.

2.3. Process Flow

User Authentication:
o Users access the login page (login.php) to enter their credentials.
o Credentials are validated using PHP and PDO. Successful authentication redirects the
user to the appropriate dashboard (e.g., manage_users.php).
Question Management:
o Users can add new questions via add_question.php.
o Questions are displayed and managed through list_question.php.
Admin Functions:
o Admins can manage users and modules.
o manage_users.php provides options to view user lists and add new users.
o Admin functionalities are handled in manage_modules.php and other relevant files.
Database Interaction:
o PHP scripts interact with the MySQL database using PDO functions.
o The DatabaseConnection.php file establishes the database connection.
o The DatabaseFunction.php file contains functions for querying and managing data.
2.4. Security Considerations
• Input Validation: Ensuring that user inputs are properly validated to prevent SQL injection and
other attacks.
• Password Hashing: Storing passwords securely using hashed values.
• Session Management: Handling user sessions to ensure proper access control and data
protection.

2.5. Scalability and Maintenance

• Modular Design: The system is designed to be modular, making it easier to maintain and extend.
• Responsive Design: Utilizes Tailwind CSS to ensure the application is responsive and works well
on various devices.
This overview provides a high-level understanding of the Greenwich Confession system's architecture,
focusing on its components, flow, and key considerations for security and maintenance.

3. User Interface Design

Wireframes

Figure 2: Login Page

My login page is a simple and intuitive interface that allows me to enter my username and password to
access the system. With the title "Greenwich Confession" prominently displayed at the top, the login form
is centered on the screen, featuring input fields for my username and password. I click the "Login" button
to submit my information and be redirected to the main page of the application. The page is designed with
a dark background and light text for clear readability, and it uses Tailwind CSS to ensure an attractive and
user-friendly design on both desktop and mobile devices.

Figure 3: Home Page

The Home page is the landing page of my application, presenting a clear and inviting introduction. It
features a title "Greenwich Confession" and provides quick access to essential functionalities like adding
a question, viewing questions, and managing modules. The design uses a dark theme with elegant
typography and Tailwind CSS for a sleek, modern look. It ensures an easy navigation experience across
both desktop and mobile devices.
 Figure 4: Questions Page

The Questions page displays a list of questions posted by users. Each entry includes a brief title that links
to detailed views. The page is designed to be clean and functional, allowing me to easily browse through
the questions and access further details. The layout is responsive and visually appealing, making use of
Tailwind CSS for styling.

Figure 5: Add Question Page

The Add Question page allows me to submit a new question to the system. It includes fields for entering
the question title, selecting the user, choosing the module, and uploading an image if desired. Upon
submission, the page redirects me to the List Questions page, where I can view my newly added question.
The design is clean and functional, with Tailwind CSS providing a modern appearance.

Figure 6: List Question Page

The List Questions page provides an organized view of all questions submitted to the system. It displays
question titles in a list format with clickable links that direct me to detailed question views. This page
ensures a user-friendly experience by presenting information clearly and allowing easy navigation.
Tailwind CSS is used for consistent styling and responsiveness.
 Figure 7: Admin Area Page

The Admin Area is a specialized section accessible only to administrators. It includes tools and
functionalities for managing users and modules within the system. The page layout is designed to provide
easy access to these management features, ensuring efficient administrative operations. The design is
consistent with the overall dark theme and uses Tailwind CSS for a polished look.

Figure 8: Manager Users Page

The Manager Users page allows me to manage user accounts within the system. It includes options for
viewing the list of users and adding new ones. The page is designed for ease of use, with a clean layout
that supports efficient user management. Tailwind CSS is utilized for a modern and responsive design.

Figure 9: Manage Modules Page

The Manager Modules page provides tools for managing the modules used within the system. It allows
me to view existing modules and add new ones. The design is straightforward and user-friendly, with
Tailwind CSS ensuring a consistent and visually appealing interface across devices.
VI. Implementation

Figure 10: DatabaseConnection.php

The PHP code snippet provides a getDatabaseConnection() function to establish and return a connection
to a MySQL database using PDO. The function initializes the connection with parameters such as the
server (localhost), database name (greenwich_confession), username (root), and password (an empty
string). PDO is configured to handle errors by throwing exceptions, making it easier to detect and manage
connection issues. If an error occurs, the function terminates the script and displays an error message.
This function helps set up a flexible and secure database connection, supporting SQL operations in the
application.
 Figure 11: DatabaseFunction.php

The PHP code defines several functions for managing database operations. addPost() inserts a new post
into the posts table, while getAllPosts() retrieves all posts with details from the posts, users, and
modules tables. deletePost() removes a post by its ID, and updatePost() updates post details.
getPostById() fetches a post by ID. addModule() adds a new module to the modules table, and
getAllModules() retrieves all modules. deleteModule() deletes a module by ID, while updateModule()
updates module details. getModuleById() gets a module by ID, and getPostsByModule() retrieves posts
related to a specific module. getUserById() and getAllUsers() fetch user details by ID and get all users,
respectively. requireLogin() redirects to the login page if the user is not logged in, and
getUserByUsername() retrieves user details by username.
 Figure 12: Questions.php

The PHP code includes the DatabaseConnection.php file and sets the $admin_area variable to control
the visibility of the Admin Area link. It defines the $title variable as "Questions" and includes the
header.php file for the page header. The main content displays a section with options to view and add
questions, styled using Tailwind CSS. It concludes by including the footer.php file for the page footer.
 Figure 13: add_question.php

The PHP code handles the process of adding a new question to the database. It starts by including the
DatabaseConnection.php file to establish a database connection. When a POST request is detected, it
collects form data, including the question title, content, user ID, and module ID. It also processes an
optional image upload by saving the file to the uploads directory.
The core functionality is to insert the new question into the posts table using a prepared SQL statement.
Upon successful insertion, the code redirects the user to list_question.php. If any errors occur during the
image upload or database insertion, an appropriate error message is displayed.
 Figure 14: list_question.php

The PHP code is responsible for displaying a list of questions from the database. It includes the
DatabaseConnection.php file to establish a database connection and sets the page title to "List
Questions." The $admin_area flag is set to false, and the header.php template is included for consistent
page styling.
The code then attempts to fetch questions from the posts table using a PDO connection, ordering the
results by creation date. If successful, it displays each question in a styled list, showing the title, content,
asker, module, and optionally an image if available. If no questions are found, a message is displayed.
Finally, it includes the footer.php template for the page footer.
 Figure 15: delete_question.php

The PHP code handles the deletion of a specific question. It starts by including the
DatabaseConnection.php and DatabaseFunction.php files to ensure necessary functions and database
connection are available.
The session is started, and the requireLogin() function is called to ensure the user is logged in. If a
question ID is provided via the GET request, the deleteQuestion($id) function is called to remove the
question from the database. After the deletion, the user is redirected to the list_question.php page.
 Figure 16: edit_question.php

This PHP script is used to edit an existing question in the database. It includes necessary files for
database connection (include 'include/DatabaseConnection.php') and functionality (include
'include/DatabaseFunction.php'). The page title is set to "Edit Question" and the admin area flag is
enabled ($admin_area = true).
The script retrieves the details of a question based on an ID provided in the URL ($id =
isset($_GET['id']) ? (int)$_GET['id'] : 0) and displays them in an editable form. Upon form submission,
the script processes the input data, including optional image uploads. The question’s information is then
updated in the database ($stmt->execute([$title, $content, $imagePaths, $user, $module, $id])). After the
update, the user is redirected to the list of questions (header('Location: list_question.php')). The script
also populates dropdown menus with users and modules fetched from the database.
 Figure 17: admin_area.php

This PHP script is used to display the Admin Area page. It includes the necessary file for database
connection (include 'include/DatabaseConnection.php') and sets the admin area flag to true
($admin_area = true), indicating that the admin-specific links should be visible.
The page title is set to "Admin Area" and the header template is included (include
'template/header.php'). The main content includes a grid layout with two sections: Manage Users and
Manage Modules. Each section has a link that directs to the respective management pages
(manage_users.php and manage_modules.php). Finally, the footer template is included (include
'template/footer.php') to complete the page.
 Figure 18: manager_user.php

This PHP script handles user management functionality, specifically for deleting users. It begins by
including the database connection file (include 'include/DatabaseConnection.php').
If the script receives a POST request with the delete action ($_POST['delete']), it retrieves the user ID
to delete ($userIdToDelete) from the POST data, prepares a SQL delete statement to remove the user
from the users table, and executes this statement. After deletion, it redirects to the Manage Users page
(manage_users.php).
Next, the script fetches the list of users from the database with a SELECT query and stores the results in
$users. The admin area flag ($admin_area = true) is set to show admin-specific links. Finally, the script
includes the manage users template (include 'template/manage_users.html.php') to display the user
management interface.
 Figure 19: manage_modules.php

This PHP script manages module deletions. It begins by including the database connection file (include
'include/DatabaseConnection.php').
If a POST request with the delete action ($_POST['delete']) is received, it retrieves the module ID to
delete ($moduleIdToDelete) from the POST data, prepares a SQL delete statement to remove the module
from the modules table, and executes this statement. After deletion, it redirects to the Manage Modules
page (manage_modules.php).
The script then fetches the list of modules from the database using a SELECT query and stores the results
in $modules. The admin area flag ($admin_area = true) is set to enable admin-specific links. Finally, it
includes the manage modules template (include 'template/manage_modules.html.php') to display the
module management interface.
 Figure 20: login.php

This PHP script handles user login functionality. It begins by including the database connection file
(include_once './include/DatabaseConnection.php') and the authentication functions file (include_once
'./include/auth.php').
The script starts a session using session_start().
When a POST request is made, it retrieves the username and password from the POST data. It then
calls getUserByUsername() to fetch user details. If a user is found and the password is verified with
password_verify(), it sets the session variables ($_SESSION['user_id'] and $_SESSION['user_role']) and
redirects to index.php.
If the login fails, it sets an error message indicating invalid credentials.
Finally, it captures the output of the login template (login.html.php) and includes the layout template
(layout.html.php) to render the complete page.

VII.Discussion about GDPR

The General Data Protection Regulation (GDPR) sets strict guidelines for handling personal data, which
impacts the development of the student question-and-answer system.
Data Collection and Processing
• Purpose Limitation: Collect data only for managing student posts, profiles, and
communications.
 • Transparency: Inform students about how their data will be used and stored through a clear
privacy policy.
User Rights
• Right to Access: Allow students to view their personal data.
• Right to Rectification: Enable students to correct inaccuracies in their data.
• Right to Erasure: Provide an option for students to delete their accounts and data.
• Right to Restrict Processing: Offer options to limit how their data is processed.
• Right to Data Portability: Allow students to obtain their data in a portable format.
• Right to Object: Respect students' objections to data processing under certain conditions.
Data Security
• Data Protection: Implement encryption and secure storage to protect personal data.
• Regular Reviews: Conduct security assessments to protect against breaches.
Data Management and Storage
• Data Minimization: Collect only necessary data for the system's functionality.
• Retention Policies: Define and enforce policies to avoid keeping data longer than needed.
Compliance and Accountability
• Privacy Notices: Clearly communicate data collection and usage practices.
• Data Protection Officer (DPO): Consider appointing a DPO to oversee compliance.
• Documentation: Keep records of data processing activities to demonstrate GDPR adherence.
By integrating these GDPR principles, the system will ensure compliance and protect user privacy
effectively.
 VIII. Testing

Test Image
Functionalit Desired Actual
Numbe Description
y Outcome Outcome
r

Test
User is Successful if
Validate user redirected to the outcome
login with the home page matches.
1 Login
correct with a Otherwise:
credentials. welcome "Invalid
message. username or
password."

Question is
successfully
Add a new added and
Add question user is Test
2
Question with valid redirected to Successfully
data the List
Questions
page.
Click
After deleting
Delete "Delete" in
the question Test
3 Question List
no longer Successfully
Question
exists
Test
Successful if
Correct the
Click “Edit” the outcome
module and
4 Edit Module in Manage matches.
description
Modules Otherwise:
successfully
"Module ID is
required."
IX. Challenges and Solution
Challenges
1. Integration of Frontend and Backend:
o Challenge: Ensuring that the frontend HTML forms and backend PHP scripts
communicate effectively, especially when handling user input and data submissions.
o Solution: Implemented AJAX for smooth data submission and retrieval, and validated
inputs both on the client and server sides to ensure data integrity.
2. Database Schema Adjustments:
o Challenge: Aligning the database schema with the evolving requirements of the project,
including the addition of new features and correcting issues like missing columns or
tables.
o Solution: Updated database schema and queries to reflect changes, and utilized PDO for
secure and efficient database interactions.
3. Error Handling and Debugging:
o Challenge: Managing errors such as "Column not found" or incorrect redirects which
impacted the functionality of the web application.
o Solution: Debugged and corrected PHP scripts to ensure proper handling of database
operations and redirection logic.
4. User Interface Design and Usability:
o Challenge: Designing a user-friendly interface with Tailwind CSS while maintaining a
sleek and professional appearance.
o Solution: Applied Tailwind CSS effectively to achieve the desired design aesthetics and
improved usability based on feedback.
5. Functionality Testing:
o Challenge: Ensuring all functionalities, including login, question management, and
module management, work seamlessly and meet user requirements.
o Solution: Developed comprehensive test cases to validate each functionality, including
edge cases and error scenarios.
Results
1. Successful Integration:
o Result: The integration between frontend and backend was successful, allowing for
seamless data submission and retrieval. Forms are now correctly linked to backend
processing scripts.
2. Updated Database Schema:
o Result: The database schema was updated to include necessary columns and tables.
Functionality such as adding, updating, and deleting questions and modules works as
intended.
3. Improved Error Handling:
o Result: Implemented effective error handling, reducing the incidence of common errors
and improving the robustness of the application.
4. Enhanced User Interface:
o Result: The user interface was refined to meet the design specifications, resulting in a
visually appealing and user-friendly application.
5. Validated Functionalities:
o Result: All major functionalities were tested and validated. Test cases confirmed that the
application performs correctly under expected conditions and handles errors gracefully.

Discussion
1. Integration of Frontend and Backend:
o The integration process highlighted the importance of ensuring smooth communication
between the frontend and backend. Effective error handling and validation are crucial for
maintaining data integrity and user experience.
2. Database Schema Adjustments:
o The need for schema adjustments emphasized the importance of planning database
structure in advance and being prepared to make changes as requirements evolve. Proper
schema management is essential for the stability and functionality of the application.
3. Error Handling and Debugging:
o Encountering and resolving errors provided valuable insights into common issues faced
during development. A robust error-handling mechanism is vital for building reliable web
applications.
4. User Interface Design and Usability:
 o The design process reaffirmed the significance of creating an intuitive and aesthetically
pleasing interface. Tailwind CSS proved to be a powerful tool for achieving the desired
look and feel while maintaining design consistency.
5. Functionality Testing:
o The comprehensive testing approach ensured that the application meets user requirements
and performs as expected. Regular testing and validation are key to delivering a high-
quality product.
Overall, the project successfully addressed the challenges faced during development, leading to a well-
functioning and user-friendly web application. The results demonstrate the effectiveness of the solutions
implemented and provide a solid foundation for future enhancements.

X. Conclusion
The "Greenwich Confession" project successfully delivers a functional and aesthetically pleasing web
application. The design, implemented using Tailwind CSS, ensures a modern and responsive user
experience across devices.
The backend, built with PHP and PDO, provides a secure and efficient environment for managing user
interactions and data. Compliance with GDPR guidelines has been integrated to safeguard user privacy
and data protection.
The project effectively addresses various challenges, including seamless frontend-backend integration,
database schema adjustments, and robust error handling. The testing phase confirmed that core
functionalities, such as user login, question management, and administrative tools, work as expected.
Moving forward, the project has a solid foundation for further enhancement based on user feedback and
evolving requirements.