Berikut ini adalah contoh sederhana codingan login website menggunakan HTML, CSS, dan PHP. Website ini terdiri dari tiga file utama: index.html, style.css, dan login.php.
1. File index.html
Ini adalah halaman login sederhana.
html<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
2. File style.css
Ini adalah file CSS untuk memberikan sedikit gaya pada halaman login.
css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
border: none;
border-radius: 3px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
3. File login.php
Ini adalah file PHP untuk memproses login.
php
<?php
// Dummy data for demonstration
$valid_username = "user";
$valid_password = "password";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $valid_username && $password == $valid_password) {
echo "<h2>Login successful!</h2>";
} else {
echo "<h2>Invalid username or password!</h2>";
}
} else {
echo "<h2>Invalid request method!</h2>";
}
?>
Cara Kerja
index.html: Halaman ini menampilkan form login.style.css: Mengatur tampilan halaman login.login.php: File ini memproses input dari form login. Jika username dan password yang dimasukkan sesuai dengan data yang disimpan, login akan berhasil. Jika tidak, pesan error akan ditampilkan.
Instruksi Penggunaan
- Buat tiga file dengan nama
index.html,style.css, danlogin.php. - Copy dan paste kode yang sesuai ke masing-masing file.
- Simpan ketiga file di dalam folder yang sama.
- Jalankan
index.htmldi browser.
Website ini sangat sederhana dan hanya untuk tujuan pembelajaran. Untuk penggunaan nyata, pastikan untuk menyimpan dan memproses data pengguna dengan aman, menggunakan enkripsi dan teknik lainnya sesuai standar keamanan web.
Tidak ada komentar:
Posting Komentar