Heim > Backend-Entwicklung > PHP-Tutorial > So entwickeln Sie ein Online-Anwesenheitssystem für Mitarbeiter mit PHP und Vue

So entwickeln Sie ein Online-Anwesenheitssystem für Mitarbeiter mit PHP und Vue

WBOY
Freigeben: 2023-09-25 14:02:01
Original
763 Leute haben es durchsucht

So entwickeln Sie ein Online-Anwesenheitssystem für Mitarbeiter mit PHP und Vue

So verwenden Sie PHP und Vue, um ein Online-Anwesenheitssystem für Mitarbeiter zu entwickeln

Das Anwesenheitssystem ist eines der wichtigen Tools für die Unternehmensverwaltung. Es kann Unternehmen dabei helfen, die Anwesenheit von Mitarbeitern in Echtzeit zu überwachen und die Arbeitseffizienz und das Managementniveau zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe des PHP- und Vue-Frameworks ein einfaches Online-Anwesenheitssystem für Mitarbeiter entwickeln und spezifische Codebeispiele bereitstellen.

1. Umgebungsvorbereitung:
Bevor Sie beginnen, müssen Sie die folgende Software und Tools installieren:

  1. PHP-Umgebung: Stellen Sie sicher, dass PHP in Ihrer Entwicklungsumgebung installiert ist und PHP-Skripte ausführen kann.
  2. MySQL-Datenbank: Das Anwesenheitssystem muss eine Datenbank verwenden, um Mitarbeiterinformationen und Anwesenheitsaufzeichnungen zu speichern. Sie müssen MySQL installieren und eine Datenbank erstellen, um relevante Daten zu speichern.
  3. Vue.js: Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Sie müssen Vue.js in Ihr Projekt einführen und seine grundlegende Verwendung verstehen.

2. Datenbanktabellen erstellen:
Um Mitarbeiterinformationen und Anwesenheitsdatensätze zu speichern, müssen wir zwei Datenbanktabellen erstellen: Mitarbeitertabelle und Anwesenheitsdatensatztabelle.

  1. Mitarbeitertabellenstruktur:
    CREATE TABLE Mitarbeiter (
    id INT AUTO_INCREMENT PRIMARY KEY,
    Name VARCHAR(100) NOT NULL,
    Abteilung VARCHAR(100) NOT NULL
    );
  2. Anwesenheitsdatensatztabellenstruktur:
    CREATE TABLE Anwesenheit (
    id int auto_increment Primärschlüssel,
    Amployee_id int nicht null,
    clock_in datetime nicht null,
    clock_out dateTime,
    foreign Key (Employee_id) Referenzen Mitarbeiter (ID)
    );

3. Back-End-Entwicklung:

  1. Erstellen Sie eine PHP-Datei als Backend-Schnittstelle und nennen Sie sie attendance.php.
  2. Mit der Datenbank verbinden:
    $conn = new mysqli("localhost", "username", "password", "database");
    if ($conn->connect_error) {
    die( „Verbindung fehlgeschlagen: „ ($ sql);
    $rows = array();
  3. if ($result->num_rows > 0) {
  4. while($row = $result->fetch_assoc()) {

     $rows[] = $row;
    Nach dem Login kopieren
    Nach dem Login kopieren

    }
    }
    echo json_encode ($rows);


    Mitarbeiter hinzufügen:

    $name = $_POST['name'];
    $department = $_POST['department'];

  5. $sql = "INSERT INTO Mitarbeiter (Name, Abteilung) VALUES ('$name', '$department')";
  6. if ($conn->query($sql) === TRUE) {
    echo "New employee added successfully";
    Nach dem Login kopieren

    } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
    Nach dem Login kopieren
    Nach dem Login kopieren
  7. }


Anwesenheitsaufzeichnungen abrufen:

$sql = "SELECT attendance.*, Angestellte.name FROM Anwesenheit INNER JOIN Mitarbeiter ON Anwesenheit.employee_id = Angestellte.id";

$result = $conn-> query( $sql);

$rows = array();
    if ($result->num_rows > 0) {
  1. while($row = $result->fetch_assoc()) {

     $rows[] = $row;
    Nach dem Login kopieren
    Nach dem Login kopieren

    }
    }
    echo json_encode($rows);


    Einstempeln:

    $employee_id = $_POST['employee_id'];
    $clock_in = $_POST['clock_in'];
    $clock_out = $_POST[ 'clock_out' ];

  2. $sql = "INSERT INTO attendance (employee_id, clock_in, clock_out) VALUES ('$employee_id', '$clock_in', '$clock_out')";
    if ($conn->query ($sql ) === TRUE) {
    echo "Clock in/out recorded successfully";
    Nach dem Login kopieren

    } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
    Nach dem Login kopieren
    Nach dem Login kopieren
  3. }

4. Frontend-Entwicklung:

Erstellen Sie eine Vue-Komponente zum Anzeigen von Mitarbeiterlisten, zum Hinzufügen von Mitarbeitern und zum Einstempeln von Datensätzen.

  • 在Vue组件中,发送HTTP请求并获取数据:

  • Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage