How to use PHP and Vue to develop an exception handling mechanism for online employee attendance

How to use PHP and Vue to develop an exception handling mechanism for online employee attendance

1. Introduction
   Employee attendance is one of the important links in enterprise management. The traditional attendance method has many shortcomings, such as errors in attendance data and troublesome manual statistics. With the development of information technology, using PHP and Vue to develop an online employee attendance system has become a more efficient and accurate choice. This article will introduce how to use PHP and Vue to develop an online employee attendance system, and focus on the implementation of the exception handling mechanism.
2. Use PHP to develop the back-end interface
   Before using PHP to develop the back-end interface, we need to design the database table structure first. This article uses MySQL as the database and designs the following tables:
3. Employee table (employee): stores basic information of employees, such as name, job number, etc.
4. Attendance table (attendance): stores employee attendance records, including fields such as date, work time, and off work time.

Next, we use PHP to develop the backend interface. First, we create a file named config.php to configure database connection information. The sample code is as follows:

<?php
$host = 'localhost';  // 数据库主机名
$dbName = 'attendance';  // 数据库名
$username = 'root';  // 数据库用户名
$password = '123456';  // 数据库密码

Then, we create a file named db.php to encapsulate functions for database operations. The sample code is as follows:

<?php
function connect() {
    global $host, $dbName, $username, $password;
    $conn = new mysqli($host, $username, $password, $dbName);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    return $conn;
}

function query($conn, $sql) {
    $result = $conn->query($sql);
    $rows = array();
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }
    }
    return $rows;
}

function insert($conn, $sql) {
    return $conn->query($sql);
}

Next, we create a file named employee.php to provide employee-related interfaces. The sample code is as follows:

<?php
require_once 'config.php';
require_once 'db.php';

function getEmployees() {
    $conn = connect();
    $sql = 'SELECT * FROM employee';
    $rows = query($conn, $sql);
    $conn->close();
    return $rows;
}

$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'GET') {
    echo json_encode(getEmployees());
}

Similarly, we create a file named attendance.php to provide attendance-related interfaces. The sample code is as follows:

<?php
require_once 'config.php';
require_once 'db.php';

function getAttendance($employeeId, $month) {
    $conn = connect();
    $sql = "SELECT * FROM attendance WHERE employee_id = $employeeId AND DATE_FORMAT(date, '%Y-%m') = '$month'";
    $rows = query($conn, $sql);
    $conn->close();
    return $rows;
}

function addAttendance($employeeId, $date, $startTime, $endTime) {
    $conn = connect();
    $sql = "INSERT INTO attendance (employee_id, date, start_time, end_time) VALUES ($employeeId, '$date', '$startTime', '$endTime')";
    $result = insert($conn, $sql);
    $conn->close();
    return $result;
}

$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'GET') {
    $employeeId = $_GET['employee_id'];
    $month = $_GET['month'];
    echo json_encode(getAttendance($employeeId, $month));
} elseif ($method === 'POST') {
    $employeeId = $_POST['employee_id'];
    $date = $_POST['date'];
    $startTime = $_POST['start_time'];
    $endTime = $_POST['end_time'];
    echo json_encode(addAttendance($employeeId, $date, $startTime, $endTime));
}

3. Using Vue to develop the front-end interface
   Before using Vue to develop the front-end interface, we need to install Vue and Axios first. Run the following command in the command line window:

npm install vue axios --save

Next, we create a file named Attendance.vue to display attendance records. The sample code is as follows:

<template>
  <div>
    <h2 id="考勤记录">考勤记录</h2>
    <div v-for="record in records" :key="record.id">
      <p>{{ record.date }}: {{ record.start_time }} - {{ record.end_time }}</p>
      <p v-if="record.exception === 1" style="color: red;">异常</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      records: [],
    };
  },
  mounted() {
    this.getAttendance();
  },
  methods: {
    getAttendance() {
      const employeeId = 1;
      const month = '2021-01';
      axios.get(`http://localhost/attendance.php?employee_id=${employeeId}&month=${month}`)
        .then((response) => {
          this.records = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  font-weight: bold;
}
</style>

4. Implementation of exception handling mechanism
   The exception handling mechanism is a very important part of the online employee attendance system. When uploading attendance data, we need to determine whether the attendance records are abnormal according to certain rules and mark the abnormal records. In the attendance.php file, we can add the following code to implement the exception handling mechanism:

function checkException($startTime, $endTime) {
    $start = strtotime($startTime);
    $end = strtotime($endTime);
    $workStart = strtotime('09:00:00');
    $workEnd = strtotime('18:00:00');
    if ($start > $workStart && $end < $workEnd) {
        return 0;  // 正常
    } else {
        return 1;  // 异常
    }
}

function addAttendance($employeeId, $date, $startTime, $endTime) {
    $exception = checkException($startTime, $endTime);
    $conn = connect();
    $sql = "INSERT INTO attendance (employee_id, date, start_time, end_time, exception) VALUES ($employeeId, '$date', '$startTime', '$endTime', $exception)";
    $result = insert($conn, $sql);
    $conn->close();
    return $result;
}

In the Attendance.vue file, we can display exception information based on the exception mark. The sample code is as follows:

<template>
  <div>
    <h2 id="考勤记录">考勤记录</h2>
    <div v-for="record in records" :key="record.id">
      <p>{{ record.date }}: {{ record.start_time }} - {{ record.end_time }}</p>
      <p v-if="record.exception === 1" style="color: red;">异常</p>
    </div>
  </div>
</template>

At this point, we have completed the implementation of the exception handling mechanism for developing an online employee attendance system using PHP and Vue.

Summary
This article introduces how to use PHP and Vue to develop an online employee attendance system, and focuses on the implementation of the exception handling mechanism. By rationally designing the database table structure, using PHP to develop the back-end interface, and using Vue to develop the front-end interface, we can efficiently implement an online employee attendance system and improve the accuracy and processing efficiency of attendance data. At the same time, through the implementation of the exception handling mechanism, attendance abnormalities can be discovered in time, making it easier for managers to handle and track.

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