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 구성 요소를 만듭니다.
   

2. 在Vue组件中，发送HTTP请求并获取数据：
   

   저자별 최신 기사

   • NullPointerException은 무엇이며 어떻게 해결합니까?
     2024-10-22 09:46:29
   • 초보자에서 코더까지: C 기초로 시작되는 여정
     2024-10-13 13:53:41
   • PHP로 웹 개발 잠금 해제: 초보자 가이드
     2024-10-12 12:15:51
   • C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
     2024-10-11 22:47:31
   • 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
     2024-10-11 19:36:51
   • 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
     2024-10-11 15:50:41
   • C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
     2024-10-11 15:07:41
   • PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
     2024-10-11 14:21:21
   • Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
     2024-10-11 12:59:11
   • 코딩의 핵심: 초보자를 위한 Python의 힘 활용
     2024-10-11 12:17:31
   최신 이슈

   템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...

   에서 2024-04-06 18:10:25

   0

   2

   513

   로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...

   에서 2024-04-06 14:20:12

   0

   1

   514

   Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...

   에서 2024-04-06 12:43:37

   0

   1

   473

   vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...

   에서 2024-04-06 11:38:56

   0

   1

   510

   vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...

   에서 2024-04-06 11:35:59

   0

   1

   456
   관련 주제

   더>

   • Vue 상위 구성 요소는 하위 구성 요소의 메서드를 호출합니다.
   • vue v-if
   • vue2.0과 3.0의 차이점
   • Vue 구성 요소에 값을 전달하는 방법
   • vue3.0과 2.0의 차이점
   • Vue 공통 지침
   • vue에서 일반적으로 사용되는 지침은 무엇입니까?
   • PHP 파일을 여는 방법