Project Main

Index
1. System Overview 1
1.1. Purpose 1
1.2. Scope 1
1.3. Functional requirements 1
1.4. Non-functional requirements 3
1.5. User of the system with their characteristics 3
1.6. Tools and technology 5
1.7. Summary 6
2. System Design 7
2.1. Use case Diagram 7
2.2. Activity Diagram 12
2.3. System Development Model 16
2.4. Standards for implementation of functionalities 18
2.5. Database Design 20

2.6. Data Dictionary 40
2.7. Summary 42
3. User Interface Implementation 43
3.1. Guest User Home page 43

3.2. Registered user home page 46
3.3. Moderator home page 49
3.4. Employee user home page 51
3.5. Admin home page 53
4. Implementation of Functionality 55
4.1. Log in & Sign in 55
4.2. Employee registration page 57
4.3. Ajax Suggestion Search Bar 58
4.4. Profile Menu 61
4.5. Upload Box 63
4.6. Trending Bar 67
4.7. Question Box 71
4.8. Answer Box 77
4.9. Save Questions and Answers 85
4.10. Employee management page 88
4.11. About page 91
5. TPS Reports 93
5.1. Moderator TPS Reports 93
5.2. Employee monthly verification MIS report 97
6. Project Testing 101
6.1. Login functionality 101
6.2. Question upload box 102
6.3. Upload answer box 104
6.4. Search Box 105
6.5. Summary 106
202103100110085, 202103100110057, 202103100110059, 202103100110071 II | P a g e

Akshar Tours & Travels
1. System Overview
1.1. Purpose
1.1.1. Definition
- Akshar Tours and Travels is a Car Rental Website that can be used for Cab
Booking Services from Surat to Outstation. It Provides Cab services from
Surat to Certain Places near Surat. The company aims to provide easy, safe,
and cheap rides by using automation in cab booking services.
1.1.2. Objective
1.1.2.1. Easy and Fast way to Car Booking from Surat
- The Primary objective of our forum website is to provide seamless and
effortless car rental services from Surat to nearby outstations with
competitive rates and transparent pricing structures, with no hidden fees or
surcharges. User can book a car from their home at any time of the Day with
just a few Clicks.
1.1.2.2. 24/7 Information and Customer Support AI-based Chatbot
- Providing 24/7 customer services using an AI-based Chatbot on our website.
A user can visit our website at any time of the day and can access
information about our company using our Chatbot also users can use the
chatbot for easy car booking.
1.1.2.3. Safe and Secure rides at a very affordable pricing.
- We are committed to providing safe and secure rides by providing
registered and professional drivers and, we are committed to providing
affordable rides, so we offer car services at 10% lower prices on every
booking.
1.1.2.4. Multiple Payment Method support for easy payment
- We Support payments in Cash, Phone pay, Paytm, UPI, etc. Multiple
Payment Options to ease the process of payment for the user. A user can
complete his payment either from mobile or by visiting our office.
1.1.2.5. Easy Booking Process from WhatsApp.
- Our Booking Integration with WhatsApp will help the customer on booking
the car from their WhatsApp. Users can Simply book a ride on WhatsApp
Chat by answering a few questions in a minute. It's a completely safe and
efficient way of booking a car for rides.
1.2. Scope
1.2.1. Field scope
- The website will only show questions that are related to the choices the user
made during the login process.
1.2.2. Execration scope
- The website won’t allow the usage of any profanity or expletives and will
impose strict policies on it.
1.3. Functional requirements

1|Page
1.3.1. Booking Management System

 The BMS (Booking Management System) will allow the admin to book a ride, update
any already booked ride, view them, verify them, search for an old booking by
Mobile number, username, and car name as well as assign a driver and deciding the
total amount of a ride.
 In this system, an admin can also set the status of payment as paid or unpaid, and if
it is paid then which payment was chosen for the payment of the ride.
 An admin can book a ticket for the customer and is also able to set the price for the
ride.
 An admin in BMS while booking a ride can do the following things: Select the Car
Type, select a Driver, edit the total amount based on tax and other expenses, and
lastly, he can set the payment status whether it is Remaining or Completed.
 On the BMS interface admin will see all the booked rides in a tabular form whether
they are paid or unpaid with some booking details in the columns as ID, Username,
Mobile Number, Pickup Date, Drop Date, Total Days, Car Name, Payment Status,
Action.
1.3.2. Car Management System
 The CMS (Car Management System) will enable the admin to add a new car, delete a
car, and edit a car's details.
 In this system, an admin can add a car by taping on the ADD Car Button and then
providing some information like Car Name, Car Type, Car Image, Seating Capacity,
bag carrying capacity, compulsory KM, Minimum and Maximum Price. also, while
adding a car by uploading a car image, we can see a preview of the image chosen.
 In the edit section of a car, an admin can edit the details of a car that he has filled
while adding a car to the car list.
 Basically, in CMS an admin can add or delete a car so that the admin knows which
cars are available for the ride booking.
1.3.3. Driver Management System

 DMS (Driver Management System) will provide information about a Driver in a
particular Month to evaluate the driver's performance.
 By searching the name of a Driver in DMS an admin can access the information of a
driver in a tabular form with columns like Driver Name, Total Days, Total KM, Total
Charges, etc.
 In addition to driver information if the admin applies filters for a particular month
of a particular year, then he will get the performance information of that driver in
that month of the year.
1.3.4. Dashboard
 On the dashboard, the admin will get the summarised information of the bookings
on the website in table and pie chart form A registered user and moderator can
create tags.
 The first four plates give the basic information to the admin like total active users,
total number of trips completed, the total number of bookings completed, and how
many trips have been completed their payment means they are paid, and how many
are unpaid from the total registered bookings.
2|Page
 Now in the middle of the Dashboard Page, we see an option for booking statistics
where we get the graphical representation of the bookings in a particular year
month-wise. It will help to understand the booking patterns by showing monthly
bookings.
 Now on the right side of that, there is a Pie chart named Total Revenue which
describes the Revenue generated from the bookings of the trips.
 The pie chart shows the total revenue of a company divided into three parts:
o Net Amount: It is the revenue that the company receives from its customers,
minus the cost of goods sold and other direct expenses.
o Company Margin: Company margin is the difference between the net
amount and the total driver charges. It represents the profit that the
company makes on each dollar of revenue.
o Total Driver Charges: Total driver charges are the fees that the company
pays to its drivers for delivering goods or services to customers.
1.3.5. Voting Management System

 A registered user and moderator can cast votes (up vote or down vote) on various
answers and questions.
 Based on the number of upvotes on answers to a question, they are arranged in
descending order.
 Questions are filtered to appear in the trending section based on the number of
upvotes they receive.
 Guest users are unable to vote on a question or an answer.
 This system analyses the votes for the questions and answers and creates a list of
trending questions as a result.
1.3.6. Users' Management

 Employees can be added and removed by the administrator.
 An employee user has the ability to add moderators, suspend moderators, and ban
registered users.
 Moderators watch registered user activities, and if any suspicious content occurs,
they report it to employee users.
1.3.7. News management (implements in future)

 A registered user, admin, and moderator will receive news according to his/her
preference in his feed.
 A guest will receive random news in his/her feed.
1.4. Non-functional requirements

1.4.1. Security
3|Page
 Data encryption to protect sensitive information from unauthorized access.

 Authentication and Authorization to ensure only authorized users can access the
website's resources.
 Client side and server-side input validation to prevent malicious attacks.
 We are preventing SQL injection through PHP preparer statement.
1.4.2. Usability
 The system will be optimised so that it can be used by people with disabilities and
other issues.
 The system will be responsive and will be available for all screen sizes.
1.4.3. Compatibility
 The system can be operated in all modern browsers such as Google Chrome,
Microsoft Edge, Mozilla Firefox, Opera Mini, and legacy browsers such as Internet
Explorer.
1.5. User of the system with their characteristics

1.5.1. Guest user
 Guest user does not require a login and they can only view questions and answer,
they can’t give votes and this user is just a spectator who can’t exercise any
functionalities of an active user experience.
1.5.2. Registered user

 A registered user can ask a question, provide an opinion, or respond to the question,
and vote positively or negatively on the answer.
1.5.3. Moderator
 Responsible for ensuring that the website's policies and guidelines are being
followed by all users.
 Can view, vote, upload, and verify questions and answers.
 Can send update notifications to the uploader and report questions and answers to
an employee user.
 Has the ability to delete answers that violate the website's policies and guidelines.
 Can create tags and tag descriptions.
 Monitors registered user activities and reports any suspicious content to employee
users.
 Helps to foster a welcoming environment free of unnecessary negativity and
ambiguity.
 Plays a crucial role in improving the user experience by verifying the content and
ensuring the accuracy and relevance of the questions and answers.
 Acts as a mediator between the registered users and the employee users in
resolving any disputes or issues that may arise.
1.5.4.1. Qualities to select a moderator:
4|Page
- Experience in managing online communities or moderating similar

platforms to have a clear understanding of community management and
moderation techniques.
- Ability to work well under pressure and make decisions quickly in a fast-
paced environment.
- Strong communication skills to interact with users, other moderators, and
employees effectively and professionally.
- Adept at conflict resolution to handle any disputes between users or handle
cases of inappropriate behavior.
- Excellent attention to detail to ensure the questions, answers, and tags are
accurately and appropriately categorized.
- Empathetic and patient to handle user complaints and feedback
constructively while maintaining a positive relationship with users.
- Technical proficiency to understand and navigate the platform, its features,
and its policies.
1.5.5. Employee user

 Because an employee works for the company, they have the authority to remove
questions and answers from the site if they violate the stated policies.
 An employee user has the ability to add moderators, suspend moderators, and ban
registered users.
 Facilitating the events hosted by the website, such as hosting some polls (for
instance, a poll for the most popular programming language).
1.5.5.1. Qualities to select an employee user
- Strong problem-solving skills to be able to manage and resolve issues
related to questions, answers, and users on the platform.
- Attention to detail to ensure the questions, answers, and tags are
accurate and appropriately categorized.
- Excellent communication skills to interact with other employees,
moderators, and users effectively.
- Good time management and prioritization skills to handle multiple tasks
and meet deadlines.
- Technical proficiency to understand and navigate the platform, its
features, and its policies.
- Professionalism and integrity to maintain a safe and welcoming
environment on the platform and to handle sensitive and confidential
information appropriately.
1.5.6. Admin user

 An admin user is a user who practises the highest authority, i.e., reviews other
