COMP1841

Web Programming 1

Title:
Student’s Name: Nguyen Anh Khoi
Student’s ID: GCH221106
Submission Date: 21/08/2024
Word Count:3899

Table of Contents
Standalone Files............................................................................................... 9
I.Abstract
II.

I.Abstract
This project revolves around the development of a web-based platform
designed to facilitate knowledge sharing and mutual support among students
regarding their courses. Built with PHP and MySQL, this platform serves as a
prototype for a simple, standalone question-and-answer system similar to
Stack Overflow. The core functions include creating, viewing, editing, and
deleting questions, as well as managing user accounts and card information.
The main objective of this effort is to promote a collaborative learning
environment where students can seek clarification, share insights, and work
together to overcome academic challenges. This platform encourages active
participation, critical thinking, and problem-solving skills, thereby enhancing
the overall learning experience.

Additionally, this platform aims to provide a user-friendly interface for

navigation, posting, and seamless interaction among students.

The main results of the project include a fully functional web application that
combines user authentication, CRUD operations for questions, user and tag
management, the ability to upload files for images/screenshots of questions,
and a contact form for administrative communication. The system adheres to
legal and ethical considerations, such as data privacy, accessibility
standards, and compliance with GDPR. Extensive testing, including unit tests
and manual test cases, has been conducted to ensure the quality and
reliability of the platform.
Overall, this project demonstrates the successful integration of PHP and
MySQL technologies to create a data-driven web application that meets the
needs of students, promotes peer support, knowledge sharing, and enhances
the learning experience.

II. Introduction

The objective of this project is to develop an online Q&A platform

specifically for students to seek support and share knowledge related to their
courses and assignments. The platform serves as a game-like system
template, aiming to provide a simple, secure environment similar to Stack
overflow, where students can create, view, edit, reply and delete questions
as well as manage user accounts and student tags. The importance of the
platform lies in its ability to foster a learning environment, enabling students
to exchange knowledge, access new knowledge for their studies. Students
can utilize this platform to search or share insights and overcome difficulties
in their studies or exams and also to enhance their learning experience. To
achieve this goal, the project uses PHP and MySQL as the core technology.
PHP is a widely used server-side scripting language that excels in web
development, allowing for dynamic content creation, data manipulation, and
seamless integration with databases. As for MySQL, it is a powerful and
widely used relational database management system (RDBMS) that provides
data storage and retrieval capabilities. This combination of PHP and MySQL
makes them an ideal choice for developing a student Q&A platform, allowing
for the management of student accounts, questions, and student information
in a centralized database.

III. Methodology
To develop the web Q&A platform, we use a comprehensive set of tools and
technologies to improve the interface and ensure an efficient and robust
development environment.

Tools and Technologies:

Technologies used:
PHP: The server-side language for developing the web application’s
logic and functionality.
 MySQL:A widely used and trusted database management system
(RDNMS) was chosen to store and manage application data. This includes
user accounts, questions, posts and answers, and student tags.
Tailwin CSS:A utility-first CSS framework similar to Bootstrap, it has
built-in classes that we can use. Tailwind CSS has a lot of classes that include
different CSS properties, and importantly, we can easily extend and create
new classes using its own classes.
Font Awesome:Is the internet’s icon library and toolkit, used by
designers, developers, and content creator.
Chat GPT: Use for add Tailwin CSS.

Development Enviroment Setup:

a development environment set up using xampp, a cross-platform
server solution that includes:
Apache, MySQL, and an interpreter for running PHP scripts locally. This
allows for efficient testing and debugging without the need for remote server
manipulation.
project files, including PHP scripts, HTML templates and CSS
stylesheets are organized in a structured folder hierarchy within the
document root of the XAMPP installation. This ensures proper separation of
concerns and maintainability of the code base.
MySQL databases are created and managed by PHPMyAdmin, a web-
based interface included in the XAMPP package, allowing for easy
administration, data manipulation, and schema management

IV. User Requirements

