E011 - Devanshi Chauhan - Lab 9 - ES

Lab 9 – Coding the functionalities of the project
Admin Login
<!DOCTYPE HTML>
<html>
<head>
<title>Login Page - HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Pooled Responsive web template, Bootstrap Web Templates,
Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>

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

<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>

<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.css">

<script src="js/jquery-2.1.4.min.js"></script>

<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>

<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />

<style>
html{
min-height: calc(100%);
width:calc(100%);
}
body, .main-wthree{
width:calc(100%);
min-height: 100vh;
}
.main-wthree{
padding-bottom:2em;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
}
.footer{
width:100%;
position:fixed;
bottom:0;
left:0
}
.sin-w3-agile{
padding:0;
}
.login{
background-color: #010101;
background-image: linear-gradient(160deg, #010101 0%, #4e6865 100%);
}
.login-w3 {
width: 100%;
float: unset;
text-align: center;
}
.main-wthree input[type="submit"]:hover {
background: #3e5250;
}
</style>
</head>
<body>
<div class="main-wthree">
<div class="container">
<h1 class="text-center text-white">Human Resource Management System</h1>
<div class="sin-w3-agile">
<h2>Login In</h2>
<form action="controller/login.php" method="post">
<div class="email">
<span class="email">Email:</span>
<input type="Email" name="name" class="name" placeholder="Enter Email
Address">
<div class="clearfix"></div>
</div>
<div class="password-agileits">
<span class="username">Password: <i class="fa fa-eye-slash" aria-
hidden="false" style="padding-left: 20px;" onclick="passwordeyes(this);"></i></span>
<input type="password" name="password" id="Psw" class="password"
placeholder="Enter Password">
</div>
<h4 style="color: #F1C40F;"></h4>
<div class="login-w3">
<input type="submit" name="submit" class="login" value="Sign In">
</div>
<h5 class="text-center"><a href="./user" class="text-white" >Login as an
Employee</a></h5>
</form>

<div class="footer">
<p>Human Resource Managemant System. All Rights Reserved ©
2024 </p>
</div>
</div>
</div>
</div>
<script>
function passwordeyes(_this) {
var x = document.getElementById("Psw").type;
if(x=="password"){
document.getElementById("Psw").type="text";
_this.setAttribute('class', "fa fa-eye")
}else{
document.getElementById("Psw").type="password";
_this.setAttribute('class', "fa fa-eye-slash")
}
}
</script>
</body>
</html>
Admin Dashboard
<!DOCTYPE HTML>
<html>
<head>
<title>Home - HRM</title>
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
</script>




type='text/css'>

<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>

<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}
/* Caption of Modal Image */

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>

</head>
<body>
<div class="page-container">

<div class="left-content">
<div class="mother-grid-inner">

<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>

</div>
<ol class="breadcrumb" style="margin: 10px 0px ! important;">

<li class="breadcrumb-item" title="Home"><a href="index.php">Home</a></li>
</ol>

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="panel panel-default bg-light dash-summary">
<div class="panel-body">
<a href="employeeview.php">
<div class="icon">
<i class="glyphicon glyphicon-user" aria-
hidden="true"></i>
</div>
<div class="four-text">
<h3>Employee</h3>
<h4>2</h4>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="panel panel-default bg-light dash-summary">
<div class="panel-body">
<a href="leaverequest.php">
<div class="icon">
<i class="glyphicon glyphicon-list-alt" aria-
hidden="true"></i>
</div>
<h3>Leave Request</h3>
<h4>0</h4>
</div>
</a>
</div>
</div>
</div>


</div>



<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});
});
</script>





<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>

</div>
</div>


<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>
<li><a href="#"><i class="fa fa-

user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>

</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>
</li>
<li id="menu-academico" ><a

href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> 
</li>


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
var toggle = true;
$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}
toggle = !toggle;
});
</script>

<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>
</html>
Add Employee Details
<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
</script>




type='text/css'>


<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
</div>
<ul>
<p>admin admin</p>
<span>admin</span>
</div>
</div>
</a>
</ul>
</li>
</ul>
</div>

</div>
<li class="breadcrumb-item"><a href="Home.php">Home</a><i class="fa fa-angle-
right"></i>Employee<i class="fa fa-angle-right"></i> Employee Add</li>
</ol>

<div class="validation-system" style="margin-top: 0;">
<div class="validation-form">

<form method="POST" action="controller/employee.php?empedit="
enctype="multipart/form-data">
<h4 style="color: #008000;"></h4> <div class="vali-form-group">
<div class="col-md-4 control-label">
<label class="control-label">Employee ID*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" name="empid" title="Employee ID" value="" class="form-
control" placeholder="Employee ID" required="">
</div>
</div>

<label class="control-label">Profile Image*</label>
<i class="fa fa-picture-o" aria-hidden="true"></i>
</span>
<input type="file" name="pfimg" title="Profile Image" class="form-control"
name="fileupload" >
</div>
</div>

<label class="control-label">Gender*</label>
<i class="fa fa-male" aria-hidden="true"></i>
</span>
<select name="gender" title="Gender" required="" style="padding: 5px 5px;
text-transform: capitalize;"">
<option value="">-- Select Gender --</option>
<option value="2" > female </option>
<option value="1" > male </option>

</select>
</div>
</div>
</div>
<div class="vali-form-group">
<label class="control-label">First Name*</label>
</span>
<input type="text" name="fname" title="First Name" value="" class="form-
control" placeholder="First Name" required="">
</div>
</div>

<label class="control-label">Middel Name*</label>
</span>
<input type="text" name="mname" title="Middel Name" value="" class="form-
control" placeholder="Middel Name" required="">
</div>
</div>

<label class="control-label">Last Name*</label>
</span>
<input type="text" name="lname" title="Last Name" value="" class="form-
control" placeholder="Last Name" required="">
</div>
</div>
</div>
<label class="control-label">Birth Date*</label>
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
<input type="text" id="Birthdate" title="Birth Date" name="bdate"
placeholder="Birth Date" onkeyup="if (/\D/g.test(this.value)) this.value =
this.value.replace(/\D/g,'')" value="" class="form-control" required="">
</div>
</div>

<label class="control-label">Marital*</label>
</span>
<select name="marital" title="Marital" required="" style="text-transform:
capitalize;">
<option value="">-- Select Marital --</option>
<option value="1" > Married </option>
<option value="2" > Unmarried </option>

</select>
</div>
</div>