employee user activities.
 An administrator has the ability to add and remove employees from the system.
1.6. Tools and technology
5|Page
1.6.4. Tools
1.6.4.1. VS Code
- Visual Studio Code is a source code editor that is likely used by the
development team to write and edit code for the website. It includes
support for debugging, embedded Git control, syntax highlighting,
intelligent code completion, snippets, and code refactoring.
1.6.4.2. Sublime
- Sublime Text is a popular text editor among web developers due to its
speed and flexibility. The development team may use it for writing and
editing code for the website.
1.6.4.3. NetBeans
- NetBeans is an integrated development environment (IDE) that supports
various programming languages such as HTML, CSS, JavaScript, and PHP.
It provides a code editor, a compiler, and a debugger, also has a built-in
feature that allows you to easily run and test web pages in a browser.
1.6.4.4. MySQL 8.0 Command Line Client

- MySQL is a widely used in web development, this command-line interface
(CLI) allows the development team to interact with the website's database
and execute SQL statements, create and manage tables, and more.
1.6.4.5. XAMPP
- XAMPP is a software stack that includes Apache, MySQL, and PHP, which are
commonly used together in web development. It allows the development
team to set up a local web development environment on their computer.
1.6.5. Technology
1.6.5.1. HTML5
- Hypertext Mark-up Language (HTML) is the standard mark-up language
used to create web pages. The AsQ website likely uses HTML5 to create the
structure of the website.
1.6.5.2. CSS4
- Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in HTML. The AsQ website likely uses
CSS4 for styling the website.
1.6.5.3. SCSS
- SCSS is an extension of CSS that adds more advanced features, such as
variables and nesting. The development team may use it to write more
maintainable and organized code.
1.6.5.4. JavaScript
6|Page
- JavaScript is a programming language that is commonly used to create

interactive web pages and front-end web development. The AsQ website
likely uses JavaScript to create dynamic effects and animations, validate
forms, and much more.
1.6.5.5. JQuery
- JQuery is a popular JavaScript library that makes it easier to work with
HTML documents, handle events, create animations, and develop AJAX
applications. The development team may use it to simplify the JavaScript
code.
1.6.5.6. MySQL 8.0.3
- MySQL is an open-source relational database management system (RDBMS)
that is widely used in web development. The AsQ website likely uses MySQL
8.0.3 to store and manage data.
1.6.5.7. PHP 7.4
- PHP is a server-side scripting language that is commonly used in web
development. The AsQ website likely uses PHP 7.4 for server-side scripting
and to interact with the website's database.
1.7. Summary
1.7.4. Number of functional requirements: 7
1.7.5. Number of non-functional requirements: 3
1.7.6. Number of users: 5
2. System Design
2.1. Use case Diagram
2.1.1. List of Users
 Guest User
 Registered User
 Moderator
 Employee
 Admin
2.1.2. User-wise use-case diagram

2.1.2.1. Guest user
7|Page
[Guest user use case diagram]
2.1.2.2. Registered user
8|Page
[Registered user use case diagram]
2.1.2.3. Moderator
9|Page
[Moderator use case diagram]
2.1.2.4. Employee user
10 | P a g e
[Employee use case diagram]
2.1.2.5. Admin user
11 | P a g e
[Admin use case diagram]
2.2. Activity Diagram

2.2.1. List of Users
 Guest User
12 | P a g e
 Registered User
 Moderator
 Employee
 Admin
2.2.2. User-wise activity diagram

2.2.2.1. Guest
- Guest user doesn’t have any activities. So Guest users don’t require an
Activity Diagram.
2.2.2.2. Registered_User
[Registered user activity diagram]

2.2.2.3. Moderator
13 | P a g e
[Moderator Activity Diagram]
2.2.2.4. Employee
14 | P a g e
[Employee use activity diagram]
2.2.2.5. Admin
15 | P a g e
[Admin user activity diagram]
2.3. System Development Model

2.3.1. Agile software development model
Project 16 | P a g e
charter
Design
User stories
documentation
[Steps of agile software development model for AsQ]
2.3.1.1. Project charter

~ Create a project charter document that outlines the overall goals,
objectives, scope, timelines, and resources needed for the AsQ
website project. This document should also include information on
the project team and any constraints or risks associated with the
project.
2.3.1.2. User stories
~ Create user stories that describe the specific functionality and
features of the AsQ website from the perspective of the end-users.
These documents should include information on the user's goals,
needs, and acceptance criteria for each feature.
2.3.1.3. Product backlog

~ Create a prioritized list of user stories and features that will be
implemented in the AsQ website. This document should include a
brief description of each item and its relative priority within the
project.
2.3.1.4. Sprint backlog
~ Create a sprint backlog that outlines the specific user stories and
features that will be implemented during each sprint. This document
should include information on the tasks, timelines, and resources
needed to complete each item.
2.3.1.5. Sprint retrospective
~ Conduct a sprint retrospective at the end of each sprint to
summarize what was accomplished during the sprint, what went
well, what could have gone better, and what actions will be taken to
improve future sprints.
2.3.1.6. Acceptance test
~ Create an acceptance test document that outlines the specific tests
that will be conducted to ensure that the AsQ website meets the
acceptance criteria defined in the user stories. This document should
include information on the test scenarios, expected results, and any
pass/fail criteria.
2.3.1.7. Deployment plan
~ Create a deployment plan that outlines the steps that will be taken to
deploy the AsQ website to production. This document should include
information on the testing, training, and support that will be
provided to users.
2.3.1.8. Technical documentation
17 | P a g e
~ Create technical documentation that includes all the technical details

of the AsQ website, such as architecture, design, code, and any third-
party tools or integrations.
2.3.1.9. Design documentation
~ Create design documentation that includes all the design aspects of
the AsQ website such as wireframes, mock-ups, and visual design
elements.
2.3.2. Reasons to choose the agile software development model

2.3.2.1. Flexibility
~ Agile development allows for changes and feedback to be
incorporated quickly and easily into the development process. This
is particularly important for an AsQ website, as the needs and
preferences of the users are likely to evolve over time and the
website should adapt to them.
2.3.2.2. Rapid development

~ Agile development allows for the creation of an MVP (minimum
viable project) quickly and iteratively. This is particularly important
for an AsQ website, as an MVP can be launched and tested with
users, gathering feedback and improving the product based on the
results.
2.3.2.3. Continuous improvement
~ Agile development emphasizes continuous improvement, which is
crucial for an AsQ website. As users continue to ask and answer
questions, the website will need to be updated and improved to meet
the changing needs of the user base and also the clients who post the
questions.
2.4. Standards for Implementation of Functionalities

2.4.1. coding standard
2.4.1.1. Naming Conventions
- Use descriptive names for variables, functions, and classes.
- Use camelCase for variables and functions, and PascalCase for classes.
- Use underscores (_) for private class properties and methods.
- Avoid using single-letter variable names.
2.4.1.2. Indentation
- Use four spaces for indentation, not tabs.
- Indent code blocks consistently.
- Use braces ({}) to enclose code blocks, even for one-line statements.
2.4.1.3. Comments
- Use comments to explain complex or important parts of the code.
18 | P a g e
- Write comments in complete sentences with proper grammar and

punctuation.
- Avoid redundant comments that simply repeat the code.
2.4.1.4. Error Handling

- Handle errors gracefully and provide informative error messages.
- Use try-catch blocks for exception handling.
- Log errors to a file or database for debugging purposes.
2.4.1.5. Security
- Sanitize user input to prevent SQL injection and other security
vulnerabilities.
- Use encryption for sensitive data, such as passwords.
- Implement access controls to restrict user privileges and prevent
unauthorized access.
2.4.1.6. File Organization

- Use meaningful names for folders and files.
- Group related files into folders, such as endpoints, database, includes,
and components.
- Avoid storing sensitive data or credentials in the codebase.
2.4.1.7. API'S (Built-In api) File System APIs

- move_uploaded_file() : used for moving a file to the server
- rename (): used for renaming a file (if it has the same name)
2.4.1.8. String Manipulation APIs

- strlen(): Returns the length of a string.
- str_replace(): Replaces all occurrences of a string in another string.
- substr(): Returns a portion of a string.
- strpos(): Finds the position of the first occurrence of a substring in a
string.
2.4.1.9. Date and Time APIs

- time(): Returns the current Unix timestamp.
- date(): Formats a timestamp into a human-readable date and time
string.
- strtotime(): Parses a date string and returns a Unix timestamp.
2.4.1.10. Database APIs

- PDO(): Connects to a MySQL database.
- PDOOBJ->execute(): Executes a MySQL query.
- PDOOBJ->fetchAll(): Fetches a row from a MySQL result set as an
associative array.
19 | P a g e
2.4.1.11. Regular Expression APIs

- preg_match(): Searches a string for a pattern using a regular
expression.
- preg_replace(): Replaces all occurrences of a pattern with a
replacement string.
- preg_split(): Splits a string into an array using a regular expression.
2.4.1.12. 3rd Party APIs

- Google Maps Api - Used for locating the location of the Companies
Location
20 | P a g e
2.5. Database Design

2.5.1. Field
2.5.1.1. Description
- Metadata about users which indicates the user's interests and professional
background.
2.5.1.2. Attributes, data type, size, and constraints
2.5.1.3. Related Details

Purpose of the table Field relation is used to Store data about
different types of fields already in the
system and the fields that'll be later
created.
This relation will be used for filtering of
data based on fields
Related Entities Field
Related Processes Field Management
2.5.1.4. Sample Data
2.5.2. Admin_User
21 | P a g e
- Admin_User is responsible for maintaining and updating the website. This
includes tasks such as adding and removing employees, monitoring website
traffic and performance and troubleshooting technical issues.
2.5.2.2. Attributes, data type, size and constraints
Purpose of the table The purpose of storing admin data in a

