1.

INTRODUCTION
1.1 ABOUT THE PROJECT:
The “Chat Bot for Students Learning” is a comprehensive web application designed to
facilitate interactive and informative conversations between students and the chatbot. The system
employs a robust tech stack, including HTML5, CSS, JavaScript, jQuery, Ajax, Bootstrap, and
PHP (version 8.0.2) with MySQLi OOP for backend operations. The user interface incorporates a
modern design using the AdminLTE template.

For users, the chatbot enables seamless communication, allowing students to ask
questions and receive relevant responses. The project includes an Admin Panel featuring four
tabs: Dashboard (with a graphical representation of frequently asked questions), Settings (for
updating system information and customization), Response List (for managing existing questions
and creating new responses), and Unanswered List (to handle and update responses for
unanswered questions).

The system caters specifically to the needs of school and college students, offering a
valuable tool for learning and information retrieval. The admin has the ability to monitor,
customize, and enhance the chatbot’s performance, ensuring a dynamic and user-centric learning
experience.

1.2 OBJECTIVE OF THE PROJECT:

1. Enable students to ask questions and receive informative responses.

2. Empower administrators to customize system settings for a personalized experience.

3. Provide a comprehensive list of responses for common and specific queries.

4. Manage and update unanswered questions to continuously improve the chatbot’s

knowledge.

5. Enhance student engagement and learning through a user-friendly interface.

1.3 PROBLEM STATEMENT:
Addressing the need for an interactive and tailored learning experience, the project aims
to develop a Chat Bot for Students Learning, enabling students to ask questions and receive
relevant information efficiently.
1.4 MODULE DESCRIPTION:
User Module:
 Description: This module is designed for students to interact with the chatbot. It allows
users to ask questions, seek information, and receive responses from the chatbot.
 Functionality: Users can input their queries through a text-based interface. The chatbot
processes the input using natural language processing techniques and provides relevant
responses based on the content of the query.
 Features: Seamless communication, query processing, and response presentation.
Admin Module:
 Description: The admin module provides access to the administrative functions of the
chatbot system. It enables administrators to manage system settings, responses, and
unanswered queries.
 Functionality: Administrators can log in to the system and access various features such
as dashboard analytics, system settings configuration, response management, and
handling of unanswered queries.
 Features: Dashboard analytics for insights, system settings customization, response
management, and unanswered query handling.
Dashboard Module:
 Description: This module offers a visual representation of frequently asked questions and
system analytics. It provides administrators with valuable insights into user interactions
and popular queries.
 Functionality:The dashboard displays graphical representations of frequently asked
questions, user engagement metrics, and other relevant analytics data.
 Features: Graphical representations, data visualization, frequently asked questions
analysis.
Settings Module:
 Description: The settings module allows administrators to configure various system
settings to customize the chatbot's behavior and appearance.
 Functionality: Administrators can update system information such as the system name,
intro message, no result message, system logo, bot avatar, and user avatar. These settings
help personalize the chatbot's interaction with users.
 Features: System settings customization, branding customization, personalization options.
Response List Module:
 Description: This module facilitates the management of responses to user queries. It
allows administrators to view existing questions and their corresponding answers, as well
as create new responses.
 Functionality: Administrators can view a list of existing questions and responses, edit or
delete responses as needed, and create new responses for frequently asked questions.
 Features: Response management, response creation, editing, and deletion.
Unanswered List Module:
 Description: The unanswered list module lists queries for which the chatbot couldn't
provide a satisfactory response. It enables administrators to review these queries and
update responses to improve the chatbot's knowledge.
 Functionality: Administrators can view a list of unanswered queries, review the context
of each query, and update responses accordingly. This module facilitates continuous
improvement of the chatbot's knowledge base.
 Features: Unanswered query management, response updating, knowledge base
improvement.

These modules collectively form the backbone of the "Chat Bot for Students Learning"
project, providing a comprehensive and user-friendly platform for both students and
administrators.
 2. SYSTEM SPECIFICATION

2.1 HARDWARE SPECIFICATION:

 Processor: Any modern processor capable of supporting web applications. A multi-core

processor with a clock speed of 2 GHz or higher is recommended for optimal
performance.
 RAM: Minimum 4GB of RAM is recommended to ensure smooth operation of the web
