This tutorial will help you build an online exam system using a PHP script with the MySQL database. So if you are looking for an educational project or want to create a small PHP system using the MySQL database, you've come to the right place. Because in this article you will find the solution for your needs. Here we create the online exam application in PHP with the MySQL database that will help you build your educational project for the past year. And if you are a beginner PHP programmer and learn how to use a dynamic online system in PHP, this post will help you.
What is Online Examination/Test System?
In the Internet world, all tasks were done over the Internet and we decided why the exam wasn't done over the Internet. In order to convert the current examination system into a digital examination system, we have created this small project of the online examination system. If this system was developed on a professional level, it will automate our existing examination system in the digitized examination system. Less work is required in this system to operate the system. It is more precise and slower. At the same time, we can conduct more personal exams and the result will be published in the shortest possible time. Below you will find the advantages of the online examination system. When this system is implemented, the exam is not limited to four walls of the classroom, but the student can take the exam from anywhere.
Advantage of Online Examination System Project
- The online exam system saves the organization and students money.
- The online exam system saves the papar exam question securely and is directly visible to the student who took the exam.
- The online test system saves paper costs because the test is carried out online.
- The online examination system reduces the costs of delivering the questionnaire to the examination center.
- The online exam system saves time for both the institution that performed the behavioral test and the student who took the exam.
- The online examination system enables remote monitoring using the security function of this system.
- The online test system shortens the time of publication of the test result with the classification, since the result is generated with one click.
- The online exam system gives us the progress of previous exams with just one click.
- The online exam system offers all student information on a single platform.
- The online exam system offers the opportunity to take any electronic device that has Internet access.
Characteristics of Online Examamination System
Admin Side
- The administrator can create a new test online using the Edit and Delete function
- The administrator can add a question to the exam that was defined at the time the exam was created
- The administrator can view all exam questions using the Edit and Delete operation
- The administrator can view all user data that has been registered for the online exam system
- The administrator can view all users who have registered for a particular exam
- The administrator can view the result of the individual user check on the website and in PDF format
- The administrator can view the combined test result with user rank on the website and in PDF format
User Side
- New user registration for online exam with confirmation email function.
- The user can log on to the system with an email ID and password.
- The user can manage his profile details.
- The user can change his password.
- The user can view the list of available exams.
- The user can register for the exam.
- The user can take the online exam at the specified date and time.
- The user can view the progress of the exam for which he has registered.
- The user can see the test result on the website and also in PDF format.
Front end
- HTML 5: to create an HTML web page.
- jQuery - For easier use of Javascript on the website.
- Ajax: To perform the server operation on the client side.
- Bootstrap 4: to create a responsive online exam system.
- JQuery data table plug-in: For listing data on the website in a table format with various features such as search, classification, etc.
- Parsley.js: To check the form data on the client side.
- Bootstrap Datetimepicker - User for data and time field form data.
- TimeCircles: Displays the remaining exam time on the website.
Back end
- PHP 5.6+: to log in to the writing system
- MySQL: For storing system data
- PHPMailer - Send email after registration
- DomPdf: to generate the test result in PDF format
Source code Online Examination System
master/register.php
In this file, we create a registration form to set up an administrator account for the online exam system. Suppose we need multiple administrator accounts for different purposes. Here we need to create a registration form to create a new administrator account for the web based exam application. This function makes this system a completely dynamic system.
To validate a unique email address for administrator registration, we used the custom validator Parsley.js here. This validator checks certain emails that are already registered in our system or not. This validator is activated before the form is sent. If this validator is activated, it sends an Ajax request to cut the script to check whether the administrator has already registered in our database with a specific email.
Here we used Ajax to send the administrator's registration data to the server. When we click the registration button, when using the jQuery code, add the parsley attribute to check the form data. If the form data is correct, send the form data to the server using the Ajax request.
To validate a unique email address for administrator registration, we used the custom validator Parsley.js here. This validator checks certain emails that are already registered in our system or not. This validator is activated before the form is sent. If this validator is activated, it sends an Ajax request to cut the script to check whether the administrator has already registered in our database with a specific email.
Here we used Ajax to send the administrator's registration data to the server. When we click the registration button, when using the jQuery code, add the parsley attribute to check the form data. If the form data is correct, send the form data to the server using the Ajax request.
master/register.php
<?php
//register.php
include('Examination.php');
$exam = new Examination;
$exam->admin_session_public();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Examination System Project in PHP MySql </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../style/style.css" />
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
<img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP" />
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="margin-top:20px;">
<span id="message"></span>
<div class="card">
<div class="card-header">Admin Registration</div>
<div class="card-body">
<form method="post" id="admin_register_form">
<div class="form-group">
<label>Enter Email Address</label>
<input type="text" name="admin_email_address" id="admin_email_address" class="form-control" data-parsley-checkemail data-parsley-checkemail-message='Email Address already Exists' />
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="admin_password" id="admin_password" class="form-control" />
</div>
<div class="form-group">
<label>Enter Confirm Password</label>
<input type="password" name="confirm_admin_password" id="confirm_admin_password" class="form-control" />
</div>
<div class="form-group">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="action" value="register" />
<input type="submit" name="admin_register" id="admin_register" class="btn btn-info" value="Register" />
</div>
</form>
<div align="center">
<a href="login.php">Login</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
window.ParsleyValidator.addValidator('checkemail', {
validateString: function(value)
{
return $.ajax({
url:"ajax_action.php",
method:"POST",
data:{page:'register', action:'check_email', email:value},
dataType:"json",
async: false,
success:function(data)
{
return true;
}
});
}
});
$('#admin_register_form').parsley();
$('#admin_register_form').on('submit', function(event){
event.preventDefault();
$('#admin_email_address').attr('required', 'required');
$('#admin_email_address').attr('data-parsley-type', 'email');
$('#admin_password').attr('required', 'required');
$('#confirm_admin_password').attr('required', 'required');
$('#confirm_admin_password').attr('data-parsley-equalto', '#admin_password');
if($('#admin_register_form').parsley().isValid())
{
$.ajax({
url:"ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#admin_register').attr('disabled', 'disabled');
$('#admin_register').val('please wait...');
},
success:function(data)
{
if(data.success)
{
$('#message').html('<div class="alert alert-success">Please check your email</div>');
$('#admin_register_form')[0].reset();
$('#admin_register_form').parsley().reset();
}
$('#admin_register').attr('disabled', false);
$('#admin_register').val('Register');
}
});
}
});
});
</script>
master/Examination.php
This is the main PHP class for this online exam application. Here we do the object-oriented programming of PHP PDO for the compilation logic of this online questionnaire system. In this class we have the following method, which we will use for various purposes to build the online exam system in PHP.
- __construct (): This is the code of the magic function that runs every time this new class object is created. Every time you create a new object, you use the object to establish a database connection with this online examination system PHP PDO class.
- execute_query (): This method executes SQL queries for the database operation.
- total_row (): This method returns the total number of rows affected after running the query. In this method, we also used the execute_query () method.
- send_email ($ receiver_email, $ subject, $ body): In this method we created an object of the PHPMailer class and use this method to send emails in this online exam system.
- Forward ($ page): This method is used to forward the page.
- admin_session_private (): This method checks whether the administrator has logged on to the system, whether the administrator has not logged on to the system and is trying to access the website that requires a login to the system. It will then be redirected to the administrator login page.
- admin_session_public () - This is another way to verify administrator login. This method checks whether the administrator has logged on to the system and tries to access the login or registration page, and then redirects to the index.php page.
- query_result (): This method uses the execute_query () method to execute the SQL query and return the result of the query execution in associative array format.
- clean_data (): This method converts special characters into an HTML entity to prevent the SQL injection.
- Is_exam_is_not_started ($ online_exam_id): This method is used to check the respective status of the check, since the check is pending, the check is started and the check is completed. This method returns true if the check has not yet started.
- Get_exam_question_limit ($ exam_id): This method returns the limit that is allowed to add questions about a particular exam.
- Get_exam_total_question ($ exam_id): This method returns how many questions have already been added to a particular exam.
- Is_allowed_add_question ($ exam_id): This method returns true if the administrator can add questions to a particular exam. Otherwise, this method returns false.
- execute_question_with_last_id () - This method inserts a new question into the MySQL database and returns the last inserted identification of the added question.
- Get_exam_id ($ exam_code): This method returns the exam identification of the value of the variable $ exam_code in the exam table.
- Upload_file (): This method loads the selected image into the upload folder.
master/Examination.php
<?php
class Examination
{
var $host;
var $username;
var $password;
var $database;
var $connect;
var $home_page;
var $query;
var $data;
var $statement;
var $filedata;
function __construct()
{
$this->host = 'localhost';
$this->username = 'root';
$this->password = '';
$this->database = 'online_examination';
$this->home_page = 'http://localhost/tutorial/online_examination/';
$this->connect = new PDO("mysql:host=$this->host; dbname=$this->database", "$this->username", "$this->password");
session_start();
}
function execute_query()
{
$this->statement = $this->connect->prepare($this->query);
$this->statement->execute($this->data);
}
function total_row()
{
$this->execute_query();
return $this->statement->rowCount();
}
function send_email($receiver_email, $subject, $body)
{
$mail = new PHPMailer;
$mail->IsSMTP();
$mail->Host = 'smtp host';
$mail->Port = '587';
$mail->SMTPAuth = true;
$mail->Username = '';
$mail->Password = '';
$mail->SMTPSecure = '';
$mail->From = 'info@webslesson.info';
$mail->FromName = 'info@webslesson.info';
$mail->AddAddress($receiver_email, '');
$mail->IsHTML(true);
$mail->Subject = $subject;
$mail->Body = $body;
$mail->Send();
}
function redirect($page)
{
header('location:'.$page.'');
exit;
}
function admin_session_private()
{
if(!isset($_SESSION['admin_id']))
{
$this->redirect('login.php');
}
}
function admin_session_public()
{
if(isset($_SESSION['admin_id']))
{
$this->redirect('index.php');
}
}
function query_result()
{
$this->execute_query();
return $this->statement->fetchAll();
}
function clean_data($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
function Is_exam_is_not_started($online_exam_id)
{
$current_datetime = date("Y-m-d") . ' ' . date("H:i:s", STRTOTIME(date('h:i:sa')));
$exam_datetime = '';
$this->query = "
SELECT online_exam_datetime FROM online_exam_table
WHERE online_exam_id = '$online_exam_id'
";
$result = $this->query_result();
foreach($result as $row)
{
$exam_datetime = $row['online_exam_datetime'];
}
if($exam_datetime > $current_datetime)
{
return true;
}
return false;
}
function Get_exam_question_limit($exam_id)
{
$this->query = "
SELECT total_question FROM online_exam_table
WHERE online_exam_id = '$exam_id'
";
$result = $this->query_result();
foreach($result as $row)
{
return $row['total_question'];
}
}
function Get_exam_total_question($exam_id)
{
$this->query = "
SELECT question_id FROM question_table
WHERE online_exam_id = '$exam_id'
";
return $this->total_row();
}
function Is_allowed_add_question($exam_id)
{
$exam_question_limit = $this->Get_exam_question_limit($exam_id);
$exam_total_question = $this->Get_exam_total_question($exam_id);
if($exam_total_question >= $exam_question_limit)
{
return false;
}
return true;
}
function execute_question_with_last_id()
{
$this->statement = $this->connect->prepare($this->query);
$this->statement->execute($this->data);
return $this->connect->lastInsertId();
}
function Get_exam_id($exam_code)
{
$this->query = "
SELECT online_exam_id FROM online_exam_table
WHERE online_exam_code = '$exam_code'
";
$result = $this->query_result();
foreach($result as $row)
{
return $row['online_exam_id'];
}
}
function Upload_file()
{
if(!empty($this->filedata['name']))
{
$extension = pathinfo($this->filedata['name'], PATHINFO_EXTENSION);
$new_name = uniqid() . '.' . $extension;
$_source_path = $this->filedata['tmp_name'];
$target_path = 'upload/' . $new_name;
move_uploaded_file($_source_path, $target_path);
return $new_name;
}
}
function user_session_private()
{
if(!isset($_SESSION['user_id']))
{
$this->redirect('login.php');
}
}
function user_session_public()
{
if(isset($_SESSION['user_id']))
{
$this->redirect('index.php');
}
}
}
?>
master/ajax_action.php
In this PHP file you will find the PHP script of all operations that you performed on the master side. You can find it here. This file receives Ajax's request to perform another operation.
This file contains the Examination.php class and the PHPMailer class library. There are various operations related to the database that are performed here.
This file contains the Examination.php class and the PHPMailer class library. There are various operations related to the database that are performed here.
- In this file, you first received the Ajax request from the administrator registration page to check whether the administrator email in question is already registered in the MySQL database or not.
- After verifying each administrator's email address, this page also received a second Ajax request from the administrator registration page to complete the administrator registration process. Once the registration information is entered, it will be sent A dynamic administrator email confirmation email that will be sent to the administrator email address for the email confirmation process.
- After registration was completed and the administrator attempted to log on to the system, the administrator credentials were checked here by requesting Ajax.
- This PHP script also receives an Ajax request from the Exam.php file. From this file you will first receive the Ajax request to retrieve data from the MySQL table and return the response in JSON format.
- On this page, Ajax is asked to insert new data from the online exam program into the MySQL table.
- Once the exam details are saved in this system. Now the administrator wants to change the exam details online so that the individual exam details are retrieved from this page by sending an Ajax request.
- If details of certain tests were displayed in bootstrap mode and the administrator made the necessary changes and clicked the "Edit" button, Ajax's request to edit the data is received and here the test data is updated with Ajax with PHP script.
- Examination details are also removed or deleted from this file. Then the operation to remove the check is performed here.
master/ajax_action.php
<?php
//ajax_action.php
include('Examination.php');
require_once('../class/class.phpmailer.php');
$exam = new Examination;
$current_datetime = date("Y-m-d") . ' ' . date("H:i:s", STRTOTIME(date('h:i:sa')));
if(isset($_POST['page']))
{
if($_POST['page'] == 'register')
{
if($_POST['action'] == 'check_email')
{
$exam->query = "
SELECT * FROM admin_table
WHERE admin_email_address = '".trim($_POST["email"])."'
";
$total_row = $exam->total_row();
if($total_row == 0)
{
$output = array(
'success' => true
);
echo json_encode($output);
}
}
if($_POST['action'] == 'register')
{
$admin_verification_code = md5(rand());
$receiver_email = $_POST['admin_email_address'];
$exam->data = array(
':admin_email_address' => $receiver_email,
':admin_password' => password_hash($_POST['admin_password'], PASSWORD_DEFAULT),
':admin_verfication_code' => $admin_verification_code,
':admin_type' => 'sub_master',
':admin_created_on' => $current_datetime
);
$exam->query = "
INSERT INTO admin_table
(admin_email_address, admin_password, admin_verfication_code, admin_type, admin_created_on)
VALUES
(:admin_email_address, :admin_password, :admin_verfication_code, :admin_type, :admin_created_on)
";
$exam->execute_query();
$subject = 'Online Examination Registration Verification';
$body = '
<p>Thank you for registering.</p>
<p>This is a verification eMail, please click the link to verify your eMail address by clicking this <a href="'.$exam->home_page.'verify_email.php?type=master&code='.$admin_verification_code.'" target="_blank"><b>link</b></a>.</p>
<p>In case if you have any difficulty please eMail us.</p>
<p>Thank you,</p>
<p>Online Examination System</p>
';
$exam->send_email($receiver_email, $subject, $body);
$output = array(
'success' => true
);
echo json_encode($output);
}
}
if($_POST['page'] == 'login')
{
if($_POST['action'] == 'login')
{
$exam->data = array(
':admin_email_address' => $_POST['admin_email_address']
);
$exam->query = "
SELECT * FROM admin_table
WHERE admin_email_address = :admin_email_address
";
$total_row = $exam->total_row();
if($total_row > 0)
{
$result = $exam->query_result();
foreach($result as $row)
{
if($row['email_verified'] == 'yes')
{
if(password_verify($_POST['admin_password'], $row['admin_password']))
{
$_SESSION['admin_id'] = $row['admin_id'];
$output = array(
'success' => true
);
}
else
{
$output = array(
'error' => 'Wrong Password'
);
}
}
else
{
$output = array(
'error' => 'Your Email is not verify'
);
}
}
}
else
{
$output = array(
'error' => 'Wrong Email Address'
);
}
echo json_encode($output);
}
}
if($_POST['page'] == 'exam')
{
if($_POST['action'] == 'fetch')
{
$output = array();
$exam->query = "
SELECT * FROM online_exam_table
WHERE admin_id = '".$_SESSION["admin_id"]."'
AND (
";
if(isset($_POST['search']['value']))
{
$exam->query .= 'online_exam_title LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR online_exam_datetime LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR online_exam_duration LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR total_question LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR marks_per_right_answer LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR marks_per_wrong_answer LIKE "%'.$_POST["search"]["value"].'%" ';
$exam->query .= 'OR online_exam_status LIKE "%'.$_POST["search"]["value"].'%" ';
}
$exam->query .= ')';
if(isset($_POST['order']))
{
$exam->query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$exam->query .= 'ORDER BY online_exam_id DESC ';
}
$extra_query = '';
if($_POST['length'] != -1)
{
$extra_query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$filtered_rows = $exam->total_row();
$exam->query .= $extra_query;
$result = $exam->query_result();
$exam->query = "
SELECT * FROM online_exam_table
WHERE admin_id = '".$_SESSION["admin_id"]."'
";
$total_rows = $exam->total_row();
$data = array();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = html_entity_decode($row['online_exam_title']);
$sub_array[] = $row['online_exam_datetime'];
$sub_array[] = $row['online_exam_duration'] . ' Minute';
$sub_array[] = $row['total_question'] . ' Question';
$sub_array[] = $row['marks_per_right_answer'] . ' Mark';
$sub_array[] = '-' . $row['marks_per_wrong_answer'] . ' Mark';
$status = '';
$edit_button = '';
$delete_button = '';
$question_button = '';
if($row['online_exam_status'] == 'Pending')
{
$status = '<span class="badge badge-warning">Pending</span>';
}
if($row['online_exam_status'] == 'Created')
{
$status = '<span class="badge badge-success">Created</span>';
}
if($row['online_exam_status'] == 'Started')
{
$status = '<span class="badge badge-primary">Started</span>';
}
if($row['online_exam_status'] == 'Completed')
{
$status = '<span class="badge badge-dark">Completed</span>';
}
if($exam->Is_exam_is_not_started($row["online_exam_id"]))
{
$edit_button = '
<button type="button" name="edit" class="btn btn-primary btn-sm edit" id="'.$row['online_exam_id'].'">Edit</button>
';
$delete_button = '<button type="button" name="delete" class="btn btn-danger btn-sm delete" id="'.$row['online_exam_id'].'">Delete</button>';
}
if($exam->Is_allowed_add_question($row['online_exam_id']))
{
$question_button = '
<button type="button" name="add_question" class="btn btn-info btn-sm add_question" id="'.$row['online_exam_id'].'">Add Question</button>
';
}
else
{
$question_button = '
<a href="question.php?code='.$row['online_exam_code'].'" class="btn btn-warning btn-sm">View Question</a>
';
}
$sub_array[] = $status;
$sub_array[] = $question_button;
$sub_array[] = $edit_button . ' ' . $delete_button;
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $total_rows,
"recordsFiltered" => $filtered_rows,
"data" => $data
);
echo json_encode($output);
}
if($_POST['action'] == 'Add')
{
$exam->data = array(
':admin_id' => $_SESSION['admin_id'],
':online_exam_title' => $exam->clean_data($_POST['online_exam_title']),
':online_exam_datetime' => $_POST['online_exam_datetime'] . ':00',
':online_exam_duration' => $_POST['online_exam_duration'],
':total_question' => $_POST['total_question'],
':marks_per_right_answer'=> $_POST['marks_per_right_answer'],
':marks_per_wrong_answer'=> $_POST['marks_per_wrong_answer'],
':online_exam_created_on'=> $current_datetime,
':online_exam_status' => 'Pending',
':online_exam_code' => md5(rand())
);
$exam->query = "
INSERT INTO online_exam_table
(admin_id, online_exam_title, online_exam_datetime, online_exam_duration, total_question, marks_per_right_answer, marks_per_wrong_answer, online_exam_created_on, online_exam_status, online_exam_code)
VALUES (:admin_id, :online_exam_title, :online_exam_datetime, :online_exam_duration, :total_question, :marks_per_right_answer, :marks_per_wrong_answer, :online_exam_created_on, :online_exam_status, :online_exam_code)
";
$exam->execute_query();
$output = array(
'success' => 'New Exam Details Added'
);
echo json_encode($output);
}
if($_POST['action'] == 'edit_fetch')
{
$exam->query = "
SELECT * FROM online_exam_table
WHERE online_exam_id = '".$_POST["exam_id"]."'
";
$result = $exam->query_result();
foreach($result as $row)
{
$output['online_exam_title'] = $row['online_exam_title'];
$output['online_exam_datetime'] = $row['online_exam_datetime'];
$output['online_exam_duration'] = $row['online_exam_duration'];
$output['total_question'] = $row['total_question'];
$output['marks_per_right_answer'] = $row['marks_per_right_answer'];
$output['marks_per_wrong_answer'] = $row['marks_per_wrong_answer'];
}
echo json_encode($output);
}
if($_POST['action'] == 'Edit')
{
$exam->data = array(
':online_exam_title' => $_POST['online_exam_title'],
':online_exam_datetime' => $_POST['online_exam_datetime'] . ':00',
':online_exam_duration' => $_POST['online_exam_duration'],
':total_question' => $_POST['total_question'],
':marks_per_right_answer'=> $_POST['marks_per_right_answer'],
':marks_per_wrong_answer'=> $_POST['marks_per_wrong_answer'],
':online_exam_id' => $_POST['online_exam_id']
);
$exam->query = "
UPDATE online_exam_table
SET online_exam_title = :online_exam_title, online_exam_datetime = :online_exam_datetime, online_exam_duration = :online_exam_duration, total_question = :total_question, marks_per_right_answer = :marks_per_right_answer, marks_per_wrong_answer = :marks_per_wrong_answer
WHERE online_exam_id = :online_exam_id
";
$exam->execute_query($exam->data);
$output = array(
'success' => 'Exam Details has been changed'
);
echo json_encode($output);
}
if($_POST['action'] == 'delete')
{
$exam->data = array(
':online_exam_id' => $_POST['exam_id']
);
$exam->query = "
DELETE FROM online_exam_table
WHERE online_exam_id = :online_exam_id
";
$exam->execute_query();
$output = array(
'success' => 'Exam Details has been removed'
);
echo json_encode($output);
}
}
if($_POST['page'] == 'question')
{
if($_POST['action'] == 'Add')
{
$exam->data = array(
':online_exam_id' => $_POST['online_exam_id'],
':question_title' => $exam->clean_data($_POST['question_title']),
':answer_option' => $_POST['answer_option']
);
$exam->query = "
INSERT INTO question_table
(online_exam_id, question_title, answer_option)
VALUES (:online_exam_id, :question_title, :answer_option)
";
$question_id = $exam->execute_question_with_last_id($exam->data);
for($count = 1; $count <= 4; $count++)
{
$exam->data = array(
':question_id' => $question_id,
':option_number' => $count,
':option_title' => $exam->clean_data($_POST['option_title_' . $count])
);
$exam->query = "
INSERT INTO option_table
(question_id, option_number, option_title)
VALUES (:question_id, :option_number, :option_title)
";
$exam->execute_query($exam->data);
}
$output = array(
'success' => 'Question Added'
);
echo json_encode($output);
}
if($_POST['action'] == 'fetch')
{
$output = array();
$exam_id = '';
if(isset($_POST['code']))
{
$exam_id = $exam->Get_exam_id($_POST['code']);
}
$exam->query = "
SELECT * FROM question_table
WHERE online_exam_id = '".$exam_id."'
AND (
";
if(isset($_POST['search']['value']))
{
$exam->query .= 'question_title LIKE "%'.$_POST["search"]["value"].'%" ';
}
$exam->query .= ')';
if(isset($_POST["order"]))
{
$exam->query .= '
ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].'
';
}
else
{
$exam->query .= 'ORDER BY question_id ASC ';
}
$extra_query = '';
if($_POST['length'] != -1)
{
$extra_query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$filtered_rows = $exam->total_row();
$exam->query .= $extra_query;
$result = $exam->query_result();
$exam->query = "
SELECT * FROM question_table
WHERE online_exam_id = '".$exam_id."'
";
$total_rows = $exam->total_row();
$data = array();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row['question_title'];
$sub_array[] = 'Option ' . $row['answer_option'];
$edit_button = '';
$delete_button = '';
if($exam->Is_exam_is_not_started($exam_id))
{
$edit_button = '<button type="button" name="edit" class="btn btn-primary btn-sm edit" id="'.$row['question_id'].'">Edit</button>';
$delete_button = '<button type="button" name="delete" class="btn btn-danger btn-sm delete" id="'.$row['question_id'].'">Delete</button>';
}
$sub_array[] = $edit_button . ' ' . $delete_button;
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $total_rows,
"recordsFiltered" => $filtered_rows,
"data" => $data
);
echo json_encode($output);
}
if($_POST['action'] == 'edit_fetch')
{
$exam->query = "
SELECT * FROM question_table
WHERE question_id = '".$_POST["question_id"]."'
";
$result = $exam->query_result();
foreach($result as $row)
{
$output['question_title'] = html_entity_decode($row['question_title']);
$output['answer_option'] = $row['answer_option'];
for($count = 1; $count <= 4; $count++)
{
$exam->query = "
SELECT option_title FROM option_table
WHERE question_id = '".$_POST["question_id"]."'
AND option_number = '".$count."'
";
$sub_result = $exam->query_result();
foreach($sub_result as $sub_row)
{
$output["option_title_" . $count] = html_entity_decode($sub_row["option_title"]);
}
}
}
echo json_encode($output);
}
if($_POST['action'] == 'Edit')
{
$exam->data = array(
':question_title' => $_POST['question_title'],
':answer_option' => $_POST['answer_option'],
':question_id' => $_POST['question_id']
);
$exam->query = "
UPDATE question_table
SET question_title = :question_title, answer_option = :answer_option
WHERE question_id = :question_id
";
$exam->execute_query();
for($count = 1; $count <= 4; $count++)
{
$exam->data = array(
':question_id' => $_POST['question_id'],
':option_number' => $count,
':option_title' => $_POST['option_title_' . $count]
);
$exam->query = "
UPDATE option_table
SET option_title = :option_title
WHERE question_id = :question_id
AND option_number = :option_number
";
$exam->execute_query();
}
$output = array(
'success' => 'Question Edit'
);
echo json_encode($output);
}
if($_POST['action'] == 'delete')
{
$exam->data = array(
':question_id' => $_POST["question_id"]
);
$exam->query = "
DELETE FROM question_table
WHERE question_id = :question_id
";
$exam->execute_query();
$exam->query = "
DELETE FROM option_table
WHERE question_id = :question_id
";
$exam->execute_query();
$output = array(
'success' => 'Question Details has been removed'
);
echo json_encode($output);
}
}
}
?>
master/login.php
As soon as the administrator has confirmed your email address, the next page with a success message on the website will be forwarded to this online registration page of the test system.
This login page is for the online exam administrator and for access to the system in the administration area of the online exam system. The administrator can then access this system from this page. The administrator credentials are checked here by requesting Ajax.
This login page is for the online exam administrator and for access to the system in the administration area of the online exam system. The administrator can then access this system from this page. The administrator credentials are checked here by requesting Ajax.
<?php
//login.php
include('Examination.php');
$exam = new Examination;
$exam->admin_session_public();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Examination System in PHP MySql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../style/style.css" />
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
<img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP MySql " />
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="margin-top:20px;">
<span id="message">
<?php
if(isset($_GET['verified']))
{
echo '
<div class="alert alert-success">
Your email has been verified, now you can login
</div>
';
}
?>
</span>
<div class="card">
<div class="card-header">Admin Login</div>
<div class="card-body">
<form method="post" id="admin_login_form">
<div class="form-group">
<label>Enter Email Address</label>
<input type="text" name="admin_email_address" id="admin_email_address" class="form-control" />
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="admin_password" id="admin_password" class="form-control" />
</div>
<div class="form-group">
<input type="hidden" name="page" value="login" />
<input type="hidden" name="action" value="login" />
<input type="submit" name="admin_login" id="admin_login" class="btn btn-info" value="Login" />
</div>
</form>
<div align="center">
<a href="register.php">Register</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#admin_login_form').parsley();
$('#admin_login_form').on('submit', function(event){
event.preventDefault();
$('#admin_email_address').attr('required', 'required');
$('#admin_email_address').attr('data-parsley-type', 'email');
$('#admin_password').attr('required', 'required');
if($('#admin_login_form').parsley().validate())
{
$.ajax({
url:"ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#admin_login').attr('disabled', 'disabled');
$('#admin_login').val('please wait...');
},
success:function(data)
{
if(data.success)
{
location.href="index.php";
}
else
{
$('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
}
$('#admin_login').attr('disabled', false);
$('#admin_login').val('Login');
}
});
}
});
});
</script>
master/header.php
This is the header file of the administration area of the online examination system. The exam class file is first inserted into this file. The administrator then logged on to the system for checking or not. We called the admin_session_private () method.
In this file we created the navigation bar using the Bootstrap 4 library. In the navigation bar we add a link to go to the section "Check", to the section "User" and to the link of the logout page.
master/header.php
In this file we created the navigation bar using the Bootstrap 4 library. In the navigation bar we add a link to go to the section "Check", to the section "User" and to the link of the logout page.
master/header.php
<?php
//header.php
include('Examination.php');
$exam = new Examination;
$exam->admin_session_private();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Examination System in PHP MySql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
<link rel="stylesheet" href="../style/style.css" />
<link rel="stylesheet" href="../style/bootstrap-datetimepicker.css" />
<script src="../style/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
<img src="logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP MySql" />
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="index.php">Admin Side</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="exam.php">Exam</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
master/index.php
<?php
//index.php
include('header.php');
include('footer.php');
?>
master/logout.php
This is a logout script that you can use to log out of the online exam system administrator. This script destroys all active session variables with the session_destroy () function and then redirects to the administrator login page.
<?php
//logout.php
session_start();
session_destroy();
header('location:login.php');
?>
master/exam.php
This is the main file of the administrative sub-exam module. The administrator performs all operations related to the online exam.
First of all, we would like to load all examination details on the web into the jQuery Datatable plug-in in this file so that the administrator can search, sort and page the examination data using the integrated function jQuery DataTable. To load data into the jQuery dataTable plug-in, we used the Ajax request, which sends the request to the PHP script for server-side processing.
To add, insert, or schedule a new exam online, we used Bootstrap 4 mode to complete the creation of new exam dates in this online exam. For this reason, the administrator may feel that they have worked on the application with only one page, since the data insertion process is carried out on the website without updating the website. We also use this file to edit or delete exam data. We used the Modal Bootstrap 4 class with PHP script using Ajax.
Assuming the administrator wants to add a question to the exam, this process request will be made using Ajax on this page.
master/exam.php
First of all, we would like to load all examination details on the web into the jQuery Datatable plug-in in this file so that the administrator can search, sort and page the examination data using the integrated function jQuery DataTable. To load data into the jQuery dataTable plug-in, we used the Ajax request, which sends the request to the PHP script for server-side processing.
To add, insert, or schedule a new exam online, we used Bootstrap 4 mode to complete the creation of new exam dates in this online exam. For this reason, the administrator may feel that they have worked on the application with only one page, since the data insertion process is carried out on the website without updating the website. We also use this file to edit or delete exam data. We used the Modal Bootstrap 4 class with PHP script using Ajax.
Assuming the administrator wants to add a question to the exam, this process request will be made using Ajax on this page.
master/exam.php
<?php
//exam.php
include('header.php');
?>
<br />
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-9">
<h3 class="panel-title">Online Exam List</h3>
</div>
<div class="col-md-3" align="right">
<button type="button" id="add_button" class="btn btn-info btn-sm">Add</button>
</div>
</div>
</div>
<div class="card-body">
<span id="message_operation"></span>
<div class="table-responsive">
<table id="exam_data_table" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Exam Title</th>
<th>Date & Time</th>
<th>Duration</th>
<th>Total Question</th>
<th>Right Answer Mark</th>
<th>Wrong Answer Mark</th>
<th>Status</th>
<th>Question</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal" id="formModal">
<div class="modal-dialog modal-lg">
<form method="post" id="exam_form">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="modal_title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Exam Title <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="online_exam_title" id="online_exam_title" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Exam Date & Time <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="online_exam_datetime" id="online_exam_datetime" class="form-control" readonly />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Exam Duration <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="online_exam_duration" id="online_exam_duration" class="form-control">
<option value="">Select</option>
<option value="5">5 Minute</option>
<option value="30">30 Minute</option>
<option value="60">1 Hour</option>
<option value="120">2 Hour</option>
<option value="180">3 Hour</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Total Question <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="total_question" id="total_question" class="form-control">
<option value="">Select</option>
<option value="5">5 Question</option>
<option value="10">10 Question</option>
<option value="25">25 Question</option>
<option value="50">50 Question</option>
<option value="100">100 Question</option>
<option value="200">200 Question</option>
<option value="300">300 Question</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Marks for Right Answer <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="marks_per_right_answer" id="marks_per_right_answer" class="form-control">
<option value="">Select</option>
<option value="1">+1 Mark</option>
<option value="2">+2 Mark</option>
<option value="3">+3 Mark</option>
<option value="4">+4 Mark</option>
<option value="5">+5 Mark</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Marks for Wrong Answer <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="marks_per_wrong_answer" id="marks_per_wrong_answer" class="form-control">
<option value="">Select</option>
<option value="1">-1 Mark</option>
<option value="1.25">-1.25 Mark</option>
<option value="1.50">-1.50 Mark</option>
<option value="2">-2 Mark</option>
</select>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="hidden" name="online_exam_id" id="online_exam_id" />
<input type="hidden" name="page" value="exam" />
<input type="hidden" name="action" id="action" value="Add" />
<input type="submit" name="button_action" id="button_action" class="btn btn-success btn-sm" value="Add" />
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3 align="center">Are you sure you want to remove this?</h3>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" name="ok_button" id="ok_button" class="btn btn-primary btn-sm">OK</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="questionModal">
<div class="modal-dialog modal-lg">
<form method="post" id="question_form">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="question_modal_title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Question Title <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="question_title" id="question_title" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 1 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_1" id="option_title_1" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 2 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_2" id="option_title_2" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 3 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_3" id="option_title_3" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 4 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_4" id="option_title_4" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Answer <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="answer_option" id="answer_option" class="form-control">
<option value="">Select</option>
<option value="1">1 Option</option>
<option value="2">2 Option</option>
<option value="3">3 Option</option>
<option value="4">4 Option</option>
</select>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="hidden" name="question_id" id="question_id" />
<input type="hidden" name="online_exam_id" id="hidden_online_exam_id" />
<input type="hidden" name="page" value="question" />
<input type="hidden" name="action" id="hidden_action" value="Add" />
<input type="submit" name="question_button_action" id="question_button_action" class="btn btn-success btn-sm" value="Add" />
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(){
var dataTable = $('#exam_data_table').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url: "ajax_action.php",
method:"POST",
data:{action:'fetch', page:'exam'}
},
"columnDefs":[
{
"targets":[7, 8],
"orderable":false,
},
],
});
function reset_form()
{
$('#modal_title').text('Add Exam Details');
$('#button_action').val('Add');
$('#action').val('Add');
$('#exam_form')[0].reset();
$('#exam_form').parsley().reset();
}
$('#add_button').click(function(){
reset_form();
$('#formModal').modal('show');
$('#message_operation').html('');
});
var date = new Date();
date.setDate(date.getDate());
$('#online_exam_datetime').datetimepicker({
startDate :date,
format: 'yyyy-mm-dd hh:ii',
autoclose:true
});
$('#exam_form').parsley();
$('#exam_form').on('submit', function(event){
event.preventDefault();
$('#online_exam_title').attr('required', 'required');
$('#online_exam_datetime').attr('required', 'required');
$('#online_exam_duration').attr('required', 'required');
$('#total_question').attr('required', 'required');
$('#marks_per_right_answer').attr('required', 'required');
$('#marks_per_wrong_answer').attr('required', 'required');
if($('#exam_form').parsley().validate())
{
$.ajax({
url:"ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#button_action').attr('disabled', 'disabled');
$('#button_action').val('Validate...');
},
success:function(data)
{
if(data.success)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
reset_form();
dataTable.ajax.reload();
$('#formModal').modal('hide');
}
$('#button_action').attr('disabled', false);
$('#button_action').val($('#action').val());
}
});
}
});
var exam_id = '';
$(document).on('click', '.edit', function(){
exam_id = $(this).attr('id');
reset_form();
$.ajax({
url:"ajax_action.php",
method:"POST",
data:{action:'edit_fetch', exam_id:exam_id, page:'exam'},
dataType:"json",
success:function(data)
{
$('#online_exam_title').val(data.online_exam_title);
$('#online_exam_datetime').val(data.online_exam_datetime);
$('#online_exam_duration').val(data.online_exam_duration);
$('#total_question').val(data.total_question);
$('#marks_per_right_answer').val(data.marks_per_right_answer);
$('#marks_per_wrong_answer').val(data.marks_per_wrong_answer);
$('#online_exam_id').val(exam_id);
$('#modal_title').text('Edit Exam Details');
$('#button_action').val('Edit');
$('#action').val('Edit');
$('#formModal').modal('show');
}
})
});
$(document).on('click', '.delete', function(){
exam_id = $(this).attr('id');
$('#deleteModal').modal('show');
});
$('#ok_button').click(function(){
$.ajax({
url:"ajax_action.php",
method:"POST",
data:{exam_id:exam_id, action:'delete', page:'exam'},
dataType:"json",
success:function(data)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
$('#deleteModal').modal('hide');
dataTable.ajax.reload();
}
})
});
function reset_question_form()
{
$('#question_modal_title').text('Add Question');
$('#question_button_action').val('Add');
$('#hidden_action').val('Add');
$('#question_form')[0].reset();
$('#question_form').parsley().reset();
}
$(document).on('click', '.add_question', function(){
reset_question_form();
$('#questionModal').modal('show');
$('#message_operation').html('');
exam_id = $(this).attr('id');
$('#hidden_online_exam_id').val(exam_id);
});
$('#question_form').parsley();
$('#question_form').on('submit', function(event){
event.preventDefault();
$('#question_title').attr('required', 'required');
$('#option_title_1').attr('required', 'required');
$('#option_title_2').attr('required', 'required');
$('#option_title_3').attr('required', 'required');
$('#option_title_4').attr('required', 'required');
$('#answer_option').attr('required', 'required');
if($('#question_form').parsley().validate())
{
$.ajax({
url:"ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#question_button_action').attr('disabled', 'disabled');
$('#question_button_action').val('Validate...');
},
success:function(data)
{
if(data.success)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
reset_question_form();
dataTable.ajax.reload();
$('#questionModal').modal('hide');
}
$('#question_button_action').attr('disabled', false);
$('#question_button_action').val($('#hidden_action').val());
}
});
}
});
});
</script>
<?php
include('footer.php');
?>
master/question.php
This is the main page of the question module on the administrator page of this online exam system. Here you will find CRUD-related questions such as reading question details, editing question details and deleting or deleting question details.
<?php
//question.php
include('header.php');
?>
<br />
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="exam.php">Exam List</a></li>
<li class="breadcrumb-item active" aria-current="page">Question List</li>
</ol>
</nav>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-9">
<h3 class="panel-title">Question List</h3>
</div>
<div class="col-md-3" align="right">
</div>
</div>
</div>
<div class="card-body">
<span id="message_operation"></span>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover" id="question_data_table">
<thead>
<tr>
<th>Question Title</th>
<th>Right Option</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3 align="center">Are you sure you want to remove this?</h3>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" name="ok_button" id="ok_button" class="btn btn-primary btn-sm">OK</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="questionModal">
<div class="modal-dialog modal-lg">
<form method="post" id="question_form">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="question_modal_title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Question Title <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="question_title" id="question_title" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 1 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_1" id="option_title_1" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 2 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_2" id="option_title_2" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 3 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_3" id="option_title_3" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Option 4 <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="option_title_4" id="option_title_4" autocomplete="off" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Answer <span class="text-danger">*</span></label>
<div class="col-md-8">
<select name="answer_option" id="answer_option" class="form-control">
<option value="">Select</option>
<option value="1">1 Option</option>
<option value="2">2 Option</option>
<option value="3">3 Option</option>
<option value="4">4 Option</option>
</select>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="hidden" name="question_id" id="question_id" />
<input type="hidden" name="page" value="question" />
<input type="hidden" name="action" id="hidden_action" value="Edit" />
<input type="submit" name="question_button_action" id="question_button_action" class="btn btn-success btn-sm" value="Edit" />
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(){
var code = "<?php echo $_GET['code']; ?>";
var dataTable = $('#question_data_table').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"ajax_action.php",
type:"POST",
data:{action:'fetch', page:'question', code:code}
},
"columnDefs":[
{
"targets":[2],
"orderable":false,
},
],
});
$('#question_form').parsley();
$('#question_form').on('submit', function(event){
event.preventDefault();
$('#question_title').attr('required', 'required');
$('#option_title_1').attr('required', 'required');
$('#option_title_2').attr('required', 'required');
$('#option_title_3').attr('required', 'required');
$('#option_title_4').attr('required', 'required');
$('#answer_option').attr('required', 'required');
if($('#question_form').parsley().validate())
{
$.ajax({
url:"ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function()
{
$('#question_button_action').attr('disabled', 'disabled');
$('#question_button_action').val('Validate...');
},
success:function(data){
$('#question_button_action').attr('disabled', false);
$('#question_button_action').val($('#action').val());
if(data.success)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
reset_question_form();
dataTable.ajax.reload();
$('#questionModal').modal('hide');
}
}
});
}
});
function reset_question_form()
{
$('#question_button_action').val('Edit');
$('#question_form')[0].reset();
$('#question_form').parsley().reset();
}
var question_id = '';
$(document).on('click', '.edit', function(){
question_id = $(this).attr('id');
reset_question_form();
$.ajax({
url:"ajax_action.php",
method:"POST",
data:{action:'edit_fetch', question_id:question_id, page:'question'},
dataType:"json",
success:function(data)
{
$('#question_title').val(data.question_title);
$('#option_title_1').val(data.option_title_1);
$('#option_title_2').val(data.option_title_2);
$('#option_title_3').val(data.option_title_3);
$('#option_title_4').val(data.option_title_4);
$('#answer_option').val(data.answer_option);
$('#question_id').val(question_id);
$('#modal_title').text("Edit Question Details");
$('#questionModal').modal('show');
}
});
});
$(document).on('click', '.delete', function(){
question_id = $(this).attr('id');
$('#deleteModal').modal('show');
});
$('#ok_button').click(function(){
$.ajax({
url:"ajax_action.php",
method:"POST",
data:{question_id:question_id, action:'delete', page:'question'},
dataType:'json',
success:function(data)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
$('#deleteModal').modal('hide');
dataTable.ajax.reload();
}
});
});
});
</script>
<?php
include('footer.php');
?>
header.php
This is the user header file of this online exam system. In this file we have defined the required library in which we will create this system. In this file, we also have a menu to go to the registration check page, profile page, password change page, and log off from the system link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Examination System in PHP MySql </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.1/dist/parsley.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/TimeCircles.css" />
<script src="style/TimeCircles.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; padding: 1rem 1rem;">
<img src="master/logo.png" class="img-fluid" width="300" alt="Online Examination System in PHP MySql " />
</div>
<?php
if(isset($_SESSION['user_id']))
{
?>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="index.php">User Side</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="enroll_exam.php">Enroll Exam</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.php">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="change_password.php">Change Pasword</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<?php
}
?>
register.php
This is the user's log file. In this file we have the user registration form. This file first checks whether the user is registered with a unique email address or not, and other form data has also been validated by the Parsley Validation Library. The registration form data was sent on request from Ajax.
<?php
//register.php
include('master/Examination.php');
$exam = new Examination;
$exam->user_session_public();
include('header.php');
?>
<div class="containter">
<div class="d-flex justify-content-center">
<br /><br />
<div class="card" style="margin-top:50px;margin-bottom: 100px;">
<div class="card-header"><h4>User Registration</h4></div>
<div class="card-body">
<span id="message"></span>
<form method="post" id="user_register_form">
<div class="form-group">
<label>Enter Email Address</label>
<input type="text" name="user_email_address" id="user_email_address" class="form-control" data-parsley-checkemail data-parsley-checkemail-message='Email Address already Exists' />
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" />
</div>
<div class="form-group">
<label>Enter Confirm Password</label>
<input type="password" name="confirm_user_password" id="confirm_user_password" class="form-control" />
</div>
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" />
</div>
<div class="form-group">
<label>Select Gender</label>
<select name="user_gender" id="user_gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label>Enter Address</label>
<textarea name="user_address" id="user_address" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Enter Mobile Number</label>
<input type="text" name="user_mobile_no" id="user_mobile_no" class="form-control" />
</div>
<div class="form-group">
<label>Select Profile Image</label>
<input type="file" name="user_image" id="user_image" />
</div>
<br />
<div class="form-group" align="center">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="action" value="register" />
<input type="submit" name="user_register" id="user_register" class="btn btn-info" value="Register" />
</div>
</form>
<div align="center">
<a href="login.php">Login</a>
</div>
</div>
</div>
<br /><br />
<br /><br />
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
window.ParsleyValidator.addValidator('checkemail', {
validateString: function(value)
{
return $.ajax({
url:'user_ajax_action.php',
method:"POST",
data:{page:'register', action:'check_email', email:value},
dataType:"json",
async: false,
success:function(data)
{
return true;
}
});
}
});
$('#user_register_form').parsley();
$('#user_register_form').on('submit', function(event){
event.preventDefault();
$('#user_email_address').attr('required', 'required');
$('#user_email_address').attr('data-parsley-type', 'email');
$('#user_password').attr('required', 'required');
$('#confirm_user_password').attr('required', 'required');
$('#confirm_user_password').attr('data-parsley-equalto', '#user_password');
$('#user_name').attr('required', 'required');
$('#user_name').attr('data-parsley-pattern', '^[a-zA-Z ]+$');
$('#user_address').attr('required', 'required');
$('#user_mobile_no').attr('required', 'required');
$('#user_mobile_no').attr('data-parsley-pattern', '^[0-9]+$');
$('#user_image').attr('required', 'required');
$('#user_image').attr('accept', 'image/*');
if($('#user_register_form').parsley().validate())
{
$.ajax({
url:"user_ajax_action.php",
method:"POST",
data: new FormData(this),
dataType:"json",
contentType: false,
cache: false,
processData:false,
beforeSend:function()
{
$('#user_register').attr('disabled', 'disabled');
$('#user_register').val('please wait...');
},
success:function(data)
{
if(data.success)
{
$('#message').html('<div class="alert alert-success">Please check your email</div>');
$('#user_register_form')[0].reset();
$('#user_register_form').parsley().reset();
}
else
{
$('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
}
$('#user_register').attr('disabled', false);
$('#user_register').val('Register');
}
});
}
});
});
</script>
user_ajax_action.php
This file receives all Ajax requests on the user side of this online exam system. In this file, we have included the exam class and the PHP mail class library to send registration emails.
<?php
//user_ajax_action.php
include('master/Examination.php');
require_once('class/class.phpmailer.php');
$exam = new Examination;
$current_datetime = date("Y-m-d") . ' ' . date("H:i:s", STRTOTIME(date('h:i:sa')));
if(isset($_POST['page']))
{
if($_POST['page'] == 'register')
{
if($_POST['action'] == 'check_email')
{
$exam->query = "
SELECT * FROM user_table
WHERE user_email_address = '".trim($_POST["email"])."'
";
$total_row = $exam->total_row();
if($total_row == 0)
{
$output = array(
'success' => true
);
echo json_encode($output);
}
}
if($_POST['action'] == 'register')
{
$user_verfication_code = md5(rand());
$receiver_email = $_POST['user_email_address'];
$exam->filedata = $_FILES['user_image'];
$user_image = $exam->Upload_file();
$exam->data = array(
':user_email_address' => $receiver_email,
':user_password' => password_hash($_POST['user_password'], PASSWORD_DEFAULT),
':user_verfication_code'=> $user_verfication_code,
':user_name' => $_POST['user_name'],
':user_gender' => $_POST['user_gender'],
':user_address' => $_POST['user_address'],
':user_mobile_no' => $_POST['user_mobile_no'],
':user_image' => $user_image,
':user_created_on' => $current_datetime
);
$exam->query = "
INSERT INTO user_table
(user_email_address, user_password, user_verfication_code, user_name, user_gender, user_address, user_mobile_no, user_image, user_created_on)
VALUES
(:user_email_address, :user_password, :user_verfication_code, :user_name, :user_gender, :user_address, :user_mobile_no, :user_image, :user_created_on)
";
$exam->execute_query();
$subject= 'Online Examination Registration Verification';
$body = '
<p>Thank you for registering.</p>
<p>This is a verification eMail, please click the link to verify your eMail address by clicking this <a href="'.$exam->home_page.'verify_email.php?type=user&code='.$user_verfication_code.'" target="_blank"><b>link</b></a>.</p>
<p>In case if you have any difficulty please eMail us.</p>
<p>Thank you,</p>
<p>Online Examination System</p>
';
$exam->send_email($receiver_email, $subject, $body);
$output = array(
'success' => true
);
echo json_encode($output);
}
}
if($_POST['page'] == 'login')
{
if($_POST['action'] == 'login')
{
$exam->data = array(
':user_email_address' => $_POST['user_email_address']
);
$exam->query = "
SELECT * FROM user_table
WHERE user_email_address = :user_email_address
";
$total_row = $exam->total_row();
if($total_row > 0)
{
$result = $exam->query_result();
foreach($result as $row)
{
if($row['user_email_verified'] == 'yes')
{
if(password_verify($_POST['user_password'], $row['user_password']))
{
$_SESSION['user_id'] = $row['user_id'];
$output = array(
'success' => true
);
}
else
{
$output = array(
'error' => 'Wrong Password'
);
}
}
else
{
$output = array(
'error' => 'Your Email is not verify'
);
}
}
}
else
{
$output = array(
'error' => 'Wrong Email Address'
);
}
echo json_encode($output);
}
}
}
?>
verify_email.php
This PHP file is mainly used to check the administrator's email address and the user's email address that they entered at the time of registration. In this file we have included the exam class to perform various operations.
This file receives $ _GET ['type'] and $ _GET ['code'] which are verifiable, in $ _GET ['type'] we can define administrator or user, and in $ _GET ['code'] it has one Password verification code of email The email address is checked according to the value of this variable.
verify_email.php
This file receives $ _GET ['type'] and $ _GET ['code'] which are verifiable, in $ _GET ['type'] we can define administrator or user, and in $ _GET ['code'] it has one Password verification code of email The email address is checked according to the value of this variable.
verify_email.php
<?php
//verify_email.php
include('master/Examination.php');
$exam = new Examination;
if(isset($_GET['type'], $_GET['code']))
{
if($_GET['type'] == 'master')
{
$exam->data = array(
':email_verified' => 'yes'
);
$exam->query = "
UPDATE admin_table
SET email_verified = :email_verified
WHERE admin_verfication_code = '".$_GET['code']."'
";
$exam->execute_query();
$exam->redirect('master/login.php?verified=success');
}
if($_GET['type'] == 'user')
{
$exam->data = array(
':user_email_verified' => 'yes'
);
$exam->query = "
UPDATE user_table
SET user_email_verified = :user_email_verified
WHERE user_verfication_code = '".$_GET['code']."'
";
$exam->execute_query();
$exam->redirect('login.php?verified=success');
}
}
?>
login.php
With this user registration form, the user can register with the online examination system who wants to take this online examination. After the user has verified their email address, they can log on to the system by entering the email address and password that they specified at the time of registration.
login.php
login.php
<?php
//login.php
include('master/Examination.php');
$exam = new Examination;
$exam->user_session_public();
include('header.php');
?>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="margin-top:100px;">
<span id="message">
<?php
if(isset($_GET['verified']))
{
echo '
<div class="alert alert-success">
Your email has been verified, now you can login
</div>
';
}
?>
</span>
<div class="card">
<div class="card-header">User Login</div>
<div class="card-body">
<form method="post" id="user_login_form">
<div class="form-group">
<label>Enter Email Address</label>
<input type="text" name="user_email_address" id="user_email_address" class="form-control" />
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" />
</div>
<div class="form-group">
<input type="hidden" name="page" value="login" />
<input type="hidden" name="action" value="login" />
<input type="submit" name="user_login" id="user_login" class="btn btn-info" value="Login" />
</div>
</form>
<div align="center">
<a href="register.php">Register</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#user_login_form').parsley();
$('#user_login_form').on('submit', function(event){
event.preventDefault();
$('#user_email_address').attr('required', 'required');
$('#user_email_address').attr('data-parsley-type', 'email');
$('#user_password').attr('required', 'required');
if($('#user_login_form').parsley().validate())
{
$.ajax({
url:"user_ajax_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function()
{
$('#user_login').attr('disabled', 'disabled');
$('#user_login').val('please wait...');
},
success:function(data)
{
if(data.success)
{
location.href='index.php';
}
else
{
$('#message').html('<div class="alert alert-danger">'+data.error+'</div>');
}
$('#user_login').attr('disabled', false);
$('#user_login').val('Login');
}
})
}
});
});
</script>
logout.php
This script destroys all session variables and redirects the user to the login page.
<?php
//logout.php
session_start();
session_destroy();
header('location:login.php');
?>
The online exam system was created using a PHP script with the Mysql, jQuery, Ajax and Bootstrap 4 library and will shortly be added as source code for the online exam system in PHP.
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.