database is to organize and manage the
information in a way that allows for
efficient retrieval, manipulation, and
analysis by the admin. This can include
tasks such as searching for specific
information, generating reports, and
maintaining data integrity. It can also be
used to keep track of user activity,
resource utilization.
Related Entities Admin
Related Processes Log in, Profile Management
2.5.3. Employee_User
22 | P a g e
- This user is responsible for monitoring and enforcing the rules of a website,
ensuring a safe and positive environment for all users by reviewing,
approving, removing content and moderating user interactions, and
banning or warning violators.
2.5.3.2. Attributes, data type, size, and constraints

Purpose of the table The purpose of storing Employee data in
a database is to organize and manage the
analysis by the website employees. This
can include tasks such as reviewing user
activity, tracking user violations, and
maintaining data integrity. By storing
employee data in a database, website
admin can have an accurate record of
moderation activities and user
interactions, which can be used to
analyse the performance of the
moderation team, identify patterns of
user behaviour, and make informed
decisions about how to improve the
website.
Related Entities Employee, Admin

Related Processes Log in, Profile Management, Report
Management
23 | P a g e
24 | P a g e
2.5.4. Registered_User
- Primary users of our website who have been registered in our database.
Purpose of the table The purpose of storing registered user

data in a database is to organize and
manage the information in a way that
allows for efficient retrieval,
manipulation, and analysis by the
website admin. This can include tasks
such as tracking user activity,
personalizing the user experience, and
registered user data in a database,
Admin user, Employee and moderator
can have an accurate record of user
information, which can be used to
analyze user behaviour, improve
customer service, and make informed
decisions about how to improve the
website. They can see their activity,
questions, answers and other
information in one place.
Related Entities Registered_User, Field, Employee

Related Processes Sign In, Log In, Profile Management,
Field Management
25 | P a g e
2.5.5. Interest
26 | P a g e
~ Interest is type of table which is used to store user’s interested fields

which are optional.
Purpose of the table This table is use to filter questions

based on users’ preference.
Related Entities Field
Related Processes Field Management
27 | P a g e
2.5.6. Moderator
~ This user is responsible for monitoring and enforcing the rules of a
website, ensuring a safe and positive environment for all users by
reviewing, approving, removing content and moderating user
interactions and banning or warning violators.

Purpose of the table The purpose of storing moderator data in
a database is to organize and manage the
analysis by the website moderators. This
can include tasks such as reviewing user
activity, tracking user violations, and
moderator data in a database, website
administrators can have an accurate
record of moderation activities and user
interactions, which can be used to analyse
the performance of the moderation team,
identify patterns of user behaviour, and
make informed decisions about how to
improve the website.
Related Entities Registered_User, Employee
Related Processes Log in, Profile Management
2.5.6.5.
28 | P a g e
2.5.7. Tag
- Storing hashtags refers to the practice of organizing and categorizing
questions and answers by tagging them with specific keywords or phrases,
preceded by the "#" symbol. These hashtags act as labels that make it easier
for users to find relevant content by searching for specific topics or
keywords.
Purpose of the table The purpose of storing hashtags data in

a database is to organize and manage
the information in a way that allows for
analysis by the website administrators.
Hashtags can be used to categorize and
organize questions and answers,
making it easier for users to find
relevant content. By storing hashtags
data in a database, Admin can have an
accurate record of hashtags used by
users, which can be used to analyze the
popularity of certain topics, identify
trends and make informed decisions
about how to improve the website.
Related Entities Tag, Registered_User
Related Processes Tag Management, Profile Management
29 | P a g e
2.5.8. Question
- This table refers to the practice of collecting and saving user-submitted
questions on the website in a database for easy retrieval, manipulation, and
analysis. This improves the user experience by providing relevant answers
and suggestions, and can also be used to improve the website's search
functionality and overall performance.
Purpose of the table The purpose of storing questions data in

a database is to organize and manage
the information in a way that allows for
analysis by the website administrators.
It allows for the improvement of the
user experience by providing relevant
answers and suggestions, and can also
be used to improve the website's search
functionality and overall performance.
Related Entities Question, Tag, Registered_User, Admin,

Field
Related Processes Question Management, Answer
Management ,Field Management

30 | P a g e
31 | P a g e
2.5.9. Like_Question
- Use to store users votes on question.
Purpose of the table To filter questions based on number of

total votes which given by users.
Related Entities Question, Registered_User

Related Processes Question Management, Trending
Management ,Search Management
32 | P a g e
2.5.10. Save_Question
- Use to save questions in profile.
Purpose of the table To filter questions based on number of

Related Entities Question, Registered_User

Related Processes Question, Trending ,Search
33 | P a g e
2.5.11. TagQuestion
- Tags can be used to improve the organization and management of the
questions, as well as to make it more discoverable and searchable.
Purpose of the table The purpose of this table is to store in-

built tags and user-defined tags in the
database so if the same tags were to be
used again there won't be any data
redundancy.
Related Entities Question, Tag

Related Processes Question Management, Trending
34 | P a g e
2.5.12. Answer
- This table refers to the practice of collecting and saving answers to the
questions submitted by the users on the website in a database for easy
retrieval, manipulation, and analysis. The answers are usually provided by
the community of users or experts in the field. This allows for the
improvement of the user experience by providing relevant and accurate
answers and can also be used for analytics and reporting purposes.
Purpose of the table The purpose of storing answers data in

a database is to make them easily
accessible to users and to maintain their
integrity. This allows for the
improvement of the user experience by
providing relevant and accurate
answers, and can also be used to
improve the website's search
functionality and overall performance,
as well as for analytics and reporting
purposes.
Related Entities Answer, Question, Registered_User,

35 | P a g e
Employee, Moderator
Related Processes Answer
2.5.13. Like_ Answer

- Use to store users votes on answers.
36 | P a g e
Purpose of the table To filter Answers based on number of

Related Entities Answer, Registered_User

Related Processes Question, Answer, Trending, Search
2.5.14. Save_Answer
- To store the answers which user want to save.

37 | P a g e
Purpose of the table It will be used to store the answers

saved by the users
Related Entities Answer, Tag

Related Processes Answer Management, Trending
2.5.15. TagAnswer
- Tags can be used to improve the organization and management of the
answers, as well as to make it more discoverable and searchable.
38 | P a g e
Purpose of the table It will be used to store the answers

submitted by the users
Related Entities Answer, Tag

Related Processes Answer, Trending ,Search
2.6. Data Dictionary

Column Name Data Type Nullab Description Sample Value
le
Admin_Email VARCHAR( NOT Email address of the "jane.smith@example
50) NULL admin user .com"
Admin_Id varchar NOT Primary key for table admin001
39 | P a g e
NULL
Admin_Name VARCHAR( NOT Name of the admin user "Jane Smith"
50) NULL
Admin_Password char NOT Password for admin password
NULL user
Answer_Description TEXT NOT The description of the "The answer to your
NULL answer provided by a question is..."
user.
Answer_Id VARCHAR( NOT A unique identifier for "A1"
16) NULL the answer provided by
a user.
Answer_Like BOOLEAN NULL Indicates whether a true/false
user liked the answer or
not.
Created_User varchar NOT References "user123"
NULL Registered_User
(Registered_User_Id)
Delete_by_Employee_Id varchar NULL References "emp456"
Employee_User(Employ
ee_Id)
Delete_by_Moderator_Id varchar NULL References "mod789"
Moderator(Moderator_I
d)
Delete_Date DATE NULL Date when question was "2022-03-15"
deleted
Employee_Address varchar NULL Address of the "123 Main St"
employee
Employee_Activation_Date date NOT Date when employee's 44562
NULL account was activated
Employee_Deactivate_Date date NULL Date when employee's 44926
account was
deactivated (if
applicable)
Employee_Department varchar NULL Department of the "IT"
employee
Employee_DOB date NOT Date of birth of 34731
NULL employee
Employee_email char NOT Email address of john.doe@example.co
NULL employee m
Employee_Hire_Date DATE NOT Date when the "2021-01-01"
NULL employee was hired
Employee_Id varchar NOT Primary key for table emp001
NULL
Employee_mobile_number char NOT Mobile number of 1234567890
NULL employee
Employee_name char NOT Name of the employee John Doe
40 | P a g e
NULL
Employee_Password char NOT Password for employee password123
NULL user
Employee_permanent_address varchar NOT Permanent address of 123 Main Street,
NULL employee Anytown, USA
Employee_Position VARCHAR( NULL Position of the "Manager"
50) employee in the
company
Employee_Salary decimal NULL Salary of the employee 50000
Field_Full_Name varchar NOT Full name of the field First Name
NULL
Field_Id varchar NOT Primary key for table field_001
NULL
Field_Sort_Name char NULL Short name for field FN
Moderator_Id VARCHAR NOT Unique identifier for "mod123"
NULL moderator
Moderator_Mode_Activate_Date DATE NOT Date when moderator "2022-02-15"
NULL mode was activated
Moderator_Mode_Activate_Emp VARCHAR NOT References "emp123"
loyee NULL Employee_User(Employ
ee_Id)
Moderator_Mode_Deactivate_D DATE NULL Date when moderator "2022-02-25"
ate mode was deactivated
Moderator_Mode_Deactivate_E VARCHAR NULL References "emp456"
mployee Employee_User(Employ
ee_Id)
Question_Description TEXT NOT Description of the "What is AI?"
NULL question
Question_Id VARCHAR NOT Unique identifier for "ques123"
NULL question
Question_Like_Date_Time DATETIME NULL The date and time when "2022-01-01
a user liked a question. 12:00:00"
Online_Status boolean NULL Whether employee is TRUE
currently online or not
Registered_User_Id VARCHAR( NOT The unique identifier of "U1"
16) NULL the user who posted the
answer or liked the
answer or saved the
answer.
Reply_Date DATETIME NOT The date and time when "2022-01-01
NULL the user posted the 12:00:00"
answer.
Tag_Name VARCHAR( NULL The unique name of the "tag1"
50) tag.
Upload_Date DATETIME NOT The date and time when "2022-01-01
NULL the question was 12:00:00"
41 | P a g e
uploaded.
Upload_user_Id VARCHAR( NOT The unique identifier of "U1"
16) NULL the user who uploaded
the question.
Verification_Date DATE NULL The date on which the "2022-01-01"
answer was verified. If
it is not verified, then
this value will be null.
Verification_status VARCHAR( NULL The verification status "verified"
30) of the answer. This can
be "verified",
"unverified", or
"pending verification".
Verify_by_Employee_Id VARCHAR( NULL The unique identifier of "E1"
16) the employee who
verified the answer.
Verify_by_Moderator_Id VARCHAR( NULL The unique identifier of "M1"
16) the moderator who
verified the answer.
2.7. Summary
2.7.1. Number of tables 15
42 | P a g e
3. User Interface Implementation