application. Higher RAM capacity may be beneficial for handling concurrent user
interactions and database operations efficiently.
 Storage: Adequate storage space is required for hosting the web application files,
including HTML, CSS, JavaScript, PHP scripts, and image assets. Additionally, storage
space is needed for the MySQL database to store system data, user interactions, and
responses. At least 10GB of storage space is recommended, although the actual
requirement may vary depending on the size of the application and the volume of data.

These hardware specifications provide a baseline for setting up the infrastructure required
to deploy and run the "Chat Bot for Students Learning" project effectively. Depending on the
anticipated workload and scalability requirements, it may be necessary to allocate additional
resources such as CPU cores, RAM, and storage capacity to ensure optimal performance and
user experience.

2.2 SOFTWARE SPECIFICATION:

 Operating System : Compatible with Windows, Linux, or macOS.

 Web Browser : Supports major browsers like Chrome, Firefox, or Safari.
 Server Environment : PHP (version 8.0.2) for backend processing.
 Database : MySQL for data storage.
 Frontend : HTML5, CSS, JavaScript, jQuery for user interface.
2.3 SOFTWARE DESCRIPTION:

PHP (version 8.0.2):

PHP serves as the primary server-side scripting language for the project.

It handles dynamic content generation, processing user input, and interacting with the MySQL
database.

MySQL (Database Management System):

MySQL is used as the database management system to store system information, user
interactions, and responses.

It enables efficient data storage, retrieval, and manipulation through structured query language
(SQL) commands.

HTML5, CSS, JavaScript, jQuery:

HTML5, CSS, JavaScript, and jQuery are utilized for frontend development, creating the user
interface and enhancing interactivity.

HTML5 provides the structure of web pages, CSS styles them, and JavaScript/JQuery adds
dynamic behavior and functionality to the interface.

Bootstrap (Frontend Framework):

Bootstrap framework is employed for designing responsive and mobile-first web pages.

It offers a collection of pre-designed components, CSS classes, and JavaScript plugins for
building modern and visually appealing user interfaces.

AdminLTE Template:

The AdminLTE template is integrated into the project to create a modern and user-friendly
administrative interface for administrators.

It provides a range of UI components, layouts, and plugins tailored for building admin panels
and dashboards.
Ajax (Asynchronous JavaScript and XML):

Ajax is used for asynchronous data exchange between the client and server, enabling real-time
updates and seamless user interactions without page reloads.

It facilitates dynamic content loading and interaction with the server-side scripts without
interrupting the user experience.

This software description highlights the key programming languages and tools utilized in the
project, showcasing their roles in developing an efficient and user-friendly chatbot application
for students' learning.
 3. SYSTEM STUDY
3.1 EXISTING SYSTEM:

Browsing:

 Students use web browsers to search for information online, accessing various
educational websites, forums, and articles.

 This method lacks personalized interaction with the content and sources, as well as
immediate responses to student queries.

 While browsing provides access to a vast amount of information, students may need to
sift through extensive search results to find relevant information.

 Interaction with online content is limited to reading and consuming information

passively.

Books:

 Students refer to textbooks and educational materials for learning and research purposes.

 Books offer static information that may not cover all topics comprehensively or provide
up-to-date information.

 Traditional textbooks do not offer interactive engagement for clarifying doubts or asking
questions.

 The learning experience from books is often solitary and lacks the dynamic nature of
real-time interaction.
3.1.1 LIMITATION OF EXISTING SYSTEM:
 Limited Personalization: The existing system lacks personalized interaction with
students, providing generic information that may not cater to individual learning needs or
preferences.
  Time-Consuming Search Process: Browsing for information online or referring to books
requires students to invest significant time and effort in searching for relevant resources,
which can be time-consuming and inefficient.
 Static Information: Books offer static information that may become outdated over time or
lack real-time updates on emerging topics or developments in the field of study.
 Lack of Interactivity: Both browsing and books offer passive learning experiences,
lacking the interactivity and engagement required for active learning and knowledge
retention.
 Limited Accessibility: Access to online resources may be restricted by factors such as
internet connectivity, availability of resources, or geographical limitations, limiting
students' access to educational materials.
 Difficulty in Clarifying Doubts: Students may encounter difficulties in clarifying doubts
or asking questions while using the existing system, as there is limited interaction with
instructors or peers for support and guidance.
 Inability to Track Progress: The existing system may lack mechanisms for tracking
students' learning progress, assessing their understanding of the material, or providing
personalized feedback to enhance learning outcomes.
 Dependency on External Sources: Relying solely on browsing and books for learning
may limit students' exposure to diverse perspectives, alternative resources, or interactive
learning tools that could enhance their learning experience.

Addressing these limitations requires the development of a more interactive, personalized,

and accessible learning platform, such as the proposed "Chat Bot for Students Learning" project.

3.2 PROPOSED SYSTEM:

The "Chat Bot for Students Learning" introduces an innovative approach to enhance the
learning experience by leveraging advanced technologies. This proposed system seeks to address
the limitations of traditional learning methods, such as browsing and books, by integrating a
dynamic chatbot tailored specifically for school and college students.

In the proposed system, students have the opportunity to engage in real-time

conversations with the chatbot, allowing them to ask questions, seek clarification, and receive
prompt, tailored responses. The chatbot acts as a personalized learning assistant, providing
instant access to relevant information and resources.

The system introduces an Admin Module that empowers administrators to customize the
chatbot's behavior, manage system settings, and curate responses to commonly asked questions.
The Dashboard Module offers a visual representation of frequently asked questions, providing
administrators with valuable insights into student queries.

Moreover, the Settings Module allows administrators to fine-tune the system information,
including the system name, short name, intro message, and visual elements like the system logo,
bot avatar, and user avatar. The Response List Module facilitates the management of existing
questions and the creation of new responses, ensuring an ever-evolving knowledge base.

To address unanswered queries, the Unanswered List Module enables administrators to

review and update responses, contributing to the continuous improvement of the chatbot's
capabilities. Overall, the proposed system aims to revolutionize student learning by combining
the accessibility of online platforms with the personalized and interactive nature of a dedicated
chatbot.

3.2.1 ADAVANTAGES OF PROPOSED SYSTEM:

 Personalized Learning Experience: The chatbot offers personalized interaction with
students, tailoring responses to their individual queries and learning needs, thus
enhancing engagement and understanding.
 Efficient Information Retrieval: Students can quickly access relevant information by
asking questions to the chatbot, eliminating the need for time-consuming browsing or
searching through books.
 Real-time Updates: The chatbot provides real-time updates on topics and developments,
ensuring that students have access to the latest information and resources.
 Interactive Learning: The chatbot facilitates interactive learning experiences through
engaging conversations, quizzes, and educational games, promoting active participation
and knowledge retention.
 Accessibility: The chatbot is accessible anytime, anywhere, providing students with on-
demand access to learning resources, regardless of their location or internet connectivity.
 Clarification of Doubts: Students can easily clarify doubts and ask questions to the
chatbot, receiving prompt and accurate responses, thus fostering a supportive learning
environment.
 Progress Tracking: The system allows administrators to track students' learning progress,
assess their understanding of the material, and provide personalized feedback to enhance
learning outcomes.
 Diverse Learning Resources: The chatbot offers access to a wide range of learning
resources, including multimedia content, articles, and interactive tutorials, enriching
students' learning experience.
 Flexibility: The system can be easily customized and expanded to accommodate diverse
educational needs, subjects, and learning objectives, providing flexibility for future
enhancements and adaptations.
 Continuous Improvement: Administrators can continuously update and improve the
chatbot's knowledge base, responses, and features based on user feedback and emerging
educational trends, ensuring its relevance and effectiveness over time.
 4. SYSTEM DESIGN
4.1 INPUT DESIGN:
User Input:
Type: Text input.
Purpose: Students can input their questions, queries, or topics of interest to the chatbot.
Format: Plain text input field where users can type their questions or queries in natural
language.
Admin Input:
Type: Text input, dropdown menus, file uploads.
Purpose: Administrators can input various settings and responses for managing the
chatbot and system configuration.
Format: Form-based input interface with fields for system settings such as system name,
intro message, no result message, system logo, bot avatar, and user avatar.
Dashboard Input:
Type: None (Automatic data generation).
Purpose: The dashboard module provides visual representations of system analytics and
frequently asked questions.
Format: Graphs, charts, and tables automatically generated from system data, requiring
no direct input from users.
Response List Input:
Type: Text input, dropdown menus.
Purpose: Administrators can input responses to frequently asked questions and manage
existing responses.
Format: Text input fields for creating new responses, dropdown menus for selecting
categories or tags for responses.
Unanswered List Input:
Type: Text input, dropdown menus.
 Purpose: Administrators can input responses for unanswered questions and manage
unresolved queries.
Format: Text input fields for updating responses, dropdown menus for categorizing
queries or assigning priorities.
4.2 OUTPUT DESIGN:
User Output:

Type: Text responses.

Purpose: Users receive responses to their queries or questions from the chatbot.

Format: Clear and concise textual information presented to the users based on the
chatbot's processing of their input.

Admin Output:

Type: Visual representations, tables.

Purpose: Administrators receive visual summaries and lists of system data for monitoring
and management purposes.

Format: Graphs, charts, and tables displaying system analytics, frequently asked
questions, response lists, and unanswered queries.

Dashboard Output:

Type: Visual representations.

Purpose: Administrators gain insights into system performance and user interactions.

Format: Graphs, charts, and tables providing visual summaries of system analytics,
frequently asked questions, and user engagement metrics.

Response List Output:

Type: Text, visual representations.

Purpose: Administrators view and manage responses to user queries.

 Format: Textual lists of questions and responses, possibly categorized or tagged. Visual
representations such as charts may also be used for analyzing response data.

Unanswered List Output:

Type: Text, visual representations.

Purpose: Administrators review and update responses for unanswered queries.

Format: Textual lists of unanswered queries and their corresponding responses. Visual
representations may also be used to prioritize or categorize unresolved queries.

These output designs ensure that users and administrators receive clear, organized, and
relevant information from the system, facilitating effective communication and management of
the "Chat Bot for Students Learning" project.
4.3 TABLE DESIGN:

4.3.1 frequent_asks Table:

Field Name Data type Constraints

id Int(30) Not Null
question_id Int(30) Not Null

4.3.2 questions Table:

Field Name Data type Constraints

id Int(30) Not null
question text Not null
respose_id Int(30) Not null

4.3.3 responses:

Field Name Data type Constraints

id Int(30) Not null
response_message text Not null

4.3.4 system_info

Field Name Data type Constraints

id Int(30) Not null
meta_field text Not null
meta_value text Not null
4.3.5 unanswered
 Field Name Data type Constraints
id Int(30) Not null
question text Not null
no_asks Int(30) Not null
4.4 DATA FLOW DIAGRAM

4.5 ENTITY RELATIONSHIP DIAGRAM

 5. SYSTEM TESTING
5.1 OBJECTIVES OF TESTING:

Software testing is a critical element of software quality assurance that represents the
ultimate review of specifications, design and coding. The user tests the developed system and
changes are made according to their needs. The testing phase involves the testing of developed
system using various kinds of data. It involves user training, system testing and successful
running of the developed system.

The changes are made according to their needs. The testing phase involves the testing of
the developed system using various kinds of data. While testing, errors are noted and corrections
are made system testing is the stage of implementation, which is aimed at ensuring that the
system works accurately and efficiently before live operation commences. The candidate system
is subject to a variety of test: stress recovery, and security and usability tests.

5.2 TEST PLAN:

 Testing is the process of executing a program with the intent of finding any errors. A
good test of course has the high probability of finding a yet undiscovered error. A successful
testing is the one that uncovers a yet undiscovered error.

A test is vital to the success of the system; system test makes a logical assumption that if
all parts of the system are correct, then goal will be successfully achieved. The candidate system
is subjected to a verity of tests online like responsiveness, its value, stress and security. A series
of tests are performed before the system is ready for user acceptance testing.

5.3 TESTING METHODS:

The different types of testing are:

• Unit Testing
• Integration Testing
• Validation Testing
• Output Testing
• User Acceptance Testing
5.3.1 UNIT TESTING:
Unit testing focuses verification efforts on the smallest unit of software design, the
module. This is also known as “Module Testing” The modules are tested separately this testing is
carried out during programming stage itself. In this step each module is found to be working
satisfaction as regard to the expected output from the module.

5.3.2 INTEGRATION TESTING:

