How to use PHP and Vue to develop an online employee attendance system
The attendance system is one of the important tools for enterprise management. It can help enterprises monitor the attendance of employees in real time. Improve work efficiency and management level. This article will introduce how to use PHP and Vue framework to develop a simple online employee attendance system and provide specific code examples.
1. Environment preparation:
Before you start, you need to install the following software and tools:
2. Create database tables:
In order to store employee information and attendance records, we need to create two database tables: employee table and attendance record table.
3. Back-end development:
Get all employee information:
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$rows[] = $row;
}
}
echo json_encode($rows);
$sql = "INSERT INTO employees (name, department) VALUES ('$name', '$department')";
if ($conn->query($sql) === TRUE) {
echo "New employee added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
Get attendance records:
$sql = "SELECT attendance.* , employees.name FROM attendance INNER JOIN employees ON attendance.employee_id = employees.id";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$rows[] = $row;
}
}
echo json_encode($rows );
$sql = "INSERT INTO attendance (employee_id, clock_in, clock_out) VALUES ('$employee_id', '$clock_in', '$clock_out ')";
if ($conn->query($sql) === TRUE) {
echo "Clock in/out recorded successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
四, Front-end development:
Create a Vue component to display the employee list, add employees and clock in records.
Employee list
{{ employee.name }} - {{ employee.department }}Copy after login
Add employee
Punch-in record
staff
Working hours
Off-duty time
{{ record.name }}
{{ record.clock_in }}
{{ record.clock_out }}
在Vue组件中，发送HTTP请求并获取数据：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
