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.
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.
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
<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
<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
<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/ User
<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
<<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
<?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
<?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.