3.1. Guest User Home page
3.1.1. Purpose of UI
- This page will be used to showcase all the features a normal user would
experience in our website. This will allow us to spread the message behind
our website which acts as a catalyst for the potential user (guest user).The
user won’t be able to interact with our website but will get an overall idea
about the working and flow.
3.1.2. Screenshot of Guest user Homepage
[Guest user home page]

3.1.3. Used control with justification
3.1.3.1. Trending
- This section will display all the questions which have received the most
positive feedback from the community.
3.1.3.2. Tags
- Tags are metadata about questions which add more persona to the question
(i.e., if a question has been asked regarding how to declare a variable, then
the user can assign tags to the question such #java to specify his/her
language of interests).
3.1.3.3. Configuration box
 Personalization
~ By allowing users to configure a site, a website or application can
provide a more personalized experience for each user.
 Flexibility
43 | P a g e
~ By allowing users to configure a site, a website or application can be

made more flexible and adaptable to different users and use cases.
 Accessibility
~ Allowing users to configure a site can also improve accessibility, by
allowing users to adjust the site to suit their needs, such as using high
contrast mode.
3.1.3.4. Search bar
- The search input box will be used on the website to allow users to quickly
and easily search for specific information or content within the site. This
can be useful in a variety of contexts, such as:
 Finding specific information:

~ A search input box allows users to find specific information or
content on the site, rather than having to navigate through multiple
pages or menus.
 Improved User experience

~ A search input box makes it easy for users to find what they are
looking for, improving the overall user experience and making the
site more efficient to use.
3.1.3.5. Collapse button
 Mobile optimization
~ A collapsible navbar is often used to optimize navigation for smaller
screens, such as those on mobile devices. By collapsing the navbar into a
smaller "hamburger" menu, it takes up less space on the screen and allows
users to access navigation links more easily.
 Improved user experience

~ A collapsible navbar allows users to easily access navigation links,
while also keeping the design clean and uncluttered.
 Space saving
~ A collapsible navbar allows a website or application to save space,
which can be useful for smaller screens or when displaying more
important content.
3.1.4. Data controls

- This webpage uses data controls because it’ll provide a better
understanding of the system and give them an idea about the services
provided by our site instances of data control in our system includes search
input, Interest button and professional button.
3.1.5. Associated tables

- Question
44 | P a g e
- Answer
- Tag
- TagQuestion
- TagAnswer
3.1.6. Data In and Out
- Request question and answer
- Response question and answer
45 | P a g e
3.2. Registered user home page

- This page will contain features such as ability to ask questions, answers,
report a question to a moderator, follow a question, see received
notifications, give rating to an answer, see trending news and questions, and
ability to filter data based on preference this will help create an interactive
environment for the user where he/she can enjoy their time to the fullest
with a seamless and pragmatic experience.
3.2.2. Screenshot of Registered user Homepage
[Registered user home page]

3.2.3.1. Profession
- This will filter questions based on user’s profession i.e. (His/her
selected field such as programmer or data scientist will receive
questions based on programming).
3.2.3.2. Interest
- his will filter questions based on fields that user has selected as an
hobby rather than profession such as python software engineer can
be an aspiring data scientist this field will display question regarding
data science.
46 | P a g e
3.2.3.3. Trending
- The user will receive trending questions regarding his/her fields.
3.2.3.4. User ID
- This ID will be dynamically generated by the system which will be
used to uniquely identify the user.
3.2.3.5. Upload box
- This will be used to write and upload questions and assign tags to the
question so that they can be used to group questions based on their
fields and subfields.
3.2.3.6. User reference address
- This is the user’s address that he/she will enter during the login
process.
3.2.3.7. Saved button
 Convenience
~ By allowing users to save content, a website or application can make
it more convenient for users to access content they are interested in
at a later time, rather than having to search for it again.
 Organization
~ Saving content allows users to organize and categorize content
according to their interests or needs.
 Personalization
~ By allowing users to save content, a website or application can
personalize the experience for each user based on their saved
content.
3.2.3.8. Voting system (includes upvote and down vote)

- Having a functionality to upvote and down vote content on a website
or application is a way to allow users to express their opinions and
preferences about the content. This can be useful in a variety of
contexts, such as:
 User engagement
~ By allowing users to upvote and downvote content, a website or
application can increase user engagement and encourage users to
interact with the content.
 Feedback
~ Upvotes and downvotes can be used as a form of feedback for content
creators, allowing them to gauge the popularity and relevance of their
content.
 Quality control
~ By allowing users to upvote and downvote content, a website or
application can help ensure that the best and most relevant content
rises to the top and the low-quality content is pushed down.
3.2.3.9. Answer box

- User will enter his/her answer to the questions asked by other users.
47 | P a g e

- Question
- Answer
- Tag
- Registered_User
- Stars
- Field
- Interest
48 | P a g e
3.3. Moderator home page

- This page will contain all the feature a registered user has but will also contain
some additional features for the moderators such as verify a question, report a user
or suspend a user, remove content.
3.3.2. Screenshot of Moderator user Homepage
[Moderator user home page]

 Verified tick
This will help in following ways:
o Security
~ A verified question can be used as an additional layer of security to
confirm the identity of a user before granting them access to sensitive
information or resources.
o Fraud prevention
~ By requiring users to verify their identity through a question, a
website or application can help prevent fraud and unauthorized
access to accounts.
o Compliance
~ In some cases, verified questions may be required by law or
regulation to confirm the identity of a user.
o Personalization
49 | P a g e
~ By asking a verified question, a website or application can confirm

the identity of a user and personalize the experience accordingly.
o Customer support
~ A verified question can be used as a way to confirm the identity of a
customer before providing support or assistance.
o Authentication
~ Verified questions can be used as a form of authentication, for
example, by asking a security question that only the account holder
should know.
 User report
~ Moderator can report a user to the employee if he is unsure about
what actions should be taken for the user (i.e. suspending, banning)
the employee can then carry on the further procedure.
 Verifying Questions and Answers
~ Moderato can verify question or answer.
 Send update content notification
~ This functionality to send update notifications allows a website or
application to inform users of new updates, changes or events that
are relevant to them.
 Remove suspicious data
~ Moderato can remove a question or answer from the website.

- Question
- Answer
- Tag
- Moderator
- Field
3.4. Employee user home page

50 | P a g e
- This page will contain all the feature a moderator user has but will also
contain some different features for the employee such as verify a question,
send update notification, suspend a user, remove content and view user
profile or reports.
3.4.2. Screenshot of Moderator user Homepage
[Employee user home page]

 Suspend
~ Used to suspend the user for any given time.
 Side bar
~ It will be used to improve the user experience by making it easier for
admins to find what they are looking for, and to help with website or
application's organization and structure.
 User name
~ This represents the username of the user who posted the question or
answer which is exclusively only visible to the admin
 View profile button
~ To obtain a summary and overall details of the user to check his daily
activities which will help the employees and admins to ultimately
determine the user's behaviour.
 Trending box & button
~ Purpose of a trending section is to highlight the most popular content
on the site and to make it more visible to users. This can help to
51 | P a g e
increase engagement and drive traffic to the site by making it easier

for users to find interesting content.
~ It will be used to surface up-to-date information, or to show the most
recent content that is relevant to a specific topic or theme, to help
users discover new and relevant content.
- Question
- Answer
- Tag
- Moderator
- Stars
- Field
- Request reports
- Response reports
3.5. Admin home page

52 | P a g e
- This page will contain all the feature a registered user has but will also
contain some additional features for the admin such as verify a question ,
report a user or ban a user , remove content , view an users profile.
3.5.2. Screenshot of Admin user Homepage
[Admin user home page]

 Team
~ This functionality is use to create, monitor and remove employees
from the system.
 Associated tables
- Question
- Answer
- Tag
- Admin
- Registered_User
- Moderator
- Stars
- Field
- Interest
 Data In and Out
- Request Question and answer
- Request reports
- Response reports
- Response Question and answer
53 | P a g e
4. Implementation of Functionality
4.1. Log in & Sign in
- The inspiration for this design was to give smooth and holistic user
experience which would allow them to navigate through different pages with
effortless experience.
- This UI also provides the user with all type tips and hints which will help
them during their initial encounter with our site these points shall help
create an overall better experience.
4.1.2. Screenshot of Log In & Sign In
[Log In and Sign In page]

- Log in
~ This is a registered user’s login button which will transition the user
to the registered user’s dashboard after they fill out there details.
- Sign in
~ This will create users account for the users who are creating an
account for the first time.
54 | P a g e
- Domain & Interest

~ User will enter fields he is interested in and his primary domain (i.e.
profession, field of expertise).
~
- Mobile Number
~ This field is an input box which will be used to store user’s mobile
number in the database and to send OTP to the user during
the sign in process.
- OTP
~ One-time passwords (OTPs) are used for a variety of purposes, such
as adding an extra layer of security to online accounts, verifying the
identity of a user, and preventing unauthorized access to sensitive
information. They are often used as an alternative to traditional
passwords, which can be easily guessed or hacked. OTPs are typically
generated by a system, such as our website, and are valid for a single
transaction or login session. They are also typically valid for a short
period of time, such as a few minutes, to further increase security.
- Personal Information
~ Username, DOB, Gender, Email Id and mobile No with verification are
all personal details of registered user.
- Field
- Registered_User
- Moderator
- Admin_User
- Interest
- Request registration
- Request login
- Response successfully login
- Response successful registration
4.1.6. Data validation
- In this site validation controls have been used predominantly because that
will provide a layer of security to our website. Some instances of validation
controls are input for phone number, email, password, username, field etc.
4.2. Employee registration page