<label class="control-label">Mobile Number*</label>
<i class="fa fa-mobile" aria-hidden="true"></i>
</span>
<input type="text" name="mnumber" title="Mobile Number" value="" class="form-
control" placeholder="Mobile Number" min="10" maxlength="10" onkeyup="if (/\
D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required="">
</div>
</div>
</div>

<label class="control-label">Address 1*</label>
<i class="fa fa-pencil " aria-hidden="true"></i>
</span>
<input type="text" name="address1" title="Address 1" value="" class="form-
control" placeholder="Address Line 1" required="">
</div>
</div>

<label class="control-label">Address 2*</label>
</span>

control" placeholder="Address Line 2" required="">
</div>
</div>
<label class="control-label">Address 3</label>
</span>
control" placeholder="Address Line 3">
</div>
</div>
<label class="control-label">Country*</label>
<i class="fa fa-globe" aria-hidden="true"></i>
</span>
<select name="country" id="contryid" title="Country" required=""
onchange="contrychange()" style="text-transform: capitalize;">
<option value="">-- Select Country --</option>
<option value="11" > India </option>
<option value="1" > Philippines </option>
<option value="12" > Singapore </option>
<option value="9" > USA </option>

</select>
</div>
</div>

<label class="control-label">State*</label>
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<select name="state" id="stateid" title="State" onchange="statechange()"
required="" style="text-transform: capitalize;">
<option value="">-- Select State --</option>
</select>
</div>
</div>

<label class="control-label">City*</label>
</span>
<select name="city" id="cityid" title="City" required="" style="text-
transform: capitalize;">
<option value="">-- Select City --</option>
</select>
</div>
</div>
</div>
<label class="control-label">Join Date*</label>
</span>
<input type="text" id="JoinDate" title="Join Date" name="joindate"
placeholder="Join Date" value="" class="form-control" required="" onkeyup="if (/\
D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
</div>
</div>

<label class="control-label">Leave Date</label>
</span>
<input type="text" id="LeaveDate" title="Leave Date" name="leavedate"
placeholder="Leave Date" value="" class="form-control" onkeyup="if (/\D/g.test(this.value))
this.value = this.value.replace(/\D/g,'')">
</div>
</div>

<label class="control-label">Status</label>
</span>
<select name="status" title="Status" required="" style="text-transform:
capitalize;">
<option value="">-- Select Status --</option>
<option value="1" > active </option>
<option value="2" > inactive </option>

</select>
</div>
</div>

<label class="control-label">Role*</label>
</span>
<select name="role" required="" title="Role" style="text-transform:
capitalize;" >
<option value="">-- Select Role --</option>
<option value="1" > admin </option>
<option value="2" > admin-hr </option>
<option value="3" > employee </option>

</select>
</div>
</div>
</div>
<label class="control-label">Position*</label>
<i class="fa fa-language" aria-hidden="true"></i>
</span>
<select name="position" title="Position" style="text-transform: capitalize;"
required="">
<option value="">-- Select Position --</option>
<option value="3" > Fullstack PHP Developer </option>
<option value="1" > HR </option>
<option value="2" > Web Developer </option>

</select>
</div>
</div>

<label class="control-label">Email*</label>
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
<input type="email" name="email" title="Email" value="" class="form-control"
placeholder="Email Address" required="">
</div>
</div>

<label class="control-label">Password*</label>
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<input type="password" id="Psw" title="Password" value="" name="password"
placeholder="Password " class="form-control" required="">
<a><i class='fa fa-eye' aria-hidden='false' onclick="passwordeyes()"></i></a>
</span>
</div>
</div>

</div>
<div class="col-md-12 form-group">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
<input type="text" name="imagefilename" hidden="" value="">
</div>
</form>

</div>
</div>
<script>
function passwordeyes() {
var x = document.getElementById("Psw").type;
if(x=="password")
document.getElementById("Psw").type="text";
else
document.getElementById("Psw").type="password";
}
</script>
<script>
var OneStepBack;
function nmac(val,e){
if(e.keyCode!=8)
{
if(val.length==2)
document.getElementById("mac").value = val+"-";
if(val.length==5)
if(val.length==8)
if(val.length==11)
if(val.length==14)
{
}
}
}
function nmac1(val,e){
if(e.keyCode==32){
return false;
}
if(e.keyCode!=8){
if(val.length==2)
if(val.length==5)
if(val.length==8)
if(val.length==11)
if(val.length==14){
}
if(val.length==17){
return false;
}
}
}
</script>
<script>
contrychange();
function contrychange()
{
var selectedstateid = "0";
var selectedstateid = parseInt(selectedstateid);
var selectedcountry = $('#contryid').val();

$.get("controller/getstatecity.php?
Type=s&ci="+selectedcountry+"&ss="+selectedstateid,function(data,status){
$("#stateid").html(data);
});
statechange(selectedstateid);
}
function statechange(si)
{
var selectedstate = $('#stateid').val();

if(si!=undefined)
selectedstate=si;
var selectedcityid = "0";

selectedcityid = parseInt(selectedcityid);
$.get("controller/getstatecity.php?
Type=c&si="+selectedstate+"&sc="+selectedcityid,function(data,status){
$("#cityid").html(data);
});
}
</script>
<script>
var birthdate = $('#Birthdate').val();

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yy = today.getFullYear();
var tdate = yy+"/"+mm+"/"+dd;
$('#Birthdate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//minDate:'-1980/01/01', // yesterday is minimum date
maxDate: tdate // and tommorow is maximum date calendar
});
$('#JoinDate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//maxDate: tdate // and tommorow is maximum date calendar
});
$('#LeaveDate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//maxDate: tdate // and tommorow is maximum date calendar
});
</script>
<script>
}else{
}
});
});
</script>

