kidino/index.html

## index.html
<!--
    Ini adalah kod daripada video Youtube yang saya buat untuk
    mencuba realtime database menggunakan Pocketbase. Pocketbase
    ada sistem backend yang memudahkan pembangunan API,
    pengurusan pengguna, pengurusan data, dll. Pocketbase
    dibangunkan dengan bahasa Go.

    Untuk mencuba kod ini, tonton video YouTube bagaimana ia
    digunakan bersama Pocketbase.

    https://youtu.be/G-FuOvZZsyQ
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
</head>
<body>
    <h1>Pocketbase Demo</h1>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>DESCRIPTION</th>
                <th>DATE</th>
                <th>TYPE</th>
            </tr>
        </thead>
        <tbody id="courses_list">
        </tbody>
    </table>

<script type="module">
    import PocketBase from '/js/pocketbase/pocketbase.es.mjs'

    const pb = new PocketBase('http://localhost:8090');

    const courses = await pb.collection('courses').getList(1,20,{})

    courses.items.forEach(function(item){
        document.getElementById('courses_list').innerHTML +=
        `<tr id="${item.id}">
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.description}</td>
            <td>${item.event_date}</td>
            <td>${item.type}</td>
        </tr>`
    })

    pb.collection('courses').subscribe('*', function(e){
        console.log(e.action)
        console.log(e.record)

        switch(e.action) {
            case 'create' :
                document.getElementById('courses_list').innerHTML +=
        `<tr id="${e.record.id}">
            <td>${e.record.id}</td>
            <td>${e.record.name}</td>
            <td>${e.record.description}</td>
            <td>${e.record.date}</td>
            <td>${e.record.type}</td>
        </tr>`
                break
            case 'update' :
                document.getElementById(e.record.id).outerHTML =
        `<tr id="${e.record.id}">
            <td>${e.record.id}</td>
            <td>${e.record.name}</td>
            <td>${e.record.description}</td>
            <td>${e.record.date}</td>
            <td>${e.record.type}</td>
        </tr>`
                break
            case 'delete' :
                document.getElementById(e.record.id).remove()
                break
        }
    })

</script>
</body>
</html>
	<!--
	Ini adalah kod daripada video Youtube yang saya buat untuk
	mencuba realtime database menggunakan Pocketbase. Pocketbase
	ada sistem backend yang memudahkan pembangunan API,
	pengurusan pengguna, pengurusan data, dll. Pocketbase
	dibangunkan dengan bahasa Go.

	Untuk mencuba kod ini, tonton video YouTube bagaimana ia
	digunakan bersama Pocketbase.

	https://youtu.be/G-FuOvZZsyQ
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>App</title>
	</head>
	<body>
	<h1>Pocketbase Demo</h1>

	<table border="1">
	<thead>
	<tr>
	<th>ID</th>
	<th>NAME</th>
	<th>DESCRIPTION</th>
	<th>DATE</th>
	<th>TYPE</th>
	</tr>
	</thead>
	<tbody id="courses_list">
	</tbody>
	</table>

	<script type="module">
	import PocketBase from '/js/pocketbase/pocketbase.es.mjs'

	const pb = new PocketBase('http://localhost:8090');

	const courses = await pb.collection('courses').getList(1,20,{})

	courses.items.forEach(function(item){
	document.getElementById('courses_list').innerHTML +=
	`<tr id="${item.id}">
	<td>${item.id}</td>
	<td>${item.name}</td>
	<td>${item.description}</td>
	<td>${item.event_date}</td>
	<td>${item.type}</td>
	</tr>`
	})

	pb.collection('courses').subscribe('*', function(e){
	console.log(e.action)
	console.log(e.record)

	switch(e.action) {
	case 'create' :
	document.getElementById('courses_list').innerHTML +=
	`<tr id="${e.record.id}">
	<td>${e.record.id}</td>
	<td>${e.record.name}</td>
	<td>${e.record.description}</td>
	<td>${e.record.date}</td>
	<td>${e.record.type}</td>
	</tr>`
	break
	case 'update' :
	document.getElementById(e.record.id).outerHTML =
	`<tr id="${e.record.id}">
	<td>${e.record.id}</td>
	<td>${e.record.name}</td>
	<td>${e.record.description}</td>
	<td>${e.record.date}</td>
	<td>${e.record.type}</td>
	</tr>`
	break
	case 'delete' :
	document.getElementById(e.record.id).remove()
	break
	}
	})

	</script>
	</body>
	</html>