Requirements:
To ensure that the online Q&A platform meets the needs of the target
users and stakeholders, a comprehensive set of user requirements and
specifications were collected and documented.
In addition, inspired by the user interface of platforms such as Stack
Overflow, the project incorporates the concept of cards, replacing the usual
modules. Cards provide users with a familiar and intuitive way to categorize
and navigate through questions, mirroring the functionality on popular Q&A
websites. This adaptation ensures consistency with user experience
standards and the platform’s familiarity to users who are familiar with similar
interfaces. By prioritizing a layout reminiscent of Stack Overflow, the
platform aims to provide a seamless and intuitive knowledge sharing
experience for students.
User Requirements:
Feature Description
Questions Student can create new question with title, can sellect
management optional image and also can sellect type of module with
description. User can view a list of all question and can
edit and delete their question.
User Administrative can add, edit and delete user accounts,
Management question and view the list of message from student.
(Administrative) Admin can manage the list of student.
Contact form The platform provides a contact form for users to send
messages to the system administator
Accessibility and Accessibility compliance refers to adherence to
legal compliance standards, guidelines, and regulations that ensure
digital products, services, and content are accessible to
most types of users. The plaform complies with relevant
data protection regulations, such as GDPR, for user data
privacy.
User Interface The platform has a clean, intuitive, and user-friendly
and User interface. Navigation and interactions are consistent
Experience across all pages. The platform is responsive and mobile-
friendly

Use Case Diagram:

 Figure 1: user case diagram
This diagram provides a high-level overview of the platform’s requirements
and server as a foundation for further development and implementation
efforts.

V.Design
Database Schema Design:
The database diagram for the online Q&A platform is the designed to
eficiently store and manage the required data, while ensuring data integrity
and maintaining relationships between different entities.
The diagram includes the following tables:

Figure 2: Data schema table

1.Author table:
Stores student information such as name, email, username,
password, and role(student or admin).
2.Messages table:
Store list of student message contact include authorid and
moduleid.
3.Question table:
Stores the details of each questions, including the id, question
text, authorid, moduleid, and filetoupload to upload image.
4.Module table:
Store module content such as id, moduletext, and moduleName
for module description.

The relationships between tables schema are established by the

database structure, ensuring data integrity and facilitating efficient
 retrieval and querying of information. To maintain referential integrity
and ensure that questions are associated with valid users and tags, the
Questions table has foreign key constraints connecting it to the Users
table.

System Architecture Overview:

The system follows a typical three-layer architecture model, including the following
layers:
1. Presentation layer (Frontend):
- This layer will be responsible for displaying the interface to the user
and handling the interaction of user.
- HTML, Tailwin CSS, Font Awesome use to handle visual aesthetics
and user interface design.
2. Application layer(Back-end):
- This layer constain logic and handle data processing, validation and
communicate with the database.
3. Data layer(MySQL)
- The MySQL database used to store student information, question, contact
and message.

The three-tier architecture separates concerns, promotes modularity, and enables

easier application maintenance, security, and extensibility the application.

Files hierarchy:
file hierarchy is very important to manage all the file location, here í the file
structure of the CRUD website system combined with PHP, MySQL, TailwinCSS and
Font Awesome:

 Admin/: Contains all the administrative PHP files for managing

modules, questions, users, and messages.
o addmodule.php
o addquestion.php
o adduser.php
o admin_index.php
o deletemessage.php
o deletemodule.php
o deletequestion.php
o deleteuser.php
o editmessage.php
o editmodule.php
o editquestion.php
o edituser.php
o managemodule.php
 o manageuser.php
o questions.php
o view_message.php

 includes/: Contains PHP files related to database connections and

utility functions.
o DatabaseConnection.php
o DatabaseFunction.php

 sendmail/: Contains files related to sending emails, likely used for

notifications.
 Students/: Contains files related to the student interface.
 template/: Stores template files, potentially HTML or PHP files that
define the layout of the pages.
 uploads/: Directory for file uploads, such as user-uploaded documents
or images.
 vendor/: Contains third-party libraries, such as PHPMailer, that the
project depends on.
o PHPMailer-master/: Contains all the source files and language files
related to PHPMailer.

