PHP project using AJAX, Bootstrap and MySQL

PHP project using AJAX, Bootstrap and MySQL- Internal Document Management

Internal document management is the basic need of any organization. There can be countless notices, information reports and memos that must be shared with employees of an organization. Internal Document Management System is a PHP project using AJAX, Bootstrap and MySQL. It is developed to give a brief insight into the activities related to this function. This Web Application is a simple implementation offering interface for employees as user and Administrators.

User Dashboard

The user, in order to upload a report or document, must first be assigned a user id and password by the administrator. Once a user logs on into the system, the user dashboard displays the option to update a new report or view the already uploaded reports.

 

user-dashboard

Admin Dashboard

When an admin logs on with her credentials, she is presented with dashboard to perform all the tasks related to an administrator.  The administrator can add or modify a department, a committee or a user. For modification of an existing data Bootstrap Modal forms are used that displays the selected record in a modal form and data in table is updated by reentering values in this form.

admin-dashboard

Activities included in PHP project using AJAX, Bootstrap and MySQL- Internal Document Management System

  • Addition of a new department
  • Modification of an existing department
  • Addition of a Committee
  • Modification of a committee
  • Addition of a user
  • Updating credentials of an existing user
  • Uploading a new report as document or pdf
  • Viewing all the reports updated.
  • Logging out option for all users

Platform Requirements

  • PHP
  • MySQL
  • HTML
  • AJAX
  • Bootstrap CSS styles

Database

CREATE TABLE `committee_tbl` (  `commID` int(11) NOT NULL,  `commName` varchar(100) NOT NULL)

CREATE TABLE `department_tbl` (  `depttID` int(11) NOT NULL,  `depttName` varchar(40) NOT NULL)

CREATE TABLE `upload_tbl` (  `docID` int(11) NOT NULL,  `CommDept` varchar(30) NOT NULL,  `ComDeptID` int(11) NOT NULL,  `ActType` varchar(40) NOT NULL,  `ActName` varchar(200) NOT NULL,  `ActCoordinator` varchar(50) NOT NULL,  `ActFromDate` date NOT NULL,  `ActToDate` date NOT NULL,  `docPath` varchar(100) NOT NULL,  `UploadDate` date NOT NULL,  `UploadTime` time NOT NULL,  `UploadedBy` varchar(50) NOT NULL,  `Remarks` varchar(200) NOT NULL)

CREATE TABLE `users_tbl` (  `UserName` varchar(60) NOT NULL,  `Password` varchar(30) NOT NULL,  `UserType` varchar(20) NOT NULL)

Interface and code

Homepage

login page

 <HTML>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<BODY>

<div class="container">
<div style="width: 1100px;  border-width: 1px; height:150px; text-align:center; background-color:rgba(7, 109, 175, 0.5)"><h2 style="padding-top:50px">Internal Document Management Portal</h2></div>
<div style="width: 1100px;  border-width: 1px; height:30px; text-align:center; background-color:rgb(7, 109, 175)"></div>
<div>
      <div class="mh-100" style="width: 1100px; height:100%; border-style: groove; border-width: 1px;">
      <div class="mh-100" style="width: 400px; padding-top:30px; border-width: 1px; margin-left: auto; margin-top: 30px;  margin-right: auto; height:300px; text-align:center; background-color:rgba(7, 109, 175, 0.5)">
      
      <form action="home.php" Method="POST">
      <b>Login as </b> <input type="radio" name="user" value="admin" checked > Admin </input><input type="radio" name="user" value="user">User</input><br><br><br>
      <div class="form-group" >
                  <input type="string" class="form-control" id="username" name="username" aria-describedby="emailHelp" placeholder="Enter Your Registered Name">
                  
              </div>
              <div class="form-group">
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
                  
              </div>
              <button type="submit" name="submit" class="btn btn-primary" style="border-color:rgb(7, 109, 175);background-color:rgb(7, 109, 175)">Submit</button>
              <?php
                  if (isset($_POST['submit']))
                  {
                  $con=mysqli_connect("localhost","root","","sambandh");
                  $uType=$_POST['user'];
                  $uname=$_POST['username'];
                  $pwd=$_POST['password'];
            
                  $qry="Select Password from users_tbl where UserName='$uname' and UserType='$uType'";
                  
                  $res=mysqli_query($con,$qry);

                  while ($row=mysqli_fetch_array($res))
                  {
                        if ($pwd==$row[0]) 
                        {
                                    echo "<script> alert('Login Successful');</script>";
                                    session_start();
                                    $_SESSION['uID']=$row[0];
                                    $_SESSION['Uname']=$uname;
                                    $_SESSION['Utype']=$uType;
                                    header('refresh:0;url=Dashboard.php');
                        }
                        else
                        {
                              echo '<script> alert("Incorrect UserName/User Type/Password");</script>';
                              header('refresh:0;url=Home.php');
                        }
                  }
                  }
                  ?>
       </div>
      </form>
      </div>
      </div>
