290 lines
10 KiB
HTML
290 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test API untuk Flutter Web</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.container {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
h1 {
|
|
color: #667eea;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
font-size: 28px;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 14px;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 18px;
|
|
margin: 10px 0;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
|
}
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
.result {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.success {
|
|
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
|
color: #155724;
|
|
border-left: 5px solid #28a745;
|
|
}
|
|
.error {
|
|
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
|
|
color: #721c24;
|
|
border-left: 5px solid #dc3545;
|
|
}
|
|
.info {
|
|
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
|
|
color: #0c5460;
|
|
border-left: 5px solid #17a2b8;
|
|
}
|
|
.loader {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #667eea;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 20px auto;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.info-box {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
.info-box strong {
|
|
color: #667eea;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.info-box code {
|
|
background: #2d3748;
|
|
color: #68d391;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
pre {
|
|
background: #2d3748;
|
|
color: #68d391;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
margin: 10px 0;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
.badge.ok { background: #28a745; color: white; }
|
|
.badge.fail { background: #dc3545; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🌐 Test API - Flutter Web</h1>
|
|
<p class="subtitle">Test koneksi API untuk Flutter Web (Chrome)</p>
|
|
|
|
<div class="info-box">
|
|
<strong>📍 API Endpoint:</strong>
|
|
<code>http://localhost/TugasAkhir/sim-pkpps/public/api/v1/login</code>
|
|
</div>
|
|
|
|
<button class="btn-primary" onclick="testLogin()">
|
|
<span style="font-size: 24px;">🔐</span>
|
|
<span>Test Login API</span>
|
|
</button>
|
|
|
|
<div id="result"></div>
|
|
|
|
<div class="info-box" style="margin-top: 20px;">
|
|
<strong>📝 Credentials untuk Test:</strong>
|
|
Username: <code>Aydin Fauzan</code><br>
|
|
Password: <code>s002</code>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>✅ Checklist:</strong><br>
|
|
• XAMPP Apache running<br>
|
|
• Laravel di htdocs/TugasAkhir/sim-pkpps<br>
|
|
• Database connection OK<br>
|
|
• CORS config allow all origins
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showResult(html, type = 'info') {
|
|
const resultDiv = document.getElementById('result');
|
|
resultDiv.innerHTML = `<div class="result ${type}">${html}</div>`;
|
|
}
|
|
|
|
function showLoader() {
|
|
document.getElementById('result').innerHTML = '<div class="loader"></div>';
|
|
}
|
|
|
|
async function testLogin() {
|
|
showLoader();
|
|
|
|
const apiUrl = 'http://localhost/TugasAkhir/sim-pkpps/public/api/v1/login';
|
|
const credentials = {
|
|
id_santri: 'Aydin Fauzan',
|
|
password: 's002'
|
|
};
|
|
|
|
try {
|
|
console.log('Sending request to:', apiUrl);
|
|
console.log('Credentials:', credentials);
|
|
|
|
const response = await fetch(apiUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(credentials)
|
|
});
|
|
|
|
console.log('Response status:', response.status);
|
|
|
|
const data = await response.json();
|
|
console.log('Response data:', data);
|
|
|
|
if (data.success) {
|
|
const tokenPreview = data.token.substring(0, 40) + '...';
|
|
showResult(`
|
|
<div style="text-align: center; margin-bottom: 15px;">
|
|
<span style="font-size: 48px;">✅</span>
|
|
<h2 style="color: #28a745; margin: 10px 0;">LOGIN BERHASIL!</h2>
|
|
</div>
|
|
<strong>🎫 Token:</strong><br>
|
|
<code style="word-break: break-all;">${tokenPreview}</code><br><br>
|
|
<strong>👤 User:</strong> ${data.user.name}<br>
|
|
<strong>🎭 Role:</strong> ${data.user.role}<br>
|
|
<strong>📚 Santri:</strong> ${data.santri.nama_lengkap}<br>
|
|
<strong>🆔 NIS:</strong> ${data.santri.nis}<br><br>
|
|
<div style="background: #fff3cd; padding: 10px; border-radius: 8px; margin-top: 15px;">
|
|
<strong>🎉 API berfungsi dengan baik!</strong><br>
|
|
Sekarang Flutter Web sudah bisa login.<br>
|
|
<strong>Hot Restart</strong> Flutter app Anda.
|
|
</div>
|
|
`, 'success');
|
|
} else {
|
|
showResult(`
|
|
<strong>❌ Login Gagal</strong><br><br>
|
|
<strong>Message:</strong> ${data.message || 'Unknown error'}<br><br>
|
|
<strong>Kemungkinan:</strong><br>
|
|
• Username atau password salah<br>
|
|
• Data tidak ada di database<br>
|
|
• Role bukan 'wali' atau 'santri'
|
|
`, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
|
|
let errorMsg = `
|
|
<strong>❌ KONEKSI GAGAL</strong><br><br>
|
|
<strong>Error:</strong> ${error.message}<br><br>
|
|
`;
|
|
|
|
if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
|
|
errorMsg += `
|
|
<strong>Penyebab:</strong><br>
|
|
• XAMPP Apache tidak running<br>
|
|
• URL salah<br>
|
|
• CORS policy blocked<br><br>
|
|
<strong>Solusi:</strong><br>
|
|
1. Buka XAMPP Control Panel<br>
|
|
2. Start Apache<br>
|
|
3. Test akses: <a href="http://localhost/TugasAkhir/sim-pkpps/public" target="_blank">http://localhost/TugasAkhir/sim-pkpps/public</a><br>
|
|
4. Refresh halaman ini dan coba lagi
|
|
`;
|
|
} else {
|
|
errorMsg += `
|
|
<strong>Coba:</strong><br>
|
|
1. Buka Developer Tools (F12)<br>
|
|
2. Lihat tab Console untuk detail error<br>
|
|
3. Lihat tab Network untuk request detail
|
|
`;
|
|
}
|
|
|
|
showResult(errorMsg, 'error');
|
|
}
|
|
}
|
|
|
|
// Info awal
|
|
window.addEventListener('load', () => {
|
|
showResult(`
|
|
<strong>👆 Klik tombol di atas untuk test API</strong><br><br>
|
|
Test ini akan:<br>
|
|
• Kirim request login ke Laravel API<br>
|
|
• Verifikasi CORS configuration<br>
|
|
• Cek response dari server<br>
|
|
• Tampilkan hasilnya
|
|
`, 'info');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|