Contents

Introduction to the problem ........................................................................................................................ 4

1.1 Purpose of the Project: ...................................................................................................................... 4

1.2 Scope: ................................................................................................................................................ 4

1.3 Background: ...................................................................................................................................... 4

1.4 Benefits: ............................................................................................................................................ 4

1.5 Objectives ......................................................................................................................................... 5

1.6 Project Overview .............................................................................................................................. 5

1.7 Intended Audience and Reading Suggestion: ................................................................................... 5

1.8 Document Conventions:.................................................................................................................... 5

Software Requirement and Specification.................................................................................................... 6

2.1 Software Requirements: .................................................................................................................... 6

2.2 Functional Requirements: ................................................................................................................. 6

2.3 Non-Functional Requirements: ......................................................................................................... 6

2.3.1 Hardware Requirements ............................................................................................................. 7

2.3.2 Software Requirements .............................................................................................................. 7

2.4 System Features: ............................................................................................................................... 7

2.6 User Profile Management: ................................................................................................................ 7

2.7 Search Functionality ......................................................................................................................... 8

2.8 Responsive Design and User Interface ............................................................................................. 8

2.9 External Interface Requirements....................................................................................................... 8

2.10 User Interfaces: ............................................................................................................................... 8

2.10.1 Homepage: ............................................................................................................................... 8

2.10.2 User Profile Page:..................................................................................................................... 8

2.10.3 Dashboard: ............................................................................................................................... 8

2.10.4 Search Bar: ............................................................................................................................... 8

2.11 User Interfaces with External Systems ........................................................................................... 8

2.11.1 Email Notifications: ................................................................................................................. 8

1
 2.12 Software Interfaces ......................................................................................................................... 9

2.12.1 Web Server: .............................................................................................................................. 9

2.12.2 Database: .................................................................................................................................. 9

2.13 Hardware Interfaces ........................................................................................................................ 9

2.13.1 Client Devices: ......................................................................................................................... 9

2.14 Communication Interfaces .............................................................................................................. 9

2.14.1 HTTP/HTTPS: ......................................................................................................................... 9

2.14.2 SMTP: ...................................................................................................................................... 9

2.15 Third-Party Services ....................................................................................................................... 9

2.15.1 Bootstrap and CSS Libraries: ................................................................................................... 9

2.15.2 JavaScript Libraries: ................................................................................................................. 9

2.15.3 MySQL Database: .................................................................................................................... 9

2.16 Hardware Interfaces ........................................................................................................................ 9

Analysis (use case model) ........................................................................................................................ 10

3.1 Identifying Actors and Use Cases using Textual Analysis: ................................................... 10

3.2 Forming Use Case Diagram with Candidates and Use Case: ................................................. 11

Design ....................................................................................................................................................... 12

4.1 Architecture Diagram: .................................................................................................................... 12

4.2 ERD with Data Dictionary: ............................................................................................................. 13

4.3 Data Flow Diagram (Level 0 and Level 1): .................................................................................... 14

4.3.1 Zero Level DFD: ...................................................................................................................... 14

4.3.2 First Level DFD: ...................................................................................................................... 15

4.4 Class Diagram: ................................................................................................................................ 16

4.5 Object Diagram: .............................................................................................................................. 17

4.6 Activity Diagram: ........................................................................................................................... 18

4.7 Collaboration Diagram: .................................................................................................................. 19

4.8: State Transition Diagram: .............................................................................................................. 20

Implementation ......................................................................................................................................... 21

2
 5.1 Component Diagram: ...................................................................................................................... 21

5.2 Deployment Diagram: ..................................................................................................................... 22

5.3 Database Architecture: .................................................................................................................... 22

1-Tier Architecture: .............................................................................................................................. 23

2-Tier Architecture: .............................................................................................................................. 23

Fig: 2 Tier Architecture ..................................................................................................................... 23

3-Tier Architecture: .............................................................................................................................. 24

Diagram: ............................................................................................................................................ 24

Testing (Software Quality Attributes) ...................................................................................................... 25

6.1 Test Case Specification: .................................................................................................................. 25

6.2 Black box test case: ......................................................................................................................... 26

6.2.1 BVA or Boundary value Analysis:........................................................................................... 26

6.2.2 Equivalence class partitioning:................................................................................................. 26

6.2.3 State transition testing: ............................................................................................................. 27

6.2.5 Graph base testing: ................................................................................................................... 28

Tools and Technologies ............................................................................................................................ 29

7.1 Programming Language: ................................................................................................................. 29

7.2 Operating Environment:.................................................................................................................. 32

7.3 Appendix:........................................................................................................................................ 36

3
Chapter 1

Introduction to the problem

1.1 Purpose of the Project:
The Student Guide system project is designed to provide students with an online platform to access information
about various quiz starts. It allows users to register, log in browse available
The dashboard allows users to start quizzes, see results, create a mindset for choosing the next course, and manage
their profile.

1.2 Scope:
The project’s scope includes user authentication, dynamic testing, and results, users profile, and search
functionality. The Student Guide System project’s scope encompasses the development of a web-based application
that incorporates modern web technologies such as PHP, HTML, Bootstrap, CSS, JavaScripts, and MYSQLi, The
system will facilitate user registration, and login, quiz, quiz details, user profiles, and search functionality. It will
empower students to make informed secession about their academic journey while simplifying to the quiz discovery
process.

1.3 Background:
In today’s rapidly evolving education landscape, students, often struggle to find accurate and
comprehensive information about the multitude of quizzes available to them. Traditional methods of
course selection, involve consulting paper brochures or navigating through various university websites.
Can be time-consuming and overwhelming. As a result, there is a pressing need for a user-friendly and
centralized, platform that provides students with easy access to quiz details, allowing them to make
informed decisions about their educational journey.

1.4 Benefits:
The Student Guide system offers several benefits to its users, including
Time Savings: Students can quickly access and compare quiz information, saving tie compared to
traditional research methods.
Informed Decision-Making: Detailed Quiz Descriptions, schedules, and instructor information help
students make informed choices.
Efficient Enrollment: Enrolling in Quiz is simplified through the platform, enhancing the user
experience.
Personalization: User profiles enable personalized experience. Making the system more engaging.
Centralized Platform: Students can access a wide range of courses from different institutions all in one
place.

4
1.5 Objectives
The primary objectives of the Student guide system project are as follows:
Centralized Quiz Information: Students can quickly access and compare quiz information, Develop a
system that aggregates quiz information from different educational institutions and presents it in a unified
platform.
User-Friendly Interface: Design an intuitive and user-friendly interface that enables students to easily
navigate and access quick details
Efficient Quiz Search: Implement a robust search functionality that allows students to quickly design
courses based on keywords, fields of interest, instructors, and schedules,
User Profile: User profiles enable personalized experience. Making the system more engaging.

1.6 Project Overview

The Student Guide System is a Web-based application developed using PHP, HTML, Bootstrap, CSS,
and MySQL, It aims to simplify to process of finding and ex;oring different quiz management systems
available to students.

1.7 Intended Audience and Reading Suggestion:

 Developers
 Project managers
 Users
 Documentation

1.8 Document Conventions:

Entire document should be entire justified.
Convention for Main title
Font Face. Times New Roman
Font Style. Bold
Font Size. 14
Convention for Sub title
Font Face. Times New Roman
Font Style. Bold
Font Size. 12
Convention for body
Font Face. Times New Roman
Font Size.12

5
Chapter 2:

Software Requirement and Specification

A software requirements specification (SRS) is a document that describes what the software will do and
how it will be expected to perform. It also describes the functionality the product needs to fulfill all
stakeholders (business, users) needs.

2.1 Software Requirements:

The Student Guide system project requires the following software components to function properly:
 Web Server: Apache or any other web server that supports PHP.
 Programming Language: PHP 7. x or later.
 Database: MySQL database for storing user data quiz information
 Text Editor or IDE: For editing code files.
 Web Browser: To interact with the application.

2.2 Functional Requirements:

The project aims to meet the following functional requirements:
 User Registration and Login
Users can register with a valid email and password.
Users can log in using their registered credentials.
 Quiz and Results
Select the specific category and display Quiz
After submitting the quiz Users can view the result
 User Profile Management:
Users can update their profile information, including name, email, profile picture, and password.
 Dashboard
Upon login, users are directed to their dashboard, displaying and start the quiz-relevant results

2.3 Non-Functional Requirements:

 Usability:
The user interface should be intuitive and easy to navigate.
Response time for actions such as login. Search, and profile, updates should be minimal.
 Security:
User passwords should be securely stored using hashing and salting techniques.
User sessions should be properly managed to prevent unauthorized access.
 Performance:
6
 The System should handle concurrent user interaction without significant performance
degradations.
Database queries should be optimized for efficiency.
 Scalability
The system architecture should allow for easy scaling as the user base grows.
 Compatibility
The application should be compatible with major web browsers (Chrome, Firefox, Safari, etc).
 Accessibility:
The application should adhere to accessibility standards, ensuring usability for users with
disabilities.
2.3.1 Hardware Requirements
A computer with a local host server, like Xammp & Web browser (Chrome, Firefox, Safari, etc.)
2.3.2 Software Requirements
 Web server (e.g, Apache)
 PHP 7. x or later
 MySQL database
 Text editor or integrated development environment, (IDE) VsCode

2.4 System Features:

The Student Guide System project is designed to provide a user-friendly and efficient platform for
students to explore, evaluate, and enroll in courses. The following features are implemented to fulfill these
objectives:
2.5 User Registration and Login:
 User Registration:
Users can register by providing a valid email address and password.
The registration form includes basic validation for input fields.
Passwords are securely hashed before storage in the database.
 User Login:
Registered users can log in using their email and password.
Passwords are verified against stored hashed values.

2.6 User Profile Management:

Registered users can view and manage their profile information. Users can update their name, email,
profile picture, and password. The profile pictures can be uploaded or changed.

7
2.7 Search Functionality
o Quiz Search:
Users can search for courses using keywords, instructor names, or fields of interest. Search results
are dynamically displayed based on user input.

2.8 Responsive Design and User Interface

Responsive Design: The application is designed to be responsive, providing a seamless experience across
different device types and screen sizes.
User Interface: The user interface is intuitive, with clear navigation and well-organized content. Stylish
design elements are implemented using Bootstrap and custom CSS.

2.9 External Interface Requirements

The Student Guide System project interacts with various external entities and systems. These external
interfaces ensure a seamless user experience and proper functionality. The following sections outline the
external interface requirements of the system.

2.10 User Interfaces:

User Registration and Login Pages: Registration page for users to create accounts. Login page for users
to access the system. Both pages should have user-friendly forms with appropriate input fields and
validation.
2.10.1 Homepage:
The homepage displays course listings, each with a "View Details" button. Course Details Page: Displays
detailed course information and provides an "Enroll" button.
2.10.2 User Profile Page:
Allows users to view and update their profile information.
2.10.3 Dashboard:
Personalized dashboard displaying enrolled courses and notifications.
2.10.4 Search Bar:

2.11 User Interfaces with External Systems

Located on the homepage, users can enter keywords to search for courses.
2.11.1 Email Notifications:
The system sends email notifications to users about course updates, enrollments, and relevant events.
Integration with an email service provider is required.

8
2.12 Software Interfaces
2.12.1 Web Server:
The system interacts with the web server (e.g., Apache) to serve web pages and handle HTTP requests.
2.12.2 Database:
The system communicates with the MySQL database to store and retrieve user data, course information,
and enrollment details.

2.13 Hardware Interfaces

2.13.1 Client Devices:
The system should be accessible from various client devices, such as desktop computers, laptops, tablets,
and smartphones.

2.14 Communication Interfaces

2.14.1 HTTP/HTTPS:
The system communicates with users' web browsers over HTTP/HTTPS for data exchange and
presentation of web pages.
2.14.2 SMTP:
The system uses the Simple Mail Transfer Protocol (SMTP) to send email notifications to users.

2.15 Third-Party Services

2.15.1 Bootstrap and CSS Libraries:
The system utilizes Bootstrap and CSS libraries to enhance the visual design and responsiveness of the
user interface.
2.15.2 JavaScript Libraries:
JavaScript libraries may be used to enhance user interactions and dynamic content.
2.15.3 MySQL Database:
The system interfaces with a MySQL database to store and retrieve user data, course information, and
enrollment details. By considering and implementing these external interface requirements, the Student
Guide System project ensures effective communication and interaction with users, external systems, and
databases. These interfaces contribute to the system's functionality, accessibility, and user satisfaction.

2.16 Hardware Interfaces

