search
HomeBackend DevelopmentPHP TutorialHow 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

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);
}
?>
  1. 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.

  1. Create routes and views

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

  1. 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How do you create and use an interface in PHP?How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PM

The article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.

What is the difference between crypt() and password_hash()?What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PM

The article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.

How can you prevent Cross-Site Scripting (XSS) in PHP?How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PM

Article discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.

What is autoloading in PHP?What is autoloading in PHP?Apr 30, 2025 pm 03:37 PM

Autoloading in PHP automatically loads class files when needed, improving performance by reducing memory use and enhancing code organization. Best practices include using PSR-4 and organizing code effectively.

What are PHP streams?What are PHP streams?Apr 30, 2025 pm 03:36 PM

PHP streams unify handling of resources like files, network sockets, and compression formats via a consistent API, abstracting complexity and enhancing code flexibility and efficiency.

What is the maximum size of a file that can be uploaded using PHP ?What is the maximum size of a file that can be uploaded using PHP ?Apr 30, 2025 pm 03:35 PM

The article discusses managing file upload sizes in PHP, focusing on the default limit of 2MB and how to increase it by modifying php.ini settings.

What is Nullable types in PHP ?What is Nullable types in PHP ?Apr 30, 2025 pm 03:34 PM

The article discusses nullable types in PHP, introduced in PHP 7.1, allowing variables or parameters to be either a specified type or null. It highlights benefits like improved readability, type safety, and explicit intent, and explains how to declar

What is the difference between the unset() and unlink() functions ?What is the difference between the unset() and unlink() functions ?Apr 30, 2025 pm 03:33 PM

The article discusses the differences between unset() and unlink() functions in programming, focusing on their purposes and use cases. Unset() removes variables from memory, while unlink() deletes files from the filesystem. Both are crucial for effec

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment