<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script>
function script(){
this.initialize = function(){
this.registerEvents();
};
this.registerEvents = function(){
document.addEventListener('click', function(e){
targetElement = e.target;
classList = targetElement.classList;
if(classList.contains('deleteUser')) {
e.preventDefault();
userid = targetElement.dataset.userid;
fname = targetElement.dataset.fname;
lname = targetElement.dataset.lname;
fullname = fname + ' ' + lname;
if (window.confirm('Are You Sure To Delete '+ fullname +'?')) {
$.ajax({
method: 'POST',
data: {
user_id: userid,
f_name: fname,
l_name: lname
},
url: 'database/delete-user.php',
dataType: 'json',
success: function(data){
if(data.success) {
if(window.confirm(data.message)){
location.reload();
}
}else window.alert(data.message);
}
})
} else {
console.log('will not delete');
}
}
if(classList.contains('updateUser')){
e.preventDefault();
userId = targetElement.dataset.userid;
firstName = targetElement.closest('tr').querySelector('td.firstName').innerHTML;
lastName = targetElement.closest('tr').querySelector('td.lastName').innerHTML;
userName = targetElement.closest('tr').querySelector('td.email').innerHTML;
}
});
}
}
var script = new script;
script.initialize();
</script>
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
body#loginBody{
background: url('../images/login-background.jpg') no-repeat center center;
background-size: cover;
}
body{
font-family: arial;
}
div.loginHeader{
text-align: center;
}
div.loginHeader{
margin-bottom: 150px;
}
div.loginHeader h1{
font-size: 100px;
color: darkviolet;
padding: 0px;
margin: 0px;
}
div.loginHeader p{
color: aqua;
font-size: 50px;
margin: 0px;
display: inline-block;
text-transform: uppercase;
}
div.loginHeader p:after{
content: '';
display: block;
height: 5px;
background: aqua;
margin: 0 auto;
}
div.loginBody form{
margin: 0 auto;
width: 450px;
background: rgba(0, 0, 0,.5);
padding: 50px;
border: 5px solid #fff;
border-radius: 8px;
}
div.loginInputsContainer{
margin-top:20px;
}
div.loginInputsContainer label{
display: block;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
color: #fff;
}
div.loginInputsContainer input{
height: 30px;
width: 100%;
border: 2px solid aqua;
font-size: 20px;
padding: 5px;
text-align: center;
font-style: italic;
}
div.loginButtonContainer{
margin-top: 40px;
text-align: center;
}
div.loginButtonContainer button{
font-size:20px;
padding: 10px 40px;
background: aqua;
border: none;
color: yellow;
}
/*bodystyling*/
div.header{
width:100%;
background: aqua;
padding: 10px 0px;
text-align: right;
}
div.header a{
font-size: 20px;
color: #fff;
padding: 5px 10px;
text-decoration: none;
border: 2px solid transparent;
border-bottom: 2px solid #fff;
}
div.header a:hover{
border: 5px solid #fff;
border-radius: 5px;
}
div.banner{
background: url('../images/banner.jpg') no-repeat center center fixed;
background-size: cover;
padding-top: 100px;
padding-bottom: 100px;
height: 80vh;
}
div.homepagecontainer{
width:100%;
max-width: 1000px;
margin: 0 auto;
}
div.bannerheader h1{
font-size: 100px;
color: aqua;
line-height: 100%;
}
div.bannerheader p{
font-size: 40px;
color: aqua;
text-transform: uppercase;
line-height: 100%;
}
p.bannertagline {
margin-top: 20px;
font-size: 25px;
color:#fff;
}
div.bannericons{
margin-top: 150px;
}
div.bannericons a{
font-size: 23px;
margin-left: 40px;
padding: 7px 15px;
background: rgba(0, 0, 0, 0.5);
color: #868485;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
}
div.bannericons a:first-child{
margin-left: 0px;
}
div.bannericons a:hover{
color: #fff;
font-size: 25px;
background: aqua;
transition: .5s all;
}
/*icons styling*/
div.homepagefeatures{
display: flex;
flex-direction: row;
padding: 50px 0px;
}
div.homepagefeature{
padding: 10px 20px;
text-align: center;
width: 33.33%;
}
div.homepagefeature:hover{
border-top: 2px solid aqua;
border-bottom: 2px solid aqua;
transition: 0.5s all;
}
div.homepagefeature span.featureicon{
height: 80px;
width: 80px;
display: inline-block;
font-size: 50px;
background: #f685a1;
color: #fff;
padding-top: 5px;
border-radius: 50%;
margin-bottom: 20px;
}
div.homepagefeature h3.featuretitle{
margin-bottom: 20px;
font-size: 23px;
}
div.homepagefeature p.featurediscription{
color: 848484;
font-size: 18px;
}
div.hoempagenotified{
background: #e3e3e3;
padding: 80px 0px;
}
div.homepagenotifiescontainer{
display: flex;
flex-direction: row;
}
div.emailform h3{
font-size: 25px;
}
div.emailform{
width: 40%;
}
div.video{
width: 60% ;
text-align: center;
}
div.hoempagenotified h3{
margin-bottom: 20px;
}
div.hoempagenotified p{
color: #848484;
line-height: 200%;
margin-bottom: 30px;
}
div.formcontainer{
width: 80%;
position: relative;
}
div.formcontainer input{
width: 100%;
padding: 15px 10px;
border-radius: 15px;
border: none;
}
div.formcontainer input:focus{
outline: none;
}
div.formcontainer button{
position: absolute;
right: 0px;
top: 0px;
height: 100%;
font-size: 22px;
padding: 0px 10px;
background: aqua;
border: none;
color: #fff;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.vedio{
width: 80%;
height: 100%;
/*the footer*/
}
div.socials{
text-align: center;
padding: 60px 0 40px 0px;
}
h3.socialheader{
font-size: 30px;
}
p.socialtext{
margin-top: 20px;
margin-bottom: 25px;
color: #848484;
font-size: 20px;
}
div.socialiconscontainer a{
font-size: 23px;
height: 50px;
width: 50px;
padding-top: 7px ;
display: inline-block;
background: #d4d4d4;
border-radius: 50%;
color: #fff;
margin-left: 20px;
}
div.socialiconscontainer a:hover{
background: aqua;
transition: 0.3s all;
}
div.footer{
background: #e3e3e3;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
div.footer a{
color: #848484;
margin-left: 30px;
text-decoration: none;
}
div.footer a:hover{
font-weight: bold;
color: aqua;
transition: 0.5s all;
}
/*DASHBOARD STYLE*/
#dashboardmaincontainer{
display: flex;
flex-direction: row;
}
div.dashboard_sidebar{
width:20%;
background: black;
height: 100vh;
}
div.dashboard_content_container{
width: 100%;
height: 100vh;
background: #FFE808;
}
h3.dashboard_logo{
color: darkviolet;
font-size: 30px;
text-align: center;
}
div.dashboard_sidebar_user{
text-align: center;
position: relative;
padding-bottom: 20px;
border-bottom: 1px solid #fff;
}
div.dashboard_sidebar_user img{
width: 40px;
display: inline-block;
border-radius: 50%;
border: 2px solid #323232;
margin-right: 5px;
vertical-align: middle;
}
div.dashboard_sidebar_user span{
top: 20%;
font-size: 18px;
text-transform: uppercase;
color: darkviolet;
display: inline-block;
}
ul.dashboard_menu_lists{
padding-left: 0px;
margin-top: 20px;
}
ul.dashboard_menu_lists li{
padding: 15px 10px;
text-transform: uppercase;
}
ul.dashboard_menu_lists li a{
text-decoration: none;
color: darkviolet;
font-size: 30px;
}
ul.dashboard_menu_lists li a i{
font-size: 30px;
}
ul.dashboard_menu_lists li.menuActive{
display: block;
background: #EFE904;
}
ul.dashboard_menu_lists li:hover{
background: #FFE808;
transition: 0.50s all;
}
div.dashboard_topNav{
background: gold;
padding: 20px;
}
div.dashboard_topNav a{
color: black;
font-size: 18px;
text-decoration: none;
}
a#logoutBtn{
float: right;
}
div.dashboard_content{
padding: 50px 10px 10px 10px;
}
div.dashboard_content_main{
background: #cecfd7;
min-height: 650px;
height: 100%;
}
div#Errormessage{
background: #fff;
text-align: center;
color: red;
font-size: 20px;
padding: 11px;
}
form::after{
content: '';
clear: both;
display: block;
}
form.appform{
width: 50%;
margin: 0 auto;
padding: 10px;
border: 6px solid #FFE808;
border-radius: 5px;
background: darkviolet;
}
form label{
font-weight: bold;
font-weight: 800%;
text-transform: uppercase;
}
form input.appforminput{
width: 100%;
height: 33px;
border: 1px solid black;
border-radius: 5px;
}
div.appforminputcontainer{
margin-bottom: 15px;
}
div#useraddformcontainer{
padding-top: 100px;
}
button.appbtn{
background: #ffd700;
border: 2px solid darkred;
text-transform: uppercase;
font-style: oblique;
font-weight: bold;
padding: 10px;
margin-top: 20px;
float: right;
}
p.responsemessage{
font-size: 18px;
text-align: center;
margin-top: 33px;
font-weight: bold;
padding: 20px;
}
p.responsemessage__error{
background: red;
}
p.responsemessage__success{
background: #ffd700;
}
/* User Add Page */
div.row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
div.column{
width: 100%;
padding: 0px 10px;
}
div.column-5{
width: 41.67%;
}
div.column-7{
width: 58.33%;
}
h1.sectionheader{
font-size: 21px;
color: black;
border-bottom: 3px solid #ffd700;
padding-bottom: 11px;
padding: 10px;
border-left: 8px solid #ffd700;
margin-bottom: 15px;
}
table,th, td{
border: 1px solid black;
border-collapse: collapse;
font-size: 15px;
}
table{
width: 100%;
}
table th{
font-size: 12px;
text-transform: uppercase;
text-align: center;
background: #f4f6f9 ;
}
table td{
font-size: 13px;
text-align: center;
padding: 5px;
}
p.usercount{
text-align: right;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
color: black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?php session_start(); ?>
<?php
if (!isset($_SESSION['user'])) header('location: login.php');
$_SESSION['table'] = 'users';
$user = $_SESSION['user'];
$users = include('database/show-users.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard - Assure ERP System</title>
<link rel="stylesheet" type="text/css" href="css/login.css?v=<? time(); ?>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="dashboardmaincontainer">
<?php include('partials/app-sidebar.php')?>
<div class="dashboard_content_container" id="dashboard_content_container">
<?php include('partials/app-topnav.php')?>
<div id="dashboard_content">
<div class="dashboard_content_main">
<div class="row">
<div class="column column-5">
<h1 class="sectionheader"><i class="fa fa-plus"></i> Insert User</h1>
<div id="useraddformcontainer">
<form action="database/user-add.php" method="POST" class="appform">
<div class="appforminputcontainer">
<label for="first_name">first name</label>
<input type="text" class="appforminput" id="first_name" name="first_name" />
</div>
<div class="appforminputcontainer">
<label for="last_name">last name</label>
<input type="text" class="appforminput" id="last_name" name="last_name" />
</div>
<div class="appforminputcontainer">
<label for="email">Email</label>
<input type="text" class="appforminput" id="email" name="email" />
</div>
<div class="appforminputcontainer">
<label for="password">Password</label>
<input type="password" class="appforminput" id="password" name="password" />
</div>
<button type="submit" class="appbtn"><i class="fa fa-plus"></i>add user</button>
</form>
<?php if(isset($_SESSION['response'])) {
$response_message = $_SESSION['response']['message'];
$is_success = $_SESSION['response']['success'];
?>
<div class="responsemessage">
<p class="responsemessage <?= $is_success ? 'responsemessage__success' : 'responsemessage__error'?>">
<?= $response_message ?>
</p>
</div>
<?php unset($_SESSION['response']); }?>
</div>
</div>
<div class="column column-7">
<h1 class="sectionheader"><i class="fa fa-plus"></i> List of Users</h1>
<div class="section_content">
<div class="users">
<table>
<thead>
<tr>
<td>#</td>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Created At</th>
<th>Updated At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $index => $user){?>
<tr>
<td><?= $index + 1?></td>
<td class="firstName"><?= $user['first_name']?></td>
<td class="lastName"><?= $user['last_name']?></td>
<td class="userName"><?= $user['username']?></td>
<td><?= date('M d, Y @ h:i:s A', strtotime($user['created_at'])) ?></td>
<td><?= date('M d, Y @ h:i:s A', strtotime($user['updated_at'])) ?></td>
<td>
<a href="" class="updateUser" data-userid="<?= $user['id'] ?>" > <i class="fa fa-pencil"></i> Edit</a>
<a href="" class="deleteUser" data-userid="<?= $user['id'] ?>" data-fname="<?= $user['first_name'] ?>" data-lname="<?= $user['last_name'] ?>" > <i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
<?php }?>
</tbody>
</table>
<p class="usercount"><?= count($users)?> Users</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我是一名优秀的程序员,十分优秀!