Scribd
Upload
20 views7 pages

Add Emplopyee

The document is an HTML page for an 'Add Employee' form within a payroll system. It includes a sidebar for navigation, a main content area with a structured form for entering employee details, and JavaScript for dynamically updating project location based on selected project. The form captures various employee information including personal, employment, salary, and emergency contact details.

Uploaded by

Roderick Galasinao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views7 pages

Add Emplopyee

The document is an HTML page for an 'Add Employee' form within a payroll system. It includes a sidebar for navigation, a main content area with a structured form for entering employee details, and JavaScript for dynamically updating project location based on selected project. The form captures various employee information including personal, employment, salary, and emergency contact details.

Uploaded by

Roderick Galasinao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Add Employee</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
min-height: 100vh;
overflow-x: hidden;
}

.sidebar {
width: 250px;
background: linear-gradient(135deg, #007bff, #0056b3);
color: #fff;
height: 100vh;
position: fixed;
padding: 20px;
}

.sidebar h2 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.sidebar ul {
list-style: none;
padding: 0;
}

.sidebar ul li {
margin: 15px 0;
}

.sidebar ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
display: block;
padding: 10px;
border-radius: 5px;
}

.sidebar ul li a:hover {
background-color: #0056b3;
}

.main-content {
margin-left: 250px;
padding: 20px;
width: 100%;
}

.form-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-container h3 {
margin-bottom: 20px;
text-align: center;
}

.form-container .section-title {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: bold;
}

.form-container label {
font-size: 16px;
margin-bottom: 8px;
display: block;
}

.form-container .row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.form-container .column {
flex: 1;
min-width: calc(33.33% - 20px);
}

.form-container input,
.form-container select,
.form-container textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}

#employee_id {
width: calc(100% - 66%);
}
.form-container button {
width: auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}

.form-container button:hover {
background-color: #0056b3;
}

</style>

</head>
<script>
[Link]('DOMContentLoaded', function() {
const projectSelect = [Link]('project_name');
const projectLocationInput = [Link]('project_location');

// Event listener for when the project selection changes


[Link]('change', function() {
const selectedOption =
[Link][[Link]];
const projectLocation = [Link]('data-location');

// Update the project location input field with the selected project
location
[Link] = projectLocation;
});
});
</script>
<body>
<!-- Sidebar -->
<div class="sidebar">
<h2>Payroll System</h2>
<ul>
<li><a href="[Link]">Dashboard</a></li>
<li><a href="employee_list.php">Employee List</a></li>
<li><a href="#">Payroll List</a></li>
<li><a href="department_list.php">Department Lists</a></li>
<li><a href="position_list.php">Position Lists</a></li>
<li><a href="allowance_list.php">Allowance Lists</a></li>
<li><a href="deduction_list.php">Deduction Lists</a></li>
<li><a href="[Link]">Project Lists</a></li>
<li><a href="attendance_list.php">Attendance</a></li>
<li><a href="list_users.php">Admin Account Lists</a></li>
<li><a href="[Link]">Logout</a></li>
</ul>
</div>

<!-- Main Content -->


<div class="main-content">
<div class="form-container">
<h3>Add Employee</h3>
<form action="save_employee.php" method="POST">
<!-- Employee ID Section -->
<div class="section-title">Employee ID</div>
<div class="row">
<div class="column">
<label for="employee_id">Employee ID:</label>
<input type="text" id="employee_id" name="employee_id"
required>
</div>
</div>

<!-- Personal Information -->


<div class="section-title">Personal Information</div>
<div class="row">
<div class="column">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"
required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone"
required>

</div>
<div class="column">
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name"
required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob">

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="column">
<label for="middle_name">Middle Name/Initial:</label>
<input type="text" id="middle_name" name="middle_name"
required>

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
</div>
</div>

<!-- Employment Information -->


<div class="section-title">Employment Information</div>
<div class="row">
<div class="column">
<label for="date_of_hire">Date of Hiring:</label>
<input type="date" id="date_of_hire" name="date_of_hire" >

<label for="position">Position/Designation:</label>
<input type="text" id="position" name="position" required>

<label for="department">Department:</label>
<!-- <input type="text" id="department" name="department"
required> -->
<select id="department" name="department"
required>
<?php
// Connect to the database
$conn = new mysqli('localhost', 'root', '',
'payroll_system');

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Query the departments


$sql = "SELECT * FROM departments";
$result = $conn->query($sql);

// Loop through and display the departments in the


dropdown
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row['id'] . "'>" .
$row['department_name'] . "</option>";
}
} else {
echo "<option value=''>No departments
found</option>";
}

// Close connection
$conn->close();
?>
</select>

</div>
<div class="column">
<label for="project_name">Project Name:</label>
<!-- <input type="text" id="project_name"
name="project_name"> -->
<select type="text" id="project_name"
name="project_name" required>
<?php
// Connect to the database
$conn = new mysqli('localhost', 'root', '', 'payroll_system');

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Query the projects


$sql = "SELECT * FROM projects";
$result = $conn->query($sql);

// Loop through and display the projects in the dropdown


if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row['id'] . "' data-location='" .
$row['project_location'] . "'>" . $row['project_name'] . "</option>";
}
} else {
echo "<option value=''>No Project found</option>";
}

// Close connection
$conn->close();
?>
</select>

<label for="project_location">Project Location:</label>


<input type="text" id="project_location"
name="project_location" readonly>
</div>
<div class="column">
<label for="employment_status">Employment Status:</label>
<select name="employment_status" id="employment_status">
<option value="Full-time">Full-time</option>
<option value="Part-time">Part-time</option>
<option value="Contract">Contract</option>
</select>

<label for="supervisor">Supervisor/Manager:</label>
<input type="text" id="supervisor" name="supervisor">
</div>
</div>

<!-- Salary and Compensation -->


<div class="section-title">Salary and Compensation</div>
<div class="row">
<div class="column">
<label for="salary">Base Salary/Hourly Rate:</label>
<input type="number" id="salary" name="salary" required>

<label for="overtime_rate">Overtime Rate:</label>


<input type="number" id="overtime_rate"
name="overtime_rate">
</div>
<div class="column">
<label for="bonus_eligibility">Bonus Eligibility:</label>
<input type="checkbox" name="bonus_eligibility"
value="Yes"> Eligible for Bonus
</div>
<div class="column">
<label for="salary_frequency">Salary Frequency:</label>
<select name="salary_frequency" id="salary_frequency">
<option value="Weekly">Weekly</option>
<option value="Bi-weekly">Bi-weekly</option>
<option value="Monthly">Monthly</option>
</select>
<label for="bank_account">Bank Account Details:</label>
<input type="text" id="bank_account" name="bank_account">
</div>
</div>

<!-- Emergency Information -->


<div class="section-title">Emergency Information</div>
<div class="row">
<div class="column">
<label for="emergency_contact_name">Emergency Contact
Name:</label>
<input type="text" id="emergency_contact_name"
name="emergency_contact_name">
</div>
<div class="column">
<label for="relationship">Relationship:</label>
<input type="text" id="relationship" name="relationship">
</div>
<div class="column">
<label for="emergency_contact_phone">Emergency Contact
Phone:</label>
<input type="text" id="emergency_contact_phone"
name="emergency_contact_phone">
</div>
</div>

<!-- Submit Button -->


<button type="submit">Save Employee</button>
</form>
</div>
</div>
</body>
</html>

You might also like