Membuat website jasa pelatihan dengan fitur login membutuhkan beberapa komponen, termasuk frontend, backend, dan database. Di bawah ini adalah contoh sederhana menggunakan HTML, CSS, JavaScript untuk frontend, PHP untuk backend, dan MySQL untuk database.
### 1. Struktur Folder
```
/project-pelatihan
│
├── /css
│ └── style.css
│
├── /js
│ └── script.js
│
├── /php
│ ├── config.php
│ ├── login.php
│ ├── register.php
│ └── dashboard.php
│
├── index.html
└── register.html
```
### 2. Database (MySQL)
Buat database dengan nama `pelatihan_db` dan tabel `users`.
```sql
CREATE DATABASE pelatihan_db;
USE pelatihan_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
password VARCHAR(255) NOT NULL
);
```
### 3. File `config.php`
```php
<?php
$host = 'localhost';
$db = 'pelatihan_db';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$opt = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
$pdo = new PDO($dsn, $user, $pass, $opt);
?>
```
### 4. File `index.html` (Halaman Login)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Jasa Pelatihan</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
<p>Belum punya akun? <a href="register.html">Daftar disini</a></p>
</div>
<script src="js/script.js"></script>
</body>
</html>
```
### 5. File `register.html` (Halaman Daftar)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Jasa Pelatihan</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="register-container">
<h2>Register</h2>
<form id="registerForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Register</button>
</form>
<p>Sudah punya akun? <a href="index.html">Login disini</a></p>
</div>
<script src="js/script.js"></script>
</body>
</html>
```
### 6. File `login.php` (Backend Login)
```php
<?php
session_start();
require 'config.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE username = ?');
$stmt->execute([$username]);
$user = $stmt->fetch();
if ($user && password_verify($password, $user['password'])) {
$_SESSION['user_id'] = $user['id'];
header('Location: dashboard.php');
exit;
} else {
echo "Username atau password salah!";
}
}
?>
```
### 7. File `register.php` (Backend Daftar)
```php
<?php
require 'config.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_BCRYPT);
$stmt = $pdo->prepare('INSERT INTO users (username, email, password) VALUES (?, ?, ?)');
if ($stmt->execute([$username, $email, $password])) {
header('Location: index.html');
exit;
} else {
echo "Gagal mendaftar!";
}
}
?>
```
### 8. File `dashboard.php` (Halaman Dashboard)
```php
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: index.html');
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Jasa Pelatihan</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="dashboard-container">
<h2>Selamat Datang di Jasa Pelatihan</h2>
<p>Ini adalah halaman dashboard Anda.</p>
<a href="logout.php">Logout</a>
</div>
</body>
</html>
```
### 9. File `logout.php` (Logout)
```php
<?php
session_start();
session_destroy();
header('Location: index.html');
exit;
?>
```
### 10. File `css/style.css` (Styling)
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container, .register-container, .dashboard-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
text-align: left;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
p {
margin-top: 15px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
### 11. File `js/script.js` (JavaScript)
```javascript
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('php/login.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
if (data === "Username atau password salah!") {
alert(data);
} else {
window.location.href = 'php/dashboard.php';
}
})
.catch(error => console.error('Error:', error));
});
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('php/register.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
if (data === "Gagal mendaftar!") {
alert(data);
} else {
window.location.href = 'index.html';
}
})
.catch(error => console.error('Error:', error));
});
```
### 12. Penjelasan Singkat
- **Frontend**: HTML dan CSS digunakan untuk membuat tampilan yang menarik, sementara JavaScript digunakan untuk menangani form submission secara asinkron.
- **Backend**: PHP digunakan untuk menangani logika server, seperti autentikasi dan registrasi pengguna.
- **Database**: MySQL digunakan untuk menyimpan data pengguna.
### 13. Cara Menjalankan
1. Pastikan Anda memiliki server lokal seperti XAMPP atau MAMP.
2. Simpan semua file di folder `htdocs` (XAMPP) atau `www` (MAMP).
3. Buka phpMyAdmin dan buat database `pelatihan_db` serta tabel `users`.
4. Buka browser dan akses `http://localhost/project-pelatihan/index.html`.
### 14. Catatan
- Pastikan untuk mengamankan aplikasi dengan validasi input, sanitasi data, dan penggunaan HTTPS.
- Anda dapat menambahkan fitur-fitur lain seperti manajemen pelatihan, pembayaran, dll.
Dengan script ini, Anda memiliki dasar untuk membuat website jasa pelatihan dengan fitur login dan registrasi. Selamat mencoba!
Comments
Post a Comment