


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.
- 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.
- 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) );
- 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.
- 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.
- 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In this chapter, we will understand the Environment Variables, General Configuration, Database Configuration and Email Configuration in CakePHP.

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

To work with date and time in cakephp4, we are going to make use of the available FrozenTime class.

To work on file upload we are going to use the form helper. Here, is an example for file upload.

In this chapter, we are going to learn the following topics related to routing ?

CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu

Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c

Validator can be created by adding the following two lines in the controller.
