How to use PHP and Vue to build an employee attendance management panel

How to use PHP and Vue to build an employee attendance management panel

With the expansion of enterprise scale, employee management and attendance supervision have become important aspects of daily work. In order to improve work efficiency and reduce labor costs, many companies choose to use computer technology to manage employee attendance records. This article will introduce how to use PHP and Vue to build a simple and effective employee attendance management panel.

1. Preparation work

Before starting to build the employee attendance management panel, we need to ensure that the following preparations are in place:

1. Server environment: Make sure that the server has PHP and MySQL installed.
2. Development environment: It is recommended to use an integrated development environment (IDE) such as xampp, wamp, etc., which can facilitate code writing and debugging.
3. Front-end framework: We choose to use Vue as the front-end framework because it is easy to use and has rich functions.
4. Database: We will use MySQL as the database to store employee attendance records.

2. Create database and table structure

Create a database named "attendance" in MySQL and create the following table structure:

Employee table ( employees):

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

Attendance record table (attendance_records):

CREATE TABLE attendance_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  employee_id INT NOT NULL,
  date DATE NOT NULL,
  time_in TIME NOT NULL,
  time_out TIME,
  FOREIGN KEY (employee_id) REFERENCES employees(id)
);

3. Back-end development

1. Connect to the database

In In PHP, we need to use extensions such as mysqli or PDO to connect to the database. The following is a sample code to connect to the MySQL database:

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
?>

2. Create API interface

We need to create many API interfaces to handle the addition, deletion, modification and query operations of employees and attendance records. The following is a sample code to obtain the employee list:

<?php
// 获取员工列表
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $employees = array();

    while($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }

    // 将结果转成JSON格式
    echo json_encode($employees);
} else {
    echo "暂无员工";
}
?>

In a similar way, we can create other API interfaces to handle the addition, deletion, modification and query operations of employees and attendance records.

4. Front-end development

1. Create a Vue project

Execute the following command on the command line to create a Vue project:

vue create attendance-management-panel

Select the default configuration according to the prompts.

2. Create routes and views

Use Vue Router to create routes and views for displaying employee lists, attendance records, etc.

3. Initiate a request

Use axios or other Ajax libraries to initiate an HTTP request to obtain back-end data. The following is a sample code that obtains a list of employees and displays it on the page:

import axios from 'axios';

export default {
    data() {
        return {
            employees: []
        }
    },

    mounted() {
        axios.get('/api/employees')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

As needed, you can create other components to implement the addition, deletion, modification, and query functions of employee attendance records.

5. Deployment and Testing

Package the front-end code and put it in the web directory of the server, and upload the back-end code to the server. Make sure PHP and MySQL are configured correctly on the server.

You can test the function of the employee attendance management panel by accessing the website through a browser.

Conclusion

This article introduces how to use PHP and Vue to build an employee attendance management panel, and provides relevant code examples. Of course, this is just a simple example, and actual applications need to be adjusted and expanded according to specific needs. But I believe that through this example, you already have a certain understanding of how to use PHP and Vue to build an employee attendance management panel. Hope this article helps you!

The above is the detailed content of How to use PHP and Vue to build an employee attendance management panel. For more information, please follow other related articles on the PHP Chinese website!