简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Backend Development > PHP Tutorial > body text

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

WBOY
Release： 2023-09-25 14:02:01
Original
721 people have browsed it

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;
    Copy after login
    Copy after login

    }
    }
    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";
Copy after login

} else {

echo "Error: " . $sql . "<br>" . $conn->error;
Copy after login
Copy after login

}

  1. 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;
    Copy after login
    Copy after login

    }
    }
    echo json_encode($rows );

  2. 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";
Copy after login

} else {

echo "Error: " . $sql . "<br>" . $conn->error;
Copy after login
Copy after login

}

四, Front-end development:

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

  2. 在Vue组件中，发送HTTP请求并获取数据：

    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！