Standalone Files

 hashed.php: Likely handles password hashing or related functionality.

 index.php: The main entry point of the application.
 logout.php: Handles user logout.
 login_query.php: Manages login queries and authentication.

Sitemap
Detailed Description:
- index.php:
Purpose: first place to reduce space:
Features:
+ Authentication:
login:
Register: user who wants to create a new member will go through admin to
add new user.
Home:
Display: display active buttons for students to view details by clicking the
buttons.
 Add question:
post question: user can add their own question to the list of posted questions
- Question list: user when entering the question list page can search
previously posted questions:
view question details: display the full content of the question
- edit/delete question: if user has permission, they can customize edit or
delete their own question.
- Contact Us (Contact Admin):
Submit a Question: Users can submit a question form to the admin so that
the admin can receive questions and answers
- Navigation Flow:
Top Navigation: includes links to the home page (dashboard), add questions,
list of questions, contact us are displayed on all pages.
User Interface Design:
Login wire frame:

Figure 3:Wire frame of Login form

Wireframe for login, including links to the school's personal facebook or instagram
page, as well as about and contact in case the school can be contacted via hotline
or website.
Student home page wire frame:

Figure 4: Student home page wire frame

Add question for student wire frame:

Figure 5: Add question wire frame

Student can add any type of question here, assign any photo and choose what type
of module you want to ask.

View list of question for student site wire frame:

Figure 6: List of question wire frame

Student can see list of all question from any other student and they can delete or
edit their question in this frame.

Contact wire frame:

 Figure 7: contact to admin wire frame
Contact from for student to send email(via message) to admin about account
problem or coursework problem.

Profile wire frame:

Figure 8: Student profile wire frame

Admin home site wire frame:
 Figure 9: Administrator page wire frame

Student infomation management wire frame for admin:

Figure 10: Student information management wire frame

In this site admin can manage their student include their ID, student name, email,
username and password. Admin can also delete or edit student information.

Add more student account wire frame:

 Figure 11: Add student wire frame

This page is create for admin to add more student by adding name, email,
username and password.
Module management wire frame:

Figure 12: Module management wire frame

Admin can manage the module of question in this page and also can delete or edit
the module info.
Add module wire frame:

Figure 13: add module wire frame

Admin can add more module in this page.
View question list for admin site wire frame:

Figure 14: List of question on admin site wire frame

In this page it’s not much different from the student site, admin can delete and edit
the question from student.

Admin view contact list wire frame:

Figure 15: View list of contact wire frame

Admin can view list of messge from students and also can edit and delete them.

VI. Implementation
This section outlines the process of implementing the system's CRUD web
application using PHP, MySQL (with PDO) and tailwind CSS. The process is divided
into main areas including environment setup. Building the backend (PHP), interface
design (HTML, tailwind CSS, Font Awesome) and integrating the functions for each
interface.
CRUD Functionalities:
a. Install Necessary Software
- Xampp: Download xampp to run Apache, PHP and MySQL on your own
device(PC or Laptop)
- Visual Studio Code – Code Editing: the system used for development with
many benefis.
b. Setup a project file directory
Create a root folder in “htdocs”for the project, in the root folder system,
folder name wil be “CourseworkFN”
Inside the root folder file will have subfolder files: 'includes' for the
connection part of the local system, 'template' for HTML, and the remaining folders
are for the sub-functions of the system, as for tailwind CSS and Font Awesome will
be assigned to each interface
development part of the direct system.
c. Database Setup
Create MySQL database using phpMyadmin or command line
Import provided SQL files to create tables needed for the system
(author,`question`,`modules`,`messages`, etc.).
set up "Includes/DatabaseConnection" configuration file to manage database
connection using PDO.
1. Database Configuration
Create an “Includes/DatabaseConnection.php” file to manage connections
using PDO:

Figure 16: DatabaseConnection.php file to management connection

2. Implement CRUD Operations
Create Model: Create PHP classes to handle database operations for each
entity (author,`quesitons`,`modules`, etc.) Since students and administrators are
separate files, we will use PHP classes for separate files. Their functions will be
grouped into one file in the "includes/DatabaseFunction.php" file. Example for the
Question model (CourseworkFN/Students/questions.php)
&(CourseworkFN/includes/DatabaseFunction.php):