</div>
</div>
</div>
</a>
</header>
<div class="menu">
<ul id="menu" >

<ul>
Employee</a></li>
View</a></li>
Details</a></li>
-->
</ul>
</li>
</li>

</ul> -->
</li>

<ul>
Employee</a></li>
</ul>
</li> -->

<ul>
<li><a
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
var toggle = true;
if (toggle)
{
}
else
{
}, 400);
}
toggle = !toggle;
});
</script>

</body>
</html>
Employee View
<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
</script>




type='text/css'>


<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
</div>
<ul>
<p>admin admin</p>
<span>admin</span>
</div>
</div>
</a>
</ul>
</li>
</ul>
</div>

</div>
<link rel="stylesheet" type="text/css" href="css/table-style.css" />

<script type="text/javascript" src="js/jquery.basictable.min.js"></script>
<script type="text/javascript">
$('#table').basictable();
$('#table-breakpoint').basictable({
breakpoint: 768
});
$('#table-swap-axis').basictable({
swapAxis: true
});
$('#table-force-off').basictable({
forceResponsive: false
});
$('#table-no-resize').basictable({
noResize: true
});
$('#table-two-axis').basictable();
$('#table-max-height').basictable({
tableWrapper: true
});
});
</script>
right"></i>Employee<i class="fa fa-angle-right"></i>Employee View</li>
</ol>
<div class="validation-system" style="margin-top: 0;">

<div>
<div class="w3l-table-info">
<h2>Employee View</h2>
<br>
<form method="GET" action="#">
<input style="float: right;" type="submit" name="searchview">
<input style="float: right;" placeholder="Search" value="" type="search-box"
name="search"><br>
</form>
<table id="table">
<thead>
<tr>
<th style="text-transform: capitalize;">Profile Photo</th>
<th style="text-transform: capitalize;">Name</th>
<th style="text-transform: capitalize; text-align: center;">Employee
Id</th>
<th style="text-transform: capitalize; text-align: center;">Full
Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 140px;"><img id="myImg" alt="Mark D Cooper"
src="image/33615user.png" style="width: 50px;height: 50px;object-fit: cover;border-radius:
100%;border: 1px solid"></td>
<td>Mark D Cooper</td>
<td style="width: 105px;"><center>6231415</center></td>

<td style="text-align: center;"><a href="detailview.php?
employeeid=2"><u>View</u></a></td>
</tr>
<tr>
<td style="width: 140px;"><img id="myImg" alt="Jane Marie Cooper"
src="image/142339images.png" style="width: 50px;height: 50px;object-fit: cover;border-
radius: 100%;border: 1px solid"></td>
<td>Jane Marie Cooper</td>
<td style="width: 105px;"><center>12345</center></td>

<td style="text-align: center;"><a href="detailview.php?
employeeid=3"><u>View</u></a></td>
</tr>
</tbody>
</table>
<div><a href='?bn=1'>1</a>&nbsp &nbsp &nbsp</div>
</div>
</div>
</div>
</div>

<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<script>
}else{
}
});
});
</script>

</div>
</div>
</div>
</a>
</header>
<div class="menu">
<ul id="menu" >

<ul>
Employee</a></li>
View</a></li>
Details</a></li>
-->
</ul>
</li>
</li>