Processor: 1.9 gigahertz (GHz) x86- or x64-bit dual core processor with SSE2 instruction set
Memory: 2-GB RAM
Display: Super VGA with a resolution of 1024 x 768

9
Chapter 3:

Analysis (use case model)

3.1 Identifying Actors and Use Cases using Textual Analysis:
Fig: 3.1

10
3.2 Forming Use Case Diagram with Candidates and Use Case:
Fig:3.2

11
Chapter 4:

Design
4.1 Architecture Diagram:
An architectural diagram is a diagram of a system that is used to abstract the overall outline of the software
system and the relationships, constraints, and boundaries between components. It is an important tool as it
provides an overall view of the physical deployment of the software system and its evolution roadmap.
Fig:4.1

12
4.2 ERD with Data Dictionary:
An entity relationship diagram (ERD), also known as an entity relationship model, is a graphical representation
that depicts relationships among people, objects, places, concepts or events within an information technology (IT)
system.
Fig: 4.2

13
4.3 Data Flow Diagram (Level 0 and Level 1):
A data flow diagram shows the way information flows through a process or system. It
includes data inputs and outputs, data stores, and the various sub processes the data moves
through. DFDs are built using standardized symbols and notation to describe various entities
and their relationships.

4.3.1 Zero Level DFD:

DFD Level 0 is also called a Context Diagram. It's a basic overview of the whole system or process
being analyzed or modeled. It's designed to be an at-a-glance view, showing the system as a single high-
level process, with its relationship to external entities.
Fig: 4.3.1

14
4.3.2 First Level DFD:
As described previously, context diagrams (level 0 DFDs) are diagrams where the whole system is represented as
a single process. A level 1 DFD notates each of the main sub processes that together form the complete system. We
can think of a level 1 DFD as an “exploded view” of the context diagram.
Fig: 4.3.2

15
4.4 Class Diagram:
In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure
diagram that describes the structure of a system by showing the system's classes, their attributes, operations
(or methods), and the relationships among objects.
Fig:4.4

16
4.5 Object Diagram:
Object diagrams are derived from class diagrams so object diagrams are dependent upon class diagrams. Object
diagrams represent an instance of a class diagram. The basic concepts are similar for class diagrams and object
diagrams. Object diagrams also represent the static view of a system but this static view is a snapshot of the system
at a particular moment. Object diagrams are used to render a set of objects and their relationships as an instance.
Fig:4.5

17
4.6 Activity Diagram:
Activity diagram is another important diagram in UML to describe the dynamic aspects of the system. Activity
diagram is basically a flowchart to represent the flow from one activity to another activity. The activity can be
described as an operation of the system. The control flow is drawn from one operation to another.
Fig:4.6

18
4.7 Collaboration Diagram:
A collaboration diagram, also known as a communication diagram, is an illustration of the relationships and
interactions among software objects in the Unified Modeling Language (UML). These diagrams can be used
to portray the dynamic behavior of a particular use case and define the role of each object.
Fig:4.7

19
4.8: State Transition Diagram:
State-transition diagrams describe all of the states that an object can have, the events under
which an object changes state (transitions), the conditions that must be fulfilled before the
transition will occur (guards), and the activities undertaken during the life of an object
(actions)
Fig:4.8

20
Chapter 5:

Implementation
This report focuses on the design and implementation of the Smart Weather system. It deals
with the complete processes on building and implementing it. It focuses in the technical aspects
of the system starting with identifying the necessary components and building the relevant
relationship between or among them as needed for the smooth and efficient operation of the
system.

5.1 Component Diagram:

A component diagram, also known as a UML component diagram, describes the organization
and wiring of the physical components in a system. Component diagrams are often drawn to
help model implementation details and double-check that every aspect of the system's required
functions is covered by planned development.

Fig:5.1

21
5.2 Deployment Diagram:
Deployment diagrams are used to visualize the topology of the physical components of a
system, where the software components are deployed. Deployment diagrams are used to
describe the static deployment view of a system. Deployment diagrams consist of nodes and
their relationships.

Fig:5.2

5.3 Database Architecture:

A Database Architecture is a representation of DBMS design. It helps to design, develop,
implement, and maintain the database management system. A DBMS architecture allows
dividing the database system into individual components that can be independently modified,
changed, replaced, and altered. It also helps to understand the components of a database. A
database stores critical information and helps access data quickly and securely. Therefore,
selecting the correct Architecture of DBMS helps in easy and efficient data management.

Types of DBMS Architecture

 1-Tier Architecture

22
  2-Tier Architecture

 3-Tier Architecture

1-Tier Architecture:
1 Tier Architecture in DBMS is the simplest architecture of database in which the client, server,
and database all reside on the same machine. A simple one tier architecture example would be
anytime you install a database in your system and access it to practice SQL queries.
But such architecture is rarely used in production.

2-Tier Architecture:
A 2 Tier Architecture in DBMS is a Database architecture where the presentation layer runs
on a client (PC, Mobile, Tablet, etc.), and data is stored on a server called the second tier. Two
tier architecture provides added security to the DBMS as it is not exposed to the end-user
directly. It also provides direct and faster communication.

Fig: 2 Tier Architecture

23
3-Tier Architecture:
A 3 Tier Architecture in DBMS is the most popular client server architecture in DBMS in which the
development and maintenance of functional processes, logic, data access, data storage, and user
interface is done independently as separate modules. Three Tier architecture contains a presentation
layer, an application layer, and a database server.
3-Tier data base Architecture design is an extension of the 2-tier client-server architecture. A 3-tier
architecture has the following layers:
1. Presentation layer (your PC, Tablet, Mobile, etc.)

2. Application layer (server)

3. Database Serve

Diagram:
Fig: 3Tier Architecture:

Presentation tier

Application tier

Database tier

24
Chapter 6:

Testing (Software Quality Attributes)

The aim of the system testing process was to determine all defects in our project. The program was
subjected to a set of test inputs and various observation were made and based on these on these
observations it will be decided whether the program behaves as expected or not. Our project went
through two level of testing.
 Unit Testing
 Integration Testing