</div>
<BODY>

User & Admin Dashboard

 <HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#uploadrep").click(function(){
    $("#contents").load("uploadfile.php");
  });
  $("#ViewRep").click(function(){
    $("#contents").load("displayList.php");
  });
  $("#AddDept").click(function(){
    $("#contents").load("AddDepartment.php");
  });
   $("#ModiDept").click(function(){
    $("#contents").load("ModiDeptt.php");
  });
   $("#AddComm").click(function(){
    $("#contents").load("AddCommittee.php");
  });
   $("#ModiComm").click(function(){
    $("#contents").load("ModiComm.php");
  });
   $("#AddUser").click(function(){
    $("#contents").load("AddUser.php");
  });
  $("#ModiUser").click(function(){
    $("#contents").load("ModiUser.php");
  });
});
</script>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<BODY>

<div class="container">
<div style="width: 1100px;  border-width: 1px; height:150px; text-align:center; background-color:rgba(7, 109, 175, 0.5)"><h2 style="padding-top:50px">Internal Document Management Portal</h2></div>
<div style="width: 1100px;  border-width: 1px; height:30px; text-align:right; background-color:rgb(7, 109, 175); padding-right:30px;">
<?php
            session_start();
            $utype=$_SESSION['Utype'];
            $uname=$_SESSION['Uname'];
            $memID=$_SESSION['uID'];
            echo '<a href="logout.php" style="color:white; ">Log out '.$uname.'</a>';
            ?>
</div>
<div>
      <div style="width: 195px; height:100%; border-style: solid; border-width: 1px;  float:left;color:rgb(7, 109, 175);">
            <nav class="navbar navbar-light bg-light" >
            <?php
            if ($utype=='user')
            {
                  echo '<a class="navbar-brand" id="uploadrep" href="#" style="font-size: 16px;">Upload Report</a>';
                  echo '<a class="navbar-brand" id="ViewRep" href="#" style="font-size: 16px;">View Uploaded Report</a>';
            }
            else
            {      
                  echo '<a class="navbar-brand" id="AddDept" href="#" style="font-size: 16px;">Add Department</a>';
                  echo '<a class="navbar-brand" id="ModiDept" href="#" style="font-size: 16px;">Modify Department</a>';
                  echo '<a class="navbar-brand" id="AddComm" href="#" style="font-size: 16px;">Add Committee</a>';
                  echo '<a class="navbar-brand" id="ModiComm" href="#" style="font-size: 16px;">Modify Committee</a>';
                  echo '<a class="navbar-brand" id="AddUser" href="#" style="font-size: 16px;">Add New User</a>';
                  echo '<a class="navbar-brand" id="ModiUser" href="#" style="font-size: 16px;">Modify User Details</a>';      
            }                   
            ?>
            </nav>
      </div>
            <div ID="contents" style="padding:10px;height:100%; border-style: solid; border-width: 1px; align:center; display: block; margin-left: auto; margin-right:auto; width: 82%;color:rgb(7, 109, 175);float:left;">
            </div>
      </div>
</div>
<BODY>

Upload Report

upload-report

 <HTML>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<BODY>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

