How to develop an online employee attendance system using PHP and Vue

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:

1. PHP environment: In your development environment, make sure that PHP has been installed , and be able to run PHP scripts.
2. MySQL database: The attendance system needs to use a database to store employee information and attendance records. You need to install MySQL and create a database to store relevant data.
3. Vue.js: Vue.js is a popular JavaScript framework for building user interfaces. You need to introduce Vue.js into your project and understand its basic usage.

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.

1. Employee table structure:
   CREATE TABLE employees (
   id INT AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(100) NOT NULL,
   department VARCHAR(100) NOT NULL
   );
2. Attendance record table structure:
   CREATE TABLE attendance (
   id INT AUTO_INCREMENT PRIMARY KEY,
   employee_id INT NOT NULL,
   clock_in DATETIME NOT NULL,
   clock_out DATETIME,
   FOREIGN KEY (employee_id) REFERENCES employees(id)
   );

3. Back-end development:

1. Create a PHP file As the backend interface, it is named attendance.php.
2. Connect to the database:
   $conn = new mysqli("localhost", "username", "password", "database");
   if ($conn- >connect_error) {
   die("Connection failed: " . $conn->connect_error);
   }

3. 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);

4. Add employees:
   $name = $_POST['name'];
   $department = $_POST['department'];

$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;

}

5. 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 );

6. Clock in:
   $employee_id = $_POST['employee_id'];
   $clock_in = $_POST['clock_in'];
   $clock_out = $_POST['clock_out'];

$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:

1. Create a Vue component to display the employee list, add employees and clock in records.
   

2. 在Vue组件中，发送HTTP请求并获取数据：
   <script><br>export default {<br> data() {<br> return {<br> employees: [],<br> newEmployee: {},<br> records: []<br> };<br> },<br> mounted() {<br> this.getEmployees();<br> this.getRecords();<br> },<br> methods: {<br> getEmployees() {<br> fetch('attendance.php?type=getEmployees')<br> .then(response => response.json())<br> .then(data => {</script>

    this.employees = data;

   });
   },
   addEmployee() {
   fetch('attendance.php?type=addEmployee', {

    method: 'POST',
    body: JSON.stringify(this.newEmployee)

   })
   .then(response => response.text())
   .then(data => {

    alert(data);
    this.getEmployees();

   });
   },
   getRecords() {
   fetch('attendance.php?type=getRecords')
   .then(response => response.json())
   .then(data => {

    this.records = data;

   });
   },
   clockIn() {
   // 发送打卡请求
   },
   clockOut() {
   // 发送打卡请求
   }
   }
   }
   

以上是使用PHP和Vue框架开发在线员工考勤系统的基本步骤和代码示例。希望本文能够为你提供参考和指导，祝你开发成功！

The above is the detailed content of How to develop an online employee attendance system using PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!