PHP와 Vue를 사용하여 온라인 직원 출석 입력 인터페이스를 구축하는 방법

PHP와 Vue를 사용하여 온라인 직원 출석 입력 인터페이스를 구축하는 방법

현대 기업에서 직원 출석은 관리자가 직면하고 해결해야 하는 문제입니다. 기술의 발달로 전통적인 종이출석은 점차 전자출결 시스템으로 대체되었습니다. 온라인 직원 출석 입력 인터페이스를 구축하는 것은 관리자가 직원의 출석을 기록하고 통계 분석을 수행할 수 있는 매우 실용적인 방법입니다. 이 기사에서는 PHP와 Vue를 사용하여 온라인 입력 인터페이스를 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

먼저 PHP 및 Vue 운영 환경이 올바르게 설치되었는지 확인하세요. PHP는 서버 측 스크립팅 언어인 반면 Vue는 사용자 인터페이스 구축을 위한 도구를 제공하는 널리 사용되는 JavaScript 프레임워크입니다.

2. 데이터베이스 만들기

먼저 "attendance"라는 데이터베이스를 만들고 그 안에 "employees"라는 테이블을 만들어야 합니다. 테이블에는 사원번호, 이름 등 사원의 기본 정보와 출석 데이터가 포함됩니다. 구체적인 테이블 구조는 다음과 같습니다.

CREATE TABLE employees (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  emp_id INT(11) UNSIGNED,
  name VARCHAR(50),
  attendance_date DATE,
  time_in TIME,
  time_out TIME
);

3. 백엔드 개발

우리는 백엔드 로직을 처리하기 위해 PHP를 사용합니다. 먼저 "index.php"라는 파일을 만들고 다음 코드를 추가합니다.

<?php
 
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$host = "localhost";
$db_name = "attendance";
$username = "root";
$password = "";

$conn = new PDO("mysql:host=".$host.";dbname=".$db_name, $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$data = json_decode(file_get_contents("php://input"));

$emp_id = $data->emp_id;
$name = $data->name;
$attendance_date = $data->attendance_date;
$time_in = $data->time_in;
$time_out = $data->time_out;

$query = "INSERT INTO employees (emp_id, name, attendance_date, time_in, time_out) VALUES (:emp_id, :name, :attendance_date, :time_in, :time_out)";
$stmt = $conn->prepare($query);
$stmt->bindParam(":emp_id", $emp_id);
$stmt->bindParam(":name", $name);
$stmt->bindParam(":attendance_date", $attendance_date);
$stmt->bindParam(":time_in", $time_in);
$stmt->bindParam(":time_out", $time_out);

if($stmt->execute()){
    http_response_code(201);
    echo json_encode(array("message" => "Attendance record was created."));
}
else{
    http_response_code(503);
    echo json_encode(array("message" => "Unable to create attendance record."));
}
?>

위 코드는 먼저 도메인 간 요청을 허용하도록 응답 헤더를 설정합니다. 그런 다음 데이터베이스에 연결하고 수신된 데이터를 JSON 형식으로 구문 분석한 후 직원 테이블에 삽입합니다.

4. 프론트엔드 개발

프론트엔드 부분에서는 Vue를 사용하여 사용자 인터페이스를 구축합니다. Vue CLI를 사용하여 신속하게 프로젝트를 생성하고 axios 플러그인을 터미널에서 실행할 수 있습니다:

vue create attendance
cd attendance
npm install axios

다음으로 src/App.vue 파일을 수정하고 다음 코드를 추가해야 합니다:

<template>
  <div id="app">
    <h1>员工考勤录入</h1>

    <form @submit.prevent="submit">
      <label for="emp_id">员工编号:</label>
      <input type="text" v-model="emp_id"> <br>

      <label for="name">员工姓名:</label>
      <input type="text" v-model="name"> <br>

      <label for="attendance_date">考勤日期:</label>
      <input type="date" v-model="attendance_date"> <br>

      <label for="time_in">签到时间:</label>
      <input type="time" v-model="time_in"> <br>

      <label for="time_out">签退时间:</label>
      <input type="time" v-model="time_out"> <br>

      <button type="submit">提交</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      emp_id: '',
      name: '',
      attendance_date: '',
      time_in: '',
      time_out: '',
      message: ''
    }
  },
  methods: {
    submit() {
      axios.post('http://localhost/index.php', {
        emp_id: this.emp_id,
        name: this.name,
        attendance_date: this.attendance_date,
        time_in: this.time_in,
        time_out: this.time_out
      })
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          this.message = error.response.data.message
        })
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

위 코드는 직원번호, 이름, 출석일, 체크인 시간, 체크아웃 시간 등의 필드를 포함하는 간단한 양식을 생성합니다. 제출 버튼을 클릭하면 POST 요청이 axios를 통해 백엔드의 index.php 파일로 전송됩니다. 응답을 받은 후 해당 프롬프트 정보가 인터페이스에 표시됩니다.

5. 실행 및 테스트

프런트 엔드 페이지를 시작하려면 터미널에서 다음 명령을 실행하세요.

npm run serve

동시에 백엔드 파일 index.php를 루트 디렉터리에 배치해야 합니다. Apache 또는 Nginx 서버. 웹 서버와 MySQL 서버를 시작했는지 확인하십시오.

http://localhost:8080에 접속하시면 간단한 출석입력 인터페이스를 보실 수 있습니다. 양식을 작성하고 제출을 클릭하면 해당 출석 기록이 데이터베이스에 저장됩니다.

요약

이 글에서는 PHP와 Vue를 사용하여 온라인 직원 출석 입력 인터페이스를 구축하는 방법을 소개합니다. 기본 직원 정보와 출석 데이터가 포함된 테이블을 만들고, PHP를 사용하여 백엔드 로직을 처리하고, Vue를 사용하여 사용자 인터페이스를 구축했습니다. 이 인터페이스를 통해 관리자는 직원 출석 기록을 쉽게 입력할 수 있습니다. 이 예제가 독자들이 웹 개발에 PHP와 Vue를 사용하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 PHP와 Vue를 사용하여 온라인 직원 출석 입력 인터페이스를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!