Scribd
Upload
4 views16 pages

Presensi Terbaru

The document outlines the structure and design of a school attendance system web application. It includes HTML and CSS for user interface elements such as login and signup forms, user dashboards, and attendance lists. The application supports multiple user roles including students, teachers, and administrators, and features functionality for managing user data and attendance records.

Uploaded by

iechastan23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views16 pages

Presensi Terbaru

The document outlines the structure and design of a school attendance system web application. It includes HTML and CSS for user interface elements such as login and signup forms, user dashboards, and attendance lists. The application supports multiple user roles including students, teachers, and administrators, and features functionality for managing user data and attendance records.

Uploaded by

iechastan23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

<!

DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Presensi Sekolah</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, #1a73e8, #6ec1e4);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}

.container {
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 450px;
overflow: hidden;
position: relative;
}

.header {
background: linear-gradient(135deg, #1a73e8, #1e88e5);
color: white;
text-align: center;
padding: 25px 20px;
position: relative;
}

.header h1 {
font-size: 24px;
margin-bottom: 10px;
}

.header p {
font-size: 14px;
opacity: 0.9;
}

.school-icon {
font-size: 40px;
margin-bottom: 15px;
color: white;
}
.form-container {
padding: 25px;
}

.form-group {
margin-bottom: 20px;
position: relative;
}

label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
border-color: #1a73e8;
outline: none;
}

button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #1a73e8, #1e88e5);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 10px;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(26, 115, 232, 0.4);
}

