How to use PHP and Vue to develop online employee attendance punch record query

How to use PHP and Vue to develop online punch-in record query for employee attendance

In modern enterprises, employee attendance management is a very important task. Traditional manual records are error-prone and inconvenient for query and statistics. With the powerful functions of PHP and Vue, we can develop an online employee attendance punch record query system, making attendance management more efficient, convenient and accurate.

1. Project preparation
Before starting, we need to prepare the following development environment and tools:

• A PHP development environment (such as XAMPP)
• A text editor (such as Sublime Text, Visual Studio Code, etc.)
• A MySQL database
• Vue.js development environment (you can use Vue CLI)

2. Database design
We need to create a MySQL database to store employee information and punch-in records. Design a database named "attendance_management", containing two tables: employees and attendance. The employees table is used to store basic information of employees, including fields: id (auto-incrementing primary key), name (employee name), department (department to which they belong), etc. The attendance table is used to store attendance records, including fields: id (auto-increment primary key), employee_id (employee id), check_in_time (clock in time), check_out_time (clock in time), etc.

3. Backend development

1. Create a project folder named "attendance_management".
2. Create a folder named "backend" under the project folder to store background-related code.
3. Create a folder named "config" under the backend folder to store the configuration file.
4. Create a folder named "api" under the backend folder to store API-related code.
5. Create a file named "database.php" in the config folder to configure database connection information.

return [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

6. Create a name under the api folder The file "employees.php" is used to handle employee-related API requests.

require_once '../config/database.php';

class Employees {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?> ;

7. Create a file named "attendance.php" in the api folder to handle attendance-related API requests.

require_once '../config/database.php';

class Attendance {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?> ;

4. Front-end development

1. Open the command line in the project folder and execute the following command to install Vue CLI (you need to ensure that Node.js is installed):

npm install -g @vue/cli

2. Execute the following command in the project folder to create a Vue project named "frontend":

vue create frontend

3. Enter the frontend folder and execute the following command to install Vue Router and Axios:

cd frontend
npm install vue-router axios

4. Create a folder named "components" in the frontend/src directory to store Vue components.
5. Create a file named "Attendance.vue" under the components folder to display attendance records.

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script><br>export default {</script>

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

};

6. Add routing configuration in the frontend/src/router/index.js file.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Attendance from '../components/Attendance.vue';

Vue.use(VueRouter);

const routes = [

{
    path: '/',
    name: 'Attendance',
    component: Attendance
}

];

const router = new VueRouter({

mode: 'history',
base: process.env.BASE_URL,
routes

});

export default router;

5. Run the project

1. First start the PHP development environment (such as XAMPP) and ensure that the database connection is normal.
2. Create a file named ".htaccess" in the backend folder to configure URL rewriting.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

3. Execute the following command in the frontend folder to run the Vue project:

npm run serve

4. Open the browser and visit http:/ /localhost:8080, you can see the employee attendance record interface.
5. After selecting an employee, the page will call the backend API based on the employee's ID to obtain the employee's punch-in record and display it in the table.

Through the above development steps, we successfully implemented an online employee attendance check-in record query system developed using PHP and Vue. Users can view their attendance records by selecting employees, which not only improves the efficiency of attendance management but also reduces the occurrence of human errors. At the same time, this project also shows us the basic steps and technical points of how to combine PHP and Vue for full-stack development. I hope this article is helpful to you and I wish you good luck with your programming!

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