Bagaimana untuk membangunkan sistem kehadiran pekerja dalam talian menggunakan PHP dan Vue

Cara menggunakan PHP dan Vue untuk membangunkan sistem kehadiran pekerja dalam talian

Sistem kehadiran ialah salah satu alatan penting untuk pengurusan perusahaan. Ia boleh membantu perusahaan memantau kehadiran pekerja dalam masa nyata dan meningkatkan kecekapan kerja dan tahap pengurusan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja PHP dan Vue untuk membangunkan sistem kehadiran pekerja dalam talian yang mudah dan menyediakan contoh kod khusus.

1. Persediaan persekitaran:
Sebelum anda mula, anda perlu memasang perisian dan alatan berikut:

1. Persekitaran PHP: Dalam persekitaran pembangunan anda, pastikan PHP telah dipasang dan boleh menjalankan skrip PHP.
2. Pangkalan data MySQL: Sistem kehadiran perlu menggunakan pangkalan data untuk menyimpan maklumat pekerja dan rekod kehadiran. Anda perlu memasang MySQL dan mencipta pangkalan data untuk menyimpan data yang berkaitan.
3. Vue.js: Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Anda perlu memperkenalkan Vue.js ke dalam projek anda dan memahami penggunaan asasnya.

2. Cipta jadual pangkalan data:
Untuk menyimpan maklumat pekerja dan rekod kehadiran, kita perlu mencipta dua jadual pangkalan data: jadual pekerja dan jadual rekod kehadiran.

1. empless Table Struktur:
   Create Jadual Pekerja (
   id int auto_increment utama utama,
   name varchar (100) tidak null,
   department varchar (100) not null
   ); (
id INT AUTO_INCREMENT PRIMARY KUNCI,
2. employee_id INT NOT NULL,
   clock_in DATETIME NOT NULL,
   clock_out DATETIME,
   FOREIGN KEY (employee_id) RUJUKAN pekerja(id)
   
   
   
   :
;

Buat fail PHP sebagai antara muka bahagian belakang, dinamakan attendance.php.

Sambung ke pangkalan data:
1. $conn = new mysqli("localhost", "username", "password", "database");
2. if ($conn->connect_error) {
   die( "Sambungan gagal: " . ($ sql);
   $rows = array();
   if ($result->num_rows > 0) {
   while($row = $result->fetch_assoc()) {
   

    $rows[] = $row;

}
3. }

   echo json_encode ($rows);
   
   
   Tambah pekerja:
   $name = $_POST['nama'];
   $department = $_POST['department'];

   
   $sql = "INSERT KE DALAM pekerja (nama, jabatan) NILAI ('$nama', '$jabatan')";
   jika ($conn->query($sql) === BENAR) {

   echo "New employee added successfully";

} lain {

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

   
   } . query( $sql);
   $rows = array();
   if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {

 $rows[] = $row;

}
}

echo json_encode($rows);

Jam masuk:

$id_pekerja = $_POST['id_pekerja'];

$clock_in = $_POST['clock_in'];[

= $_clock_POS 'clock_out' ];


$sql = "MASUKKAN KE DALAM kehadiran (id_pekerja, clock_in, clock_out) NILAI ('$employee_id', '$clock_in', '$clock_out')";
if ($conn->query ($sql ) === BENAR) {

echo "Clock in/out recorded successfully";

} lain {

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

}

4. Pembangunan bahagian hadapan:

Buat komponen Vue untuk memaparkan senarai pekerja, menambah pekerja dan mencatat rekod.

在Vue组件中，发送HTTP请求并获取数据：
<script><br>export default {<br> data() {<br> return {<br> employees: [],<br> newEmployee: {},<br> records: []<br> };<br> },<br> mounted() {<br> this.getEmployees();<br> this.getRecords();<br> },<br> methods: {<br> getEmployees() {<br> fetch('attendance.php?type=getEmployees')<br> .then(response => response.json())<br> .then(data => {</script>

 this.employees = data;

});
},
addEmployee() {
fetch('attendance.php?type=addEmployee', {

 method: 'POST',
 body: JSON.stringify(this.newEmployee)

})
.then(response => response.text())
.then(data => {

 alert(data);
 this.getEmployees();

});
},
getRecords() {
fetch('attendance.php?type=getRecords')
.then(response => response.json())
.then(data => {

 this.records = data;

});
},
clockIn() {
// 发送打卡请求
},
clockOut() {
// 发送打卡请求
}
}
}

以上是使用PHP和Vue框架开发在线员工考勤系统的基本步骤和代码示例。希望本文能够为你提供参考和指导，祝你开发成功！

Atas ialah kandungan terperinci Bagaimana untuk membangunkan sistem kehadiran pekerja dalam talian menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!