PHP와 Vue를 사용하여 온라인 직원 출석 시스템을 개발하는 방법

PHP와 Vue를 사용하여 온라인 직원 출석 시스템을 개발하는 방법

출석 시스템은 기업이 직원 출석을 실시간으로 모니터링하고 업무 효율성과 관리 수준을 향상시키는 데 도움이 되는 중요한 도구 중 하나입니다. 이 기사에서는 PHP 및 Vue 프레임워크를 사용하여 간단한 온라인 직원 출석 시스템을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 환경 준비:
시작하기 전에 다음 소프트웨어와 도구를 설치해야 합니다.

1. PHP 환경: 개발 환경에서 PHP가 설치되어 있고 PHP 스크립트를 실행할 수 있는지 확인하세요.
2. MySQL 데이터베이스: 출석 시스템은 직원 정보 및 출석 기록을 저장하기 위해 데이터베이스를 사용해야 합니다. MySQL을 설치하고 관련 데이터를 저장할 데이터베이스를 생성해야 합니다.
3. Vue.js: Vue.js는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 프레임워크입니다. 프로젝트에 Vue.js를 도입하고 기본 사용법을 이해해야 합니다.

2. 데이터베이스 테이블 생성:
직원 정보와 근태 기록을 저장하려면 직원 테이블과 근태 기록 테이블이라는 두 개의 데이터베이스 테이블을 생성해야 합니다.

1. 직원 테이블 구조:
   CREATE TABLE 직원 (
   id INT AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(100) NOT NULL,
   department VARCHAR(100) NOT NULL
   );
2. 출석 기록 테이블 구조:
   CREATE TABLE 출석 (int int auto_increment 기본 키,
   employee_id int null,
   clock_in datetime null,
   clock_out datetime,
   clock_out dateTime,
   foreign key (Employee_id) 참조 직원 (ID)
   

3. 백 엔드 개발 :

1. 출석.php라는 이름의 백엔드 인터페이스로 PHP 파일을 만듭니다.
2. 데이터베이스에 연결:
   $conn = new mysqli("localhost", "username", "password", "database");
   if ($conn->connect_error) {
   die( "연결 실패: " . $conn->connect_error);
   }

3. 모든 직원 정보 가져오기:
   $sql = "SELECT * FROM 직원";
   $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 직원(이름, 부서) VALUES ('$name', '$department')";
if ($conn->query($sql) === TRUE) {

echo "New employee added successfully";

} else {

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

}

5. 출석 기록 가져오기:
   $sql = "SELECT 출석.*, 직원.이름 FROM 출석 INNER JOIN 직원 ON Attention.employee_id = 직원.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 = "출석에 삽입 (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;

}

4. 프런트 엔드 개발:

1. 직원 목록 표시, 직원 추가 및 기록 기록을 위한 Vue 구성 요소를 만듭니다.
   

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