Php - Dalam era digital saat ini, sistem manual seperti absensi karyawan menggunakan kertas mulai ditinggalkan. Banyak organisasi dan perusahaan beralih ke sistem absensi digital yang lebih efisien dan akurat. Salah satu solusi sederhana dan efektif adalah membangun aplikasi absensi berbasis web menggunakan PHP, MySQL, dan CSS.
Untuk langkah pembuatan Aplikasi Absensi Sederhana Menggunakan Php, MySQL Dan Css, langkahnya sebagai berikut ;
- Buat stuktur file Aplikasi Absensi Sederhana Menggunakan Php, MySQL Dan Css, seperti di bawah ini
- Kemudian buat file koneksi database dengan nama db.php, kodingan di bawah ini <?php$host = "localhost";$user = "root";$pass = "";$db = "absensi_db";$conn = new mysqli($host, $user, $pass, $db);if ($conn->connect_error) {die("Koneksi gagal: " . $conn->connect_error);}?>
- Setelah membuat file koneksi, sekrang anda buat Struktur Tabel MySQL, sperti di bawah ini CREATE DATABASE IF NOT EXISTS absensi_db;USE absensi_db;CREATE TABLE IF NOT EXISTS absensi (id INT AUTO_INCREMENT PRIMARY KEY,nama VARCHAR(100) NOT NULL,waktu DATETIME DEFAULT CURRENT_TIMESTAMP);
- Sekarang kita buat file halaman utama dengan nama index.php , kodingan di bawah ini <?php include 'db.php'; ?><!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><title>Absensi Sederhana</title><link rel="stylesheet" href="style.css"></head><body><div class="container"><h1>Form Absensi</h1><form action="proses.php" method="POST"><input type="text" name="nama" placeholder="Masukkan nama Anda" required><button type="submit">Absen Sekarang</button></form><h2>Daftar Absensi</h2><table><tr><th>No</th><th>Nama</th><th>Waktu</th></tr><?php$sql = "SELECT * FROM absensi ORDER BY waktu DESC";$result = $conn->query($sql);$no = 1;while ($row = $result->fetch_assoc()) {echo "<tr><td>{$no}</td><td>{$row['nama']}</td><td>{$row['waktu']}</td></tr>";$no++;}?></table></div></body></html>
- Untuk memproses penyimanan data jangan lupa kita buat file proses.php, , kodingan di bawah ini <?phpinclude 'db.php';if ($_SERVER["REQUEST_METHOD"] == "POST") {$nama = htmlspecialchars($_POST['nama']);$stmt = $conn->prepare("INSERT INTO absensi (nama) VALUES (?)");$stmt->bind_param("s", $nama);$stmt->execute();header("Location: index.php");exit();}?>
- Dan untuk mempercantik sebuah aplikasi absensi sederhana ini jangan lupa kita buat gaya tampilan dengan nama file style.css , kodingan di bawah ini body {font-family: Arial, sans-serif;background: #f4f4f4;margin: 0;padding: 0;}.container {width: 600px;margin: 50px auto;background: white;padding: 30px;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}h1, h2 {text-align: center;color: #333;}form {display: flex;justify-content: center;margin-bottom: 30px;}input[type="text"] {padding: 10px;width: 60%;margin-right: 10px;border: 1px solid #ccc;border-radius: 4px;}button {padding: 10px 15px;background: #28a745;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background: #218838;}table {width: 100%;border-collapse: collapse;margin-top: 10px;}th, td {padding: 10px;border: 1px solid #ddd;text-align: center;}tr:nth-child(even) {background-color: #f9f9f9;}
Cara Menjalankan
- Letakkan folder absensi-app di dalam folder htdocs (XAMPP).
- Buat database & tabel seperti di atas (gunakan phpMyAdmin).
- Akses di browser: http://localhost/absensi-app/
Sampai jumpa di postingan berikutnya .....!
Aplikasi Absensi Sederhana Menggunakan Php, MySQL Dan Css
Php - Dalam era digital saat ini, sistem manual seperti absensi karyawan menggunakan kertas mulai ditinggalkan. Banyak organisasi dan perusa...
mangdulpat
Friday, August 22, 2025