Integration testing focuses on the design and construction of the software architecture.
Data can be lost across an interface, one module can have adverse effect on another sub functions
and show on. Thus, integration testing is a systematic technique for constructing test to uncover
errors associated with in the interface. In this project, all the modules are companied and then the
entire program is tested as a whole.

5.3.3 VALIDATION TESTING:

 Validation testing is the requirement established as a part of software requirement
analysis is validated against the software that has been constructed. This test provides the final
assurance whether the software needs all functional, behavioral and performance requirements

Thus, the proposed system under consideration has been tested by using validation testing
and found to be working satisfactory.

5.3.4 OUTPUT TESTING:

After performing the validation testing, the next step is the output testing of the proposed
system, since no system could be useful if it does not produce required output in the specific
format. Tested asking the users about the format required by them, the output is considered into
two ways: one is on the screen and the other is printed format.

The output format on the screen is found to be correct as the format designed according
to the user needs, for the hard copy also, the output comes as specified by the user. Hence output
testing does not result in correction in the system.

5.3.5 WHITEBOX TESTING:

White box Testing is done with the project which drive test cases that do the following

• Guarantee that all the independent paths with in modules have been exercise at least
once.
• Exercise all logical decision on the true and false side.
• Execute all loops at the boundaries and within their operation bounds.
• Exercise internal data structures to ensure the validity
It is aimed at ensuring that the system works accurately and efficiently before live
operation command.

5.3.6 BLACKBOX TESTING:

Black box System methods focus on the functional requirement of the software. Using
the black box testing method the following errors are identified and rectified in the package.
 • Incorrect or Missing functions
• Interface Errors
• Errors in data Structures or external database access.

5.3.7 USER ACCEPTANCE TESTING:

User acceptance testing of a system is the key factor for the success of any system. The
system under consideration is tested for user acceptance by constantly keep in touch with the
prospective system user at time of developing and making changes wherever required.

6. SYSTEM IMPLEMENTATION AND MAINTANCE

System implementation and maintenance for the "Chat Bot for Students Learning" project
involves several key steps to ensure the successful deployment, operation, and ongoing support
of the system:
6.1 Implementation Phase:
Deployment Planning: Develop a deployment plan outlining the steps and resources
required to deploy the system, including server setup, database configuration, and
software installation.
System Configuration: Configure the system settings, including chatbot responses,
system information, and user permissions, according to the project requirements.
Testing and Quality Assurance: Conduct thorough testing of the system to identify and
address any bugs, errors, or usability issues before deployment.
 User Training: Provide training sessions for administrators and end-users to familiarize
them with the system's features, functionality, and usage guidelines.
6.2 Maintenance Phase:
Monitoring and Performance Optimization: Monitor the system's performance, resource
utilization, and user interactions to identify and address any performance bottlenecks or
scalability issues.
Regular Updates and Upgrades: Keep the system up to date by applying software patches,
security updates, and new features to ensure optimal functionality and security.
Backup and Disaster Recovery: Implement regular data backups and disaster recovery
plans to protect against data loss and system downtime in the event of hardware failures
or security incidents.
User Support and Troubleshooting: Provide ongoing support to users, addressing any
questions, issues, or feedback related to the chatbot application through a dedicated
support channel.
Continuous Improvement: Gather user feedback, analyze system metrics, and conduct
periodic evaluations to identify areas for improvement and enhance the system's
effectiveness over time.

7. CONCLUSION
In conclusion, the "Chat Bot for Students Learning" project stands as a pivotal
advancement within the realm of educational technology, offering a personalized and interactive
learning journey for students. Through the adept utilization of modern technologies such as PHP,
MySQL, and sophisticated chatbot algorithms, the system empowers students to seamlessly pose
questions, seek clarifications, and access pertinent information in real-time. The extensive
administrative panel facilitates the customization of system settings, management of responses,
and tracking of user interactions, thereby ensuring the smooth operation and continuous
enhancement of the system. With its intuitive user interface, unparalleled accessibility, and
unwavering support, this project endeavors to redefine the landscape of student learning,
fostering heightened engagement, amplified knowledge retention, and elevated academic
achievement.
 8. FUTURE ENHANCEMENT
For future enhancements, the "Chat Bot for Students Learning" project could explore several
avenues. Firstly, integrating natural language processing (NLP) algorithms could significantly
enhance the chatbot's understanding and response accuracy. Secondly, the implementation of
machine learning models would enable continuous improvement, ensuring that the chatbot
evolves with user interactions.
 9. REFERENCE