Unit Testing:
UNIT TESTING is a type of software testing where individual units or components of a software are
tested. The purpose is to validate that each unit of the software code performs as expected. Unit Testing
is done during the development (coding phase) of an application by the developers. Unit Tests isolate a
section of code and verify its correctness. A unit may be an individual function, method, procedure,
module, or object.
In SDLC, STLC, V Model, Unit testing is first level of testing done before integration testing.
Unit testing is a White Box testing technique that is usually performed by the developer. Though, in a
practical world due to time crunch or reluctance of developers to tests, QA engineers also do unit
testing.
Integration Testing:
INTEGRATION TESTING is defined as a type of testing where software modules are integrated
logically and tested as a group. A typical software project consists of multiple software modules, coded
by different programmers. The purpose of this level of testing is to expose defects in the interaction
between these software modules when they are integrated Integration Testing focuses on checking data
communication amongst these modules. Hence it is also termed as ‘I & T’ (Integration and Testing),
‘String Testing’ and sometimes ‘Thread Testing’.

6.1 Test Case Specification:

The test plan focuses on how the testing for the project will proceed, which units will be tested and what
approaches (and tools) are to be used during the various stages of testing. However, it does not deal with
details of testing a unit nor does it specify which test case are to be used.
Test case specification has to be done separately for each unit. Based on the approach specified in the
test plan first the feature to be tested for this unit must be determined. The overall approach stated in the
plan is refined into specific test techniques that should be followed and into the criteria to be used for

25
evaluation. Based on these the test cases are specified for testing unit.

6.2 Black box test case:

Black Box Testing is a software testing method in which the functionalities of software applications are
tested without having knowledge of internal code structure, implementation details and internal paths.
Black Box Testing mainly focuses on input and output of software applications and it is entirely based
on software requirements and specifications. It is also known as Behavioral Testing.

The above Black-Box can be any software system you want to test. For Example, an operating system
like Windows, a website like Google, a database like Oracle or even your own custom application.
Under Black Box Testing, you can test these applications by just focusing on the inputs and outputs
without knowing their internal code implementation.
6.2.1 BVA or Boundary value Analysis:
BVA is another Black Box Test Design Technique, which is used to find the errors at boundaries of
input domain (tests the behavior of a program at the input boundaries) rather than finding those errors in
the center of input. So, the basic idea in boundary value testing is to select input variable values at their:
minimum, just above the minimum, just below the minimum, a nominal value, just below the
maximum, maximum and just above the maximum. That is, for each range, there are two boundaries,
the lower boundary (start of the range) and the upper boundary (end of the range) and the boundaries are
the beginning and end of each valid partition. We should design test cases which exercise the program
functionality at the boundaries, and with values just inside and outside the boundaries. Boundary value
analysis is also a part of stress and negative testing
6.2.2 Equivalence class partitioning:
Equivalence partitioning is also known as “Equivalence Class Partitioning”. In this method, the input
domain data is divided into different equivalence data classes – which are generally termed as „Valid‟
and „Invalid‟. The inputs to the software or system are divided into groups that are expected to exhibit
similar behavior. Thus, it reduces the number of test cases to a finite list of testable test cases covering
maximum possibilities.
Example: Suppose the application you are testing accept values in the character limit of 1 – 100 only.

26
Here, there would be three partitions: one valid partition and two invalid partitions.
The valid partition: Between 1 & 100 characters.
The expectation is that the text field would handle all inputs with 1-100 characters, the same way.
The first invalid partition: 0 characters.
When no characters are entered, we’d expect the text field to reject the value.
The second invalid partition: ≥ 101
We’d expect the text field to reject all values greater than or equal to 101 characters
6.2.3 State transition testing:
State Transition Testing is a type of software testing which is performed to check the change in the state
of the application under varying input. The condition of input passed is changed and the change in state
is observed.
State Transition Testing is basically a black box testing technique that is carried out to observe the
behavior of the system or application for different input conditions passed in a sequence. In this type of
testing, both positive and negative input values are provided and the behavior of the system is observed.
Transition States:

Change Mode
When this mode is activated then the display mode moves from TIME to DATE.
Reset
When the display mode is TIME or DATE, then reset mode sets them to ALTER TIME or ALTER DATE
respectively.
Time Set
When this mode is activated, display mode changes from ALTER TIME to TIME.
Date Set
When this mode is activated, display mode changes from ALTER DATE to DATE.
State Transition Diagram:
State Transition Diagram shows how the state of the system changes on certain inputs.

It has four main components:

1. States

2. Transition

3. Events

4. Actions

6.2.4 Decision table testing:

27
A Decision Table is a tabular representation of inputs versus rules/cases/test conditions. It is a very
effective tool used for both complex software testing and requirements management. Decision table
helps to check all possible combinations of conditions for testing and testers can also identify missed
conditions easily. The conditions are indicated as True (T) and False (F) values.
.

6.2.5 Graph base testing:

The first step in black-box testing is to understand the objects that are modeled in software and the
relationships that connect these objects. Once this has been accomplished, the next step is to define a
series of tests that verify all objects have the expected relationship to one another. Stated in another
way, software testing begins by creating a graph of important objects and their relationships and then
devising a series of tests that will cover the graph so that each object and relationship is exercised and
errors are uncovered.
To accomplish these steps, the software engineer begins by creating a graph a collection of nodes that
represent objects; links that represent the relationships between objects; node weights that describe the
properties of node (e.g., a specific data value or state behavior); and link weight that describe some
characteristic of a link.

28
Chapter 7

Tools and Technologies

7.1 Programming Language:
 HTML(designing)
 CSS(styling)
 JavaScript
 PHP
 MySQL
HTML:
Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online
applications. A hypertext is a text that is used to reference other pieces of text, while a markup language
is a series of markings that tells web servers the style and structure of a document.
HTML is not considered a programming language as it can’t create dynamic functionality. Instead, with
HTML, web users can create and structure sections, paragraphs, and links using elements, tags, and
attributes.
Here are some of the most common uses for HTML:
 Web development. Developers use HTML code to design how a browser displays
web page elements, such as text, hyperlinks, and media files.

 Internet navigation. Users can easily navigate and insert links between related
pages and websites as HTML is heavily used to embed hyperlinks.

 Web documentation. HTML makes it possible to organize and format documents,

similarly to Microsoft Word.

CSS:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs, variations in display for different devices and screen sizes as
well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

29
  CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.

 Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.

 Superior styles to HTML − CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.

 Multiple Device Compatibility − Style sheets allow content to be optimized for

more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and cell
phones or for printing.

 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.