55 | P a g e
- To provide an interface for employees add their personal details and

register to the website.
4.2.2. Screenshot of Employee registration page
[Employee registration form]

4.2.3. Used controls with justification
- Employee ID
~ Each time an employee form is created it will be dynamically
generated and assigned a unique employee ID.
- Address
~ The form consists of various fields such as state, city, zip code and
address but all these fields will be merged before being stored in the
database.
~ The form provides an option to enter an optional address in case the
user is located in a secondary location.
4.2.4. Associate tables
- Employee
- Admin
- Request registration
- Response successful registration
4.2.6. Data validation

- All the field’s will be filtered and validated for any pessimistic input so that
any invalid data won't be sent to the server.
56 | P a g e
4.3. Ajax Suggestion Search Bar

- The Ajax Suggestion Search Bar is a search bar that suggests questions as the user
types in keywords. The suggestions are dynamically updated via Ajax based on the
keywords entered by the user.
4.3.2. Screenshot of Search Bar
[Search Bar]
- Navigate to the page where the search bar is located.
- Type in a keyword or phrase in the search bar.
- The search bar will display a list of suggested questions related to the keyword or
phrase.
- Click on a suggested question to view the answer.
4.3.4. associated tables

- question
- registered_user
- like_question
4.3.5. Implementation
- The search bar is implemented using HTML, CSS, and JavaScript/jQuery.
- The suggestion list is generated dynamically using Ajax and PHP.
- As the user types in keywords, the search bar sends an Ajax request to the server.
- The server runs a PHP script that searches the database for questions related to the
entered keywords.
- The PHP script returns a list of suggested questions to the search bar.
- The search bar displays the list of suggested questions in a dropdown menu below
the search bar.
- The user can click on a suggested question to view the answer.
4.3.6. Technical Details