9.1 BIBLIOGRAPHY:

9.1.1 BOOKS REFERRED:

1. "PHP and MySQL Web Development" by Luke Welling and Laura Thomson - This book provides
comprehensive coverage of PHP and MySQL fundamentals, including database design, security,
and web development techniques.
2. "Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5" by Robin Nixon - This book
offers practical tutorials and examples for building dynamic web applications using PHP, MySQL,
JavaScript, jQuery, CSS, and HTML5.
 3. "Designing Bots: Creating Conversational Experiences" by Amir Shevat - This book explores the
principles and best practices of designing conversational interfaces, including chatbots. It covers
topics such as user experience design, natural language processing, and bot development platforms.
4. "Chatbot Development with Botpress: Build Custom Bots Using JavaScript and Node.js" by Kevin
Timotius While this book focuses on building chatbots using Node.js, it provides valuable insights
into chatbot development concepts, architecture, and implementation strategies.
5. "Educational Technology: A Definition with Commentary" by Alan Januszewski and Michael
Molenda - This book offers an overview of educational technology concepts, theories, and
practices, providing insights into how technology can enhance learning experiences for students.

9.1.2 WEBSITES
1. W3Schools: https://www.w3schools.com/
2. Stack Overflow: https://stackoverflow.com/
3. GitHub: https://github.com/
4. Mozilla Developer Network (MDN): https://developer.mozilla.org/
5. PHP.net: https://www.php.net/
6. MySQL Documentation: https://dev.mysql.com/doc/
7. Chatbot Magazine: https://chatbotsmagazine.com/
8. Coursera: https://www.coursera.org/
9. Udemy: https://www.udemy.com/
10. Medium: https://medium.com/

10. APPENDIX

A. CODE
<!DOCTYPE html>

<html lang="en" class="" style="height: auto;">

<?php require_once('config.php'); ?>

<?php require_once('inc/header.php') ?>

<body class="hold-transition layout-top-nav" >

<div class="wrapper">

<?php require_once('inc/topBarNav.php') ?>

<?php $page = isset($_GET['page']) ? $_GET['page'] : 'portal'; ?>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper" style="min-height: 567.854px;">

<!-- Content Header (Page header) -->

<div class="content-header">

<!-- /.container-fluid -->

</div>

<!-- /.content-header -->

<!-- Main content -->

<section class="content">

<div class="container">

<?php

if(!file_exists($page.".php") && !is_dir($page)){

include '404.html';

}else{

if(is_dir($page))

include $page.'/index.php';

else

include $page.'.php';
 }

?>

</div>

</section>

<!-- /.content -->

<div class="modal fade" id="confirm_modal" role='dialog'>

<div class="modal-dialog modal-md modal-dialog-centered" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">Confirmation</h5>

</div>

<div class="modal-body">

<div id="delete_content"></div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-primary" id='confirm' onclick="">Continue</button>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

<div class="modal fade" id="uni_modal" role='dialog'>

 <div class="modal-dialog modal-md modal-dialog-centered" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title"></h5>

</div>

<div class="modal-body">

</div>

<div class="modal-footer">

<button type="button" class="btn btn-primary" id='submit' onclick="$('#uni_modal

form').submit()">Save</button>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

</div>

</div>

</div>

</div>

<div class="modal fade" id="uni_modal_right" role='dialog'>

<div class="modal-dialog modal-full-height modal-md" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title"></h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span class="fa fa-arrow-right"></span>

</button>
 </div>

<div class="modal-body">

</div>

</div>

</div>

</div>

<div class="modal fade" id="viewer_modal" role='dialog'>

<div class="modal-dialog modal-md" role="document">

<div class="modal-content">

<button type="button" class="btn-close" data-dismiss="modal"><span class="fa fa-

times"></span></button>

<img src="" alt="">

</div>

</div>

</div>

</div>

<!-- /.content-wrapper -->

<?php require_once('inc/footer.php') ?>

</body>

</html>

<style>

.direct-message-place {
 background-color: darkblue;

</style>

B. SCREENSHOTS

User page:

Admin dashboard:
System setting:

Responses list:
Unanswered list: