如何使用PHP和Vue開發線上員工考勤系統

如何使用PHP和Vue開發線上員工考勤系統

考勤系統是企業管理的重要工具之一，它可以幫助企業即時監控員工的出勤情況，提高工作效率和管理水準。本文將介紹如何使用PHP和Vue框架來開發一個簡單的線上員工考勤系統，並提供具體的程式碼範例。

一、環境準備：
在開始之前，你需要安裝以下軟體和工具：

1. PHP環境：在你的開發環境中，確保已經安裝了PHP ，並且能夠運行PHP腳本。
2. MySQL資料庫：考勤系統需要使用資料庫來儲存員工的資訊和考勤記錄。你需要安裝MySQL並建立一個資料庫來儲存相關的資料。
3. Vue.js：Vue.js是一個流行的JavaScript框架，用來建立使用者介面。你需要在專案中引入Vue.js，並且了解其基本用法。

二、建立資料庫表：
為了儲存員工資訊和考勤記錄，我們需要建立兩個資料庫表：員工表和考勤記錄表。

1. 員工表結構：
   CREATE TABLE employees (
   id ​​INT AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(100) NOT NULL,
   department VARCHAR(100) NOT NULL
   );
2. 考勤記錄表結構：
   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)
   );

三、後端開發：

1. #建立一個PHP檔案作為後端接口，命名為attendance.php。
2. 連接資料庫：
   $conn = new mysqli("localhost", "username", "password", "database");
   if ($conn- >connect_error) {
   die("Connection failed: " . $conn->connect_error);
   }

3. 取得所有員工資訊：
   $sql = "SELECT * FROM employees";
   $result = $conn->query($sql);
   $rows = array();
   if ($result->num_rows > 0) {
   while($row = $result->fetch_assoc()) {

    $rows[] = $row;

   }
   }
   echo json_encode($rows);

4. #新增員工：
   $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";

} else {

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

}

5. #取得考勤記錄：
   $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;

   }

   #}
   echo json_encode($rows );
   

打卡：
6. $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";

} else {

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

}

#四、前端開發：

1. 建立一個Vue元件用於顯示員工清單、新增員工和打卡記錄。

以上是如何使用PHP和Vue開發線上員工考勤系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！