57 | P a g e
- The search bar is implemented using HTML <input> element with type="text"
attribute.
- The suggestion list is implemented using HTML <ul> and <li> elements.
- The search bar uses jQuery's keyup event to trigger the Ajax request.
- The Ajax request is sent to the server using jQuery's $.ajax() function.
- The server-side script that handles the Ajax request is implemented using PHP and
retrieves data from a MySQL database.
- The PHP script uses MySQL's LIKE operator to search for questions that contain the
entered keywords.
- client-side code
$(".search").keyup(function(){
let val = $(".search").val();
console.log(val);
if(val==""){
$("#suggestion").html('');
return;
}let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp")
}
let data = "book_name=" + val;
xhr.open("POST", "./endpoints/suggestion.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(data);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let txt = this.responseText;
$("#suggestion").html(txt);
}
};
})
- server-side code
<?php
$con = mysqli_connect("localhost", "root", "", "asq") or die("cannot connected ");
$book_name = $_POST['book_name'];
$sql = "select Question_Id , Question_Description from Question where
Question_Description LIKE '%$book_name%'";
$result = mysqli_query($con, $sql);
58 | P a g e
if($result->num_rows==0){
echo "<p style='color:red;'>!!! No match found !!!</p>";
}
else{
while ($row = mysqli_fetch_array($result)) {

$bolded = str_ireplace($book_name, "<b style='color:blue;'
>{$book_name}</b>", $row['Question_Description']);
echo "<p class='d-flex gap-2'><b>". $row['Question_Id']." </b>
{$bolded}</p>";
}
}
?>
4.3.7. data in and out

- user input in the search box is sent to the server as the data and the question, its id
and number of likes on it is retrieved through the database
4.4. Profile Menu

- The "Profile" component in the Q&A full-stack web application is responsible for
displaying the user's information, including their user ID, phone number or email,
and provides the user with the ability to edit their profile and sign out.
59 | P a g e
4.4.2. Screenshot of Profile menu
[Profile Menu]
- The "Profile" component is primarily used by the users of the Q&A web application
to view their own profile information and edit it if necessary. It provides users with
the convenience of accessing and modifying their profile information in one place.
- The "Profile" component is implemented using PHP, HTML, and CSS. It retrieves the
user's information from the database and populates the appropriate fields on the
page. The user can then make changes to their information and submit the form to
update their profile.

- The "Profile" component uses PHP to connect to the database and retrieve the
user's information. It uses HTML and CSS to create a user-friendly interface for
displaying and editing the information. The component also utilizes session
management to ensure that only authenticated users can access their profile
information.
3.9.5.1. client-side code
- the variables are initialized during the authentication and put into session.
<li id="profile" class="nav-item notification-menu position-relative pe-2 d-flex
align-items-center">
<a href="javascript:;" class="nav-link text-dark p-0"
id="dropdownMenuButton" data-bs-toggle="dropdown"
60 | P a g e
aria-expanded="false">
<i class="fa fa-user cursor-pointer"></i>
</a>
<div
class="profile notfication-dropdown bg-white pb-3 border d-none position-
absolute border-secondary rounded"
style="right: 1em;top: 1.5em;width: 40ch;z-index:9999">
<div class="user_info border w-100 py-4 ps-2 d-flex gap-2">
<section class="pfp align-self-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
fill="currentColor"
class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path fill-rule="evenodd"
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468
11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
</svg>
</section>
<section class="user_name d-flex flex-column">
<p style="margin-bottom:-0.40em">
<?php
echo @$Registered_User_Id;
?>
</p>
<span style="font-size:0.85rem">
<?php
echo @$email;
echo @$Mobile_Number
?>
</span>
</section>
</div>
<div class="pofile_opstions d-flex flex-column ms-2 gap-3">
<span>Profile</span>
<span>Settings</span>
<span>Sign out</span>
</div></div></li>
4.5. Upload Box
- The Upload Box component is a feature in the AsQ web application that allows
users to upload questions and optional tags to the database.
4.5.2. Screenshot of upload box
61 | P a g e
[Upload box]
- The Upload Box component can be used in various sections of the AsQ web
application to enable users to submit new questions. For example, it can be placed
on the homepage to encourage users to submit their questions.
- The component will automatically load an upload form within the specified div
element. Users can enter a question and optionally add tags before submitting the
form. The Upload Box component uses AJAX to insert the question and tags (if any)
into the database.

- question
- tags
- tagquestion

- The component sends an AJAX request to the server to insert the question and tags
(if any) into the database.
- The server responds with a success or error message, which is displayed to the
user.
- The component also uses client-side validation to ensure that the question is not
empty before submitting the form.
- The Upload Box component does not support file uploads.
- client-side code
let counter = 0;
document.querySelector('.truck-button').addEventListener('click', function(e) {
e.preventDefault(); // prevent the default form submission
62 | P a g e
let btn = document.querySelector('.truck-button');

counter++;
if (counter % 2 != 0) {
var questionValue = document.querySelector('#question').value;
// Check that the question value is not empty

if (questionValue.trim() === '') {
console.error('Question value is empty');
return;
}
const tagList = [];
const tagElements = document.querySelectorAll("#append-tags ul li");
tagElements.forEach(function(tagElement) {
tagList.push(tagElement.innerText);
});
console.log(questionValue)
// Create a new XMLHttpRequest object

var xhr = new XMLHttpRequest();
// Define the function to be executed when the response is received

xhr.onreadystatechange = function() {
// Handle the response here
console.log(this.responseText);
} else if (this.readyState == 4) {
// Handle errors here
console.error('Error sending request: status=' + this.status);
}
};
// Open a new POST request to the insertQuestion.php page

xhr.open("POST", "./endpoints/insertQuestion.php", true);
// Set the Content-Type header to indicate that we are sending form data
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Send the request with the form data

if(taglist.length > 0){
xhr.send("question=" + encodeURIComponent(questionValue) + "&tags" +
encodeURIComponent(tagList));
}else {
xhr.send("question=" + encodeURIComponent(questionValue) );
}
63 | P a g e
setInterval(
function(){
if(document.querySelector('.truck-button').classList.contains('done')){
$('.truck-button').trigger('click');
}
}
,4000
)
}
- serve- side code

<?php
require_once('../../Database/question.php');
session_start();
$db = new question();
$question = $_POST['question'];
$db->insert($question ,$db->getRows() , $_SESSION['user']['Registered_User_Id'] );
if (isset($_POST['tags'])) {
$tags = $_POST['tags'];
foreach ($tags as $tag) {

$stmt = $conn->prepare("SELECT Tag_Name FROM tag WHERE Tag_Name = :tag");
$stmt->bindParam(":tag", $tag);
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$result) {
$createdUser = "myuser"; // Change to the actual created user
$stmt = $conn->prepare("INSERT INTO tag (Tag_Name, Tag_Description, Created_User)
VALUES (:tag, '', :user)");
$stmt->bindParam(":tag", $tag);
$stmt->bindParam(":user", $createdUser);
$stmt->execute();
}
}
64 | P a g e
echo "Data received and processed successfully.";

?>
- The question description and the tags associated to it is sent to the server as the
data and the data is then processed on to the server and records are inserted in the
associated tables.
4.6. Trending Bar

- The Trending Section component is a feature in the AsQ web application that
displays the top 10 questions based on the number of upvotes they have received.
The component uses AJAX to fetch the data from the server and updates the
displayed questions every 5 seconds.
4.6.2. Screenshot of trending bar
65 | P a g e
[Trending Bar]
- To showcase the top 10 questions which have been positively received by the
community.
- The component will automatically load the top 10 questions via AJAX and display
them within the specified div element. The Trending Section component supports
the following options:
3.11.4.1. Refresh Interval (default: 5000)
- The number of milliseconds between each refresh of the top 10
questions list.
3.11.4.2. Question Limit (default: 10)
- The maximum number of questions to display in the top 10 list.

- question
- tags
- tagquestion

- The component sends an AJAX request to the server to fetch the top 10 questions
based on upvotes.
- The server responds with a JSON object containing an array of question objects.
66 | P a g e
- The component parses the JSON data and displays the top 10 questions within the
specified div element.
- Every 5 seconds, the component sends another AJAX request to the server to
refresh the list of top 10 questions.
- If the number of upvotes for any question changes while the component is
running, the list of top 10 questions will be automatically updated to reflect the new
rankings.

function trends(sortOrder="desc") {
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp")
}
let data = "sort_order=" + sortOrder;

xhr.open("POST", "./endpoints/trends.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(data);
let trend = ""
xhr.onreadystatechange = function () {
let arr = JSON.parse(this.responseText);
console.log(this.responseText);
for (let i = 0; i < arr.length; i++) {

let bolded = arr[i]['Question'];
let likes = arr[i]['likes'];
let items = `
<li class="nav-item">
<a class="nav-link " href="./pages/dashboard.html">
<div class="grid stacked">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="gold"
class="bi bi-fire"
viewBox="0 0 16 16">
<path
d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6
0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75
0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1
1.364 1 2.25C11 14 9.657 15 8 15Z" />
</svg>
<span class="text">${likes}</span>
</div>
<span class="nav-link-text ms-1 text-wrap">${bolded}</span>
67 | P a g e
</a>
</li>
`;
trend += items;
}
$('.sidebar-nav').html(trend)
}
};
setInterval(function(){
trends();
,
5000
})
3.11.6.2. server side code

<?php
$con = mysqli_connect("localhost", "root", "", "asq1") or die("cannot connect to database");
$sort_order = "DESC";
$order_by = "bookID " . $sort_order;
$sql="SELECT Question.Question_Id ,Question_Description as 'Question', COUNT(*) as 'likes'
FROM Like_Question
JOIN Question ON Question.Question_ID = Like_Question.Question_Id
WHERE Question_Like=true
GROUP BY Question.Question_Id
ORDER BY COUNT(*) DESC LIMIT 10";
$result = mysqli_query($con, $sql);
if ($result->num_rows == 0) {
$response = array("error" => "No match found");
} else {
68 | P a g e
$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
$response = $rows;
}
echo json_encode($response);
- The order of the trending question (i.e descending or ascending) is sent to
the server as the data and the question description and numebr of upvotes
on it is retuned as response and is then processed further in the front end.
4.7. Question Box

- The Question component is a feature in the AsQ web application that displays
information about a single question, including the number of upvotes, saves, and
answers.
4.7.2. Screenshot of Question box
[Question box]
69 | P a g e
- The Question component can be used in multiple sections of the Q&A web
application to display information about specific questions.
- The component will display the number of upvotes, saves, and answers for a single
question within the specified div element. The Question component does not use
AJAX or interact with the server.

- question
- like_question
- registred_user
- save_question

- The component displays the number of upvotes, saves, and answers for a single
question based on the data retrieved from the database.
- The data is retrieved and passed to the component by the server when the web
page is loaded.
- The component allow users to upvote, save, or answer questions. It only displays
information about the question.

<div class="post | container">
<?php
$db= new Post();
$db->selectOne($Registered_User_Id);
?> </div>
3.12.6.2. server-side code

question.php
<?php
require_once('global.php');
class question extends db{
public function insert($description , $qid , $uid){
$sql = "INSERT INTO question (Question_Description , Question_Id , upload_user_Id) values
(:desc , :qid , :uid)";
$qid = "Q0" . strval($qid);
$stmt = $this->con->prepare($sql);
$stmt->bindParam(':desc' , $description);
$stmt->bindParam(':qid' , $qid);
70 | P a g e
$stmt->bindParam(':uid' , $uid);
$stmt->execute();
}
public function getRows(){
$rows = 0;
$rows = $this->con->query('SELECT * FROM question')->rowCount();
return $rows + 1;
}
public function delete($qid){
$sql = "delete from question where Question_Id = :qid";
$stmt->execute();
}
}
/components/question.php
<?php
function question($id,$Question_Description ,$field , $Upload_Date , $Profession_Name ,
$upvotes ,$save_count , $answer_count , $tag , $status , $isHeTheUser=false){
$tags = "";
foreach($tag as $key => $val)
{
$tags .= "<span class='badge text-bg-info'>$val</span>";
}
$verified = ($status == 'verified') ? "fill='green'" : "fill='none'";
$canDelete = ($isHeTheUser) ? "<li data-role='deleteQ' class='badge bg-danger'>Delete</li>" :
"";
echo <<<Question
<div class="row my-2 " name='question'>
<span name="question-id" class="sr-only" style="display:none">$id</span>
<div class="d-flex flex-column gap-2 justify-content-top float-top align-items-center"
style="width: 10%;">
<div class="position-relative" style="z-index: 1;">
71 | P a g e
<div onclick="modControls(this)">
fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468
11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</div>
<div class="opacity-0 position-absolute top-100" style="right: 1;" >
<ul style="list-style-type: none;" class="d-flex gap-1">
<li class="badge bg-danger">View Profile</li>
</ul>
</div>
</div>
<div class="answer_votes | d-none d-md-flex flex-column gap-1 justify-content-center
align-items-center">
<span>
<svg xmlns=" http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor"
class="bi bi-caret-up" viewBox="0 0 16 16">
<path
d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506
0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
</svg>
</span>
<span>
$upvotes
</span>
<span>
fill="currentColor"
class="bi bi-caret-down" viewBox="0 0 16 16">
<path
72 | P a g e
d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506

0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
</svg>
</span>
</div>
</div>
<div class=" col">

<div class="question__meta |">
<span class=" badge bg-warning ms-1">
$Profession_Name
</span>
$field
</span>
<span class="text-muted ms-3">

$Upload_Date
</span>
</div>
<div class="question__title | d-flex" style="font-weight: bold;">
<a href="viewQuestion.php?id=$id">
$Question_Description
</a>
<div class="ms-auto d-flex gap-3 justify-content-center align-items-center ">
<div class="verification" style="align-self: last baseline;">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"` $verified

class="bi bi-patch-check verification" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-
1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
73 | P a g e
<path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924

2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924
2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-
2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-
2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-
1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0
2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704
0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-
2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"/>
</svg>
</div>
<div class=" position-relative">
<span class="fs-3" onclick="modControls(this , 'click')">...</span>
<div class="opacity-0 position-absolute end-100 top-0 right-100">
<li class="badge bg-danger">Report</li>
$canDelete
</ul>
</div>
</div>
</div>
</div>
<div class="d-flex gap-2">
$tags
</div>
<div id="answer_opt" class="d-flex gap-5 mt-3 align-items-center">
<div>
<span>answers $answer_count</span>
</div>
<div>
<svg id="save" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor"
class="bi bi-save" viewBox="0 0 16 16">
<path
74 | P a g e
d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0

0 0-1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1
1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2
2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z" />
</svg>
<span>save $save_count </span>
</div>
</div>
</div>
</div>
Question;
}
- No data is sent to the server as the html is already compiled on the reques
from the client. necessary data is received from the server and then processd
in the server.
4.8. Answer Box

- The Answer component is a feature in the Q&A web application that displays
information about a single answer, including the number of upvotes and saves, and
allows users to upload their own answers.
4.8.2. Screenshot of Answer Box
[Answer box]

- The Answer component can be used in multiple sections of the Q&A web
application to display and upload answers to specific questions.
75 | P a g e
- The Answer component displays the number of upvotes and saves for a single
answer within the specified div element. It also includes a form for users to upload
their own answers. When a user submits an answer, the form data is sent to the
server using AJAX, and the new answer is added to the database.

- answer
- like_answer
- registred_user
- save_answer

- The component displays the number of upvotes and saves for a single answer based
on the data retrieved from the database.
- The component uses AJAX to submit the form data to the server when a user
uploads an answer, and then updates the answer list with the new answer.
- The component also includes a textarea element for users to enter their own
answers and a submit button to submit the form.
- The component uses PHP to handle the form submission and insert the new answer
into the database.
- The component does allow users to upvote or save answers. It only displays
information about the answer and allows users to upload their own answers.

$('input[name="answer"]').on('keydown', function(event) {
if (event.keyCode === 13) { // Enter key
event.preventDefault(); // Prevent default form submit
submitAnswer(event.target); // Call function to send AJAX request
}
});
$("#sendIcon").click(function(e){
submitAnswer(e.target);
})
function submitAnswer(ele){
if(ele.value == "") return;
var inputEle;
var postId;
if(ele.tagName == 'INPUT'){
var postElement = $(ele).closest('.mb-5'); // Find parent post element
var idElement = postElement.find('.question-id');
postId = idElement.text(); // Get text content of id element
inputEle = ele;
76 | P a g e
}else{
var input = ele.parentElement.PreviousElementSibling;
var postElement = $(input).closest('.mb-5'); // Find parent post element
inputEle = ele.PreviousElementSibling;
}
let inputValue = inputEle.value;
$.ajax({
url: './endpoints/insertAnswer.php',
method: 'POST', // Change method to GET or POST as needed
data: {answer: inputValue , id: postId},
success: function(response) {
console.log(response)
ele.value = ""
},
error: function(xhr, status, error) {
// Handle error response here
}
});
}
3.13.6.2. server-side code

insertAnswer.php
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
extract($_POST);
?>
<?php
require_once('../../Database/answer.php');
session_start();
$db = new answer();
$db->insert($answer ,$db->getRows() , $_POST["id"] , $_SESSION['user']
['Registered_User_Id'] );
echo "Data entered and processed successfully.";
?>
answer.php
77 | P a g e
<?php
require_once('global.php');
class answer extends db{
public function insert($description , $aid , $qid , $uid){
$sql = "INSERT INTO answer (Answer_Description ,Answer_Id , Question_Id , upload_user_Id)
values (:desc ,:aid , :qid , :uid)";
$aid = "A0" . strval($aid);
$stmt->bindParam(':desc' , $description);
$stmt->bindParam(':aid' , $aid);
$stmt->bindParam(':uid' , $uid);
$stmt->execute();
}
public function getRows(){
$rows = 0;
$rows = $this->con->query('SELECT * FROM answer')->rowCount();
return $rows + 1;
}
public function delete($aid){
$sql = "delete from answer where Answer_Id = :aid";
$stmt->bindParam(':aid' , $aid);
$stmt->execute();
}
}
/component/answer.php
<?php
function answer( $aid,$answer ,$answerDate , $profession , $upvotes=0,$saves=0 , $tag ,
$status , $isHeTheUser=false)
{
$tags = "";
78 | P a g e
foreach($tag as $key => $val)

{
$tags .= "<span class='badge text-bg-info'>$val</span>";
}
$verified = ($status == 'verified') ? "fill='green'" : "fill='none'";
$canDelete = ($isHeTheUser) ? "<li data-role='delete' class='badge bg-danger'>Delete</li>" :
"";
echo <<<answer
<div data-role="answer"
<span class='sr-only answerId'>$aid</div>
<div class="ms-4 row mt-4 ">
<div class="d-flex flex-column gap-4 justify-content-top float-top align-items-center"
style="width: 10%;">
<div class="position-relative" style="z-index: 1;">
<div onclick="modControls(this)">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468
11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</div>
<div class="opacity-0 position-absolute top-100" style="right: 1;" >
<li class="badge bg-danger">View Profile</li>
</ul>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" $verified class="bi
bi-patch-check verification" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-
1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924
2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924
2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-
79 | P a g e
2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-

2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-
1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0
2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704
0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-
2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"/>
</svg>
</div>
<div class=" col">
<div class="question__meta |">
$profession
</span>
<span class="text-muted ms-3">
$answerDate
</span>
</div>
<div class="question__title | d-flex flex-column">
<p>
$answer
</p>
</div>
<div class="d-flex gap-2">
$tags
</div>
<div id="answer_opt" class="d-flex gap-5 mt-3 align-items-center">
<div>
<div class="answer_votes | d-none d-md-flex col gap-2 justify-content-center align-
items-center">
<span>
<svg xmlns=" http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor"
class="bi bi-caret-up" viewBox="0 0 16 16">
<path
80 | P a g e
d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796

5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
</svg>
</span>
<span>
$upvotes
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-caret-down" viewBox="0 0 16 16">
<path
d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-
5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
</svg>
</span>
</div>
</div>
<div>
<svg id="save" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor"
class="bi bi-save" viewBox="0 0 16 16">
<path
d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9.5a1 1 0 0 0-
1 1v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1
1 .708-.708L7.5 9.293V2a2 2 0 0 1 2-2H14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2
2 0 0 1 2-2h2.5a.5.5 0 0 1 0 1H2z" />
</svg>
<span>save $saves</span>
</div>
<div class="ms-auto position-relative">
<span class="fs-3 " onclick="modControls(this , 'click')">...</span>
<div class="opacity-0 position-absolute end-100 top-0 right-100">
<li class="badge bg-danger">Report</li>
81 | P a g e
$canDelete
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

in the server.
82 | P a g e
4.9. Save Questions and Answers

- The Save Questions and Answers component is a feature in the Q&A web
application that displays saved questions and answers.
4.9.2. Screenshot of Save Questions and Answers
[Answer box]

- The Save Questions and Answers component can be used in save multiple questions
and answers in AsQ web application.
- The Save Questions and Answers component displays the saved questions and
answers. It also includes a button for view and remove that question answer from
save using AJAX.

- answer
- question
- registred_user

-
3.13.6.3. Code
$('input[name="answer"]').on('keydown', function(event) {
if (event.keyCode === 13) { // Enter key
event.preventDefault(); // Prevent default form submit
83 | P a g e
submitAnswer(event.target); // Call function to send AJAX request

}
});
$("#sendIcon").click(function(e){
submitAnswer(e.target);
})
function submitAnswer(ele){
if(ele.value == "") return;
var inputEle;
var postId;
if(ele.tagName == 'INPUT'){
var postElement = $(ele).closest('.mb-5'); // Find parent post element
inputEle = ele;
}else{
var input = ele.parentElement.PreviousElementSibling;
var postElement = $(input).closest('.mb-5'); // Find parent post element
inputEle = ele.PreviousElementSibling;
}
let inputValue = inputEle.value;
$.ajax({
url: './endpoints/insertAnswer.php',
method: 'POST', // Change method to GET or POST as needed
data: {answer: inputValue , id: postId},
success: function(response) {
console.log(response)
ele.value = ""
},
error: function(xhr, status, error) {
// Handle error response here
}
});
}

in the server.
84 | P a g e
85 | P a g e
4.10.Employee management page

- This page use to manage the employee user.
4.10.2. Screenshot of Admin TPS report
[TPS report]

- In this page admin can view employee details and add the new employee into
database.
- This page contains a report which retrieves from database using PHP, HTML and
CSS. It retrieves the employee Id, Employee name, Date from the database and
generates the appropriate reports. The reports are displayed on the page using
HTML and CSS.

- employee
- Question
- Answer

- This report component uses PHP to connect to the database and retrieve the
required information. It uses HTML and CSS to create a user-friendly interface for
displaying the reports. The component also utilizes session management to ensure
86 | P a g e
that only authenticated administrators can access the reports. Additionally, the
component updates the statistics every five seconds using Ajax.
4.1.6.1. Code
<main class="main-content position-relative border-radius-lg ">
<div class="container py-4">
<div class="row g-3 justify-content-center align-items-center text-center">
</a href="employee_registration.php"><button type="button" class="btn btn-
primary">Add Employee</button></a>
<h2>Employee Team details</h2>
<?php
// establish database connection
// establish database connection using PDO
$dsn = "mysql:host=localhost;dbname=asq";
$username = "root";
$password = "";
$options = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
);
try {
$pdo = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
echo "Database connection failed: " . $e->getMessage();
exit;
}
// select all employees

$sql = "SELECT Employee_name, Employee_mobile_number,
Employee_Activation_Date FROM employee_user";
$stmt = $pdo->prepare($sql);
87 | P a g e
$stmt->execute();
$data = $stmt->fetchAll();
// print data in table format using Bootstrap
echo '<table class="table table-bordered">';
echo '<thead>';
echo '<tr>';
echo '<th>Employee Name</th>';
echo '<th>Mobile Number</th>';
echo '<th>Activation Date</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
foreach ($data as $row) {
echo '<tr>';
echo '<td>' . $row['Employee_name'] . '</td>';
echo '<td>' . ($row['Employee_mobile_number'] ?? 0) . '</td>'; // print 0 when NULL
comes
echo '<td>' . $row['Employee_Activation_Date'] . '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
?>
</div>
</div>
</main>
- A select query is sent to the database server and results are fetched as
associative arrays a processed in the front end.
4.11.About page
88 | P a g e
- The page provides information about the website and its Team or creators. This can
include information on the mission or goals of the website, the team behind it, the
history of the site, and contact information. It is typically one of the most visited
pages on a website and is designed to give visitors a sense of who is behind the site
and what they can expect to find on it.
4.11.2. Use controls with justifications
[Employee registration form]

4.11.3. Associate table
- This page is a static page, so it’s not associated with any table of data base.
- This page is a static page, so it doesn’t perform any data in and out.
89 | P a g e
5. Reports
5.1. Employee verification TPS report
- The "TPS" component in the AsQ full-stack web application is responsible for
generating a report about the employee verification. The report includes details
such as the employee id, employee name and date.
90 | P a g e
5.1.2. Screenshot of Admin TPS report
[TPS report]

The "TPS" component is primarily used by the administrators of the AsQ web
application to obtain a quick overview of the employee, moderator and user
statistics. It provides administrators with the ability to monitor the user activity
and take necessary actions if required.
- The "TPS" component is implemented using PHP, HTML, and CSS. It retrieves the
employee, moderator, and user information from the database and generates the
appropriate reports. The reports are displayed on the page using HTML and CSS.

- employee
- registered_user
- moderator

- The "TPS" component uses PHP to connect to the database and retrieve the
91 | P a g e
4.1.6.2. Code
<h2>Employee Verification Report</h2>

<table class="table table-secord">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php
$username = "root";
$password = "";
$options = array(
);
try {
exit;
}
// execute the SQL query and store the results in an array
$data = array();
92 | P a g e
$sql = "SELECT DISTINCT e.Employee_Id, e.Employee_name,

IFNULL(Verification_Date, Delete_Date) as Date
FROM employee_user e, question q
WHERE ((e.Employee_Id = q.verify_by_Employee_Id) OR (e.Employee_Id =
q.Delete_by_Employee_Id)) AND ((q.Verification_status = 'verified') OR
(q.Verification_status='Delete'))";
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
array_push(
$data,
array(
'Employee_Id' => $row['Employee_Id'],
'Employee_name' => $row['Employee_name'],
'Date' => $row['Date']
)
);
echo "<tr>";
echo "<td>" . $row['Employee_Id'] . "</td>";
echo "<td>" . $row['Employee_name'] . "</td>";
echo "<td>" . $row['Date'] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>


<canvas id="verification-chart"></canvas>
</div>
93 | P a g e
94 | P a g e
5.2. Employee monthly verification MIS report

- The "MIS" component in the AsQ full-stack web application is responsible for
generating a report about the employee verification for monthly or yearly. The
report includes details such as the employee id, employee name Moth, Verified
Questions, Deleted Questions, Avg. Verified Questions and Avg. Deleted Questions.
5.2.2. Screenshot of Admin MIS report
[MIS report]

The "MIS" component is primarily used by the administrators of the AsQ web
application to obtain a quick overview of the employee. It provides administrators
with the ability to monitor the user activity and take necessary actions if required.
- The "MIS" component is implemented using PHP, HTML, and CSS. It retrieves the
employee and other necessary information from the database and generates the
appropriate reports. The reports are displayed on the page using HTML and CSS.

- employee
- registered_user
95 | P a g e
- The "MIS" component uses PHP to connect to the database and retrieve the
4.1.6.3. Code
<main class="main-content position-relative border-radius-lg ">

<?php
require_once('../components/navbar.php');
?>



<h2>Employee Monthly Verification Report</h2>
<?php
$username = "root";
$password = "";
$options = array(
);
try {
exit;
}
$data = array();

$data = array();
$sql = "SELECT e.Employee_Id, e.Employee_name,
Monthname(IFNULL(q.Verification_Date, q.Delete_Date)) AS Month,
96 | P a g e
COUNT(CASE WHEN q.Verification_status = 'verified' THEN 1 END) AS

Verified_Questions,
COUNT(CASE WHEN q.Verification_status = 'Delete' THEN 1 END) AS
Deleted_Questions,
AVG(CASE WHEN q.Verification_status = 'verified' THEN 1 ELSE 0 END) AS
Avg_Verified_Questions,
AVG(CASE WHEN q.Verification_status = 'Delete' THEN 1 ELSE 0 END) AS
Avg_Deleted_Questions
FROM employee_user e
LEFT JOIN question q ON (e.Employee_Id = q.verify_by_Employee_Id OR
e.Employee_Id = q.Delete_by_Employee_Id)
AND (q.Verification_status = 'verified' OR q.Verification_status =
'Delete')
GROUP BY e.Employee_Id, Month";
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
array_push(
$data,
array(
'Employee_Id' => $row['Employee_Id'],
'Employee_name' => $row['Employee_name'],
'Month' => $row['Month'],
'Verified_Questions' => $row['Verified_Questions'],
'Deleted_Questions' => $row['Deleted_Questions'],
'Avg_Verified_Questions' => round($row['Avg_Verified_Questions'], 2),
'Avg_Deleted_Questions' => round($row['Avg_Deleted_Questions'], 2)
)
);
}
// output the data in a Bootstrap table

echo '<table class="table table-striped" style="width:80%;">';
echo '<thead><tr><th>Employee ID</th><th>Employee
Name</th><th>Month</th><th>Verified Questions</th><th>Deleted
Questions</th><th>Avg. Verified Questions</th><th>Avg. Deleted
Questions</th></tr></thead>';
echo '<tbody>';
foreach ($data as $row) {
echo "<tr>";
echo "<td>" . $row['Employee_Id'] . "</td>";
echo "<td>" . $row['Employee_name'] . "</td>";
echo "<td>" . ($row['Month']??'NULL') . "</td>";
echo "<td>" . ($row['Verified_Questions'] ?? 0) . "</td>";
echo "<td>" . ($row['Deleted_Questions'] ?? 0) . "</td>";
echo "<td>" . round(($row['Avg_Verified_Questions'] ?? 0), 2) . "</td>";
97 | P a g e
echo "<td>" . round(($row['Avg_Deleted_Questions'] ?? 0), 2) . "</td>";

echo "</tr>";
}
?>
</tbody>
</table>
</div>
</tbody>
</table>

6. Project Testing
6.1. Login functionality
98 | P a g e
Login functionality test-case
Scenario Scenario Test Description Input Expected Actual Status

ID Case ID Output Output
1 Valid 1 User enters Username: john_doe, User is User is Pass

Login valid Password: test123 successfully successfully
credentials logged in and logged in and
and clicks redirected to redirected to
"Login" dashboard dashboard
2 Empty 2 User clicks Username: "", Error message Error message Pass
Fields "Login" is displayed is displayed
without prompting prompting
entering any Password: "" user to enter user to enter
details valid valid
credentials credentials
3 Invalid 3 User enters Username: john_doe, Error message Error message Pass
Password incorrect Password: is displayed is displayed
password incorrectPassword123 prompting prompting
and clicks user to enter user to enter
"Login" valid valid
4 Invalid 4 User enters Username: Error message Error message Pass

Usernam incorrect incorrect_username, is displayed is displayed
e username Password: test123 prompting prompting
and clicks user to enter user to enter
"Login" valid valid
99 | P a g e
5 SQL 5 User enters Username: ' OR 1=1;--, Error message Error message Pass
Injection SQL Password: ' OR 1=1;-- is displayed is displayed
injection prompting prompting
code into user to enter user to enter
login fields valid valid
6.2. Question upload box
Question upload box
100 | P a g e
Scenario Scenario Test Description Input Expected Actual Status

ID Case ID Output Output
1 Valid 1 User uploads a Question: "What is Question and Question and Pass
Upload new question the capital of tag are tag are
with valid France?", Tag: successfully successfully
details, "Geography" uploaded and uploaded and
including a can be viewed can be viewed
unique by users by users
question and
appropriate tag
2 Restricted 2 User uploads a Question: "What is Error message Error message Pass
Word question that the best way to is displayed is displayed
contains a cheat on an stating that the stating that
restricted word exam?", Tag: question/tag the
in the question "Cheating" contains a question/tag
or tag restricted word contains a
and cannot be restricted
uploaded word and
cannot be
uploaded
3 Duplicate 3 User uploads a Question: "What is Error message Error message Pass
Question question that the capital of is displayed is displayed
already exists in France?", Tag: stating that the stating that
the system "Geography" question the question
already exists already exists
and cannot be and cannot be
uploaded uploaded
4 Empty 4 User attempts Question: "", Tag: Error message Error message Pass
Fields to upload a "" is displayed is displayed
question prompting user prompting
without to enter a valid user to enter
101 | P a g e
entering any question and a valid

details tag question and
tag
5 Special 5 User uploads a Question: "What is Question and Question and Pass
Characters question or tag the meaning of tag are tag are
containing this symbol: ®?", successfully successfully
special Tag: "Special uploaded and uploaded and
characters or Characters" can be viewed can be viewed
symbols by users by users
6.3. Upload answer box
Upload answer box
Scenario Scenario Test Description Input Expected Actual Output Status

ID Case Output
ID
102 | P a g e
1 Valid 1 User uploads a Answer: "The Answer is Answer is Pass

Upload new answer capital of successfully successfully
with valid France is uploaded and uploaded and
details and Paris." can be viewed can be viewed
without any by users. by users.
restricted
words.
2 Restricted 2 User uploads an Answer: "The Error message is Error message is Pass
Word answer that best way to displayed stating displayed stating
contains a cheat on an that the answer that the answer
restricted word exam is to use contains a contains a
a cheat sheet." restricted word restricted word
and cannot be and cannot be
uploaded uploaded
3 Empty 3 User attempts Answer: "" Error message is Error message is Pass
Answer to upload an displayed displayed
Field answer without prompting user prompting user
entering any to enter a valid to enter a valid
details answer. answer.
4 Special 4 User uploads an Answer: "The Answer is Answer is Pass

Characters answer meaning of successfully successfully
containing this symbol: ® uploaded and uploaded and
special is registered can be viewed can be viewed
characters or trademark." by users. by users.
symbols
6.4. Search Box
103 | P a g e
Search Box
Scenario Scenario Test Description Input Expected Actual Output Status

ID Case Output
ID
1 Valid 1 User searches for Search term: System returns System returns Pass
Search a valid term and "Paris" relevant results relevant results
the system related to "Paris" related to
returns the "Paris"
appropriate
results.
2 Restricted 2 User attempts to Search term: Error message is Error message Pass
Word search for a term "How to displayed stating is displayed
Search that contains a cheat on an that the search stating that the
restricted word. exam?" term contains a search term
restricted word contains a
and the search is restricted word
not performed. and the search
is not
performed.
3 Empty 3 User attempts to Search term: Error message is Error message Pass
Search perform a search "" displayed is displayed
Field without entering prompting user prompting user
any search term. to enter a valid to enter a valid
search term. search term.
4 Multiple 4 User enters Search term: System returns System returns Pass
Search multiple search "French relevant results relevant results
104 | P a g e
Terms terms and the cuisine" related to both related to both

system returns "Parisian "French cuisine" "French cuisine"
the appropriate restaurants" and "Parisian and "Parisian
results. restaurants". restaurants".
5 Special 5 User attempts to Search term: System returns System returns Pass
Characters search for a term "What does relevant results relevant results
Search containing ® symbol related to the related to the
special characters mean?" search term search term
or symbols, and "What does ® "What does ®
the system symbol mean?". symbol mean?".
returns the
appropriate
results.
6.5. Summary
6.5.1. Number of Test cases: 4
105 | P a g e

Project Main

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Main

Uploaded by

Copyright:

Available Formats

Index

2.4. Standards for implementation of functionalities 18

2.5. Database Design 20

3. User Interface Implementation 43

3.1. Guest User Home page 43

202103100110085, 202103100110057, 202103100110059, 202103100110071 II | P a g e

1.3. Functional requirements

1.3.1. Booking Management System

1.3.3. Driver Management System

1.3.5. Voting Management System

1.3.6. Users' Management

1.3.7. News management (implements in future)

1.4. Non-functional requirements

 Data encryption to protect sensitive information from unauthorized access.

1.5. User of the system with their characteristics

1.5.2. Registered user

- Experience in managing online communities or moderating similar

1.5.5. Employee user

1.5.6. Admin user

1.6. Tools and technology

1.6.4.4. MySQL 8.0 Command Line Client

- JavaScript is a programming language that is commonly used to create

2.1.2. User-wise use-case diagram

[Guest user use case diagram]

2.1.2.2. Registered user

[Registered user use case diagram]

[Moderator use case diagram]

2.1.2.4. Employee user

[Employee use case diagram]

2.1.2.5. Admin user

[Admin use case diagram]

2.2. Activity Diagram

2.2.2. User-wise activity diagram

[Registered user activity diagram]

[Moderator Activity Diagram]

[Employee use activity diagram]

[Admin user activity diagram]

2.3. System Development Model

[Steps of agile software development model for AsQ]

2.3.1.1. Project charter

2.3.1.3. Product backlog

~ Create technical documentation that includes all the technical details

2.3.2. Reasons to choose the agile software development model

2.3.2.2. Rapid development

2.4. Standards for Implementation of Functionalities

- Write comments in complete sentences with proper grammar and

2.4.1.4. Error Handling

2.4.1.6. File Organization

2.4.1.7. API'S (Built-In api) File System APIs

2.4.1.8. String Manipulation APIs

2.4.1.9. Date and Time APIs

2.4.1.10. Database APIs

2.4.1.11. Regular Expression APIs

2.4.1.12. 3rd Party APIs

2.5. Database Design

2.5.1.2. Attributes, data type, size, and constraints

2.5.1.3. Related Details

2.5.1.4. Sample Data

2.5.2.2. Attributes, data type, size and constraints

2.5.2.3. Related Details

Purpose of the table The purpose of storing admin data in a

2.5.2.4. Sample Data

2.5.3.2. Attributes, data type, size, and constraints

2.5.3.3. Related Details