</ul> -->
</li>

<ul>
Employee</a></li>
</ul>
</li> -->

<ul>
<li><a
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
var toggle = true;
if (toggle)
{
}
else
{
}, 400);
}
toggle = !toggle;
});
</script>

</body>
</html>

<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal

span.onclick = function() {
modal.style.display = "none";
}
</script>

Leave
<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
</script>




type='text/css'>


<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
</div>
<ul>
<p>admin admin</p>
<span>admin</span>
</div>
</div>
</a>
</ul>
</li>
</ul>
</div>

</div>
right"></i>Leave<i class="fa fa-angle-right"></i>Leave</li>
</ol>
<form method="POST">
<h2>Request Leave</h2>
<div class="row" style="color: white; margin-right: 0; margin-left: 0;">
<div style="background: #202a29;" class="col-md-1 control-label">
<h5>ID</h5>
</div>
<h5>Name</h5>
</div>
<div style="background: #202a29; text-align: center;" class="col-md-1 control-
label">
<h5>Emp ID</h5>
</div>
<h5>Leave Status</h5>
</div>
<div style="background: #202a29; " class="col-md-1 control-label">
<h5>Reason</h5>
</div>
label">
<h5>StartDate</h5>
</div>
label">
<h5>EndDate</h5>
</div>
label">
<h5>Action</h5>
</div>
</div>
</div>
<div class="validation-form" style="margin-bottom: 0px;margin-top: 10px;">

<h2>Accepted Leave</h2>
<div class="col-md-1" style="background-color: #202a29;">
<h5>ID</h5>
</div>
<h5>Name</h5>
</div>
<h5>Leave Type</h5>
</div>
<h5>Start Date</h5>
</div>
<h5>End Date</h5>
</div>
</div>
<div class="row" style="margin-right: 0; margin-left: 0;">

<div class="col-md-1">
<h5>1</h5>
</div>
<h5>Mark Cooper</h5>
</div>
<h5>casual leave</h5>
</div>
<h5>2022-10-12</h5>
</div>
<h5>2022-10-14</h5>
</div>
</div><hr style="margin-bottom: 0px;margin-top: 0px;border-top: 1px solid #eee;">
<h5>2</h5>
</div>
<h5>Jane Cooper</h5>
</div>
<h5>privilege leave</h5>
</div>
<h5>2024-03-22</h5>
</div>
<h5>2024-07-25</h5>
</div>
</div>
<div class="validation-form" style="margin-bottom: 30px;margin-top: 10px;">

<h2>Denied Leave</h2>
<h5>ID</h5>
</div>
<h5>Name</h5>
</div>
<h5>Leave Type</h5>
</div>
<h5>Start Date</h5>
</div>
<h5>End Date</h5>
</div>
</div>

<h5>1</h5>
</div>
<h5>Jane Cooper</h5>
</div>
<h5>sick leave</h5>
</div>
<h5>2024-03-28</h5>
</div>
<h5>2024-03-30</h5>
</div>
</div>
</form>
<script>
}else{
}
});
});
</script>

</div>
</div>
</div>
</a>
</header>
<div class="menu">
<ul id="menu" >

<ul>
Employee</a></li>
View</a></li>
Details</a></li>
-->
</ul>
</li>
</li>
</ul> -->
</li>

<ul>
Employee</a></li>
</ul>
</li> -->

<ul>
<li><a
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
var toggle = true;
if (toggle)
{
}
else
{
}, 400);
}
toggle = !toggle;
});
</script>

</body>
</html>
Change Password
<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
</script>




type='text/css'>


<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
</div>
<ul>
<p>admin admin</p>
<span>admin</span>
</div>
</div>
</a>
</ul>
</li>
</ul>
</div>

</div>

