How to develop an online employee attendance application with PHP and Vue

How to develop an online employee attendance application with PHP and Vue

Abstract: With the rapid development of technology, more and more companies choose to transfer employee attendance systems to online platforms. This article will introduce how to use PHP and Vue, two popular development technologies, to develop an online employee attendance application. We will provide specific code examples to help readers better understand and apply.

1. Environment setup

Before you begin, please make sure your development environment is set up correctly. You need to install a development environment for PHP and Vue, such as XAMPP (for Windows users) or MAMP (for Mac users). At the same time, you also need a database server to store employee attendance data, such as MySQL.

2. Create database

Use a MySQL administrator tool (such as phpMyAdmin) to create a new database to store employee attendance data. Create a database named "attendance", then create a table named "employees" to store employee information, and a table named "attendances" to store employee attendance records. The following is an example of SQL code to create these two tables:

Create employees table:

CREATE TABLE employees (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

Create attendances table:

CREATE TABLE attendances (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    employee_id INT(11) NOT NULL,
    check_in DATETIME NOT NULL,
    check_out DATETIME,
    FOREIGN KEY (employee_id) REFERENCES employees(id)
);

3. Backend Development - PHP

First, we need to create a PHP file to handle the backend logic. We can name this file "api.php". In this file, we will write the code for data interaction with the front-end Vue application through the API. Here is a simple example:

<?php

header('Content-Type: application/json');

// 连接到数据库
$dsn = 'mysql:host=localhost;dbname=attendance';
$username = 'root';
$password = '';

try {
    $db = new PDO($dsn, $username, $password);
} catch (PDOException $e) {
    echo '数据库连接失败: ' . $e->getMessage();
    exit();
}

// 获取所有员工信息
function getEmployees() {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM employees');
    $stmt->execute();
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 添加新的考勤记录
function addAttendance($employeeId, $checkIn) {
    global $db;
    
    $stmt = $db->prepare('INSERT INTO attendances(employee_id, check_in) VALUES(?, ?)');
    $stmt->execute([$employeeId, $checkIn]);
    
    return $db->lastInsertId();
}

// 更新考勤记录
function updateAttendance($attendanceId, $checkOut) {
    global $db;
    
    $stmt = $db->prepare('UPDATE attendances SET check_out = ? WHERE id = ?');
    $stmt->execute([$checkOut, $attendanceId]);
    
    return $stmt->rowCount();
}

// 获取指定员工的考勤记录
function getAttendances($employeeId) {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM attendances WHERE employee_id = ?');
    $stmt->execute([$employeeId]);
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 根据传入的API请求参数调用相应的函数
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    if ($action === 'getEmployees') {
        echo json_encode(getEmployees());
    } else if ($action === 'addAttendance') {
        $employeeId = $_POST['employeeId'];
        $checkIn = $_POST['checkIn'];
        
        echo json_encode(['id' => addAttendance($employeeId, $checkIn)]);
    } else if ($action === 'updateAttendance') {
        $attendanceId = $_POST['attendanceId'];
        $checkOut = $_POST['checkOut'];
        
        echo json_encode(['rowsAffected' => updateAttendance($attendanceId, $checkOut)]);
    } else if ($action === 'getAttendances') {
        $employeeId = $_GET['employeeId'];
        
        echo json_encode(getAttendances($employeeId));
    }
}

In this PHP file, we first connect to the database and define some functions to handle various API requests. Specific logic includes obtaining employee information, adding/updating attendance records, and obtaining attendance records of specified employees.

Here, we only provide some basic example functions, which you can extend and modify according to your actual needs.

4. Front-End Development - Vue

Next, we will use Vue to develop front-end applications. We need to create a Vue instance to render and manage the application's interface and logic. The following is a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>员工考勤应用程序</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1 id="员工列表">员工列表</h1>
    <ul>
      <li v-for="employee in employees" :key="employee.id">
        {{ employee.name }} - {{ employee.department }}
        <button @click="addAttendance(employee.id)">签到</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
        el: "#app",
        data: {
            employees: []
        },
        mounted() {
            this.getEmployees();
        },
        methods: {
            getEmployees() {
                fetch('api.php?action=getEmployees')
                    .then(response => response.json())
                    .then(data => {
                        this.employees = data;
                    });
            },
            addAttendance(employeeId) {
                fetch('api.php?action=addAttendance', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        employeeId: employeeId,
                        checkIn: new Date().toISOString()
                    })
                })
                .then(response => response.json())
                .then(data => {
                    alert(`签到成功，考勤ID: ${data.id}`);
                });
            }
        }
    });
  </script>
</body>
</html>

In this example, we first introduce the Vue JavaScript file. Then, we created a Vue instance, defined a list of employees and two methods to obtain employee information and add attendance records. When the page is loaded, the Vue instance will automatically call the mounted method to obtain employee information and bind them to the employees property. In the list, we use the v-for directive to loop through each employee and add a check-in button for each employee. When the user clicks the sign-in button, the addAttendance method will be triggered to initiate a request to add an attendance record to the backend, and a successful sign-in prompt will be displayed after success.

It should be noted that the API request in this example uses the fetch function to initiate an asynchronous request. You can also use other similar libraries, such as axios.

5. Conclusion

By using PHP and Vue to develop an online employee attendance application, we can implement a simple and practical employee attendance system. In this article, we provide specific code examples to help readers understand the data storage and interaction process. Of course, this is just a basic framework, and you can extend and modify it according to your needs and actual conditions. I hope this article will help you understand how to use PHP and Vue to develop an online employee attendance application.

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