Figure 17: Students/questions.php

 Figure 18,19,20,21,22: DatabaseFunction.php
3. Authentication
Implement authentication logic, including login and session management, to
secure access to the application.
Frontend Development (HTML & Tailwin CSS)
Setup Tailwin CSS & Font Awesome
Install Taiwin CSS and Font Awesome by adding it via CDN in your HTML files
Example using CDN:

Layout Design
Use Tailwin CSS to style your page site. Start with basic wire frame layouts
and enhance them with Tailwin’s utility-first classes.
Example for Student layout page:
 Figure 23: Example for use Tailwin CSS
Integrate with Backend
-Connect the frontend form and display pages with backend logic PHP.
-Ensure dynamic data rendering by retrieving data from the database and
display it within your HTML template.

Deployment
Deploy the application to a web server (if using Xampp, the application will
be local, if using a live server, configure the application accordingly).
 Make sure the login information and database config are set up correctly for
the production enviroment.
Documentation
Document your code base, including details about your configuration,
database schema and any third-party tools or libraries used
Provide a user guide that explain how to use the application, including
features like adding questions and manage profiles.

VII. Discussion on GDPR Compliance for the CRUD Web

Application.
An EU-wide regulation known as the General Data Protection
Regulation (GDPR) lays forth guidelines for the collection, use, and storage of
personal information belonging to any person who resides in the EU.
Whether you are or are not, the GDPR law establishes guidelines for what
sharing is permitted and prohibited as well as how to safeguard user data
across Europe.
GDPR Guidelines and Their Applicability
1. Lawfulness, Equity, and Openness:
- Legality: A legitimate basis (such as a contract or consent) must exist for
data processing.

- Fairness: Handle data in a fair manner that doesn't harm consumers.

- Transparency: Using terms of service and privacy rules, clearly notify users
about what data is collected, how it is used, and their rights.

2. Restrictions on Purpose:

- Don't use data for unrelated objectives; instead, only gather it for clearly
defined, precise purposes.

3. Minimization of Data:

- Only collect the information required to achieve the goal.

4. Precision:
Make sure the data is correct and current and give people the ability to
update their records.

5. Storage Limitation:
 Give users an account, keep their personal information only as long as
necessary, and remove their ability to access their records.

6. Security:

-Encrypt information, safely keep passwords, and keep your software

updated.

7. Responsibility:

Keep track of all data processing operations and confirm that services
provided by third parties adhere to the GDPR.

User Rights Under the GDPR:

Users have the right to access their personal data and the ways in which it is
handled.

Users have the ability to correct erroneous data.

Users have the right to request that their personal data be erased.

Right to Restrict Processing: Users have the ability to control how their data
is used.

The ability for users to access their data in a structured

structure.

Right of Objection: People have the ability to protest the processing of their
personal data.

In summary, user identity preservation and avoiding possible legal issues

depend on GDPR compliance. Maintaining/continuing the organization's
GDPR compliance will be made easier by implementing measures for a more
secure system and carefully monitoring new laws.

VIII. Testing
Testcase and scenarios
In this project, we will then have to have test cases since these are critical since
they only check on the most important parts of this system to make sure they are
as functional as expected. Besides this, there will be also test scenarios We will also
have test scenarios. The specific ideas are as follows:
Test cases/test scenarios will be presented below.
Test case number one:
Student login with valid credential.
First open the login page:

Then enter the right username and password of user “jacobdang”:

Click “Login”

*Result: Student is logged in and redirected to the Student home page.

*Status: Pass

Test case number two:

Student login with invalid credentials
First access the login page:

Then enter the incorrect information (username or password)

Click “login”
After that, one message display:

*Result: Student cannot loggin in to home page.

*Static:Fail

Testing Method Description