JavaScript:
JavaScript is a programming language commonly used in web development. It was originally developed
by Netscape as a means to add dynamic and interactive elements to websites.
While JavaScript is influenced by Java, the syntax is more similar to C and is based on ECMAScript, a
scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code is processed by the client's
web browser rather than on the web server. This means JavaScript functions can run after a webpage has
loaded without communicating with the server. For example, a JavaScript function may check a web
form before it is submitted to make sure all the required fields have been filled out. The JavaScript code
can produce an error message before any information is actually transmitted to the server.
Like server-side scripting languages, such as PHP and ASP, JavaScript code can be inserted anywhere
within the HTML of a webpage. However, only the output of server-side code is displayed in the
HTML, while JavaScript code remains fully visible in the source of the webpage. It can also be
referenced in a separate .JS file, which may also be viewed in a browser.
30
Below is an example of a basic JavaScript function that adds two numbers. The function is called with
the parameters 7 and 11. If the code below were included in the HTML of a webpage, it would display
the text "18" in an alert box.
<script> function sum(a,b)
{ return a + b;
} var total = sum(7,11); alert(total); </script>
JavaScript functions can be called within <script> tags or when specific events take place. Examples
include onClick, onMouseDown, onMouseUp, onKeyDown, onKeyUp, onFocus, onBlur, onSubmit,
and many others. While standard JavaScript is still used for performing basic client-side functions,
many web developers now prefer to use JavaScript libraries like jQuery to add more advanced dynamic
elements to websites.
PHP:
PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites or
Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for Personal Home Pages.
PHP scripts can only be interpreted on a server that has PHP installed.
The client computers accessing the PHP scripts require a web browser only.
A PHP file contains PHP tags and ends with the extension “.php”.
MySQL:
MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses. MySQL is
developed, marketed and supported by MySQL AB, which is a Swedish company. MySQL is becoming
so popular because of many good reasons −
MySQL is released under an open-source license. So you have nothing to pay to use it.
MySQL is a very powerful program in its own right. It handles a large subset of the functionality of the
most expensive and powerful database packages.
MySQL uses a standard form of the well-known SQL data language.
MySQL works on many operating systems and with many languages including PHP, PERL, C, C++,
JAVA, etc.
MySQL works very quickly and works well even with large data sets.
MySQL is very friendly to PHP, the most appreciated language for web development.
MySQL supports large databases, up to 50 million rows or more in a table. The default file size limit for
a table is 4GB, but you can increase this (if your operating system can handle it) to a theoretical limit of
8 million terabytes (TB).
MySQL is customizable. The open-source GPL license allows programmers to modify the MySQL
software to fit their own specific environments.

31
7.2 Operating Environment:
 Visual Studio Code
 Xampp
 PHPmyAdmin
Visual Studio Code:
Visual Studio Code (famously known as VS Code) is a free open source text editor by Microsoft. VS
Code is available for Windows, Linux, and mac OS. Although the editor is relatively lightweight, it
includes some powerful features that have made VS Code one of the most popular development
environment tools in recent times.
Features
VS Code supports a wide array of programming languages from Java, C++, and Python to CSS, Go, and
Deckerville. Moreover, VS Code allows you to add on and even creating new extensions including code
linters, debuggers, and cloud and web development support.
The VS Code user interface allows for a lot of interaction compared to other text editors. To simplify
user experience, VS Code is divided into five main regions:
The activity bar
The side bar
Editor groups
The panel
The status bar
XAMPP:
XAMPP is one of the widely used cross-platform web servers, which helps developers to create and test
their programs on a local webserver. It was developed by the Apache Friends, and its native source code
can be revised or modified by the audience. It consists of Apache HTTP Server, Maria DB, and interpreter
for the different programming languages like PHP and Perl. It is available in 11 languages and supported
by different platforms such as the IA-32 package of Windows & x64 package of mac OS and Linux.
XAMPP is an abbreviation where X stands for Cross-Platform, A stands for Apache, M stands for MYSQL,
and the Ps stand for PHP and Perl, respectively. It is an open-source package of web solutions that
includes Apache distribution for many servers and command line executables along with modules such
as Apache server, Maria DB, PHP, and Perl.
XAMPP helps a local host or server to test its website and clients via computers and laptops before
releasing it to the main server. It is a platform that furnishes a suitable environment to test and verify the
working of projects based on Apache, Perl, MySQL database, and PHP through the system of the host
itself. Among these technologies, Perl is a programming language used for web development, PHP is a
32
backend scripting language, and Maria DB is the most vividly used database developed by MySQL. The
detailed description of these components is given below.
Components of XAMPP
As defined earlier, XAMPP is used to symbolize the classification of solutions for different technologies.
It provides a base for testing of projects based on different technologies through a personal server.
XAMPP is an abbreviated form of each alphabet representing each of its major components. This
collection of software contains a web server named Apache, a database management system named Maria
DB and scripting/ programming languages such as PHP and Perl. X denotes Cross-platform, which means
that it can work on different platforms such as Windows, Linux, and mac OS.
Prime Ministers of India | List of Prime Minister of India (1947-2020)
Many other components are also part of this collection of software and are explained below.
Cross-Platform: Different local systems have different configurations of operating systems installed in it.
The component of cross-platform has been included to increase the utility and audience for this package
of Apache distributions. It supports various platforms such as packages of Windows, Linus, and MAC
OS.
Apache: It is an HTTP a cross-platform web server. It is used worldwide for delivering web content. The
server application has made free for installation and used for the community of developers under the aegis
of Apache Software Foundation. The remote server of Apache delivers the requested files, images, and
other documents to the user.
PHP: It is the backend scripting language primarily used for web development. PHP allows users to create
dynamic websites and applications. It can be installed on every platform and supports a variety of database
management systems. It was implemented using C language. PHP stands for Hypertext Processor. It is
said to be derived from Personal Home Page tools, which explains its simplicity and functionality.
Perl: It is a combination of two high-level dynamic languages, namely Perl 5 and Perl 6. Perl can be
applied for finding solutions for problems based on system administration, web development, and
networking. Perl allows its users to program dynamic web applications. It is very flexible and robust.
phpmyadmin: It is a tool used for dealing with Maria DB. Its version 4.0.4 is currently being used in
XAMPP. Administration of DBMS is its main role.
OpenSSL: It is the open-source implementation of the Secure Socket Layer Protocol and Transport Layer
Protocol. Presently version 0.9.8 is a part of XAMPP.
XAMPP Control Panel: It is a panel that helps to operate and regulate upon other components of the
XAMPP. Version 3.2.1 is the most recent update. A detailed description of the control panel will be done
in the next section of the tutorial.
Webalizer: It is a Web Analytics software solution used for User logs and provide details about the usage.

