buatkan tampilan lebih menarik, php, metode post
Saya akan membuat tampilan login yang lebih menarik dengan desain modern dan pemrosesan PHP. Berikut adalah implementasinya:
index.php
proses.php
dashboard.php
logout.php
Sistem ini menggunakan metode POST seperti yang diminta dan memberikan pengalaman login yang modern dan elegan!
Buatlah form login dengan melakukan include pada halaman web anda yang akan menampilkan nama anda, email, jam, hari, dan tanggal login setelah login tanpa menggunakan database dengan menggunakan method get atau post! Dari soal nomor satu, buatlah halaman lain untuk redirect yang menunjukkan bahwa data tidak lengkap ketika user tidak memasukkan nama atau email pada saat login! Gunakan bootstrap untuk memperindah halaman web. tampilannya harus menarik dan user friendly
Saya akan membuat sistem login lengkap dengan include files dan halaman error untuk data tidak lengkap. Berikut implementasinya:
<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo isset($page_title) ? $page_title : 'Sistem Login Elegan'; ?></title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
pointer-events: none;
z-index: 0;
}
.main-container {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.navbar {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar-brand {
font-weight: 700;
color: white !important;
font-size: 1.5rem;
}
.nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-link:hover {
color: white !important;
transform: translateY(-2px);
}
.content-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 20px 40px rgba(0,0,0,0.1),
0 15px 25px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow:
0 25px 50px rgba(0,0,0,0.15),
0 20px 30px rgba(0,0,0,0.1);
}
.form-control {
border: 2px solid #e1e5e9;
border-radius: 15px;
padding: 15px 20px 15px 50px;
font-size: 16px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.8);
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
background: white;
}
.input-group {
position: relative;
}
.input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
z-index: 10;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
border-radius: 15px;
padding: 15px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}
.btn-danger {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
border: none;
border-radius: 15px;
padding: 12px 25px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
}
.alert {
border-radius: 15px;
border: none;
padding: 20px;
margin-bottom: 25px;
}
.floating-shapes {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.shape:nth-child(1) {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.shape:nth-child(2) {
width: 120px;
height: 120px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.shape:nth-child(3) {
width: 60px;
height: 60px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
@media (max-width: 768px) {
.glass-card {
margin: 20px;
}
}
</style>
</head>
<body>
<div class="floating-shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
<div class="main-container">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.php">
<i class="fas fa-shield-alt me-2"></i>
Sistem Login Elegan
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true): ?>
<li class="nav-item">
<a class="nav-link" href="dashboard.php">
<i class="fas fa-tachometer-alt me-1"></i>Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">
<i class="fas fa-sign-out-alt me-1"></i>Logout
</a>
</li>
<?php else: ?>
<li class="nav-item">
<a class="nav-link" href="index.php">
<i class="fas fa-sign-in-alt me-1"></i>Login
</a>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</nav></div> <!-- End main-container -->
<!-- Footer -->
<footer class="text-center py-4" style="background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.8); position: relative; z-index: 1;">
<div class="container">
<p class="mb-0">
<i class="fas fa-heart text-danger me-1"></i>
Dibuat dengan cinta menggunakan PHP & Bootstrap
<i class="fas fa-heart text-danger ms-1"></i>
</p>
<small class="text-muted">© <?php echo date('Y'); ?> Sistem Login Elegan. All rights reserved.</small>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Animasi saat halaman dimuat
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.glass-card');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100 + (index * 100));
});
});
// Efek ripple pada tombol
document.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function(e) {
let ripple = document.createElement('span');
let rect = this.getBoundingClientRect();
let size = Math.max(rect.width, rect.height);
let x = e.clientX - rect.left - size / 2;
let y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.classList.add('ripple');
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
</script>
<style>
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
</style>
</body>
</html><?php
$page_title = "Login - Sistem Login Elegan";
include 'header.php';
?>
<div class="content-wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-7 col-sm-9">
<div class="glass-card p-5">
<div class="text-center mb-4">
<div class="login-icon mx-auto mb-3" style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);">
<i class="fas fa-user-circle text-white" style="font-size: 35px;"></i>
</div>
<h2 class="fw-bold text-dark mb-2">Selamat Datang</h2>
<p class="text-muted">Silakan masuk ke akun Anda</p>
</div>
<?php
// Tampilkan pesan error jika ada
if (isset($_GET['error'])) {
echo '<div class="alert alert-danger" role="alert">';
echo '<i class="fas fa-exclamation-triangle me-2"></i>';
switch ($_GET['error']) {
case 'empty':
echo 'Semua field harus diisi!';
break;
case 'invalid_email':
echo 'Format email tidak valid!';
break;
case 'incomplete':
echo 'Data tidak lengkap! Silakan isi semua field.';
break;
default:
echo 'Terjadi kesalahan!';
}
echo '</div>';
}
// Tampilkan pesan sukses jika ada
if (isset($_GET['success'])) {
echo '<div class="alert alert-success" role="alert">';
echo '<i class="fas fa-check-circle me-2"></i>';
echo 'Logout berhasil! Terima kasih telah menggunakan sistem kami.';
echo '</div>';
}
?>
<form action="proses_login.php" method="POST" id="loginForm">
<div class="mb-4">
<label for="nama" class="form-label fw-semibold text-dark">
<i class="fas fa-user me-2 text-primary"></i>Nama Lengkap
</label>
<div class="input-group">
<i class="fas fa-user input-icon"></i>
<input type="text"
class="form-control"
id="nama"
name="nama"
placeholder="Masukkan nama lengkap Anda"
value="<?php echo isset($_GET['nama']) ? htmlspecialchars($_GET['nama']) : ''; ?>">
</div>
</div>
<div class="mb-4">
<label for="email" class="form-label fw-semibold text-dark">
<i class="fas fa-envelope me-2 text-primary"></i>Alamat Email
</label>
<div class="input-group">
<i class="fas fa-envelope input-icon"></i>
<input type="email"
class="form-control"
id="email"
name="email"
placeholder="contoh@email.com"
value="<?php echo isset($_GET['email']) ? htmlspecialchars($_GET['email']) : ''; ?>">
</div>
</div>
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary">
<i class="fas fa-sign-in-alt me-2"></i>
Masuk ke Sistem
</button>
</div>
</form>
<div class="text-center">
<small class="text-muted">
<i class="fas fa-info-circle me-1"></i>
Sistem demo - masukkan nama dan email untuk login
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Validasi form client-side
document.getElementById('loginForm').addEventListener('submit', function(e) {
const nama = document.getElementById('nama').value.trim();
const email = document.getElementById('email').value.trim();
if (!nama || !email) {
e.preventDefault();
// Tampilkan alert dengan animasi
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-warning alert-dismissible fade show';
alertDiv.innerHTML = `
<i class="fas fa-exclamation-triangle me-2"></i>
Semua field harus diisi!
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
const form = document.getElementById('loginForm');
form.insertBefore(alertDiv, form.firstChild);
// Auto hide alert setelah 3 detik
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.remove();
}
}, 3000);
return false;
}
// Validasi email sederhana
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
e.preventDefault();
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-warning alert-dismissible fade show';
alertDiv.innerHTML = `
<i class="fas fa-exclamation-triangle me-2"></i>
Format email tidak valid!
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
const form = document.getElementById('loginForm');
form.insertBefore(alertDiv, form.firstChild);
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.remove();
}
}, 3000);
return false;
}
});
// Efek focus pada input
document.querySelectorAll('.form-control').forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.querySelector('.input-icon').style.color = '#667eea';
});
input.addEventListener('blur', function() {
this.parentElement.querySelector('.input-icon').style.color = '#999';
});
});
</script>
<?php include 'footer.php'; ?><?php
session_start();
// Cek apakah request menggunakan metode POST
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
header('Location: index.php?error=invalid_method');
exit();
}
// Ambil data dari form
$nama = isset($_POST['nama']) ? trim($_POST['nama']) : '';
$email = isset($_POST['email']) ? trim($_POST['email']) : '';
// Validasi input kosong - redirect ke halaman error
if (empty($nama) || empty($email)) {
// Redirect ke halaman error dengan data yang sudah diisi
$redirect_url = 'error.php?type=incomplete';
if (!empty($nama)) {
$redirect_url .= '&nama=' . urlencode($nama);
}
if (!empty($email)) {
$redirect_url .= '&email=' . urlencode($email);
}
header('Location: ' . $redirect_url);
exit();
}
// Validasi format email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
header('Location: index.php?error=invalid_email&nama=' . urlencode($nama) . '&email=' . urlencode($email));
exit();
}
// Sanitasi data
$nama = htmlspecialchars($nama, ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($email, ENT_QUOTES, 'UTF-8');
// Set timezone Indonesia
date_default_timezone_set('Asia/Jakarta');
// Simpan data ke session
$_SESSION['logged_in'] = true;
$_SESSION['user_name'] = $nama;
$_SESSION['user_email'] = $email;
$_SESSION['login_time'] = date('H:i:s');
$_SESSION['login_date'] = date('d-m-Y');
$_SESSION['login_day'] = date('l');
// Konversi hari ke bahasa Indonesia
$days_id = [
'Sunday' => 'Minggu',
'Monday' => 'Senin',
'Tuesday' => 'Selasa',
'Wednesday' => 'Rabu',
'Thursday' => 'Kamis',
'Friday' => 'Jumat',
'Saturday' => 'Sabtu'
];
$_SESSION['login_day_id'] = $days_id[$_SESSION['login_day']];
// Log aktivitas login
$log_entry = date('Y-m-d H:i:s') . " - Login berhasil: $nama ($email)" . PHP_EOL;
if (!file_exists('logs')) {
mkdir('logs', 0777, true);
}
file_put_contents('logs/login_log.txt', $log_entry, FILE_APPEND | LOCK_EX);
// Redirect ke dashboard
header('Location: dashboard.php');
exit();
?><?php
$page_title = "Error - Data Tidak Lengkap";
include 'header.php';
// Ambil data dari URL jika ada
$nama = isset($_GET['nama']) ? htmlspecialchars($_GET['nama']) : '';
$email = isset($_GET['email']) ? htmlspecialchars($_GET['email']) : '';
$error_type = isset($_GET['type']) ? $_GET['type'] : 'unknown';
?>
<div class="content-wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="glass-card p-5 text-center">
<!-- Error Icon -->
<div class="error-icon mx-auto mb-4" style="width: 100px; height: 100px; background: linear-gradient(135deg, #ff6b6b, #ee5a52); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 30px rgba(255, 107, 107, 0.3);">
<i class="fas fa-exclamation-triangle text-white" style="font-size: 40px;"></i>
</div>
<h2 class="fw-bold text-danger mb-3">
<i class="fas fa-times-circle me-2"></i>
Data Tidak Lengkap!
</h2>
<div class="alert alert-danger" role="alert">
<h5 class="alert-heading">
<i class="fas fa-exclamation-circle me-2"></i>
Oops! Ada yang terlewat
</h5>
<p class="mb-3">
Untuk dapat masuk ke sistem, Anda harus mengisi semua field yang diperlukan.
</p>
<hr>
<p class="mb-0">
<strong>Field yang diperlukan:</strong>
</p>
<ul class="list-unstyled mt-2 mb-0">
<li class="<?php echo empty($nama) ? 'text-danger' : 'text-success'; ?>">
<i class="fas <?php echo empty($nama) ? 'fa-times' : 'fa-check'; ?> me-2"></i>
Nama Lengkap <?php echo !empty($nama) ? '(' . $nama . ')' : '(Belum diisi)'; ?>
</li>
<li class="<?php echo empty($email) ? 'text-danger' : 'text-success'; ?>">
<i class="fas <?php echo empty($email) ? 'fa-times' : 'fa-check'; ?> me-2"></i>
Alamat Email <?php echo !empty($email) ? '(' . $email . ')' : '(Belum diisi)'; ?>
</li>
</ul>
</div>
<!-- Informasi yang sudah diisi -->
<?php if (!empty($nama) || !empty($email)): ?>
<div class="card border-info mb-4">
<div class="card-header bg-info text-white">
<i class="fas fa-info-circle me-2"></i>
Data yang sudah Anda isi:
</div>
<div class="card-body">
<?php if (!empty($nama)): ?>
<p class="card-text">
<strong>Nama:</strong> <?php echo $nama; ?>
<i class="fas fa-check text-success ms-2"></i>
</p>
<?php endif; ?>
<?php if (!empty($email)): ?>
<p class="card-text mb-0">
<strong>Email:</strong> <?php echo $email; ?>
<i class="fas fa-check text-success ms-2"></i>
</p>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<!-- Tombol aksi -->
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
<a href="index.php<?php echo (!empty($nama) || !empty($email)) ? '?nama=' . urlencode($nama) . '&email=' . urlencode($email) : ''; ?>"
class="btn btn-primary btn-lg">
<i class="fas fa-arrow-left me-2"></i>
Kembali ke Form Login
</a>
</div>
<!-- Tips -->
<div class="mt-4 p-3 bg-light rounded-3">
<h6 class="text-muted mb-2">
<i class="fas fa-lightbulb me-2"></i>
Tips:
</h6>
<small class="text-muted">
Pastikan Anda mengisi nama lengkap dan alamat email yang valid untuk dapat masuk ke sistem.
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Animasi error icon
document.addEventListener('DOMContentLoaded', function() {
const errorIcon = document.querySelector('.error-icon');
if (errorIcon) {
errorIcon.style.animation = 'shake 0.5s ease-in-out';
}
});
// CSS untuk animasi shake
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
`;
document.head.appendChild(style);
// Auto focus pada field yang kosong saat kembali ke form
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('nama') && !urlParams.get('email')) {
// Jika nama ada tapi email kosong, focus ke email
localStorage.setItem('focusField', 'email');
} else if (!urlParams.get('nama')) {
// Jika nama kosong, focus ke nama
localStorage.setItem('focusField', 'nama');
}
</script>
<?php include 'footer.php'; ?>Sistem ini memenuhi semua requirement yang diminta dengan tampilan yang sangat menarik dan user-friendly menggunakan Bootstrap!
sesuaikan hasilnya sebagai pemula tapi tampilan bagus dan user friendly