function showUser(str) {
    if (str == "") {
        document.getElementById("deptcomm").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("combo").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","process.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
<div class="container">
<div class="row">
    
      <div class="col">
      <form method="post" action="upload.php" enctype="multipart/form-data">
      Select
      <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="deptcomm" id="deptcomm" value="deptt" onclick="showUser(this.value)">Department
            <input class="form-check-input" type="radio" name="deptcomm" id="deptcomm" value="comm" onclick="showUser(this.value)">Committee/Club
      </div>
      <br>Department/Committee
      <p id="combo"></p>
      Activity
      <select name="ActType">
      <option value="Workshop">Workshop</option>
      <option value="Seminar">Seminar</option>
      <option value="Lecture">Lecture</option>
      <option value="Quiz">Quiz</option>
      <option value="Poster Making">Poster Making</option>
      <option value="Field Visit">Field Visit</option>
      <option value="FDP">FDP</option>
      <option value="Symposium">Symposium</option>
      <option value="Others">Others</option>
      </select>
      <br><label>Activity Name</label>
      <input type="Name" class="form-control" id="exampleInputName" name="actName" placeholder="Name of the activity">
      <label>Activity Coordinator</label>
      <input type="Name" class="form-control" id="exampleInputName" name="actCooName" placeholder="Name of the activity Coordinator"><br>
      <div class="form-check form-check-inline">
       Activity From Date:<input type="Date" class="form-control" id="exampleInputdob" name="ActFrom" style="width: 30%">
       Activity End Date:<input type="Date" class="form-control" id="exampleInputdob" name="ActTo" style="width: 30%">
      </div><br>
      <div class="form-group">
                  <br><label for="exampleFormControlFile1">Report File(allowed formats .pdf, .docx,.xlsx,.pptx)</label>
                  <input type="file" name="fileToUpload" class="form-control-file" id="fileToUpload">
      </div>      
      <label>Remarks</label>
      <input type="Remarks" class="form-control" id="exampleInputName" name="Remarks" placeholder="Remarks if any">
      <br><br><center><button class="btn btn-success"  name="submit" id="exampleSubmit" value="Submit" style="border-color:rgb(7, 109, 175);background-color:rgb(7, 109, 175);">Submit</button></center>
      </form>
</div>
</div>
</div>
</BODY>

To display list of departments or committees on clicking radio buttons (process.php)

 <?php
echo "<script>alert('data not saved');</script>";
      $dc=$_GET['q'];
      $con=mysqli_connect("localhost","root","","sambandh");
      if ($dc=='deptt')
            $qry="select depttID, depttName from department_tbl";
      else
            $qry="select commID, commName from committee_tbl";
      $run=mysqli_query($con,$qry);
      $str= '<select name="did">';
      while ($rows=mysqli_fetch_array($run))
      {
            $str=$str. "<option value=".$rows[0].">".$rows[1]."</option>";
      }
      $str=$str. '</select>';
      echo $str;
      ?>

 To save the details of uploaded report  in database  (upload.php)

 <?php
session_start();
$uname=$_SESSION['Uname'];
$filen=$_FILES['fileToUpload'];
$target_dir = "uploads/";
$target_file = $target_dir.basename($filen["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "pdf" && $imageFileType != "xlsx" && $imageFileType != "docx"
&& $imageFileType != "pptx" ) {
    echo "Sorry, only pdf, xlsx, docx & pptx files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "<script>alert('Sorry, your file was not uploaded.');</script>";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($filen["tmp_name"], $target_file)) {
        echo "<script>alert( 'The file ". basename( $filen["name"]). " has been uploaded.');</script>";
    } else {
         echo "<script>alert('Sorry, there was an error in file uploaded.');</script>";
    }
}
$con=mysqli_connect("localhost","root","","sambandh");
$dc=$_POST['deptcomm'];
$dcn=$_POST['did'];
$aType=$_POST['ActType'];
$aName=$_POST['actName'];
$aCoord=$_POST['actCooName'];
$afd=$_POST['ActFrom'];
$atd=$_POST['ActTo'];
$fn=$filen["name"];
$rem=$_POST['Remarks'];
$dID=1;
$qry="select max(docID) as maxid from upload_tbl";

$res=mysqli_query($con,$qry);
foreach ($res as $id)
      $dID=$id['maxid']+1;

$qry1="insert into upload_tbl  values ($dID,'$dc','$dcn','$aType','$aName','$aCoord','$afd','$atd','$fn','".date("Y/m/d")."','".date("h:i:s")."','$uname', '$rem')";
echo $qry1;
$res1=mysqli_query($con,$qry1);
if (mysqli_affected_rows($con)>0)
{
      //echo $qry1;
      echo "<script>alert('Document uploaded successfully');</script>";
      header('refresh:0;url=dashboard.php');
      unset($qry1);
}
else
{      
      //echo $qry1;
      echo "<script>alert('data not saved');</script>";
      header('refresh:0;url=dashboard.php');
}
?>

To display the list of uploaded documents

list uploaded documents

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
<table class="table-striped table-bordered" >
      <tr>
      <th colspan="12" style="background-color:rgba(7, 109, 175, 0.5);text-align:center">
<h4>Activity Documents List</h4></th>
      </tr>
<tr style="padding:10px;">
<th>Doc ID</th>
<th>Department/ Committee Name</th>
<th>Activity Type</th>
<th>Activity Title</th>
<th>Coordinator Name</th>
<th>From Date</th>
<th>To Date</th>
<th>View Report</th>
<th>Upload Date & Time</th>
<th>Uploaded By</th>
<th>Remarks</th>
</tr> 
<?php 
$con=mysqli_connect("localhost","root","","sambandh");

$qry="SELECT `docID`, `CommDept`,c.CommName as dname, `ActType`, `ActName`, `ActCoordinator`, `ActFromDate`, `ActToDate`, `docPath`, `UploadDate`, `UploadTime`, `UploadedBy`, `Remarks` FROM `upload_tbl` u, committee_tbl c where u.ComDeptID=c.commID and u.`CommDept`='comm' union SELECT `docID`, `CommDept`,d.depttName as dname, `ActType`, `ActName`, `ActCoordinator`, `ActFromDate`, `ActToDate`, `docPath`, `UploadDate`, `UploadTime`, `UploadedBy`, `Remarks` FROM `upload_tbl` u, department_tbl d where u.ComDeptID=d.depttID and u.`CommDept`='deptt' order by `docID`";

$recset=mysqli_query($con,$qry);
while ($row=mysqli_fetch_array($recset))
{
      echo "<tr>";      
      echo "<td>";
      $arr['docid']=$row["docID"];
      echo $row["docID"];
      echo "</td>";
      echo "<td>";
      $arr['dname']=$row["dname"];
      echo $row["dname"];
      echo "</td>";
      echo "<td>";
      $arr['ActType']=$row["ActType"];
      echo $row["ActType"];
      echo "</td>";
      echo "<td>";
      $arr['ActName']=$row["ActName"];
      echo $row["ActName"];
      echo "</td>";
      echo "<td>";
      $arr['ActCoordinator']=$row["ActCoordinator"];
      echo $row["ActCoordinator"];
      echo "</td>";
      echo "<td>";
      $arr['ActFromDate']=$row["ActFromDate"];
      echo $row["ActFromDate"];
      echo "</td>";
      echo "<td>";
      $arr['ActToDate']=$row["ActToDate"];
      echo $row["ActToDate"];
      echo "</td>";
      echo "<td style=\"text-align:center\">";
      $arr['docPath']=$row["docPath"];
      echo "<a href=\"uploads\\".$row["docPath"]."\">view</>";
      echo "</td>";
      echo "<td>";
      echo $row["UploadDate"]." ". $row["UploadTime"];
      echo "</td>";
      echo "<td>";
      echo $row["UploadedBy"];
      echo "</td>";
      echo "<td>";
      $arr['Remarks']=$row["Remarks"];
      echo $row["Remarks"];
      echo "</td>";
      echo "</tr>";
}
 ?>
</table>

To add Department/Committee/ Useradd-Department

 <HTML>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<BODY>
     <form method="POST" Action="AddDepartment.php">
              <div class="form-group">
                  <label for="exampleInputName">Add Department </label>
                  <input type="string" class="form-control" id="dName" name="dName"  placeholder="Add Department">
                  
              </div>
              <button type="submit" class="btn btn-primary" name="submit" value="submit">Submit</button>
            </form>
    
</BODY>
</HTML>
<?php
if (isset($_POST["submit"]))
{
$con=mysqli_connect("localhost","root","","sambandh");
$dn=$_POST["dName"];

$qry="select max(depttID) as maxid from department_tbl";
$did=1;
$run=mysqli_query($con,$qry);
while ($rows=mysqli_fetch_array($run))
      {
                  $did=$rows['maxid']+1;
      }

$qry="Insert into department_tbl values ($did,'$dn')";
if (mysqli_query($con,$qry)==TRUE)
{
      echo '<script> alert("Department Added Successful");</script>';
      header('refresh:0;url=dashboard.php');
}
else
{
      echo '<script> alert("Please try again");</script>';
      header('refresh:0;url=dashboard.php');
}
}
?>

To display / Modify/ Delete Department/ Committee/ User using Bootstrap Modal window, Ajax and JavaScript

modify-delete department

 <<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>
 $(document).ready(function() {
                  
            $('button').click(function(){
                var depid = $(this).attr('id');
                        var depname = $(this).attr('value');
                $("#mdid").val(depid);
                        $("#mdn").val(depname);
            });
                  });
</script>

<script>
function UpdateRec(){
    var mid = $('#mdid').val();
    var mnm = $('#mdn').val();
    $.ajax({
            type:'POST',
            url:'DepttModi.php',
            data:'submit=1&depID='+mid+'&depName='+mnm,
            beforeSend: function () {
                $('#submit').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#mdid').val('');
                    $('#mdn').val('');
                    
                }else{
                    
                }
                $('#submit').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }

</script>
    
<table class="table-striped table-bordered" >
      <tr>
      <th colspan="12" style="background-color:rgba(7, 109, 175, 0.5);text-align:center">
<h4>Departments List</h4></th>
      </tr>
<tr style="padding:10px;">
<th>Deptt ID</th>
<th>Department Name</th>
<th>Action</th>
</tr> 
<?php 
$con=mysqli_connect("localhost","root","","sambandh");

$qry="SELECT * from department_tbl";

$recset=mysqli_query($con,$qry);
while ($row=mysqli_fetch_array($recset))
{
      echo "<tr>";      
      echo "<td>";
      echo $row["depttID"];
      echo "</td>";
      echo "<td>";
      echo $row["depttName"];
      echo "</td>";
      echo "<td >";
      $did=$row["depttID"];
      $dn=$row["depttName"];
      echo '<button type="button" class="btn btn-info " data-toggle="modal" id="'.$did.'" data-target="#myModal" value="'.$dn.'">Modify</button>';
      echo '<a href="DepttDel.php?depID='.$did.'"><button type="button" class="btn btn-info ">Delete</button></a>';
      echo "</td>";
      echo "</tr>";
}
?>
</table> 

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modify Department</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
        
      </div>
        <form role="form">
      <div class="modal-body">
            <p><input type="name" name="depID" id="mdid" value="22"></p>
        <p><input type="name" name="depName" id="mdn" value="22"></p>
      </div>
      <div class="modal-footer">
            <button type="submit" name="submit" class="btn btn-info btn-lg" onclick="UpdateRec()">Update</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>

  </div>
</div>

Update

modify-department

 <?php
if (isset($_POST['submit']))
{
$cid=$_POST['comID'];
$cn=$_POST['comName'];
$con=mysqli_connect("localhost","root","","sambandh");
$qry="update committee_tbl set commName='$cn' where commID=$cid";
echo "<script>alert(". $qry.");</script>";
$recset=mysqli_query($con,$qry);
if (mysqli_affected_rows($con)>0)
{
      echo "<script>alert('Committee Updated');</script>";
      header('refresh:0;url=dashboard.php');
}
else 
{      
      echo "<script>alert('Committee not Updated');</script>";
      header('refresh:0;url=dashboard.php');
}
}
else
{
      echo "<script>alert('problem');</script>";
}      
?>

Delete

delete-department

 <?php
$did=$_GET['depID'];
$con=mysqli_connect("localhost","root","","sambandh");
$qry="delete from department_tbl where depttID=$did";
$recset=mysqli_query($con,$qry);
if (mysqli_affected_rows($con)>0)
{
      echo "<script>alert('Department deleted');</script>";
      header('refresh:0;url=dashboard.php');
}
else 
{      
      echo $qry;
      echo "<script>alert('Department not deleted');</script>";
      header('refresh:0;url=dashboard.php');
}
?>

The above code for department addition, display, modification and delete can be modified for committee and user.