index.html (2415B) download
1<html lang="en">
2<head>
3 <meta charset="UTF-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Frontend demo</title>
7
8 <style>
9 body {font-family: Arial, Helvetica, sans-serif;}
10 form {border: 3px solid #f1f1f1; text-align:center;}
11 h2 { text-align:center; }
12
13 input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }
14 button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 70%; }
15 button:hover { opacity: 0.8; }
16 .container { padding: 16px; }
17 #result { font-size:2rem; text-align:center; }
18 </style>
19</head>
20<body>
21
22 <h2>Frontend demo 👋</h2>
23
24 <p>Start in deze directory een nieuwe host binnen hetzelfde domein als waarop je de backend hebt draaien, maar op een andere poort (bijvoorbeeld <tt>php -S localhost:8080</tt>. Als je de frontend op een ander domein draait, of gewoon als bestand op je file-system opent, krijg je <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors">CORS-errors</a>.</p>
25
26 <p>Deze pagina checkt de verbinding met de backend. Als je hieronder de datum van vandaag te zien krijgt, is de verbinding ok. Er wordt namelijk een call gedaan naar <tt>localhost:8000/frontend</tt>, die de datum van vandaag als json teruggeeft.</p>
27
28 <p>Je kunt hetzelfde ook bereiken door op de knop hieronder te klikken. Check eventueel de console als je denkt dat er dingen niet goed gaan.</p>
29
30 <form>
31 <button id="btn" value="">Check de connectie</button>
32 </form>
33
34 <p id="result"></p>
35
36</body>
37
38<script>
39
40 const check = () => {
41 fetch('http://localhost:8000/frontend')
42 .then( resp => resp.json() )
43 .then( json => {
44 console.log(json)
45 let datum = new Date(json['date']).toLocaleDateString('NL-nl', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'} )
46 document.getElementById('result').innerHTML = json['message']
47 document.getElementById('result').innerHTML += `<br/>De huidige datum is ${datum}`
48 })
49 }
50
51 check()
52 document.getElementById('btn').addEventListener('click', c => check() )
53</script>
54</html>