PHP와 Vue를 사용하여 온라인 직원 출석 시스템을 개발하는 방법-PHP 튜토리얼-php.cn

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

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

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

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

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

직원 테이블 구조:
CREATE TABLE 직원 (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
);
출석 기록 테이블 구조:
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. 백 엔드 개발 :

출석.php라는 이름의 백엔드 인터페이스로 PHP 파일을 만듭니다.
데이터베이스에 연결:
$conn = new mysqli("localhost", "username", "password", "database");
if ($conn->connect_error) {
die( "연결 실패: " . $conn->connect_error);
}
모든 직원 정보 가져오기:
$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);
직원 추가:
$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;

로그인 후 복사

}

출석 기록 가져오기:
$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);
시계:
$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. 프런트 엔드 개발:

직원 목록 표시, 직원 추가 및 기록 기록을 위한 Vue 구성 요소를 만듭니다.
在Vue组件中，发送HTTP请求并获取数据：
인기 튜토리얼
더>
관련 튜토리얼

인기 추천

최신 강좌
- 초보자의 구세주: PHP7 기본 구문의 빠른 미리보기
  
  105685
- Vue 3.0 신규 실기 강좌 - 시즌 2
  
  63231
- 최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)
  
  1414817 학습 시간
- JAVA 초보자용 비디오 튜토리얼
  
  2460636 학습 시간
- Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼
  
  502520 학습 시간
- 웹 프론트 엔드 개발에 대한 빠른 소개
  
  215149 학습 시간
- PS 비디오 튜토리얼을 처음부터 마스터하세요
  
  872857 학습 시간
- [웹 프런트엔드] Node.js 빠른 시작
  
  6087 학습 시간
- 해외 웹 개발 풀스택 강좌 총집합
  
  4637 학습 시간
- Go 언어 실습 GraphQL
  
  3996 학습 시간
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
  
  595 학습 시간
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
  
  20379 학습 시간
최신 다운로드
더>
웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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

직원 목록

직원 추가

펀치 -기록 중