right"></i>Change Password</li>
</ol>
<form method="POST" action="controller/login.php">
<div class="container-fluid" style="margin-bottom: 30px;margin-top: 10px; background:
white;">
<div class="row">
<h2 style="color: #1abc9c;">Change Password</h2><hr>
<label class="control-label">Old Password</label>
</span>
<input type="password" name="oldpass" title="Old Password" placeholder="Old
Password" class="form-control">
</div>
</div>
</div>
<div class="row">
<label class="control-label">New Password</label>
</span>
<input type="password" title="New Password" name="npassword" placeholder="New
Password" class="form-control">
</div>
</div>
</div>
<div class="row">
<label class="control-label">Confirm Password</label>
</span>
<input type="password" name="cpassword" title="Confirm Password"
placeholder="Confirm Password" class="form-control" >
</div>
</div>
</div>
<h4 style="color: #F1C40F;"></h4>
<div class="row">
<div class="col-md-3 form-group">
<button type="submit" name="save" title="Save" class="btn btn-
primary">Save</button>
<button type="reset" class="btn btn-default" title="Reset">Reset</button>
</div>
</div>
</div>
</form>

<script>
}else{
}
});
});
</script>
</div>
</div>
</div>
</a>
</header>
<div class="menu">
<ul id="menu" >

<ul>
Employee</a></li>
View</a></li>
Details</a></li>
-->
</ul>
</li>
</li>

</ul> -->
</li>
<ul>
Employee</a></li>
</ul>
</li> -->

<ul>
<li><a
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
var toggle = true;
if (toggle)
{
}
else
{
}, 400);
}
toggle = !toggle;
});
</script>

</body>
</html>

E011 - Devanshi Chauhan - Lab 9 - ES

Uploaded by

Copyright:

Available Formats

E011 - Devanshi Chauhan - Lab 9 - ES

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E011 - Devanshi Chauhan - Lab 9 - ES

Uploaded by

Copyright:

Available Formats

Lab 9 – Coding the functionalities of the project

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

/* Modal Content (image) */

/* Caption of Modal Image */

/* The Close Button */

/* 100% Image Width on Smaller Screens */

<div class="clearfix"> </div>

<ol class="breadcrumb" style="margin: 10px 0px ! important;">

<li><a href="#"><i class="fa fa-

<li id="menu-academico" ><a

<!-- <li><a href="#"><i class="fa fa-check-square-o

<li><a href="#"><i class="fa fa-

Add Employee Details

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

/* Modal Content (image) */

/* Caption of Modal Image */

/* The Close Button */

/* 100% Image Width on Smaller Screens */

<div class="clearfix"> </div>

<div class="col-md-4 control-label">

<div class="col-md-4 control-label">

<option value="2" > female </option>

<option value="1" > male </option>

<div class="col-md-4 control-label">

<div class="col-md-4 control-label">

<div class="col-md-4 control-label">

<option value="1" > Married </option>

<option value="2" > Unmarried </option>

<div class="col-md-4 control-label">

<div class="col-md-12 control-label">

<div class="col-md-12 control-label">

<input type="text" name="address2" title="Address 2" value="" class="form-

<option value="11" > India </option>

<option value="1" > Philippines </option>

<option value="12" > Singapore </option>

<option value="9" > USA </option>

<div class="col-md-3 control-label">

<div class="col-md-3 control-label">

<div class="col-md-3 control-label">

<div class="col-md-3 control-label">

<option value="1" > active </option>

<option value="2" > inactive </option>

<div class="col-md-3 control-label">

<option value="1" > admin </option>

<option value="2" > admin-hr </option>

<option value="3" > employee </option>

<option value="3" > Fullstack PHP Developer </option>

<option value="1" > HR </option>

<option value="2" > Web Developer </option>

<div class="col-md-3 control-label">

<div class="col-md-3 control-label">

<div class="clearfix"> </div>

var selectedcountry = $('#contryid').val();

var selectedstate = $('#stateid').val();

var selectedcityid = "0";