33
Mercury: It is a mail transport system, and its latest version is 4.62. It is a mail server, which helps to
manage the mails across the web.
Tomcat: Version 7.0.42 is currently being used in XAMPP. It is a servlet based on JAVA to provide
JAVA functionalities.
File zilla: It is a File Transfer Protocol Server, which supports and eases the transfer operations performed
on files. Its recently updated version is 0.9.41.
XAMPP Format Support
XAMPP is supported in three file formats:
.EXE- It is an extension used to denote executable files making it accessible to install because an
executable file can run on a computer as any normal program.
.7z - 7zip file- This extension is used to denote compressed files that support multiple data compression
and encryption algorithms. It is more favored by a formalist, although it requires working with more
complex files.
ZIP- This extension supports lossless compression of files. A Zipped file may contain multiple
compressed files. The Deflate algorithm is mainly used for compression of files supported by this format.
The .ZIP files are quite tricky to install as compared to .EXE
PhpMyAdmin:
Phpmyadmin is a free software tool written in PHP, intended to handle the administration of MySQL
over the Web. Phpmyadmin supports a wide range of operations on MySQL and Maria DB. Frequently
used operations (managing databases, tables, columns, relations, indexes, users, permissions, etc ) can
be performed via the user interface, while you still have the ability to directly execute any SQL
statement. Phpmyadmin comes with a wide range of documentation and users are welcome to update
our wiki pages to share ideas and how to for various operations. The Phpmyadmin team will try to help
you if you face any problem; you can use a variety of support channels to get help. Phpmyadmin is also
very deeply documented in a book written by one of the developers – Mastering phpmyadmin for
Effective MySQL Management, which is available in English and Spanish. To ease usage to a wide
range of people, phpmyadmin is being translated into 72 languages and supports both LTR and RTL
languages. phpmyadmin is a mature project with a stable and flexible code base; you can find out more
about the project and its history and the awards it earned. When the project turned 15, we published a
celebration page. The phpmyadmin project is a member of Software Freedom Conservancy. SFC is a
not for-profit organization that helps promote, improve, develop, and defend Free, Libre , and Open
Source Software (FLOSS) projects.
Features:
 Intuitive web interface

34
 Support for most MySQL features:
 browse and drop databases, tables, views, fields and indexes
 create, copy, drop, rename and alter databases, tables, fields and indexes
 maintenance server, databases and tables, with proposals on server configuration
 execute, edit and bookmark any SQL-statement, even batch-queries
 manage MySQL user accounts and privileges
 manage stored procedures and triggers
 Import data from CSV and SQL
 Export data to various formats: CSV, SQL, XML, PDF, ISO/IEC 26300 – Open Document Text
and Spreadsheet, Word, LATEX and others
 Administering multiple servers
 Creating graphics of your database layout in various formats
 Creating complex queries using Query-by-example (QBE)
 Searching globally in a database or a subset of it
 Transforming stored data into any format using a set of predefined functions, like displaying
BLOB-data as image or download-link

35
7.3 Appendix:
Home:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
36
 <meta name="description" content="" />
<meta name="author" content="" />
<title>Home</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/home.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body{
font-family: Times New Roman;
}
</style>
</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#!">Student Guide System</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page"
href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header - set the background image for the header in the line below-->

37
 <header class="py-5 bg-image-full" style="background-image: url('image/students-bg.jpg');">
<div class="text-center my-5" style="background: rgba(90, 90, 90, 0.3); padding:100px;">
<h1 class="text-white fs-3 fw-bolder">Student Guide System</h1>
<a href="register.php" class="btn btn-primary">Register Now</a>
<a href="login.php" class="btn btn-primary"> Login</a>
</div>
</header>
<!-- Content section-->
<section class="py-5">
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2>Full Width Backgrounds</h2>
<p class="lead">A single, lightweight helper class allows you to add engaging, full width
background images to sections of your page.</p>
<p class="mb-0">The universe is almost 14 billion years old, and, wow! Life had no
problem starting here on Earth! I think it would be inexcusably egocentric of us to suggest that we're alone
in the universe.</p>
</div>
</div>
</div>
</section>
<!-- Image element - set the background image for the header in the line below-->
<div class="py-5 bg-image-full" style="background-image: url('./image/home-bg-image.webp')">
<!-- Put anything you want here! The spacer below with inline CSS is just for demo purposes!-->
<div style="height: 20rem"></div>
</div>
<!-- Content section-->
<section class="py-5">
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2>Engaging Background Images</h2>
<p class="lead">The background images used in this template are sourced from Unsplash

38
and are open source and free to use.</p>
<p class="mb-0">I can't tell you how many people say they were turned off from science
because of a science teacher that completely sucked out all the inspiration and enthusiasm they had for
the course.</p>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark">
<div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website
2023</p></div>
</footer>
<!-- Bootstrap core JS-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
Signup-Form:

39
Source-Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>
<link
rel="stylesheet"
href="css/style.css"
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"
>
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<!-- Sign Up form here.. -->
<div class="panel panel-info">
<div class="panel-heading">Sign Up Form</div>
<div class="panel-body" style="padding:30px;">
<?php
if(isset($_GET['run']) && $_GET['run']=='success')
{

40
 echo "<div class='alert alert-success'>
Your Registeration successfully done</div>";
?>
<form
action="register_sub.php"
role='form'
method='post'
enctype='multipart/form-data'>
<div class="form-group">
<label for="name">Full Name</label>

<input
type="text"
name='name'
id='name'
class='form-control'
placeholder='Enter First Name'
>
</div>
<div class="form-group">
<label for="email">Email.</label>
<input
type="email"
name='email'
id='email'
class='form-control'
placeholder='Enter Email'
>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class='form-control'

41
 name='password'
id='password'
placeholder='Enter Password'
>
</div>
<div class="form-group">
<label for="image">Upload Your Image</label>
<input
type="file"
class='form-control'
name='image'
id='image'
>
</div>
<button type='submit' class='btn btn-default'>Submit</button>
<div class="text">
<center>
<p>I have already an account
<a href="login.php">
<b>Login</b>
</a>
</p>
</center>
</div>
</form>
</div>

</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</body>
</html>

42
Signup-Form-PHP:
<?php
include("class/users.php");
$register= new users;

extract($_POST);
$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
$image_name = $_FILES['image']['name'];
$tmp_name = $_FILES['image']['tmp_name'];
move_uploaded_file($tmp_name,"img/".$image_name);
$query="INSERT INTO register (name, email, password, image) VALUES ('{$name}', '{$email}',
'{$password}', '{$image_name}')";
if($register->register($query))
{
$register->url("register.php?run=success");
}
?>

Work with Oops in this see the file include(“class/users.php”) here is the class name user that stores
$register variable and concatenation with login function:

public function register($data)

{
$this->conn->query($data);
return true;
}

43
Login Form:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

44
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">

<!-- Login.. -->

<div class="panel panel-info">
<div class="panel-heading">Login Form</div>
<div class="panel-body" style="padding:30px;">
<?php
if(isset($_GET['run']) && $_GET['run']=='failed')
{
echo "<div class='alert alert-danger'>
Your email or password is not correct.
</div>";
} ?>
<form action="login_sub.php" role='form' method='post'>
<div class="form-group">
<label for="email">Email.</label>
<input
type="email"
name='email'
id='email'
class='form-control'
placeholder='Enter Email'
>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"

45
 class='form-control'
name='password'
id='password'
placeholder='Enter Password'
>
</div><br>
<button
type='submit'
class='btn btn-default btn-block'>
Submit
</button>
<div class="text">
<center>
<p>Don't have an account
<a href="register.php">
<b>Register Now</b>
</a>
</p>
</center>
</div>
<div class="text">
<center>
<p>
<a href="admin/admin_login.php">
Login for Admin
</a>
</p>
</center>
</div>
</form>
</div>

</div>
</div>

46
 </div>
<div class="col-sm-3"></div>
</div>
</div>
</body>
</html>

User-Dashboard:

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Online Quiz</title>
</head>
<body>
<div class="container-fluid">
<!-- Sidebar -->

47
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar vh-100">
<!-- Sidebar content goes here -->
<div class="position-sticky">

<ul class="nav flex-column">

<li class="nav-item">
<a class="nav-link active" href="home.php">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="quiz.php">
Quiz
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Report
</a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" href="logout.php?msg=run">
logout
</a>
</li>

<!-- Add more sidebar items as needed -->

</ul>

</div>
</nav>

<!-- Main Content -->

48
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
<!-- Main content goes here -->
<div class="container mt-3">
<center><h2 class='text-muted'>Online Quiz</h2></center>
<div class="mt-4 p-5 bg-secondary text-white rounded">
<h1>Good Luck!</h1>
<?php
foreach($profile->val as $data)
{
echo "<h3 class='p-2 br-2 text-success
bg-white text-center'
style='width:300px;float:right; margin-top:-110px;'>
Welcome! <span class='badge p-2 rounded-pill bg-success'>
".$data['name']."</span></h3>";
} ?>
<center>
<button
type='button' class='btn btn-primary'
data-bs-toggle="collapse" data-bs-target="#quiz">
Quiz Start
</button></center>
<div class="row mt-3">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="collapse" id='quiz'>
<form action="que_show.php" method='post'>
<select name="cat" id="select"
class='form-control'>
<option value="">Select Category</option>
<?php
foreach($profile->cat as $category){
?>
<option
value="<?php echo $category['id']; ?>">

49
 <?php echo $category['cat_name'];
?>
</option>
<?php } ?>
</select><br>
<center><input type="submit" value="submit" class="btn btn-
primary"></center>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Online Quiz Test:

50
Source Code:
<?php
include('class/users.php');
$qus=new users;
$cat=$_POST['cat'];
$qus->qus_show($cat);
$_SESSION['cat']=$cat
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"

51
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function timeout()
{
// var hours = Math.floor(timeLeft/3600);
var minute = Math.floor(timeLeft/60);
var second= timeLeft%60;
// var hrs= checktime(hours);
var mint= checktime(minute);
var sec= checktime(second);
if(timeLeft<=0)
{
clearTimeout(tm);
document.getElementById("form1").submit();
}
else
{
document.getElementById("time").innerHTML=mint+":"+sec;
}
timeLeft--;
var tm= setTimeout(function(){timeout()}, 1000)
}
function checktime(msg)
{
if(msg<10)
{
msg= "0"+msg;
}
return msg;
}

</script>

52
</head>
<body onload="timeout()">

<div class="container">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<h2>Online Quiz
<script type="text/javascript">
var timeLeft = 2*60;
</script>
<div id="time" style="float:right;">timeout</div></h2>

<p>Good Luck!</p>
<form action="answer.php" id="form1" method='post'>
<?php
$i = 1;
foreach ($qus->qus as $qust) {
?>
<table class="table table-bordered">
<thead>
<tr class='info'>
<th><?php echo $i; ?> <?php echo $qust['question']; ?> </th>
</tr>
</thead>
<tbody>
<?php if(isset($qust['ans1'])) {?>
<tr>
<td><b>1</b> &emsp;<input type="radio" value="0" name="<?php echo $qust['id'];
?>"> &nbsp; <?php echo $qust['ans1']; ?></td>
</tr>
<?php }?>

<?php if(isset($qust['ans2'])) {?>

53
 <tr>
<td>2 &emsp;<input type="radio" value="1" name="<?php echo $qust['id']; ?>">
&nbsp; <?php echo $qust['ans2']; ?></td>
</tr>
<?php }?>

<?php if(isset($qust['ans3'])) {?>

<tr>
<td>3 &emsp;<input type="radio" value="2" name="<?php echo $qust['id']; ?>">
&nbsp; <?php echo $qust['ans3']; ?></td>
</tr>
<?php }?>

<?php if(isset($qust['ans4'])) {?>

<tr>
<td>4 &emsp;<input type="radio" value="3" name="<?php echo $qust['id']; ?>">
&nbsp; <?php echo $qust['ans4']; ?></td>
</tr>
<?php }?>
<tr>
<td><input type="radio" checked="checked" value="no_attempt"
style="display:none;" name="<?php echo $qust['id']; ?>"></td>
</tr>
</tbody>
</table>
<?php $i++; } ?>
<center><input type="submit" class='btn btn-success' value="Submit Quiz" ></center>
</form>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>

