PHP와 Vue를 사용하여 온라인 직원 출석 펀치 기록 쿼리를 개발하는 방법

PHP와 Vue를 사용하여 직원 출석에 대한 온라인 펀치인 기록 쿼리를 개발하는 방법

현대 기업에서 직원 출석 관리는 매우 중요한 작업입니다. 기존의 수동 기록은 오류가 발생하기 쉽고 쿼리 및 통계에 불편합니다. PHP와 Vue의 강력한 기능을 사용하여 온라인 직원 출석 펀치 기록 쿼리 시스템을 개발하여 출석 관리를 보다 효율적이고 편리하며 정확하게 만들 수 있습니다.

1. 프로젝트 준비
시작하기 전에 다음 개발 환경과 도구를 준비해야 합니다.

• PHP 개발 환경(예: XAMPP)
• 텍스트 편집기(예: Sublime Text, Visual Studio Code 등) )
• A MySQL 데이터베이스
• Vue.js 개발 환경(Vue CLI 사용 가능)

2. 데이터베이스 설계
직원 정보와 출근 기록을 저장할 MySQL 데이터베이스를 만들어야 합니다. 직원과 출석이라는 두 개의 테이블이 포함된 "attendance_management"라는 데이터베이스를 디자인합니다. 직원 테이블은 ID(자동 증가 기본 키), 이름(직원 이름), 부서(소속 부서) 등의 필드를 포함하여 직원의 기본 정보를 저장하는 데 사용됩니다. 출석 테이블은 id(자동 증가 기본 키), Employee_id(직원 ID), check_in_time(시간), check_out_time(시간) 등의 필드를 포함하여 출석 기록을 저장하는 데 사용됩니다.

3. 백엔드 개발

1. "attendance_management"라는 프로젝트 폴더를 만듭니다.
2. 배경 관련 코드를 저장하기 위해 프로젝트 폴더 아래에 "backend"라는 폴더를 만듭니다.
3. 백엔드 폴더 아래에 "config"라는 폴더를 생성하여 구성 파일을 저장합니다.
4. 백엔드 폴더 아래에 "api"라는 폴더를 만들어 API 관련 코드를 저장하세요.
5. 데이터베이스 연결 정보를 구성하려면 config 폴더에 "database.php"라는 파일을 생성하세요.

return [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

6. 직원 관련 API 요청을 처리하려면 api 폴더 아래에 "employees.php"라는 파일을 생성하세요.

require_once '../config/database.php';

class Employees {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?>

7. api 폴더에 "attendance.php"라는 파일을 생성합니다. File , 출석 관련 API 요청을 처리하는 데 사용됩니다.

require_once '../config/database.php';

수업 출석 {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?>

4 프론트엔드 개발

1. 에서 명령줄을 엽니다. 프로젝트 폴더에서 다음 명령을 실행하여 Vue CLI를 설치합니다(Node.js가 설치되어 있는지 확인해야 함):

npm install -g @vue/cli

2. 프로젝트 폴더에서 다음 명령을 실행하여 Vue를 생성합니다. "frontend"라는 프로젝트:

vue create frontend

3. frontend 폴더에 들어가서 다음 명령을 실행하여 Vue Router 및 Axios를 설치합니다.

cd frontend
npm install vue-router axios

4. 라는 파일을 생성합니다. Vue 구성 요소를 저장하는 데 사용되는 frontend/src 디렉터리 " 폴더의 "composites"입니다.
5. 출석 기록을 표시하려면 구성 요소 폴더 아래에 "Attendance.vue"라는 파일을 만듭니다.

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script><br>frontend/src/router/index.js 파일에서 기본 {</script>

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

};

6. 내보내기 라우팅 구성을 추가합니다.

'vue'에서 Vue 가져오기;
'vue-router'에서 VueRouter 가져오기;
'../comComponents/Attendance.vue'에서 출석 가져오기;

Vue.use(VueRouter);

const 경로 = [

{
    path: '/',
    name: 'Attendance',
    component: Attendance
}

];

const router = new VueRouter({

mode: 'history',
base: process.env.BASE_URL,
routes

});

export default router;

5. 프로젝트를 실행하세요

1. 먼저 PHP 개발 환경(예: XAMPP)을 시작하고 다음을 확인하세요. 데이터베이스 연결이 정상입니다.
2. 백엔드 폴더 아래에 ".htaccess"라는 파일을 생성하여 URL 재작성을 구성합니다.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

3. 프런트엔드 폴더에서 다음을 실행합니다. Vue 프로젝트 실행 명령:

npm run submit

4. 브라우저를 열고 http://localhost:8080을 방문하여 직원 출석 기록 인터페이스를 확인하세요.
5. 직원을 선택한 후 해당 페이지에서는 해당 직원의 ID를 기반으로 백엔드 API를 호출하여 해당 직원의 펀치 인 기록을 얻어 테이블에 표시합니다.

위의 개발 단계를 통해 우리는 PHP와 Vue를 사용하여 개발된 온라인 직원 근태 기록 조회 시스템을 성공적으로 구현했습니다. 사용자는 직원을 선택하여 자신의 출석 기록을 확인할 수 있어 근태 관리의 효율성이 향상될 뿐만 아니라 인적 오류 발생도 줄어듭니다. 동시에 이 프로젝트는 풀 스택 개발을 위해 PHP와 Vue를 결합하는 방법에 대한 기본 단계와 기술 포인트도 보여줍니다. 이 글이 여러분에게 도움이 되기를 바라며 프로그래밍에 행운이 있기를 바랍니다!

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