- Manual testing and automated testing are united in this process so that a
more precise estimation of the system can be made.
- This testing is done by a team using given test cases and covers
functionality, usability and normal working procedure.
- Automated testing and continuous integration also includes unit-testing
with PHPUnit and integration tests supported by the CI-pipeline via GitHub
Actions: Here, tests and code quality is checked on every code change.
It also ensures identification of pertinent problems at the initial phases of a
project hence improving the quality of codes developed in every stage of the
same project.

IX. Challenges and Solutions

challenges and solutions
1. Challenge: Security and User Authentication
Login stuffs and how to encrypt passwords to counter some basic hazards in
security, i.e., On this account should not be possible in recovery. log or
closed vulnerability type similar to OS command injection or any other
vulnerability such as SQL Injection, XSS etc.
- Solution:
- Update: Here are the available PHP password hashing functions : —
password_hash () and —
password_verify() For the storing of passwords for authentication.
Do not use SQL Injection, instead use PDO with prepared statements.
Perform input data check and cleansing, a lot of HTTPS and secure session
settings to store and/or preserve user data.
2. Challenge: Database Design and Management – Problem: Achieve a
standard, and one that will easily allow the system to grow.
structure, design where integrity of data is not compromised at each level. -
Solution:
Normalized database schema should be designed to eliminate redundancy
and data inconsistencies whenever designing the database.
Foreign keys must be employed so that you have the ability to link your data
and ensure that all the key fields have proper reference.
Regular backing up of the database and frequent query optimization should
be done in order to enhance a smooth running of the system.
3. Challenge: Managing CRUD operations – Issue: The capability of the
system to perform the desired activities like create, read, update, delete
operations for the data alongside corresponding permissions user.
- Solution:
*Arrange the source code into general reusable functions and also usable
modules.
*Implement the role based authorization system (RBAC) to decide what kind
of operations are permissible to the users.
*In computing complex workflows employ links across PDOs to wisely
manage data consistency.
4. Challenge: Responsive Interfaces using Tailwind CSS
- Problem: Develop a responsive user interface to the application
incorporating an ability to be used on various devices and different screens.
- Solution:
Make interfaces with first user experience utmost consideration with the help
of Tailwind CSS.
reducing custom CSS code.
Employ the grid and the flex widgets offered by Tailwind to make the
structure of the interface thoughtful.
On the same note, this is the time to keep running the interface on different
devices to make sure it delivers accurate results and if users will have a
disconnected experience.
5. Challenge: Managing User-Generated Content - Problem: Cope with data
processing, for example, questions and
It does not mean that allowing comment does harm the security or the
quality of the data that is served to the public. - Solution:
XSS attacks should be prevented and the input data must be monitored and
repaired.
Perhaps one should design a notification and flagging system that would
assist
users manage inappropriate content.
It is wise to employ the utilize HTML sanitization libraries to use secure
inputs, particularly where
allowing fine-grained text.
6. Challenge: Optimization of Systems - Issue: Large volumes of data are
required to be dealt by the system for future requirements also.
The number of users and the number of questions gets much larger, yet the
response time remains unchanged. - Solution:
It is required to use indexes that will be useful for the quick search of data in
important fields.
Reduce the number of SQL selects with complex joins, do not use complex
joins and use caching when
necessary.
Use pagination for large questions list to enhance the overall look on the part
of the user and to decrease the load on the server.
With the above challenges, it has been possible to apply the right solutions
that will favor the operation of the system today and in the future as well as
having the assurance of security, ease of management and expansion.
X. Conclusion
In conclusion, the positive results of the project to create a question sharing
system for students can be highlighted: students have the opportunity to
post and manage questions easily; the interface is designed to be simple and
easy to use. PHP PDO with the help of standardized DB design allows for
security and improved performance of the system. Likewise, the
incorporation of Tailwind CSS has ensured that the interfaces are developed
efficiently and users have a good experience with any device. Although the
proposed system is a very simple one, there is still potential for future
development by adding new features to the system, such as refined user
authorization features, advanced search options and stricter content
regulations. As the development team realized while working on this project,
some important lessons were learned regarding the planning phase, as well
as security and performance issues. The project not only meets the
requirements of the present time but is also designed to grow and be added
to in the next versions.