54
public function qus_show($qus)
{
// echo $qus;
$query=$this->conn->query("select * from question where cat_id='$qus'");
while($row=$query->fetch_array(MYSQLI_ASSOC))
{
$this->qus[]=$row;
}
return $this->qus;
}
Results:

Source Code:>
<?php
include("class/users.php");
$ans=new users;
$answer=$ans->answer($_POST);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Answer</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

55
</head>
<body>
<?php
$total_qus= $answer['right']+$answer['wrong']+$answer['no_answer'];
$attempt_qus= $answer['right']+$answer['wrong'];
?>
<div class="container">
<div class="row">
<h2 style="text-align:center;">Your Quiz Result</h2>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table class="table table-bordered">
<thead>
<tr>
<th>Total number of Question</th>
<th><?php echo $total_qus; ?></th>
</tr>
</thead>
<tbody>
<tr>
<td>Attempted Question</td>
<td><?php echo $attempt_qus; ?></td>
</tr>
<tr>
<td>No Attempt</td>
<td><?php echo $answer['no_answer']; ?></td>
</tr>
<tr>
<td>Right Answer</td>
<td><?php echo $answer['right']; ?></td>
</tr>
<tr>
<td>Wrong Answer</td>
<td><?php echo $answer['wrong']; ?></td>

56
 </tr>
<tr>
<td>Your Result</td>
<td><?php
$per=($answer['right']*100)/($total_qus);
echo $per."%";
?></td>
</tr>

</tbody>
</table>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary"><a href="quiz.php" class="btn btn-
primary">Go to Back</a></button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
PHP-Source:
public function answer($data)
{
$ans=implode("", $data);
$right = 0;
$wrong= 0;
$no_answer=0;
$query=$this->conn->query("
select id,ans from question
where cat_id='".$_SESSION['cat']."'");

while($qus=$query->fetch_array(MYSQLI_ASSOC))

57
 {
if($qus['ans']==$_POST[$qus['id']])
{
$right++;
}
elseif($_POST[$qus['id']]=='no_attempt')
{
$no_answer++;
}
else
{
$wrong++;
}
}
$array=array();
$array['right']=$right;
$array['wrong']=$wrong;
$array['no_answer']=$no_answer;
return $array;
}
Admin Dashboard:

Source Code:
<?php
include("../class/users.php");

$cat = new users;

$category= $cat->cat_shows();
58
// print_r($category);
include("inc/header.php");
include("inc/navbar.php");
include("inc/sidebar.php");
?>

<h1 class="page-header">Dashboard</h1>
<center>
Welcome to Student Guide System
</center>
<?php
include("inc/footer.php");
?>
Here is something including pages for shortcode …
include(“inc/header.php”)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come
*after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">

<title>Dashboard</title>

<!-- Bootstrap core CSS -->

<link href="../css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

59
 <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->

<link href="../css/dashboard.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>

<body>

include(“inc/navbar.php”)

<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Student Guide System</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">

60
 <li><a href="index.php">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</nav>
include(“inc/sidebar.php”)

<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Category<span class="sr-only">(current)</span></a></li>
<li><a href="add_question.php">Add Question</a></li>
<li><a href="add_cat.php">Add Category</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-
only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>

include(“inc/footer.php”)

</div>
</div>

61
 </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-
nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script
src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Add Quiz:

Source Code:
<?php
include("../class/users.php");
$cat = new users;

62
$category= $cat->cat_shows();
// print_r($category);
include("inc/header.php");
include("inc/navbar.php");
include("inc/sidebar.php");
?>
<h1 class="page-header">Add Quiz</h1>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<?php
if(isset($_GET['msg']) && !empty($_GET['msg']))
{
echo "<div class='alert alert-success'>Your Data has been Insert</div>";
}
?>
<form action="add_quiz.php" method="post">
<div class="form-group">
<label for="qus">Question:</label>
<input type="text" class="form-control" id="qus" placeholder="Enter Question"
name="qus">
</div>
<div class="form-group">
<label for="opt1">Option One:</label>
<input type="text" class="form-control" id="opt1" placeholder="Enter Option One"
name="opt1">
</div>
<div class="form-group">
<label for="opt2">Option Two:</label>
<input type="text" class="form-control" id="opt2" placeholder="Enter Option Two"
name="opt2">
</div>
<div class="form-group">
<label for="opt3">Option Three:</label>

63
 <input type="text" class="form-control" id="opt3" placeholder="Enter Option Three"
name="opt3">
</div>
<div class="form-group">
<label for="opt4">Option Four:</label>
<input type="text" class="form-control" id="opt4" placeholder="Enter Option Four"
name="opt4">
</div>
<div class="form-group">
<label for="answer">Answer</label>
<input type="text" class="form-control" id="answer" placeholder="Enter Answer"
name="answer">
</div>
<div class="form-group">
<select name="cat" id="cat" class="form-control">
<option value="">Select Category</option>
<?php

foreach($category as $c)
{ ?>
<option value="<?php echo $c['id']; ?>"><?php echo $c['cat_name'];
?></option>

<?php } ?>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

<?php include("inc/footer.php"); ?>

64
Add Category:

Source Code:
<?php
include("../class/users.php");
$cat = new users;
$category= $cat->cat_shows();
// print_r($category);
include("inc/header.php");
include("inc/navbar.php");
include("inc/sidebar.php");
?>

<h1 class="page-header">Add Category</h1>

<?php
if(isset($_GET['msg']) && !empty($_GET['msg']))
{
echo "<div class='alert alert-success text-align-center'>Category Successfully
Added</div>";
}
?>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form action="cat_sub.php" method="POST">
<div class="form-group">

65
 <label for="cat">Category:</label>
<input type="text" class="form-control" id="cat" placeholder="Enter Category"
name="cat">
</div>
<div class="sub" style="padding: 0px 50px">
<button type="submit" class="btn btn-info btn-block">Submit</button>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<?php include("inc/footer.php"); ?>
PHP:
<?php
extract($_POST);
include("../class/users.php");
$cat=new users;

$category=$_POST['cat'];
// $query="INSERT INTO question (question, ans1, ans2, ans3,ans4,ans) VALUES ('{$qus}',
'{$option1}', '{$option2}', '{$option3}', '{$option4}', '{$answer}','{$cat_id}')";
$query="INSERT INTO category VALUES ('','$category')";

if($cat->add_cat($query))
{
$cat->url("add_cat.php?msg=run");
}
?>
public function add_cat($data)
{
$this->conn->query($data);
return true; }

66