.logout-btn {
background: linear-gradient(135deg, #e53935, #e57373);
max-width: 200px;
margin: 20px auto;
}

.logout-btn:hover {
box-shadow: 0 5px 15px rgba(229, 57, 53, 0.4);
}

.secondary-btn {
background: linear-gradient(135deg, #78909c, #b0bec5);
}

.secondary-btn:hover {
box-shadow: 0 5px 15px rgba(120, 144, 156, 0.4);
}

.message {
text-align: center;
margin-top: 20px;
color: #e53935;
font-size: 14px;
min-height: 20px;
}

.success-message {
color: #43a047;
}

.dashboard {
text-align: center;
padding: 20px;
}

.dashboard-content {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
text-align: left;
}

.hidden {
display: none;
}

.user-info {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

.user-avatar {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #1a73e8, #1e88e5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
font-weight: bold;
margin-right: 15px;
}

.user-details {
text-align: left;
}

.welcome-text {
font-size: 22px;
margin-bottom: 10px;
color: #333;
}

.info-text {
color: #666;
margin-bottom: 5px;
}

.attendance-form {
margin: 20px 0;
}

.attendance-list {
margin-top: 20px;
max-height: 300px;
overflow-y: auto;
}

.attendance-item {
padding: 12px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}

.attendance-item:last-child {
border-bottom: none;
}

.present {
color: #43a047;
}

.absent {
color: #e53935;
}

.late {
color: #ff8f00;
}

.role-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
margin-left: 8px;
background: #1a73e8;
color: white;
}

.teacher-role {
background: #ff8f00;
}

.student-role {
background: #43a047;
}

.admin-role {
background: #6a1b9a;
}

.form-toggle {
text-align: center;
margin-top: 20px;
padding: 10px;
border-top: 1px solid #eee;
}

.form-toggle a {
color: #1a73e8;
text-decoration: none;
cursor: pointer;
font-weight: 500;
}

.form-toggle a:hover {
text-decoration: underline;
}

.password-toggle {
position: absolute;
right: 15px;
top: 45px;
cursor: pointer;
color: #777;
}

@media (max-width: 480px) {


.container {
max-width: 100%;
}

.header {
padding: 20px 15px;
}

.form-container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="school-icon">
<i class="fas fa-school"></i>
</div>
<h1>Sistem Presensi Sekolah</h1>
<p>SMK NEGERI 1 BANGUN NEGARA</p>
</div>

<!-- Form Login -->


<div id="login-form">
<div class="form-container">
<div class="form-group">
<label for="login-role">Login Sebagai</label>
<select id="login-role">
<option value="student">Siswa</option>
<option value="teacher">Guru</option>
<option value="admin">Administrator</option>
</select>
</div>
<div class="form-group">
<label for="login-username">Username</label>
<input type="text" id="login-username" placeholder="Masukkan
username" required>
</div>
<div class="form-group">
<label for="login-password">Password</label>
<input type="password" id="login-password"
placeholder="Masukkan password" required>
<span class="password-toggle" id="login-password-toggle">
<i class="fas fa-eye"></i>
</span>
</div>
<button id="login-btn"><i class="fas fa-sign-in-alt"></i>
Login</button>
<p id="login-message" class="message"></p>

<div class="form-toggle">
<p>Belum punya akun? <a id="show-signup">Daftar di sini</a></p>
</div>
</div>
</div>

<!-- Form Sign Up -->


<div id="signup-form" class="hidden">
<div class="form-container">
<h2 style="text-align: center; margin-bottom: 20px; color:
#333;">Form Pendaftaran</h2>
<div class="form-group">
<label for="signup-role">Daftar Sebagai</label>
<select id="signup-role">
<option value="student">Siswa</option>
<option value="teacher">Guru</option>
</select>
</div>
<div class="form-group">
<label for="signup-fullname">Nama Lengkap</label>
<input type="text" id="signup-fullname" placeholder="Masukkan
nama lengkap" required>
</div>
<div class="form-group">
<label for="signup-email">Email</label>
<input type="email" id="signup-email" placeholder="Masukkan
email" required>
</div>
<div class="form-group">
<label for="signup-username">Username</label>
<input type="text" id="signup-username" placeholder="Buat
username" required>
</div>
<div class="form-group">
<label for="signup-password">Password</label>
<input type="password" id="signup-password" placeholder="Buat
password" required>
<span class="password-toggle" id="signup-password-toggle">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="form-group">
<label for="signup-confirm-password">Konfirmasi
Password</label>
<input type="password" id="signup-confirm-password"
placeholder="Konfirmasi password" required>
<span class="password-toggle" id="confirm-password-toggle">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="form-group" id="student-fields">
<label for="signup-nis">NIS</label>
<input type="text" id="signup-nis" placeholder="Nomor Induk
Siswa">
</div>
<div class="form-group" id="teacher-fields" style="display: none;">
<label for="signup-nip">NIP</label>
<input type="text" id="signup-nip" placeholder="Nomor Induk
Pegawai">
</div>
<button id="signup-btn"><i class="fas fa-user-plus"></i>
Daftar</button>
<p id="signup-message" class="message"></p>

<div class="form-toggle">
<p>Sudah punya akun? <a id="show-login">Login di sini</a></p>
</div>
</div>
</div>

<!-- Dashboard setelah login -->


<div id="dashboard" class="hidden">
<div class="form-container">
<div class="user-info">
<div class="user-avatar" id="user-avatar">S</div>
<div class="user-details">
<div class="welcome-text">Halo, <span
id="user-name"></span> <span id="role-badge" class="role-tag
student-role">Siswa</span></div>
<div class="info-text" id="user-id">NIS: 123456</div>
<div class="info-text" id="class-info">Kelas: XII RPL
1</div>
</div>
</div>

<div class="dashboard-content">
<h3><i class="fas fa-calendar-check"></i> Presensi Hari
Ini</h3>
<div id="dashboard-content">
<!-- Konten akan diisi berdasarkan peran pengguna -->
</div>
</div>

<button id="logout-btn" class="logout-btn"><i class="fas fa-sign-


out-alt"></i> Logout</button>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Elemen DOM
const loginForm = document.getElementById('login-form');
const signupForm = document.getElementById('signup-form');
const dashboard = document.getElementById('dashboard');
const loginRoleSelect = document.getElementById('login-role');
const signupRoleSelect = document.getElementById('signup-role');
const loginUsernameInput = document.getElementById('login-username');
const loginPasswordInput = document.getElementById('login-password');
const signupUsernameInput = document.getElementById('signup-username');
const signupPasswordInput = document.getElementById('signup-password');
const signupConfirmPasswordInput = document.getElementById('signup-
confirm-password');
const loginBtn = document.getElementById('login-btn');
const signupBtn = document.getElementById('signup-btn');
const logoutBtn = document.getElementById('logout-btn');
const loginMessage = document.getElementById('login-message');
const signupMessage = document.getElementById('signup-message');
const userNameSpan = document.getElementById('user-name');
const userAvatar = document.getElementById('user-avatar');
const userIdSpan = document.getElementById('user-id');
const classInfoSpan = document.getElementById('class-info');
const roleBadge = document.getElementById('role-badge');
const dashboardContent = document.getElementById('dashboard-content');
const showSignupLink = document.getElementById('show-signup');
const showLoginLink = document.getElementById('show-login');
const studentFields = document.getElementById('student-fields');
const teacherFields = document.getElementById('teacher-fields');

// Toggle password visibility


const loginPasswordToggle = document.getElementById('login-password-
toggle');
const signupPasswordToggle = document.getElementById('signup-password-
toggle');
const confirmPasswordToggle = document.getElementById('confirm-
password-toggle');

// Data pengguna
let users = JSON.parse(localStorage.getItem('presenceUsers')) || {
student: [
{
username: 'siswa1',
password: 'siswa123',
name: 'Budi Santoso',
email: '[email protected]',
id: 'NIS: 2022001',
class: 'Kelas: XII RPL 1',
avatarColor: '#1a73e8'
},
{
username: 'siswa2',
password: 'siswa123',
name: 'Siti Rahayu',
email: '[email protected]',
id: 'NIS: 2022002',
class: 'Kelas: XII RPL 2',
avatarColor: '#6ec1e4'
}
],
teacher: [
{
username: 'guru1',
password: 'guru123',
name: 'Dr. Ahmad, M.Pd',
email: '[email protected]',
id: 'NIP: 198011012000121001',
class: 'Guru Matematika',
avatarColor: '#ff8f00'
},
{
username: 'guru2',
password: 'guru123',
name: 'Dewi Anggraeni, S.Pd',
email: '[email protected]',
id: 'NIP: 198502142006042001',
class: 'Wali Kelas XII RPL 1',
avatarColor: '#ffb300'
}
],
admin: [
{
username: 'admin',
password: 'admin123',
name: 'Administrator',
email: '[email protected]',
id: 'ID: ADM001',
class: 'Staff Administrasi',
avatarColor: '#6a1b9a'
}
]
};

// Data presensi contoh


const sampleAttendance = [
{ name: 'Budi Santoso', time: '07:15', status: 'present' },
{ name: 'Siti Rahayu', time: '07:25', status: 'present' },
{ name: 'Ahmad Fauzi', time: '07:45', status: 'late' },
{ name: 'Dewi Lestari', time: '-', status: 'absent' },
{ name: 'Rudi Hermawan', time: '07:10', status: 'present' }
];

// Informasi login yang bisa digunakan


const loginInfo = {
student: "Login sebagai Siswa: siswa1/siswa123 atau
siswa2/siswa123",
teacher: "Login sebagai Guru: guru1/guru123 atau guru2/guru123",
admin: "Login sebagai Admin: admin/admin123"
};

// Tampilkan info login berdasarkan peran yang dipilih


loginRoleSelect.addEventListener('change', function() {
loginMessage.textContent = loginInfo[this.value];
});

// Toggle form fields berdasarkan role di signup


signupRoleSelect.addEventListener('change', function() {
if (this.value === 'student') {
studentFields.style.display = 'block';
teacherFields.style.display = 'none';
} else {
studentFields.style.display = 'none';
teacherFields.style.display = 'block';
}
});

// Toggle password visibility


loginPasswordToggle.addEventListener('click', function() {
togglePasswordVisibility(loginPasswordInput, this);
});

signupPasswordToggle.addEventListener('click', function() {
togglePasswordVisibility(signupPasswordInput, this);
});

confirmPasswordToggle.addEventListener('click', function() {
togglePasswordVisibility(signupConfirmPasswordInput, this);
});

function togglePasswordVisibility(input, toggle) {


if (input.type === 'password') {
input.type = 'text';
toggle.innerHTML = '<i class="fas fa-eye-slash"></i>';
} else {
input.type = 'password';
toggle.innerHTML = '<i class="fas fa-eye"></i>';
}
}

// Tampilkan info login awal


loginMessage.textContent = loginInfo[loginRoleSelect.value];

// Toggle antara form login dan signup


showSignupLink.addEventListener('click', function() {
loginForm.classList.add('hidden');
signupForm.classList.remove('hidden');
signupMessage.textContent = '';
});
showLoginLink.addEventListener('click', function() {
signupForm.classList.add('hidden');
loginForm.classList.remove('hidden');
loginMessage.textContent = loginInfo[loginRoleSelect.value];
});

// Cek status login saat halaman dimuat


checkLoginStatus();

// Event listener untuk tombol login


loginBtn.addEventListener('click', login);

// Event listener untuk tombol signup


signupBtn.addEventListener('click', signup);

// Event listener untuk tombol logout


logoutBtn.addEventListener('click', logout);

// Event listener untuk tekan Enter pada form


loginUsernameInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') login();
});

loginPasswordInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') login();
});

// Fungsi untuk mengecek status login


function checkLoginStatus() {
const isLoggedIn = localStorage.getItem('isLoggedIn');
const username = localStorage.getItem('username');
const role = localStorage.getItem('role');
const loginTimestamp = localStorage.getItem('loginTime');

if (isLoggedIn === 'true' && username && role) {


// Cari data pengguna
const user = users[role].find(u => u.username === username);
if (user) {
showDashboard(user, role, loginTimestamp);
}
}
}

// Fungsi untuk proses login


function login() {
const role = loginRoleSelect.value;
const username = loginUsernameInput.value.trim();
const password = loginPasswordInput.value.trim();

// Validasi input
if (!username || !password) {
showLoginMessage('Username dan password harus diisi', true);
return;
}

// Cari pengguna yang sesuai


const user = users[role].find(u => u.username === username &&
u.password === password);
if (user) {
// Simpan status login di localStorage
const timestamp = new Date().toLocaleString('id-ID');
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', user.username);
localStorage.setItem('role', role);
localStorage.setItem('loginTime', timestamp);

// Tampilkan dashboard
showDashboard(user, role, timestamp);
} else {
showLoginMessage('Username atau password salah', true);
}
}

// Fungsi untuk proses signup


function signup() {
const role = signupRoleSelect.value;
const fullname = document.getElementById('signup-
fullname').value.trim();
const email = document.getElementById('signup-email').value.trim();
const username = signupUsernameInput.value.trim();
const password = signupPasswordInput.value.trim();
const confirmPassword = signupConfirmPasswordInput.value.trim();
const nis = document.getElementById('signup-nis').value.trim();
const nip = document.getElementById('signup-nip').value.trim();

// Validasi input
if (!fullname || !email || !username || !password || !
confirmPassword) {
showSignupMessage('Semua field harus diisi', true);
return;
}

if (password !== confirmPassword) {


showSignupMessage('Password dan konfirmasi password tidak
cocok', true);
return;
}

if (password.length < 6) {
showSignupMessage('Password minimal 6 karakter', true);
return;
}

// Cek apakah username sudah ada


const usernameExists = Object.values(users).some(roleUsers =>
roleUsers.some(user => user.username === username)
);

if (usernameExists) {
showSignupMessage('Username sudah digunakan', true);
return;
}

// Buat user baru


const newUser = {
username: username,
password: password,
name: fullname,
email: email,
id: role === 'student' ? `NIS: ${nis}` : `NIP: ${nip}`,
class: role === 'student' ? 'Kelas: Baru' : 'Guru Baru',
avatarColor: role === 'student' ? '#1a73e8' : '#ff8f00'
};

// Tambahkan user ke data


users[role].push(newUser);

// Simpan ke localStorage
localStorage.setItem('presenceUsers', JSON.stringify(users));

// Tampilkan pesan sukses


showSignupMessage('Pendaftaran berhasil! Silakan login.', false);

// Reset form
document.getElementById('signup-fullname').value = '';
document.getElementById('signup-email').value = '';
signupUsernameInput.value = '';
signupPasswordInput.value = '';
signupConfirmPasswordInput.value = '';
document.getElementById('signup-nis').value = '';
document.getElementById('signup-nip').value = '';

// Kembali ke form login setelah 2 detik


setTimeout(() => {
signupForm.classList.add('hidden');
loginForm.classList.remove('hidden');
loginMessage.textContent = 'Silakan login dengan akun baru
Anda';
loginMessage.classList.add('success-message');
}, 2000);
}

// Fungsi untuk proses logout


function logout() {
// Hapus status login dari localStorage
localStorage.removeItem('isLoggedIn');
localStorage.removeItem('username');
localStorage.removeItem('role');
localStorage.removeItem('loginTime');

// Tampilkan form login


showLoginForm();
}

// Fungsi untuk menampilkan dashboard


function showDashboard(user, role, timestamp) {
loginForm.classList.add('hidden');
signupForm.classList.add('hidden');
dashboard.classList.remove('hidden');
userNameSpan.textContent = user.name;
userIdSpan.textContent = user.id;
classInfoSpan.textContent = user.class;

// Set avatar user


userAvatar.textContent = user.name.charAt(0);
userAvatar.style.background = user.avatarColor;

// Set badge peran


roleBadge.textContent = role === 'student' ? 'Siswa' : (role ===
'teacher' ? 'Guru' : 'Admin');
roleBadge.className = 'role-tag ' + role + '-role';

// Tampilkan konten berdasarkan peran


if (role === 'student') {
showStudentDashboard();
} else if (role === 'teacher') {
showTeacherDashboard();
} else if (role === 'admin') {
showAdminDashboard();
}
}

// Fungsi untuk menampilkan dashboard siswa


function showStudentDashboard() {
const now = new Date();
const currentTime = now.toLocaleTimeString('id-ID');
const currentDate = now.toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

dashboardContent.innerHTML = `
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; color: #333; margin-bottom:
5px;">${currentDate}</div>
<div style="font-size: 24px; font-weight: bold; color:
#1a73e8;">${currentTime}</div>
</div>
<p>Status presensi hari ini: <span class="present" style="font-
weight: bold;">TELAH HADIR</span></p>
<p>Waktu presensi: 07:15:32</p>
<div style="margin-top: 20px; padding: 15px; background:
#e8f5e9; border-radius: 8px;">
<h4><i class="fas fa-info-circle"></i> Informasi
Presensi</h4>
<p>Jam masuk: 07:00</p>
<p>Jam pulang: 15:30</p>
</div>
`;
}

// Fungsi untuk menampilkan dashboard guru


function showTeacherDashboard() {
dashboardContent.innerHTML = `
<h4><i class="fas fa-list-alt"></i> Daftar Presensi Kelas XII
RPL 1</h4>
<p>Tanggal: ${new Date().toLocaleDateString('id-ID')}</p>
<div class="attendance-list">
${sampleAttendance.map(student => `
<div class="attendance-item">
<div>${student.name}</div>
<div class="${student.status}">
${student.status === 'present' ? 'Hadir (' +
student.time + ')' :
student.status === 'late' ? 'Terlambat (' +
student.time + ')' : 'Tidak Hadir'}
</div>
</div>
`).join('')}
</div>
<div style="margin-top: 20px;">
<button><i class="fas fa-download"></i> Ekspor Data
Presensi</button>
</div>
`;
}

// Fungsi untuk menampilkan dashboard admin


function showAdminDashboard() {
dashboardContent.innerHTML = `
<h4><i class="fas fa-cog"></i> Panel Administrasi</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap:
10px; margin: 20px 0;">
<button style="padding: 12px;"><i class="fas fa-users"></i>
Kelola Siswa</button>
<button style="padding: 12px;"><i class="fas fa-chalkboard-
teacher"></i> Kelola Guru</button>
<button style="padding: 12px;"><i class="fas fa-calendar-
alt"></i> Kelola Jadwal</button>
<button style="padding: 12px;"><i class="fas fa-file-
export"></i> Ekspor Data</button>
</div>
<div style="background: #f5f5f5; padding: 15px; border-radius:
8px;">
<h4><i class="fas fa-chart-bar"></i> Statistik Presensi
Hari Ini</h4>
<p>Total Siswa: 35</p>
<p>Hadir: 28 (80%)</p>
<p>Terlambat: 4 (11%)</p>
<p>Tidak Hadir: 3 (9%)</p>
</div>
`;
}

// Fungsi untuk menampilkan form login


function showLoginForm() {
dashboard.classList.add('hidden');
signupForm.classList.add('hidden');
loginForm.classList.remove('hidden');

// Reset form
loginUsernameInput.value = '';
loginPasswordInput.value = '';
loginMessage.textContent = loginInfo[loginRoleSelect.value];
loginMessage.classList.remove('success-message');
}

// Fungsi untuk menampilkan pesan login


function showLoginMessage(message, isError = false) {
loginMessage.textContent = message;
loginMessage.style.color = isError ? '#e53935' : '#43a047';
// Hapus pesan setelah 3 detik
setTimeout(() => {
loginMessage.textContent = loginInfo[loginRoleSelect.value];
loginMessage.style.color = '#e53935';
}, 3000);
}

// Fungsi untuk menampilkan pesan signup


function showSignupMessage(message, isError = false) {
signupMessage.textContent = message;
signupMessage.style.color = isError ? '#e53935' : '#43a047';

if (!isError) {
signupMessage.classList.add('success-message');
} else {
signupMessage.classList.remove('success-message');
}
}
});
</script>
</body>
</html>

You might also like